/* ═══════════════════════════════════════════════════════════════════════════
   Uvema · tickets

   La base es la de uvema-connect —plano, bordes de 1 px, Circular, verde UVEMA—
   para que el equipo vea todas sus herramientas con el mismo lenguaje.

   Lo que se añade para una herramienta de urgencias:

     · El color es SOLO para el estado y la urgencia. Nunca decora. Si algo es
       rojo, arde; si es ámbar, espera demasiado. Lo demás es gris.
     · Modo oscuro para las guardias de noche, automático según el equipo.
     · Números tabulares en todo lo que se compara de un vistazo.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'CircularTT';
  src: url('fuentes/CircularTT-Book.ttf') format('truetype');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'CircularTT';
  src: url('fuentes/CircularTT-Bold.ttf') format('truetype');
  font-weight: 600 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #fafaf9;
  --panel: #ffffff;
  --hundido: #f4f4f3;
  --hover: #f4f4f5;
  --borde: #e4e4e7;
  --borde-fuerte: #d4d4d8;

  --texto: #09090b;
  --texto-2: #52525b;
  --texto-3: #71717a;
  --texto-4: #a1a1aa;

  --marca: #16a34a;
  --marca-fuerte: #15803d;
  --marca-suave: #f0fdf4;
  --marca-borde: #bbf7d0;

  /* Estados del ticket. Cada uno: fondo, borde, texto y el punto. */
  --azul: #2563eb;    --azul-fondo: #eff6ff;    --azul-borde: #bfdbfe;    --azul-texto: #1e40af;
  --violeta: #7c3aed; --violeta-fondo: #f5f3ff; --violeta-borde: #ddd6fe; --violeta-texto: #5b21b6;
  --ambar: #d97706;   --ambar-fondo: #fffbeb;   --ambar-borde: #fde68a;   --ambar-texto: #92400e;
  --verde: #16a34a;   --verde-fondo: #f0fdf4;   --verde-borde: #bbf7d0;   --verde-texto: #166534;
  --rojo: #dc2626;    --rojo-fondo: #fef2f2;    --rojo-borde: #fecaca;    --rojo-texto: #991b1b;
  --gris: #71717a;    --gris-fondo: #f4f4f5;    --gris-borde: #e4e4e7;    --gris-texto: #3f3f46;

  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --sombra-2: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --sombra-3: 0 24px 48px -12px rgb(0 0 0 / 0.18);

  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;

  --fuente: 'CircularTT', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --lateral: 232px;
  --lista: 380px;
}

/* ── Modo oscuro ──
   `tema.js` decide antes de pintar nada: lo que elija la veterinaria, o lo que
   tenga puesto el equipo si no ha elegido. Así no hay un parpadeo en blanco al
   abrir la app de noche. */
:root[data-tema='oscuro'] .modal-fondo { background: rgb(0 0 0 / 0.62); }
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --panel: #121214;
  --hundido: #19191c;
  --hover: #1d1d21;
  --borde: #26262b;
  --borde-fuerte: #34343b;
  --texto: #fafafa;
  --texto-2: #b4b4bc;
  --texto-3: #8b8b95;
  --texto-4: #5e5e67;
  --marca: #22c55e;
  --marca-fuerte: #4ade80;
  --marca-suave: rgb(34 197 94 / 0.1);
  --marca-borde: rgb(34 197 94 / 0.28);
  --azul: #60a5fa;    --azul-fondo: rgb(96 165 250 / 0.1);    --azul-borde: rgb(96 165 250 / 0.28);    --azul-texto: #93c5fd;
  --violeta: #a78bfa; --violeta-fondo: rgb(167 139 250 / 0.1); --violeta-borde: rgb(167 139 250 / 0.28); --violeta-texto: #c4b5fd;
  --ambar: #fbbf24;   --ambar-fondo: rgb(251 191 36 / 0.1);    --ambar-borde: rgb(251 191 36 / 0.28);   --ambar-texto: #fcd34d;
  --verde: #4ade80;   --verde-fondo: rgb(74 222 128 / 0.1);    --verde-borde: rgb(74 222 128 / 0.28);   --verde-texto: #86efac;
  --rojo: #f87171;    --rojo-fondo: rgb(248 113 113 / 0.12);   --rojo-borde: rgb(248 113 113 / 0.3);    --rojo-texto: #fca5a5;
  --gris: #8b8b95;    --gris-fondo: #1d1d21;                   --gris-borde: #2e2e34;                   --gris-texto: #d4d4d8;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sombra-2: 0 4px 16px -2px rgb(0 0 0 / 0.5);
  --sombra-3: 0 24px 48px -12px rgb(0 0 0 / 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fuente);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: normal; }
