/* Intranet de tableros con el sistema de diseño HUB MyS · Solicitudes v6.
   Tokens y piezas copiados de tokens.json y components/bundle.css del sistema; las fuentes van
   servidas desde aquí porque la CSP solo permite estilos y fuentes propios. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(fuentes/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(fuentes/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fuentes/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(fuentes/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-display: swap; src: url(fuentes/poppins-800.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400 700; font-display: swap; src: url(fuentes/dm-sans.woff2) format("woff2"); }

/* ─── Tokens (tema único «Claro») ─────────────────────────────────────── */
:root {
  --navy: #14284b; --navy-dark: #0e1d38;
  --orange: #f47c20; --orange-fuerte: #e56f14; --orange-soft: #f9a85c; --orange-texto: #a94e08;
  --yellow: #fbb614; --yellow-oscuro: #8a6d0b;
  --green: #3aaa35; --green-oscuro: #297725;
  --red: #e2231a; --red-oscuro: #c61d15;
  --blue: #4c6fd6; --blue-oscuro: #4261bd;

  --acento: var(--orange); --acento-fuerte: var(--orange-fuerte); --acento-suave: var(--orange-soft); --acento-texto: var(--orange-texto);
  --marca: var(--navy); --marca-fuerte: var(--navy-dark);
  --exito: var(--green); --exito-texto: var(--green-oscuro);
  --error: var(--red); --error-texto: var(--red-oscuro);
  --aviso: var(--yellow); --aviso-texto: var(--yellow-oscuro);
  --info: var(--blue); --info-texto: var(--blue-oscuro);
  --logotipo: var(--orange);

  --text-base: #1b2a4a; --text-parrafo: #334966; --text-secundario: #4a5a74; --text-tenue: #576984;
  --sobre-navy-claro: #c3ccdb; --sobre-navy-medio: #aeb9d0;
  --fondo-base: #ffffff; --fondo-seccion: #eef1f6; --fondo-tarjeta1: #f5f7fb; --fondo-tarjeta2: #fbf7f2;
  --borde-tarjeta: #e7ecf4; --borde-header: #eef1f6;

  --font-title: "Poppins", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --space-0\.5: 2px; --space-1: 4px; --space-1\.5: 6px; --space-2: 8px; --space-2\.5: 10px; --space-3: 12px;
  --space-3\.5: 14px; --space-4: 16px; --space-4\.5: 18px; --space-5: 20px; --space-6: 24px; --space-7: 28px;
  --space-8: 32px; --space-10: 40px;

  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px;
  --radius-dialogo: 16px; --radius-pildora: 9999px;

  --shadow-sm: 0 1px 2px rgba(20,40,75,0.04), 0 2px 10px rgba(20,40,75,0.06);
  --shadow-md: 0 2px 6px rgba(20,40,75,0.05), 0 12px 24px -10px rgba(20,40,75,0.12);
  --shadow-2xl: 0 12px 28px rgba(20,40,75,0.10), 0 40px 80px -20px rgba(20,40,75,0.22);
  --shadow-boton-primario: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(20,40,75,0.12), 0 6px 14px -6px rgba(244,124,32,0.55);
  --shadow-boton-secundario: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(20,40,75,0.18), 0 6px 14px -6px rgba(20,40,75,0.45);
  --shadow-campo: inset 0 1px 2px rgba(20,40,75,0.04);
  --shadow-campo-foco: 0 0 0 4px rgba(244,124,32,0.18);

  --ancho-riel: 64px; --ancho-panel: 260px; --item-riel: 40px; --fila-panel: 38px;
  --boton-sm: 34px; --boton-md: 42px; --boton-lg: 50px; --toque-minimo: 44px; --ancho-login: 400px;

  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── Base ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo-base);
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.005em;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: var(--acento-texto); }
code { font-size: 12px; background: var(--fondo-seccion); color: var(--text-parrafo); padding: 1px var(--space-1\.5); border-radius: 6px; }
small { font-size: 12px; color: var(--text-tenue); }
[hidden] { display: none !important; }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Títulos y texto ─────────────────────────────────────────────────── */
.title1 { font-family: var(--font-title); font-size: 26px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; color: var(--marca); }
.h2 { font-family: var(--font-title); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--marca); }
.h3 { font-family: var(--font-title); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--marca); }
.nota { font-size: 13px; line-height: 1.45; color: var(--text-secundario); }
.enlace { color: var(--acento-texto); font-weight: 600; text-decoration: none; }
.enlace:hover { text-decoration: underline; }
button.enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.enlace.peligro { color: var(--error-texto); }

