/* ===========================================================================
   Monitor de Ventas — hoja de estilo única
   ---------------------------------------------------------------------------
   Identidad: paleta ETSY de PaletaColor Pro (#F56400 #222222 #FFFFFF #D5641C
   #FDEBD2) llevada a un lenguaje industrial: grafito tibio, naranja de
   maquinaria, cifras monoespaciadas como panel de instrumentos.

   Regla del proyecto: TODO color, medida, radio y sombra sale de un token de
   :root. Si necesitas un valor nuevo, se agrega arriba; nunca un HEX suelto
   dentro de un componente.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- Color: neutros (derivados del #222222 de la paleta, en tibio) ------ */
  --sr-fondo:        #131211;  /* lienzo de la app                           */
  --sr-superficie:   #1B1A18;  /* tarjetas, tablas, barras                   */
  --sr-elevada:      #222222;  /* paleta ETSY — cabeceras y estados hover    */
  --sr-hundida:      #0D0C0B;  /* campos de captura                          */
  --sr-borde:        #302E2B;
  --sr-linea:        #252320;  /* separadores internos, más tenues           */

  /* --- Color: texto ------------------------------------------------------ */
  --sr-texto:        #FDEBD2;  /* paleta ETSY — 14.9:1 sobre superficie      */
  --sr-cifra:        #FFFFFF;  /* paleta ETSY — 17.4:1, solo para números    */
  --sr-tenue:        #A29A8E;  /* 6.3:1 — etiquetas y notas                  */

  /* --- Color: acento ----------------------------------------------------- */
  --sr-primario:     #F56400;  /* paleta ETSY — 5.6:1 sobre superficie       */
  --sr-primario-alt: #FF8A3D;  /* aclarado para hover de texto (7.4:1)       */
  --sr-primario-on:  #131211;  /* SOBRE naranja va oscuro: 5.97:1.           */
                               /* En blanco daría 3.13:1 y reprobaría AA.    */
  --sr-presionado:   #D5641C;  /* paleta ETSY — estado :active               */
  --sr-primario-velo: rgba(245, 100, 0, .13);
  --sr-primario-halo: rgba(245, 100, 0, .28);

  /* --- Color: estados ----------------------------------------------------
     La paleta ETSY no trae verde ni rojo. Se eligen aquí dos tonos que
     conviven con el naranja sin competir: un verde oliva industrial y un
     rojo claramente rosado (si fuera un rojo cálido se confundiría con el
     naranja primario). Ambos verificados a AA. */
  --sr-bien:         #7FB069;  /* 6.9:1  */
  --sr-mal:          #FF6B5E;  /* 6.2:1  */
  --sr-bien-velo:    rgba(127, 176, 105, .12);
  --sr-mal-velo:     rgba(255, 107, 94, .12);

  /* --- Tipografía --------------------------------------------------------
     Sin fuentes externas a propósito: la PWA tiene que arrancar offline y el
     sitio se copia a mano a htdocs. La personalidad la dan el tracking de las
     micro-etiquetas y la mono tabular de las cifras, no un archivo de fuente. */
  --sr-fuente:  "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --sr-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;

  --sr-t-micro:  0.6875rem;  /* 11px — etiquetas en versalitas              */
  --sr-t-menor:  0.75rem;    /* 12px                                        */
  --sr-t-base:   0.8125rem;  /* 13px — tablas                               */
  --sr-t-cuerpo: 0.875rem;   /* 14px                                        */
  --sr-t-titulo: 1rem;       /* 16px                                        */
  --sr-t-cifra:  1.75rem;    /* 28px — valor de tarjeta                     */
  --sr-t-cifra-g:2.25rem;    /* 36px — valor destacado en pantalla ancha    */

  --sr-track-micro: .09em;   /* versalitas industriales                     */
  --sr-track-titulo: -.01em;

  /* --- Espaciado (escala de 4) ------------------------------------------- */
  --sr-e1: 4px;   --sr-e2: 8px;   --sr-e3: 12px;  --sr-e4: 16px;
  --sr-e5: 20px;  --sr-e6: 24px;  --sr-e8: 32px;  --sr-e10: 40px;

  /* --- Forma -------------------------------------------------------------
     Radios cortos: lo industrial es chaflán, no pastilla. */
  --sr-r1: 3px;  --sr-r2: 6px;  --sr-r3: 10px;
  --sr-borde-fino: 1px solid var(--sr-borde);

  /* --- Sombra y foco ------------------------------------------------------ */
  --sr-sombra: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px -12px rgba(0,0,0,.7);
  --sr-foco: 0 0 0 2px var(--sr-fondo), 0 0 0 4px var(--sr-primario);

  --sr-toque: 44px;          /* objetivo táctil mínimo en móvil             */
  --sr-ancho: 1240px;
  --sr-transicion: 140ms cubic-bezier(.2, 0, .2, 1);

  /* Alto real de la barra superior pegajosa. Lo usan el encabezado pegajoso
     de las tablas y el scroll-margin de las secciones: si no cuadra, la fila
     de títulos se esconde detrás de la barra al desplazar. */
  --sr-alto-cabecera: 59px;
}

