:root {
  --fondo: #f6f7f4; --panel: #fff; --texto: #1a2430; --suave: #6a7480;
  --borde: #d8dcd4; --acento: #1f5f5b; --bien: #2e7d6b; --mal: #a85a32;
}
/* Tres estados, no dos: sin eleccion explicita manda el sistema, y con ella
   manda la eleccion — en las DOS direcciones (oscuro sobre sistema claro y al
   reves). Por eso la media query se guarda con :not([data-tema="claro"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --fondo:#131a20; --panel:#1b242c; --texto:#e6e9e3;
    --suave:#8a959d; --borde:#2c3843; --acento:#5aa8a0; --bien:#5fae95; --mal:#d2916a; }
}
:root[data-tema="oscuro"] { --fondo:#131a20; --panel:#1b242c; --texto:#e6e9e3;
  --suave:#8a959d; --borde:#2c3843; --acento:#5aa8a0; --bien:#5fae95; --mal:#d2916a; }
* { box-sizing: border-box; }
/* El atributo `hidden` tiene que ganar SIEMPRE. Sin esto, cualquier regla que
   ponga `display` (`.menu{display:flex}`, `.widgets{display:grid}`) lo anula
   por especificidad y el elemento se queda visible: el menu de usuario estaba
   abierto permanentemente y no se veia hasta probarlo en navegador. */
[hidden] { display: none !important; }
body { margin:0; padding:1.5rem 1rem 4rem; background:var(--fondo); color:var(--texto);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; max-width:60rem; margin-inline:auto; }
h1 { font-size:1.5rem; margin:0 0 .3rem; }
h2 { font-size:1.15rem; margin:0 0 .4rem; }
h3 { font-size:.95rem; margin:1.2rem 0 .4rem; }
p { margin:.3rem 0; }
.suave { color:var(--suave); font-size:.92rem; }
.error { color:var(--mal); font-weight:600; }
.ok { color:var(--bien); font-weight:600; }
.pestanas { display:flex; gap:.5rem; margin:1.2rem 0; flex-wrap:wrap; }
.pestanas button { border:1px solid var(--borde); background:var(--panel); color:var(--texto);
  padding:.45rem .9rem; border-radius:6px; cursor:pointer; font-size:.92rem; }
