:root {
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --navy-900: #0a1930;
  --navy-800: #0f2043;
  --navy-700: #16305f;

  --blue-600: #2f6fed;
  --blue-700: #2456c9;
  --blue-50: #eef4ff;

  --slate-50: #f6f7fa;
  --slate-100: #eef0f4;
  --slate-200: #e1e5eb;
  --slate-300: #cbd2dc;
  --slate-400: #9aa5b4;
  --slate-500: #6b7688;
  --slate-600: #4b5567;
  --slate-700: #333c4d;
  --slate-900: #171d2b;

  --white: #ffffff;
  --success-bg: #e5f7ec;
  --success-text: #157347;
  --danger-bg: #fdecea;
  --danger-text: #c0341f;
  --danger: #d33d2b;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(10, 20, 50, 0.35);

  --sidebar-w: 264px;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--slate-50);
  color: var(--slate-900);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

h1, h2, h3 { letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0; }

/* =====================================================================
   Login
   ===================================================================== */

.login-body { min-height: 100vh; background: var(--slate-100); }

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.login-brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(47, 111, 237, 0.35), transparent 45%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900) 65%);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-brand::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(47, 111, 237, 0.12);
  right: -180px;
  bottom: -180px;
}

.login-brand-top { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: 0.06em; font-size: 0.8rem; position: relative; z-index: 1; }
.brand-name strong { font-weight: 800; }

.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9px;
}
.brand-mark svg { width: 19px; height: 19px; color: #fff; }

.login-brand-body { position: relative; z-index: 1; }
.login-brand-body h1 { font-size: 2.15rem; font-weight: 800; margin: 2.5rem 0 0.75rem; letter-spacing: -0.02em; line-height: 1.2; }
.login-brand-body p { color: rgba(255, 255, 255, 0.72); font-size: 0.98rem; max-width: 380px; line-height: 1.6; margin: 0; }

.login-features { list-style: none; padding: 0; margin: 2.25rem 0 0; display: flex; flex-direction: column; gap: 0.9rem; }
.login-features li { display: flex; align-items: center; gap: 0.65rem; color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; }
.login-features svg { width: 22px; height: 22px; flex: none; padding: 4px; background: rgba(47, 111, 237, 0.35); border-radius: 50%; color: #a7c4ff; }

.login-brand-footer { color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; position: relative; z-index: 1; }

.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: var(--white); min-width: 0; }
.login-mobile-brand {
  display: none;
  width: 100%;
  text-align: center;
  margin-bottom: 2rem;
}
.login-mobile-brand .brand-mark { display: inline-flex; vertical-align: middle; margin-right: 0.5rem; background: var(--navy-900); }
.login-mobile-brand span:last-child { display: inline; vertical-align: middle; font-weight: 700; font-size: 0.9rem; color: var(--navy-900); }

.login-card { width: 100%; max-width: 380px; min-width: 0; }
.login-card h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.login-subtitle { color: var(--slate-500); margin: 0 0 1.75rem; font-size: 0.92rem; }
.login-install-btn { width: 100%; justify-content: center; margin-top: 1rem; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-brand { display: none; }
  .login-mobile-brand { display: block; }
}

/* =====================================================================
   Formularios (compartido)
   ===================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-600);
  min-width: 0;
}

input, select, textarea, button {
  font: inherit;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--slate-200);
  background: var(--white);
  color: var(--slate-900);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-50);
}
textarea { resize: vertical; font-family: inherit; }

button {
  appearance: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--blue-600);
  color: #fff;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
button:hover { background: var(--blue-700); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
button svg { width: 16px; height: 16px; flex: none; }

.btn-block { width: 100%; padding: 0.75rem 1rem; box-shadow: var(--shadow-sm); }
.btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--slate-100); color: var(--slate-700); }
.btn-secondary:hover { background: var(--slate-200); }
/* .btn-secondary en un <a> (ej. el botón de "Crear prenda nueva" en
   Entrada): la regla base "button" de arriba no le aplica a un <a>, así
   que aquí se repite lo mínimo para que se vea igual de botón. */
a.btn-secondary { text-decoration: none; border-radius: var(--radius-sm); padding: 0.65rem 1.1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.15s; }
.btn-ghost { background: transparent; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Checkbox dentro de un .form: por defecto un <label> ahí queda en columna
   (texto arriba, input abajo, ver ".form label" arriba) porque los demás
   campos son inputs de ancho completo; un checkbox necesita ir en fila,
   al lado de su propio texto. */
.form label.checkbox-label { flex-direction: row; align-items: center; gap: 0.5rem; }
.form label.checkbox-label input[type="checkbox"] { width: auto; }

.form-inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.form-inline input { flex: 1; min-width: 140px; }

/* Dos campos por fila (ej. Nombre/Cédula) todavía se leen bien en tablet,
   pero en celular quedan angostos para escribir cómodo -- cada campo pasa
   a ocupar toda la fila. */
@media (max-width: 480px) {
  .form-inline input, .form-inline .file-picker { flex: 1 1 100%; }
}

.panel-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.form-wide { max-width: 680px; }

fieldset {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
legend { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; padding: 0 0.4rem; color: var(--slate-700); }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: 0.72rem; font-weight: 700;
}

.fieldset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .fieldset-grid { grid-template-columns: 1fr; } }

/* Formulario de Entrega: pasos como una lista compacta y continua en vez de
   tarjetas separadas — cada paso es una franja delimitada por una línea, no
   una caja con borde propio. */
.form-wide { gap: 0; }
.form-wide fieldset {
  border: none;
  border-radius: 0;
  padding: 1.1rem 0;
  gap: 0.6rem;
  border-bottom: 1px solid var(--slate-200);
}
.form-wide > fieldset:first-child { padding-top: 0; }
.form-wide > fieldset:last-child { border-bottom: none; padding-bottom: 0; }
.form-wide .fieldset-grid {
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--slate-200);
}
.form-wide .fieldset-grid fieldset { border: none; padding: 0; }
@media (max-width: 640px) {
  .form-wide .fieldset-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

.combobox { position: relative; }
.combobox-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 0.3rem;
}
.combobox-list li {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
}
.combobox-list li:hover { background: var(--blue-50); }
.combobox-list li .combobox-cedula { color: var(--slate-500); font-size: 0.8rem; }
.combobox-list li.combobox-empty { cursor: default; color: var(--slate-500); font-size: 0.85rem; }
.combobox-list li.combobox-empty:hover { background: transparent; }

