/* ═══════════════════════════════════════════════════════════════════
   CORE SLS — hoja de estilo única.
   Sin marcos ni dependencias externas: la operación corre en tablets de
   planta con red intermitente, y cada archivo que haya que descargar de
   internet es una pantalla que puede quedarse en blanco.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── El color de la empresa ─────────────────────────────────────
       #EE6C4D es la marca, y sobre papel blanco da 3,05:1. Eso alcanza
       para una superficie o un gráfico, pero NO para texto: WCAG pide
       4,5:1 y aquí no es un trámite —estas pantallas se leen en tablets
       viejas, con el brillo bajo, a veces a pleno sol en el muelle. Un
       rótulo de 3:1 ahí no se lee, y quien no lo lee se lo inventa.

       Así que el color es uno y los trabajos son dos:

         --marca         el coral tal cual, allí donde es SUPERFICIE:
                         el botón primario (con la tinta encima, 5,77:1),
                         la barra de progreso, el aro de foco, el borde
                         de lo elegido, el primer sector del anillo.
         --marca-fuerte  el mismo tono a 12°, más oscuro. Para cuando el
                         color tiene que ser TEXTO y no hay relleno donde
                         apoyarse: enlaces, rótulos sobre --marca-suave,
                         el módulo activo del riel. 5,85:1 sobre papel.
         --marca-suave   el tinte de fondo. --marca-fuerte encima da
                         4,98:1.
         --marca-borde   el filo de esos fondos tenues.

       Ninguna de estas cifras está a ojo: salen de paleta.js, en el
       cuaderno de trabajo. Si se toca un valor, se vuelve a correr. */
    --marca: #ee6c4d;
    --marca-fuerte: #b33c24;
    --marca-suave: #fbe9e2;
    --marca-borde: #f8c5b9;

    --verde: #12805c;
    /* Aclarado desde #e6f5ef: el verde encima daba 4,37:1 y no llegaba
       al 4,5 que pide WCAG. Ahora 4,57:1. */
    --verde-suave: #eef9f5;
    --ambar: #b45309;
    --rojo: #c2334d;
    --tinta: #16191f;
    --gris: #6b7280;
    /* Oscurecido desde #9aa1ab, que daba 2,61:1 —ni siquiera el mínimo
       de 3:1 para texto de apoyo. Ahora 3,14:1. */
    --gris-claro: #8a929e;
    --linea: #e8eaee;
    --fondo: #f6f7f9;
    --papel: #ffffff;
    --radio: 12px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
    --riel: 68px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--marca-fuerte); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── El doble toque no acerca ──────────────────────────────────────
   Contando bultos se pulsa «+25» muchas veces seguidas, y el navegador
   entendía dos toques rápidos como «acercar»: la pantalla daba un salto
   y había que alejarla a mano con el camión delante. Lo mismo al quitar
   auxiliares o al girar el reloj.

   `touch-action: manipulation` quita SOLO el doble toque. El pellizco
   para acercar sigue funcionando, y eso importa: es como se lee una
   placa en una tablet vieja con el brillo bajo. Por eso no se toca el
   `<meta viewport>` con `user-scalable=no`, que quitaría las dos cosas
   —lo molesto y lo necesario— y que además iOS ignora desde hace años.

   Va sobre los elementos y no sobre `body` porque `touch-action` NO se
   hereda: puesto ahí solo valdría para los toques que caen en el hueco
   entre las tarjetas.

   Las reglas de clase que piden `pan-y` —la rueda del reloj, la pista
   de turnos— ganan por especificidad y siguen mandando en lo suyo. */
button, a, label, summary,
input[type="checkbox"], input[type="radio"], input[type="time"], input[type="date"],
[role="button"], [onclick], .clicable, tr.clicable, .fila-bloque, .fila-elegir, .opcion-dialogo {
    touch-action: manipulation;
}

/* ── Estructura ──────────────────────────────────────────────────── */

