/* ============================================================
   Grupo Sayser — plataforma de gestión (antes «Plataforma Agro»)
   Bricolage Grotesque (display) + Hanken Grotesk (UI)
   Paleta: verde botánico + ámbar mango + papel cálido
   ============================================================ */
:root {
  --bosque: #0E2A20;
  --bosque-2: #143A2C;
  --verde: #1C5340;
  --verde-2: #2F7D5B;
  --verde-vivo: #57a773;
  --mango: #F2A900;
  --mango-dark: #9A6200;   /* antes #C77F00: 3.25:1 sobre blanco; ahora 4.6:1 (auditoría UI) */
  --mango-soft: #FFF3DA;
  --sayser: #E07A1F;       /* naranja de la marca Grupo Sayser (13/09): solo en el logo y la palabra Sayser; los acentos de la interfaz siguen en mango */   /* más claro: la pastilla "pendiente" pasa de 2.76:1 a legible */
  --terracota: #C0492E;
  --paper: #FAF7F0;
  --card: #FFFFFF;
  --ink: #181711;
  --ink-soft: #5C5A50;
  --line: #E7E2D6;
  --line-soft: #F0ECE1;
  --good: #2F7D5B;
  --warn: #C77F00;
  --bad: #C0492E;
  --r: 14px;
  --r-s: 8px;      /* esquinas chicas (chips, celdas) */
  --r-m: 10px;     /* esquinas medias (botones, campos, filas) */
  --shadow: 0 1px 2px rgba(20,40,30,.05), 0 8px 28px -18px rgba(20,40,30,.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--paper); color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.brand-font { font-family: "Bricolage Grotesque", sans-serif; }
a { color: var(--verde); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Los controles no heredan la fuente por defecto: sin esto, los campos fuera de .fld salían en la del sistema. */
input, select, textarea { font-family: inherit; }
em { font-style: normal; color: var(--mango); }
.muted { color: var(--ink-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =================== LAYOUT (app-shell) =================== */
/* La ventana no scrollea: la barra y el contenido scrollean por separado.
   Así la barra verde SIEMPRE llena la altura completa. */
body.con-sesion { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.sidebar {
  width: 248px; flex: 0 0 248px; background: var(--bosque); color: #cfe3d8;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow-y: auto;
  /* Auditoría UI 03/09: sin esto aparecía un scrollbar HORIZONTAL fantasma y el vertical gris de Windows. */
  overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.marca { display: flex; align-items: center; gap: 11px; padding: 22px 20px 16px;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca-hoja { display: block; width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px rgba(224,122,31,.35)); }
.marca-hoja svg { display: block; width: 100%; height: 100%; }
.marca-txt { font-size: 16px; line-height: 1.05; font-weight: 700; }
.marca-txt b { color: var(--sayser); }
.sidebar-empresa { padding: 14px 16px 6px; }
.empresa-form, .empresa-fija {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 9px 12px;
}
.empresa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--verde-vivo)); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--verde-vivo)) 28%, transparent); }
.empresa-form select { min-width: 0; flex: 1; background: transparent; border: 0; color: #fff; font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; outline: none; appearance: none; }
.empresa-form select option { color: #1d2b24; }
.empresa-corto { color: #fff; font-weight: 700; font-size: 14px; }
.empresa-larga { color: #8faea0; font-size: 11px; }
/* Selector de empresa propio (06/09): la lista abierta del <select> la pintaba Windows en blanco y azul.
   Sin JavaScript se ve el <select>; con JavaScript (html.js) se ve el botón y la lista dibujada por nosotros. */
.empresa-form { position: relative; flex-wrap: wrap; }
.emp-btn { display: none; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; padding: 0;
  color: #fff; font-family: inherit; cursor: pointer; text-align: left; }
.emp-btn .emp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.emp-btn .emp-nom { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-btn small, .emp-lista small { color: #8faea0; font-size: 11px; font-weight: 400; }
.emp-btn .emp-caret { color: #8faea0; font-size: 12px; transition: transform .15s; }
.emp-btn[aria-expanded="true"] .emp-caret { transform: rotate(180deg); }
html.js .emp-btn { display: flex; }
html.js .emp-nativo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.emp-lista { list-style: none; margin: 0; padding: 6px; position: absolute; left: -1px; right: -1px; top: calc(100% + 6px);
  background: #0f2822; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.4); z-index: 30; }
.emp-lista li button { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px;
  background: transparent; color: #e6efe9; font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: left; line-height: 1.2; }
.emp-lista li button .emp-nom { white-space: nowrap; }
.emp-lista li button small { grid-column: 2; display: block; margin-top: 1px; }
.emp-lista li button:hover, .emp-lista li button:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.emp-lista li[aria-selected="true"] button { background: rgba(255,255,255,.14); font-weight: 700; }
.emp-lista li[aria-selected="true"] button .emp-nom::after { content: ' ✓'; color: var(--mango); }
.emp-lista .emp-sep { height: 1px; background: rgba(255,255,255,.12); margin: 4px 6px; }
.emp-lista .emp-grupo button { color: var(--mango); }
.emp-lista .emp-ic { width: 9px; text-align: center; margin-right: 6px; }

.sidebar nav { padding: 8px 12px; flex: 1; }
/* Título de sección NOTORIO (pedido de Carlos 07/08: "no quiero que se camufle, quiero
   encontrarlo rápido"): más grande y claro que antes, siempre por encima de sus módulos. */
.nav-grupo { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #cfe3d8;
  font-weight: 800; margin: 16px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-m);
  color: #bcd3c8; font-size: 14px; font-weight: 500; transition: .14s; }
.nav-item .ico { color: var(--verde-vivo); }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.activo { background: var(--verde); color: #fff; }
.nav-item.activo .ico { color: var(--mango); }
.nav-item.pendiente { color: #6f8a7e; cursor: default; }
.nav-item.pendiente:hover { background: none; }
.lock { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: #6f8a7e; border: 1px solid rgba(255,255,255,.12); padding: 1px 6px; border-radius: 6px; }
.sidebar-pie { padding: 14px 20px; font-size: 12px; color: #9fb8ab; border-top: 1px solid rgba(255,255,255,.08); }

.contenido { flex: 1; min-width: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(250,247,240,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 13px 30px; position: sticky; top: 0; z-index: 6; }
.page-h { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.page-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; }
.userbox { display: flex; align-items: center; gap: 11px; }
.role-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; }
.badge-owner { background: var(--bosque-2); color: #dff0e7; }
.badge-admin { background: #E7EEF9; color: #26508f; }
.badge-op { background: var(--mango-soft); color: var(--mango-dark); }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--mango), var(--terracota)); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.user-nombre { font-weight: 600; font-size: 14px; }
.user-rol { font-size: 12px; color: var(--ink-soft); }
.btn-salir { margin-left: 6px; font-size: 13px; padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink-soft); background: var(--card); font-family: inherit; cursor: pointer; line-height: 1.2; display: inline-block; }
.btn-salir:hover { border-color: var(--terracota); color: var(--terracota); }
.contenido-int { padding: 24px 0 60px; }

/* =================== HERO (home empleado) =================== */
.hero { padding: 12px 32px 10px; }
/* Barra de selectores (Campaña/Periodo). Faltaba su definición base -> quedaba pegada. */
.barra-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 32px 24px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 700;
  color: var(--mango-dark); margin-bottom: 6px; }
.hero-titulo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700;
  font-size: clamp(26px, 3.5vw, 38px); margin: 0; line-height: 1.05; letter-spacing: -.02em; }

/* =================== KPIs =================== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 32px 20px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .l { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.kpi .v { overflow: hidden; white-space: nowrap; font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 7px; }
.kpi .v.destacado { font-family: "Bricolage Grotesque", sans-serif; }
.kpi .v.medio { font-size: 22px; }
.kpi .v.compacto { font-size: 19px; }
.kpi .d { font-size: 12px; margin-top: 5px; font-weight: 600; }
.up { color: var(--good); } .down { color: var(--bad); } .neu { color: var(--ink-soft); }

/* =================== PANELES / GRÁFICOS =================== */
/* align-items:start — cada panel mide lo que su contenido; sin él, la grilla estira el panel
   corto hasta la altura del vecino y queda un cuadro gigante casi vacío. */
.cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin: 0 32px 20px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow); margin: 0 32px 20px; }
.cols .panel { margin: 0; }
.panel h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 600; }
.panel .ph-sub { font-size: 12px; color: var(--ink-soft); margin-bottom: 14px; margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 3px; }
.chart-wrap { position: relative; width: 100%; }

/* =================== ESTADO DE RESULTADO =================== */
.pl-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pl-row.minus .pl-v { color: var(--bad); }
.pl-row.minus .pl-name { color: var(--ink-soft); padding-left: 14px; }
.pl-row.total { font-weight: 700; border-bottom: 2px solid var(--line); font-size: 15px; }
.pl-row.grand { font-weight: 800; color: var(--verde); font-size: 16px; border-bottom: none; }
/* Un gran total NEGATIVO (una pérdida) se ve ROJO, no verde (Carlos 20/08: color solo para lo negativo). */
.pl-row.grand.perdida { color: var(--bad); }
.pl-row.perdida:not(.grand) .pl-v { color: var(--bad); }
.pl-v { font-variant-numeric: tabular-nums; width: 130px; text-align: right; font-weight: 600; white-space: nowrap; flex-shrink: 0; }

/* =================== TABLAS =================== */
.tbl-tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; }
/* Botón secundario (acciones no principales: Volver, Cancelar, Traer de SUNAT, pestañas…) */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-m);
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none;
  background: var(--card); color: var(--verde); border: 1.5px solid var(--line); }
.btn:hover { border-color: var(--verde-2); background: var(--line-soft); }
/* Acciones por fila (editar / eliminar) */
.col-acc { width: 1%; white-space: nowrap; text-align: right; }
.acciones-fila { display: inline-flex; gap: 6px; align-items: center; }
.btn-mini { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); font-size: 14px;
  cursor: pointer; text-decoration: none; font-family: inherit; }
.btn-mini:hover { border-color: var(--verde-2); color: var(--verde); }
.btn-mini-del:hover { border-color: var(--bad); color: var(--bad); }
.btn-txt { width: auto; height: auto; padding: 6px 12px; font-size: 12.5px; font-weight: 600; gap: 4px; }
.btn-pagar { border-color: var(--verde-2); color: var(--verde); }
.btn-pagar:hover { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn-peligro { border-color: var(--bad); color: var(--bad); }
.btn-peligro:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
table.datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.datos th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; padding: 0 10px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.datos td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink); white-space: nowrap; }
/* Resalta por un instante la fila recién guardada/editada */
@keyframes resaltarFila { 0% { background: #FCEFC7; } 100% { background: transparent; } }
table.datos tbody tr.fila-nueva td { animation: resaltarFila 3s ease-out; }
table.datos tfoot .fila-totales td { border-top: 2px solid var(--line); border-bottom: none;
  background: var(--line-soft); padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.pill.ok { background: #E4F2EA; color: var(--good); }
.pill.pend { background: var(--mango-soft); color: var(--mango-dark); }
.pill.mal { background: #F7E3DE; color: var(--bad); }
.tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.tag-serv { background: #E2EEF0; color: #1f6b78; }
.tag-mat { background: #EEE7DC; color: #8a6512; }
.empresa-tag { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.t-dpm { background: #F3E0DC; color: #9a3a2a; }
.t-fsl { background: #F3E9DC; color: #9a6418; }
.t-frunort { background: #E1EFE7; color: #1f6045; }

/* =================== FORMULARIOS =================== */
.btn-primary { background: var(--verde); color: #fff; padding: 10px 16px; border-radius: var(--r-m);
  font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; border: 0; }
.btn-primary:hover { background: var(--bosque-2); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-m);
  font-family: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--verde-2); } /* el anillo :focus-visible global SÍ aplica (auditoría UI 03/09: outline:none lo anulaba) */
.form-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* Dentro de una tabla, td.muted y los semáforos ganan a la tinta de table.datos td (auditoría UI 03/09). */
table.datos td.muted { color: var(--ink-soft); }
table.datos td.up { color: var(--good); } table.datos td.down { color: var(--bad); } table.datos td.neu { color: var(--ink-soft); }

/* =================== ALERTAS =================== */
.alerta { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border-radius: var(--r-m);
  font-size: 13.5px; margin-bottom: 8px; border: 1px solid var(--line); }
.alerta:last-child { margin-bottom: 0; }
.alerta-ic { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.alerta b { font-weight: 700; }
.alerta-bad { background: #f7e4dd; border-color: #e6bcae; color: #8a3322; }
.alerta-warn { background: var(--mango-soft); border-color: #ecd9a6; color: #8a5a12; }
.alerta-ok { background: #E4F2EA; border-color: #bfe0c8; color: #1c5436; }

/* =================== NOTICE =================== */
.notice { display: flex; gap: 13px; background: #F4F8F5; border: 1px solid #DCEAE1; border-radius: var(--r);
  padding: 15px 18px; margin: 0 32px 20px; }
.notice .ic { font-size: 18px; flex: 0 0 auto; }
/* Solo el TÍTULO (b hijo directo del div) es bloque; las negritas dentro del texto quedan en línea. */
.notice > div > b { display: block; font-size: 13.5px; margin-bottom: 3px; color: var(--bosque-2); }
.notice p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.notice p b { font-weight: 700; color: var(--ink); }
.notice p i { color: var(--ink-soft); }

/* =================== FLASH =================== */
.flash { margin: 0 32px 18px; padding: 12px 16px; border-radius: var(--r-m); font-size: 14px; }
.flash-error { background: #f7e4dd; color: #8a3322; border: 1px solid #e6bcae; }
.flash-info { background: #e7eee8; color: #214a37; }
.flash-ok { background: #E4F2EA; color: #1c5436; border: 1px solid #bfe0c8; }

/* =================== LOGIN =================== */
body.sin-sesion { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; position: relative;
  background: radial-gradient(120% 120% at 80% -10%, #1C5340 0%, #0E2A20 55%, #0a2018 100%); }
.atmosfera { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 12% 90%, rgba(242,169,0,.22), transparent 70%); }
.contenido-login { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 22px; }
.login-card { background: var(--card); border-radius: 22px; padding: 38px 34px 28px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.login-cabecera { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 2px; }
/* Logo animado (Patrick 22/08): "Brote" una sola vez al abrir (el ícono crece con rebote y el título aparece) +
   "Destello" continuo (cada 4 s un brillo recorre la palabra Sayser; el ícono es la marca «Brote» en SVG). Solo CSS; se apaga con "reducir movimiento". */
.login-emblema { width: 44px; height: 44px; display: inline-block; transform-origin: 50% 80%;
  animation: login-brote 1.1s cubic-bezier(.2,.9,.3,1.3) both; }
.login-emblema svg { display: block; width: 100%; height: 100%; }
.login-titulo { animation: login-aparece .8s ease-out .35s both; }
.login-titulo em { background: linear-gradient(110deg, var(--sayser) 0%, var(--sayser) 42%, #ffd9b8 50%, var(--sayser) 58%, var(--sayser) 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: login-destello 4s ease-in-out 1.2s infinite; }
.login-sub { animation: login-aparece .8s ease-out .55s both; }
@keyframes login-brote { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes login-aparece { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes login-destello { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .login-emblema, .login-titulo, .login-titulo em, .login-sub { animation: none; opacity: 1; transform: none; } }
.login-titulo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
.login-sub { color: var(--ink-soft); margin: 4px 0 22px; font-size: 14px; text-align: center; }
.login-card label { display: block; font-size: 13px; font-weight: 600; color: #3c4b42; margin-bottom: 14px; }
.login-card input { width: 100%; margin-top: 6px; padding: 12px 13px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); }
.login-card input:focus { border-color: var(--mango); }
.login-card button { width: 100%; margin-top: 8px; padding: 13px; font-size: 15px; font-weight: 700; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, var(--verde-2), var(--bosque-2)); border: 0; border-radius: 11px; }
/* Botón Ingresar (Patrick 23/08): 1 "flecha que avanza" (se levanta 2 px y la flecha se adelanta) + 2 "destello"
   (un brillo lo cruza al entrar el cursor). Solo CSS; se apaga con "reducir movimiento". */
.login-card button[type="submit"] { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: transform .18s ease-out, box-shadow .18s ease-out, filter .18s; }
.login-card button[type="submit"] .fl { display: inline-block; transition: transform .22s cubic-bezier(.2,.8,.3,1.2); }
.login-card button[type="submit"]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); }
.login-card button[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15,61,54,.65); }
.login-card button[type="submit"]:hover .fl { transform: translateX(6px); }
.login-card button[type="submit"]:hover::after { animation: login-cruza .7s ease-out; }
.login-card button[type="submit"]:active { transform: translateY(0); box-shadow: none; }
@keyframes login-cruza { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .login-card button[type="submit"], .login-card button[type="submit"] .fl, .login-card button[type="submit"]::after { transition: none; animation: none !important; } }
.login-pie { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 20px; }
/* Firma de Circuitra Enterprise (Patrick 23/08): chip con la C + "Ingeniería de", en gris suave bajo las empresas. */
.login-credito { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); color: #7a8680; font-size: 11.5px; letter-spacing: .02em; }
.login-credito svg { width: 17px; height: 17px; color: #2b3a35; flex: none; }
.man-credito { display: flex; align-items: center; gap: 7px; margin: 34px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: #7a8680; font-size: 11.5px; letter-spacing: .02em; }
.man-credito svg { width: 17px; height: 17px; color: #2b3a35; flex: none; }
.man-credito .cx, .login-credito .cx { font-family: "Sora", "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: #2b3a35; }

/* =================== RESPONSIVE =================== */
/* Botón de menú y overlay: ocultos en escritorio, aparecen en móvil. */
.nav-toggle, .nav-overlay { display: none; }

@media (max-width: 880px) {
  /* En móvil/tablet: scroll normal de toda la página y menú lateral deslizable. */
  body.con-sesion { display: block; height: auto; overflow: visible; }
  .contenido { height: auto; overflow: visible; }

  /* Sidebar = cajón que entra desde la izquierda con el botón ☰. */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; height: 100vh; height: 100dvh;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 60; box-shadow: 0 0 30px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 55; }
  body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; position: fixed; top: 10px; left: 10px; z-index: 50;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: #fff;
    font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.10);
  }

  /* Sticky también en móvil: el ☰ deja de flotar suelto sobre las tablas (auditoría UI 03/09). */
  .topbar { position: sticky; top: 0; z-index: 7; background: var(--bg); padding-left: 66px; flex-wrap: wrap; row-gap: 8px; }
  .cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }          /* formularios en una sola columna */
  .kpi-grid { grid-template-columns: 1fr 1fr; }        /* indicadores de a dos */
  .hero-titulo { font-size: 30px; }
  .kpi-grid, .panel, .cols, .notice, .flash, .hero, .barra-acciones { margin-left: 14px; margin-right: 14px; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; }            /* en celular, indicadores apilados */
  .role-badge { display: none; }                        /* ahorra espacio en la barra superior */
  .userbox-txt { display: none; }
  .kpi-grid, .panel, .cols, .notice, .flash, .hero, .barra-acciones { margin-left: 10px; margin-right: 10px; }
}

/* =================== EDICIÓN EN LÍNEA (#11) =================== */
.inline-edit { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.inline-edit input { width: 80px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px;
  font-family: inherit; font-size: 12.5px; text-align: right; background: #fff; color: var(--ink); }
.inline-edit input:focus { border-color: var(--verde-2); }
.inline-edit .ie-mon { color: var(--ink-soft); font-size: 12px; }
.inline-edit .btn-mini { width: 27px; height: 27px; font-size: 12px; }

/* =================== ALERTA DE STOCK BAJO (#4) =================== */
table.datos tbody tr.fila-alerta td { background: #fbeae4; }
table.datos tbody tr.fila-alerta:hover td { background: #f6ddd3; }

/* =================== CAMPAÑA ACTIVA (#6) =================== */
.camp-chip { display: flex; flex-direction: column; gap: 1px; }
.camp-chip span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9fb8ab; }
.camp-chip b { color: #e7f3ec; font-size: 13.5px; font-weight: 700; }
.camp-chip.camp-cerrada b { color: var(--mango); }

/* =================== CAMPANITA DE AVISOS (#9) =================== */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font-size: 17px; margin-right: 10px; }
.bell:hover { border-color: var(--mango-dark); color: var(--mango-dark); }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper); }

/* =================== MÓVIL/TABLET: pulido táctil (#10) =================== */
@media (max-width: 880px) {
  .btn-mini { width: 36px; height: 36px; }                 /* objetivos táctiles más cómodos */
  .btn-mini.btn-txt { width: auto; height: auto; }         /* …pero los que llevan TEXTO no se recortan a 36px */
  .fld input, .fld select, .fld textarea { font-size: 16px; }             /* evita el zoom automático de iOS al enfocar */
  .inline-edit input { width: 92px; font-size: 16px; }
  table.datos td, table.datos th { padding-left: 9px; padding-right: 9px; }
  .topbar { padding-right: 14px; }
}

/* =================== EXPORTAR / IMPRIMIR (#8) =================== */
/* =================== MANUAL DE USO (in-app, por rol) ===================
   Diseño de documento: índice lateral fijo y discreto + un solo documento
   continuo con jerarquía tipográfica (sin muro de tarjetas ni pastillas). */
.man-wrap { display: grid; grid-template-columns: 225px minmax(0, 780px); gap: 36px;
  margin: 0 32px 48px; align-items: start; }
.man-indice { position: sticky; top: 76px; max-height: calc(100vh - 110px); overflow-y: auto;
  font-size: 13px; padding-right: 6px; }
.man-ind-g { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; margin: 18px 0 5px; }
.man-indice .man-ind-g:first-child { margin-top: 2px; }
.man-indice a { display: block; padding: 3px 0 3px 11px; color: var(--ink-soft);
  border-left: 2px solid var(--line-soft); line-height: 1.4; }
.man-indice a:hover { color: var(--verde); border-left-color: var(--verde); }
.man-doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 36px 46px 46px; }
.man-head h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 25px;
  font-weight: 700; letter-spacing: -.02em; }
.man-head p { color: var(--ink-soft); font-size: 14px; margin-top: 10px; max-width: 68ch; }
.man-head .man-meta { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.man-grupo { font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mango-dark); font-weight: 800; margin: 40px 0 2px; padding-top: 26px;
  border-top: 1px solid var(--line-soft); }
.man-sec { scroll-margin-top: 74px; padding: 18px 0 4px; }
.man-sec + .man-sec { border-top: 1px solid var(--line-soft); margin-top: 10px; }
.man-sec h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 16px; font-weight: 600; }
.man-ico { margin-right: 8px; font-size: 14px; }
.man-sec p { margin: 7px 0; max-width: 68ch; font-size: 14px; }
.man-sec ol, .man-sec ul { padding-left: 20px; margin: 8px 0; max-width: 66ch; }
.man-sec li { margin: 5px 0; font-size: 14px; }
.man-tip { background: var(--mango-soft); border-radius: 9px; padding: 9px 13px;
  font-size: 13px; margin-top: 12px; max-width: 64ch; }
@media (max-width: 980px) {
  .man-wrap { grid-template-columns: 1fr; margin: 0 14px 32px; }
  .man-indice { display: none; }               /* en pantallas chicas el manual se lee de corrido */
  .man-doc { padding: 24px 20px 32px; }
}
/* Pestañas de carpeta (Facturas, Sistema, Préstamos, Planilla de campo, Costos de exportación) */
.carpeta-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px;border-bottom:1px solid var(--borde, #d8dfd4);padding:0 4px}
.carpeta-tabs a,.carpeta-tabs span{display:inline-block;padding:8px 16px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;text-decoration:none;color:inherit;font-size:14px;line-height:1.3}
.carpeta-tabs a:hover{background:var(--panel-suave, #f2f5ef)}
.carpeta-tabs span{border-color:var(--borde, #d8dfd4);box-shadow:inset 0 -2px 0 var(--accent, #0e7a6d);font-weight:700;background:var(--panel, #fff)}
@media print { .carpeta-tabs{display:none} }

@media print {
  .man-wrap { display: block; margin: 0; }
  .man-doc { border: none; box-shadow: none; padding: 0; }
}

/* Botón Imprimir/PDF compacto en la barra superior (no ocupa fila propia). */
.btn-imprimir { display: inline-flex; align-items: center; font-size: 13px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); background: var(--card); margin-right: 10px; }
.btn-imprimir:hover { border-color: var(--verde); color: var(--verde); }

/* Galería de fotos del Reporte de calidad (Sayuri 03/09). */
.rc-fotos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.rc-foto { margin: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.rc-foto img { width: 180px; height: 180px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: block; }
.rc-foto form { margin: 0; }
@media (max-width: 640px) { .btn-imprimir span { display: none; } }
@media print {
  .sidebar, .topbar, .nav-toggle, .nav-overlay, .barra-acciones, .no-print, .flash, .paginacion, .col-acc { display: none !important; }
  body.con-sesion { display: block; height: auto; overflow: visible; }
  .contenido { height: auto; overflow: visible; }
  .contenido-int { padding: 0; }
  .panel, .kpi { box-shadow: none; border-color: #d8d3c6; }
  .panel { break-inside: avoid; margin: 0 0 12px; }
  table.datos td, table.datos th { white-space: normal; }
  /* Al imprimir en HORIZONTAL la ventana es ancha, así que se aplicaba el scroll interno de las
     tablas y el papel salía con 6 filas de 50 sin avisar (auditoría 02/08). En papel no hay
     scroll: la tabla se imprime entera y su encabezado se repite en cada hoja. */
  .tabla-scroll { max-height: none !important; overflow: visible !important; }
  .tabla-scroll table.datos thead th { position: static !important; box-shadow: none; }
  .tabla-scroll table.datos tfoot td { position: static !important; }
  table.datos thead { display: table-header-group; }
  table.datos tr { break-inside: avoid; }
  /* Un panel con una tabla larga SÍ puede partirse entre hojas; si no, se corta. */
  .panel:has(table.datos) { break-inside: auto; }
  [style*="overflow-x"], [style*="overflow-y"], [style*="overflow:"] { overflow: visible !important; }
  /* Margen de página CERO: el encabezado y pie que Chrome/Edge dibujan en el margen del papel
     no tienen dónde salir — el usuario ya no debe desactivar nada en el diálogo (Patrick 02/09).
     El "margen" del papel lo pone el body; los documentos traen el suyo propio. */
  .co-doc, .pf-doc, .mv-doc, .oc-doc, .os-doc, .pk-doc, .vale-doc { overflow: visible !important; }
  .pill, .tag, .empresa-tag, tfoot .fila-totales td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.datos tbody tr:nth-child(even) td { background: none; }
  * { box-shadow: none !important; }
  @page { margin: 0; }
  body { padding: 12mm 13mm; }
  /* Los documentos con margen tipo Word (tabla .pgm) ya reparten 8mm arriba/abajo en CADA página
     vía thead/tfoot; el padding vertical del body aquí sería doble margen en la página 1 y
     empujaba documentos casi llenos a una hoja 2 en blanco. Se ceden los 12mm verticales. */
  body:has(table.pgm) { padding: 0 13mm; }
}

/* #4 Inicio por rol: cuadrícula de accesos directos a los módulos del usuario. */
.atajos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.atajo { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--crema, #fdfbf5); text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.atajo:hover { border-color: var(--verde, #1C5340); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(28, 83, 64, .08); }
.atajo-ico { font-size: 20px; flex: 0 0 auto; }
.atajo-txt { line-height: 1.25; }

/* ============================================================
   UX 2.0 (2026-07-01): tablas, foco, movimiento, diálogo,
   secciones de formulario, vacíos, tarjetas móviles.
   ============================================================ */

/* --- 8. Contraste AA: encabezados de tabla y textos secundarios más legibles --- */
table.datos th { color: #6f6c5e; }

/* --- 8. Foco visible al navegar con teclado (no aparece con el mouse) --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mango-dark); outline-offset: 2px;
}

/* --- 1. Tablas 2.0: encabezado y totales siempre visibles (scroll interno, solo escritorio) --- */
@media (min-width: 641px) {
  .tabla-scroll { max-height: calc(100vh - 235px); overflow: auto; }
  .tabla-scroll table.datos thead th { position: sticky; top: 0; background: var(--card); z-index: 3;
    box-shadow: 0 1px 0 var(--line); border-bottom: 0; padding-top: 4px; }
  .tabla-scroll table.datos tfoot td { position: sticky; bottom: 0; z-index: 3; }
}
/* Planilla de campo (Katherin 04/09): "paneles congelados" tipo Excel. La columna del trabajador queda
   fija al deslizar a la derecha (perdía de vista a quién le estaba marcando) y overscroll-behavior evita
   que el gesto lateral del trackpad dispare el "atrás" del navegador a mitad de la captura. */
.pc-scroll { overflow-x: auto; overscroll-behavior: contain; }
table.pc th:first-child, table.pc td:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 1px 0 0 var(--line); }
table.pc thead th:first-child { z-index: 4; }
table.pc tfoot td { background: var(--card); }
table.pc tfoot td:first-child { z-index: 4; }
table.pc tbody tr:nth-child(even) td:first-child { background: #FCFAF3; }
table.pc tbody tr:hover td:first-child { background: #F6F3E9; }
/* Cebra suave; el hover y la fila de alerta mandan por encima. */
table.datos tbody tr:nth-child(even) td { background: #FCFAF3; }
table.datos tbody tr:hover td { background: #F6F3E9; }
table.datos tbody tr.fila-alerta:hover td { background: #f6ddd3; }
/* Encabezados completos: se parten en dos líneas antes que cortarse. */
table.datos th { white-space: normal; line-height: 1.25; }

/* --- 1. Columnas secundarias ocultables (⊞ Más columnas) --- */
table.datos .col-sec { display: none; }
table.datos.ver-sec .col-sec { display: table-cell; }

/* --- 2. KPI: el número nunca se parte (app.js reduce el tamaño si no entra) --- */

/* --- 3. Secciones dentro de formularios largos --- */
.form-sec { grid-column: 1 / -1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--verde-2); border-bottom: 1px solid var(--line-soft);
  padding-bottom: 5px; margin-top: 8px; }
.fld label .req { color: var(--terracota); margin-left: 2px; font-weight: 800; }
@media (max-width: 880px) {
  .form-foot { position: sticky; bottom: 0; background: var(--card); z-index: 2; padding-bottom: 10px; }
}

/* --- 4. Movimiento sobrio (se apaga si el sistema pide menos movimiento) --- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .contenido-int > * { animation: pageIn .28s ease-out both; }
  .contenido-int > *:nth-child(2) { animation-delay: .04s; }
  .contenido-int > *:nth-child(3) { animation-delay: .08s; }
  .contenido-int > *:nth-child(n+4) { animation-delay: .12s; }
  .kpi-grid .kpi { animation: pageIn .32s ease-out both; }
  .kpi-grid .kpi:nth-child(2) { animation-delay: .05s; }
  .kpi-grid .kpi:nth-child(3) { animation-delay: .1s; }
  .kpi-grid .kpi:nth-child(4) { animation-delay: .15s; }
  .kpi-grid .kpi:nth-child(n+5) { animation-delay: .2s; }
}
.btn, .btn-primary, .btn-mini, .btn-salir, .bell { transition: transform .12s ease, background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s; }
.btn:active, .btn-primary:active, .btn-mini:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 5px 16px -7px rgba(28,83,64,.55); }

/* --- 4. Mensajes flash con botón de cierre y autocierre (app.js) --- */
.flash { display: flex; align-items: flex-start; gap: 10px; }
.flash .flash-txt { flex: 1; }
.flash .flash-x { background: none; border: 0; font-size: 15px; color: inherit; opacity: .55; padding: 0 2px; line-height: 1.4; }
.flash .flash-x:hover { opacity: 1; }
.flash.flash-out { opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }

/* --- 5. Diálogo de confirmación propio (reemplaza el confirm() del navegador) --- */
dialog.dlg { border: 0; border-radius: 16px; padding: 0; max-width: 430px; width: calc(100% - 40px);
  box-shadow: 0 30px 80px -20px rgba(10,25,18,.45); }
dialog.dlg::backdrop { background: rgba(10,25,18,.45); }
@media (prefers-reduced-motion: no-preference) {
  dialog.dlg[open] { animation: pageIn .18s ease-out; }
}
.dlg-cuerpo { padding: 22px 24px 18px; }
.dlg-titulo { font-family: "Bricolage Grotesque", sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 7px; }
.dlg-det { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.dlg-det b { color: var(--ink); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 13px 24px; background: var(--line-soft); }
.dlg-danger { background: var(--bad); color: #fff; border: 0; padding: 9px 16px; border-radius: var(--r-m);
  font-weight: 700; font-size: 13.5px; font-family: inherit; }
.dlg-danger:hover { filter: brightness(.93); }

/* --- 6. Menú: íconos por módulo y grupos plegables --- */
.nav-item .ico { font-size: 14px; width: 20px; text-align: center; flex: 0 0 auto; }
details.nav-det > summary { list-style: none; cursor: pointer; display: flex; align-items: center; user-select: none; }
details.nav-det > summary::-webkit-details-marker { display: none; }
details.nav-det > summary .nav-grupo { flex: 1; }
details.nav-det > summary .caret { font-size: 9px; color: #6f8a7e; margin: 15px 10px 5px 0; transition: transform .15s; }
details.nav-det[open] > summary .caret { transform: rotate(90deg); }

/* --- 7. Estados vacíos con guía --- */
.vacio { text-align: center; padding: 32px 18px; color: var(--ink-soft); }
.vacio .vacio-ic { font-size: 30px; display: block; margin-bottom: 8px; }
.vacio b { color: var(--ink); display: block; margin-bottom: 3px; font-size: 14.5px; }
.vacio p { font-size: 13px; max-width: 460px; margin: 0 auto 12px; white-space: normal; }

/* --- 8. Stock bajo: señal textual además del color de fila --- */
table.datos tbody tr.fila-alerta td:first-child::before { content: "⚠ "; color: var(--bad); font-weight: 700; }

/* --- 11. Aviso explicativo plegable (recuerda tu elección por módulo) --- */
details.notice-det { margin: 0 32px 18px; }
details.notice-det > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #2f5f49; background: #F4F8F5; border: 1px solid #DCEAE1;
  padding: 6px 12px; border-radius: 999px; user-select: none; }
details.notice-det > summary::-webkit-details-marker { display: none; }
details.notice-det > summary .caret { font-size: 9px; transition: transform .15s; }
details.notice-det[open] > summary .caret { transform: rotate(90deg); }
details.notice-det .notice { margin: 10px 0 0; }
@media (max-width: 880px) { details.notice-det { margin: 0 14px 16px; } }

/* --- 12. Tarjetas móviles: las tablas operativas se vuelven tarjetas en el celular --- */
@media (max-width: 640px) {
  table.datos.t-cards thead { display: none; }
  table.datos.t-cards, table.datos.t-cards tbody, table.datos.t-cards tr, table.datos.t-cards td { display: block; }
  table.datos.t-cards tbody tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
    background: var(--card); padding: 6px 2px; box-shadow: var(--shadow); }
  table.datos.t-cards tbody tr:nth-child(even) td { background: transparent; }
  table.datos.t-cards td { border: 0; white-space: normal !important; padding: 5px 13px; display: flex;
    justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
  table.datos.t-cards td::before { content: attr(data-label); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .05em; color: #6f6c5e; font-weight: 700; flex: 0 0 auto; }
  table.datos.t-cards td:empty { display: none; }
  table.datos.t-cards td.col-acc { justify-content: flex-end; width: auto; }
  table.datos.t-cards td.col-acc a, table.datos.t-cards td.col-acc button { white-space: nowrap; }
  table.datos.t-cards td.col-acc::before { content: none; }
  table.datos.t-cards tbody tr.fila-alerta { border-color: #e6bcae; }
  table.datos.t-cards tbody tr.fila-alerta td { background: transparent; }
  table.datos.t-cards tbody tr.fila-alerta td:first-child { background: #fbeae4; border-radius: var(--r-s) 8px 0 0; }
  table.datos.t-cards tfoot td { display: flex; }
}

/* Corrección global: los encabezados numéricos alinean a la DERECHA como sus celdas.
   (La regla table.datos th { text-align:left } era más específica que .num y la anulaba;
   solo se notaba en columnas anchas, p.ej. "Costo por caja — desglose".) */
table.datos th.num { text-align: right; }


/* FAB móvil "＋": aparece solo en pantallas chicas (lo inyecta app.js) */
.fab-nuevo { /* z-index < sidebar(60): que el cajón del menú lo tape (auditoría UI) */
  position: fixed; right: 16px; bottom: 18px; z-index: 45;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--verde, #1C5340); color: #fff; font-size: 26px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer;
}
@media (min-width: 881px) { .fab-nuevo { /* z-index < sidebar(60): que el cajón del menú lo tape (auditoría UI) */ display: none; } }

/* Chips-enlace del índice del centro de avisos (y filtros rápidos en listados) */
a.chip {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--borde, #d8dfd4); background: var(--panel-suave, #f2f5ef);
  color: inherit; text-decoration: none; font-size: 13px; line-height: 1.3;
}
a.chip:hover { border-color: var(--verde, #1C5340); }

/* ---- Barrido 22/08: avisos por clase (antes colores en línea), estado vacío unificado, texto grande ---- */
.notice.warn { background: #fbf3e0; border-color: #e8d28f; }
.notice.bad { background: #fbeae6; border-color: #e3b8ad; }
.notice.info { background: #f3f0f8; border-color: #d9cfe8; }
.fila-vacia td { padding: 0 !important; }
.vacio-mini { display: flex; align-items: center; gap: 14px; padding: 18px 16px; color: var(--ink-soft); font-size: 13.5px; flex-wrap: wrap; }
.vacio-mini .vm-ic { font-size: 22px; }
.vacio-mini .vm-txt { flex: 1 1 260px; }
.nota-det { display: inline; }
.nota-det summary { display: inline; cursor: pointer; list-style: none; }
.nota-det summary::-webkit-details-marker { display: none; }
.nota-det summary::after { content: ' ⓘ'; color: var(--verde-2); }
.nota-det[open] summary::after { content: ' ▴'; }
html.texto-grande { zoom: 1.15; }
.pagina-404 { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.pagina-404 .vacio { max-width: 480px; text-align: center; }

/* Sección 4 (22/08): una cuadrícula de 6 indicadores se parte en 3 × 2 (antes 5 + 1 huérfana). */
.kpi-grid:has(> .kpi:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid:has(> .kpi:nth-child(6):last-child) { grid-template-columns: 1fr 1fr; } }
.cat-vista { display: flex; align-items: center; gap: 6px; }
.cat-vista .btn-mini { opacity: .55; } .cat-vista:hover .btn-mini { opacity: 1; }
.kpi-gerencia .v { font-size: 26px; }
.kpi-gerencia .kpi a { color: inherit; text-decoration: none; display: block; }
.grupo-cobrar summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.grupo-cobrar summary::-webkit-details-marker { display: none; }
.grupo-cobrar[open] summary { border-bottom: 0; }


/* Auditoría UI 03/09: con exactamente 6 KPIs, la regla :has() de 900px impedía apilar en celular. */
@media (max-width: 520px) {
  .kpi-grid:has(> .kpi:nth-child(6):last-child) { grid-template-columns: 1fr; }
}


/* Auditoría UI 03/09: respeto a "reducir movimiento" también en lo que quedaba fuera. */
@media (prefers-reduced-motion: reduce) {
  tr.fila-nueva td { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ===== Cimientos de la tanda UI-2 (auditoría UI 03/09) =====
   Pastillas que faltaban (antes se imitaban a mano con 8 paletas distintas) y el control de
   filtro que 12 constantes locales duplicaban. */
.pill.neutro { background: var(--line-soft); color: var(--ink-soft); }
.pill.info   { background: #dfeaf6; color: #255e93; }
/* Controles de barra (06/09, elección de Patrick: D1 + A2/B2/C1). Una sola familia con el cuerpo de .btn:
   .ctl va directo en <select> e <input>; .ctl-marco agrupa uno o dos campos con etiqueta e ícono en un marco;
   .nav-periodo es el navegador «‹ Semana 36 · 31 ago – 6 set ›» (flechas + centro que abre el calendario). */
.ctl { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--card);
  color: var(--ink); font: inherit; font-size: 13.5px; min-height: 40px; }
.ctl:focus { outline: none; border-color: var(--verde-2); }
.ctl-marco { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 40px;
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); }
.ctl-marco:focus-within { border-color: var(--verde-2); }
.ctl-marco .ctl-ic { color: var(--verde); font-size: 14px; }
.ctl-marco .ctl-lab { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.ctl-marco > input, .ctl-marco > select { border: 0; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--ink); padding: 6px 2px; min-width: 0; }
.ctl-marco > input:focus, .ctl-marco > select:focus { outline: none; }
.ctl-buscar > input { min-width: 190px; }
.nav-periodo { display: inline-flex; align-items: stretch; position: relative; min-height: 40px; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--card); }
.nav-periodo > button { display: inline-flex; align-items: center; border: 0; background: transparent; font: inherit;
  color: var(--ink); cursor: pointer; }
.nav-periodo .np-flecha { padding: 0 12px; color: var(--verde); font-weight: 700; font-size: 17px; }
.nav-periodo .np-flecha:first-child { border-right: 1.5px solid var(--line-soft); }
.nav-periodo .np-flecha:last-child { border-left: 1.5px solid var(--line-soft); }
.nav-periodo > button:hover { background: var(--line-soft); }
.nav-periodo .np-centro { padding: 0 14px; gap: 8px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.nav-periodo .np-centro .np-ic { color: var(--verde); font-weight: 400; }
.nav-periodo .np-centro small { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.nav-periodo .np-oculto { position: absolute; left: 40px; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Auditoría UI 03/09 · tanda 3a: margen lateral de documentos en pantallas chicas + filigrana por folio */
@media (max-width: 880px) {
  .pf-doc, .mv-doc, .oc-doc, .os-doc, .vale-doc { margin-left: 14px !important; margin-right: 14px !important; }
}
@media print {
  .co-agua, .pf-agua, .os-agua { position: fixed !important; }
}

/* Auditoría UI 03/09 · tanda 3b */
h4 { font-size: 14.5px; margin: 14px 0 8px; }
.filtros-extra { display: contents; }
.filtros-mas { display: none; }
@media (max-width: 640px) {
  /* Filtros secundarios del banco plegados: primero cuenta, mes y buscador; el resto bajo «Más filtros». */
  .filtros-extra { display: none; }
  .filtros-extra.abierto { display: contents; }
  .filtros-mas { display: inline-block; }
  /* iOS hace zoom automático al enfocar campos con letra <16px. */
  .contenido input, .contenido select, .contenido textarea { font-size: 16px; }
}

/* ---- Controles que antes pintaba el sistema operativo (06/09) --------------------------------- */
/* Casillas y radios en nuestro verde (todos los navegadores); antes salían en el azul de Windows. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--verde); }
/* Botón «Elegir archivo» con el cuerpo de .btn; antes salía gris de Windows. */
input[type="file"] { font-family: inherit; font-size: 13px; color: var(--ink-soft); }
input[type="file"]::file-selector-button { font: inherit; font-size: 13px; font-weight: 600; color: var(--verde); background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--r-m); padding: 7px 12px; margin-right: 10px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--verde-2); background: var(--line-soft); }
/* Listas desplegables: la LISTA ABIERTA con nuestro estilo. Chrome, Brave y Edge (135+) lo permiten con CSS puro;
   en un navegador sin soporte se ve la lista nativa de siempre. Sin JavaScript, sin cambiar el HTML de 94 selectores. */
@supports (appearance: base-select) {
  select:not(.emp-nativo), select:not(.emp-nativo)::picker(select) { appearance: base-select; }
  select:not(.emp-nativo) { background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
  select::picker-icon { color: var(--ink-soft); font-size: 11px; margin-left: 8px; }
  select::picker(select) { border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink);
    padding: 6px; margin-top: 6px; box-shadow: 0 14px 30px rgba(20, 28, 34, .18); max-height: 320px; }
  select option { padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
  select option:hover, select option:focus-visible { background: var(--line-soft); outline: none; }
  select option:checked { background: color-mix(in srgb, var(--verde) 12%, transparent); color: var(--verde); font-weight: 600; }
  select option::checkmark { color: var(--verde); }
  select optgroup { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); padding: 6px 10px 2px; }
}

/* Acciones de fila desplegables (Inventario, 07/09): la fila queda limpia y «↕ Mover» abre los campos
   solo en esa fila. details/summary: sin JavaScript; app.js solo agrega Escape para cerrar. */
/* OJO: un <details> con display:flex muestra su contenido aunque esté cerrado (Chromium); cerrado va inline-block. */
.acc-desp { display: inline-block; vertical-align: middle; }
.acc-desp[open] { display: inline-flex; align-items: center; gap: 6px; }
.acc-desp > summary { list-style: none; }
.acc-desp > summary::-webkit-details-marker { display: none; }
.acc-desp > summary .acc-cierra { display: none; }
.acc-desp[open] > summary .acc-abre { display: none; }
.acc-desp[open] > summary .acc-cierra { display: inline; }
.acc-desp[open] > summary { color: var(--bad); border-color: var(--bad); }