.employee-info {
  margin: -0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--slate-600);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
}
.employee-info strong { color: var(--slate-900); }

/* =====================================================================
   Entrega: asistente paso a paso (un solo paso visible a la vez)
   ===================================================================== */

.wizard-progress {
  list-style: none; margin: 0 0 1.6rem; padding: 0 0 0.3rem;
  display: flex; align-items: flex-start; gap: 0; overflow-x: auto;
}
.wizard-progress li {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  position: relative; flex: 1; min-width: 62px;
}
.wizard-progress li:not(:last-child)::after {
  content: ''; position: absolute; top: 13px; left: calc(50% + 19px); right: calc(-50% + 19px);
  height: 2px; background: var(--slate-200);
}
.wizard-progress li.done:not(:last-child)::after { background: var(--blue-600); }
.wizard-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--slate-500); font-size: 0.76rem; font-weight: 700;
  border: 2px solid var(--slate-200); z-index: 1; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wizard-progress li.active .wizard-dot,
.wizard-progress li.done .wizard-dot { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.wizard-label { font-size: 0.68rem; color: var(--slate-500); font-weight: 600; text-align: center; white-space: nowrap; }
.wizard-progress li.active .wizard-label { color: var(--blue-700); font-weight: 700; }
.wizard-progress li.done { cursor: pointer; }
.wizard-progress li.done .wizard-label { color: var(--slate-700); }

.form-wide .wizard-panel fieldset { border-bottom: none; padding: 0; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.35rem; }
.wizard-nav .wizard-next, .wizard-nav button[type="submit"] { margin-left: auto; }

.form-msg { min-height: 1.2em; font-size: 0.85rem; margin: 0; font-weight: 500; }
.form-msg.error { color: var(--danger-text); }
.form-msg.success { color: var(--success-text); }

.hidden { display: none !important; }
.muted { color: var(--slate-500); }
.req-star { color: var(--danger-text); font-weight: 700; }

.view-intro { color: var(--slate-500); font-size: 0.92rem; margin: -0.5rem 0 1.25rem; max-width: 640px; }

.view-error {
  background: var(--danger-bg); color: var(--danger-text); border: 1px solid #f5c2bc;
  border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.88rem;
}

/* =====================================================================
   App shell: sidebar + topbar
   ===================================================================== */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  /* Colores de la empresa: verde esmeralda, oscuro arriba y más vivo abajo
     -- sin degradar a blanco (se veía lavado). El text-shadow se hereda a
     todo el texto de adentro (y el filter de abajo a los svg) como refuerzo
     de contraste, aunque con este verde ya no hace tanta falta. */
  background: linear-gradient(180deg, #063d24 0%, #0f8a4f 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(4, 40, 20, 0.4);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}
.sidebar svg { filter: drop-shadow(0 1px 1.5px rgba(4, 40, 20, 0.35)); }

.sidebar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.4rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.sidebar-brand-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.sidebar-brand-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 0.85rem; flex: 1; overflow-y: auto; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a svg { width: 19px; height: 19px; flex: none; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* Página activa: ficha blanca con texto verde -- el contraste "verde y
   blanco" se ve tanto en el fondo del menú como en su propio ítem activo,
   y queda legible sin importar en qué tramo del degradado caiga. */
.sidebar-nav a.active {
  background: #fff;
  color: #063d24;
  text-shadow: none;
  box-shadow: var(--shadow-sm);
}
.sidebar-nav a.active svg { filter: none; }

.nav-group summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  margin-top: 0.35rem;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::marker { content: ''; }
.nav-group summary:hover { color: rgba(255, 255, 255, 0.7); }
.nav-group-chevron { width: 13px; height: 13px; flex: none; margin-left: auto; transition: transform 0.15s ease; }
.nav-group[open] > summary .nav-group-chevron { transform: rotate(90deg); }
.nav-group-items { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-group-items a { padding-left: 2rem; }

.sidebar-footer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; gap: 0.85rem; }
.sidebar-user { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sidebar-user-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--blue-600); color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-user-email { font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer button { width: 100%; justify-content: center; display: flex; align-items: center; gap: 0.5rem; }
.sidebar-footer button svg { width: 16px; height: 16px; }
.sidebar-version { text-align: center; font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); }

.sidebar-toggle {
  display: none;
  background: transparent;
  color: var(--slate-600);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
}
.sidebar-toggle:hover { background: var(--slate-100); }
.sidebar-toggle svg { width: 20px; height: 20px; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 40, 0.55); z-index: 39; }

.app-main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.75rem;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-title { font-size: 1.15rem; font-weight: 700; margin: 0; }

.content { padding: 1.75rem; max-width: 1180px; width: 100%; margin: 0 auto; }

.view { display: none; }
.view.active { display: block; }

@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .content { padding: 1.1rem; }
  .topbar { padding: 0.9rem 1.1rem; }
}

@media (max-width: 480px) {
  .content { padding: 0.85rem; }
  .topbar { padding: 0.75rem 0.85rem; }
  .topbar-title { font-size: 1rem; }
  .panel-card { padding: 1.1rem; }
  .cards { grid-template-columns: 1fr; }
  .modal { padding: 1.1rem; }
  th, td { padding: 0.6rem 0.75rem; }

  /* Los 6 pasos de Entrega no caben con su etiqueta a este ancho -- se
     dejan solo los círculos numerados (la leyenda del paso actual ya dice
     de qué se trata) para que la barra completa quepa sin scroll lateral. */
  .wizard-progress li { min-width: 34px; }
  .wizard-label { display: none; }
  .wizard-dot { width: 22px; height: 22px; font-size: 0.68rem; }
  .wizard-progress li:not(:last-child)::after { left: calc(50% + 15px); right: calc(-50% + 15px); }

  /* Categoría y talla lado a lado quedaban ilegibles (muy angostas); cada
     una pasa a ocupar toda la fila en vez de compartir el ancho. Selector
     más específico que ".linea-row select" (más abajo en el archivo) para
     que gane sin depender del orden. Aplica tanto al asistente de Salida
     como a las líneas de Entrada (esta última no es un wizard). */
  .wizard-panel .linea-row select, #entrada-lineas .linea-row select { flex: 1 1 100%; }
}

/* =====================================================================
   Cards / KPIs
   ===================================================================== */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}