/* ─── Tarjeta ─────────────────────────────────────────────────────────── */
.card {
  background: var(--fondo-base);
  border: 1px solid rgba(20, 40, 75, 0.04);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
@media (prefers-contrast: more) { .card { border-color: var(--borde-tarjeta); } }

/* ─── Botón ───────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 0; border-radius: var(--radius-pildora);
  font-family: var(--font-title); font-weight: 600; text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none;
  transition: transform 100ms ease-out, background-color 100ms ease-out, opacity 100ms ease-out, border-color 100ms ease-out;
}
.boton:active { transform: scale(0.97); }
.boton:disabled { cursor: not-allowed; opacity: 0.5; transform: none; box-shadow: none; background-image: none; }
.boton:focus-visible { border-radius: var(--radius-pildora); }
.boton-sm { min-height: var(--boton-sm); padding: var(--space-2) var(--space-3\.5); font-size: 12px; }
.boton-md { min-height: var(--boton-md); padding: var(--space-2\.5) var(--space-5); font-size: 14px; }
.boton-lg { min-height: var(--boton-lg); padding: var(--space-3) var(--space-6); font-size: 15px; }
.boton-ancho { width: 100%; }
/* La letra del primario es navy: blanco sobre naranja da 2,71:1. */
.boton-primary {
  background-color: var(--acento); color: var(--marca);
  background-image: linear-gradient(180deg, var(--acento) 0%, var(--acento-fuerte) 100%);
  box-shadow: var(--shadow-boton-primario);
}
.boton-primary:hover { background-color: var(--acento-fuerte); background-image: none; }
.boton-secondary {
  background-color: var(--marca); color: var(--fondo-base);
  background-image: linear-gradient(180deg, var(--marca) 0%, var(--marca-fuerte) 100%);
  box-shadow: var(--shadow-boton-secundario);
}
.boton-secondary:hover { background-color: var(--marca-fuerte); background-image: none; }
.boton-ghost { background-color: var(--fondo-base); color: var(--text-base); border: 1px solid var(--borde-tarjeta); box-shadow: var(--shadow-sm); }
.boton-ghost:hover { background-color: var(--fondo-seccion); }

/* ─── Pastilla ────────────────────────────────────────────────────────── */
.pastilla {
  display: inline-flex; align-items: center; gap: var(--space-1\.5);
  border-radius: var(--radius-pildora); border: 1px solid;
  padding: var(--space-0\.5) var(--space-2\.5);
  font-size: 12px; line-height: 1.33; font-weight: 500; white-space: nowrap;
}
.pastilla-exito { background: color-mix(in srgb, var(--exito) 10%, var(--fondo-base)); color: var(--exito-texto); border-color: color-mix(in srgb, var(--exito) 20%, var(--fondo-base)); }
.pastilla-aviso { background: color-mix(in srgb, var(--acento) 10%, var(--fondo-base)); color: var(--acento-texto); border-color: color-mix(in srgb, var(--acento) 20%, var(--fondo-base)); }
.pastilla-error { background: color-mix(in srgb, var(--error) 10%, var(--fondo-base)); color: var(--error-texto); border-color: color-mix(in srgb, var(--error) 20%, var(--fondo-base)); }
.pastilla-info { background: color-mix(in srgb, var(--info) 10%, var(--fondo-base)); color: var(--info-texto); border-color: color-mix(in srgb, var(--info) 20%, var(--fondo-base)); }
.pastilla-neutra { background: var(--fondo-seccion); color: var(--text-secundario); border-color: var(--borde-tarjeta); }
.pastilla .punto { width: 6px; height: 6px; border-radius: var(--radius-pildora); background: currentColor; }

/* ─── Estructura: riel + panel + contenido ────────────────────────────── */
.marco { display: flex; min-height: 100vh; }

.riel {
  position: sticky; top: 0; height: 100vh; width: var(--ancho-riel); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1\.5);
  background: var(--marca); padding: var(--space-3\.5) 0;
}
.riel-logo { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--space-2\.5); border-radius: var(--radius-md); background: var(--fondo-base); }
.riel-item {
  position: relative; display: grid; place-items: center; width: var(--item-riel); height: var(--item-riel);
  border-radius: var(--radius-sm); color: var(--sobre-navy-medio); text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.riel-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--fondo-base); }