.riel {
    position: fixed; inset: 0 auto 0 0; width: var(--riel);
    background: var(--papel); border-right: 1px solid var(--linea);
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; z-index: 40;
}
.riel img { width: 30px; height: 30px; object-fit: contain; margin-bottom: 10px; }
/* `.riel a` se define abajo, junto al comportamiento de apertura. */
.riel a:hover { background: var(--fondo); color: var(--tinta); }
.riel a.activo { background: var(--marca-suave); color: var(--marca-fuerte); }
.riel .abajo { margin-top: auto; }

.marco { margin-left: var(--riel); min-height: 100vh; display: flex; flex-direction: column; }

.barra {
    background: var(--papel); border-bottom: 1px solid var(--linea);
    padding: 14px 26px; display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 30;
}
.barra h1 { font-size: 19px; }
.barra .sub { color: var(--gris); font-size: 13px; margin-top: 1px; }
.barra .yo { margin-left: auto; display: flex; align-items: center; gap: 11px; text-align: right; }
.barra .yo b { display: block; font-size: 13.5px; font-weight: 600; }
.barra .yo span { color: var(--gris); font-size: 12px; }
.iniciales {
    width: 36px; height: 36px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-fuerte);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none;
}

.hoja { padding: 22px 26px 90px; max-width: 1240px; width: 100%; }

