/* ===========================================================================
   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);
}

/* La marca ya no es un botón: la configuración se abre con el icono de
   ajustes de la derecha. Se deja sin cursor ni hover a propósito, para que no
   parezca pulsable mientras no tenga acción. */
.sr-marca {
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
  min-width: 0;
  padding: var(--sr-e1);
  color: inherit;
  text-align: left;
}

/* 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  =============================== */

/* Columnas fijas y no auto-fit: son ocho tarjetas, y con auto-fit quedan
   filas desparejas segun el ancho. Dos por fila en telefono y cuatro en
   escritorio dan siempre filas completas. */
.sr-tablero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sr-e3);
  margin-bottom: var(--sr-e8);
}
@media (min-width: 900px) { .sr-tablero { grid-template-columns: repeat(4, 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; }
}

/* ======================  Cuentas abiertas  ===============================
   Un restaurante con más de 50 mesas hace del tablero un rollo interminable
   si cada cuenta ocupa una ficha entera. Cada una se muestra en UN renglón
   —mesa, mesero, tiempo e importe, que es lo que se mira de un vistazo— y el
   resto del detalle se despliega al tocarla.

   Se usa <details> nativo a propósito: se abre y cierra sin JavaScript, el
   teclado y los lectores de pantalla ya saben qué es, y sigue funcionando si
   el script falla. */

.sr-cuentas { display: flex; flex-direction: column; gap: var(--sr-e1); }

.sr-cuenta {
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  overflow: hidden;
}
.sr-cuenta[open] { border-color: var(--sr-tenue); }

.sr-cuenta__resumen {
  display: grid;
  /* flecha, mesa, mesero, minutos, total: cinco columnas. El mesero es el
     unico elastico, para que la mesa y el importe no bailen de sitio al
     recorrer la lista con la vista. */
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sr-e3);
  min-height: var(--sr-toque);
  padding: var(--sr-e2) var(--sr-e3);
  cursor: pointer;
  list-style: none;                 /* fuera el triángulo del navegador */
  user-select: none;
}
.sr-cuenta__resumen::-webkit-details-marker { display: none; }
.sr-cuenta__resumen:hover { background: var(--sr-elevada); }
.sr-cuenta__resumen:focus-visible { outline: none; box-shadow: inset var(--sr-foco); }

/* Chevron propio, que gira al abrir. */
.sr-cuenta__flecha {
  flex: none;
  width: 18px;
  color: var(--sr-tenue);
  font-size: 11px;
  text-align: center;
  transition: transform var(--sr-transicion);
}
.sr-cuenta[open] .sr-cuenta__flecha { transform: rotate(90deg); color: var(--sr-primario); }

.sr-cuenta__mesa {
  font-weight: 700;
  font-size: var(--sr-t-cuerpo);
  color: var(--sr-texto);
  white-space: nowrap;
}
.sr-cuenta__mesero {
  min-width: 0;
  font-size: var(--sr-t-menor);
  color: var(--sr-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-cuenta__min {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  white-space: nowrap;
}
/* Una mesa que lleva mucho abierta es lo que hay que mirar. */
.sr-cuenta__min[data-mucho="si"] { color: var(--sr-primario); }
.sr-cuenta__total {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-cuerpo);
  font-weight: 600;
  color: var(--sr-cifra);
  white-space: nowrap;
  text-align: right;
}

.sr-cuenta__detalle {
  margin: 0;
  padding: var(--sr-e2) var(--sr-e3) var(--sr-e3);
  border-top: 1px solid var(--sr-linea);
  background: var(--sr-hundida);
}
.sr-cuenta__par {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sr-e4);
  padding: var(--sr-e1) 0;
}
.sr-cuenta__par dt {
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-cuenta__par dd {
  margin: 0;
  font-size: var(--sr-t-base);
  color: var(--sr-texto);
  text-align: right;
}
.sr-cuenta__par dd.sr-num {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sr-cifra);
}

/* La sección entera también se pliega: con el salón lleno, a veces solo se
   quieren ver los números de arriba. */
.sr-plegable > summary { cursor: pointer; list-style: none; }
.sr-plegable > summary::-webkit-details-marker { display: none; }
.sr-plegable > summary:focus-visible { outline: none; box-shadow: var(--sr-foco); }
.sr-plegable > summary .sr-seccion__titulo { margin-bottom: 0; }
.sr-plegable:not([open]) > summary .sr-seccion__titulo { margin-bottom: var(--sr-e3); }
.sr-plegable > summary .sr-plegable__estado::after { content: "ocultar"; }
.sr-plegable:not([open]) > summary .sr-plegable__estado::after { content: "mostrar"; }
.sr-plegable__estado {
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-primario);
  margin-left: var(--sr-e3);
}