.card-icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon[data-tone="blue"] { background: var(--blue-50); color: var(--blue-600); }
.card-icon[data-tone="green"] { background: var(--success-bg); color: var(--success-text); }
.card-icon[data-tone="amber"] { background: #fef3e0; color: #b06a06; }
.card-icon[data-tone="red"] { background: var(--danger-bg); color: var(--danger-text); }

.card-value { font-size: 1.55rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.card-label { color: var(--slate-500); font-size: 0.82rem; margin-top: 0.15rem; }

a.card-link { text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
a.card-link:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); }

.card-clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.card-clickable:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); }

/* Alerta de stock bajo en el Dashboard: reusa .callout, con la lista de
   prendas de Estadísticas (.low-stock-list) embebida adentro. */
#dashboard-stock-alert { align-items: flex-start; }
#dashboard-stock-alert .low-stock-list { margin: 0.6rem 0; }
#dashboard-stock-alert strong { font-size: 0.92rem; }
.alert-link { color: inherit; font-weight: 700; text-decoration: underline; font-size: 0.82rem; }

.section-heading { margin: 0 0 0.85rem; }

/* Bloques que agrupan KPIs + gráficas de un mismo tipo de dato (ej.
   Comparendos vs. Accidentes vs. Siniestros SST) para que no queden
   todos mezclados en una sola grilla sin distinción visual. */