.cifras { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.tenue { color: var(--texto-3); }
.muy-tenue { color: var(--texto-4); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* ═════════ el esqueleto ═════════ */

.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  height: 100vh;
  height: 100dvh;
}

.lateral {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--borde);
  min-height: 0;
}
.marca {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--borde);
  flex: none;
}
.marca .logo {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--marca); color: #fff;
  flex: none;
}
.marca b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.marca small { display: block; font-size: 11px; color: var(--texto-3); line-height: 1.1; }

.nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; }
.nav .titulo-nav {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-3); padding: 14px 10px 6px;
}
.nav .titulo-nav:first-child { padding-top: 2px; }
.nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 10px; border-radius: var(--r-1);
  color: var(--texto-2); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--hover); color: var(--texto); }
.nav a[aria-current='page'] { background: var(--hundido); color: var(--texto); font-weight: 600; }
.nav a[aria-current='page']::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px;
  border-radius: 0 2px 2px 0; background: var(--marca);
}
.nav a svg { color: var(--texto-3); flex: none; }
.nav a[aria-current='page'] svg { color: var(--marca); }
.nav a .cuenta { margin-left: auto; font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.nav a .cuenta.alerta { color: #fff; background: var(--rojo); border-radius: 10px; padding: 0 7px; font-weight: 600; }

.pie-lateral { border-top: 1px solid var(--borde); padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.yo {
  display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--r-2);
  background: var(--hundido); text-align: left; width: 100%;
}
.yo:hover { background: var(--hover); }
.yo .nombre { font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.yo small { display: block; font-size: 11px; color: var(--texto-3); }
.frescura { font-size: 11px; color: var(--texto-3); display: flex; align-items: center; gap: 6px; padding: 0 4px; }
.frescura .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: none; }
.frescura .punto.viejo { background: var(--ambar); }
.frescura .punto.error { background: var(--rojo); }

.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--marca);
}
.avatar.chico { width: 20px; height: 20px; font-size: 9px; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.barra {
  height: 56px; flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--borde);
  background: var(--panel);
}
.barra h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.barra .sub { color: var(--texto-3); font-size: 12.5px; }
.barra .relleno { flex: 1; }

.contenido { flex: 1; min-height: 0; overflow: auto; }

/* ═════════ controles ═════════ */

.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-1);
  font-weight: 500; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.chico { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn.grande { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.primario { background: var(--texto); color: var(--panel); border-color: var(--texto); }
.btn.primario:hover { background: var(--texto-2); border-color: var(--texto-2); }
.btn.verde { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.verde:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); }
.btn.fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn.fantasma:hover { background: var(--hover); color: var(--texto); }
.btn.peligro { color: var(--rojo-texto); }
.btn.icono { width: 32px; padding: 0; }
.btn.icono.chico { width: 28px; }

.segmentado {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-1);
  background: var(--hundido); border: 1px solid var(--borde);
}
.segmentado button {
  height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12.5px; font-weight: 500;
  color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px;
}
.segmentado button[aria-pressed='true'] { background: var(--panel); color: var(--texto); box-shadow: var(--sombra-1); }
.segmentado .n { font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

.buscador {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid var(--borde); border-radius: var(--r-1); background: var(--panel); color: var(--texto-3);
  min-width: 0;
}
.buscador input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--texto); }
.buscador:focus-within { border-color: var(--marca); }