@media (max-width: 420px) {
  /* En pantallas muy angostas el mesero estorba en el renglón: baja al
     detalle, donde ya aparece con su etiqueta. */
  /* Sin el mesero quedan cuatro columnas y la elastica pasa a ser la mesa. */
  .sr-cuenta__resumen { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .sr-cuenta__mesero { display: none; }
}

/* =====================  Iconos de la barra superior  =====================
   Campana y ajustes comparten forma: dos botones cuadrados del mismo tamaño,
   con el glifo en SVG heredando el color de la interfaz. En emoji no casarían
   —cada uno se dibuja con otra familia tipográfica— y no se podrían teñir. */

.sr-icono {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  color: var(--sr-tenue);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--sr-transicion), background var(--sr-transicion), color var(--sr-transicion);
}
.sr-icono:hover { border-color: var(--sr-tenue); background: var(--sr-elevada); color: var(--sr-texto); }

.sr-icono__glifo {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La campana avisa por sí sola cuando hay algo sin ver. */
.sr-icono[data-hay="si"] { color: var(--sr-primario); border-color: var(--sr-primario); }
.sr-icono[data-hay="si"] .sr-icono__glifo { animation: sr-campanazo 1.2s ease-in-out 2; transform-origin: 50% 15%; }
.sr-icono[data-nivel="mal"] { color: var(--sr-mal); border-color: var(--sr-mal); }

@keyframes sr-campanazo {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}

.sr-icono__contador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--sr-primario);
  color: var(--sr-primario-on);
  border: 2px solid var(--sr-superficie);
  border-radius: 9px;
  font-family: var(--sr-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.sr-icono[data-nivel="mal"] .sr-icono__contador { background: var(--sr-mal); }
/* Sin esto el contador se ve aunque este vacio: `display: grid` de arriba gana
   por especificidad al `display: none` que el navegador aplica a [hidden]. */
.sr-icono__contador[hidden] { display: none; }

/* ------------------------------ El panel -------------------------------- */

.sr-dialogo--avisos { width: min(560px, calc(100vw - 2 * var(--sr-e3))); }

.sr-avisos__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-e3);
  margin-bottom: var(--sr-e4);
}
.sr-avisos__cabecera .sr-dialogo__titulo { margin: 0; }

.sr-avisos__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sr-e3);
  flex-wrap: wrap;
  margin: var(--sr-e5) 0 var(--sr-e2);
}
.sr-avisos__titulo .sr-seccion__titulo { margin: 0; }
/* El botón de limpiar es discreto: borra el registro, no cambia ningún dato. */
.sr-avisos__titulo .sr-boton { min-height: 34px; font-size: var(--sr-t-micro); text-transform: uppercase; letter-spacing: var(--sr-track-micro); }

.sr-avisos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sr-e1);
}

.sr-aviso-item {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) auto;
  gap: var(--sr-e3);
  align-items: baseline;
  padding: var(--sr-e2) var(--sr-e3) var(--sr-e2) 0;
  background: var(--sr-hundida);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  overflow: hidden;
}
/* Riel de color, el mismo lenguaje que la barra de estado. */
.sr-aviso-item::before { content: ""; align-self: stretch; background: var(--sr-borde); }
.sr-aviso-item[data-nivel="bien"]::before { background: var(--sr-bien); }
.sr-aviso-item[data-nivel="mal"]::before  { background: var(--sr-mal); }
.sr-aviso-item[data-nivel="info"]::before { background: var(--sr-primario); }
/* Sin leer: el fondo lo distingue del resto sin gritar. */
.sr-aviso-item[data-visto="no"] { background: var(--sr-superficie); border-color: var(--sr-tenue); }

.sr-aviso-item__texto { font-size: var(--sr-t-base); line-height: 1.5; color: var(--sr-texto); overflow-wrap: anywhere; }
.sr-aviso-item[data-nivel="mal"] .sr-aviso-item__texto { color: var(--sr-mal); }
.sr-aviso-item__hora {
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  white-space: nowrap;
}

.sr-avisos__ayuda { margin-top: var(--sr-e5); border-top: var(--sr-borde-fino); padding-top: var(--sr-e3); }
.sr-avisos__ayuda > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-primario);
}
.sr-avisos__ayuda > summary::-webkit-details-marker { display: none; }
.sr-avisos__ayuda > summary:focus-visible { outline: none; box-shadow: var(--sr-foco); }
.sr-avisos__ayuda .sr-nota-pie { margin-top: var(--sr-e3); }

/* Dentro del panel, el bloque de estado ya no necesita su propia caja. */
.sr-dialogo--avisos .sr-estado { margin-top: 0; }

/* ==========================  Zona de riesgo  ============================
   Acciones que borran y no se deshacen. Van visualmente aparte del resto del
   formulario para que nadie las pulse creyendo que guardan algo. */

.sr-peligro {
  margin-top: var(--sr-e6);
  padding: var(--sr-e4);
  border: 1px solid var(--sr-mal);
  border-radius: var(--sr-r3);
  background: var(--sr-mal-velo);
}
.sr-peligro__titulo {
  margin: 0 0 var(--sr-e2);
  font-size: var(--sr-t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-mal);
}
.sr-peligro .sr-pista { margin-bottom: var(--sr-e3); }