.st-section {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: 3px solid var(--slate-300);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.st-section[data-tone="amber"] { border-top-color: #e0a415; }
.st-section[data-tone="red"] { border-top-color: var(--danger); }
.st-section[data-tone="green"] { border-top-color: var(--success-text); }
.st-section[data-tone="blue"] { border-top-color: var(--blue-600); }
.st-section-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.st-section-head h2 { font-size: 1.05rem; }
.st-section-head .muted { font-size: 0.82rem; }
.st-section .cards:last-child { margin-bottom: 0; }
.cards--compact { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); }
.st-section .stat-grid:last-child { margin-bottom: 0; }

/* =====================================================================
   Estadísticas: gráficas de inventario
   ===================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr; } }

.chart-card { box-shadow: var(--shadow-md); }

.bar-chart {
  display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.5rem;
  max-height: 420px; overflow-y: auto; padding-right: 0.25rem;
}
.bar-row {
  display: grid; grid-template-columns: minmax(90px, 130px) 1fr 44px;
  align-items: center; gap: 0.7rem; font-size: 0.82rem;
}
.bar-row .bar-label {
  color: var(--slate-600); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { background: var(--slate-100); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill {
  display: block; height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, var(--blue-600), #6fa1ff);
  box-shadow: 0 0 10px rgba(47, 111, 237, 0.45);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bar-row .bar-value {
  text-align: right; font-weight: 700; color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Conductores por ruta -- mini dashboard tipo BI (KPIs + ranking)
   ===================================================================== */

.ruta-dashboard { background: linear-gradient(180deg, var(--slate-50), var(--panel-bg, #fff)); }

.ruta-kpis { display: flex; gap: 0.85rem; flex-wrap: wrap; margin: 0.9rem 0 1.3rem; }
.ruta-kpi {
  flex: 1; min-width: 150px; background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.ruta-kpi-value {
  font-size: 1.35rem; font-weight: 800; color: var(--slate-900);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ruta-kpi-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--slate-500); margin-top: 0.25rem;
}

.ranked-bars {
  display: flex; flex-direction: column; gap: 0.7rem;
  max-height: 420px; overflow-y: auto; padding-right: 0.25rem;
}
.ranked-row { display: flex; align-items: center; gap: 0.8rem; }
.ranked-rank {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--slate-100); color: var(--slate-600);
  font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ranked-row.top-rank .ranked-rank { background: var(--blue-600); color: #fff; }
.ranked-body { flex: 1; min-width: 0; }
.ranked-top-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.3rem; gap: 0.5rem; }
.ranked-label {
  font-weight: 700; color: var(--slate-900); font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ranked-value { font-weight: 800; color: var(--slate-900); font-variant-numeric: tabular-nums; font-size: 0.85rem; flex: none; }
.ranked-pct { color: var(--slate-500); font-weight: 600; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.ranked-track { background: var(--slate-100); border-radius: 999px; height: 8px; overflow: hidden; }
.ranked-fill {
  display: block; height: 100%; border-radius: 999px; width: 0%;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.donut {
  position: relative;
  width: 190px; height: 190px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--slate-200) 0turn);
  box-shadow: 0 0 0 1px var(--slate-200), var(--shadow-md);
  transition: background 1s ease;
}
.donut::before {
  content: '';
  position: absolute; inset: 22%;
  background: var(--white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--slate-100);
}
.donut-center {
  position: absolute; inset: 22%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.donut-center span { font-size: 1.5rem; font-weight: 800; color: var(--slate-900); line-height: 1; font-variant-numeric: tabular-nums; }
.donut-center small { font-size: 0.68rem; color: var(--slate-500); margin-top: 0.15rem; }

.donut-legend {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 0.55rem; font-size: 0.82rem; flex: 1; min-width: 160px; max-height: 190px; overflow-y: auto;
}
.donut-legend li { display: flex; align-items: center; gap: 0.55rem; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.donut-legend .legend-label {
  flex: 1; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donut-legend .legend-value { font-weight: 700; color: var(--slate-900); font-variant-numeric: tabular-nums; }

.low-stock-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.5rem; }
.low-stock-row {
  display: grid; grid-template-columns: 1fr 110px 64px;
  align-items: center; gap: 0.75rem; font-size: 0.85rem;
}
.low-stock-row .lsr-name { color: var(--slate-700); font-weight: 600; }
.low-stock-row .lsr-name small { display: block; color: var(--slate-500); font-weight: 500; font-size: 0.76rem; }
.low-stock-track { background: var(--slate-100); border-radius: 999px; height: 8px; overflow: hidden; }
.low-stock-fill { display: block; height: 100%; border-radius: 999px; width: 0%; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }
.low-stock-fill.critico { background: linear-gradient(90deg, var(--danger), #ff8a75); }
.low-stock-fill.alerta { background: linear-gradient(90deg, #d68a06, #ffc35c); }
.low-stock-row .lsr-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.low-stock-row .lsr-value.critico { color: var(--danger-text); }
.low-stock-row .lsr-value.alerta { color: #8a5a04; }

.empty-note { color: var(--slate-500); font-size: 0.88rem; margin: 0.5rem 0 0; }

@media (max-width: 480px) {
  /* El nombre de categoría casi nunca cabe truncado en una columna angosta
     (ej. "BOTAS GESTORES MOVILIDAD Y SERVICIO"), así que en vez de seguir
     comprimiendo las 3 columnas en una sola fila, el nombre pasa a su
     propia línea completa y la barra + valor quedan debajo. */
  .bar-row, .low-stock-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "track value";
    row-gap: 0.35rem;
    column-gap: 0.6rem;
  }
  .bar-row .bar-label, .low-stock-row .lsr-name { grid-area: label; white-space: normal; }
  .bar-row .bar-track, .low-stock-row .low-stock-track { grid-area: track; }
  .bar-row .bar-value, .low-stock-row .lsr-value { grid-area: value; }
  .donut { width: 150px; height: 150px; }
}

/* =====================================================================
   Toolbar / búsqueda / filtros
   ===================================================================== */

.toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }

.search-input {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  padding: 0 0.75rem; max-width: 360px; width: 100%;
}
.search-input svg { width: 16px; height: 16px; color: var(--slate-400); flex: none; }
.search-input input { border: none; padding: 0.6rem 0; flex: 1; background: transparent; }
.search-input input:focus { box-shadow: none; }

.historico-date-field {
  display: flex; align-items: center; gap: 0.6rem; flex-direction: row !important;
  font-size: 0.82rem; font-weight: 600; color: var(--slate-600);
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
}
.historico-date-field input[type="date"] { border: none; padding: 0; background: transparent; width: auto; font-weight: 700; color: var(--slate-900); }
.historico-date-field input[type="date"]:focus { box-shadow: none; }

/* =====================================================================
   Tablas
   ===================================================================== */

.table-wrap { overflow-x: auto; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--slate-100); white-space: nowrap; }
th { background: var(--slate-50); color: var(--slate-500); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--slate-50); }

/* En celular una tabla ancha obliga a hacer scroll horizontal para leer
   cada dato, que es justo lo que se siente "apretado" y poco de app móvil.
   Cada fila pasa a verse como una tarjeta propia, con el nombre de columna
   (data-label, puesto desde JS) como etiqueta a la izquierda del valor. */
@media (max-width: 640px) {
  .table-wrap { background: transparent; border: none; box-shadow: none; overflow-x: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0 1rem;
    margin-bottom: 0.75rem;
  }
  .table-wrap tbody tr:last-child { margin-bottom: 0; }
  .table-wrap td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--slate-100);
    white-space: normal;
    text-align: right;
  }
  .table-wrap td:last-child { border-bottom: none; }
  .table-wrap td:empty { display: none; }
  .table-wrap td::before {
    content: attr(data-label);
    flex: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--slate-500);
    text-align: left;
  }
  .table-wrap td:not([data-label])::before { content: none; }
  /* Celdas de acciones (sin data-label, uno o más botones): agrupados a
     la derecha en vez de repartidos por los extremos de la fila. */
  .table-wrap td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; }
}

/* =====================================================================
   Firma / cámara
   ===================================================================== */

.signature-canvas {
  width: 100%;
  height: 160px;
  background: repeating-linear-gradient(135deg, var(--slate-50), var(--slate-50) 10px, #f1f3f7 10px, #f1f3f7 11px);
  border: 1.5px dashed var(--slate-300);
  border-radius: var(--radius-sm);
  touch-action: none;
  display: block;
}

.file-picker {
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
  background: var(--slate-100); color: var(--slate-700); border-radius: var(--radius-sm);
  padding: 0.6rem 1rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.file-picker:hover { background: var(--slate-200); }
.file-picker svg { width: 17px; height: 17px; }

.photo-preview { max-width: 200px; border-radius: var(--radius-sm); margin-top: 0.25rem; display: block; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }

.foto-picker-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.foto-picker-avatar, .foto-picker-preview { width: 64px; height: 64px; font-size: 1.25rem; flex: none; }
.foto-picker-preview { border-radius: 50%; object-fit: cover; border: 1px solid var(--slate-200); background: var(--slate-100); }
.foto-picker-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* =====================================================================
   Salida: líneas dinámicas
   ===================================================================== */

.linea-row-wrap { margin-bottom: 0.75rem; }
.linea-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.linea-row select { flex: 1; min-width: 140px; }
.linea-row input[type="number"] { width: 90px; }
.linea-row .linea-remove { background: var(--danger-bg); color: var(--danger-text); padding: 0.5rem 0.7rem; font-size: 0.8rem; }
.linea-row .linea-remove:hover { background: #fbdad6; }
.linea-row input.input-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.linea-warning {
  margin: 0.35rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--danger-text);
}

.linea-field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 140px; }
.linea-field-qty { flex: none; width: 140px; }
.linea-field-label { font-size: 0.72rem; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.03em; }
.linea-row .linea-field-qty input[type="number"] { width: 100%; }

/* Caja informativa en Agregar prenda: indica si el nombre escrito ya
   existe en el catálogo (con sus tallas) o si es una prenda nueva, para
   evitar duplicados por errores de escritura. */
.catalogo-info {
  margin: -0.25rem 0 0;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.catalogo-info.existe { background: var(--success-bg); color: var(--success-text); }
.catalogo-info.nueva { background: #fef3e0; color: #8a5a04; }
.catalogo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.catalogo-chip {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* =====================================================================
   Historial
   ===================================================================== */

.movement-list { display: flex; flex-direction: column; gap: 0.7rem; }
.movement-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font-size: 0.88rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.movement-card:hover { border-color: var(--blue-600); box-shadow: var(--shadow-sm); }

.movement-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--slate-100);
}
.movement-card-fecha { margin-left: auto; font-weight: 700; color: var(--slate-700); }

.movement-card-body { display: flex; flex-direction: column; gap: 0.4rem; }
.movement-card-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.movement-card-label {
  flex: 0 0 auto;
  min-width: 9rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--slate-500);
}
.movement-card-value { color: var(--slate-900); }
.movement-card-foot {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--slate-100);
  font-size: 0.8rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.tag.entrada { background: var(--success-bg); color: var(--success-text); }
.tag.salida { background: var(--danger-bg); color: var(--danger-text); }
.tag.anulado-tag { background: var(--slate-200); color: var(--slate-600); }
.tag.completo { background: var(--success-bg); color: var(--success-text); }
.tag.pendiente { background: #fef3e0; color: #8a5a04; }
.tag.descartado { background: var(--danger-bg); color: var(--danger-text); }

.pp-banner { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; margin-bottom: 1.1rem; }
.pp-banner.pendiente { background: #fef3e0; color: #8a5a04; }
.pp-banner.aprobado { background: var(--success-bg); color: var(--success-text); }

/* =====================================================================
   Perfil sociodemográfico: lista de personas (tarjetas en vez de tabla)
   ===================================================================== */

.person-list { display: flex; flex-direction: column; gap: 0.6rem; }
.person-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius);
  padding: 0.75rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.person-row:hover { border-color: var(--blue-600); box-shadow: var(--shadow-md); }
.person-row:hover { border-left-color: var(--blue-700); }
.person-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--blue-50); color: var(--blue-700);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.person-info { flex: 1; min-width: 0; }
.person-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.person-name {
  font-weight: 700; font-size: 0.9rem; color: var(--slate-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-name-row .tag { padding: 0.1rem 0.5rem; font-size: 0.64rem; }
.person-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.78rem; color: var(--slate-500); margin-top: 0.25rem; }
.person-meta-dates { color: var(--slate-400); }
.person-meta-dates .persona-salida { color: var(--slate-600); }
.person-meta-vehiculo { color: var(--blue-700); font-weight: 600; }
.person-actions { display: flex; gap: 0.5rem; flex: none; }

/* Fila inactiva: antes se apagaba toda la tarjeta con opacity (botón y tags
   ilegibles incluidos); ahora el estado se marca con el borde/fondo y el
   texto se mantiene legible -- el estado se lee en la forma, no solo en el
   texto "Inactivo". */
.person-row.inactivo { background: var(--slate-50); border-left-color: var(--slate-300); }
.person-row.inactivo:hover { border-left-color: var(--slate-400); }
.person-row.inactivo .person-name { color: var(--slate-600); }

#empleados-nuevo-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
@media (max-width: 480px) { #empleados-nuevo-btn { margin-left: 0; width: 100%; justify-content: center; } }

.filtros-avanzados {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.filtros-avanzados summary {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.1rem; cursor: pointer; user-select: none; list-style: none;
  font-weight: 600; font-size: 0.85rem; color: var(--slate-700);
}
.filtros-avanzados summary::-webkit-details-marker { display: none; }
.filtros-avanzados summary svg:first-child { width: 16px; height: 16px; color: var(--slate-400); flex: none; }
.filtros-avanzados summary .nav-group-chevron { width: 13px; height: 13px; color: var(--slate-400); margin-left: auto; transition: transform 0.15s ease; }
.filtros-avanzados[open] summary { border-bottom: 1px solid var(--slate-200); }
.filtros-avanzados[open] summary .nav-group-chevron { transform: rotate(90deg); }

/* Una sola fila compacta (como el toolbar) en vez de un formulario de 2
   columnas con etiqueta arriba de cada campo -- eso ocupaba demasiado
   alto y empujaba la lista de empleados muy abajo. */
.filtros-avanzados-body { padding: 0.9rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.25rem; }
.filtro-inline {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--slate-500); white-space: nowrap;
}
.filtro-inline select, .filtro-inline input { width: auto; min-width: 9.5rem; padding: 0.5rem 0.65rem; }
#empleados-filtros-limpiar { margin-left: auto; }
@media (max-width: 640px) {
  .filtros-avanzados-body { flex-direction: column; align-items: stretch; }
  .filtro-inline { justify-content: space-between; }
  .filtro-inline select, .filtro-inline input { flex: 1 1 auto; min-width: 0; }
  #empleados-filtros-limpiar { margin-left: 0; width: 100%; justify-content: center; }
}

/* =====================================================================
   Ficha de empleado (detalle de solo lectura)
   ===================================================================== */

.detalle-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--slate-200);
}
.detalle-avatar { width: 76px; height: 76px; font-size: 1.5rem; flex: none; }
.detalle-avatar-btn {
  background: none; border: none; padding: 0; border-radius: 50%; flex: none;
  cursor: default; position: relative;
}
.detalle-avatar-btn.clickeable { cursor: pointer; }
.detalle-avatar-btn.clickeable:hover .detalle-avatar { box-shadow: 0 0 0 3px var(--blue-50), 0 0 0 4px var(--blue-600); }
.detalle-avatar-btn.clickeable::after {
  content: ''; position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--blue-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8 5H5a1 1 0 00-1 1v3M12 5h3a1 1 0 011 1v3M8 15H5a1 1 0 01-1-1v-3M12 15h3a1 1 0 001-1v-3' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  border: 2px solid var(--white);
}
.detalle-header-info { flex: 1; min-width: 160px; }
.detalle-nombre { font-size: 1.15rem; font-weight: 800; color: var(--slate-900); line-height: 1.25; }
.detalle-sub { font-size: 0.85rem; color: var(--slate-500); margin-top: 0.15rem; }
.detalle-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tag.activo { background: var(--blue-50); color: var(--blue-700); }
.tag.inactivo-tag { background: var(--slate-200); color: var(--slate-600); }

.detalle-facts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.4rem; }
.detalle-fact {
  flex: 1; min-width: 130px; background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: var(--radius); padding: 0.7rem 1rem;
}
.detalle-fact-value { font-size: 1.2rem; font-weight: 800; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.detalle-fact-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate-500); margin-top: 0.2rem; }

.detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; }
.detalle-field-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate-500); margin-bottom: 0.25rem; }
.detalle-field-value { font-size: 0.9rem; color: var(--slate-900); font-weight: 500; }
.detalle-field-value.pendiente { color: #8a5a04; font-weight: 600; }
.detalle-field-full { grid-column: 1/-1; padding-top: 0.9rem; border-top: 1px solid var(--slate-100); }
@media (max-width: 640px) { .detalle-grid { grid-template-columns: 1fr; } }

/* Perfil sociodemográfico agrupado en tarjetas por sección (en vez de una
   sola grilla plana de ~27 campos) -- cada una con su propio contador de
   pendientes, para ver de un vistazo qué le falta a la ficha. */
.detalle-cards { display: flex; flex-direction: column; gap: 0.9rem; }
.detalle-card {
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: var(--radius); padding: 0.9rem 1.1rem 1.05rem;
}
.detalle-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.85rem; }
.detalle-card-title { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--slate-700); text-transform: uppercase; letter-spacing: 0.03em; }
.detalle-card .detalle-grid { gap: 0.9rem 1.5rem; }

