/* ══════════ SISTEMA VISUAL (29/09/2026) ══════════
   La fuente de verdad son los tableros «Sistema · …» del lienzo de Design.
   Va la ÚLTIMA: sus tokens redefinen los de 01-base.css (--sello pasa a ser el
   acento común, terracota) y sus piezas (.sis-*) no compiten con las viejas.

   Lo que cada área puede poner de suyo: su color (--area / --area-suave, por
   body[data-area]), su icono, el motivo de su banda y UNA pieza propia. El
   resto —neutros, estados, notas, radios, letra de las cifras— es común. */

:root{
  /* Neutros */
  --fondo:#F2F4F1; --sup:#FFFFFF; --sup2:#F7F8F5; --lateral:#E7EAE4;
  --borde-s:#DDE2DC; --borde:#C9CFC9; --tx:#1B2A41; --tx2:#4A5A72; --tx3:#5F6C66; --noche:#131C2A;
  /* El acento común: el +, hoy, la marca del menú, los avisos sin leer, el foco */
  --acento:#B04E2E; --acento-suave:#F6E4DC;
  /* Estados (los errores y los negativos tienen su rojo, aparte del acento) */
  --ok:#3B7A2E; --ok-suave:#E6F1DF; --aviso:#D8973C; --aviso-tx:#9A6A22; --aviso-suave:#FBF0DC;
  --error:#A8322D; --error-suave:#F9E5E2; --info:#4A5A72; --info-suave:#EAEEF3; --neutro-suave:#EEF0EC;
  /* Escala de nota */
  --nota-9:#3B7A2E; --nota-8:#6B9A34; --nota-7:#9C6B12; --nota-6:#BC5A22; --nota-0:#A8322D;
  /* Formas */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
  --sombra-1:0 1px 3px rgba(27,42,65,.12); --sombra-2:0 6px 18px rgba(27,42,65,.14); --sombra-3:0 12px 32px rgba(27,42,65,.18);
  --h-s:32px; --h-m:40px; --h-l:48px;
  /* Letra */
  --f-tit:'Bricolage Grotesque',system-ui,sans-serif; --f-txt:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace; --f-firma:'Fraunces',Georgia,serif;
  /* Los nombres de siempre, apuntando a los nuevos */
  --papel:var(--fondo); --tinta:var(--tx); --tinta-suave:var(--tx2); --sello:var(--acento);
  --visado:#2E6E4E; --linea:var(--borde); --blanco:var(--sup); --crema:var(--sup2); --ambar:var(--aviso);
  /* El área activa (lo pone pintarCabecera en body[data-area]) */
  --area:var(--tx); --area-suave:var(--neutro-suave);
}
@media (max-width:899px){ :root{ --h-s:36px; --h-m:44px } }