.sr-boton--peligro { border-color: var(--sr-mal); color: var(--sr-mal); }
.sr-boton--peligro:hover { background: var(--sr-mal); color: var(--sr-fondo); border-color: var(--sr-mal); }
/* Armado: la primera pulsación no borra, pide confirmar. */
.sr-boton--peligro[data-armado="si"] { background: var(--sr-mal); color: var(--sr-fondo); }

/* La versión del build, al pie del panel de configuración: es lo primero que
   se pregunta cuando algo no cuadra entre el teléfono y el navegador. */
.sr-version {
  margin: var(--sr-e5) 0 0;
  padding-top: var(--sr-e3);
  border-top: var(--sr-borde-fino);
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  text-align: center;
}
.sr-version strong { color: var(--sr-primario); font-family: var(--sr-mono); font-weight: 600; }

/* ==========================  Menú de sucursales  =========================
   La placa SR abre la lista de tableros. Son enlaces a otros servidores, no
   un cambio de conexión: el navegador no puede leer la API de otra sucursal
   sin abrir esos endpoints a cualquier origen, y eso no compensa. */

.sr-marca--menu { position: relative; padding: 0; }
.sr-marca__disparo {
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
  min-width: 0;
  padding: var(--sr-e1);
  border: 1px solid transparent;
  border-radius: var(--sr-r2);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--sr-transicion), background var(--sr-transicion);
}
.sr-marca__disparo::-webkit-details-marker { display: none; }
.sr-marca__disparo:hover { border-color: var(--sr-borde); background: var(--sr-elevada); }
.sr-marca__disparo:focus-visible { outline: none; box-shadow: var(--sr-foco); }
.sr-marca__flecha {
  flex: none;
  color: var(--sr-tenue);
  font-size: 11px;
  transition: transform var(--sr-transicion);
}
.sr-marca--menu[open] .sr-marca__flecha { transform: rotate(180deg); color: var(--sr-primario); }
.sr-marca--menu[open] .sr-marca__disparo { border-color: var(--sr-primario); }

.sr-sucursales {
  position: absolute;
  top: calc(100% + var(--sr-e2));
  left: 0;
  z-index: 40;
  min-width: 260px;
  max-width: min(340px, calc(100vw - var(--sr-e6)));
  padding: var(--sr-e2);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  box-shadow: var(--sr-sombra);
}
.sr-sucursales__titulo {
  margin: var(--sr-e1) var(--sr-e2) var(--sr-e2);
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-sucursales__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sr-e3);
  min-height: var(--sr-toque);
  padding: var(--sr-e2) var(--sr-e3);
  border-radius: var(--sr-r2);
  color: var(--sr-texto);
  text-decoration: none;
}
a.sr-sucursales__item:hover { background: var(--sr-elevada); color: var(--sr-texto); }
a.sr-sucursales__item:focus-visible { outline: none; box-shadow: inset var(--sr-foco); }
/* La sucursal en la que ya estás, y las que aún no tienen dirección: se ven,
   para saber que existen, pero no llevan a ningún lado. */
span.sr-sucursales__item { opacity: .55; cursor: default; }
.sr-sucursales__item[data-actual="si"] { opacity: 1; }
.sr-sucursales__item[data-actual="si"] .sr-sucursales__nombre { color: var(--sr-primario); }
.sr-sucursales__nombre { font-weight: 650; font-size: var(--sr-t-cuerpo); }
.sr-sucursales__nota {
  font-family: var(--sr-mono);
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------ Editor, dentro de Ajustes --------------------- */

/* Token de configuracion: separado del resto porque no es un ajuste del
   negocio, es la llave para poder guardar desde fuera de la red. */
.sr-acceso { margin-top: var(--sr-e6); padding-top: var(--sr-e4); border-top: var(--sr-borde-fino); }
.sr-acceso .sr-campo { font-family: var(--sr-mono); letter-spacing: 0.08em; }
.sr-acceso #avisoToken:empty { display: none; }

.sr-sucursales-editor { margin-top: var(--sr-e6); padding-top: var(--sr-e4); border-top: var(--sr-borde-fino); }
.sr-sucursal-fila {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) auto;
  gap: var(--sr-e2);
  align-items: center;
  margin-bottom: var(--sr-e2);
}
.sr-sucursal-fila .sr-campo { min-height: 38px; }
.sr-sucursal-fila__quitar {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: none;
  color: var(--sr-tenue);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.sr-sucursal-fila__quitar:hover { border-color: var(--sr-mal); color: var(--sr-mal); }
.sr-sucursales-editor__pie { display: flex; gap: var(--sr-e2); flex-wrap: wrap; margin-top: var(--sr-e3); }

@media (max-width: 560px) {
  .sr-sucursal-fila { grid-template-columns: minmax(0, 1fr) auto; }
  /* En un teléfono la dirección se pone debajo del nombre, no al lado. */
  .sr-sucursal-fila .sr-campo--url { grid-column: 1 / -1; }
  .sr-sucursales { left: auto; right: 0; }
}