.riel-item[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--fondo-base); }
.riel-sep { height: 1px; width: 28px; margin: var(--space-1\.5) 0; background: rgba(255, 255, 255, 0.12); }
.riel-hueco { flex: 1; }
.riel-persona { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pildora); background: var(--acento); color: var(--marca); font-family: var(--font-title); font-size: 13px; font-weight: 700; }
.riel svg, .panel svg, .barra-movil svg { display: block; }

.panel {
  position: sticky; top: 0; height: 100vh; width: var(--ancho-panel); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--fondo-tarjeta1); border-right: 1px solid var(--borde-tarjeta);
}
.panel-nav { flex: 1; overflow-y: auto; padding: var(--space-4\.5) var(--space-3\.5) var(--space-3); }
.panel-modulo { margin: 0 0 var(--space-3); padding: 0 var(--space-1\.5); font-family: var(--font-title); font-size: 18px; font-weight: 600; color: var(--marca); }
.panel-volver { display: inline-block; margin: 0 0 var(--space-2) var(--space-1\.5); font-size: 13px; }
.panel-rotulo { padding: var(--space-4\.5) var(--space-1\.5) var(--space-1\.5); font-size: 14px; font-weight: 600; color: var(--marca); }
.panel-lista { display: flex; flex-direction: column; gap: var(--space-0\.5); }
.panel-item {
  display: flex; align-items: center; gap: var(--space-2\.5); min-height: var(--fila-panel);
  padding: 0 var(--space-2\.5); border-radius: var(--radius-md);
  font-size: 14px; color: var(--text-parrafo); text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.panel-item:hover { background: var(--fondo-seccion); color: var(--marca); }
.panel-item[aria-current="page"] { background: var(--fondo-base); color: var(--marca); font-weight: 600; box-shadow: var(--shadow-sm); }
.panel-item .icono { display: flex; flex-shrink: 0; color: var(--text-tenue); }
.panel-item .texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-vacio { padding: var(--space-1\.5) var(--space-2\.5); font-size: 13px; color: var(--text-tenue); }
.panel-pie { border-top: 1px solid var(--borde-tarjeta); padding: var(--space-2\.5) var(--space-3\.5) var(--space-4); }
.panel-persona { padding: var(--space-1\.5) var(--space-2\.5) var(--space-2); font-size: 12px; color: var(--text-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bajo 1024 px el panel se pliega en una fila al principio del contenido. */
.panel-movil { display: none; margin-bottom: var(--space-5); }
.panel-movil > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--toque-minimo); padding: 0 var(--space-4); list-style: none; cursor: pointer;
  font-family: var(--font-title); font-weight: 600; color: var(--marca);
}
.panel-movil > summary::-webkit-details-marker { display: none; }
.panel-movil > summary .menu { font-size: 13px; color: var(--acento-texto); }
.panel-movil[open] > summary .menu::after { content: " ✕"; }
.panel-movil .panel-nav { padding: 0 var(--space-3) var(--space-3); }
.panel-movil .panel-pie { padding: var(--space-2\.5) var(--space-3) var(--space-3); }

/* En el teléfono la barra navy de arriba reemplaza el riel. */
.barra-movil {
  display: none; align-items: center; gap: var(--space-3); padding: var(--space-2\.5) var(--space-4);
  background: var(--marca); color: var(--fondo-base);
}
.barra-movil .riel-logo { width: 36px; height: 36px; margin: 0; border-radius: var(--radius-sm); }
.barra-movil .nombre { flex: 1; font-family: var(--font-title); font-weight: 600; font-size: 15px; }
.barra-movil .riel-persona { width: 32px; height: 32px; font-size: 12px; }

.contenido { min-width: 0; flex: 1; padding: var(--space-5) var(--space-7) var(--space-10); }
@media (max-width: 1023px) { .marco > .panel { display: none; } .panel-movil { display: block; } }
@media (max-width: 767px) { .marco > .riel { display: none; } .barra-movil { display: flex; } }
@media (max-width: 639px) { .contenido { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* ─── Cabecera y secciones ────────────────────────────────────────────── */
.cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-7); }
.cabecera-sub { margin-top: var(--space-1); max-width: 80ch; font-size: 14px; color: var(--text-secundario); }
.cabecera-sub strong { color: var(--text-base); font-weight: 600; }
.seccion { margin-top: var(--space-7); }
section > .h2 { margin-bottom: var(--space-3); }
section > .h2:has(+ .nota) { margin-bottom: var(--space-1); }
section > .nota { margin-bottom: var(--space-3); }
.tabular { font-variant-numeric: tabular-nums; }
.migas { display: inline-block; margin-bottom: var(--space-1\.5); font-size: 13px; }

/* ─── Rejilla de tableros ─────────────────────────────────────────────── */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.tarjeta-tablero {
  display: flex; align-items: flex-start; gap: var(--space-3\.5); padding: var(--space-5);
  color: inherit; text-decoration: none; transition: box-shadow 140ms ease, transform 140ms var(--ease-salida);
}
.tarjeta-tablero:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tarjeta-tablero .h3 { margin-bottom: var(--space-1); }
.tesela { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--fondo-seccion); color: var(--marca); }
.lista-ocultos { margin: 0; padding: 0; list-style: none; }
.lista-ocultos li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--borde-tarjeta); }
.lista-ocultos li:last-child { border-bottom: 0; }
.lista-ocultos strong { display: block; font-weight: 600; color: var(--text-base); }

