/* ===========================================================================
   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;
  /* Si aun asi no cabe, se corta con puntos: nunca se monta sobre lo de al
     lado, que es lo que pasaba en telefonos de 360 px. */
  overflow: hidden;
  text-overflow: ellipsis;
}
.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 selector de area del Monitor de Produccion. Sin esto hereda el
   width:100% de .sr-campo y se lleva el a otro renglon el resto de la barra. */
.sr-campo--area { width: auto; min-width: 170px; max-width: 240px; }
/* 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);
  white-space: nowrap;
}

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

/* Cifras de una sección: renglón de pares etiqueta/valor, como una regleta.
   Es la versión chica de las tarjetas KPI para lo que no merece una tarjeta
   entera, como los totales de cancelaciones. */
.sr-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-e2) var(--sr-e6);
  margin: 0 0 var(--sr-e4);
  padding: var(--sr-e3) var(--sr-e4);
  background: var(--sr-elevada);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
}
.sr-cifra { margin: 0; }
.sr-cifra dt {
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-cifra dd {
  margin: 2px 0 0;
  font-family: var(--sr-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sr-t-base);
  font-weight: 600;
  color: var(--sr-cifra);
}
.sr-cifra dd.sr-cifra--mal { color: var(--sr-mal); }

/* Nota al pie de una lista: una línea tenue que explica de dónde sale una cifra. */
.sr-nota-pie {
  margin: var(--sr-e2) var(--sr-e1) 0;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  line-height: 1.5;
}

/* Subtítulo dentro de una sección con más de una lista. */
.sr-subtitulo {
  margin: var(--sr-e4) 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-tenue);
}
.sr-subtitulo:first-child { margin-top: 0; }

/* ---- 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);
  white-space: nowrap;
}

@media (max-width: 420px) {
  /* En el renglon del titulo compiten tres cosas: el titulo, el conteo y
     "ocultar". A 360 px el titulo se partia en tres lineas y el conteo en
     dos. Se quita la palabra "registros" —el numero solo ya se entiende al
     lado del titulo— y la barra superior deja solo el punto de estado, que
     con su color dice lo mismo que el texto. */
  .sr-seccion__palabra { display: none; }
  .sr-led__texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .sr-led { position: relative; }
  /* Y los iconos se juntan un poco: cada píxel que ceden es para el título. */
  .sr-encabezado__derecha { gap: var(--sr-e2); }
  /* 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; }
  /* El panel de sucursales cuelga de la BARRA entera, no de la marca: anclado
     a la marca (que va pegada al borde izquierdo) y con 260 px de mínimo,
     sobresalía por la izquierda y "Ir al tablero de" salía cortado. */
  .sr-encabezado__fila { position: relative; }
  .sr-marca--menu { position: static; }
  .sr-sucursales {
    top: calc(100% + var(--sr-e1));
    left: var(--sr-e3);
    right: var(--sr-e3);
    min-width: 0;
    max-width: none;
  }
}


/* ===========================================================================
   MONITOR DE PRODUCCIÓN
   ---------------------------------------------------------------------------
   Otra pantalla, la misma paleta. Las diferencias con el tablero de ventas
   salen de dónde vive: colgada en una cocina, mirada de lejos y de reojo, y
   tocada con las manos ocupadas.

     · Tipos grandes y contrastados: se lee a dos metros, no a cuarenta
       centímetros.
     · El color dice tiempo, no categoría. Verde no es "bueno": es "recién
       pedido". Rojo no es "error": es "lleva demasiado esperando".
     · Objetivos táctiles generosos; el botón de marcar ocupa todo el ancho
       de la tarjeta.
     · Nada de emoji, igual que en el resto del proyecto: barras de color y
       cifras monoespaciadas.
   =========================================================================== */

/* En producción la barra superior es más alta y el cuerpo arranca antes: no
   hay secciones plegables que reserven sitio. */
.sr-produccion .sr-cuerpo { padding-top: var(--sr-e4); }

/* --- Cabeceras de área --------------------------------------------------- */
/* Una franja por área de impresión, siempre todas: quien está en cocina mira
   de reojo si la barra va ahogada. Son enlaces, no botones: cada una abre esa
   pantalla, y así se puede guardar el enlace en una tablet. */
