/* Hub EM3 — hoja de estilos única. Sin dependencias externas (CSP: solo 'self'). */

:root {
  --fondo: #f4f1ec;
  --superficie: #ffffff;
  --superficie-2: #f9f7f3;
  --borde: #e2ddd4;
  --texto: #1d2428;
  --texto-suave: #5b6469;
  --marca: #1f4e5f;
  --marca-hover: #173c49;
  --marca-suave: #e3edf0;
  --acento: #c8793a;
  --ok: #2f6b45;
  --ok-fondo: #e6f2ea;
  --error: #a3342b;
  --error-fondo: #f8e7e5;
  --pendiente: #8a5a12;
  --pendiente-fondo: #fbf0dc;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(29, 36, 40, .06), 0 4px 16px rgba(29, 36, 40, .05);
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sobre-marca: #ffffff;
  --acento-suave: rgba(200, 121, 58, .35);
  --enlace: #1a5fb4;
  --enlace-hover: #134a8e;
  --portada-fondo: #1f4e5f;
  --portada-texto: #ffffff;
  --portada-suave: #d3e1e6;
  --portada-borde: rgba(255, 255, 255, .38);
  --portada-pastilla: rgba(255, 255, 255, .16);
  --portada-sol: #f0a25f;
  color-scheme: light;
}

/* Modo oscuro: sigue al sistema salvo que la persona elija uno (data-tema en <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #14191c;
    --superficie: #1c2327;
    --superficie-2: #20282d;
    --borde: #2f393f;
    --texto: #e8ecee;
    --texto-suave: #9aa6ad;
    --marca: #6fb0c4;
    --marca-hover: #8cc3d4;
    --marca-suave: #1f3640;
    --ok: #7cc79a;
    --ok-fondo: #1b3226;
    --error: #ef8f86;
    --error-fondo: #3a1f1d;
    --pendiente: #e3b765;
    --pendiente-fondo: #3a2e18;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
    --sobre-marca: #10171a;
    --acento-suave: rgba(226, 150, 88, .4);
    --enlace: #8ab4f8;
    --enlace-hover: #aecbfa;
    --portada-fondo: #173842;
    --portada-texto: #eef3f5;
    --portada-suave: #b9cdd4;
    --portada-borde: rgba(238, 243, 245, .3);
    --portada-pastilla: rgba(238, 243, 245, .12);
    --portada-sol: #e2965a;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #14191c;
  --superficie: #1c2327;
  --superficie-2: #20282d;
  --borde: #2f393f;
  --texto: #e8ecee;
  --texto-suave: #9aa6ad;
  --marca: #6fb0c4;
  --marca-hover: #8cc3d4;
  --marca-suave: #1f3640;
  --ok: #7cc79a;
  --ok-fondo: #1b3226;
  --error: #ef8f86;
  --error-fondo: #3a1f1d;
  --pendiente: #e3b765;
  --pendiente-fondo: #3a2e18;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sobre-marca: #10171a;
  --acento-suave: rgba(226, 150, 88, .4);
  --enlace: #8ab4f8;
  --enlace-hover: #aecbfa;
  --portada-fondo: #173842;
  --portada-texto: #eef3f5;
  --portada-suave: #b9cdd4;
  --portada-borde: rgba(238, 243, 245, .3);
  --portada-pastilla: rgba(238, 243, 245, .12);
  --portada-sol: #e2965a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` siempre oculta, aunque el componente defina su propio display (p. ej. .boton). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; font-size: 112.5%; }  /* 18 px de base */

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 1rem/1.6 var(--fuente);
}

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

h1, h2 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .92em; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Barra superior --- */