/* ── Píldoras de estado ── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--gris-fondo); color: var(--gris-texto); border: 1px solid var(--gris-borde);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.pill.sin-punto::before { display: none; }
.pill.nuevo    { background: var(--azul-fondo);    color: var(--azul-texto);    border-color: var(--azul-borde); }
.pill.en_curso { background: var(--violeta-fondo); color: var(--violeta-texto); border-color: var(--violeta-borde); }
.pill.devuelta { background: var(--ambar-fondo);   color: var(--ambar-texto);   border-color: var(--ambar-borde); }
.pill.informe  { background: var(--verde-fondo);   color: var(--verde-texto);   border-color: var(--verde-borde); }
.pill.cerrado  { background: var(--gris-fondo);    color: var(--gris-texto);    border-color: var(--gris-borde); }
.pill.rojo     { background: var(--rojo-fondo);    color: var(--rojo-texto);    border-color: var(--rojo-borde); }
.pill.ambar    { background: var(--ambar-fondo);   color: var(--ambar-texto);   border-color: var(--ambar-borde); }
.pill.verde    { background: var(--verde-fondo);   color: var(--verde-texto);   border-color: var(--verde-borde); }
.pill.azul     { background: var(--azul-fondo);    color: var(--azul-texto);    border-color: var(--azul-borde); }

/* La modalidad de la clínica: cuadrada, para no confundirla con un estado. */
.tipo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 32px; padding: 0 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  background: var(--hundido); color: var(--texto-2); border: 1px solid var(--borde);
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px;
  border-radius: 4px; font-size: 11.5px; color: var(--texto-2);
  background: var(--hundido); border: 1px solid var(--borde); white-space: nowrap;
}

/* ═════════ la cola: lista + ticket ═════════ */

.cola { display: grid; grid-template-columns: var(--lista) 1fr; height: 100%; min-height: 0; }

.lista { display: flex; flex-direction: column; border-right: 1px solid var(--borde); background: var(--panel); min-height: 0; }
.lista-cabeza { padding: 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--borde); flex: none; }
.lista-cabeza .fila-controles { display: flex; gap: 8px; align-items: center; }
.lista-cuerpo { overflow-y: auto; flex: 1; }
.lista-seccion {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 14px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-3); background: var(--panel);
  border-bottom: 1px solid var(--borde);
}

.fila-ticket {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 11px 14px 11px 17px; border-bottom: 1px solid var(--borde);
  transition: background 0.1s;
}
.fila-ticket:hover { background: var(--hover); }
.fila-ticket[aria-current='true'] { background: var(--hundido); }
.fila-ticket[aria-current='true']::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--texto);
}
/* La franja de la izquierda: solo si arde. */
.fila-ticket.urgente::before, .fila-ticket.atencion::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0;
}
.fila-ticket.urgente::before { background: var(--rojo); }
.fila-ticket.atencion::before { background: var(--ambar); }
.fila-ticket .l1 { display: flex; align-items: center; gap: 8px; }
.fila-ticket .quien { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.fila-ticket .hace { margin-left: auto; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.fila-ticket .hace.rojo { color: var(--rojo-texto); font-weight: 600; }
.fila-ticket .hace.ambar { color: var(--ambar-texto); font-weight: 600; }
.fila-ticket .l2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--texto-2); font-size: 12.5px; }
.fila-ticket .l2 .donde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fila-ticket .l3 { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.fila-ticket .origen { display: inline-flex; color: var(--texto-3); flex: none; }

.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 8px; padding: 48px 24px; color: var(--texto-3); height: 100%;
}
.vacio svg { color: var(--texto-4); }
.vacio b { color: var(--texto-2); font-size: 14px; }
.vacio p { margin: 0; max-width: 340px; font-size: 13px; }

/* ═════════ el ticket, en grande ═════════ */

.ticket { height: 100%; overflow-y: auto; background: var(--bg); }
.ticket-cabeza {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--borde);
}
.ticket-cabeza .ref { font-size: 12px; color: var(--texto-3); }
.ticket-cabeza .relleno { flex: 1; }
.volver { display: none; }

.ticket-cuerpo { padding: 24px; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.heroe {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-3);
  padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start;
  box-shadow: var(--sombra-1);
}
.heroe .antes { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-3); }
.heroe .numero {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  margin: 4px 0 6px;
}
.heroe .numero.sin { font-size: 20px; color: var(--texto-3); font-weight: 600; }
.heroe .procedencia { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); }
.heroe .donde { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.heroe .donde b { font-weight: 600; }
.heroe .acciones-heroe { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; }

/* El recorrido: el ticket de comida rápida, de izquierda a derecha. */
.recorrido {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-3);
  padding: 16px 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.paso-r { position: relative; padding-top: 22px; min-width: 0; }
.paso-r::before {
  content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--borde);
}
.paso-r:first-child::before { left: 8px; }
.paso-r:last-child::before { right: calc(100% - 8px); }
.paso-r.hecho::before, .paso-r.aqui::before { background: var(--marca); }
.paso-r .bola {
  position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--borde-fuerte);
}
.paso-r.hecho .bola { background: var(--marca); border-color: var(--marca); }
.paso-r.aqui .bola { background: var(--panel); border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.paso-r.ciego .bola { border-style: dashed; }
.paso-r b { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); padding-right: 8px; }
.paso-r.aqui b { color: var(--texto); }
.paso-r.pendiente b, .paso-r.ciego b { color: var(--texto-4); font-weight: 500; }
.paso-r span { display: block; font-size: 11.5px; color: var(--texto-3); padding-right: 8px; }

