/*
 * style.css — WETOS CMMS (Etapa 5)
 * ==================================
 * Estilos específicos de la app que complementan brand.css.
 * brand.css = design system global
 * style.css = overrides y componentes específicos de pantallas
 */

/* ── Login page ─────────────────────────────────────────────── */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0D1F3C 0%, #1565C0 100%);
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(13, 31, 60, 0.35);
}
.login-card .card-header {
  background: #0D1F3C;
  border-bottom: none;
  padding: 1.5rem 1.5rem 1rem;
  text-align: center;
}
.login-card .card-body {
  padding: 1.5rem;
}
.login-brand-name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.5rem;
}
.login-tagline {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* ── Dashboard ──────────────────────────────────────────────── */
.dashboard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: #fff;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(13,31,60,0.08);
}
.dashboard-header .brand-logo {
  flex-shrink: 0;
}
.dashboard-header .brand-info {
  flex: 1;
}
.dashboard-header .brand-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #0D1F3C;
}
.dashboard-header .brand-tagline {
  font-size: 0.75rem;
  color: #78909C;
}

/* ── Work Order detail ──────────────────────────────────────── */
.wo-detail-header {
  background: #fff;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.wo-detail-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0D1F3C;
}

/* ── Photo gallery ──────────────────────────────────────────── */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.photo-item {
  position: relative;
}
.photo-item img.thumb {
  max-height: 110px;
  border-radius: 6px;
  border: 1px solid #DEE2E6;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.15s;
}
.photo-item img.thumb:hover {
  opacity: 0.85;
}

/* ── Scope selector ─────────────────────────────────────────── */
.scope-card {
  border: 2px solid #DEE2E6;
  border-radius: 10px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: center;
}
.scope-card:hover {
  border-color: #1565C0;
  box-shadow: 0 2px 10px rgba(21, 101, 192, 0.15);
}

/* ── Audit log ──────────────────────────────────────────────── */
.audit-action {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  background: #EEF2FF;
  color: #1565C0;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.audit-action.audit-danger {
  background: #FFEBEE;
  color: #C62828;
}
.audit-action.audit-warning {
  background: #FFF8E1;
  color: #E65100;
}

/* ── Certificate status colors in table rows ────────────────── */
tr.cert-expired   { background: rgba(198, 40, 40, 0.04); }
tr.cert-expiring  { background: rgba(245, 124, 0, 0.04); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination .page-link {
  font-size: 0.8rem;
  color: #1565C0;
  border-color: #DEE2E6;
}
.pagination .page-item.active .page-link {
  background: #1565C0;
  border-color: #1565C0;
  color: #fff;
}
.pagination .page-link:hover {
  background: #EEF2FF;
  color: #1251a3;
}

/* ── Misc ───────────────────────────────────────────────────── */
.section-divider {
  border: none;
  border-top: 1px solid #E9ECEF;
  margin: 1.25rem 0;
}