.barra { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.barra__interior {
  max-width: 1160px; margin: 0 auto; padding: .7rem 1rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.marca {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 650; color: var(--texto); text-decoration: none;
}
.marca__sello {
  display: inline-grid; place-items: center;
  background: var(--marca); color: var(--sobre-marca);
  font-size: 0.82rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 6px; padding: .25rem .4rem;
}

.nav { display: flex; gap: .25rem; flex: 1; }
.nav a {
  color: var(--texto-suave); text-decoration: none;
  padding: .35rem .7rem; border-radius: 6px; font-weight: 500;
}
.nav a:hover { background: var(--superficie-2); color: var(--texto); }
.nav a[aria-current="page"] { background: var(--marca-suave); color: var(--marca); }

.cuenta { display: flex; align-items: center; gap: .5rem; }
.cuenta__nombre { color: var(--texto); text-decoration: none; font-weight: 500; }
.cuenta form { margin: 0; }

@media (max-width: 560px) {
  /* Celular: logo y cuenta arriba; la navegación en una segunda línea. */
  .barra__interior { gap: .35rem .5rem; flex-wrap: wrap; padding-bottom: .45rem; }
  .barra .nav { order: 3; flex: 1 1 100%; margin-left: -.5rem; }
  .cuenta { min-width: 0; }
  .cuenta .boton--texto { padding: .35rem .4rem; }
  .marca { font-size: 0; gap: 0; }           /* en el celular queda solo el sello EM3 */
  .marca .marca__sello { font-size: 0.82rem; }
  .nav a { padding: .35rem .5rem; }
  .barra .nav { flex-wrap: wrap; row-gap: .15rem; }
  .cuenta { gap: .25rem; }
  .cuenta { margin-left: auto; }
  .nav { flex: 0 1 auto; }
  .cuenta__nombre { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
}

/* --- Contenido --- */

.contenido { max-width: 1160px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.contenido--angosto { max-width: 620px; }

.encabezado { margin-bottom: 1.5rem; }
.encabezado__fecha {
  margin: 0 0 .2rem; color: var(--texto-suave);
  font-size: .9rem; font-weight: 500;
}
.encabezado--accion {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.encabezado--accion .nota { margin: 0; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 1.5rem;
}
.vacio { border-style: dashed; box-shadow: none; background: transparent; }
.vacio p { color: var(--texto-suave); margin: 0; max-width: 52ch; }
.mensaje { max-width: 580px; margin: 3rem auto; text-align: center; }

.nota { color: var(--texto-suave); }
.miga { margin-bottom: 1rem; font-size: .92rem; }
.miga a { text-decoration: none; }

.etiqueta {
  display: inline-block; font-size: 0.82rem; font-weight: 600;
  background: var(--marca-suave); color: var(--marca);
  padding: .05rem .45rem; border-radius: 99px; vertical-align: 1px;
}

/* --- Acceso (entrar / contraseña obligatoria) --- */

.fondo-acceso {
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--marca-suave), transparent 60%),
    var(--fondo);
}
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.tarjeta--acceso { width: 100%; max-width: 440px; padding: 2rem; }
.acceso__marca {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 650; margin-bottom: 1.5rem;
}
.acceso__salir { margin-top: 1rem; text-align: center; }

/* --- Formularios --- */

.formulario { display: flex; flex-direction: column; }
.formulario label { font-weight: 550; font-size: .92rem; margin: .9rem 0 .3rem; }
.formulario label:first-of-type { margin-top: .2rem; }
.formulario input[type="text"], .formulario input:not([type]),
.formulario input[type="password"] {
  font: inherit; color: inherit;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px;
  padding: .6rem .75rem; width: 100%;
}
.formulario input:focus { border-color: var(--marca); outline: 2px solid var(--marca-suave); outline-offset: 0; }
.formulario .boton--primario { margin-top: 1.4rem; }
.ayuda { font-size: .85rem; color: var(--texto-suave); margin: .35rem 0 0; }

.opciones { border: 0; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.opciones legend { font-weight: 550; font-size: .92rem; margin-bottom: .4rem; padding: 0; }
.formulario .opcion {
  display: flex; gap: .7rem; align-items: flex-start; margin: 0;
  border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .8rem;
  font-weight: 400; cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.opcion input { margin-top: .3rem; accent-color: var(--marca); }
.opcion small { display: block; color: var(--texto-suave); font-size: .85rem; }

/* --- Botones --- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 550; font-size: .95rem; line-height: 1.2;
  padding: .6rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  text-decoration: none;
}
.boton:hover { background: var(--superficie-2); color: var(--texto); }
.boton--primario { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.boton--primario:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: var(--sobre-marca); }
.boton--texto { border-color: transparent; background: transparent; color: var(--texto-suave); padding: .35rem .6rem; }
.boton--texto:hover { background: var(--superficie-2); }
.boton--chico { font-size: .85rem; padding: .35rem .65rem; }
.boton--peligro { color: var(--error); }

/* --- Alertas y estados --- */

.alerta { border-radius: 8px; padding: .7rem .9rem; font-size: .93rem; margin: 1rem 0; }
.alerta--error { background: var(--error-fondo); color: var(--error); }
.alerta--ok { background: var(--ok-fondo); color: var(--ok); }

.estado {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 550; white-space: nowrap;
}
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.estado--activo { color: var(--ok); }
.estado--inactivo { color: var(--texto-suave); }
.estado--pendiente { color: var(--pendiente); }

/* --- Tabla --- */

.tabla-contenedor {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto;
}
.tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tabla th {
  text-align: left; font-size: 0.82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-suave);
  background: var(--superficie-2); padding: .65rem 1rem; border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
.tabla td[data-etiqueta="Último ingreso"] { white-space: nowrap; }
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.fila--inactiva td { color: var(--texto-suave); }
.acciones { text-align: right; white-space: nowrap; }
.acciones form { display: inline; margin: 0 0 0 .3rem; }

@media (max-width: 760px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: .15rem 0; }
  .tabla td[data-etiqueta] { position: relative; padding-left: 7.5rem; min-height: 1.6rem; }
  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta); position: absolute; left: 0; top: .2rem; width: 7rem;
    color: var(--texto-suave); font-size: .82rem;
  }
  .acciones { text-align: left; white-space: normal; padding-top: .6rem !important; }
  .acciones form { margin: 0 .3rem .3rem 0; }
}

/* --- Credenciales temporales --- */

.credenciales {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem;
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 8px;
  padding: 1rem; margin: 1.2rem 0;
}
.credenciales dt { color: var(--texto-suave); font-size: .9rem; }
.credenciales dd { margin: 0; }
.clave { font-size: 1.1rem; font-weight: 600; letter-spacing: .03em; user-select: all; }

/* --- Paquetes --- */

.botonera { display: flex; gap: .5rem; flex-wrap: wrap; }
.botonera--formulario { margin-top: 1rem; }
.bloque { margin-top: 2rem; }
.bloque > h2 { margin-bottom: .8rem; }

.formulario textarea {
  font: inherit; color: inherit; width: 100%;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: .75rem;
}
.formulario textarea:focus { border-color: var(--marca); outline: 2px solid var(--marca-suave); outline-offset: 0; }
textarea.codigo { font-family: var(--mono); font-size: .85rem; line-height: 1.5; resize: vertical; tab-size: 2; }

.formulario--linea .linea { display: flex; gap: .5rem; flex-wrap: wrap; }
.formulario--linea .linea input { flex: 1 1 16rem; }
.formulario--linea .boton--primario { margin-top: 0; }

.lista-errores { margin: .5rem 0 0; padding-left: 1.2rem; max-height: 18rem; overflow: auto; }
.lista-errores li { margin: .15rem 0; }
.lista-errores code { font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.alerta p { margin: 0; }
.alerta--aviso { background: var(--pendiente-fondo); color: var(--pendiente); }

.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 0 0 1rem;
}
.cifras > div {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem;
}
.cifras dt { color: var(--texto-suave); font-size: .82rem; }
.cifras dd { margin: 0; font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.barra-accion {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: flex-end; gap: .5rem;
  background: var(--fondo); padding: .75rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--borde);
}




.enlaces { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.enlaces a { font-weight: 550; }
.enlaces a::after { content: " ↗"; font-size: .8em; }
.enlaces__dominio { color: var(--texto-suave); font-size: 0.82rem; margin-left: .35rem; }

.etiqueta--neutra { background: var(--superficie-2); color: var(--texto-suave); border: 1px solid var(--borde); }


.clave--larga { font-size: .95rem; word-break: break-all; }

/* --- Selector de tema --- */

.tema { margin: 0; display: inline-flex; }
.tema button {
  font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer;
  width: 2.1rem; height: 2.1rem; display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--texto-suave);
}
.tema button:hover { background: var(--superficie-2); color: var(--texto); border-color: var(--borde); }
/* Se muestra solo el botón que lleva al modo contrario del que se ve. */
.tema__a-claro { display: none !important; }
:root[data-tema="oscuro"] .tema__a-claro { display: inline-grid !important; }
:root[data-tema="oscuro"] .tema__a-oscuro { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema__a-claro { display: inline-grid !important; }
  :root:not([data-tema="claro"]) .tema__a-oscuro { display: none !important; }
}
.tema--flotante { position: fixed; top: .75rem; right: .75rem; z-index: 5; }

/* --- Boletín «Buenos días EM3» (formato newsletter) --- */

@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fuentes/bitter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

.contenido--boletin { max-width: calc(46rem + 2rem); }
.boletin { --titular: "Bitter", Georgia, "Times New Roman", serif; }

/* Portada */
.portada {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--portada-fondo); color: var(--portada-texto);
  border-radius: 18px; padding: 1.75rem 2rem 1.6rem;
}
.portada > :not(.portada__sol) { position: relative; }
.portada__sol {
  position: absolute; z-index: -1; right: -1.5rem; bottom: -.4rem; width: 14rem;
  color: var(--portada-sol); opacity: .45; pointer-events: none;
}
.portada__linea { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: 0 0 .6rem; font-size: .95rem; color: var(--portada-suave); }
.portada__linea > span + span::before { content: "·"; margin-right: .9rem; }
.portada__linea > span:first-child { color: var(--portada-texto); font-weight: 600; }
.portada__linea > span { white-space: nowrap; }
.portada__hoy {
  display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 99px; font-size: .8rem; font-weight: 700;
  background: var(--portada-pastilla); color: var(--portada-texto); vertical-align: 1px;
}
.portada__titulo {
  font-family: var(--titular); font-size: 2.6rem; font-weight: 750; line-height: 1.05; letter-spacing: -.012em;
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.portada__datos { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .8rem 0 0; font-size: .95rem; color: var(--portada-suave); }
.portada__datos > span + span::before { content: "·"; margin-right: .9rem; }
.portada__edicion { color: var(--portada-texto); font-weight: 700; }
.portada__nav { display: flex; gap: .5rem; margin-top: 1.3rem; }
.portada__nav a {
  color: var(--portada-texto); text-decoration: none; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--portada-borde); border-radius: 8px; padding: .3rem .75rem;
  background: var(--portada-fondo);
  transition: background-color .18s ease-out;
}
.portada__nav a:hover { background: color-mix(in srgb, var(--portada-texto) 14%, var(--portada-fondo)); color: var(--portada-texto); }
.portada__nav a:focus-visible { outline-color: var(--portada-texto); }
.portada__siguiente { margin-left: auto; }
.boletin__vacio { margin-top: 1rem; }

/* Bajada */
.md-intro { margin-top: 1.5rem; }
.md-bajada { font-size: 1.15rem; line-height: 1.5; margin: 0 0 1rem; text-wrap: pretty; }
.md-bajada strong { font-weight: 650; }


/* Índice «En este número» */
.indice {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem 1.2rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
}
.indice__titulo { font-family: var(--titular); font-size: 1.1rem; font-weight: 700; margin: 0 0 .7rem; }
.indice__grupo + .indice__grupo { margin-top: .9rem; }
.indice__nombre { color: var(--texto); font-weight: 650; text-decoration: none; }
.indice__nombre:hover { color: var(--marca); text-decoration: underline; }
.indice__areas { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.indice__areas a {
  display: inline-flex; align-items: baseline; gap: .45rem; padding: .3rem .75rem;
  border: 1px solid var(--borde); border-radius: 99px; background: var(--superficie-2);
  color: var(--texto); text-decoration: none; font-size: .92rem; line-height: 1.35;
  transition: border-color .18s ease-out, color .18s ease-out;
}
.indice__areas a:hover { border-color: var(--marca); color: var(--marca); }
.indice__codigo { font-size: .8rem; font-weight: 700; color: var(--marca); white-space: nowrap; }

/* Cuerpo: grupos, recuadros por área y temas */
.md { line-height: 1.6; }
.md-cuerpo > .md-grupo:first-child { margin-top: 2.25rem; }
.md-grupo { margin-top: 2.75rem; }
.md-grupo > .md-h2 {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--titular); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 1rem;
  text-wrap: balance;
}
.md-grupo > .md-h2::after { content: ""; flex: 1 1 2rem; height: 1px; background: var(--borde); }

.md-area {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra); padding: 1.2rem 1.5rem 1.25rem;
}
.md-area + .md-area { margin-top: 1rem; }
.md-area > :first-child { margin-top: 0; }
.md-area > :last-child { margin-bottom: 0; }
.md-area > .md-h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin: 0 0 .9rem;
  font-family: var(--titular); font-size: 1.3rem; font-weight: 650; line-height: 1.25;
}
.md-area__codigo {
  font-family: var(--fuente); font-size: .8rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
  background: var(--marca-suave); color: var(--marca); padding: .05rem .55rem; border-radius: 6px;
}
.md-tema + .md-tema { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.md-tema > .md-h4 { font-size: 1.02rem; font-weight: 650; line-height: 1.35; margin: 0 0 .35rem; }
.md-area p { margin: .4rem 0; }

.md-area ul { list-style: none; margin: .25rem 0 0; padding: 0; }
.md-area li { position: relative; padding-left: 1.15rem; margin: .4rem 0; text-wrap: pretty; }
.md-area li::before {
  content: ""; position: absolute; left: .15rem; top: .68em; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--acento);
}
.md-area li li { margin: .25rem 0; color: var(--texto-suave); }
.md-area li li::before { background: transparent; border: 1.5px solid var(--texto-suave); width: .38rem; height: .38rem; }