.pestanas button.activa { background:var(--acento); border-color:var(--acento); color:#fff; }
.tarjeta { background:var(--panel); border:1px solid var(--borde); border-radius:8px;
  padding:1.1rem; margin-bottom:1rem; }
.fichero { display:inline-block; margin-top:.8rem; }
.fichero input { display:block; font-size:.9rem; }
table { border-collapse:collapse; width:100%; font-size:.9rem; margin-top:.4rem; }
th,td { padding:.35rem .6rem; text-align:left; border-bottom:1px solid var(--borde); }
th { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--suave); font-weight:600; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
.pos { color:var(--bien); } .neg { color:var(--mal); }
ul { padding-left:1.1rem; margin:.3rem 0; }
li { margin:.3rem 0; font-size:.93rem; }
.etiqueta { display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  border:1px solid currentColor; border-radius:3px; padding:.05rem .35rem; margin-right:.4rem; }
.etiqueta.mutuo { color:var(--mal); } .etiqueta.asim { color:var(--acento); }
.aviso { border-left:3px solid var(--mal); padding:.5rem .8rem; background:var(--panel); margin:.6rem 0; }
button.accion { background:var(--acento); color:#fff; border:0; border-radius:6px;
  padding:.5rem 1rem; cursor:pointer; font-size:.92rem; margin-top:.8rem; }
button.accion[disabled] { opacity:.5; cursor:default; }
pre.texto { white-space:pre-wrap; font:inherit; background:var(--panel);
  border:1px solid var(--borde); border-radius:6px; padding:1rem; margin-top:.6rem; }
.scroll { overflow-x:auto; }

/* --- cabecera con zona de cuenta --- */
.cabecera { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.cabecera > div:first-child { flex:1 1 20rem; }
.zona-cuenta { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; font-size:.88rem; }
.quien { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
button.enlace { background:none; border:0; color:var(--acento); cursor:pointer;
  font-size:.88rem; padding:0; text-decoration:underline; text-underline-offset:2px; }
button.enlace.peligro { color:var(--mal); }
button.secundario { background:var(--panel); color:var(--texto); border:1px solid var(--borde);
  border-radius:6px; padding:.4rem .8rem; cursor:pointer; font-size:.88rem; }
.etiqueta.admin { color:var(--acento); }
.etiqueta.pendiente { color:var(--mal); }
.etiqueta.inactivo { color:var(--suave); }

/* --- dialogos --- */
dialog { border:1px solid var(--borde); border-radius:10px; background:var(--panel); color:var(--texto);
  padding:1.4rem; max-width:24rem; width:calc(100% - 2rem); }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog h2 { margin-top:0; }
dialog label { display:block; font-size:.85rem; font-weight:600; margin:.7rem 0 .2rem; }
dialog input, .formulario input, .formulario select, #form input {
  width:100%; padding:.45rem .6rem; border:1px solid var(--borde); border-radius:6px;
  background:var(--fondo); color:var(--texto); font:inherit; font-size:.92rem; }
.acciones-dlg { display:flex; align-items:center; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.acciones-dlg .hueco { flex:1; }

/* --- formularios y tablas de gestion --- */
.formulario { display:grid; grid-template-columns:1fr 1fr auto; gap:.6rem; margin-top:.6rem; }
.acciones-fila { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.estrecha { max-width:26rem; margin-inline:auto; }
#form label { display:block; font-size:.85rem; font-weight:600; margin:.7rem 0 .2rem; }

/* Foco siempre visible: sin esto, quien navega con teclado no sabe dónde está. */
:is(button, input, select, a):focus-visible { outline:2px solid var(--acento); outline-offset:2px; }

@media (max-width:560px) {
  .formulario { grid-template-columns:1fr; }
  .cabecera { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* --- puerta de acceso --- */
.puerta { display:flex; align-items:center; justify-content:center; min-height:70vh; padding:1rem 0; }
.acceso { max-width:23rem; width:100%; }
.acceso h1 { font-size:1.35rem; margin:0 0 .2rem; }
.acceso label { display:block; font-size:.85rem; font-weight:600; margin:.8rem 0 .2rem; }
.acceso hr { border:0; border-top:1px solid var(--borde); margin:1.2rem 0 1rem; }
.acceso .acciones { margin-top:1rem; }
.acceso .accion, .acceso .secundario { width:100%; }

/* --- cabecera --- */
.marca { background:none; border:0; color:var(--texto); font-size:1.05rem; font-weight:700;
  cursor:pointer; padding:0; }
button.icono { background:var(--panel); border:1px solid var(--borde); color:var(--texto);
  width:2.1rem; height:2.1rem; border-radius:6px; cursor:pointer; font-size:1rem; line-height:1; }

/* --- menú de usuario --- */
.menu-usuario { position:relative; }
#btn-usuario { display:inline-flex; align-items:center; gap:.45rem; background:var(--panel);
  border:1px solid var(--borde); color:var(--texto); border-radius:6px; padding:.4rem .7rem;
  cursor:pointer; font-size:.9rem; font-family:inherit; }
#btn-usuario .chevron { color:var(--suave); font-size:.7rem; }
.menu { position:absolute; right:0; top:calc(100% + .35rem); min-width:14rem; z-index:20;
  background:var(--panel); border:1px solid var(--borde); border-radius:8px; padding:.3rem;
  box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; }
.menu-cabeza { padding:.5rem .6rem; border-bottom:1px solid var(--borde); margin-bottom:.3rem;
  font-size:.88rem; font-weight:600; }
.menu-cabeza .suave { font-weight:400; }
.menu button { background:none; border:0; color:var(--texto); text-align:left; cursor:pointer;
  padding:.45rem .6rem; border-radius:5px; font-size:.9rem; font-family:inherit; }
.menu button:hover, .menu button:focus-visible { background:var(--fondo); }
.menu button.peligro { color:var(--mal); }

/* --- panel de widgets --- */
.titulo-vista { font-size:1.1rem; margin:1.4rem 0 .8rem; }
.widgets { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; }
.widget { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; text-align:left;
  background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:1.1rem;
  cursor:pointer; color:var(--texto); font-family:inherit; }
.widget:hover, .widget:focus-visible { border-color:var(--acento); }
.widget-icono { font-size:1.5rem; color:var(--acento); line-height:1; }
.widget-nombre { font-weight:700; font-size:1rem; }
.widget-resumen { font-size:.88rem; color:var(--suave); }
/* Atenuada, no invisible: que se vea que existe y por qué no puedes usarla. */
.widget.atenuado { opacity:.55; }
.widget.atenuado:hover { border-color:var(--borde); }
.widget-bloqueo { margin-top:.3rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--mal); border:1px solid currentColor; border-radius:3px; padding:.08rem .4rem; }

.volver { background:none; border:0; color:var(--acento); cursor:pointer; font-size:.9rem;
  padding:0; margin:1.2rem 0 .6rem; font-family:inherit; }

/* --- rejillas guardadas --- */
.lista-rejillas { list-style:none; padding:0; margin:0; }
.lista-rejillas li { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; padding:.6rem 0; border-bottom:1px solid var(--borde); }
.lista-rejillas li:last-child { border-bottom:0; }
.formulario-guardar { display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; }
.formulario-guardar input { flex:1 1 14rem; padding:.45rem .6rem; border:1px solid var(--borde);
  border-radius:6px; background:var(--fondo); color:var(--texto); font:inherit; font-size:.92rem; }
.formulario-guardar .accion { margin-top:0; }