.detalle-list { display: flex; flex-direction: column; gap: 0.5rem; }
.detalle-list-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; flex-wrap: wrap;
}
.detalle-list-item-main { font-weight: 700; color: var(--slate-900); font-size: 0.85rem; }
.detalle-list-item-sub { font-size: 0.78rem; color: var(--slate-500); }

/* Listas de indicadores (cumpleaños próximos, mayores de 50) -- pueden
   crecer bastante más que una ficha de contactos/hijos, así que se limita
   la altura y se deja scroll propio en vez de estirar toda la tarjeta. */
.detalle-list-scroll { max-height: 340px; overflow-y: auto; padding-right: 0.25rem; }

@media (max-width: 640px) {
  .person-row { flex-wrap: wrap; }
  .person-info { flex: 1 1 100%; order: 1; }
  .person-avatar { order: 0; }
  .person-actions { order: 3; margin-left: auto; }
}

.movement-card.anulado { opacity: 0.6; }
.movement-card.anulado .movement-card-fecha { text-decoration: line-through; }

tr.anulado-row { opacity: 0.6; }
tr.anulado-row td:first-child { text-decoration: line-through; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.pagination-info { font-size: 0.82rem; color: var(--slate-600); text-align: center; }
@media (max-width: 480px) {
  .movement-card-label { min-width: 100%; }
  .movement-card-fecha { margin-left: 0; flex-basis: 100%; }
}

/* =====================================================================
   Modal
   ===================================================================== */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 20, 40, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.modal {
  background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem;
  max-width: 540px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative;
  box-shadow: var(--shadow-lg);
}
/* Visor de factura (PDF/imagen) en Facturas: necesita más ancho que el
   detalle de movimiento para que el documento se lea sin tener que abrirlo
   aparte. Se agrega/quita desde JS (ver js/views/facturas.js _verArchivo). */
.modal.modal-wide { max-width: 880px; }
.modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem; background: transparent; color: var(--slate-400);
  font-size: 1.4rem; line-height: 1; padding: 0.3rem 0.6rem; border-radius: 50%;
}
.modal-close:hover { background: var(--slate-100); color: var(--slate-700); }