.dos { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }

.bloque {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-3);
  overflow: hidden;
}
.bloque > header {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
}
.bloque > header h2 { margin: 0; font-size: 13px; font-weight: 600; }
.bloque > header .relleno { flex: 1; }
.bloque > .dentro { padding: 14px 16px; }
.bloque .fila-dato { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.bloque .fila-dato:last-child { border-bottom: 0; }
.bloque .fila-dato dt { color: var(--texto-3); font-size: 12.5px; }
.bloque .fila-dato dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Qué aplica ahora: la respuesta a «qué hago con esta llamada». */
.ahora { }
.ahora .titular { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; }
.ahora .momento { font-size: 12px; color: var(--texto-3); text-transform: capitalize; }
.ahora ol.pasos-ahora { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 8px; }
.ahora ol.pasos-ahora li { counter-increment: p; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.ahora ol.pasos-ahora li::before {
  content: counter(p); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--hundido); color: var(--texto-2); border: 1px solid var(--borde);
}
.ahora .estado-ahora {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-2);
  margin-bottom: 12px; border: 1px solid;
}
.estado-ahora.abierta { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde-texto); }
.estado-ahora.remitir { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.estado-ahora.guardia, .estado-ahora.mixta { background: var(--violeta-fondo); border-color: var(--violeta-borde); color: var(--violeta-texto); }
.estado-ahora.sin-ficha, .estado-ahora.aseguradora, .estado-ahora.desconocida { background: var(--gris-fondo); border-color: var(--gris-borde); color: var(--gris-texto); }

.remision {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r-2); margin-top: 8px;
}
.remision b { display: block; font-weight: 600; font-size: 13px; }
.remision small { color: var(--texto-3); font-size: 12px; }
.remision.hecha { border-color: var(--verde-borde); background: var(--verde-fondo); }

.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border-radius: var(--r-2); font-size: 12.5px; border: 1px solid;
}
.aviso + .aviso { margin-top: 8px; }
.aviso svg { flex: none; margin-top: 1px; }
.aviso.ambar { background: var(--ambar-fondo); border-color: var(--ambar-borde); color: var(--ambar-texto); }
.aviso.azul  { background: var(--azul-fondo);  border-color: var(--azul-borde);  color: var(--azul-texto); }
.aviso.rojo  { background: var(--rojo-fondo);  border-color: var(--rojo-borde);  color: var(--rojo-texto); }
.aviso.verde { background: var(--verde-fondo); border-color: var(--verde-borde); color: var(--verde-texto); }
.aviso.gris  { background: var(--gris-fondo);  border-color: var(--gris-borde);  color: var(--gris-texto); }

/* El procedimiento: la checklist de la modalidad. */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { border-bottom: 1px solid var(--borde); }
.checklist li:last-child { border-bottom: 0; }
.checklist button {
  width: 100%; text-align: left; display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 10px 16px; align-items: start;
}
.checklist button:hover { background: var(--hover); }
.checklist .caja {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--borde-fuerte);
  display: grid; place-items: center; color: transparent; margin-top: 1px;
}
.checklist .hecho .caja { background: var(--marca); border-color: var(--marca); color: #fff; }
.checklist .hecho .txt { color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--texto-4); }
.checklist .quien-paso { display: block; font-size: 11px; color: var(--texto-4); margin-top: 2px; }

.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); padding: 0 12px; overflow-x: auto; }
.pestanas button {
  height: 40px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--texto-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected='true'] { color: var(--texto); border-bottom-color: var(--texto); }
.pestanas .n { font-size: 11px; color: var(--texto-3); background: var(--hundido); border-radius: 8px; padding: 0 6px; }