.sr-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sr-e3);
  margin-bottom: var(--sr-e6);
}
.sr-area {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nombre cifra" "nota cifra" "hechas cifra";
  align-items: center;
  gap: 0 var(--sr-e3);
  padding: var(--sr-e3) var(--sr-e4);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--sr-transicion), background var(--sr-transicion);
}
.sr-area:hover { background: var(--sr-elevada); border-color: var(--sr-tenue); }
/* La barra de tono a la izquierda, como en las tarjetas del tablero. */
.sr-area::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sr-borde);
}
.sr-area[data-tono="normal"]::before  { background: var(--sr-bien); }
.sr-area[data-tono="aviso"]::before   { background: var(--sr-primario); }
.sr-area[data-tono="urgente"]::before { background: var(--sr-mal); }
/* El área que esta pantalla está mostrando, marcada sin gritar. */
.sr-area[data-activa="si"] {
  border-color: var(--sr-primario);
  background: var(--sr-primario-velo);
}

.sr-area__nombre {
  grid-area: nombre;
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-area__cifra {
  grid-area: cifra;
  font-family: var(--sr-mono);
  font-size: var(--sr-t-cifra);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sr-cifra);
}
.sr-area[data-tono="aviso"]   .sr-area__cifra { color: var(--sr-primario); }
.sr-area[data-tono="urgente"] .sr-area__cifra { color: var(--sr-mal); }
.sr-area[data-tono="libre"]   .sr-area__cifra { color: var(--sr-tenue); }
.sr-area__nota   { grid-area: nota; font-size: var(--sr-t-menor); color: var(--sr-texto); }
.sr-area__hechas { grid-area: hechas; font-size: var(--sr-t-micro); color: var(--sr-tenue); }

/* --- La rejilla de comandas ---------------------------------------------- */
/* Columnas anchas: una comanda de seis renglones tiene que caber sin que la
   tarjeta se estire a lo alto y empuje a las demás fuera de la pantalla. */
.sr-comandas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sr-e4);
  align-items: start;
}

.sr-comanda {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  overflow: hidden;
  box-shadow: var(--sr-sombra);
  transition: opacity var(--sr-transicion), border-color var(--sr-transicion);
}
/* La franja superior es el semáforo. Ocupa todo el ancho y no un filete
   lateral: es lo primero que se ve desde el otro lado de la cocina. */
.sr-comanda::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--sr-borde);
}
.sr-comanda[data-urgencia="normal"]::before  { background: var(--sr-bien); }
.sr-comanda[data-urgencia="aviso"]::before   { background: var(--sr-primario); }
.sr-comanda[data-urgencia="hecha"]::before   { background: var(--sr-borde); }
.sr-comanda[data-urgencia="urgente"]::before {
  /* La misma franja de peligro que usa la barra de estado del tablero: es el
     elemento firma del proyecto y aquí significa lo mismo, "atiende esto". */
  background: var(--sr-peligro);
}

/* Lo ya despachado se apaga en vez de desaparecer: sigue estando por si hay
   que deshacer, pero deja de competir por la atención. */
.sr-comanda[data-estado="entregada"] { opacity: .5; }
.sr-comanda[data-estado="lista"]     { border-color: var(--sr-bien); }
.sr-comanda[data-ocupada="si"]       { opacity: .6; pointer-events: none; }

.sr-comanda__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--sr-e2);
  padding: var(--sr-e3) var(--sr-e4) 0;
}
.sr-comanda__mesa {
  font-size: var(--sr-t-titulo);
  font-weight: 650;
  letter-spacing: var(--sr-track-titulo);
  color: var(--sr-cifra);
}
.sr-comanda__folio {
  font-family: var(--sr-mono);
  font-size: var(--sr-t-menor);
  color: var(--sr-tenue);
}
/* El reloj, a la derecha y en mono tabular para que no baile al subir de
   9 a 10 minutos. */
.sr-comanda__reloj {
  margin-left: auto;
  font-family: var(--sr-mono);
  font-size: var(--sr-t-cuerpo);
  font-variant-numeric: tabular-nums;
  color: var(--sr-texto);
}
.sr-comanda[data-urgencia="aviso"]   .sr-comanda__reloj { color: var(--sr-primario); }
.sr-comanda[data-urgencia="urgente"] .sr-comanda__reloj { color: var(--sr-mal); font-weight: 650; }
.sr-comanda[data-urgencia="hecha"]   .sr-comanda__reloj { color: var(--sr-tenue); }

.sr-comanda__meta {
  margin: var(--sr-e1) 0 0;
  padding: 0 var(--sr-e4);
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
}
.sr-comanda__area {
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-primario);
}