body[data-area="agenda"]{ --area:#1B2A41; --area-suave:#FEEEE2 }
body[data-area="comida"]{ --area:#AE2B21; --area-suave:#FEECDF }
body[data-area="finanzas"]{ --area:#2F6FED; --area-suave:#E8EFFD }
body[data-area="salud"]{ --area:#1F6F73; --area-suave:#DDEFEF }
body[data-area="viajes"]{ --area:#2E6E4E; --area-suave:#E3F0E8 }
body[data-area="musica"]{ --area:#C42A63; --area-suave:#F8E6EE }
body[data-area="teatro"]{ --area:#6F1E2D; --area-suave:#F6E6E8 }
body[data-area="cine"]{ --area:#3A2E4A; --area-suave:#ECE9F1 }
body[data-area="escape"]{ --area:#C2410C; --area-suave:#FEE9DB }
body[data-area="juegos"]{ --area:#995A24; --area-suave:#F4EADF }
body[data-area="videojuegos"]{ --area:#5B4BA8; --area-suave:#ECE8F5 }
body[data-area="libros"]{ --area:#294753; --area-suave:#E4ECEE }
/* Una banda puede pintarse fuera de su área (la Agenda enseña otras): el
   data-area de la propia banda manda. */
.sis-banda[data-area="agenda"]{ --area:#1B2A41; --area-suave:#FEEEE2 }
.sis-banda[data-area="comida"]{ --area:#AE2B21; --area-suave:#FEECDF }
.sis-banda[data-area="finanzas"]{ --area:#2F6FED; --area-suave:#E8EFFD }
.sis-banda[data-area="salud"]{ --area:#1F6F73; --area-suave:#DDEFEF }
.sis-banda[data-area="viajes"]{ --area:#2E6E4E; --area-suave:#E3F0E8 }
.sis-banda[data-area="musica"]{ --area:#C42A63; --area-suave:#F8E6EE }
.sis-banda[data-area="teatro"]{ --area:#6F1E2D; --area-suave:#F6E6E8 }
.sis-banda[data-area="cine"]{ --area:#3A2E4A; --area-suave:#ECE9F1 }
.sis-banda[data-area="escape"]{ --area:#C2410C; --area-suave:#FEE9DB }
.sis-banda[data-area="juegos"]{ --area:#995A24; --area-suave:#F4EADF }
.sis-banda[data-area="videojuegos"]{ --area:#5B4BA8; --area-suave:#ECE8F5 }
.sis-banda[data-area="libros"]{ --area:#294753; --area-suave:#E4ECEE }

/* ── Base ── (el «font:inherit» de los controles va en 01-base.css, al
   principio, para que cualquier regla de área siga pudiendo cambiarlo) */
body{ background:var(--fondo) }
:focus-visible{ outline-color:var(--acento) }
/* El nombre del área en el móvil: sin manuscrita, en la letra de los títulos. */
.sec-nombre{ font-family:var(--f-tit); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; color:var(--tx); opacity:1; text-align:left }

/* ── Rótulo ── */
.sis-rotulo{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); white-space:nowrap }

/* ── Cifra ── */
.sis-cifra{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sis-cifra-v{ display:flex; align-items:baseline; gap:5px }
.sis-cifra-v b{ font-family:var(--f-tit); font-weight:800; font-size:24px; line-height:1.05; color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap }
.sis-cifra-v small{ font-size:13px; font-weight:600; color:var(--tx2) }
.sis-cambio{ font-family:var(--f-mono); font-size:11px; font-weight:600 }
.sis-cambio.t-ok{ color:var(--ok) } .sis-cambio.t-error{ color:var(--error) } .sis-cambio.t-neutro{ color:var(--tx2) }

/* ── La banda del área ── */
.sis-banda{
  display:flex; align-items:center; min-height:72px; box-sizing:border-box; margin:0 0 14px;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); overflow:hidden;
}
.sis-ico{ flex-shrink:0; width:44px; height:44px; margin:0 16px 0 14px; border-radius:var(--r-m); background:var(--area-suave); display:flex; align-items:center; justify-content:center }
.sis-ico img{ width:30px; height:30px; object-fit:contain }
.sis-banda-cifras{ flex:1; min-width:0; display:flex; align-items:center; gap:20px; overflow:hidden; padding:10px 0 }
.sis-banda-cifras > .sis-cifra + .sis-cifra{ border-left:1px solid var(--borde-s); padding-left:20px }
.sis-banda-cifras > .sis-cifra:first-child .sis-cifra-v b{ color:var(--area) }
.sis-motivo{ flex-shrink:0; width:132px; align-self:stretch; position:relative; overflow:hidden; border-left:1px solid var(--borde-s); display:flex; align-items:center; justify-content:center; gap:4px; color:var(--area); background:var(--area-suave) }
.sis-motivo .m-mono{ font-family:var(--f-mono); font-size:9px; letter-spacing:.3em }
.m-comida{ flex-direction:column; gap:3px }
.m-comida .m-firma{ font-family:var(--f-firma); font-style:italic; font-weight:600; font-size:15px }
.m-comida .m-filetes{ width:84px; height:3px; border-top:1px solid currentColor; border-bottom:1px solid currentColor }
.m-viajes{ flex-direction:column; align-items:flex-start; padding-left:18px; border-left:2px dashed var(--area) }
.m-viajes b{ font-family:var(--f-tit); font-weight:800; font-size:17px; color:var(--tx) }
.m-musica{ background:var(--noche) }
.m-musica .m-ticket{ padding:6px 12px; border:1.5px dashed #F8E6EE; border-radius:6px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:#F8E6EE }
.m-teatro{ background:var(--area) }
.m-teatro .m-marco{ width:96px; height:calc(100% - 22px); border:1px solid #C9A24A; border-radius:3px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:#C9A24A }
.m-cine{ background:var(--noche) }
.m-cine::before, .m-cine::after{ content:""; position:absolute; left:0; right:0; height:6px; opacity:.5; background:repeating-linear-gradient(90deg, #F2F4F1 0 7px, transparent 7px 14px) }
.m-cine::before{ top:6px } .m-cine::after{ bottom:6px }
.m-cine .m-oro{ color:#C9A24A; letter-spacing:.2em; font-size:10px }
.m-escape .m-cinta{ position:absolute; left:-20px; right:-20px; top:calc(50% - 8px); height:16px; transform:rotate(-8deg); opacity:.85; background:repeating-linear-gradient(-45deg, var(--area) 0 10px, #F7C99E 10px 20px) }
.m-juegos{ align-items:flex-end; padding-bottom:12px }
.m-juegos .m-caja{ width:18px; border-radius:2px; position:relative; z-index:1 }
.m-juegos .a{ height:30px; background:#6F7F5B } .m-juegos .b{ width:22px; height:38px; background:var(--area) } .m-juegos .c{ width:16px; height:24px; background:var(--tx2) }
.m-juegos .m-estante{ position:absolute; left:0; right:0; bottom:6px; height:7px; background:repeating-linear-gradient(0deg, #C28A55 0 3px, #B77C47 3px 7px) }
.m-videojuegos{ display:grid; grid-template-columns:repeat(2, 1fr); place-items:center; padding:10px 30px; font-family:var(--f-tit); font-weight:800; font-size:18px }
.m-libros{ align-items:flex-end; gap:3px; padding-bottom:10px }
.m-libros .m-lomo{ border-radius:2px 2px 0 0 }
.m-libros .a{ width:14px; height:44px; background:var(--area) } .m-libros .b{ width:10px; height:38px; background:#8FA9B1 } .m-libros .c{ width:16px; height:50px; background:var(--tx2) }
.m-libros .d{ width:12px; height:40px; background:#C9A24A } .m-libros .e{ width:14px; height:46px; background:var(--area) }
.m-agenda{ display:grid; grid-template-columns:repeat(3, 16px); gap:6px; place-content:center; background:var(--sup) }
.m-agenda span{ width:16px; height:16px; border-radius:4px }
.m-agenda span:nth-child(1){ background:#F3E6EF } .m-agenda span:nth-child(2){ background:#FEEDE1 } .m-agenda span:nth-child(3){ background:#EAF2FB }
.m-agenda span:nth-child(4){ background:#E7F1E8 } .m-agenda span:nth-child(5){ background:#FDEBDD } .m-agenda span:nth-child(6){ background:#FFF3D6 }
.m-finanzas{ align-items:flex-end; gap:5px; padding-bottom:14px; background:var(--sup2) }
.m-finanzas span{ width:8px; border-radius:2px; background:#C9D6F5 } .m-finanzas span.ult{ background:var(--area) }
@media (max-width:899px){
  .sis-banda{ min-height:56px; border-radius:var(--r-l) }
  .sis-ico{ width:38px; height:38px; margin:0 12px 0 8px } .sis-ico img{ width:24px; height:24px }
  .sis-banda-cifras{ gap:12px } .sis-banda-cifras > .sis-cifra + .sis-cifra{ padding-left:12px }
  .sis-banda-cifras > .sis-cifra:nth-child(n+4){ display:none }
  .sis-cifra-v b{ font-size:20px }
  .sis-motivo{ display:none }
}

/* ── Nota: aro, chapa y externa ── */
.sis-nota{
  width:36px; height:36px; flex-shrink:0; box-sizing:border-box; border-radius:50%; border:3px solid var(--nt, var(--borde));
  background:var(--sup); display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-tit); font-weight:800; font-size:13px; color:var(--tx); font-variant-numeric:tabular-nums;
}
.sis-nota.peq{ width:28px; height:28px; font-size:10.5px; border-width:2.5px }
.sis-chapa{ height:22px; padding:0 8px; border-radius:var(--r-pill); background:var(--nt, var(--tx3)); color:#FFF; display:inline-flex; align-items:center; font-family:var(--f-tit); font-weight:800; font-size:12px }
.n9{ --nt:var(--nota-9) } .n8{ --nt:var(--nota-8) } .n7{ --nt:var(--nota-7) } .n6{ --nt:var(--nota-6) } .n0{ --nt:var(--nota-0) } .nx{ --nt:var(--borde) }

/* ── Etiqueta ── */
.sis-etq{
  height:20px; padding:0 7px; box-sizing:border-box; border-radius:var(--r-s); border:1px solid var(--eb, transparent);
  background:var(--ef); color:var(--et); display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.sis-etq.t-area{ --et:var(--area); --ef:var(--area-suave) }
.sis-etq.t-ok{ --et:var(--ok); --ef:var(--ok-suave) }
.sis-etq.t-aviso{ --et:var(--aviso-tx); --ef:var(--aviso-suave) }
.sis-etq.t-error{ --et:var(--error); --ef:var(--error-suave) }
.sis-etq.t-info{ --et:var(--info); --ef:var(--info-suave) }
.sis-etq.t-neutro{ --et:var(--tx2); --ef:var(--neutro-suave) }
.sis-etq.contorno{ --eb:var(--et); background:transparent }

/* ── Pestañas: siempre subrayadas, la activa con 3 px del color del área ── */
.sis-pestanas{ display:flex; gap:26px; border-bottom:1px solid var(--borde-s); margin:0 0 12px; overflow-x:auto; scrollbar-width:none }
.sis-pestanas::-webkit-scrollbar{ display:none }
.sis-pestanas > button{
  flex:0 0 auto; height:44px; padding:0; margin:0 0 -1px; border:0; border-bottom:3px solid transparent; border-radius:0;
  background:none; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center;
  font-family:var(--f-txt); font-size:14px; font-weight:600; color:var(--tx2); letter-spacing:0; text-transform:none;
}
.sis-pestanas > button:hover{ color:var(--tx) }
.sis-pestanas > button.on, .sis-pestanas > button[aria-selected="true"]{ color:var(--tx); border-bottom-color:var(--area) }
.sis-pestanas .n{ margin-left:6px; font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--tx3) }
@media (max-width:899px){ .sis-pestanas{ gap:18px } }

/* ── Conmutador (periodo o unidad) ── */
.sis-conmutador{ display:inline-flex; gap:2px; padding:2px; border:1.5px solid var(--borde); border-radius:var(--r-pill); background:var(--sup) }
.sis-conmutador > button{ height:28px; padding:0 12px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--tx); cursor:pointer; font-family:var(--f-txt); font-weight:600; font-size:13px; white-space:nowrap }
.sis-conmutador > button.on, .sis-conmutador > button[aria-pressed="true"]{ background:var(--tx); color:#FFF }

/* ── Barra de filtros: buscar · ¿Quién? · filtros de la sección · orden ── */
.sis-filtros{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px }
.sis-buscar{
  flex:1 1 220px; min-width:180px; max-width:360px; height:var(--h-m); box-sizing:border-box; display:flex; align-items:center; gap:8px;
  padding:0 12px; border-radius:var(--r-m); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx3);
}
.sis-buscar:focus-within{ border-color:var(--tx) }
.sis-buscar input{ flex:1; min-width:0; border:0; outline:none; background:transparent; padding:0; font-size:14px; color:var(--tx) }
.sis-chip, .sis-chip-menu{
  height:var(--h-s); box-sizing:border-box; padding:0 12px; border-radius:var(--r-pill); border:1.5px solid var(--borde);
  background:var(--sup); color:var(--tx); cursor:pointer; font-family:var(--f-txt); font-size:13px; font-weight:400; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.sis-chip.on, .sis-chip[aria-pressed="true"]{ background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600 }
.sis-chip-menu{
  appearance:none; -webkit-appearance:none; padding-right:28px;
  background:var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5A72' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
}
.sis-chip-menu.on{ background-color:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") }
.sis-chip-menu option{ color:var(--tx); background:var(--sup); font-weight:400 }
.sis-filtros .sis-orden{ margin-left:auto }

/* El filtro de personas de siempre (.fp), con la forma de los chips del
   sistema en TODAS las áreas: «Todos» activo va igual que cualquier activo. */
.fp{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px }
.fp .fp-rotulo{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin-right:2px }
.fp .fp-chip, .tea .fp-chip, .rest-tema .fp-chip, .rest-hoja .fp-chip, .sis-filtros .fp-chip{
  height:var(--h-s); min-height:0; box-sizing:border-box; padding:0 12px; border-radius:var(--r-pill); border:1.5px solid var(--borde); border-style:solid;
  background:var(--sup); color:var(--tx); font-family:var(--f-txt); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; cursor:pointer;
}
.fp .fp-chip.on, .fp .fp-chip.todos.on, .tea .fp-chip.on,
.rest-tema .fp-chip.on, .rest-tema .fp-chip.todos.on, .rest-hoja .fp-chip.on, .sis-filtros .fp-chip.on{
  background:var(--tx); border-color:var(--tx); color:#FFF; font-weight:600;
}
.sis-filtros .fp{ margin:0 }

/* ── Caja ── */
.sis-caja{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0; box-sizing:border-box }
.sis-caja-tit{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px }
.sis-caja-tit .sis-rotulo{ color:var(--tx2) }

/* ── Ranking (barras horizontales) ── */
.sis-ranking{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; counter-reset:rk }
.sis-ranking li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(48px,90px) auto; align-items:center; gap:10px; font-size:14px }
.sis-ranking.con-pos li{ grid-template-columns:20px minmax(0,1fr) minmax(48px,90px) auto; counter-increment:rk }
.sis-ranking.con-pos li::before{ content:counter(rk); font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.sis-ranking .nom{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sis-ranking .pista{ height:8px; border-radius:4px; background:var(--neutro-suave); overflow:hidden; display:block }
.sis-ranking .pista i{ display:block; height:100%; border-radius:4px; background:var(--area) }
.sis-ranking b{ font-family:var(--f-mono); font-size:12px; font-weight:600; text-align:right; min-width:24px }

/* ── Vacío y avisos ── */
.sis-vacio{ display:flex; align-items:center; gap:14px; padding:16px; border:1.5px dashed var(--borde); border-radius:var(--r-l); background:transparent }
.sis-vacio .sis-ico{ margin:0 }
.sis-vacio > div{ flex:1; display:flex; flex-direction:column; gap:2px }
.sis-vacio b{ font-size:14px; font-weight:600 }
.sis-vacio span:not(.sis-ico){ font-size:12.5px; color:var(--tx2) }
.sis-aviso{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-m); font-size:13px; background:var(--info-suave); color:var(--info) }
.sis-aviso.ok{ background:var(--ok-suave); color:var(--ok) } .sis-aviso.aviso{ background:var(--aviso-suave); color:var(--aviso-tx) } .sis-aviso.error{ background:var(--error-suave); color:var(--error) }

/* ── Botones ── */
.sis-btn{
  height:var(--h-m); padding:0 14px; box-sizing:border-box; border-radius:var(--r-m); border:1.5px solid var(--tx);
  background:var(--sup); color:var(--tx); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-txt); font-weight:600; font-size:14px; white-space:nowrap; text-decoration:none; letter-spacing:0; text-transform:none;
}
.sis-btn.principal{ background:var(--acento); border-color:var(--acento); color:#FFF }
.sis-btn.suave{ border-color:var(--borde) }
.sis-btn.enlace{ border-color:transparent; background:none; padding:0 4px; text-decoration:underline; text-underline-offset:3px }
.sis-btn.peligro{ border-color:var(--error); color:var(--error) }
.sis-btn.s{ height:var(--h-s); padding:0 12px; font-size:13px } .sis-btn.l{ height:var(--h-l); font-size:15px }
.sis-btn:disabled{ opacity:.55; cursor:default }
.sis-btn-icono{ width:var(--h-m); height:var(--h-m); padding:0; flex-shrink:0; border-radius:var(--r-m); border:1.5px solid var(--borde); background:var(--sup); color:var(--tx); display:inline-flex; align-items:center; justify-content:center; cursor:pointer }

/* ── Acciones de un formulario: Cancelar (secundario) a la izquierda de Guardar ── */
.sis-acciones{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap }

/* ── Rejillas de escritorio (patrones comunes) ── */
.sis-dos{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start }
/* Desde 900 px ya hay dos columnas: entre 900 y 1099 la derecha es más
   estrecha (el contenido mide ~780 px a 900 y la izquierda se quedaría en 434). */
@media (min-width:900px){ .sis-dos{ grid-template-columns:minmax(0,1fr) 280px } }
@media (min-width:1100px){ .sis-dos{ grid-template-columns:minmax(0,1fr) 330px } }
.sis-col{ display:flex; flex-direction:column; gap:14px; min-width:0 }

/* ── El lienzo: el mismo margen en todas las áreas ──
   En móvil, #reactMain no tenía padding (las áreas de React tocaban los
   bordes) y #main llevaba 18 px: ahora 16 en las dos. En escritorio, sin el
   tope de 1360 px: en una pantalla ancha sobraba un tercio a la derecha. */
@media (max-width:899px){
  main, #reactMain{ padding-left:16px; padding-right:16px; box-sizing:border-box; max-width:none }
}
@media (min-width:900px){
  main, #reactMain{ max-width:none }
}

/* ── Los formularios de alta (form.alta) con la forma común ──
   Eran una caja de borde discontinuo con botones en mayúsculas mono, todos en
   tinta (Cancelar se veía igual que Guardar). Ahora: caja común, campos de
   40 px con foco en el acento y Guardar como botón principal. Solo se toca el
   submit: los chips y botones propios de cada formulario siguen con lo suyo. */
form.alta{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:16px }
form.alta strong{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--tx2) }
form.alta label{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--tx2) }
form.alta input:not([type="checkbox"]):not([type="radio"]), form.alta select, form.alta textarea{
  min-height:var(--h-m); box-sizing:border-box; border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
}
form.alta input:focus, form.alta select:focus, form.alta textarea:focus{ outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave) }
form.alta button{ font-family:var(--f-txt); letter-spacing:0; text-transform:none }
form.alta button[type="submit"]{
  min-height:var(--h-m); padding:0 16px; border:1.5px solid var(--acento); border-radius:var(--r-m);
  background:var(--acento); color:#FFF; font-weight:600; font-size:14px;
}
/* Una pieza .sis-btn dentro de un form.alta conserva su forma. */
form.alta .sis-btn{ min-height:0; height:var(--h-m); padding:0 14px; border-radius:var(--r-m); border:1.5px solid var(--tx); background:var(--sup); color:var(--tx); font-weight:600; font-size:14px; width:auto }
form.alta .sis-btn.principal{ background:var(--acento); border-color:var(--acento); color:#FFF }
form.alta .sis-btn.suave{ border-color:var(--borde) }
form.alta .sis-btn.enlace{ border-color:transparent; background:none; padding:0 4px }
form.alta .sis-btn.peligro{ border-color:var(--error); color:var(--error) }
form.alta .sis-btn.s{ height:var(--h-s); font-size:13px }

/* ── Campo común (etiqueta + control), para formularios nuevos ── */
.sis-campo{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.sis-campo > .sis-rotulo, .sis-campo > label{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.sis-campo input:not([type="checkbox"]):not([type="radio"]), .sis-campo select, .sis-campo textarea{
  min-height:var(--h-m); box-sizing:border-box; padding:8px 12px; border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx); width:100%;
}
.sis-campo input:focus, .sis-campo select:focus, .sis-campo textarea:focus{ outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-suave) }

/* ── Cuenta y hogar (edición hogares: la bienvenida y «Mi cuenta y mi hogar»,
 *    public/js/cuenta.js). En casa no hay ningún elemento con estas clases. ── */
.login-caja.cuenta-ancha{ max-width:560px }
.login-caja input[type="checkbox"], .login-caja input[type="radio"]{ width:auto; padding:0; margin:0 }
.cuenta-tit{ font-family:var(--f-tit); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; margin:0 0 8px }
.cuenta-ayuda{ font-size:13px; line-height:1.45; color:var(--tx2); margin:6px 0 }
.cuenta-error{ font-size:13px; color:var(--error); min-height:1em; margin:8px 0 }
.cuenta-opciones{ display:grid; gap:10px; margin:14px 0 }
.cuenta-opciones .sis-btn{ width:100% }
.cuenta-persona{ display:grid; grid-template-columns:minmax(0,1fr) 104px 40px var(--h-m); gap:6px; align-items:center; margin:6px 0 }
.cuenta-persona .sis-btn-icono{ width:var(--h-m) }
/* En el móvil el nombre necesita el ancho: «con cuenta» baja a su propia línea. */
@media (max-width:520px){
  .cuenta-persona{ grid-template-columns:minmax(0,1fr) 40px var(--h-m); row-gap:2px; margin:10px 0 }
  .cuenta-persona > label.cuenta-check{ grid-column:1 / -1; grid-row:2 }
}
.login-caja .cuenta-persona input[type="color"]{ width:40px; height:38px; padding:2px; border-radius:8px; border:1.5px solid var(--borde); background:var(--sup) }
.cuenta-check{ display:flex; gap:6px; align-items:center; font-size:13px; color:var(--tx2); white-space:nowrap }
.login-caja label.cuenta-check{ margin:0; text-transform:none; letter-spacing:0; font-family:var(--f-txt); font-size:13px }
.login-caja label.cuenta-condiciones{ white-space:normal; align-items:flex-start; margin:14px 0 4px }
.cuenta-codigo-caja{ margin:10px 0 }
.cuenta-codigo{ font-family:var(--f-mono); font-size:18px; letter-spacing:.08em; padding:10px 12px; border:1.5px dashed var(--acento); border-radius:var(--r-m); background:var(--acento-suave); text-align:center; user-select:all; overflow-wrap:anywhere }
.cuenta-lista{ list-style:none; margin:6px 0; padding:0; display:flex; flex-direction:column; gap:6px }
.cuenta-lista li{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px }
#cuentaHogar input, #cuentaHogar select{ width:100%; box-sizing:border-box; padding:8px 10px; border-radius:8px; border:1.5px solid var(--linea); background:var(--sup) }

/* ── Importar del correo (src/importar/ImportarCorreo.tsx, 07/10/2026) ── */
.importar-fondo{ position:fixed; inset:0; z-index:60; background:rgba(20,24,32,.45); overflow:auto; padding:24px 16px }
.importar-hoja{ max-width:720px; margin:0 auto; background:var(--bg, var(--papel)); border-radius:16px; padding:18px 18px 22px; box-shadow:0 12px 40px rgba(0,0,0,.25) }
.importar-cab{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px }
.importar-cab h2{ margin:0; font-size:20px }
.importar-busqueda{ white-space:pre-wrap; word-break:break-word; font-size:12px; background:var(--bg2, #f3f3f0); padding:10px; border-radius:8px; margin:6px 0 }
.importar-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.importar-lista > li{ display:flex; flex-direction:column; gap:4px }
.importar-lista > li.apagada{ opacity:.55 }
.importar-fila{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2) }
.importar-titulo{ font-size:15px; font-weight:600; width:100%; box-sizing:border-box }
.importar-detalle{ margin:4px 0 0; padding-left:18px; font-size:12px; color:var(--tx2) }

/* ── Sugerencias del catálogo común al registrar comida (FormVisita, 08/10/2026) ── */
.rest-catalogo{ margin:6px 0 10px; border:1px solid var(--linea, #ddd); border-radius:10px; padding:8px; background:var(--bg2, #f6f6f3) }
.rest-catalogo-op{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:8px; cursor:pointer; font:inherit; color:inherit }
.rest-catalogo-op:hover, .rest-catalogo-op:focus-visible{ background:var(--bg, #fff) }
.rest-catalogo-op span{ font-size:12px; color:var(--tx2) }
.rest-catalogo-fuente{ font-size:11px; color:var(--tx2); margin:4px 8px 0; text-align:right }