/* Franja de peligro: el elemento firma del tablero. Aparece SOLO en la barra
   de estado cuando algo va mal (sin datos, espejo viejo). Un único lugar. */
:root {
  --sr-peligro: repeating-linear-gradient(
    -45deg,
    var(--sr-primario) 0 10px,
    var(--sr-elevada)  10px 20px
  );
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================  Base  ====================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--sr-fondo);
  color: var(--sr-texto);
  font-family: var(--sr-fuente);
  font-size: var(--sr-t-cuerpo);
  line-height: 1.5;
  /* Un rastro de calor arriba: sugiere el naranja sin teñir la interfaz. */
  background-image: radial-gradient(120% 60% at 50% -20%, rgba(245,100,0,.07), transparent 60%);
  background-attachment: fixed;
}

:where(a) { color: var(--sr-primario); text-decoration-color: var(--sr-primario-halo); }
:where(a):hover { color: var(--sr-primario-alt); }

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sr-foco);
  border-radius: var(--sr-r2);
}

code { font-family: var(--sr-mono); font-size: .95em; color: var(--sr-primario-alt); }

.sr-cifra {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Solo para lectores de pantalla. */
.sr-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================  Encabezado  ================================= */

.sr-encabezado {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--sr-superficie) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--sr-borde-fino);
}

.sr-encabezado__fila {
  max-width: var(--sr-ancho);
  margin: 0 auto;
  padding: var(--sr-e3) var(--sr-e4);
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
}

.sr-marca {
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
  min-width: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--sr-r2);
  padding: var(--sr-e1);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--sr-transicion);
}
.sr-marca:hover { border-color: var(--sr-borde); }

/* El logotipo es una placa: cuadro naranja con las siglas en negativo. */
.sr-marca__placa {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: var(--sr-primario);
  color: var(--sr-primario-on);
  border-radius: var(--sr-r2);
  font-family: var(--sr-mono);
  font-size: var(--sr-t-menor);
  font-weight: 700;
  letter-spacing: -.04em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}

.sr-marca__texto { min-width: 0; }
.sr-marca__titulo {
  margin: 0;
  font-size: var(--sr-t-cuerpo);
  font-weight: 650;
  letter-spacing: var(--sr-track-titulo);
  white-space: nowrap;
}
.sr-marca__sub {
  display: block;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-encabezado__derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
}

/* LED de estado: verde late, rojo fijo. Es la lectura de un vistazo. */
.sr-led {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-e2);
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
  white-space: nowrap;
}
.sr-led::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sr-tenue);
  box-shadow: 0 0 0 3px transparent;
}
.sr-led[data-estado="bien"]::before {
  background: var(--sr-bien);
  animation: sr-latido 2.4s ease-in-out infinite;
}
.sr-led[data-estado="mal"]::before { background: var(--sr-mal); box-shadow: 0 0 0 3px var(--sr-mal-velo); }
.sr-led[data-estado="bien"] { color: var(--sr-bien); }
.sr-led[data-estado="mal"]  { color: var(--sr-mal); }