.modal-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-right: 1.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--slate-200);
}
.modal-header-fecha { margin-left: auto; font-weight: 700; font-size: 1.02rem; color: var(--slate-900); }

.modal-section + .modal-section { margin-top: 1.1rem; }
.modal-section-title {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
}
.modal-observaciones { margin: 0; color: var(--slate-700); }

.evidencia-grid { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.evidencia-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
}
.evidencia-label { font-size: 0.76rem; font-weight: 600; color: var(--slate-600); }
.evidencia-item img {
  max-width: 170px;
  max-height: 170px;
  object-fit: contain;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.evidencia-item:hover img { border-color: var(--blue-600); }

/* =====================================================================
   Update banner
   ===================================================================== */

.update-banner {
  background: #fff4d6; color: #7a4b06; padding: 0.65rem 1rem; text-align: center; font-size: 0.85rem;
  display: flex; gap: 0.85rem; align-items: center; justify-content: center; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 60;
}
.update-banner button { background: #7a4b06; padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.update-banner button:hover { background: #5c3a06; }

/* =====================================================================
   Conexión e indicador de carga global -- se inyectan solos por JS
   (js/connectivity.js, js/loading-overlay.js), así que viven fuera del
   flujo normal del documento en vez de en app.html/index.html/
   perfil-publico.html por separado.
   ===================================================================== */

.connectivity-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  padding: 0.6rem 1rem; text-align: center; font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-md);
}
.connectivity-banner.offline { background: var(--danger); color: var(--white); }
.connectivity-banner.restored { background: var(--success-text); color: var(--white); }

