/* reportes.css — estilos de la herramienta reportes (42.6). Cada tarea escribe solo en su archivo. */

/* ===== Parte de arriba: interruptor por tipo y copia de seguridad ===== */
.reportes-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.reportes-top #btn-respaldo { margin-left: auto; }
#reportes-tipos { max-width: 100%; overflow-x: auto; }
/* En el celular las pestañas no se encogen ni parten su texto: si no caben, el selector se desliza de lado (REP-15). */
#reportes-tipos button { flex-shrink: 0; white-space: nowrap; }
#reportes-tipos .cuenta { opacity: 0.7; font-variant-numeric: tabular-nums; }
/* N5-03: de noche con opacidad 0,7 el conteo pasaba solo 3,1 (pestaña activa) y 3,8 (inactiva) a 1; sin opacidad, 4,7 y 6,3. */
html[data-theme="dark"] #reportes-tipos .cuenta { opacity: 1; }
.reportes-acciones { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* ===== Lista ===== */
.tabla-reportes td.num, .tabla-reportes th.num { text-align: right; }
.tabla-reportes .value, .tabla-reportes .fecha { font-variant-numeric: tabular-nums; }
.tabla-reportes .value.faltante { color: var(--err); font-weight: 700; }
.tabla-reportes .value.sobrante { color: var(--sobrante, #5b2fa6); font-weight: 700; }
.reportes-mas { display: flex; justify-content: center; margin: 14px 0 4px; }

/* Resultado de Cuadre diario (Consolidado mensual): rojo si falta, verde si sobra, como la columna Total de Faltantes del período (REP-11) */
#mensual-cuadre-body .value.faltante { color: var(--err); }
#mensual-cuadre-body .value.sobrante { color: var(--ok); }

/* N-MEN-ANCHO: a 1280 px la tabla de Cuadre diario (11 columnas) medía 1008 px en una hoja de 934 y «Resultado» quedaba cortada. Menos relleno entre
   columnas (8 px; los bordes de la tabla conservan 13) y «Exist. anterior» y «Exist. actual» en dos líneas: unos 150 px menos. Solo de 881 px para arriba
   (en el celular y la tableta angosta la tabla se desplaza de lado como siempre) y solo esta tabla: se reconoce por su cuerpo, sin tocar el HTML ni el JS. */
@media (min-width: 881px) {
  table:has(#mensual-cuadre-body) :is(th, td) { padding-left: 8px; padding-right: 8px; }
  table:has(#mensual-cuadre-body) :is(th, td):first-child { padding-left: 13px; }
  table:has(#mensual-cuadre-body) :is(th, td):last-child { padding-right: 13px; }
  table:has(#mensual-cuadre-body) thead th { vertical-align: bottom; }
  table:has(#mensual-cuadre-body) thead th:is(:nth-child(2), :nth-child(7)) { white-space: normal; }
}

/* Sobrante sobre el límite: morado (DECISIONES §10) */
:root { --sobrante: #5b2fa6; --sobrante-fondo: #f2ecfb; --sobrante-fondo-2: #e9dff8; }
tbody tr.fila-sobrante td { background: var(--sobrante-fondo); }
tbody tr.fila-sobrante:hover td { background: var(--sobrante-fondo-2); }
tbody tr.fila-sobrante td:first-child { box-shadow: inset 3px 0 0 var(--sobrante); }

/* Provisional: sin color; la cifra se ve apagada porque encadena desde un aprobado más viejo */
tbody tr.fila-provisional .value { color: var(--muted); }
.badge-provisional { background: #eef0f1; color: var(--muted); border-color: #d9dfe1; }
.badge-revisar { background: var(--err-light); color: var(--err); border-color: #f0c4bd; }
tbody tr.fila-revisar td { background: #fbe0dc; }
.enlace { background: none; border: 0; padding: 2px 0; margin: 2px 0 0; color: var(--brand-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.enlace:hover { color: var(--brand); }

/* Límite de solo lectura (la oficina lo ve como texto) */
#alerta-umbral-texto { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

/* ===== Tema oscuro ===== */
html[data-theme="dark"] {
  --sobrante: #c4a6f5; --sobrante-fondo: #241a38; --sobrante-fondo-2: #2d2147;
}
html[data-theme="dark"] .badge-provisional { background: #1d2528; color: var(--muted); border-color: #2a3538; }
html[data-theme="dark"] .badge-revisar { background: #321712; color: #f0a79b; border-color: #4b2a24; }
html[data-theme="dark"] tbody tr.fila-revisar td { background: #3a1a15; }
html[data-theme="dark"] .enlace { color: #7fc7d1; }
html[data-theme="dark"] #mensual-cuadre-body .value.faltante { color: #ff8b7c; }
html[data-theme="dark"] #mensual-cuadre-body .value.sobrante { color: #7fd39a; }

/* ===== Teléfono ===== */
.tabla-reportes .fecha-m { display: none; }
@media (max-width: 720px) {
  .tabla-reportes .col-fecha { display: none; }
  .tabla-reportes .fecha-m { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .tabla-reportes td:last-child { white-space: normal; }
  .tabla-reportes .enlace { white-space: normal; text-align: left; }
  .tabla-reportes td:last-child .btn { margin: 2px 2px 2px 0; }
  .reportes-top { gap: 8px; }
  .reportes-top #btn-respaldo { margin-left: 0; }
  .reportes-acciones { width: 100%; }
  .tabla-reportes th, .tabla-reportes td { padding-left: 4px; padding-right: 4px; }
  .tabla-reportes th:first-child, .tabla-reportes td:first-child { padding-left: 8px; }
  .tabla-reportes td:last-child .btn { padding-left: 9px; padding-right: 9px; }

  /* En el teléfono cada cierre es una tarjeta de tres líneas (tienda y diferencia; estado; botones): nada se corta. */
  .tabla-reportes thead { display: none; }
  .tabla-reportes tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .tabla-reportes tbody td { display: block; border-bottom: none; white-space: normal; padding: 3px 10px; }
  .tabla-reportes tbody td:nth-child(1) { grid-column: 1; grid-row: 1; padding-top: 10px; }
  .tabla-reportes tbody td:nth-child(4) { grid-column: 2; grid-row: 1; padding-top: 10px; }
  .tabla-reportes tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .tabla-reportes tbody td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .tabla-reportes td:last-child .btn { margin: 0; }
  .tabla-reportes tbody td:nth-child(5) .btn { min-height: 38px; }
  tbody tr.fila-alerta td:first-child, tbody tr.fila-sobrante td:first-child { box-shadow: none; }
  tbody tr.fila-alerta td:nth-child(odd):not(:nth-child(4)) { box-shadow: inset 3px 0 0 var(--err); }
  tbody tr.fila-sobrante td:nth-child(odd):not(:nth-child(4)) { box-shadow: inset 3px 0 0 var(--sobrante); }
  html[data-theme="dark"] tbody tr.fila-alerta td:first-child { box-shadow: none; }
  html[data-theme="dark"] tbody tr.fila-alerta td:nth-child(odd):not(:nth-child(4)) { box-shadow: inset 3px 0 0 #ff8b7c; }
  /* El título de «Cierres de hoy» y sus botones: título arriba (una o dos líneas), botones debajo, enteros. */
  #hoy-card .card-header { flex-wrap: wrap; gap: 8px; }
  #hoy-card .card-header h3 { flex: 1 1 100%; flex-wrap: wrap; }
  #hoy-resumen { white-space: nowrap; }
  #hoy-card .reportes-acciones { width: 100%; }
  #hoy-card .reportes-acciones .btn { flex: 1 1 auto; justify-content: center; }
}