@keyframes sr-latido {
  0%, 100% { box-shadow: 0 0 0 0 var(--sr-bien-velo); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

.sr-reloj {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-menor);
  color: var(--sr-tenue);
  white-space: nowrap;
}

/* ======================  Barra de jornada  =============================== */

.sr-jornada {
  border-bottom: var(--sr-borde-fino);
  background: var(--sr-fondo);
}
.sr-jornada__fila {
  max-width: var(--sr-ancho);
  margin: 0 auto;
  padding: var(--sr-e3) var(--sr-e4);
  display: flex;
  align-items: center;
  gap: var(--sr-e2);
  flex-wrap: wrap;
}
.sr-jornada__etiqueta {
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-jornada__crecer { flex: 1 1 auto; }
.sr-jornada__angosto { display: none; }   /* se intercambian bajo 560px */

/* =========================  Controles  =================================== */

.sr-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sr-e2);
  min-height: var(--sr-toque);
  padding: 0 var(--sr-e4);
  background: var(--sr-superficie);
  color: var(--sr-texto);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  font: inherit;
  font-size: var(--sr-t-menor);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sr-transicion), border-color var(--sr-transicion), color var(--sr-transicion);
}
.sr-boton:hover { background: var(--sr-elevada); border-color: var(--sr-tenue); }
.sr-boton:active { background: var(--sr-hundida); }

.sr-boton--primario {
  background: var(--sr-primario);
  color: var(--sr-primario-on);
  border-color: var(--sr-primario);
}
.sr-boton--primario:hover { background: var(--sr-primario-alt); border-color: var(--sr-primario-alt); }
.sr-boton--primario:active { background: var(--sr-presionado); border-color: var(--sr-presionado); }

.sr-boton--icono { min-width: var(--sr-toque); padding: 0 var(--sr-e2); font-size: var(--sr-t-titulo); }

.sr-boton[disabled] { opacity: .5; cursor: not-allowed; }
.sr-boton[data-cargando="si"] { cursor: progress; }
.sr-boton[data-cargando="si"] .sr-boton__giro { animation: sr-giro 900ms linear infinite; }

@keyframes sr-giro { to { transform: rotate(360deg); } }
.sr-boton__giro { display: inline-block; line-height: 1; }

.sr-campo {
  min-height: var(--sr-toque);
  padding: 0 var(--sr-e3);
  background: var(--sr-hundida);
  color: var(--sr-texto);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  font: inherit;
  font-size: var(--sr-t-menor);
  font-family: var(--sr-mono);
  width: 100%;
  transition: border-color var(--sr-transicion);
}
.sr-campo:hover { border-color: var(--sr-tenue); }
.sr-campo[readonly] { opacity: .65; cursor: default; }
.sr-campo--fecha { width: auto; min-width: 150px; }
/* El icono nativo del selector de fecha es negro sobre fondo oscuro. */
.sr-campo--fecha::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(1) saturate(4) hue-rotate(-15deg); cursor: pointer; }

/* ===========================  Cuerpo  ==================================== */

.sr-cuerpo {
  max-width: var(--sr-ancho);
  margin: 0 auto;
  padding: var(--sr-e6) var(--sr-e4) var(--sr-e10);
}

.sr-seccion { margin-bottom: var(--sr-e8); scroll-margin-top: calc(var(--sr-alto-cabecera) + var(--sr-e4)); }

.sr-seccion__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--sr-e3);
  margin: 0 0 var(--sr-e3);
  font-size: var(--sr-t-menor);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
/* Guion de maquinaria antes del título: marca de sección sin ocupar espacio. */
.sr-seccion__titulo::before {
  content: "";
  width: 14px; height: 2px;
  background: var(--sr-primario);
  flex: none;
  transform: translateY(-3px);
}
.sr-seccion__conteo {
  margin-left: auto;
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sr-tenue);
}

/* ==========================  Tarjetas KPI  =============================== */

/* Tres columnas y no auto-fit: son seis tarjetas, y con auto-fit caben cinco
   arriba y una suelta abajo. Tres por fila da dos filas parejas. */