.loading-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(10, 20, 40, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.loading-overlay-box {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  min-width: 180px;
}
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--blue-50); border-top-color: var(--blue-600);
  animation: loading-spin 0.75s linear infinite;
}
.loading-overlay-msg { font-size: 0.85rem; font-weight: 600; color: var(--slate-700); text-align: center; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation-duration: 2.4s; }
}

/* =====================================================================
   Ayuda: manual de usuario dentro de la app
   ===================================================================== */

.help-quicklinks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.help-quicklinks a {
  font-size: 0.78rem; font-weight: 600; color: var(--slate-600);
  background: var(--slate-100); border-radius: 999px; padding: 0.4rem 0.85rem;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.help-quicklinks a:hover { background: var(--blue-50); color: var(--blue-700); }

.help-block { max-width: 680px; margin-bottom: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--slate-200); scroll-margin-top: 1rem; }
.help-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.help-block h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.6rem; }
.help-block h3 { font-size: 0.92rem; font-weight: 700; margin: 1.2rem 0 0.5rem; color: var(--slate-900); }
.help-block .prose-p { color: var(--slate-600); font-size: 0.92rem; line-height: 1.65; }
.help-block .prose-p + .prose-p { margin-top: 0.6rem; }
.help-block .prose-ol { padding-left: 1.2rem; margin: 0.5rem 0; color: var(--slate-600); font-size: 0.9rem; line-height: 1.7; }
.help-block .prose-ol li { margin-bottom: 0.3rem; }