/* --- Los renglones ------------------------------------------------------- */
/* Lo que de verdad se lee. Cantidad a la izquierda en una columna fija, para
   que los números queden alineados aunque los nombres varíen de largo. */
.sr-comanda__lineas {
  margin: var(--sr-e3) 0 0;
  padding: var(--sr-e3) var(--sr-e4);
  list-style: none;
  border-top: 1px solid var(--sr-linea);
}
.sr-comanda__linea {
  display: grid;
  grid-template-columns: 2.5ch 1fr;
  gap: var(--sr-e1) var(--sr-e3);
  padding: var(--sr-e1) 0;
}
.sr-comanda__linea + .sr-comanda__linea { border-top: 1px solid var(--sr-linea); }
.sr-comanda__cant {
  font-family: var(--sr-mono);
  font-size: var(--sr-t-cuerpo);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sr-primario);
}
.sr-comanda__prod {
  font-size: var(--sr-t-cuerpo);
  line-height: 1.35;
  color: var(--sr-texto);
}
/* El comentario del mesero ("sin cebolla") es lo que más caro sale ignorar:
   va en su renglón, en cursiva y en el naranja de la casa. */
.sr-comanda__nota {
  grid-column: 2;
  font-size: var(--sr-t-menor);
  font-style: italic;
  color: var(--sr-primario-alt);
}

/* --- El pie con el botón ------------------------------------------------- */
.sr-comanda__pie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sr-e2);
  margin-top: auto;
  padding: var(--sr-e3) var(--sr-e4) var(--sr-e4);
  border-top: 1px solid var(--sr-linea);
}
.sr-comanda__quien {
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
/* Todo el ancho y alto de sobra: se toca sin mirar, con las manos ocupadas. */
.sr-comanda__accion {
  min-height: var(--sr-toque);
  width: 100%;
  padding: 0 var(--sr-e4);
  font: inherit;
  font-size: var(--sr-t-cuerpo);
  font-weight: 650;
  letter-spacing: var(--sr-track-micro);
  text-transform: uppercase;
  color: var(--sr-primario-on);       /* oscuro SOBRE naranja: 5.97:1 */
  background: var(--sr-primario);
  border: 1px solid var(--sr-primario);
  border-radius: var(--sr-r2);
  cursor: pointer;
  transition: background var(--sr-transicion);
}
.sr-comanda__accion:hover  { background: var(--sr-primario-alt); border-color: var(--sr-primario-alt); }
.sr-comanda__accion:active { background: var(--sr-presionado); border-color: var(--sr-presionado); }
.sr-comanda__accion:focus-visible { outline: none; box-shadow: var(--sr-foco); }
.sr-comanda__accion[disabled] { opacity: .45; cursor: not-allowed; }
/* En "lista" el botón pasa a verde: el siguiente paso ya no es cocinar, es
   llevarla a la mesa, y conviene que no se confunda con lo pendiente. */
.sr-comanda[data-estado="lista"] .sr-comanda__accion {
  background: var(--sr-bien);
  border-color: var(--sr-bien);
  color: var(--sr-primario-on);
}

.sr-comanda__hecha {
  padding: var(--sr-e2) 0;
  font-size: var(--sr-t-menor);
  text-align: center;
  color: var(--sr-tenue);
}
/* Deshacer va discreto y pequeño a propósito: es una salida de emergencia,
   no una opción que competir con el botón principal. */
.sr-comanda__deshacer {
  justify-self: center;
  padding: var(--sr-e1) var(--sr-e3);
  font: inherit;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  background: none;
  border: none;
  border-radius: var(--sr-r1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sr-comanda__deshacer:hover { color: var(--sr-texto); }
.sr-comanda__deshacer:focus-visible { outline: none; box-shadow: var(--sr-foco); }

/* --- El pie de la pantalla ----------------------------------------------- */
.sr-pie {
  margin: var(--sr-e6) 0 0;
  font-size: var(--sr-t-menor);
  text-align: center;
  color: var(--sr-tenue);
}
.sr-pie[data-tono="mal"] { color: var(--sr-mal); }

/* --- Pantallas grandes --------------------------------------------------- */
/* Un televisor de cocina: caben más columnas y conviene subir el tipo, que se
   mira desde bastante más lejos que un monitor de escritorio. */
@media (min-width: 1400px) {
  .sr-comandas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .sr-comanda__prod { font-size: var(--sr-t-titulo); }
  .sr-comanda__cant { font-size: var(--sr-t-titulo); }
  .sr-comanda__mesa { font-size: 1.25rem; }
}

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width: 560px) {
  /* Una comanda por renglón: partirlas en dos columnas de 160 px las vuelve
     ilegibles justo en el aparato con el que un encargado echa un vistazo. */
  .sr-comandas { grid-template-columns: 1fr; gap: var(--sr-e3); }
  .sr-areas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sr-e2); }
  .sr-area { padding: var(--sr-e2) var(--sr-e3); }
  .sr-area__cifra { font-size: 1.375rem; }
  .sr-area__hechas { display: none; }
}