.sr-tablero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sr-e3);
  margin-bottom: var(--sr-e8);
}
@media (min-width: 780px) { .sr-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sr-tarjeta {
  position: relative;
  padding: var(--sr-e4);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  overflow: hidden;
  box-shadow: var(--sr-sombra);
}
/* Filo superior de color: es lo que distingue una tarjeta de otra de un vistazo. */
.sr-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 42px; height: 3px;
  background: var(--sr-borde);
}
.sr-tarjeta[data-tono="primario"]::before { background: var(--sr-primario); }
.sr-tarjeta[data-tono="bien"]::before     { background: var(--sr-bien); }
.sr-tarjeta[data-tono="mal"]::before      { background: var(--sr-mal); }

.sr-tarjeta__etiqueta {
  margin: 0;                 /* es un <h3>: sin esto el navegador mete 1em */
  font-size: var(--sr-t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-tarjeta__valor {
  margin: var(--sr-e2) 0 0;  /* el margen inferior por omisión es de 1em: 36px */
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-cifra);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--sr-cifra);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.sr-tarjeta[data-tono="primario"] .sr-tarjeta__valor { color: var(--sr-primario); }
.sr-tarjeta[data-tono="bien"] .sr-tarjeta__valor     { color: var(--sr-bien); }
.sr-tarjeta[data-tono="mal"] .sr-tarjeta__valor      { color: var(--sr-mal); }
.sr-tarjeta__nota {
  margin: var(--sr-e2) 0 0;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
}

/* Esqueleto mientras carga: evita el salto de layout del primer fetch. */
.sr-esqueleto {
  color: transparent !important;
  background: linear-gradient(90deg, var(--sr-elevada) 25%, var(--sr-borde) 50%, var(--sr-elevada) 75%);
  background-size: 300% 100%;
  border-radius: var(--sr-r1);
  animation: sr-brillo 1.4s ease-in-out infinite;
}
@keyframes sr-brillo { to { background-position: -300% 0; } }

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

.sr-tabla-caja {
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  overflow: hidden;
}
.sr-tabla-desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.sr-tabla { width: 100%; border-collapse: collapse; }
.sr-tabla th,
.sr-tabla td {
  padding: var(--sr-e3) var(--sr-e4);
  text-align: left;
  font-size: var(--sr-t-base);
  border-bottom: 1px solid var(--sr-linea);
  white-space: nowrap;
}
/* Sin position:sticky a propósito. La tabla vive dentro de .sr-tabla-desliza,
   que tiene overflow-x: eso convierte al contenedor en el ancla del sticky, no
   al viewport, así que `top` solo empujaba la fila de títulos hacia abajo
   tapando el primer registro. Las tablas son cortas; no vale el enredo. */
.sr-tabla thead th {
  background: var(--sr-elevada);
  color: var(--sr-tenue);
  font-size: var(--sr-t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
}
.sr-tabla tbody tr:last-child td { border-bottom: none; }
.sr-tabla tbody tr:hover td { background: var(--sr-elevada); }
.sr-tabla .sr-num {
  text-align: right;
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sr-cifra);
}
.sr-tabla thead .sr-num { color: var(--sr-tenue); }
/* Primera columna: es el nombre de la fila, merece peso. */
.sr-tabla tbody td:first-child { font-weight: 550; }

/* Estado vacío: caja de trazo discontinuo. Dice "aquí no hay nada todavía"
   sin recurrir a un emoji, que en Windows sale de otra familia y ensucia. */
.sr-vacio {
  padding: var(--sr-e6) var(--sr-e4);
  text-align: center;
  color: var(--sr-tenue);
  font-size: var(--sr-t-base);
  background: none;
  border: 1px dashed var(--sr-borde);
  border-radius: var(--sr-r3);
}
.sr-vacio--mal { border-color: var(--sr-mal); color: var(--sr-mal); }

/* ---- Móvil: la tabla se vuelve una lista de fichas -----------------------
   Con siete columnas, el scroll horizontal en un teléfono es inservible.
   Cada fila pasa a ficha y cada celda muestra su encabezado desde data-col. */
@media (max-width: 720px) {
  .sr-tabla, .sr-tabla tbody, .sr-tabla tr, .sr-tabla td { display: block; width: 100%; }
  .sr-tabla thead { display: none; }
  .sr-tabla-caja { background: none; border: none; border-radius: 0; }

  .sr-tabla tr {
    background: var(--sr-superficie);
    border: var(--sr-borde-fino);
    border-radius: var(--sr-r3);
    margin-bottom: var(--sr-e2);
    padding: var(--sr-e1) 0;
    box-shadow: var(--sr-sombra);
  }
  .sr-tabla tbody tr:hover td { background: none; }

  .sr-tabla td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sr-e4);
    padding: var(--sr-e2) var(--sr-e4);
    border-bottom: none;
    white-space: normal;
    text-align: right;
  }
  .sr-tabla td::before {
    content: attr(data-col);
    flex: none;
    font-size: var(--sr-t-micro);
    text-transform: uppercase;
    letter-spacing: var(--sr-track-micro);
    color: var(--sr-tenue);
    text-align: left;
  }
  /* La primera celda es el título de la ficha: ocupa todo el ancho, con su
     etiqueta encima en pequeño. Sin ella un folio se leería como un "1"
     suelto, sin decir de qué es. */
  .sr-tabla td:first-child {
    display: block;
    text-align: left;
    padding-top: var(--sr-e3);
    padding-bottom: var(--sr-e2);
    margin-bottom: var(--sr-e1);
    border-bottom: 1px solid var(--sr-linea);
    font-size: 1.0625rem;
    font-weight: 650;
    color: var(--sr-texto);
  }
  .sr-tabla td:first-child::before {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
  }
  .sr-tabla td:last-child { padding-bottom: var(--sr-e3); }
  .sr-tabla .sr-num { text-align: right; }
}