.md code { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 4px; padding: 0 .3rem; font-size: .85em; word-break: break-word; }
.md hr { border: 0; border-top: 1px solid var(--borde); margin: 2.5rem 0 1rem; }
.md-pie { color: var(--texto-suave); font-size: .9rem; text-align: center; margin: 0; }

/* Marcas de estado */
.estado-md {
  display: inline-block; font-size: .8rem; font-weight: 700; line-height: 1.55;
  padding: 0 .5rem; border-radius: 99px; vertical-align: 1px; white-space: nowrap;
}
.estado-md--confirmado { background: var(--ok-fondo); color: var(--ok); }
.estado-md--por-confirmar { background: var(--pendiente-fondo); color: var(--pendiente); }
.estado-md--reemplaza { background: var(--marca-suave); color: var(--marca); }
.estado-md--coordinacion { background: var(--error-fondo); color: var(--error); }

/* Saltos desde el índice: el destino queda con aire arriba y se resalta un instante. */
.md-grupo, .md-area, .indice { scroll-margin-top: 1rem; }
.con-barra-accion .md-grupo, .con-barra-accion .md-area, .con-barra-accion .indice { scroll-margin-top: 5.5rem; }

.subir { position: fixed; right: 1rem; bottom: 1rem; z-index: 3; margin: 0; }
.subir a {
  display: inline-block; padding: .45rem .9rem; border-radius: 99px; font-size: .9rem; font-weight: 600;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); box-shadow: var(--sombra);
  text-decoration: none;
}
.subir a:hover { color: var(--marca); border-color: var(--marca); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .portada__sol { animation: amanecer 1.1s cubic-bezier(.16, 1, .3, 1) both; }
  .md-area:target, .md-grupo:target > .md-h2 { animation: destino 1.8s cubic-bezier(.16, 1, .3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .md-area:target { outline: 2px solid var(--acento); outline-offset: 2px; }
}
@keyframes amanecer { from { transform: translateY(18%); opacity: 0; } }
@keyframes destino {
  from { box-shadow: 0 0 0 4px var(--acento-suave), var(--sombra); }
  to { box-shadow: 0 0 0 4px transparent, var(--sombra); }
}

@media (max-width: 560px) {
  .portada { padding: 1.3rem 1.15rem 1.2rem; border-radius: 14px; }
  .portada__titulo { font-size: 2.05rem; }
  .portada__linea { flex-direction: column; gap: 0; }
  .portada__linea > span + span::before { content: none; }
  .portada__sol { width: 9.5rem; right: -1.75rem; }
  .md-area { padding: 1rem 1.05rem 1.1rem; }
  .md-area > .md-h3 { font-size: 1.18rem; }
  .md-grupo > .md-h2 { font-size: 1.32rem; }
  .indice { padding: 1rem; }
  .subir { right: .75rem; bottom: .75rem; }
}

.titulo-nombre { color: var(--texto-suave); font-weight: 500; }

/* --- Inicio --- */

.contenido--lectura { max-width: 960px; }
.bloque--primero { margin-top: 1.25rem; }


/* --- Cargar desde archivo --- */

.archivo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .5rem; }
.archivo:focus-within .boton { outline: 3px solid var(--acento); outline-offset: 2px; }
.archivo .nota { font-size: .9rem; }
.archivo__estado { flex: 1 1 100%; margin: 0; font-size: .92rem; color: var(--ok); min-height: 1.4em; }
.archivo__estado:empty { display: none; }
.archivo__estado--error { color: var(--error); }
textarea.soltar { border-color: var(--marca); outline: 3px dashed var(--marca); outline-offset: 2px; background: var(--marca-suave); }

/* --- Asignaciones --- */

.contador {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
  border-radius: 99px; background: var(--marca-suave); color: var(--marca); font-size: .85rem; vertical-align: 2px;
}
.etiqueta--alta { background: var(--error-fondo); color: var(--error); }
.texto-alta { color: var(--error); }

.estado-asig { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 550; white-space: nowrap; }
.estado-asig::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.estado-asig--no_iniciado { color: var(--texto-suave); }
.estado-asig--en_desarrollo { color: var(--marca); }
.estado-asig--en_revision { color: var(--pendiente); }
.estado-asig--con_comentarios { color: var(--error); }
.estado-asig--detenido { color: var(--error); }
.estado-asig--terminado { color: var(--ok); }

.plazo { font-size: .88rem; font-weight: 550; white-space: nowrap; }
.plazo--vencido { color: var(--error); }
.plazo--pronto { color: var(--pendiente); }
.plazo--normal { color: var(--texto-suave); font-weight: 400; }

/* Filtros del panel */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.filtros label { font-weight: 550; font-size: .92rem; }
select {
  font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 8px; padding: .5rem .7rem; max-width: 100%;
}
.segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin-left: auto; }
.segmentos a { padding: .4rem .8rem; text-decoration: none; color: var(--texto-suave); font-size: .92rem; background: var(--superficie); }
.segmentos a + a { border-left: 1px solid var(--borde); }
.segmentos a[aria-current="page"] { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
@media (max-width: 560px) { .segmentos { margin-left: 0; } }

/* Formulario en grilla */
.formulario--grilla { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.25rem; }
.formulario--grilla .campo { display: flex; flex-direction: column; min-width: 0; }
.formulario--grilla .campo--ancho { grid-column: 1 / -1; }
.formulario--grilla .campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
.formulario--grilla .campo--doble > div { display: flex; flex-direction: column; min-width: 0; }
.formulario--grilla label, .formulario--grilla legend { margin: .9rem 0 .3rem; }
.formulario--grilla input, .formulario--grilla select, .formulario--grilla textarea { width: 100%; }
.formulario input[type="date"], .formulario input[type="url"] {
  font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 8px; padding: .55rem .75rem;
}
.formulario--grilla .botonera { margin-top: 1.25rem; align-items: center; }
.formulario--grilla .boton--primario { margin-top: 0; }
.opcional { font-weight: 400; color: var(--texto-suave); font-size: .85rem; }
.enlaces-form { border: 0; padding: 0; margin: 0; }
.enlaces-form legend { font-weight: 550; font-size: .92rem; padding: 0; }
.enlaces-form__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.enlaces-form__quitar {
  width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center; cursor: pointer;
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--texto-suave);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  transition: color .15s ease-out, border-color .15s ease-out, background-color .15s ease-out;
}
.enlaces-form__quitar:hover { color: var(--error); border-color: var(--borde); background: var(--error-fondo); }
.enlaces-form__quitar[hidden] { display: none; }
.enlaces-form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .1rem; }
.enlaces-form__pie .ayuda { margin: 0; }
.enlaces-form__pie .boton:disabled { opacity: .55; cursor: not-allowed; }
.empujar { margin-left: auto; }
.boton--destructivo { background: var(--error); border-color: var(--error); color: #fff; }
.boton--destructivo:hover { background: var(--error); filter: brightness(.92); color: #fff; }
@media (max-width: 640px) {
  .formulario--grilla { grid-template-columns: 1fr; }
  .enlaces-form__fila { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: .5rem; border-bottom: 1px dashed var(--borde); }
  .enlaces-form__fila input[name="enlace_url"] { grid-column: 1; }
  .enlaces-form__quitar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.historial { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borde); }
.historial li { position: relative; padding: .35rem 0 .35rem 1rem; }
.historial li::before { content: ""; position: absolute; left: -.38rem; top: .85rem; width: .6rem; height: .6rem;
  border-radius: 50%; background: var(--superficie); border: 2px solid var(--marca); }
.historial__cuando { display: block; font-size: .85rem; color: var(--texto-suave); }

/* Tarjetas en el inicio */
.asignaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.asig { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1rem 1.1rem; }
.asig--alta { border-color: color-mix(in srgb, var(--error) 50%, var(--borde)); }
.asig__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.asig__codigo { font-weight: 600; font-size: .9rem; }
.asig__titulo { font-size: 1.05rem; font-weight: 600; margin: .35rem 0 .1rem; }
.asig > .asig__titulo:first-child { margin-top: 0; }
.asig__estado { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .45rem; }
.asig__descripcion { margin: .6rem 0 0; font-size: .95rem; color: var(--texto-suave); white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Toda la tarjeta lleva a la ficha: el enlace del título se extiende sobre ella. */
.asig { position: relative; transition: border-color .18s ease-out, box-shadow .18s ease-out; }
.asig:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); }
.asig:has(.asig__abrir:focus-visible) { outline: 3px solid var(--acento); outline-offset: 2px; }
.asig__abrir { color: inherit; text-decoration: none; }
.asig__abrir:focus-visible { outline: none; }
.asig__abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.asig:hover .asig__abrir { color: var(--marca); }
.asig__meta { font-size: .88rem; color: var(--texto-suave); }
.asig__ver { display: block; margin-top: .55rem; font-size: .88rem; font-weight: 600; color: var(--marca); }

/* Ficha de una asignación */
.ficha__cabecera { margin-bottom: 1.5rem; }
.ficha__titulo { font-size: 1.6rem; margin: .5rem 0 .2rem; text-wrap: balance; }
.ficha__acciones { margin: 1rem 0 0; }
.ficha__datos {
  display: flex; flex-wrap: wrap;
  margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.ficha__datos > div { flex: 1 1 11rem; padding: .75rem 1rem; border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); margin: 0 -1px -1px 0; }
.ficha__datos dt { font-size: .82rem; color: var(--texto-suave); }
.ficha__datos dd { margin: .1rem 0 0; font-weight: 550; }
.ficha__seccion { margin-top: 2rem; }
.ficha__seccion > h2 { margin-bottom: .7rem; }
.ficha__descripcion { white-space: pre-line; margin: 0; max-width: 70ch; }
.ficha__enlaces { list-style: none; margin: 0; padding: 0; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.ficha__enlaces li + li { border-top: 1px solid var(--borde); }
.ficha__enlaces a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: center;
  padding: .75rem 1rem; color: var(--texto); text-decoration: none; transition: background-color .15s ease-out;
}
.ficha__enlaces a:hover { background: var(--superficie-2); }
.ficha__enlaces a:hover .ficha__enlace-nombre { color: var(--enlace-hover); text-decoration: underline; }
.ficha__enlace-nombre { font-weight: 600; overflow-wrap: anywhere; color: var(--enlace); text-underline-offset: 2px; }
.ficha__enlace-dominio { grid-row: 2; font-size: .85rem; color: var(--texto-suave); }
.ficha__enlace-abrir { grid-row: 1 / span 2; grid-column: 2; font-size: .9rem; font-weight: 600; color: var(--enlace); white-space: nowrap; }
.terminadas { margin-top: 1rem; }
.terminadas summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; padding: .3rem 0; }
.terminadas .asignaciones { margin-top: .5rem; opacity: .85; }