/* ── Piezas ──────────────────────────────────────────────────────── */

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; box-shadow: var(--sombra); }
.rejilla { display: grid; gap: 14px; }
.r4 { grid-template-columns: repeat(4, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r21 { grid-template-columns: 1.35fr 1fr; }

.cifra .rotulo { color: var(--gris); font-size: 13px; }
.cifra .valor { font-size: 34px; font-weight: 700; letter-spacing: -.03em; margin: 6px 0 2px; }
.cifra .valor small { font-size: 14px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.cifra .pie { color: var(--gris); font-size: 12.5px; margin-top: 10px; }

.barrita { height: 5px; border-radius: 99px; background: var(--linea); overflow: hidden; margin-top: 12px; }
.barrita i { display: block; height: 100%; background: var(--marca); border-radius: 99px; transition: width .4s; }
.barrita.verde i { background: var(--verde); }
.barrita.ambar i { background: var(--ambar); }

.titulillo { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }

.fila-accion {
    display: flex; align-items: center; gap: 14px; padding: 15px 17px; background: var(--papel);
    border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 10px;
    cursor: pointer; transition: border-color .15s, transform .1s; width: 100%; text-align: left;
}
.fila-accion:hover { border-color: var(--marca-borde); }
.fila-accion:active { transform: scale(.995); }
.fila-accion .num { width: 30px; height: 30px; border-radius: 9px; background: var(--marca-suave); color: var(--marca-fuerte); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.fila-accion .txt { flex: 1; min-width: 0; }
.fila-accion .txt b { display: block; font-weight: 600; }
.fila-accion .txt span { color: var(--gris); font-size: 13px; }
.fila-accion .flecha { color: var(--gris-claro); }

.pendiente { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.pendiente:last-child { border-bottom: 0; }
.pendiente .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); margin-top: 7px; flex: none; }
.pendiente b { font-weight: 600; display: block; }
.pendiente span { color: var(--gris); font-size: 13px; }

/* ── Formularios ─────────────────────────────────────────────────── */

label { display: block; font-size: 13px; color: var(--gris); margin-bottom: 6px; font-weight: 500; }
.campo { margin-bottom: 15px; }
input, select, textarea {
    width: 100%; padding: 11px 13px; border: 1px solid #dfe3e8; border-radius: 9px;
    background: var(--papel); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(238, 108, 77, .22); }
input[readonly] { background: var(--fondo); color: var(--gris); }

/* El botón primario lleva el color de la empresa TAL CUAL, no una
   versión oscurecida: es el elemento más visible de la pantalla y es
   donde la marca tiene que estar. Lo que se adapta es el rótulo.

   Con blanco encima, #EE6C4D da 3,05:1 y no pasa. Con la tinta da
   5,77:1. Se probó también un marrón cálido, que se veía mejor, pero
   medido daba 4,23:1 —por debajo del mínimo— así que se descartó. */
.boton {
    background: var(--marca); color: var(--tinta); border: 0; border-radius: 9px; padding: 12px 22px;
    font-weight: 600; cursor: pointer;
    /* `inline-flex` y no `inline-block`: es lo que centra el icono con su
       rótulo sin recurrir a `vertical-align`, que deja el SVG bailando
       un píxel según la fuente que cargue el sistema. */
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: opacity .15s, transform .1s, background .15s, border-color .15s;
}
.boton:hover { opacity: .92; }
.boton:active { transform: scale(.985); }
/* Un botón inhabilitado no responde al puntero: sin esto conserva el
   `scale` del `:active` y parece que sí hizo algo. */
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.boton.verde { background: var(--verde); color: #fff; }
.boton.tenue { background: var(--papel); color: var(--tinta); border: 1px solid #dfe3e8; }
.boton.tenue:hover { opacity: 1; border-color: var(--marca-borde); background: var(--marca-suave); }
.boton.chico { padding: 8px 14px; font-size: 13.5px; }
/* El icono dentro de un botón acompaña al texto: sigue su tamaño y su
   color, y no se encoge cuando el rótulo es largo. */
.boton .icono { display: grid; place-items: center; flex: none; font-size: 15px; }
.boton.chico .icono { font-size: 14px; }

.pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pestana {
    padding: 8px 15px; border-radius: 9px; border: 1px solid var(--linea); background: var(--papel);
    cursor: pointer; font-size: 14px; color: var(--gris);
}
.pestana.activa { background: var(--marca-suave); border-color: var(--marca-borde); color: var(--marca-fuerte); font-weight: 600; }

/* ── Tablas ──────────────────────────────────────────────────────── */

.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gris); font-weight: 600; padding: 0 12px 10px; white-space: nowrap;
}
td { padding: 13px 12px; border-top: 1px solid var(--linea); }
tbody tr.clicable { cursor: pointer; }
tbody tr.clicable:hover { background: #fafbfc; }

/* Un enlace DENTRO de una tabla no se pinta del color de la marca.
   La columna de nombres son todos enlaces: en azul pasaban por texto
   de navegación, pero en coral una columna entera de acento compite
   con los datos y tira de la mirada hacia donde no hay nada que leer.
   Aquí el nombre es el nombre —con el contraste de 17,6:1 del texto
   normal— y solo se enciende cuando el puntero o el teclado llegan.
   El subrayado en ese momento es lo que dice que se puede tocar. */
td a { color: inherit; font-weight: 500; }
td a:hover, td a:focus-visible { color: var(--marca-fuerte); text-decoration: underline; }

.marca { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.marca.verde { background: var(--verde-suave); color: var(--verde); }
.marca.acento { background: var(--marca-suave); color: var(--marca-fuerte); }
.marca.ambar { background: #fef3e2; color: var(--ambar); }
.marca.gris { background: var(--fondo); color: var(--gris); }

/* ── Panel lateral ───────────────────────────────────────────────── */

.velo { position: fixed; inset: 0; background: rgba(16, 24, 40, .28); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.panel {
    position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); background: var(--papel); z-index: 60;
    transform: translateX(100%); transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(16, 24, 40, .1);
}
.panel.abierto { transform: none; }
.panel header { padding: 18px 20px; border-bottom: 1px solid var(--linea); display: flex; align-items: flex-start; gap: 12px; }
.panel header h2 { font-size: 19px; }
/* `overscroll-behavior: contain` corta el encadenado: al llegar al final
   de la lista del panel, seguir arrastrando ya no empieza a mover la
   página de detrás. */
.panel .cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.panel .pie { padding: 16px 20px; border-top: 1px solid var(--linea); }

/* ── Con un panel abierto, lo de detrás no se mueve ────────────────
   El pie del panel no se desplaza —no tiene por qué— así que arrastrar
   ahí se iba al primer ancestro que sí, que es la página entera. La
   lista de vehículos se movía por detrás y parecía que el panel había
   bajado sin bajar: el dedo hacía algo y no era lo que se veía.

   Se bloquea la página mientras haya un panel o una hoja delante. La
   clase la pone quien los abre, no el CSS: hay dos capas —panel y
   hoja— y cerrar una no significa que se pueda soltar. */
body.con-panel { overflow: hidden; }
.cerrar { margin-left: auto; background: none; border: 0; font-size: 21px; color: var(--gris-claro); cursor: pointer; line-height: 1; }

/* ── Rejilla de turnos ───────────────────────────────────────────── */

.semana { min-width: 760px; }
.semana th.dia { text-align: center; width: 62px; }
.semana th.dia b { display: block; font-size: 14px; color: var(--tinta); text-transform: none; letter-spacing: 0; }
.semana td.dia { text-align: center; padding: 6px; }
.casilla {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel);
    cursor: pointer; color: var(--gris-claro); font-size: 14px; display: inline-grid; place-items: center;
}
.casilla.si { background: var(--verde-suave); border-color: #bce3d3; color: var(--verde); font-weight: 700; }
.casilla:disabled { cursor: not-allowed; opacity: .55; }
.etiqueta-rol { display: inline-block; width: 34px; font-size: 11px; font-weight: 700; color: var(--gris-claro); }

/* ── Avisos ──────────────────────────────────────────────────────── */

.aviso { padding: 12px 15px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.aviso.error { background: #fdeef1; color: var(--rojo); }
.aviso.bien { background: var(--verde-suave); color: var(--verde); }
.aviso.info { background: var(--marca-suave); color: var(--marca-fuerte); }
/* Atención: hace falta hacer algo antes de poder seguir. Mismo par de
   colores que .marca.ambar, para que el sistema siga siendo uno. */
.aviso.atencion { background: #fef3e2; color: var(--ambar); }

.vacio { text-align: center; padding: 40px 20px; color: var(--gris); }
.cargando { text-align: center; padding: 40px; color: var(--gris-claro); }

/* ── Móvil ───────────────────────────────────────────────────────── */
/* El riel pasa a barra inferior: en una tablet de planta el pulgar llega
   abajo, no al borde izquierdo. */


/* ── Valor del servicio ──────────────────────────────────────────────
   La cifra en pesos de lo que vale un cargue. Aparece en el registro
   —antes de dar al botón— y en el panel del monitor, así que vive aquí
   y no en una de las dos pantallas: dos copias del mismo recuadro
   terminan siendo dos recuadros distintos. */
.valor-servicio {
    background: var(--marca-suave); border: 1px solid var(--marca-borde); border-radius: var(--radio);
    padding: 14px 16px; margin-bottom: 16px;
}
.valor-servicio .rotulo {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--marca-fuerte);
}
.valor-servicio .cifra {
    font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--tinta);
    margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.valor-servicio .detalle { font-size: 12.5px; color: var(--gris); }
.valor-servicio.apagado { background: var(--fondo); border-color: var(--linea); }
.valor-servicio.apagado .rotulo { color: var(--gris); }
.valor-servicio.apagado .cifra { color: var(--gris-claro); font-size: 22px; }

/* ── Tarjeta emergente ───────────────────────────────────────────────
   Para lo que hay que resolver ANTES de seguir. A diferencia del panel
   lateral, esta se planta en el centro y no se cierra tocando fuera:
   si se pudiera esquivar sin decidir, no sería una decisión. */
.velo-tarjeta {
    /* Por encima del panel lateral (60): la tarjeta se abre DESDE el panel
       y si compartieran capa, el panel quedaría sin atenuar al lado de una
       tarjeta que exige una decisión. */
    position: fixed; inset: 0; background: rgba(16, 25, 31, .45); z-index: 70;
    display: none; align-items: center; justify-content: center; padding: 18px;
}
.velo-tarjeta.abierto { display: flex; }
.tarjeta-emergente {
    background: var(--papel); border-radius: 16px; box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
    width: min(480px, 100%); max-height: 90vh; overflow-y: auto; padding: 22px 24px 20px;
}
.tarjeta-emergente h2 { font-size: 19px; margin: 0 0 4px; letter-spacing: -.02em; }
.tarjeta-emergente .lede { color: var(--gris); font-size: 13.5px; margin-bottom: 18px; }
.opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.opciones button {
    padding: 8px 13px; border-radius: 9px; border: 1px solid var(--linea);
    background: var(--papel); cursor: pointer; font-size: 13.5px; color: var(--tinta);
}
.opciones button.activa { background: var(--marca-suave); border-color: var(--marca-borde); color: var(--marca-fuerte); font-weight: 600; }

@media (max-width: 860px) {
    .riel {
        inset: auto 0 0 0; width: 100%; height: 62px; flex-direction: row; justify-content: space-around;
        border-right: 0; border-top: 1px solid var(--linea); padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    .riel img, .riel .abajo { display: none; }
    .marco { margin-left: 0; padding-bottom: 62px; }
    .barra { padding: 12px 16px; }
    .barra h1 { font-size: 17px; }
    .barra .yo b, .barra .yo span { display: none; }
    .hoja { padding: 16px 14px 30px; }
    .r4, .r3, .r2, .r21 { grid-template-columns: 1fr; }
    .r4.compacta { grid-template-columns: 1fr 1fr; }
    .cifra .valor { font-size: 28px; }
    .panel { width: 100%; }
    .tarjeta-emergente { padding: 18px 16px 16px; }
    .valor-servicio .cifra { font-size: 26px; }
}

/* ── Diálogos en la página ────────────────────────────────────────
   Reemplazan a prompt() y confirm() del navegador. No es cosmética:
   los del navegador bloquean el hilo, no se pueden estilar, en una
   tablet salen minúsculos pegados al borde superior, y obligaban a
   pedir cosas absurdas — «escriba 1, 2 o 3» para elegir la clase de
   un punto, o «1,3» separados por coma para elegir auxiliares. */

.velo-dialogo {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(16, 24, 40, .34);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.velo-dialogo.abierto { display: flex; }

.dialogo {
    background: var(--papel); border-radius: 14px;
    box-shadow: 0 14px 44px rgba(16, 24, 40, .22);
    width: min(470px, 100%); max-height: calc(100vh - 40px);
    display: flex; flex-direction: column;
}
.dialogo > header { padding: 20px 22px 0; }
.dialogo h2 { font-size: 19px; margin: 0 0 5px; letter-spacing: -.02em; }
.dialogo .lede { color: var(--gris); font-size: 13.5px; line-height: 1.5; }
.dialogo .cuerpo { padding: 18px 22px 2px; overflow-y: auto; }
.dialogo .cuerpo .campo:last-child { margin-bottom: 6px; }
.dialogo .pie { padding: 8px 22px 20px; display: flex; gap: 10px; }
.dialogo .pie .boton { flex: 1; }
.dialogo .boton.peligro { background: var(--rojo); }

/* Opciones: botones anchos que se tocan con el dedo, no un <select>
   diminuto ni una lista numerada que hay que teclear. */
/* El buscador de un diálogo con lista larga. Va encima de las
   opciones y fuera de lo que se repinta al elegir, para no perder
   el foco a media palabra. */
.buscador-dialogo { margin-bottom: 10px; }
.opciones-dialogo { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.opcion-dialogo {
    display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%;
    padding: 11px 13px; border: 1px solid var(--linea); border-radius: 10px;
    background: var(--papel); cursor: pointer; font: inherit; color: inherit;
    transition: border-color .12s, background .12s;
}
.opcion-dialogo:hover:not(:disabled) { border-color: var(--gris-claro); }
.opcion-dialogo:disabled { opacity: .45; cursor: not-allowed; }
.opcion-dialogo.elegida { border-color: var(--marca); background: var(--marca-suave); }
.opcion-dialogo .caja {
    flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 5px;
    border: 1.5px solid #cfd5de; display: grid; place-items: center;
    font-size: 12px; color: transparent; line-height: 1;
}
.opcion-dialogo.elegida .caja { background: var(--marca-fuerte); border-color: var(--marca-fuerte); color: #fff; }
.opcion-dialogo .txt { flex: 1; min-width: 0; }
.opcion-dialogo .txt b { display: block; font-weight: 550; font-size: 14.5px; }
.opcion-dialogo .txt span { display: block; color: var(--gris); font-size: 12.5px; margin-top: 1px; }
.cuenta-dialogo { font-size: 12.5px; color: var(--gris); margin-top: 9px; }

/* ── Tablas que se vuelven tarjetas en pantalla angosta ───────────
   Una tabla de ocho columnas en un celular solo se puede leer
   arrastrándola de lado, y en la planta eso es una mano ocupada que
   no se tiene. Con `data-r` en cada celda, la misma tabla se lee como
   fichas sin duplicar el HTML ni ramificar el JavaScript. */
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
    /* El diálogo se pega abajo, donde alcanza el pulgar, y ocupa el
       ancho completo. Deja libre el riel de navegación de 62 px. */
    .velo-dialogo { align-items: flex-end; padding: 0; }
    .dialogo {
        width: 100%; border-radius: 16px 16px 0 0;
        max-height: calc(100vh - 40px);
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    .dialogo .pie { flex-direction: column-reverse; }
    .opciones-dialogo { max-height: 40vh; }

    /* Tabla → tarjetas. Cada fila es una ficha y cada celda una línea
       con su rótulo, tomado del atributo `data-r`. */
    table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; }
    table.responsiva thead { display: none; }
    table.responsiva tr {
        border: 1px solid var(--linea); border-radius: 12px;
        background: var(--papel); padding: 13px 15px; margin-bottom: 10px;
    }
    table.responsiva tr:last-child { margin-bottom: 0; }
    table.responsiva td {
        border: 0; padding: 5px 0;
        display: flex; gap: 12px; align-items: baseline;
        font-size: 14px;
    }
    table.responsiva td::before {
        content: attr(data-r);
        flex: 0 0 92px; color: var(--gris);
        font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
        line-height: 1.7;
    }
    /* La celda «principal» encabeza la ficha: sin rótulo y a lo ancho. */
    table.responsiva td.principal {
        padding: 0 0 8px; font-size: 17px;
        justify-content: space-between; align-items: center;
    }
    table.responsiva td.principal::before { display: none; }
    /* La fila vacía («no hay servicios») no debe parecer una ficha.
       Se marca con una clase y no con :has(), que las tablets viejas
       de la planta pueden no entender. */
    table.responsiva tr.sin-datos { border: 0; background: none; padding: 0; }
    table.responsiva td.vacio { display: block; text-align: center; }
    table.responsiva td.vacio::before { display: none; }

    /* Las celdas numéricas dejan de ir alineadas a la derecha: en una
       ficha de una columna, ese alineado las separa de su rótulo. */
    table.responsiva td[style*="text-align:right"] { text-align: left; }
}

/* ── Riel: el nombre aparece al pasar el ratón ────────────────────
   El riel se ENSANCHA POR ENCIMA del contenido, no empujándolo. Es
   deliberado: `.marco` mantiene su margen de 68 px, así que nada se
   recoloca al pasar el puntero. Un riel que empuja obliga al navegador
   a rehacer la disposición de la página entera en cada entrada y salida
   del ratón, y en una tablet vieja eso se ve como un tirón.

   El nombre está siempre en el marcado; solo se revela. Así no hay que
   crear ni destruir nodos al pasar por encima. */

.riel { transition: width .16s ease; overflow: hidden; }
.riel:hover, .riel:focus-within {
    width: 196px;
    align-items: flex-start;
    padding-left: 13px; padding-right: 13px;
    box-shadow: 10px 0 26px rgba(16, 24, 40, .07);
}

/* Sin `gap`, y ese es el detalle que estaba descentrando los iconos.
   El nombre vive SIEMPRE en el marcado —encogido a max-width 0— para no
   crear ni destruir nodos al pasar el ratón. Pero un elemento de 0 px
   sigue siendo un elemento de la caja flexible, así que el `gap: 12px`
   se aplicaba igual: el contenido medía 20 + 12 + 0 = 32 px, se
   centraba en los 42 del cuadro, y el icono quedaba 6 px a la izquierda
   —la mitad del hueco— dentro de un cuadro que sí estaba centrado.
   Se veía en el riel cerrado y, sobre todo, en la barra inferior de las
   tablets, donde el nombre no se despliega nunca.

   La separación pasa a ser un margen DEL NOMBRE, que es de quien es:
   aparece cuando él aparece y no ocupa nada cuando no está. */
.riel a {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; gap: 0;
    color: var(--gris-claro); font-size: 19px;
    white-space: nowrap; overflow: hidden;
    transition: background .15s, color .15s, width .16s ease, padding .16s ease;
}
/* ── Iconos ───────────────────────────────────────────────────────
   Los SVG van pelados dentro de app.js; el relleno, el trazo y las
   puntas redondeadas se ponen aquí, una vez para los doce. Es lo que
   les da su aire, así que no se pueden perder al adelgazarlos.

   `currentColor` es lo que hace que el icono no necesite ni una regla
   de color propia: hereda la del enlace, y así el riel lo pasa de gris
   a coral con la misma transición que ya tenía el texto. */
.icono svg {
    width: 1em; height: 1em; display: block;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.riel a .icono {
    flex: 0 0 20px; line-height: 1; font-size: 20px;
    display: grid; place-items: center;
}
/* El trazo de 2 sobre 24 se ve pesado a 20 px. A 1,75 el icono respira
   y sigue leyéndose en una tablet con el brillo bajo. */
.riel a .icono svg { stroke-width: 1.75; }
.riel a.activo .icono svg { stroke-width: 2; }
/* `margin-left` y no `gap`: se anima en cualquier navegador, incluidos
   los de las tablets viejas, donde animar `gap` es reciente y podría
   dar un salto en vez de un deslizamiento. */
.riel a .rotulo {
    font-size: 14px; font-weight: 500; letter-spacing: -.01em;
    max-width: 0; opacity: 0; margin-left: 0;
    transition: max-width .16s ease, opacity .12s ease, margin-left .16s ease;
}
.riel:hover a, .riel:focus-within a {
    width: 170px; justify-content: flex-start; padding: 0 11px;
}
.riel:hover a .rotulo, .riel:focus-within a .rotulo { max-width: 124px; opacity: 1; margin-left: 12px; }

/* El foco de teclado tiene que verse: sin esto, tabular por el riel es
   navegar a ciegas. */
.riel a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .riel, .riel a, .riel a .rotulo { transition: none; }
}

@media (max-width: 860px) {
    /* Abajo el riel es una barra horizontal y no hay ratón que pasar
       por encima: el nombre no se revela y nada se ensancha. */
    .riel:hover, .riel:focus-within {
        width: 100%; align-items: center; padding: 6px 4px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        box-shadow: none;
    }
    .riel a, .riel:hover a, .riel:focus-within a {
        width: 42px; justify-content: center; padding: 0;
    }
    .riel a .rotulo, .riel:hover a .rotulo, .riel:focus-within a .rotulo {
        max-width: 0; opacity: 0;
    }
}