/* Quien prefiere menos movimiento no necesita transiciones para entender una
   pantalla que ya se explica con el color. */
@media (prefers-reduced-motion: reduce) {
  .sr-area, .sr-comanda, .sr-comanda__accion { transition: none; }
}


/* ===========================================================================
   ACCESO, SESIÓN Y USUARIOS
   ---------------------------------------------------------------------------
   La puerta y el panel de quién entra. Misma paleta, mismos tokens; lo único
   distinto es que aquí no hay datos que mirar de lejos, sino formularios que
   se leen de cerca, así que el tipo vuelve a su tamaño normal.
   =========================================================================== */

/* --- La portada de acceso ------------------------------------------------ */
/* Centrada y estrecha. Sin barra superior: no hay a dónde ir desde aquí, y
   una barra con iconos que no llevan a ningún sitio solo invita a tocarlos. */
.sr-portada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sr-e6) var(--sr-e4);
}
.sr-portada__caja {
  width: min(420px, 100%);
  padding: var(--sr-e6);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  box-shadow: var(--sr-sombra);
}
.sr-portada__marca {
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
  margin-bottom: var(--sr-e6);
  padding-bottom: var(--sr-e4);
  border-bottom: var(--sr-borde-fino);
}
.sr-portada__titulo {
  margin: 0;
  font-size: var(--sr-t-titulo);
  font-weight: 650;
  letter-spacing: var(--sr-track-titulo);
  color: var(--sr-texto);
}
.sr-portada__sub {
  margin: 2px 0 0;
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  color: var(--sr-tenue);
}
.sr-portada__ayuda {
  margin: 0 0 var(--sr-e4);
  font-size: var(--sr-t-menor);
  line-height: 1.6;
  color: var(--sr-tenue);
}
.sr-portada__ayuda strong { color: var(--sr-texto); }
/* Un aviso dentro de la portada: algo esta mal en ESTA instalacion y hay que
   leerlo antes de tocar el formulario de abajo, no despues. */
.sr-portada__ayuda--mal {
  padding: var(--sr-e3);
  border: 1px solid var(--sr-borde);
  border-left: 3px solid var(--sr-mal);
  border-radius: var(--sr-r2);
  background: var(--sr-superficie);
}
.sr-portada__ayuda--mal strong { color: var(--sr-mal); }
/* La salida de abajo: una alternativa, no la accion principal. */
.sr-portada__ayuda--pie {
  margin: var(--sr-e4) 0 0;
  text-align: center;
  font-size: var(--sr-t-micro);
}
.sr-portada__form { display: block; }
/* El botón de enviar, a todo el ancho: en un teléfono es el único objetivo
   grande de la pantalla y no tiene con quién competir. */
.sr-portada__enviar { width: 100%; margin-top: var(--sr-e5); justify-content: center; }
.sr-portada__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-e2);
  margin-top: var(--sr-e4);
}
.sr-portada__opciones .sr-boton { flex: 1 1 auto; justify-content: center; }

/* El error va reservado aunque esté vacío: si apareciera de la nada, el botón
   daría un salto justo cuando el dedo va hacia él. */
.sr-portada__error {
  min-height: 1.2em;
  margin: var(--sr-e3) 0 0;
  font-size: var(--sr-t-menor);
  line-height: 1.5;
  color: var(--sr-mal);
}
.sr-portada__error:empty { min-height: 0; }

.sr-portada__aviso {
  margin: 0 0 var(--sr-e4);
  padding: var(--sr-e3);
  font-size: var(--sr-t-menor);
  line-height: 1.5;
  color: var(--sr-mal);
  background: var(--sr-mal-velo);
  border-left: 3px solid var(--sr-mal);
  border-radius: 0 var(--sr-r2) var(--sr-r2) 0;
}

