/* Portal Bermad — hoja de estilos única.
 *
 * Sobria y sin dependencias externas (D-40): ni CDN, ni tipografías remotas, ni marco de
 * trabajo. Dos motivos. El VPS puede quedarse sin salida a internet y el portal tiene que
 * verse igual, y la política de contenido del portal es `default-src 'none'`: cualquier
 * cosa que viniera de fuera quedaría bloqueada por el propio navegador. Los iconos van
 * embebidos como `data:` SVG (permitido por `img-src 'self' data:`), no como archivos.
 *
 * La tipografía es la del sistema operativo de quien mira: ya está cargada y es la que la
 * persona lee todo el día. El color se define en OKLCH; los neutros llevan un matiz frío
 * hacia el azul de la marca para que la pantalla no se sienta gris de oficina.
 */

:root {
  color-scheme: light;

  /* ── Neutros (matizados hacia el azul de marca) ── */
  --papel: oklch(0.994 0.002 255);
  --papel-2: oklch(0.976 0.004 255);
  --fondo: oklch(0.967 0.006 255);
  --tinta: oklch(0.255 0.021 260);
  --tinta-suave: oklch(0.505 0.024 260);
  --tinta-tenue: oklch(0.62 0.02 260);
  --borde: oklch(0.905 0.008 258);
  --borde-fuerte: oklch(0.84 0.012 258);

  /* ── Acento ── */
  --acento: oklch(0.515 0.13 253);
  --acento-oscuro: oklch(0.415 0.115 254);
  --acento-2: oklch(0.52 0.13 288);
  --acento-tenue: oklch(0.955 0.03 253);
  --acento-borde: oklch(0.86 0.055 253);
  /* Solo para el mosaico de marca del login; las tablas y botones van en color sólido. */
  --grad-marca: linear-gradient(140deg, var(--acento), var(--acento-2));

  /* ── Semánticos ── */
  --exito: oklch(0.53 0.12 152);
  --exito-fondo: oklch(0.965 0.032 152);
  --exito-borde: oklch(0.86 0.06 152);
  --aviso: oklch(0.56 0.10 74);
  --aviso-fondo: oklch(0.966 0.045 82);
  --aviso-borde: oklch(0.86 0.07 78);
  --alerta: oklch(0.535 0.163 26);
  --alerta-fondo: oklch(0.963 0.032 26);
  --alerta-borde: oklch(0.86 0.07 26);

  /* ── Elevación (sombra fría, muy suave) ── */
  --sombra-1: 0 1px 2px oklch(0.4 0.04 260 / 0.06), 0 1px 1px oklch(0.4 0.04 260 / 0.04);
  --sombra-2: 0 4px 12px oklch(0.4 0.04 260 / 0.08), 0 1px 3px oklch(0.4 0.04 260 / 0.06);
  --sombra-3: 0 12px 28px oklch(0.35 0.04 260 / 0.14), 0 3px 8px oklch(0.35 0.04 260 / 0.08);

  --radio: 10px;
  --radio-s: 7px;
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(1200px 480px at 100% -10%, var(--acento-tenue), transparent 60%),
    var(--fondo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

::selection { background: var(--acento-tenue); }

/* ── Barra superior ──────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

/* Marca de agua: Bermad es control de flujo. Una gota, discreta, en un cuadro de acento. */
.marca::before {
  content: "";
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2C12 3.2 5.6 10.4 5.6 15a6.4 6.4 0 0 0 12.8 0C18.4 10.4 12 3.2 12 3.2Z' fill='white'/%3E%3C/svg%3E")
      center / 74% no-repeat,
    var(--acento);
  box-shadow: var(--sombra-1), inset 0 1px 0 oklch(1 0 0 / 0.25);
}

.barra__sesion {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.barra__sesion a { color: var(--acento); }

/* ── Navegación ──────────────────────────────────────────────────────────── */

.menu {
  display: flex;
  gap: 0.15rem;
  padding: 0 1.5rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}

.menu a {
  position: relative;
  padding: 0.8rem 0.95rem;
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--salida);
}

.menu a:hover { color: var(--tinta); }

.menu a[aria-current="page"] {
  color: var(--acento);
  border-bottom-color: var(--acento);
  font-weight: 650;
}

/* ── Contenido ───────────────────────────────────────────────────────────── */

.contenido {
  max-width: 1180px;
  margin: 1.75rem auto;
  padding: 0 1.5rem;
}

/* Las dos pantallas de tabla ancha —reporte y aprobaciones— tienen doce columnas y no
 * caben en 1180px. Ahí el contenido ocupa el ancho de la ventana y la tabla se compacta. */
.pagina-ancha .contenido,
.pagina-ancha .pie {
  max-width: none;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 680;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}

h2 {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.6rem;
}

a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--acento-oscuro); }