/* --- Ayuda: preguntas frecuentes y sugerencias --- */

.segmentos--inicio { margin-left: 0; margin-top: .5rem; }
.contador--nav-suave { min-width: 1.35rem; height: 1.35rem; font-size: .75rem; margin-left: .15rem; vertical-align: 1px; }
.contador--nav { min-width: 1.35rem; height: 1.35rem; font-size: .75rem; margin-left: .15rem; vertical-align: 1px;
  background: var(--acento); color: #fff; }

.faq { margin-top: 2rem; }
.faq > h2 { margin-bottom: .6rem; }
.faq__item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.faq__item + .faq__item { margin-top: .5rem; }
.faq__item summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; list-style: none;
  display: flex; align-items: baseline; gap: .6rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "›"; flex: none; width: .8rem; color: var(--texto-suave); font-size: 1.2rem;
  line-height: 1; transition: transform .15s; }
.faq__item[open] summary::before { transform: rotate(90deg); color: var(--marca); }
.faq__item:has(summary:focus-visible) { outline: 3px solid var(--acento); outline-offset: 2px; }
.faq__item summary:focus-visible { outline: none; }
.faq__item summary:hover { color: var(--marca); }
.faq__item[open] summary { color: var(--marca); }
.faq__respuesta { padding: 0 1rem .9rem 2.4rem; color: var(--texto); }
.faq__respuesta p { margin: 0; max-width: 68ch; }
.faq__cierre { margin-top: 2.5rem; }
.faq__cierre p { margin: 0; }