/* --- Quién está dentro, en la barra superior ----------------------------- */
.sr-yo { position: relative; }
.sr-yo__disparo {
  display: grid;
  place-items: center;
  width: var(--sr-toque);
  height: var(--sr-toque);
  list-style: none;
  cursor: pointer;
  border-radius: var(--sr-r2);
}
.sr-yo__disparo::-webkit-details-marker { display: none; }
.sr-yo__disparo:hover { background: var(--sr-elevada); }
.sr-yo[open] .sr-yo__disparo { background: var(--sr-elevada); }
/* La inicial, en el naranja de la casa con texto oscuro encima: 5.97:1. */
.sr-yo__inicial {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--sr-primario);
  color: var(--sr-primario-on);
  border-radius: var(--sr-r2);
  font-size: var(--sr-t-menor);
  font-weight: 700;
  text-transform: uppercase;
}
.sr-yo__panel {
  position: absolute;
  top: calc(100% + var(--sr-e1));
  right: 0;
  z-index: 40;
  min-width: 230px;
  padding: var(--sr-e3);
  background: var(--sr-elevada);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
  box-shadow: var(--sr-sombra);
}
.sr-yo__nombre {
  margin: 0;
  font-size: var(--sr-t-cuerpo);
  font-weight: 650;
  color: var(--sr-texto);
}
.sr-yo__resumen {
  margin: 2px 0 var(--sr-e3);
  padding-bottom: var(--sr-e3);
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
  border-bottom: 1px solid var(--sr-linea);
}
.sr-yo__item {
  display: block;
  width: 100%;
  padding: var(--sr-e2) var(--sr-e2);
  font: inherit;
  font-size: var(--sr-t-menor);
  text-align: left;
  text-decoration: none;
  color: var(--sr-texto);
  background: none;
  border: none;
  border-radius: var(--sr-r2);
  cursor: pointer;
}
.sr-yo__item:hover { background: var(--sr-superficie); color: var(--sr-primario-alt); }
.sr-yo__item--salir { color: var(--sr-mal); }

/* --- El panel de usuarios ------------------------------------------------ */
.sr-usuarios__barra {
  display: flex;
  align-items: center;
  gap: var(--sr-e3);
  flex-wrap: wrap;
  margin-bottom: var(--sr-e4);
}
.sr-usuarios { display: grid; gap: var(--sr-e2); }

/* Un usuario por renglón, con sus permisos a la vista: la pregunta que se
   hace mirando esta lista es "¿a qué tiene acceso este?", y contestarla no
   puede exigir abrir nada. */
.sr-usuario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--sr-e3);
  padding: var(--sr-e3) var(--sr-e4);
  background: var(--sr-superficie);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
}
.sr-usuario[data-activo="no"] { opacity: .55; }
.sr-usuario__quien { min-width: 0; }
.sr-usuario__clave {
  font-family: var(--sr-mono);
  font-size: var(--sr-t-cuerpo);
  font-weight: 650;
  color: var(--sr-cifra);
}
.sr-usuario__yo,
.sr-usuario__inactivo {
  display: inline-block;
  margin-left: var(--sr-e2);
  padding: 1px var(--sr-e2);
  font-size: var(--sr-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
  border-radius: var(--sr-r1);
}
.sr-usuario__yo { background: var(--sr-primario-velo); color: var(--sr-primario); }
.sr-usuario__inactivo { background: var(--sr-mal-velo); color: var(--sr-mal); }
.sr-usuario__nombre {
  display: block;
  margin-top: 2px;
  font-size: var(--sr-t-micro);
  color: var(--sr-tenue);
}
.sr-usuario__permisos { display: flex; flex-wrap: wrap; gap: var(--sr-e1); min-width: 0; }
.sr-usuario__acciones { display: flex; gap: var(--sr-e1); flex-wrap: wrap; justify-content: flex-end; }

/* Las etiquetas de permiso. Sucursal en gris, proyecto en color: son dos ejes
   distintos y mezclarlos en un mismo tono obliga a leerlos uno a uno. */
.sr-marca-suc,
.sr-marca-proyecto {
  padding: 2px var(--sr-e2);
  font-size: var(--sr-t-micro);
  border-radius: var(--sr-r1);
  white-space: nowrap;
}
.sr-marca-suc {
  color: var(--sr-texto);
  background: var(--sr-elevada);
  border: 1px solid var(--sr-borde);
}
.sr-marca-suc[data-todas="si"] { color: var(--sr-primario); border-color: var(--sr-primario); }
.sr-marca-proyecto {
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: var(--sr-track-micro);
}
.sr-marca-proyecto[data-p="ventas"] { color: var(--sr-bien); background: var(--sr-bien-velo); }
.sr-marca-proyecto[data-p="produccion"] { color: var(--sr-primario); background: var(--sr-primario-velo); }

.sr-boton--peligro { color: var(--sr-mal); border-color: var(--sr-borde); }
.sr-boton--peligro:hover { border-color: var(--sr-mal); background: var(--sr-mal-velo); }

/* --- Casillas y grupos del formulario ------------------------------------ */
.sr-casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--sr-e2);
  padding: var(--sr-e2) 0;
  font-size: var(--sr-t-menor);
  color: var(--sr-texto);
  cursor: pointer;
}
.sr-casilla input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--sr-primario);
  cursor: pointer;
}
.sr-casilla .sr-pista { margin-top: 2px; }
.sr-casilla em { color: var(--sr-tenue); font-style: normal; }