.help-steps { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.help-steps li { display: flex; gap: 0.8rem; }
.help-steps li strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.help-steps li p { color: var(--slate-600); font-size: 0.86rem; line-height: 1.55; margin: 0; }

.help-fields { border-top: 1px solid var(--slate-200); margin-top: 0.75rem; }
.help-field { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--slate-200); font-size: 0.88rem; align-items: baseline; }
.help-field-name { font-weight: 700; color: var(--blue-700); font-size: 0.83rem; }
.help-field-desc { color: var(--slate-600); line-height: 1.55; }
@media (max-width: 560px) { .help-field { grid-template-columns: 1fr; gap: 0.2rem; } }

.callout { display: flex; gap: 0.65rem; align-items: flex-start; border-radius: var(--radius); padding: 0.85rem 1rem; font-size: 0.86rem; line-height: 1.55; margin: 1rem 0; }
.callout svg { width: 17px; height: 17px; flex: none; margin-top: 0.15rem; }
.callout strong { display: block; margin-bottom: 0.15rem; font-size: 0.84rem; }
.callout.tip { background: var(--blue-50); color: var(--slate-700); }
.callout.tip strong { color: var(--blue-700); }
.callout.warn { background: #fef3e0; color: #8a5a04; }
.callout.danger { background: var(--danger-bg); color: var(--danger-text); }
.callout.ok { background: var(--success-bg); color: var(--success-text); }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 1rem 1.1rem; }
.compare-card h4 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.4rem; }
.compare-card p { font-size: 0.84rem; color: var(--slate-600); line-height: 1.55; margin: 0; }
.compare-card .use-when { margin-top: 0.55rem; font-size: 0.8rem; color: var(--slate-700); }

.faq-item { padding: 0.85rem 0; border-bottom: 1px solid var(--slate-200); max-width: 680px; }
.faq-item:last-child { border-bottom: none; }
.faq-q { font-weight: 700; font-size: 0.9rem; display: flex; gap: 0.5rem; color: var(--slate-900); }
.faq-q .q-mark { color: var(--blue-600); }
.faq-a { margin-top: 0.35rem; color: var(--slate-600); font-size: 0.87rem; line-height: 1.6; padding-left: 1.25rem; }

.swatch-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0 0; font-size: 0.83rem; color: var(--slate-700); }
.swatch-row span { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.swatch.critico { background: var(--danger); }
.swatch.alerta { background: #d68a06; }
.swatch.ok { background: #2f9e58; }

/* Tabla de siniestros del formulario de Paz y salvo (js/views/empleados.js) */
.siniestro-table { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); overflow: hidden; margin-top: 0.4rem; }
.siniestro-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr 1.3fr auto;
  gap: 0.4rem; align-items: center; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--slate-200);
}
.siniestro-row:last-child { border-bottom: none; }
.siniestro-row input { padding: 0.4rem 0.5rem; font-size: 0.82rem; border: 1px solid var(--slate-200); border-radius: 6px; }
.siniestro-head { background: var(--slate-50); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--slate-600); }
.siniestro-pendiente { background: var(--danger-bg); }
.btn-icon-danger { background: var(--danger-bg); color: var(--danger-text); border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 0.85rem; line-height: 1; }
.btn-icon-danger:hover { background: #fbdad6; }
@media (max-width: 720px) {
  .siniestro-row { grid-template-columns: 1fr; }
  .siniestro-head { display: none; }
}

/* Detalle completo de un siniestro (todas las columnas del sheet de SST
   con datos, no solo las 5 del formato oficial) -- colapsado por defecto,
   ocupa todo el ancho de la fila en vez de encajar en una sola columna. */
.siniestro-detalle { grid-column: 1 / -1; margin-top: 0.3rem; }
.siniestro-detalle summary { cursor: pointer; font-size: 0.78rem; font-weight: 600; color: var(--blue-700); user-select: none; }
.siniestro-detalle-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem 1rem;
  margin-top: 0.6rem; padding: 0.7rem 0.8rem; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
}
.siniestro-detalle-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--slate-500); }
.siniestro-detalle-valor { font-size: 0.8rem; color: var(--slate-900); margin-top: 0.15rem; overflow-wrap: break-word; }