.opciones--fila { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.opciones--fila legend { width: 100%; }
.opciones--fila .opcion { margin: 0; padding: .45rem .8rem; align-items: center; }
.opciones--fila .opcion input { margin-top: 0; }
.formulario .opciones--fila + label { margin-top: 1.2rem; }
.formulario .boton--primario.boton--ajustado { align-self: flex-start; }

.sugerencias { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sug { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1rem 1.1rem; }
.sug--nueva { border-color: color-mix(in srgb, var(--acento) 60%, var(--borde)); }
.sug__cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.sug__fecha { color: var(--texto-suave); font-size: .88rem; margin-left: auto; white-space: nowrap; }
.sug__mensaje { margin: .6rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.sug__respuesta { margin-top: .8rem; padding: .6rem .8rem; border-radius: 8px; background: var(--marca-suave); }
.sug__respuesta .sug__mensaje { margin-top: .2rem; }
.sug__respuesta-titulo { margin: 0; font-size: .85rem; font-weight: 600; color: var(--marca); }
.sug__form { margin-top: .4rem; }
.sug__form label { margin-top: .6rem; }
.sug__acciones { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .5rem; }
.sug__acciones .boton--primario { margin-top: 0; }
.sugerencias.bloque--primero { margin-top: 1rem; }

.sug-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 550; }
.sug-estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.sug-estado--nueva { color: var(--texto-suave); }
.sug-estado--en_revision { color: var(--pendiente); }
.sug-estado--resuelta { color: var(--ok); }
.sug-estado--descartada { color: var(--texto-suave); }
.faq__marcas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; max-width: 68ch; }
.faq__marcas .estado-md { margin-right: .35rem; }

/* Enlaces recibidos de MEGA: sumarlos a una asignación existente */
.destino { margin-bottom: 1.25rem; }
.destino__titulo { font-size: 1.1rem; margin: 0 0 .25rem; }
.destino .nota { margin: 0 0 .75rem; }
.destino__fila { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.destino__fila select { flex: 1 1 18rem; min-width: 0; }
.destino__o { margin: .9rem 0 0; font-size: .9rem; color: var(--texto-suave); }
.destino__pestanas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.destino__pestanas li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.destino__detalle { font-size: .88rem; color: var(--texto-suave); }
.destino__estado { margin: .6rem 0 0; font-size: .9rem; color: var(--texto-suave); }
.destino__estado:empty { display: none; }
.destino--listo { border-color: color-mix(in srgb, var(--ok) 45%, var(--borde)); }
.destino--listo .boton { margin-top: .75rem; }

/* --- Carga desde Smartsheet y conflictos --- */
.pasos { margin: .25rem 0 1rem; padding-left: 1.25rem; }
.pasos li { margin: .3rem 0; }
.formulario input[type="file"] { font: inherit; padding: .5rem 0; max-width: 100%; }
.conflictos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.conflicto__asig { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; }
.conflicto__campo { font-size: 1.05rem; margin: .5rem 0 .75rem; }
.conflicto__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.conflicto__opcion { border: 1px solid var(--borde); border-radius: 10px; padding: .75rem .9rem; margin: 0;
  display: flex; flex-direction: column; gap: .35rem; background: var(--superficie-2); }
.conflicto__origen { margin: 0; font-size: .82rem; color: var(--texto-suave); }
.conflicto__valor { margin: 0 0 .4rem; font-weight: 600; overflow-wrap: anywhere; }
.conflicto__opcion .boton { align-self: flex-start; margin-top: auto; }
.conflicto__cuando { margin: .75rem 0 0; font-size: .85rem; }
@media (max-width: 560px) { .conflicto__opciones { grid-template-columns: 1fr; } }
.ficha__fechas { margin-top: .75rem; }
.ficha__comentario { margin-top: .75rem; }
.personas__crear { margin-left: .6rem; font-size: .9rem; white-space: nowrap; }
.zona-pruebas { border-top: 1px dashed var(--borde); padding-top: 1.25rem; margin-top: 3rem; }
.zona-pruebas .nota { margin: 0 0 .6rem; }