.sr-grupo {
  margin: var(--sr-e5) 0 0;
  padding: var(--sr-e3) var(--sr-e4);
  border: var(--sr-borde-fino);
  border-radius: var(--sr-r3);
}
.sr-grupo legend { padding: 0 var(--sr-e2); margin: 0; }
.sr-grupo[hidden] { display: none; }

/* --- Llevar los usuarios a otra sucursal --------------------------------- */
.sr-traslado { padding-top: var(--sr-e3); }
.sr-traslado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sr-e2);
  margin: var(--sr-e4) 0;
}
/* El <label> que dispara el selector de archivo tiene que verse y comportarse
   como el botón de al lado; si no, parece que solo se puede exportar. */
.sr-traslado__acciones label.sr-boton { cursor: pointer; }

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* El renglón de usuario se apila: a 360 px las tres columnas dejan los
     nombres cortados a la mitad. */
  .sr-usuario { grid-template-columns: 1fr; gap: var(--sr-e2); }
  .sr-usuario__acciones { justify-content: flex-start; }
  .sr-portada__caja { padding: var(--sr-e4); }
}


/* --- El tablero todavía abierto ------------------------------------------ */
/* Aparece mientras no haya usuarios dados de alta. No es un error, así que no
   va en rojo de alarma: va en el naranja de la casa, que aquí significa
   "atiende esto". Lleva su propia acción porque un aviso que solo señala un
   problema, sin el botón que lo arregla, obliga a ir a buscarlo. */
.sr-abierto {
  display: flex;
  align-items: center;
  gap: var(--sr-e4);
  flex-wrap: wrap;
  max-width: var(--sr-ancho);
  margin: var(--sr-e4) auto 0;
  padding: var(--sr-e3) var(--sr-e4);
  background: var(--sr-primario-velo);
  border: 1px solid var(--sr-primario);
  border-radius: var(--sr-r3);
}
/* --------------------- El interruptor del aviso sonoro -------------------
   Un icono y no un texto: la barra de la jornada ya va justa de ancho en una
   tablet, y un altavoz tachado se entiende sin leer —que es la regla de toda
   esta pantalla—. */
.sr-sonido {
  flex: none;
  padding: var(--sr-e2) var(--sr-e3);
  line-height: 0;
}
.sr-sonido svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Los dos iconos viven en el HTML y aqui se ensenia uno. Cambiarlos desde
   JavaScript obligaria a mantener el dibujo en dos sitios. */
.sr-sonido[data-suena="si"] .sr-sonido__off,
.sr-sonido[data-suena="no"] .sr-sonido__on { display: none; }

.sr-sonido[data-suena="si"] { color: var(--sr-primario-alt); }
/* Apagado se pinta apagado: en una barra de botones encendidos, un icono a
   media luz se lee como "esto esta desactivado" sin mirarlo. */
.sr-sonido[data-suena="no"] { color: var(--sr-tenue); }

/* ------------------------- El aviso tras marcar -------------------------
   Flota abajo, encima de las comandas, y se va solo a los cinco segundos.
   No tapa el centro de la pantalla a proposito: lo que importa sigue siendo
   la rejilla, y esto es una confirmacion, no una pregunta. */