.dialogo { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 14px 16px; }
.dialogo .t { display: grid; grid-template-columns: 58px 1fr; gap: 10px; font-size: 13px; }
.dialogo .t .q { font-size: 11px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.dialogo .t.cli .q { color: var(--azul-texto); }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--borde); font-size: 12.5px; }
.linea-tiempo li:last-child { border-bottom: 0; }
.linea-tiempo .cu { color: var(--texto-3); }

.nota-nueva { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borde); }
.nota-nueva textarea { flex: 1; min-height: 38px; }

/* ═════════ formularios ═════════ */

.entrada, .campo input, .campo select, .campo textarea, textarea.entrada {
  width: 100%; min-height: 34px; padding: 7px 10px; border-radius: var(--r-1);
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto); outline: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.campo textarea, textarea.entrada { resize: vertical; line-height: 1.45; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave);
}
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.campo .ayuda { font-size: 11.5px; color: var(--texto-3); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--rojo); }
.campo .error-campo { font-size: 11.5px; color: var(--rojo-texto); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--marca); }

/* ═════════ tablero ═════════ */

.tablero { display: grid; grid-template-columns: repeat(5, minmax(240px, 1fr)); gap: 12px; padding: 16px 20px; min-height: 100%; align-items: start; overflow-x: auto; }
.columna { background: var(--hundido); border: 1px solid var(--borde); border-radius: var(--r-3); display: flex; flex-direction: column; min-height: 200px; }
.columna > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.columna > header h2 { margin: 0; font-size: 13px; font-weight: 600; }
.columna > header .n { font-size: 11.5px; color: var(--texto-3); background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.columna > header .punto { width: 8px; height: 8px; border-radius: 50%; }
.columna > header small { display: block; font-size: 11px; color: var(--texto-3); font-weight: 400; }
.columna .tarjetas { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tarjeta {
  position: relative; display: block; width: 100%; text-align: left; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--r-2); padding: 10px 12px; box-shadow: var(--sombra-1);
  transition: box-shadow 0.12s, border-color 0.12s;
}
.tarjeta:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.tarjeta.urgente { border-left: 3px solid var(--rojo); }
.tarjeta.atencion { border-left: 3px solid var(--ambar); }
.tarjeta .t1 { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tarjeta .t1 .hace { margin-left: auto; font-size: 11px; color: var(--texto-3); font-weight: 500; }
.tarjeta .t2 { font-size: 12px; color: var(--texto-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .t3 { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.columna .mas { font-size: 12px; color: var(--texto-3); text-align: center; padding: 8px; }

/* ═════════ clínicas ═════════ */

.pagina { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.resumen-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-3); padding: 14px 16px; }
.cifra b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra span { font-size: 12px; color: var(--texto-3); }
.cifra.ambar b { color: var(--ambar-texto); }
.cifra.verde b { color: var(--verde-texto); }

.tabla-wrap { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r-3); overflow: hidden; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--texto-3);
  padding: 10px 14px; border-bottom: 1px solid var(--borde); background: var(--hundido); white-space: nowrap;
}
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: var(--hover); }
.tabla .nom { font-weight: 600; }
.tabla .nom small { display: block; font-weight: 400; color: var(--texto-3); font-size: 12px; }

.editor { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.editor .columna-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor .columna-lado { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

.tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tipos label {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--borde);
  border-radius: var(--r-2); cursor: pointer; background: var(--panel);
}
.tipos label:hover { border-color: var(--borde-fuerte); }
.tipos input { position: absolute; opacity: 0; pointer-events: none; }
.tipos label:has(input:checked) { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); }
.tipos b { font-size: 13px; }
.tipos small { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }

.semana { display: flex; flex-direction: column; gap: 6px; }
.dia-fila { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; align-items: center; }
.dia-fila .dnom { font-size: 12.5px; font-weight: 500; color: var(--texto-2); text-transform: capitalize; }
.dia-fila .franjas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 32px; }
.dia-fila .cerrado { font-size: 12px; color: var(--texto-4); }
.franja {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px;
  border: 1px solid var(--borde); border-radius: var(--r-1); background: var(--hundido);
}
.franja input { width: 104px; min-height: 26px; padding: 2px 4px; border: 0; background: transparent; text-align: center; font-variant-numeric: tabular-nums; }
.franja input:focus { box-shadow: none; outline: 1px solid var(--marca); border-radius: 3px; }