/* ─── Vacío y avisos ──────────────────────────────────────────────────── */
.vacio { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-6); text-align: center; }
.vacio .h3 { color: var(--text-secundario); }
.vacio p { max-width: 54ch; font-size: 13px; line-height: 1.625; color: var(--text-tenue); }

.aviso-error, .aviso-exito, .aviso-nota {
  border-radius: var(--radius-lg); border: 1px solid;
  padding: var(--space-2\.5) var(--space-3\.5); margin-bottom: var(--space-4); font-size: 14px;
}
.aviso-error { border-color: color-mix(in srgb, var(--error) 20%, var(--fondo-base)); background: color-mix(in srgb, var(--error) 5%, var(--fondo-base)); color: var(--error-texto); }
.aviso-exito { border-color: color-mix(in srgb, var(--exito) 20%, var(--fondo-base)); background: color-mix(in srgb, var(--exito) 5%, var(--fondo-base)); color: var(--exito-texto); }
.aviso-nota { border-color: color-mix(in srgb, var(--aviso) 30%, var(--fondo-base)); background: color-mix(in srgb, var(--aviso) 10%, var(--fondo-base)); color: var(--aviso-texto); }
.aviso-error ul { margin: var(--space-1\.5) 0 0; padding-left: var(--space-5); }
.aviso-vercomo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2\.5); color: var(--text-base); }
.aviso-vercomo strong { font-weight: 600; }

/* ─── Tabla ───────────────────────────────────────────────────────────── */
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.tabla thead th {
  font-family: var(--font-title); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-tenue); white-space: nowrap; padding: 10px var(--space-3); border-bottom: 1px solid var(--borde-tarjeta); text-align: left;
}
.tabla tbody td, .tabla tbody th { padding: 11px var(--space-3); border-bottom: 1px solid var(--borde-tarjeta); color: var(--text-parrafo); vertical-align: middle; text-align: left; font-weight: 400; }
.tabla tbody tr:last-child td, .tabla tbody tr:last-child th { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tbody tr:hover td, .tabla tbody tr:hover th { background: var(--fondo-tarjeta1); }
.tabla tbody th { color: var(--text-base); font-weight: 600; }
.tabla tbody th small, .tabla tbody td small { display: block; font-weight: 400; }
.tabla tr.inactivo td, .tabla tr.inactivo th { color: var(--text-tenue); }
.tabla td.alcance { max-width: 380px; }
.tabla td.detalle { font-size: 12px; word-break: break-word; max-width: 520px; color: var(--text-secundario); }
.tabla td.fecha { white-space: nowrap; }
.tabla td.acciones { white-space: nowrap; text-align: right; }
.tabla td.acciones > * + * { margin-left: var(--space-3\.5); }
.tabla td.acciones form { display: inline; }
.tabla .campo { min-width: 200px; }

/* ─── Formulario ──────────────────────────────────────────────────────── */
.formulario { padding: var(--space-6); }
.formulario > .h2 { margin: var(--space-7) 0 var(--space-1); }
.formulario > .nota { margin-bottom: var(--space-3); }
.etiqueta { display: block; font-family: var(--font-title); font-size: 12.5px; font-weight: 600; color: var(--text-secundario); }
.campo {
  width: 100%; border-radius: var(--radius-md); border: 1px solid var(--borde-tarjeta); background: var(--fondo-base);
  padding: 11px var(--space-3\.5); font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--text-base);
  outline: none; box-shadow: var(--shadow-campo);
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.campo::placeholder { color: var(--text-tenue); }
.campo:focus { border-color: var(--acento); box-shadow: var(--shadow-campo-foco); }
.campo:focus-visible { outline: none; }
.campo:disabled { background: var(--fondo-seccion); color: var(--text-tenue); cursor: not-allowed; }
select.campo {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576984' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.campo-densa { padding: 6px 9px; font-size: 13px; }
.rejilla-form { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: end; }
@media (min-width: 640px) { .rejilla-form { grid-template-columns: 1fr 1fr; } }
.grupo-campo { display: flex; flex-direction: column; gap: var(--space-1\.5); }
@media (max-width: 640px) { .campo { font-size: 16px; } }
.buscador { max-width: 420px; margin-bottom: var(--space-3); }

label.check { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; color: var(--text-parrafo); }
label.check input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--acento); }
label.check .nota { margin-left: var(--space-1); }
.opciones { display: flex; flex-direction: column; gap: var(--space-0\.5); }
.pie-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--borde-tarjeta); }