code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 0.05em 0.35em;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: var(--sombra-1);
}

/* La tarjeta de acceso: centrada, elevada, generosa. */
.tarjeta--angosta {
  max-width: 25.5rem;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.9rem;
  border-radius: 16px;
  box-shadow: var(--sombra-3);
}

/* ── Pantallas de acceso (login) ─────────────────────────────────────────── */
/* Fondo con textura de color (malla de gradientes) y todo centrado. La barra y el
 * pie se ocultan: el login es una pantalla en sí, no una página del portal. */
body.auth {
  background:
    radial-gradient(820px 520px at 12% -5%, oklch(0.72 0.16 300 / 0.30), transparent 60%),
    radial-gradient(900px 620px at 105% 108%, oklch(0.63 0.18 264 / 0.34), transparent 55%),
    radial-gradient(640px 460px at 50% 45%, oklch(0.78 0.11 210 / 0.16), transparent 62%),
    var(--fondo);
}

.auth .barra,
.auth .pie { display: none; }

.auth .contenido {
  max-width: none;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.auth-caja { width: 100%; max-width: 25.5rem; }

.marca-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.marca-login__logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 17px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2C12 3.2 5.6 10.4 5.6 15a6.4 6.4 0 0 0 12.8 0C18.4 10.4 12 3.2 12 3.2Z' fill='white'/%3E%3Cpath d='M9.4 14.2a2.6 2.6 0 0 0 2.6 3.2' fill='none' stroke='%236a53d6' stroke-width='1.1' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E")
      center / 60% no-repeat,
    var(--grad-marca);
  box-shadow: 0 10px 26px oklch(0.56 0.17 264 / 0.42), inset 0 1px 0 oklch(1 0 0 / 0.35);
}

.marca-login__nombre {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.marca-login__sub {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.tarjeta--angosta h1 { font-size: 1.4rem; margin-bottom: 0.4rem; }

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

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--tinta);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  transition: border-color 0.15s var(--salida), box-shadow 0.15s var(--salida);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover { border-color: var(--tinta-tenue); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}

/* Los <select> nativos se ven de sistema operativo. Se les quita la apariencia por
 * defecto y se dibuja una flecha propia (data: SVG) para que combinen con los campos. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}

/* El foco visible no es decoración: es la única señal de dónde está parado quien
 * navega con el teclado. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

.campo { margin-bottom: 1.15rem; }

.ayuda { color: var(--tinta-suave); font-size: 0.85rem; margin-top: 0.35rem; }

.ayuda--separada { margin-top: 1.1rem; }

/* Los atributos `style=` en el HTML están descartados: la política de contenido del
 * portal es `style-src 'self'` y el navegador los bloquearía. Toda separación va aquí. */
.en-linea { display: inline; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: background 0.15s var(--salida), transform 0.08s var(--salida),
    box-shadow 0.15s var(--salida);
}

.boton:hover { background: var(--acento-oscuro); box-shadow: var(--sombra-2); }
.boton:active { transform: translateY(1px); box-shadow: var(--sombra-1); }
.boton:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.boton--secundario {
  background: var(--papel);
  color: var(--acento);
  border-color: var(--borde-fuerte);
  box-shadow: none;
}

.boton--secundario:hover {
  background: var(--acento-tenue);
  color: var(--acento-oscuro);
  border-color: var(--acento-borde);
  box-shadow: none;
}

.boton--pequeno { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* Acción que puede duplicar información en el ERP (liberar cargos): rojo de alerta. */
.boton--peligro {
  background: var(--alerta);
  border-color: var(--alerta);
  color: #fff;
}
.boton--peligro:hover { filter: brightness(0.92); }

/* Bloque de liberar cargos, bajo la tabla de transacciones del detalle del corte. */
.liberar-aviso { margin-top: 1rem; display: grid; gap: 0.75rem; justify-items: start; }
.liberar-aviso p { margin: 0; }
.liberar-confirmar { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

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

/* Sin franja lateral: borde completo, fondo teñido y un icono al frente que dice el tono
 * de un vistazo. El icono va como `data:` SVG en el fondo de un pseudo-elemento. */
.aviso {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem 1rem 3rem;
  margin-bottom: 1.15rem;
  background: var(--papel);
  box-shadow: var(--sombra-1);
}

.aviso::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1.25rem;
  height: 1.25rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
}

.aviso h1, .aviso h2 { margin-top: 0; }
.aviso :last-child { margin-bottom: 0; }

.aviso--error { border-color: var(--alerta-borde); background: var(--alerta-fondo); }
.aviso--error h1, .aviso--error h2 { color: var(--alerta); }
.aviso--error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0341f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

.aviso--atencion { border-color: var(--aviso-borde); background: var(--aviso-fondo); }
.aviso--atencion h2 { color: var(--aviso); }
.aviso--atencion::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

.aviso--exito { border-color: var(--exito-borde); background: var(--exito-fondo); }
.aviso--exito h2 { color: var(--exito); }
.aviso--exito::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d7a44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

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

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-1);
}