/* ═════════ el editor de horas ═════════
   Se escribe la hora; no hay selector del navegador. Cada día lleva su barra de
   24 h para ver de un vistazo si algo está mal. */

.horas { display: flex; flex-direction: column; gap: 4px; }
.atajos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.atajos .relleno { flex: 1; }
.chip {
  height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto-2);
  transition: background 0.12s, border-color 0.12s;
}
.chip:hover { background: var(--hover); color: var(--texto); }
.chip.fantasma { border-color: transparent; color: var(--texto-3); }
.chip[aria-checked='true'] { background: var(--texto); color: var(--panel); border-color: var(--texto); }

.dia-h {
  display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--borde); align-items: center;
}
.dia-h:last-of-type { border-bottom: 0; }
.dia-h .barra24 { grid-column: 2; }
.marca-dia { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-transform: capitalize; }
.marca-dia input { width: 15px; height: 15px; accent-color: var(--texto); }
.vacio-dia .marca-dia span { color: var(--texto-3); }
.franjas-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.franja-h {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 2px;
  border: 1px solid var(--borde); border-radius: var(--r-1); background: var(--panel);
}
.franja-h:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
input.hora {
  width: 54px; height: 28px; border: 0; background: transparent; text-align: center; outline: 0;
  font-size: 13.5px; font-weight: 500; color: var(--texto); border-radius: 4px;
}
input.hora:focus { background: var(--hundido); }
input.hora.mal { background: var(--rojo-fondo); color: var(--rojo-texto); }
.campo input.hora { width: 100%; border: 1px solid var(--borde); background: var(--panel); height: 34px; }
.franja-h .guion { color: var(--texto-4); }
.franja-h .cruza { font-size: 10px; font-weight: 700; color: var(--violeta-texto); background: var(--violeta-fondo); border-radius: 4px; padding: 1px 4px; margin-left: 2px; }
.quien-h {
  height: 24px; margin-left: 4px; padding: 0 6px; border-radius: 12px; font-size: 12px;
  border: 1px solid var(--borde); background: var(--hundido); color: var(--texto-2);
}
.quitar-h, .anadir-h {
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--texto-3);
}
.quitar-h:hover { background: var(--rojo-fondo); color: var(--rojo-texto); }
.anadir-h { border: 1px dashed var(--borde-fuerte); width: 30px; height: 30px; }
.anadir-h:hover { border-color: var(--marca); color: var(--marca); }
.cerrado-h { font-size: 12.5px; color: var(--texto-4); }

.barra24 { position: relative; height: 6px; border-radius: 3px; background: var(--hundido); overflow: hidden; }
.barra24 i { position: absolute; top: 0; bottom: 0; background: var(--marca); border-radius: 3px; }
.barra24 span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--borde-fuerte); opacity: 0.6; }
.escala { display: flex; justify-content: space-between; margin-left: 128px; font-size: 10.5px; color: var(--texto-4); }
.ayuda-horas { margin: 8px 0 0; font-size: 12px; color: var(--texto-3); }
.ayuda-horas b { font-weight: 600; color: var(--texto-2); }

/* ═════════ el cuadrante ═════════ */