/* =======================  Barra de estado  ===============================
   Reúne todo lo que puede ir mal: origen de datos, frescura, resultado de la
   última sincronización. Es el único lugar con franja de peligro. */

.sr-estado {
  position: relative;
  margin-top: var(--sr-e8);
  padding: var(--sr-e4) var(--sr-e4) var(--sr-e4) var(--sr-e5);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  overflow: hidden;
}
.sr-estado::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--sr-borde);
}
.sr-estado[data-estado="bien"]::before { background: var(--sr-bien); }
.sr-estado[data-estado="mal"]::before  { background: var(--sr-peligro); }

.sr-estado__linea {
  display: flex;
  align-items: baseline;
  gap: var(--sr-e2);
  flex-wrap: wrap;
  font-size: var(--sr-t-menor);
  color: var(--sr-tenue);
  margin: 0 0 var(--sr-e2);
}
.sr-estado__linea:last-child { margin-bottom: 0; }
.sr-estado__clave {
  flex: none;
  min-width: 108px;
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-estado__valor { color: var(--sr-texto); }
.sr-estado__valor--mal  { color: var(--sr-mal); }
.sr-estado__valor--bien { color: var(--sr-bien); }

.sr-nota-pie {
  margin: var(--sr-e4) 0 0;
  font-size: var(--sr-t-menor);
  color: var(--sr-tenue);
  line-height: 1.65;
}
.sr-nota-pie strong { color: var(--sr-texto); font-weight: 600; }

/* ==========================  Avisos  ===================================== */

.sr-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-e3);
  padding: var(--sr-e3) var(--sr-e4);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  font-size: var(--sr-t-menor);
  line-height: 1.55;
  background: var(--sr-hundida);
}
.sr-aviso--bien { border-color: var(--sr-bien); background: var(--sr-bien-velo); color: var(--sr-bien); }
.sr-aviso--mal  { border-color: var(--sr-mal);  background: var(--sr-mal-velo);  color: var(--sr-mal); }
.sr-aviso__icono { flex: none; }

/* Cinta superior cuando la PWA está sin conexión. */
.sr-sin-linea {
  display: none;
  padding: var(--sr-e2) var(--sr-e4);
  background: var(--sr-primario);
  color: var(--sr-primario-on);
  font-size: var(--sr-t-menor);
  font-weight: 650;
  text-align: center;
}
body[data-conexion="no"] .sr-sin-linea { display: block; }