.sr-brindis {
  position: fixed;
  left: 50%;
  bottom: var(--sr-e5);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sr-e4);
  max-width: calc(100vw - var(--sr-e5) * 2);
  padding: var(--sr-e3) var(--sr-e4);
  background: var(--sr-elevada);
  border: 1px solid var(--sr-borde);
  border-radius: var(--sr-r3);
  box-shadow: var(--sr-sombra);
}
/* Sin esto el aviso se queda puesto para siempre: el `display: flex` de
   arriba gana por especificidad al `display: none` de [hidden]. Es la tercera
   vez que este CSS tropieza con lo mismo, asi que la regla va junto a la
   clase y no al final del archivo. */
.sr-brindis[hidden] { display: none; }

.sr-brindis__texto {
  font-size: var(--sr-t-menor);
  color: var(--sr-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-brindis__accion {
  flex: none;
  padding: var(--sr-e2) var(--sr-e3);
  font: inherit;
  font-size: var(--sr-t-menor);
  font-weight: 600;
  color: var(--sr-primario-alt);
  background: none;
  border: 1px solid var(--sr-borde);
  border-radius: var(--sr-r2);
  cursor: pointer;
}
.sr-brindis__accion:hover { border-color: var(--sr-primario); }

/* LA MISMA TRAMPA que con el contador de la campana, y aqui costo mas cara:
   el `display: flex` de arriba gana por especificidad al `display: none` que
   el navegador aplica a [hidden], asi que el cartel se veia SIEMPRE.
   Consecuencias que hubo que cazar por separado:
     - "Solo lectura" salia en Produccion aunque el servidor dejara marcar;
     - "Este tablero esta abierto" no se podia descartar, porque el boton de
       cerrar solo pone el atributo. */
.sr-abierto[hidden] { display: none; }

.sr-abierto__texto {
  flex: 1 1 260px;
  font-size: var(--sr-t-menor);
  line-height: 1.6;
  color: var(--sr-texto);
}
.sr-abierto__texto strong { color: var(--sr-primario); }
.sr-abierto .sr-boton { flex: none; }
.sr-abierto__cerrar {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--sr-tenue);
  background: none;
  border: none;
  border-radius: var(--sr-r2);
  cursor: pointer;
}
.sr-abierto__cerrar:hover { color: var(--sr-texto); background: var(--sr-elevada); }

/* El icono de la puerta, cuando todavía no hay usuarios: en el naranja de la
   casa para que se distinga de los otros tres iconos de la barra, que son
   neutros. Es el único que pide que lo toquen. */
.sr-icono--llamada { color: var(--sr-primario); }
.sr-icono--llamada:hover { color: var(--sr-primario-alt); }

@media (max-width: 560px) {
  .sr-abierto { margin-inline: var(--sr-e3); padding: var(--sr-e3); }
  .sr-abierto .sr-boton { width: 100%; justify-content: center; }
}

/* --- El usuario de servicio ---------------------------------------------- */
/* Se distingue del resto con la franja naranja de "atiende esto": no es un
   usuario más, es una puerta que viene abierta de fábrica y conviene que
   quien administra la vea cada vez que entra al panel. */
.sr-usuario--servicio {
  border-color: var(--sr-primario);
  background: var(--sr-primario-velo);
}
.sr-usuario--servicio .sr-usuario__yo {
  background: var(--sr-primario);
  color: var(--sr-primario-on);
}
/* La contraseña de hoy, en mono para poder leerla y teclearla sin dudar entre
   un 0 y una O. */
.sr-clave-hoy {
  padding: var(--sr-e1) var(--sr-e3);
  font-family: var(--sr-mono);
  font-size: var(--sr-t-cuerpo);
  font-weight: 650;
  letter-spacing: .08em;
  color: var(--sr-primario);
  background: var(--sr-hundida);
  border: 1px solid var(--sr-primario);
  border-radius: var(--sr-r2);
  user-select: all;   /* un clic la selecciona entera para copiarla */
}
.sr-pista--aviso {
  margin-top: var(--sr-e2);
  padding: var(--sr-e3);
  background: var(--sr-superficie);
  border-left: 3px solid var(--sr-primario);
  border-radius: 0 var(--sr-r2) var(--sr-r2) 0;
  color: var(--sr-texto);
}
.sr-pista--aviso strong { color: var(--sr-primario); }
.sr-pista--aviso code {
  font-family: var(--sr-mono);
  font-size: var(--sr-t-micro);
  color: var(--sr-primario-alt);
}