.subtitulo { font-size: 12px; font-weight: 600; color: var(--texto-2); margin-bottom: 8px; }
.cuadrante { display: flex; flex-direction: column; gap: 10px; }
.cuad-cabeza { display: flex; align-items: center; gap: 8px; }
.cuad-cabeza b { font-size: 14px; text-transform: capitalize; min-width: 150px; text-align: center; }
.pinceles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.chip.p-sin[aria-checked='true'] { background: var(--gris-texto); border-color: var(--gris-texto); }
.chip.p-cubre[aria-checked='true'] { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.chip.p-borrar[aria-checked='true'] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes .cab { font-size: 11px; font-weight: 600; color: var(--texto-3); text-align: center; padding: 2px 0; }
.dia-c {
  min-height: 56px; border: 1px solid var(--borde); border-radius: var(--r-1); background: var(--panel);
  text-align: left; padding: 5px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: border-color 0.1s, background 0.1s;
}
.dia-c:hover { border-color: var(--texto-3); }
.dia-c b { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.dia-c span { font-size: 11px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dia-c.hoy { box-shadow: inset 0 0 0 2px var(--texto); }
.dia-c.pasado { opacity: 0.55; }
.dia-c.c-vet { background: var(--verde-fondo); border-color: var(--verde-borde); }
.dia-c.c-vet span { color: var(--verde-texto); }
.dia-c.c-sin { background: var(--gris-fondo); }
.dia-c.c-sin span { color: var(--gris-texto); }
.dia-c.c-cubre { background: var(--violeta-fondo); border-color: var(--violeta-borde); }
.dia-c.c-cubre span { color: var(--violeta-texto); }
.dia-c.c-otra { background: var(--hundido); }
.dia-c.c-otra span { color: var(--texto-3); font-weight: 500; }

/* ═════════ en el ticket: quién está de guardia ahora ═════════ */

.guardia-ahora { margin-top: 14px; border: 1px solid var(--verde-borde); background: var(--verde-fondo); border-radius: var(--r-2); padding: 10px 12px; }
.guardia-ahora .etq { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-texto); }
.fila-guardia { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 4px; }
.fila-guardia b { display: block; font-size: 15px; font-weight: 700; color: var(--texto); }
.fila-guardia small { font-size: 12px; color: var(--texto-2); }

.lista-editable { display: flex; flex-direction: column; gap: 8px; }
.item-editable.vet2 { grid-template-columns: 1fr 1fr auto; }
.item-editable.pre2 { grid-template-columns: 90px 90px 1fr 1fr auto; }
.item-editable { display: grid; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--borde); border-radius: var(--r-2); background: var(--hundido); }
.item-editable.rem { grid-template-columns: 1.4fr 1fr 1fr auto; }
.item-editable.pre { grid-template-columns: 110px 1fr 1fr auto; }
.item-editable.vet { grid-template-columns: 1fr auto; }

.estado-guardado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ═════════ piezas sueltas ═════════ */

.modal-fondo {
  position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 0.35);
  backdrop-filter: blur(1px);
  display: grid; place-items: center; padding: 16px; animation: aparece 0.15s ease;
}
.modal {
  width: min(460px, 100%); background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--r-3); box-shadow: var(--sombra-3); animation: sube 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal header { padding: 16px 18px 4px; }
.modal header h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal header p { margin: 4px 0 0; color: var(--texto-3); font-size: 13px; }
.modal .dentro { padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.modal footer { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
.opciones-radio { display: flex; flex-direction: column; gap: 6px; }
.opciones-radio label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--borde); border-radius: var(--r-1); cursor: pointer; }
.opciones-radio label:has(input:checked) { border-color: var(--texto); background: var(--hundido); }
.opciones-radio input { accent-color: var(--texto); }