.alcance-lista { border: 1px solid var(--borde-tarjeta); border-radius: var(--radius-md); max-height: 480px; overflow: auto; }
.empresa-bloque { border-bottom: 1px solid var(--borde-tarjeta); }
.empresa-bloque:last-child { border-bottom: 0; }
.empresa-bloque summary { padding: var(--space-1) var(--space-3\.5); cursor: pointer; background: var(--fondo-tarjeta1); }
.empresa-bloque summary label { display: inline-flex; }
.empresa-bloque strong { font-weight: 600; color: var(--text-base); }
.puntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--space-4); padding: var(--space-1) var(--space-4) var(--space-2) var(--space-8); }
.puntos.deshabilitado { opacity: .45; }

/* ─── Tablero incrustado ──────────────────────────────────────────────── */
body.con-tablero .marco { height: 100vh; }
body.con-tablero .contenido { display: flex; flex-direction: column; padding-bottom: var(--space-5); }
body.con-tablero .cabecera { margin-bottom: var(--space-4); }
.marco-tablero { flex: 1; display: flex; flex-direction: column; min-height: 480px; overflow: hidden; }
.marco-tablero iframe { flex: 1; width: 100%; border: 0; background: var(--fondo-tarjeta1); }
.pie-tablero { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2\.5) var(--space-4); border-top: 1px solid var(--borde-tarjeta); font-size: 13px; color: var(--text-tenue); }
.pie-tablero svg { flex-shrink: 0; }

/* ─── Entrada (login y sin acceso) ────────────────────────────────────── */
body.entrada {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: linear-gradient(135deg, var(--marca) 0%, var(--marca-fuerte) 100%);
}
.entrada-caja { width: 100%; max-width: var(--ancho-login); }
.entrada-tarjeta { background: var(--fondo-base); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); padding: var(--space-8); }
@media (min-width: 640px) { .entrada-tarjeta { padding: 36px; } }
.firma { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.firma img { width: 104px; height: 104px; animation: simbolo-gira 120s linear infinite; }
@keyframes simbolo-gira { to { transform: rotate(360deg); } }
.wordmark { font-family: var(--font-title); font-size: 30px; font-weight: 700; line-height: 1; color: var(--marca); }
.wordmark .hub { letter-spacing: .3em; }
.wordmark .mys { letter-spacing: .01em; color: var(--logotipo); }
.bajada { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--text-tenue); margin-top: var(--space-1\.5); }
.regla { height: 1px; background: var(--borde-tarjeta); margin: var(--space-7) 0; }
.entrada-form { display: flex; flex-direction: column; gap: var(--space-4); }
.entrada-form .etiqueta { font-size: 13px; color: var(--text-base); }
.entrada-tarjeta .h2 { margin-bottom: var(--space-2); text-align: center; }
.entrada-tarjeta > p { color: var(--text-parrafo); margin-bottom: var(--space-5); text-align: center; }
.entrada-tarjeta .aviso-error, .entrada-tarjeta .aviso-nota { margin: var(--space-4) 0 0; font-size: 13px; }
.ayuda { margin-top: var(--space-5); text-align: center; font-size: 13px; line-height: 1.6; color: var(--sobre-navy-medio); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}