.tabla th,
.tabla td {
  padding: 0.62rem 0.8rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: top;
}

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--papel-2);
  font-size: 0.72rem;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--borde-fuerte);
}

.tabla tbody tr:last-child td { border-bottom: none; }

.tabla tbody tr { transition: background 0.12s var(--salida); }
.tabla tbody tr:hover { background: var(--acento-tenue); }

/* Encabezados de fila (lista_negra usa <th> en el cuerpo). */
.tabla tbody th {
  background: var(--papel-2);
  font-size: 0.82rem;
  color: var(--tinta-suave);
  white-space: nowrap;
  width: 12rem;
}

/* Los importes se leen comparando columnas: alineados a la derecha y con cifras de
 * ancho fijo, para que las unidades queden una debajo de otra. */
.importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Específicos para ganarle a `.tabla td { text-align:left }` (misma familia de bug que
 * tenían las columnas de conteo). */
.tabla th.importe,
.tabla td.importe { text-align: right; }

/* Doce columnas en una pantalla: la densidad es el precio de ver la fila completa. */
.tabla--compacta th,
.tabla--compacta td {
  padding: 0.45rem 0.55rem;
  font-size: 0.86rem;
}

.tabla--compacta thead th { font-size: 0.66rem; }

.tabla--compacta .ayuda {
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.tabla--compacta .cuenta {
  font-size: 0.74rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tabla--compacta .acciones {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tabla--compacta .acciones .boton { margin-right: 0; }

.negativo { color: var(--alerta); font-variant-numeric: tabular-nums; }

/* Columnas de conteo (no dinero): centradas bajo su encabezado. */
.tabla th.num-centro,
.tabla td.num-centro { text-align: center; font-variant-numeric: tabular-nums; }

.vacio { color: var(--tinta-tenue); font-style: italic; }

/* ── Etiquetas de estado ─────────────────────────────────────────────────── */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 640;
  line-height: 1.4;
  border: 1px solid var(--borde-fuerte);
  background: var(--papel-2);
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* El punto de color hace legible el estado sin depender solo del texto. */
.etiqueta::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.etiqueta--incluida { border-color: var(--exito-borde); background: var(--exito-fondo); color: var(--exito); }
.etiqueta--retenida { border-color: var(--aviso-borde); background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta--rechazada { border-color: var(--alerta-borde); background: var(--alerta-fondo); color: var(--alerta); }

/* ── Inicio: hero + accesos ──────────────────────────────────────────────── */

.inicio-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.6rem;
  border-radius: 16px;
  border: 1px solid var(--borde);
  background:
    radial-gradient(680px 220px at 100% -20%, var(--acento-tenue), transparent 70%),
    var(--papel);
  box-shadow: var(--sombra-1);
}

.inicio-hero h1 { margin: 0; font-size: 1.5rem; }
.inicio-hero__sub { margin: 0.25rem 0 0; color: var(--tinta-suave); }

.inicio-hero__marca {
  width: 3.1rem;
  height: 3.1rem;
  flex: none;
  border-radius: 15px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2C12 3.2 5.6 10.4 5.6 15a6.4 6.4 0 0 0 12.8 0C18.4 10.4 12 3.2 12 3.2Z' fill='white'/%3E%3C/svg%3E")
      center / 58% no-repeat,
    var(--grad-marca);
  box-shadow: var(--sombra-2), inset 0 1px 0 oklch(1 0 0 / 0.3);
}

.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.accesos__tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform 0.18s var(--salida), box-shadow 0.18s var(--salida),
    border-color 0.18s var(--salida);
}

.accesos__icono {
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  border-radius: 12px;
  background-color: var(--acento-tenue);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4rem;
}
.accesos__icono--aprobaciones {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
.accesos__icono--reporte {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M9 9v11'/%3E%3C/svg%3E");
}
.accesos__icono--lista_negra {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 7.7-7 9-4-1.3-7-4.4-7-9V6z'/%3E%3Cpath d='m9.5 12 1.8 1.8L15 10'/%3E%3C/svg%3E");
}
.accesos__icono--historial {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.accesos__icono--configuracion {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 3.6 15a1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 3.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 8 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 16 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 20.4 9v0a1.65 1.65 0 0 0 1.51 1H22a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E");
  background-size: 1.5rem;
}
.accesos__icono--usuarios {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.accesos__icono--catalogos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.accesos__icono--correos {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.accesos__icono--auditoria {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h2a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h2V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='m8.5 13 2 2 4-4'/%3E%3C/svg%3E");
}

/* Píldora compacta para listar permisos otorgados sin llenar la fila de casillas. */
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin: 0.1rem 0.15rem 0.1rem 0;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--acento-tenue);
  color: var(--acento-oscuro);
  border: 1px solid var(--acento-borde);
  white-space: nowrap;
}

.accesos__cuerpo { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.accesos__titulo { font-weight: 660; font-size: 1.06rem; }
.accesos__desc { color: var(--tinta-suave); font-size: 0.86rem; line-height: 1.42; }

.accesos__flecha {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.3rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5bb0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity: 0.45;
  transition: transform 0.18s var(--salida), opacity 0.18s var(--salida);
}

.accesos__tarjeta:hover {
  transform: translateY(-2px);
  border-color: var(--acento-borde);
  box-shadow: var(--sombra-2);
}
.accesos__tarjeta:hover .accesos__flecha { opacity: 1; transform: translateX(3px); }

/* ── Barra de herramientas (encabezado de listado) ───────────────────────── */

.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--tinta-suave);
}

/* Cuando la barra lleva más de un botón (p. ej. Sincronizar + Agregar). */
.barra-herramientas__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.barra-herramientas__acciones form { margin: 0; }

/* Formulario del botón "Ejecutar corte": fechas opcionales + botón, en una fila. */
.corte-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.corte-form input[type="date"] { width: auto; }
.corte-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}
.corte-form .dropdown { min-width: 13rem; }

/* Buscador y filtros del catálogo de tarjetahabientes. Los campos comparten estilo con el
 * resto del portal; aquí solo se les quita el ancho 100% para que convivan en una fila. */
.filtros-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
}
.filtros-catalogo input[type="search"],
.filtros-catalogo select { width: auto; }
.filtros-catalogo input[type="search"] { flex: 1 1 20rem; min-width: 14rem; }
.filtros-catalogo select { flex: 0 1 14rem; }
.filtros-catalogo .dropdown { flex: 0 1 15rem; min-width: 13rem; }
.filtros-catalogo .boton { flex: 0 0 auto; }

/* ── Dropdown con diseño propio (mejora progresiva del <select>) ──────────────
 * El <select> real queda dentro, oculto, y sigue enviando su valor en el form.
 * Sin JS no se crea el widget y se ve el <select> nativo. */
.dropdown { position: relative; display: block; }
.dropdown select { display: none; }
.dropdown__boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--salida), box-shadow 0.15s var(--salida);
}
.dropdown__boton:hover { border-color: var(--tinta-tenue); }
.dropdown__boton:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.dropdown[data-open="true"] .dropdown__boton {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.dropdown__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__flecha {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.18s var(--salida);
}
.dropdown[data-open="true"] .dropdown__flecha { transform: rotate(180deg); }
.dropdown__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m, 0.6rem);
  box-shadow: var(--sombra-2);
  max-height: 16rem;
  overflow-y: auto;
}
.dropdown__opcion {
  padding: 0.5rem 0.6rem;
  border-radius: var(--radio-s);
  color: var(--tinta);
  cursor: pointer;
}
.dropdown__opcion:hover,
.dropdown__opcion.is-activo { background: var(--acento-tenue); }
.dropdown__opcion[aria-selected="true"] { font-weight: 600; color: var(--acento-oscuro); }