.tostadas { position: fixed; bottom: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.tostada {
  background: var(--texto); color: var(--panel); padding: 10px 14px; border-radius: var(--r-2);
  box-shadow: var(--sombra-2); font-size: 13px; max-width: 380px; animation: sube 0.2s ease;
}
.tostada.mal { background: var(--rojo); color: #fff; }

@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cargando { display: grid; place-items: center; height: 100%; color: var(--texto-3); gap: 10px; }
.girando { animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.tabbar { display: none; }

/* ═════════ móvil ═════════ */

@media (max-width: 1100px) {
  .dos { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; }
  .editor .columna-lado { position: static; }
}

@media (max-width: 860px) {
  :root { --lista: 100%; }
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lateral { display: none; }
  .barra { padding: 0 14px; height: 52px; }
  .cola { grid-template-columns: 1fr; }
  /* En el móvil, lista o ticket: no los dos. */
  .cola.con-ticket .lista { display: none; }
  .cola:not(.con-ticket) .ticket { display: none; }
  .volver { display: inline-flex; }
  .ticket-cabeza { padding: 10px 14px; }
  .ticket-cuerpo { padding: 14px; gap: 12px; }
  .heroe { grid-template-columns: 1fr; padding: 18px; }
  .heroe .numero { font-size: 28px; }
  .heroe .acciones-heroe { flex-direction: row; min-width: 0; }
  .heroe .acciones-heroe .btn { flex: 1; }
  .recorrido { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 14px 12px; }
  .paso-r span { display: none; }
  .paso-r b { font-size: 11px; }
  .bloque .fila-dato { grid-template-columns: 1fr; gap: 2px; }
  .tablero { grid-template-columns: repeat(5, 82vw); padding: 12px; scroll-snap-type: x mandatory; }
  .columna { scroll-snap-align: start; }
  .pagina { padding: 14px; }
  .resumen-cifras { grid-template-columns: repeat(2, 1fr); }
  .rejilla { grid-template-columns: 1fr; }
  .tipos { grid-template-columns: 1fr 1fr; }
  .item-editable.rem, .item-editable.pre, .item-editable.pre2, .item-editable.vet2 { grid-template-columns: 1fr 1fr; }
  .dia-h { grid-template-columns: 1fr; }
  .dia-h .barra24 { grid-column: 1; }
  .escala { margin-left: 0; }
  .dia-c { min-height: 46px; padding: 4px; }
  .dia-c span { font-size: 9.5px; }
  .tabla .ocultar-movil { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--borde);
    background: var(--panel); padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
    font-size: 11px; color: var(--texto-3); text-decoration: none; position: relative;
  }
  .tabbar a[aria-current='page'] { color: var(--texto); font-weight: 600; }
  .tabbar .cuenta { position: absolute; top: 3px; left: calc(50% + 6px); font-size: 10px; background: var(--rojo); color: #fff; border-radius: 8px; padding: 0 5px; font-weight: 600; }
  .tostadas { left: 12px; right: 12px; bottom: 76px; }
}

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

/* El ticket de alguien que ya habló con nosotros poco antes */
.ya-hablo { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--texto-2); }

/* Centros de remisión: cuándo, a dónde */
.remision .rem-cuando { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--texto-3); margin-bottom: 2px; }
.remision .rem-dir { display: block; margin-top: 2px; }
.item-editable .rem-extra { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item-editable .ayuda-rem { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ambar-texto); }
@media (max-width: 700px) { .item-editable .rem-extra { grid-template-columns: 1fr; } }

/* Una página suelta: enlace no válido, entrar con el enlace */
.pagina-sola { max-width: 520px; margin: 12vh auto 0; padding: 0 16px; font-family: inherit; color: var(--texto); }
.pagina-sola h1 { font-size: 22px; margin: 0 0 10px; }
.pagina-sola p { color: var(--texto-2); line-height: 1.55; margin: 0; }

/* Ventanas anchas: el enlace del portal y las invitaciones */
.modal.ancho { width: min(640px, calc(100vw - 32px)); }
.modal footer .relleno { flex: 1; }
.modal textarea[readonly] { font-size: 13px; line-height: 1.5; resize: vertical; }

/* La puerta de portal.uvema.es */
.puerta { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 10vh 16px 40px; gap: 28px; background: var(--bg); }
.puerta-marca { display: flex; align-items: center; gap: 12px; }
.puerta-marca .logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--marca); color: #fff; }
.puerta-marca b { display: block; font-size: 17px; letter-spacing: .02em; }
.puerta-marca small { color: var(--texto-3); font-size: 13px; }
.puerta-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(860px, 100%); }
.puerta-tarjetas.una { grid-template-columns: 1fr; width: min(440px, 100%); }
.puerta-tarjeta { background: var(--panel); box-shadow: var(--sombra-1); border: 1px solid var(--borde); border-radius: var(--r-3); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.puerta-tarjeta h1 { font-size: 20px; margin: 0; }
.puerta-tarjeta h2 { font-size: 16px; margin: 0; }
.puerta-tarjeta p { margin: 0; line-height: 1.55; color: var(--texto-2); }
.puerta-tarjeta .btn.grande { justify-content: center; }
@media (max-width: 700px) { .puerta { padding-top: 6vh; } .puerta-tarjetas { grid-template-columns: 1fr; } }

/* Equipo: nueva cuenta */
.form-cuenta { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 10px; align-items: end; }
@media (max-width: 900px) { .form-cuenta { grid-template-columns: 1fr; } }
.tabla select { font: inherit; padding: 4px 6px; border: 1px solid var(--borde); border-radius: var(--r-1); background: var(--panel); color: var(--texto); }

/* La ficha como fieldset: sin el marco del navegador; desactivada, solo lectura */
fieldset.columna-form { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.columna-form:disabled input, fieldset.columna-form:disabled select, fieldset.columna-form:disabled textarea { background: var(--hundido); color: var(--texto); }
fieldset.columna-form:disabled .btn, fieldset.columna-form:disabled .chip { display: none; }