@font-face { font-family: Antonio; src: url(/fonts/Antonio-VariableFont_wght.ttf); font-weight: 100 700; font-display: swap; }
@font-face { font-family:"Playfair Display"; src:url(/fonts/PlayfairDisplay-latin.woff2) format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; 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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Playfair Display"; src:url(/fonts/PlayfairDisplay-Italic-latin.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; 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+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --granate:#5B113A; --dorado:#B08A4A; --crema:#FAF4EC; --pergamino:#DCCCBC; --texto:#2B1722; --blanco:#fff; --alerta:#9a3b00; --alerta-fondo:#fff1e0; --ok:#2f6b3a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--crema); color:var(--texto); font:16px/1.55 "Playfair Display", Georgia, "Times New Roman", serif; }
h1, h2, h3 { font-family: Antonio, system-ui, sans-serif; letter-spacing:.03em; margin:0; }
:focus-visible { outline:3px solid var(--dorado); outline-offset:2px; }

/* Cabecera y portada, como en kranumantus.net */
.sitio-cab { background:#f3ede3; border-bottom:1px solid var(--pergamino); padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; position:sticky; top:0; z-index:5; }
.marca { text-decoration:none; color:var(--granate); display:flex; flex-direction:column; line-height:1; }
.marca-n { font:700 1.5rem Antonio, sans-serif; letter-spacing:.08em; }
.marca-s { font:500 .7rem Antonio, sans-serif; letter-spacing:.4em; color:var(--dorado); }
.menu { display:flex; gap:4px; flex:1; overflow-x:auto; }
.menu a { font:500 .95rem Antonio, sans-serif; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--texto); padding:10px 12px; min-height:44px; display:flex; align-items:center; border-bottom:3px solid transparent; }
.menu a[aria-current="page"] { color:var(--granate); border-bottom-color:var(--dorado); }
.sesion { margin:0; font-size:.8rem; color:#5c4753; word-break:break-all; }

.hero { background:#3a0a25; color:#fff; padding:56px 16px 96px; }
.hero-in { max-width:1100px; margin:0 auto; }
.eyebrow { font:500 .8rem Antonio, sans-serif; letter-spacing:.25em; text-transform:uppercase; color:#c8a96a; margin-top:0; margin-bottom:12px; }
.eyebrow.oscuro { color:var(--dorado); }
.hero h1 { font:600 clamp(2.2rem, 7vw, 4.2rem)/1.05 Antonio, sans-serif; letter-spacing:.01em; margin-bottom:16px; }
.hero h1 span { color:#c8a96a; }
.lead { font-size:1.1rem; max-width:640px; margin-top:0; }
.botones { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.boton-oro, .boton-borde { font:500 1rem Antonio, sans-serif; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:14px 26px; border-radius:30px; min-height:48px; display:inline-flex; align-items:center; }
.boton-oro { background:var(--dorado); color:#fff; }
.boton-borde { border:2px solid #fff; color:#fff; }

.cifras { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); background:#fffdf9; border-radius:14px; box-shadow:0 8px 28px rgba(43,23,34,.15); max-width:1100px; margin:-56px 16px 0; position:relative; }
@media (min-width: 1148px) { .cifras { margin-left:auto; margin-right:auto; } }
.cifras > div { padding:20px 12px; text-align:center; border-right:1px solid var(--pergamino); }
.cifras > div:last-child { border-right:none; }
.cifras strong { display:block; font:600 2.6rem/1 Antonio, sans-serif; color:var(--granate); }
.cifras span { font-size:.9rem; color:#5c4753; }

.seccion { max-width:1100px; margin:40px auto 0; padding:0 16px; }
.titulo-seccion { font:600 clamp(1.8rem, 4vw, 2.6rem)/1.1 Antonio, sans-serif; color:var(--granate); margin-bottom:20px; }
.tarjetas { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.modulo { background:#fffdf9; border:1px solid var(--pergamino); border-radius:12px; padding:22px; text-decoration:none; color:var(--texto); display:flex; flex-direction:column; gap:6px; }
a.modulo:hover { border-color:var(--granate); box-shadow:0 6px 18px rgba(43,23,34,.12); }
.modulo .icono { font-size:2rem; }
.modulo h3 { font-size:1.4rem; color:var(--granate); }
.modulo p { margin:0; flex:1; }
.modulo .ver { font:500 .9rem Antonio, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--dorado); margin-top:8px; }
.modulo.pronto { opacity:.65; background:transparent; border-style:dashed; }
.modulo.pronto .ver { color:#7b6772; }

.pagina { padding:16px; }
.migas { margin:0 0 4px; }
.migas a { color:var(--granate); }
.titulo-pagina { font:600 2rem Antonio, sans-serif; color:var(--granate); margin-bottom:12px; }
main { margin:0 auto; }
.mensaje { background:var(--blanco); border:1px solid var(--pergamino); border-radius:8px; padding:12px 16px; }

.filtros, .vistas { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filtros button, .vistas button { min-height:44px; padding:8px 14px; border:1px solid var(--pergamino); background:var(--blanco); color:var(--texto); border-radius:22px; font:inherit; cursor:pointer; }
.filtros button[aria-pressed="true"], .vistas button[aria-pressed="true"] { background:var(--granate); border-color:var(--granate); color:var(--crema); }

.alertas { border:2px solid var(--alerta); background:var(--alerta-fondo); border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.alertas a { color:var(--granate); }
.alertas h2 { font-size:1.1rem; color:var(--alerta); margin-bottom:6px; }
.alertas ul { margin:0; padding-left:20px; }
.alertas button { all:unset; color:var(--granate); text-decoration:underline; cursor:pointer; min-height:32px; }

/* Móvil: columnas apiladas. Escritorio: una columna por estado, con desplazamiento horizontal. */
.tablero { display:flex; flex-direction:column; gap:16px; }
.columna { background:rgba(220,204,188,.35); border:1px solid var(--pergamino); border-radius:8px; padding:8px; }
.columna > h2 { font-size:1rem; text-transform:uppercase; padding:6px 8px; display:flex; justify-content:space-between; align-items:center; }
.columna .contador { background:var(--granate); color:var(--crema); border-radius:12px; padding:0 10px; font:600 .85rem system-ui; }
.columna .vacia { color:#6f5b66; font-size:.9rem; padding:4px 8px 8px; margin:0; }
@media (max-width: 899px) { .columna.sin-datos { display:none; } }
/* Escritorio: todas las columnas a la vez, sin desplazamiento lateral; si no caben pasan a otra fila. */
@media (min-width: 900px) {
  .tablero { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); align-items:start; gap:12px; }
  .columna { min-width:0; }
  .columna.sin-datos { display:block; }
}
/* Pantallas anchas: una sola fila; las columnas vacías se encogen y las que tienen tarjetas se reparten el resto. */
@media (min-width: 1200px) {
  .tablero { display:flex; flex-direction:row; gap:12px; }
  .columna { flex:1 1 170px; min-width:0; }
  .columna.sin-datos { flex:0 0 112px; }
  .columna.sin-datos > h2 { font-size:.8rem; padding:6px 4px; }
  .columna.sin-datos .vacia { display:none; }
}

.tarjeta { all:unset; display:block; box-sizing:border-box; width:100%; background:var(--blanco); border:1px solid var(--pergamino); border-left:5px solid var(--dorado); border-radius:6px; padding:10px 12px; margin-top:8px; cursor:pointer; min-height:44px; }
.tarjeta:hover { border-color:var(--granate); }
.tarjeta:focus-visible { outline:3px solid var(--dorado); outline-offset:2px; }
.tarjeta h3 { font-size:1.05rem; font-weight:600; margin-bottom:2px; }
.tarjeta .sub { font-size:.85rem; color:#5c4753; }
.tarjeta .importe { font-size:.9rem; margin-top:6px; }

.etiquetas { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.etiqueta { font-size:.75rem; border-radius:10px; padding:1px 8px; background:var(--pergamino); color:var(--texto); }
.etiqueta.paga { background:#f3dcd6; }
.etiqueta.cobra { background:#dcebd9; }
.etiqueta.plazo { background:var(--alerta-fondo); color:var(--alerta); border:1px solid var(--alerta); font-weight:700; }
.etiqueta.vencido { background:var(--alerta); color:#fff; }

dialog { width:min(720px, 100%); max-height:100dvh; border:none; border-radius:10px; padding:0; background:var(--crema); color:var(--texto); }
dialog::backdrop { background:rgba(43,23,34,.6); }
@media (max-width: 600px) { dialog { width:100%; height:100dvh; max-height:100dvh; border-radius:0; } }
.ficha-cab { background:var(--granate); color:var(--crema); padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; position:sticky; top:0; }
.ficha-cab h2 { font-size:1.3rem; }
.ficha-cab button { min-width:44px; min-height:44px; font-size:1.3rem; background:none; border:1px solid var(--crema); color:var(--crema); border-radius:6px; cursor:pointer; }
.ficha-cuerpo { padding:16px; }
.ficha-cuerpo h3 { font-size:1.1rem; color:var(--granate); margin:18px 0 8px; }
.ficha-cuerpo dl { display:grid; grid-template-columns:minmax(110px, 30%) 1fr; gap:6px 12px; margin:0; }
.ficha-cuerpo dt { font-weight:600; color:#5c4753; font-size:.9rem; }
.ficha-cuerpo dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.ficha-cuerpo .largo { grid-column:1 / -1; }
.ficha-cuerpo a { color:var(--granate); }
.edicion { background:var(--blanco); border:1px solid var(--pergamino); border-radius:8px; padding:12px; display:grid; gap:12px; }
.edicion label { display:grid; gap:4px; font-weight:600; font-size:.9rem; }
.edicion select, .edicion input, .edicion textarea { font:inherit; padding:10px; min-height:44px; border:1px solid var(--pergamino); border-radius:6px; background:#fff; color:var(--texto); width:100%; }
.edicion textarea { min-height:90px; }
.boton { font:inherit; font-weight:700; min-height:44px; padding:8px 18px; border:none; border-radius:6px; background:var(--granate); color:var(--crema); cursor:pointer; }
.boton[disabled] { opacity:.6; cursor:wait; }
.estado-msg { margin:0; min-height:1.4em; font-weight:600; }
.estado-msg.error { color:var(--alerta); }
.estado-msg.ok { color:var(--ok); }
.historial { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.historial li { background:var(--blanco); border:1px solid var(--pergamino); border-radius:6px; padding:8px 10px; font-size:.9rem; }
.historial .cuando { color:#5c4753; font-size:.8rem; }

/* Etapas y tareas */
.intro { margin:0 0 16px; color:#5c4753; }
.cab-pagina { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; }
.vistas { margin-bottom:12px; }
.controles { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin-bottom:16px; }
.controles select { font:inherit; min-height:44px; padding:8px 10px; border:1px solid var(--pergamino); border-radius:6px; background:#fff; color:var(--texto); max-width:100%; }
.casilla { display:flex; align-items:center; gap:6px; min-height:44px; cursor:pointer; }
.casilla input { width:20px; height:20px; }
.grupo { margin-bottom:20px; }
.grupo > h2 { font-size:1.25rem; color:var(--granate); display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.grupo .contador { background:var(--granate); color:var(--crema); border-radius:12px; padding:0 10px; font:600 .85rem system-ui; }
.grupo .vacia { color:#6f5b66; margin:4px 0; font-size:.9rem; }
.fila-tarea { all:unset; box-sizing:border-box; display:block; width:100%; background:var(--blanco); border:1px solid var(--pergamino); border-left:5px solid var(--dorado); border-radius:6px; padding:10px 12px; margin-top:8px; cursor:pointer; min-height:44px; }
.fila-tarea:hover { border-color:var(--granate); }
.fila-tarea:focus-visible { outline:3px solid var(--dorado); outline-offset:2px; }
.fila-tarea.estado-curso { border-left-color:#2f6b9a; }
.fila-tarea.estado-bloq { border-left-color:var(--alerta); }
.fila-tarea.estado-hecha { border-left-color:var(--ok); opacity:.75; }
.fila-titulo { display:block; font-weight:600; margin-bottom:2px; }
.etiqueta.estado-pend { background:var(--pergamino); }
.etiqueta.estado-curso { background:#dbe8f3; }
.etiqueta.estado-bloq { background:var(--alerta-fondo); color:var(--alerta); border:1px solid var(--alerta); }
.etiqueta.estado-hecha { background:#dcebd9; }
.etiqueta.prio { background:var(--granate); color:var(--crema); }
progress { width:100%; height:12px; accent-color:var(--granate); margin:4px 0; }
.modulo.etapa .orden { font:500 .8rem Antonio, sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--dorado); }
.modulo.etapa.prioritaria { border-color:var(--dorado); box-shadow:0 0 0 2px rgba(176,138,74,.35); }
.edicion .dos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 520px) { .edicion .dos { grid-template-columns:1fr; } }
.historial .texto { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Sesión y cerrar sesión */
.usuario { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
.salir { font:500 .85rem Antonio, sans-serif; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--granate); border:2px solid var(--granate); border-radius:22px; padding:8px 16px; min-height:44px; display:inline-flex; align-items:center; }
.salir:hover { background:var(--granate); color:var(--crema); }
/* Copia de seguridad */
.panel-copia { background:#fffdf9; border:1px solid var(--pergamino); border-radius:12px; padding:20px; margin-bottom:16px; max-width:760px; }
.panel-copia h2 { font-size:1.3rem; color:var(--granate); margin-bottom:8px; }
.panel-copia ol { padding-left:20px; }
.panel-copia code { background:var(--pergamino); border-radius:4px; padding:1px 6px; font-size:.85em; overflow-wrap:anywhere; }
.nota { color:#5c4753; font-size:.9rem; margin:8px 0 0; }

/* Borrar */
.zona-borrar { margin-top:24px; padding-top:8px; border-top:1px dashed var(--pergamino); }
.zona-borrar h3 { margin-top:12px; }
.botones-fila { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px; }
.boton-peligro { font:inherit; font-weight:700; min-height:44px; padding:8px 18px; border-radius:6px; cursor:pointer; background:#fff; color:var(--alerta); border:2px solid var(--alerta); }
.boton-peligro.lleno { background:var(--alerta); color:#fff; }
.boton-peligro[disabled] { opacity:.6; cursor:wait; }

/* Marca de agua: el logo repetido en pequeño, fijo y muy tenue, por detrás de todo el contenido. */
body { position:relative; }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.07; background:url(/logo.webp) center / 120px 120px space; }
main { position:relative; z-index:1; }