/* ── Selector de fecha con calendario propio (mejora de <input type="date">) ──────── */
.datepicker { position: relative; display: inline-block; }
.datepicker__boton {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 9.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s var(--salida), box-shadow 0.15s var(--salida);
}
.datepicker__boton:hover { border-color: var(--tinta-tenue); }
.datepicker__boton:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.datepicker[data-open="true"] .datepicker__boton {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue);
}
.datepicker__valor--vacio { color: var(--tinta-tenue); }
.datepicker__icono {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
.datepicker__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.3rem);
  left: 0;
  width: 17rem;
  padding: 0.6rem;
  background: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m, 0.6rem);
  box-shadow: var(--sombra-2);
}
.datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.datepicker__mes { font-weight: 600; color: var(--tinta); }
.datepicker__flecha {
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: var(--radio-s);
  background: transparent;
  color: var(--tinta);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.datepicker__flecha:hover { background: var(--acento-tenue); }
.datepicker__semana,
.datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker__semana { margin-bottom: 0.2rem; }
.datepicker__semana span {
  text-align: center;
  font-size: 0.72rem;
  color: var(--tinta-suave);
  padding: 0.2rem 0;
}
.datepicker__dia {
  border: none;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  padding: 0.4rem 0;
  border-radius: var(--radio-s);
  cursor: pointer;
}
.datepicker__dia:hover { background: var(--acento-tenue); }
.datepicker__dia.is-sel { background: var(--acento); color: var(--papel); font-weight: 600; }
.datepicker__pie { margin-top: 0.5rem; text-align: right; }

/* ── Aprobaciones ────────────────────────────────────────────────────────── */

/* Un bloque = una unidad de decisión: el acumulado de un día, o un cargo suelto. Se
 * separa del anterior con un espacio grueso; sin él, tres bloques se leen como una lista. */
.bloque + .bloque > tr:first-child > td { border-top: 6px solid var(--fondo); }

/* El encabezado del acumulado del día: el título de un grupo que abarca las 12 columnas. */
.bloque__encabezado > td {
  background: var(--aviso-fondo);
  border-bottom: 1px solid var(--aviso-borde);
  font-size: 0.9rem;
  color: var(--tinta);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.bloque__encabezado > td strong { font-weight: 680; }
.bloque__encabezado:hover > td { background: var(--aviso-fondo); }

/* 🔴 CLARIDAD DEL ACUMULADO. Las comidas del mismo día son UN bloque, pero sueltas se
 * leían como filas independientes. Ahora el grupo entero (encabezado + sus cargos)
 * comparte un tinte y va encerrado en una caja: se ve de un vistazo a cuál pertenece
 * cada cargo. Una transacción suelta (sin encabezado) queda en blanco y así se distingue. */
.bloque[data-diario] > tr > td { background: oklch(0.988 0.015 84); }
.bloque[data-diario] > tr:hover > td { background: oklch(0.975 0.022 84); }
.bloque[data-diario] .bloque__encabezado > td { background: var(--aviso-fondo); }
.bloque[data-diario] .bloque__encabezado:hover > td { background: var(--aviso-fondo); }
.bloque[data-diario] > tr > td:first-child { border-left: 1px solid var(--aviso-borde); }
.bloque[data-diario] > tr > td:last-child { border-right: 1px solid var(--aviso-borde); }
.bloque[data-diario] > tr:last-child > td { border-bottom: 1px solid var(--aviso-borde); }

.col-marca { width: 1.9rem; }

/* Visible para el lector de pantalla, no para el ojo. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La cuenta de 7 segmentos se lee como un código: monoespaciada. */
.cuenta {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}

.acciones { white-space: nowrap; }
.acciones .boton { margin-right: 0.25rem; }

/* El motivo se escribe antes de decidir y aplica a todo lo seleccionado: va arriba y fijo. */
.encabezado-decision {
  position: sticky;
  top: 3.6rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.15rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}

.encabezado-decision .campo { flex: 1 1 24rem; margin-bottom: 0; }
.encabezado-decision .ayuda { flex: 1 1 20rem; margin-top: 0; }

/* Los botones flotan al pie: la acción a un clic desde cualquier punto de la lista. */
.pie-decision {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  margin-top: 1.15rem;
  background: oklch(0.994 0.002 255 / 0.9);
  backdrop-filter: saturate(1.4) blur(8px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}

/* `hidden` gana sobre el `display` que fijan estas reglas: sin esto, el atributo no
 * ocultaría nada porque `.modal{display:grid}` y `.pie-decision{display:flex}` mandan. */
.pie-decision[hidden],
.modal[hidden] { display: none !important; }

.pie-decision__cuenta {
  margin-right: auto;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Cuadro de decisión (aprobar / rechazar) ─────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: oklch(0.22 0.02 260 / 0.45);
  animation: modal-fondo 0.15s var(--salida);
}

.modal__caja {
  width: 100%;
  max-width: 30rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  box-shadow: var(--sombra-3);
  padding: 1.5rem;
  animation: modal-entra 0.18s var(--salida);
}

.modal__titulo { margin: 0 0 0.4rem; font-size: 1.2rem; }
.modal textarea { min-height: 4.5rem; resize: vertical; margin-top: 0.1rem; }
.modal__acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

@keyframes modal-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.paginacion {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.paginacion a { font-weight: 600; }

/* ── Reporte ─────────────────────────────────────────────────────────────── */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.15rem 1.3rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 1.15rem;
  box-shadow: var(--sombra-1);
}

.filtros .campo { flex: 1 1 12rem; margin-bottom: 0; }

.campo--acciones { align-self: end; flex: 0 0 auto; display: flex; gap: 0.5rem; }
.campo--acciones .boton { margin-right: 0; }

.desglose {
  margin-bottom: 1.15rem;
  padding: 0.75rem 1.1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}

.desglose summary {
  cursor: pointer;
  font-weight: 620;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.desglose summary::-webkit-details-marker { display: none; }
.desglose summary::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  transition: transform 0.18s var(--salida);
}
.desglose[open] summary::before { transform: rotate(90deg); }
.desglose[open] summary { margin-bottom: 0.5rem; }
.desglose .tabla { margin-top: 0.5rem; }

/* Red de seguridad para pantallas angostas: la tabla se desplaza dentro de su caja. */
.tabla-ancha {
  overflow-x: auto;
  border-radius: var(--radio);
  -webkit-overflow-scrolling: touch;
}

/* ── Franja de totales (pantalla de reporte) ─────────────────────────────── */

.totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra-1);
}

.totales__dato {
  padding: 0.9rem 1.1rem;
  background: var(--papel);
}

.totales__etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  margin-bottom: 0.25rem;
}