/* ===========================  Diálogo  =================================== */

.sr-dialogo {
  width: min(620px, calc(100vw - 2 * var(--sr-e4)));
  padding: 0;
  background: var(--sr-superficie);
  color: var(--sr-texto);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  box-shadow: var(--sr-sombra);
}
.sr-dialogo::backdrop { background: rgba(8, 7, 6, .72); backdrop-filter: blur(3px); }
.sr-dialogo__cuerpo { padding: var(--sr-e5); }
.sr-dialogo__titulo {
  margin: 0 0 var(--sr-e1);
  font-size: var(--sr-t-titulo);
  font-weight: 650;
  letter-spacing: var(--sr-track-titulo);
}
.sr-dialogo__ayuda { margin: 0 0 var(--sr-e5); font-size: var(--sr-t-menor); color: var(--sr-tenue); line-height: 1.6; }

.sr-etiqueta {
  display: block;
  margin: var(--sr-e4) 0 var(--sr-e2);
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-pista { margin: var(--sr-e2) 0 0; font-size: var(--sr-t-micro); color: var(--sr-tenue); line-height: 1.6; }

.sr-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sr-e4); align-items: start; }

.sr-acciones {
  display: flex;
  gap: var(--sr-e2);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--sr-e5);
  padding-top: var(--sr-e4);
  border-top: var(--sr-borde-fino);
}

/* Lista de archivos DBF encontrados, en el diálogo de configuración. */
.sr-archivos { display: flex; flex-wrap: wrap; gap: var(--sr-e1) var(--sr-e3); margin-top: var(--sr-e3); }
.sr-archivo {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-e1);
  font-family: var(--sr-mono);
  font-size: var(--sr-t-micro);
  color: var(--sr-bien);
}
.sr-archivo--falta { color: var(--sr-mal); }
.sr-archivo small { color: var(--sr-tenue); }

/* ======================  Pantallas anchas  =============================== */

@media (min-width: 900px) {
  .sr-cuerpo { padding-inline: var(--sr-e6); }
  .sr-encabezado__fila, .sr-jornada__fila { padding-inline: var(--sr-e6); }
  .sr-tarjeta__valor { font-size: var(--sr-t-cifra-g); }
}

/* ======================  Pantallas angostas  ============================= */

@media (max-width: 560px) {
  .sr-encabezado__fila { padding: var(--sr-e2) var(--sr-e3); gap: var(--sr-e2); }
  .sr-jornada__fila { padding: var(--sr-e2) var(--sr-e3); }
  .sr-cuerpo { padding: var(--sr-e4) var(--sr-e3) var(--sr-e10); }
  .sr-reloj { display: none; }             /* el teléfono ya trae reloj */
  .sr-marca__sub { display: none; }
  .sr-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-e2); }
  .sr-tarjeta { padding: var(--sr-e3); }
  .sr-tarjeta__valor { font-size: 1.375rem; }
  /* La barra superior encoge, así que el sticky de las tablas también. */
  :root { --sr-alto-cabecera: 51px; }
  /* Los tres controles caben en un renglón; la hora de la última lectura se
     va sola al siguiente, que es lo que se puede leer de un vistazo. */
  .sr-jornada__ancho { display: none; }
  .sr-jornada__angosto { display: inline; }
  .sr-jornada__crecer { display: none; }
  #lecturaDe { flex-basis: 100%; order: 9; }
  .sr-campo--fecha { flex: 1 1 auto; min-width: 130px; }
  .sr-boton { padding-inline: var(--sr-e3); }
  .sr-estado__clave { min-width: 100%; }
}

/* Respeta el notch y la barra de gestos cuando corre como app instalada. */
@media (display-mode: standalone) {
  .sr-encabezado { padding-top: env(safe-area-inset-top); }
  .sr-cuerpo { padding-bottom: calc(var(--sr-e10) + env(safe-area-inset-bottom)); }
}

@media print {
  .sr-encabezado, .sr-jornada, .sr-dialogo, .sr-boton { display: none !important; }
  body { background: #fff; color: #000; }
}