.totales__valor {
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.totales__valor.negativo { color: var(--alerta); }

/* ── Formularios (programación, usuarios) ────────────────────────────────── */

.tarjeta--form { max-width: 44rem; }
.tarjeta--form > h2:first-child { margin-top: 0; }

/* Encabezado con acción a la derecha (p. ej. "Dar de alta"). */
.barra-herramientas h1 { margin: 0; }

.acciones-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.campo--angosto { max-width: 12rem; }

.grupo-campos {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 0.9rem 1rem 0.5rem;
  margin: 0 0 1.15rem;
}
.grupo-campos legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; }

/* Etiquetas con casilla: en línea y de peso normal (el `label` del portal es bloque y
 * negrita, que aquí sobraría). */
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  margin: 0 1.25rem 0.5rem 0;
  cursor: pointer;
}
.check input { width: auto; }

.permisos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.3rem 0.5rem;
}

.usuario-card { margin-bottom: 1rem; }
.usuario-card__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.usuario-card__id { display: flex; align-items: center; gap: 0.6rem; }

/* ── Archivos del historial ──────────────────────────────────────────────── */

.archivo-card {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--papel);
  box-shadow: var(--sombra-1);
  padding: 1rem 1.15rem;
  margin-bottom: 0.9rem;
}
.archivo-card__cab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.archivo-card__cab .boton { margin-left: auto; }

.preview-archivo {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  background: var(--papel-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  overflow-x: auto;
  white-space: pre;
  margin: 0.5rem 0 0;
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
  max-width: 1180px;
  margin: 2.5rem auto 1.75rem;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid var(--borde);
  color: var(--tinta-tenue);
  font-size: 0.82rem;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .barra { padding: 0.75rem 1rem; }
  .marca { font-size: 0.92rem; }
  .menu { padding: 0 1rem; }
  .contenido { margin: 1.25rem auto; padding: 0 1rem; }
  h1 { font-size: 1.35rem; }
  .encabezado-decision { top: 0; }
  .tarjeta--angosta { margin: 1.75rem auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}