/* ==========================================================================
   PORTAL DE CLIENTES · jesussolaz.es
   --------------------------------------------------------------------------
   Blanco y negro estrictos, como el resto del sitio. Fondo #000, texto #E9E9E9,
   titulares #FFF en peso 800 con tracking negativo. Ni un color: los estados se
   distinguen por contorno y peso, no por tinte.
   ========================================================================== */

[hidden]{display:none!important}

:root{
  --neg:#000;
  --neg-2:#0A0A0A;
  --neg-3:#0F0F0F;
  --neg-4:#141414;
  --linea:rgba(255,255,255,.12);
  --linea-2:rgba(255,255,255,.22);
  --linea-3:rgba(255,255,255,.38);
  --txt:#E9E9E9;
  --txt-2:#A8A8A8;
  --txt-3:#7A7A7A;
  --blanco:#fff;

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --marco:clamp(1.1rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ui);font-size:16px;line-height:1.6;
  background:var(--neg);color:var(--txt);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100dvh;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:2px}

h1,h2,h3,h4{color:var(--blanco);font-weight:800;line-height:1.12;letter-spacing:-.028em}
h1{font-size:clamp(1.8rem,4.2vw,2.7rem)}
h2{font-size:clamp(1.3rem,2.6vw,1.75rem)}
h3{font-size:clamp(1.05rem,2vw,1.25rem)}

/* ---------- Estructura ---------------------------------------------------- */
.marco{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--marco)}

.cab{
  position:sticky;top:0;z-index:60;background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:64px;max-width:1240px;margin-inline:auto;padding-inline:var(--marco)}
.cab__marca{display:flex;align-items:baseline;gap:.6rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.cab__marca span{font-weight:400;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.cab__acc{display:flex;align-items:center;gap:.6rem}
.cab__quien{font-size:.82rem;color:var(--txt-2);white-space:nowrap}

.cuerpo{display:grid;grid-template-columns:264px 1fr;gap:0;min-height:calc(100dvh - 64px)}
.lateral{border-right:1px solid var(--linea);padding:1.6rem 0 3rem;min-width:0}
.principal{padding:2rem var(--marco) 5rem;min-width:0}

/* ---------- Menú lateral -------------------------------------------------- */
.men{padding-inline:1.1rem}
.men__t{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);
  padding:0 .6rem;margin:1.6rem 0 .5rem}
.men__t:first-child{margin-top:0}
.men a{
  display:flex;align-items:center;gap:.7rem;padding:.62rem .6rem;min-width:0;
  font-size:.92rem;color:var(--txt-2);border-left:2px solid transparent;
  overflow-wrap:anywhere;word-break:break-word;
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.men a:hover{color:#fff;background:var(--neg-3)}
.men a.activo{color:#fff;border-left-color:#fff;background:var(--neg-3)}
.men svg{width:16px;height:16px;flex-shrink:0;opacity:.75}
.men a.activo svg{opacity:1}
.men__n{
  flex:0 0 auto;margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:#fff;align-self:center;
}
.men__aviso{
  margin:.5rem .6rem 0;padding:.7rem .8rem;border:1px solid var(--linea-2);
  font-size:.78rem;line-height:1.5;color:var(--txt-2);
}
.men__aviso b{color:#fff;display:block;margin-bottom:.2rem}

/* ---------- Tipografía de página ------------------------------------------ */
.enc{margin-bottom:2rem}
/* Los nombres de proyecto son dominios: sin esto, «charocarracedorealestate.com»
   estira la página entera en el móvil. */
.enc h1{overflow-wrap:anywhere}
.enc__sup{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.55rem}
.enc p{color:var(--txt-2);margin-top:.6rem;max-width:70ch}
.migas{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;font-size:.78rem;
  color:var(--txt-3);margin-bottom:1rem;min-width:0}
.migas a,.migas span{overflow-wrap:anywhere;min-width:0}
.migas a:hover{color:#fff}

/* ---------- Tarjetas ------------------------------------------------------ */
.rej{display:grid;gap:1rem}
.rej-2{grid-template-columns:repeat(2,1fr)}
.rej-3{grid-template-columns:repeat(3,1fr)}
.rej-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.tar{
  display:block;padding:1.3rem;background:var(--neg-2);border:1px solid var(--linea);min-width:0;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
a.tar:hover{border-color:var(--linea-3);background:var(--neg-3);transform:translateY(-2px)}
.tar__sup{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;flex-wrap:wrap}
/* Un dominio o correo largo es una sola palabra: hay que dejar que parta. */
.tar h3{margin-bottom:.35rem;overflow-wrap:anywhere;word-break:break-word}
.tar p{overflow-wrap:anywhere}
.tar p{font-size:.9rem;color:var(--txt-2);line-height:1.6}
.tar__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--linea);
  font-size:.82rem;color:var(--txt-3)}
.tar__n{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--txt-3)}

/* Accesos grandes del proyecto */
.acceso{
  display:flex;flex-direction:column;gap:.8rem;padding:1.5rem;min-height:150px;
  background:var(--neg-2);border:1px solid var(--linea);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.acceso:hover{border-color:#fff;background:var(--neg-3);transform:translateY(-2px)}
.acceso svg{width:22px;height:22px;opacity:.8}
.acceso b{color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.acceso span{font-size:.85rem;color:var(--txt-2);line-height:1.55}
.acceso__n{margin-top:auto;font-size:.78rem;color:var(--txt-3)}

/* ---------- Etiquetas ----------------------------------------------------- */
.eti{
  display:inline-flex;align-items:center;gap:.35em;padding:.22em .6em;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--linea-2);color:var(--txt-2);white-space:nowrap;
}
.eti--fuerte{background:#fff;color:#000;border-color:#fff}
.eti--marco{border-color:#fff;color:#fff}
.eti--tenue{opacity:.62}
/* Lo que no va. Rojo apagado: en la capa negra un rojo vivo canta demasiado. */
.eti--mal{border-color:#7d3535;color:#e8a0a0}

/* ---------- Botones ------------------------------------------------------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:46px;padding:.7em 1.4em;cursor:pointer;text-align:center;
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  background:transparent;color:#fff;border:1px solid var(--linea-2);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.bt:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.bt--princ{background:#fff;color:#000;border-color:#fff;font-weight:700}
.bt--princ:hover{background:#D8D8D8;border-color:#D8D8D8}
.bt--sm{min-height:38px;padding:.45em 1em;font-size:.82rem}
.bt--ancho{width:100%}
.bt[disabled]{opacity:.4;cursor:not-allowed}
.bt svg{width:16px;height:16px}

/* ---------- Formularios --------------------------------------------------- */
.form{display:grid;gap:1.1rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);font-weight:600}
.campo input,.campo textarea,.campo select{
  width:100%;min-height:48px;padding:.7em .9em;font-size:16px;
  background:var(--neg-2);border:1px solid var(--linea-2);color:#fff;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.campo textarea{min-height:auto;resize:vertical;line-height:1.6}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:#fff;background:var(--neg-3);
}
.campo input::placeholder,.campo textarea::placeholder{color:#5A5A5A}
.campo small{font-size:.78rem;color:var(--txt-3);line-height:1.5}
.campo--check{flex-direction:row;align-items:flex-start;gap:.7rem}
.campo--check input{width:auto;min-height:auto;width:1.1rem;height:1.1rem;margin-top:.25rem;accent-color:#fff}
.campo--check label{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400;color:var(--txt);line-height:1.55}

/* ---------- Avisos -------------------------------------------------------- */
.avi{display:flex;gap:.8rem;padding:1rem 1.2rem;margin-bottom:1.4rem;
  border:1px solid var(--linea-2);background:var(--neg-2);font-size:.9rem;line-height:1.6}
.avi svg{width:18px;height:18px;flex-shrink:0;margin-top:.18rem}
.avi--fuerte{border-color:#fff}
.avi b{color:#fff}

/* ---------- Acceso -------------------------------------------------------- */
.acc{min-height:100dvh;display:grid;place-items:center;padding:2rem 1rem}
.acc__caja{width:100%;max-width:400px}
.acc__marca{font-size:1.5rem;font-weight:800;letter-spacing:-.035em;color:#fff;margin-bottom:.3rem}
.acc__sup{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin-bottom:2.2rem}
.acc h1{font-size:1.5rem;margin-bottom:.5rem}
.acc__txt{color:var(--txt-2);font-size:.92rem;margin-bottom:2rem}
.acc__pie{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linea);
  font-size:.8rem;color:var(--txt-3);line-height:1.7}

/* ---------- Línea de tiempo (conversaciones) ------------------------------ */
.linea{position:relative;padding-left:1.7rem}
.linea::before{content:"";position:absolute;left:4px;top:.5rem;bottom:.5rem;width:1px;background:var(--linea)}
.hito{position:relative;padding-bottom:1.6rem}
.hito::before{content:"";position:absolute;left:-1.7rem;top:.45rem;width:9px;height:9px;
  background:var(--neg);border:1px solid var(--linea-3);border-radius:50%}
.hito--hoy::before{background:#fff;border-color:#fff}
.hito__f{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.3rem}
.hito h4{color:#fff;font-size:.98rem;font-weight:700;margin-bottom:.3rem;overflow-wrap:anywhere}
.hito p{font-size:.9rem;color:var(--txt-2);line-height:1.65}
.hito__canal{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);border:1px solid var(--linea);padding:.1em .45em;margin-left:.5rem}

/* ---------- Tablas -------------------------------------------------------- */
.tabla-env{overflow-x:auto;border:1px solid var(--linea)}
table.t{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
table.t th{background:var(--neg-3);color:var(--txt-3);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:.85rem 1rem;
  border-bottom:1px solid var(--linea)}
table.t td{padding:.9rem 1rem;border-bottom:1px solid var(--linea);color:var(--txt-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:var(--neg-2)}
table.t .d{text-align:right;white-space:nowrap}
table.t b{color:#fff;font-weight:600}

/* ---------- Vacíos -------------------------------------------------------- */
.vacio{text-align:center;padding:3.5rem 1.5rem;border:1px dashed var(--linea-2)}
.vacio svg{width:36px;height:36px;margin:0 auto 1rem;opacity:.4}
.vacio h3{margin-bottom:.5rem}
.vacio p{color:var(--txt-2);font-size:.92rem;max-width:46ch;margin:0 auto 1.5rem}

/* ==========================================================================
   MÓVIL
   ========================================================================== */
@media (max-width:900px){
  .cuerpo{grid-template-columns:1fr}
  .lateral{
    border-right:0;border-bottom:1px solid var(--linea);
    padding:1rem 0;position:sticky;top:64px;z-index:50;background:var(--neg);
  }
  .men{display:flex;gap:.2rem;overflow-x:auto;padding-inline:var(--marco);scrollbar-width:none;min-width:0;max-width:100%}
  .men::-webkit-scrollbar{display:none}
  .men__t{display:none}
  .men a{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:.55rem .8rem}
  .men a.activo{border-left:0;border-bottom-color:#fff;background:transparent}
  .men__aviso{display:none}
  .principal{padding-top:1.5rem}
  .rej-2,.rej-3{grid-template-columns:1fr}
  .cab__quien{display:none}
}
@media (max-width:560px){
  .rej-auto{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Documento en formato web
   ========================================================================== */

.doc{
  border:1px solid var(--linea);background:var(--neg-2);border-radius:var(--r);
  overflow:hidden;margin-bottom:1.4rem;
}
.doc__cab{
  display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;
  padding:clamp(1.4rem,4vw,2.6rem);border-bottom:1px solid var(--linea);background:var(--neg-3);
}
.doc__cab > div:first-child{flex:1 1 20rem;min-width:0}
.doc__tipo{
  margin:0 0 .55rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-3);
}
.doc__cab h1{margin:0;font-size:clamp(1.55rem,4vw,2.3rem);line-height:1.12}
.doc__sub{margin:.7rem 0 0;color:var(--txt-2);max-width:46ch;font-size:.98rem}
.doc__meta{display:grid;gap:.85rem;flex:0 0 auto;min-width:11rem}
.doc__meta > div{display:flex;flex-direction:column;gap:.15rem}
.doc__meta span{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}
.doc__meta b{font-size:.92rem;color:var(--blanco);font-weight:600}

.doc__cuerpo{padding:clamp(1.4rem,4vw,3rem);font-size:1rem;line-height:1.72;color:var(--txt)}
.doc__cuerpo > *:first-child{margin-top:0}
.doc__cuerpo > *:last-child{margin-bottom:0}
.doc__cuerpo h2{
  margin:2.6rem 0 .9rem;font-size:1.22rem;letter-spacing:-.02em;color:var(--blanco);
  padding-bottom:.6rem;border-bottom:1px solid var(--linea);
}
.doc__cuerpo h3{margin:1.9rem 0 .6rem;font-size:1.02rem;color:var(--blanco)}
.doc__cuerpo p{margin:0 0 1.05rem}
.doc__cuerpo ul,.doc__cuerpo ol{margin:0 0 1.15rem;padding-left:1.15rem}
.doc__cuerpo li{margin-bottom:.5rem;padding-left:.2rem}
.doc__cuerpo li::marker{color:var(--txt-3)}
.doc__cuerpo strong,.doc__cuerpo b{color:var(--blanco);font-weight:600}
.doc__cuerpo a{color:var(--blanco);text-decoration:underline;text-underline-offset:.18em}
.doc__cuerpo hr{border:0;border-top:1px solid var(--linea);margin:2.2rem 0}
.doc__cuerpo blockquote{
  margin:1.4rem 0;padding:.2rem 0 .2rem 1.15rem;border-left:2px solid var(--linea-2);color:var(--txt-2);
}
.doc__cuerpo code{font-family:var(--mono);font-size:.86em;color:var(--txt-2)}

/* Tabla de partidas: en móvil pasa a fichas para no salirse de la pantalla. */
.doc__cuerpo table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.94rem}
.doc__cuerpo th{
  text-align:left;padding:.7rem .8rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);border-bottom:1px solid var(--linea-2);
}
.doc__cuerpo td{padding:.85rem .8rem;border-bottom:1px solid var(--linea);vertical-align:top}
.doc__cuerpo tbody tr:last-child td{border-bottom:0}
.doc__cuerpo .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc__cuerpo tfoot td{
  padding-top:.9rem;border-top:1px solid var(--linea-2);border-bottom:0;
  font-weight:600;color:var(--blanco);
}
.doc__cuerpo tfoot tr:last-child td{
  font-size:1.12rem;font-weight:800;letter-spacing:-.02em;
  border-top:2px solid var(--linea-3);padding-top:1rem;
}
.doc__cuerpo .desc small{display:block;margin-top:.3rem;color:var(--txt-3);font-size:.85rem;line-height:1.55}

.doc__partes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1rem;margin:0 0 1.9rem;
}
.doc__parte{padding:1.1rem 1.2rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-3)}
.doc__parte h4{
  margin:0 0 .5rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);
}
.doc__parte p{margin:0;font-size:.92rem;line-height:1.62;color:var(--txt-2)}
.doc__parte p b{display:block;color:var(--blanco);font-size:1rem;margin-bottom:.2rem}

/* ==========================================================================
   Firma registrada
   ========================================================================== */

.firma-hecha{
  margin:0;padding:clamp(1.3rem,4vw,2.2rem);border-top:1px solid var(--linea);background:var(--neg-4);
}
.firma-hecha__t{
  display:flex;align-items:center;gap:.55rem;margin:0 0 1.3rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);
}
.firma-hecha__t svg{width:1.1rem;height:1.1rem;flex:0 0 auto}
.firma-hecha__rej{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1.1rem;margin-bottom:1.4rem;
}
.firma-hecha__rej > div{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.firma-hecha__rej span{
  font-size:.64rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-3);
}
.firma-hecha__rej b{font-size:.9rem;font-weight:600;color:var(--txt);overflow-wrap:anywhere}
.firma-hecha__trazo{
  max-width:22rem;padding:.9rem 1.1rem;margin-bottom:1.2rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg);color:var(--blanco);
}
.firma-hecha__trazo svg{display:block;width:100%;height:auto}
.firma-hecha__hash{
  margin:0;font-size:.72rem;line-height:1.6;color:var(--txt-3);overflow-wrap:anywhere;
}
.firma-hecha__hash code{font-family:var(--mono);font-size:.95em}

/* ==========================================================================
   Panel de firma
   ========================================================================== */

.firmar{
  border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-2);
  padding:clamp(1.3rem,4vw,2.4rem);margin-bottom:1.4rem;scroll-margin-top:1.5rem;
}
.firmar__cab{display:flex;gap:1.1rem;align-items:flex-start;margin-bottom:1.6rem}
.firmar__cab > svg{width:1.7rem;height:1.7rem;flex:0 0 auto;color:var(--blanco);margin-top:.1rem}
.firmar__cab h2{margin:0 0 .5rem;font-size:1.28rem}
.firmar__cab p{margin:0;color:var(--txt-2);max-width:54ch;font-size:.95rem;line-height:1.65}

.frm{display:grid;gap:1.5rem}
.metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.85rem}
.metodo{position:relative;display:block;cursor:pointer}
.metodo input{position:absolute;opacity:0;width:1px;height:1px}
.metodo__c{
  display:block;padding:1.05rem 1.15rem;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-3);transition:border-color .2s var(--ease),background .2s var(--ease);
}
.metodo__c b{display:block;margin-bottom:.35rem;font-size:.98rem;font-weight:700;color:var(--txt)}
.metodo__c small{display:block;font-size:.85rem;line-height:1.55;color:var(--txt-3)}
.metodo:hover .metodo__c{border-color:var(--linea-2)}
.metodo input:checked + .metodo__c{border-color:var(--blanco);background:var(--neg-4)}
.metodo input:checked + .metodo__c b{color:var(--blanco)}
.metodo input:focus-visible + .metodo__c{outline:2px solid var(--blanco);outline-offset:2px}

.lienzo-caja{display:grid;gap:.7rem}
.lienzo-t{
  margin:0;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-3);
}
#lienzo{
  display:block;width:100%;aspect-ratio:3/1;background:var(--neg);cursor:crosshair;
  border:1px dashed var(--linea-2);border-radius:var(--r);touch-action:none;
  transition:border-color .2s var(--ease);
}
#lienzo.lienzo--lleno{border-style:solid;border-color:var(--linea-3)}
#lienzo.lienzo--falta{border-color:#E56A6A;border-style:solid}
.lienzo-acc{display:flex;justify-content:flex-end}

.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.1rem}
.campo label span{text-transform:none;letter-spacing:0;color:var(--txt-3);font-weight:400}

.acepto{
  display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.2rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-3);cursor:pointer;
}
.acepto input{
  flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.18rem;accent-color:#fff;cursor:pointer;
}
.acepto span{font-size:.9rem;line-height:1.62;color:var(--txt-2)}
.acepto b{color:var(--txt);font-weight:600}
.acepto:has(input:focus-visible){outline:2px solid var(--blanco);outline-offset:2px}

.frm__acc{display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:center}
.frm__nota{font-size:.83rem;color:var(--txt-3)}

.paso2{display:grid;gap:1.1rem;justify-items:start}
.paso2__t{
  display:flex;align-items:center;gap:.55rem;margin:0;font-size:1.02rem;color:var(--txt);
}
.paso2__t svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--blanco)}
.paso2__t b{color:var(--blanco)}
.paso2__s{margin:0;color:var(--txt-3);font-size:.9rem}
.frm--codigo{gap:1rem;justify-items:start}
.campo--codigo{max-width:16rem}
.campo--codigo input{
  font-family:var(--mono);font-size:1.55rem;font-weight:700;letter-spacing:.35em;
  text-align:center;padding-left:.35em;
}
.enlace{
  background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:var(--txt-3);
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer;
}
.enlace:hover{color:var(--txt)}

/* ==========================================================================
   Acciones del documento (abajo a la derecha)
   ========================================================================== */

.acciones-doc{
  position:sticky;bottom:1rem;z-index:20;
  display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-end;
  margin-top:1.6rem;padding:.6rem;
  background:rgba(0,0,0,.72);backdrop-filter:blur(14px);
  border:1px solid var(--linea);border-radius:calc(var(--r) + 6px);
}
.acciones-doc .bt{margin:0}
.acciones-doc .bt svg{width:1rem;height:1rem}

/* ==========================================================================
   Avisos y botones que faltaban
   ========================================================================== */

.avi--ok{border-color:var(--linea-3)}
.avi--error{border-color:#7A3535;background:rgba(122,53,53,.14)}
.avi--error svg{color:#E56A6A}
/* Ni bien ni mal: algo a lo que echarle un ojo. */
.avi--ojo{border-color:#7A6A35;background:rgba(122,106,53,.12)}
.avi--ojo svg{color:#E8CE7A}
.bt--lg{padding:1rem 1.5rem;font-size:.95rem}

@media (max-width:760px){
  .doc__cab{gap:1.4rem}
  .doc__meta{width:100%;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}

  /* Las tablas de partidas se convierten en fichas apiladas. */
  .doc__cuerpo table,.doc__cuerpo thead,.doc__cuerpo tbody,.doc__cuerpo tfoot,
  .doc__cuerpo tr,.doc__cuerpo th,.doc__cuerpo td{display:block}
  .doc__cuerpo thead{display:none}
  .doc__cuerpo tbody tr{
    padding:.95rem 0;border-bottom:1px solid var(--linea);
  }
  .doc__cuerpo tbody td{border:0;padding:.15rem 0}
  .doc__cuerpo tbody td[data-t]::before{
    content:attr(data-t) " ";
    font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  }
  .doc__cuerpo tbody td.num{text-align:left}
  .doc__cuerpo tfoot tr{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0}
  .doc__cuerpo tfoot td{padding:.2rem 0;border:0}
  .doc__cuerpo tfoot tr:last-child td{border:0;padding-top:.2rem}

  .acciones-doc{justify-content:stretch}
  .acciones-doc .bt{flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .metodo__c,#lienzo{transition:none}
}

/* ==========================================================================
   Archivos y recursos
   ========================================================================== */

.subida{
  display:grid;gap:1.2rem;padding:clamp(1.2rem,4vw,1.9rem);
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);
}
.soltar{
  display:grid;justify-items:center;gap:.5rem;text-align:center;cursor:pointer;
  padding:2rem 1.2rem;border:1px dashed var(--linea-2);border-radius:var(--r);background:var(--neg-3);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.soltar:hover{border-color:var(--linea-3);background:var(--neg-4)}
.soltar:has(input:focus-visible){outline:2px solid var(--blanco);outline-offset:2px}
.soltar svg{width:1.6rem;height:1.6rem;color:var(--txt-2)}
.soltar b{font-size:1rem;color:var(--blanco)}
.soltar span{font-size:.86rem;color:var(--txt-3);max-width:34ch;line-height:1.55}
.soltar input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.soltar--elegido{border-style:solid;border-color:var(--linea-3)}

.archivos{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.archivo{
  display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);
}
.archivo__ver{display:flex;align-items:center;gap:.85rem;flex:1 1 auto;min-width:0;color:var(--txt)}
.archivo__ver:hover b{color:var(--blanco)}
.archivo__ver > svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--txt-3)}
.archivo__txt{display:block;min-width:0}
.archivo__txt b{display:block;font-size:.95rem;font-weight:600;overflow-wrap:anywhere}
.archivo__txt small{display:block;margin-top:.2rem;font-size:.8rem;color:var(--txt-3);line-height:1.5}
.archivo form{flex:0 0 auto}

.pie-nota{margin:1.4rem 0 0;font-size:.86rem;color:var(--txt-3)}

@media (max-width:560px){
  .archivo{flex-wrap:wrap}
  .archivo form{width:100%}
  .archivo form .bt{width:100%;justify-content:center}
}


/* ==========================================================================
   Firma con certificado digital
   ========================================================================== */

.metodo__eti{
  display:inline-block;margin-top:.65rem;padding:.24rem .55rem;
  border:1px solid var(--linea-2);border-radius:2px;
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2);
}
.metodo input:checked + .metodo__c .metodo__eti{border-color:var(--blanco);color:var(--blanco)}

.nota-cert{
  margin:0;padding:.95rem 1.1rem;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-3);font-size:.86rem;line-height:1.6;color:var(--txt-3);
}
.nota-cert b{color:var(--txt)}
.nota-cert a{color:var(--txt);text-decoration:underline;text-underline-offset:.18em}
.nota-cert a:hover{color:var(--blanco)}

.avi--cert p a{color:#fff;text-decoration:underline;text-underline-offset:.18em}

.bt--cargando{position:relative;opacity:.75;cursor:progress}
.bt--cargando svg{animation:latido 1.1s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.3}}

.firma-hecha__cert{
  margin:0 0 1.2rem;padding:.95rem 1.1rem;border:1px solid var(--linea-2);border-radius:var(--r);
  background:var(--neg-3);font-size:.85rem;line-height:1.6;color:var(--txt-3);
}
.firma-hecha__cert b{color:var(--txt)}
.firma-hecha__cert a{color:var(--txt);text-decoration:underline;text-underline-offset:.18em}

@media (prefers-reduced-motion:reduce){
  .bt--cargando svg{animation:none}
}

/* ==========================================================================
   Parte interesada: los datos del cliente, corregibles antes de firmar
   ========================================================================== */

.doc__parte--tuyo{border-color:var(--linea-2);background:var(--neg-4);scroll-margin-top:5rem}
.parte__falta{
  margin:.7rem 0 0!important;padding:.5rem .65rem;
  border-left:2px solid var(--linea-3);background:rgba(255,255,255,.04);
  font-size:.82rem!important;color:var(--txt-2)!important;
}
.parte__editar{margin-top:.85rem;font-size:.83rem}

.parte-form{
  margin:1.6rem 0 0;padding:clamp(1.1rem,4vw,1.6rem);
  border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-3);
  display:grid;gap:1.1rem;scroll-margin-top:5rem;
}
.parte-form__t{
  margin:0!important;font-size:.7rem!important;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-3)!important;
}
.parte-form__s{margin:0!important;font-size:.88rem!important;line-height:1.6;color:var(--txt-2)!important}
.parte-form__s b{color:var(--txt)}
.parte-form .campos{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.parte-form .frm__acc{margin:0}

/* ==========================================================================
   Ya está firmado: qué toca ahora
   ========================================================================== */

.hecho{
  border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-2);
  padding:clamp(1.3rem,4vw,2.2rem);margin-bottom:1.4rem;
}
.hecho__t{
  display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;
  font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--blanco);
}
.hecho__t svg{width:1.3rem;height:1.3rem;flex:0 0 auto}
.hecho__s{margin:0 0 1.4rem;color:var(--txt-2);max-width:60ch;line-height:1.65}
.hecho__s b{color:var(--txt)}
.hecho__acc{display:flex;flex-wrap:wrap;gap:.75rem}

@media (max-width:560px){
  .hecho__acc{flex-direction:column;align-items:stretch}
  .hecho__acc .bt{justify-content:center}
}

.acciones-nota{align-self:center;font-size:.83rem;color:var(--txt-3);padding:0 .4rem}

/* ==========================================================================
   Acceso: pestañas entrar / crear cuenta
   ========================================================================== */

.acc__tabs{
  display:flex;gap:.3rem;margin:1.4rem 0 1.8rem;padding:.28rem;
  border:1px solid var(--linea);border-radius:calc(var(--r) + 4px);background:var(--neg-3);
}
.acc__tab{
  flex:1;padding:.62rem .5rem;border:0;border-radius:var(--r);background:none;cursor:pointer;
  font:600 .9rem/1 var(--ui);color:var(--txt-3);letter-spacing:.01em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.acc__tab:hover{color:var(--txt)}
.acc__tab.es-activa{background:var(--blanco);color:#000}
.acc__panel[hidden]{display:none}

/* ==========================================================================
   Documentación: todo agrupado por temática
   ========================================================================== */

.tema{
  margin-bottom:2.4rem;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-2);overflow:hidden;
}
.tema__cab{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.2rem clamp(1.1rem,3vw,1.6rem);border-bottom:1px solid var(--linea);background:var(--neg-3);
}
.tema__cab > svg{width:1.5rem;height:1.5rem;flex:0 0 auto;color:var(--txt-2)}
.tema__cab > div{flex:1 1 auto;min-width:0}
.tema__cab .bt{flex:0 0 auto}
.tema__sup{
  margin:0 0 .15rem;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-3);
}
.tema__cab h2{margin:0;font-size:1.2rem;overflow-wrap:anywhere}
.tema__vacio{padding:1.3rem clamp(1.1rem,3vw,1.6rem);color:var(--txt-3);font-size:.9rem}

.subgrupo{padding:1rem clamp(1.1rem,3vw,1.6rem) 0}
.subgrupo:last-child{padding-bottom:1.1rem}
.subgrupo__t{
  margin:0 0 .5rem;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3);display:flex;align-items:center;gap:.5rem;
}
.subgrupo__t span{
  display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .35em;
  border:1px solid var(--linea-2);border-radius:999px;font-size:.62rem;color:var(--txt-2);
  letter-spacing:0;
}

.doclist{display:grid;gap:.4rem}
.docrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;padding:.85rem .95rem;min-width:0;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.docrow:hover{border-color:var(--linea-3);background:var(--neg-3);transform:translateX(2px)}
.docrow__ico{flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;
  border:1px solid var(--linea);border-radius:var(--r);color:var(--txt-2)}
.docrow__ico svg{width:1.05rem;height:1.05rem}
.docrow__cuerpo{flex:1 1 auto;min-width:0}
.docrow__cuerpo b{display:block;font-size:.94rem;font-weight:600;color:var(--txt);overflow-wrap:anywhere}
.docrow:hover .docrow__cuerpo b{color:#fff}
.docrow__cuerpo small{display:block;margin-top:.15rem;font-size:.8rem;color:var(--txt-3)}
.docrow .eti{flex:0 0 auto}
/* Una fila con acciones propias no puede ser un enlace entero: el enlace se
   queda en el nombre y los botones van al final. */
.docrow__cuerpo b a{color:inherit;text-decoration:none}
.docrow:hover .docrow__cuerpo b a{text-decoration:underline;text-underline-offset:2px}
.docrow__acc{flex:0 0 auto;display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-start;min-width:0}

/* Cerrar un proyecto pide el porqué, y el porqué no cabe en un botón. Va
   plegado: el botón ES el resumen, y al abrirlo se lleva toda la fila.
   El `:has` es para que se la lleve de verdad: si solo se estira el desplegable,
   se estira dentro de la columna de los botones y el formulario sale a dos
   dedos de ancho, o peor, empuja la fila fuera de la pantalla. Donde no haya
   `:has`, el formulario se apila en vertical y sigue siendo usable. */
.docrow__acc:has(details[open]){flex:1 1 100%}
.cierre>summary{cursor:pointer;list-style:none;user-select:none}
.cierre>summary::-webkit-details-marker{display:none}
.cierre[open]{flex:1 1 100%;min-width:0}
.cierre[open]>summary{margin-bottom:.6rem}
.cierre__form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;max-width:100%;
  padding:.8rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.cierre__form .campo{flex:1 1 10rem;margin:0;min-width:0}
.cierre__form .cierre__detalle{flex:2 1 14rem}
.cierre__form .bt{flex:0 0 auto}
.docrow--off{opacity:.6}
.docrow--off:hover{opacity:1}
.docrow__ir{flex:0 0 auto;color:var(--txt-3);font-size:1rem}
.docrow:hover .docrow__ir{color:#fff}

@media (max-width:560px){
  .docrow{flex-wrap:wrap}
  .docrow__cuerpo{flex-basis:calc(100% - 2.9rem)}
  .docrow .eti{margin-left:2.9rem}
  .docrow__ir{display:none}
}

/* Selector particular / empresa en el registro */
.segmento{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.28rem;
  border:1px solid var(--linea);border-radius:calc(var(--r) + 4px);background:var(--neg-3)}
.seg{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;padding:.55rem .4rem;border-radius:var(--r);
  font-size:.86rem;font-weight:600;color:var(--txt-3);transition:background .2s var(--ease),color .2s var(--ease)}
.seg:hover span{color:var(--txt)}
.seg input:checked + span{background:var(--blanco);color:#000}
.seg input:focus-visible + span{outline:2px solid #fff;outline-offset:2px}

/* ==========================================================================
   Administración
   ========================================================================== */

/* ---------- Administración: menú al lado ------------------------------------
   Catorce secciones no caben en una barra horizontal sin partirse en dos
   líneas y bailar según el ancho. En columna caben todas, siempre en el mismo
   sitio, y agrupadas. Reutiliza `.men`, que es el menú del portal del cliente:
   el mismo idioma visual en los dos lados.                                   */

.adm{display:grid;grid-template-columns:250px 1fr;align-items:start;min-height:100dvh}

/* ⚠️ La columna se desliza sola, pero SIN pintar su barra. Con la ventana un
   poco baja las catorce entradas no caben por unos píxeles y aparecía una
   segunda barra de desplazamiento clavada en mitad de la pantalla, que se lee
   como un corte vertical de la página y no como un menú que sigue abajo. Se
   sigue pudiendo bajar con la rueda y con el teclado. Es lo mismo que ya hace
   la tira del menú del cliente (busca `scrollbar-width` en `.men`). */
.admlat{position:sticky;top:0;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
  border-right:1px solid var(--linea);background:var(--neg-2);
  display:flex;flex-direction:column;padding-bottom:1rem}
.admlat::-webkit-scrollbar{width:0;height:0}
.admlat__logo{display:block;padding:1.3rem 1.7rem 1.1rem;font-weight:800;
  letter-spacing:-.03em;color:#fff;line-height:1.2}
.admlat__logo span{display:block;font-weight:400;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3)}
.admlat .men{flex:1 1 auto;padding-inline:.8rem}
.admlat .men a{border-radius:var(--r)}
.admlat .men svg{width:16px;height:16px;flex:0 0 auto}
.admlat__pie{display:flex;flex-wrap:wrap;gap:.4rem;padding:1rem 1.2rem 0;margin-top:.6rem;
  border-top:1px solid var(--linea)}
.admlat__pie form{margin:0}

.adm__cuerpo{padding:2rem var(--marco) 5rem;min-width:0;max-width:1300px}

@media (max-width:900px){
  /* Arriba y en una tira que se desliza, igual que el menú del cliente: no
     cabe una columna de catorce entradas por encima del contenido. Las reglas
     que lo vuelven horizontal ya están escritas para `.men` (busca
     «Menú lateral» arriba); aquí solo se coloca el marco. */
  .adm{grid-template-columns:1fr;min-height:0}
  /* ⚠️ `min-width:0`, o la tira de catorce entradas del menú estira la columna
     y es la PÁGINA la que se desliza a lo ancho en vez del menú. Una casilla de
     rejilla mide por defecto lo que su contenido, y aquí el contenido no cabe. */
  .adm > *{min-width:0}
  .admlat{position:sticky;top:0;z-index:60;height:auto;overflow:visible;
    border-right:0;border-bottom:1px solid var(--linea);padding-bottom:0;
    background:rgba(10,10,10,.94);backdrop-filter:blur(14px)}
  .admlat__logo{display:flex;align-items:baseline;gap:.5rem;padding:.8rem var(--marco) .2rem}
  .admlat__logo span{display:inline;font-size:.68rem}
  .admlat .men{padding-block:.3rem}
  .admlat__pie{padding:.6rem var(--marco) .7rem;margin-top:0}
  .adm__cuerpo{padding-top:1.4rem}
}

/* 11rem y no 15: con el menú lateral ocupando sitio y seis tarjetas (gastos,
   ingresos, IVA, IRPF, dinero libre y comisiones), a más ancho se caen solas a
   una segunda fila medio vacía. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.7rem}
.kpi{padding:1rem 1.1rem}
.kpi__n{font-size:1.55rem}
.kpi{padding:1.3rem 1.4rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.kpi__n{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.1}
.kpi__t{display:block;margin-top:.4rem;font-size:.82rem;color:var(--txt-3)}
.kpi--bueno{border-color:var(--linea-3)}
.kpi--bueno .kpi__n{color:#fff}
.kpi--ojo{border-color:#7A6A35}
.kpi--ojo .kpi__n{color:#E8CE7A}
/* El dinero que de verdad queda libre, en verde: es el número que se busca. */
.kpi--verde{border-color:#2F6B4F;background:linear-gradient(180deg,rgba(63,168,118,.10),transparent)}
.kpi--verde .kpi__n{color:#6FD3A0}

/* Buscador */
.buscador{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;margin-bottom:1.6rem}
.buscador__campo{display:flex;align-items:center;gap:.6rem;flex:1 1 20rem;min-width:0;
  padding:.2rem .9rem;border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-2)}
.buscador__campo svg{width:1.1rem;height:1.1rem;color:var(--txt-3);flex:0 0 auto}
.buscador__campo input{flex:1 1 auto;min-width:0;background:none;border:0;padding:.75rem 0;font-size:1rem;color:var(--txt)}
.buscador__campo input:focus{outline:none}
.buscador__filtros{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{padding:.5rem .9rem;border:1px solid var(--linea);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--txt-3)}
.chip:hover{color:#fff;border-color:var(--linea-2)}
.chip.es-activa{background:#fff;color:#000;border-color:#fff}
/* Un filtro puesto: se ve que está y se quita pulsándolo. */
.chip--puesto{border-color:var(--linea-3);color:var(--txt);background:var(--neg-4)}
.chip--puesto:hover{border-color:#fff}
.chip__x{color:var(--txt-3);margin-left:.15rem}
.chip--puesto:hover .chip__x{color:#fff}
.chip--limpiar{border-style:dashed}

/* Tabla de facturas */
.tabla-facturas{display:grid;gap:.5rem}
.facrow{display:grid;grid-template-columns:1fr auto auto auto;gap:1rem;align-items:center;
  padding:.9rem 1.1rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.facrow__ppal{display:flex;align-items:center;gap:1rem;min-width:0}
.facrow__num{font-family:var(--mono);font-size:.9rem;color:#fff;font-weight:600;white-space:nowrap}
.facrow__cli{min-width:0}
.facrow__cli b{display:block;font-size:.95rem;overflow-wrap:anywhere}
.facrow__cli small{display:block;color:var(--txt-3);font-size:.8rem;overflow-wrap:anywhere}
.facrow__imp{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.facrow__acc{display:flex;gap:.5rem;align-items:center}

.docrow__imp{flex:0 0 auto;font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.docrow--info{background:var(--neg);cursor:default}
.docrow--info:hover{transform:none;border-color:var(--linea)}

/* Botón dividido */
.split{position:relative;display:inline-flex}
.split--ancho{display:flex;width:100%}
.split__main{display:flex;margin:0}
.split--ancho .split__main{flex:1 1 auto}
.split--ancho .split__main .bt{width:100%}
.split__main .bt{border-top-right-radius:0;border-bottom-right-radius:0;border-right-color:rgba(0,0,0,.2)}
.split__toggle{border-top-left-radius:0;border-bottom-left-radius:0;padding-inline:.7em;min-width:0}
.split__menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:min(20rem,80vw);
  padding:1rem;border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-3);
  box-shadow:0 12px 34px rgba(0,0,0,.6)}
.split--ancho .split__menu{left:0;right:0;width:auto}
.split__t{margin:0 0 .6rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.split__form{display:flex;gap:.4rem}
.split__form input{flex:1 1 auto;min-width:0;padding:.55rem .7rem;background:var(--neg);
  border:1px solid var(--linea-2);border-radius:var(--r);color:var(--txt);font-size:.9rem}
.split__form input:focus{outline:none;border-color:#fff}
.split__form .bt{flex:0 0 auto;white-space:nowrap}
.split__nota{margin:.6rem 0 0;font-size:.78rem;color:var(--txt-3)}
/* Elegir a qué WhatsApp va la factura, dentro del propio botón dividido. */
.split__lista{display:grid;gap:.25rem}
.split__op{display:flex;align-items:center;gap:.55rem;padding:.45rem .5rem;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r)}
.split__op:hover{border-color:var(--linea-2);background:var(--neg)}
.split__op input{flex:0 0 auto;accent-color:#fff}
.split__op span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.split__op b{color:#fff;font-size:.86rem;font-weight:600}
.split__op small{color:var(--txt-3);font-size:.74rem}

/* Ficha admin de documento/cliente */
.admdoc{display:grid;grid-template-columns:300px 1fr;gap:1.4rem;align-items:start}
.admdoc__lado{display:grid;gap:1rem;position:sticky;top:5rem}
.admcard{padding:1.1rem 1.2rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.admcard__t{margin:0 0 .6rem;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.admcard p{margin:0 0 .3rem;font-size:.9rem;color:var(--txt-2);overflow-wrap:anywhere}
.admcard__b{color:#fff;font-weight:600;font-size:1rem}

@media (max-width:900px){
  .admdoc{grid-template-columns:1fr}
  .admdoc__lado{position:static}
  .facrow{grid-template-columns:1fr auto;grid-template-areas:'ppal imp' 'est est' 'acc acc';gap:.6rem 1rem}
  .facrow__ppal{grid-area:ppal}.facrow__imp{grid-area:imp}.facrow__est{grid-area:est}.facrow__acc{grid-area:acc;flex-wrap:wrap}
}

/* ---------- Formularios cortos de administración -------------------------- */
/* Los de «dar por cobrada» y los ajustes de una cuota: campos pequeños dentro
   de una tarjeta. Van aquí y no en línea porque los desplegables nativos, sin
   estilar, salían gris sobre gris y no se leían. `color-scheme` es lo que hace
   que el calendario y la lista del desplegable los pinte el sistema en oscuro. */
.admform{display:grid;gap:.65rem;color-scheme:dark}
.admform label{display:grid;gap:.3rem;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}
.admform input[type=text],.admform input[type=date],.admform input[type=time],.admform input[type=number],.admform select{
  width:100%;padding:.55rem .7rem;font-size:.95rem;color:#fff;
  background:var(--neg);border:1px solid var(--linea-2);border-radius:var(--r);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.admform select{
  appearance:none;-webkit-appearance:none;padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:.85rem;
}
.admform option{background:#0A0A0A;color:#fff}
.admform{color-scheme:dark}
.admform input:focus,.admform select:focus{outline:none;border-color:#fff;background:var(--neg-3)}
.admform .admform__check{display:flex;gap:.45rem;align-items:center;font-size:.85rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--txt-2)}
.admform__check input{width:1rem;height:1rem;accent-color:#fff}
.admform__nota{font-size:.82rem;color:var(--txt-3);line-height:1.5}
/* En una fila, para los ajustes de una cuota debajo de su ficha. */
.admform--fila{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end}
.admform--fila label{min-width:0}
.admform--fila input[type=text]{max-width:7.5rem}

/* ---------- Personas ------------------------------------------------------
   La ficha de cada persona de un cliente: quién es, qué puede hacer y qué le
   falta. Se usa igual en el portal del cliente y en administración.          */
.personas{display:grid;gap:1rem;margin-bottom:1.8rem}
.persona{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.1rem 1.2rem}
.persona--off{opacity:.55}
.persona__cab{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:flex-start;justify-content:space-between}
.persona__quien{min-width:0}
.persona__quien h3{margin:0;font-size:1.02rem;overflow-wrap:anywhere}
.persona__quien h3 span{font-weight:400;color:var(--txt-2)}
.persona__quien p{margin:.25rem 0 0;font-size:.86rem;color:var(--txt-2);overflow-wrap:anywhere}
.persona__quien a{color:var(--txt-2);text-decoration:none;border-bottom:1px solid var(--linea-2)}
.persona__quien a:hover{color:#fff;border-color:#fff}
.persona__etis{display:flex;flex-wrap:wrap;gap:.4rem;flex:0 0 auto}
.persona__estado{margin:.7rem 0 0;font-size:.82rem;color:var(--txt-3)}
.persona__mas{margin-top:.9rem;border-top:1px solid var(--linea);padding-top:.8rem}
.persona__mas summary{cursor:pointer;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);font-weight:600;list-style:none}
.persona__mas summary::-webkit-details-marker{display:none}
.persona__mas summary::before{content:"+ ";color:var(--txt-3)}
.persona__mas[open] summary::before{content:"− "}
.persona__mas summary:hover{color:#fff}
.persona__mas .form{margin-top:1rem}
.persona__acc{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;
  border-top:1px solid var(--linea);padding-top:.9rem}
.persona__nueva{border:1px dashed var(--linea-2);border-radius:var(--r);padding:1rem 1.2rem}
.persona__nueva summary{cursor:pointer;color:#fff;list-style:none}
.persona__nueva summary::-webkit-details-marker{display:none}
.persona__nueva summary::before{content:"+ "}
.persona__nueva[open] summary::before{content:"− "}
.persona__nueva .form{margin-top:1.2rem}
.form--apretado{gap:.9rem}
.opciones{display:grid;gap:.65rem}
/* El nombre de la empresa, pequeño, bajo el de la persona que ha entrado. */
.cab__quien{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.cab__quien small{font-size:.72rem;color:var(--txt-3)}
/* Un <select> suelto con la clase, no solo los de dentro de un .admform. */
select.admform{
  width:100%;padding:.55rem 2rem .55rem .7rem;font-size:.95rem;color:#fff;
  background:var(--neg);border:1px solid var(--linea-2);border-radius:var(--r);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:.85rem;
}
select.admform:focus{outline:none;border-color:#fff;background-color:var(--neg-3)}
.buscador select.admform{flex:0 0 auto;width:auto;min-width:11rem}

/* ---------- WhatsApp -------------------------------------------------------
   Dos columnas: los hilos y la conversación abierta. En móvil, una debajo de
   otra, con la lista recortada para que no haya que bajar media pantalla.    */
.wa{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:1.2rem;align-items:start}
.wa__lista{display:grid;gap:.5rem;max-height:70vh;overflow-y:auto;padding-right:.3rem}
.wa__hilo{display:grid;gap:.15rem;padding:.75rem .9rem;text-decoration:none;color:var(--txt);
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.wa__hilo:hover{border-color:var(--linea-3);background:var(--neg-3)}
.wa__hilo.es-activo{border-color:#fff;background:var(--neg-3)}
.wa__hilo-cab{display:flex;justify-content:space-between;gap:.6rem;align-items:center}
.wa__hilo-cab b{font-size:.93rem;color:#fff;overflow-wrap:anywhere}
.wa__hilo small{font-size:.78rem;color:var(--txt-3);overflow-wrap:anywhere}
.wa__ultimo{opacity:.75}
.wa__n{flex:0 0 auto;min-width:1.3rem;height:1.3rem;padding:0 .35rem;display:grid;place-items:center;
  background:#fff;color:#000;border-radius:99px;font:700 .72rem/1 var(--ui)}
.wa__conv{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.1rem 1.2rem}
.wa__cab{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;
  border-bottom:1px solid var(--linea);padding-bottom:.9rem;margin-bottom:1rem}
.wa__cab h2{margin:0;font-size:1.05rem}
.wa__cab p{margin:.25rem 0 0;font-size:.84rem;color:var(--txt-3)}
.wa__cab a{color:var(--txt-2)}
.wa__vincular{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.7rem}
.wa__vincular select.admform{flex:1 1 16rem;width:auto}
.wa__resumen{border:1px solid var(--linea-2);border-radius:var(--r);padding:.9rem 1rem;margin-bottom:1rem}
.wa__resumen-t{margin:0 0 .4rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);font-weight:600;display:flex;justify-content:space-between;gap:.6rem}
.wa__resumen-t span{letter-spacing:0;text-transform:none;font-weight:400}
.wa__resumen p{margin:0;font-size:.9rem;color:var(--txt-2)}
.wa__mensajes{display:grid;gap:.55rem;max-height:52vh;overflow-y:auto;padding:.3rem}
.wa__dia{margin:.8rem 0 .2rem;text-align:center;font-size:.74rem;color:var(--txt-3);
  letter-spacing:.1em;text-transform:uppercase}
.wa__msj{max-width:min(80%,34rem);padding:.6rem .8rem;border-radius:var(--r);
  border:1px solid var(--linea);background:var(--neg-3)}
.wa__msj p{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.wa__msj small{display:block;margin-top:.3rem;font-size:.72rem;color:var(--txt-3)}
.wa__msj--suyo{justify-self:start}
.wa__msj--mio{justify-self:end;background:#fff;border-color:#fff;color:#000}
.wa__msj--mio small{color:#4A4A4A}
.wa__msj--mio a{color:#000}
.wa__adj a{display:inline-flex;gap:.4rem;align-items:center;color:inherit;font-size:.85rem}
.wa__adj svg{width:1rem;height:1rem}
.wa__responder{display:flex;gap:.7rem;align-items:flex-end;margin-top:1rem;
  border-top:1px solid var(--linea);padding-top:1rem}
.wa__responder textarea{flex:1 1 auto;min-width:0;padding:.7rem .8rem;font:inherit;font-size:.95rem;
  color:#fff;background:var(--neg);border:1px solid var(--linea-2);border-radius:var(--r);resize:vertical}
.wa__responder textarea:focus{outline:none;border-color:#fff}
.wa__responder button svg{width:1rem;height:1rem}
.wa-ayuda{margin:1rem 0;font-size:.88rem;color:var(--txt-2);display:grid;gap:.6rem}
.wa-ayuda code{font-family:var(--mono);font-size:.85em;color:#fff}
.wa-url{padding:.7rem .9rem;border:1px solid var(--linea-2);border-radius:var(--r);overflow-wrap:anywhere}
.wa-falta{color:#C99}
@media (max-width:900px){
  .wa{grid-template-columns:1fr}
  .wa__lista{max-height:16rem}
}

/* ---------- Propuestas de la IA -------------------------------------------- */
.hallazgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem}
.hallazgo{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1rem 1.1rem}
.hallazgo--ojo{border-color:var(--linea-3)}
.hallazgo header{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.hallazgo__quien{margin:0 0 .8rem;font-size:.86rem;color:var(--txt-2)}
.hallazgo__quien a{color:#fff}
.hallazgo__cambio{display:grid;gap:.5rem}
.hallazgo__cambio p{margin:0;font-size:.92rem;overflow-wrap:anywhere}
.hallazgo__cambio span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:.15rem}
.hallazgo__antes{color:var(--txt-3);text-decoration:line-through;text-decoration-color:var(--linea-2)}
.hallazgo__antes span{text-decoration:none}
.hallazgo__despues{color:#fff}
.hallazgo__cita{margin:.8rem 0 0;font-size:.85rem;color:var(--txt-2);font-style:italic;
  border-left:2px solid var(--linea-2);padding-left:.7rem;overflow-wrap:anywhere}
.hallazgo__ref{margin:.5rem 0 0;font-size:.76rem;color:var(--txt-3);overflow-wrap:anywhere}
.hallazgo__acc{display:flex;gap:.6rem;margin-top:1rem;border-top:1px solid var(--linea);padding-top:.9rem}

/* El código para vincular el móvil. Fondo blanco a la fuerza: un QR sobre
   negro no lo lee ninguna cámara. */
.wa-qr{display:flex;justify-content:center;margin:1.2rem 0}
.wa-qr img{display:block;width:min(320px,80vw);height:auto;padding:12px;
  background:#fff;border-radius:var(--r)}
.wa-pasos{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem;color:var(--txt-2)}
.wa-pasos b{color:#fff}

/* Notas de voz: se escuchan sin salir de la conversación y llevan debajo lo
   que dicen, en cursiva, para poder leerlas de un vistazo. */
.wa__audio{display:block;width:100%;max-width:17rem;height:2.1rem;margin-bottom:.4rem}
.wa__msj--mio .wa__audio{filter:invert(1) hue-rotate(180deg)}
.wa__dicho{margin:.35rem 0 0;padding-top:.35rem;border-top:1px dashed var(--linea-2);
  font-size:.88rem;font-style:italic;opacity:.92}
.wa__msj--mio .wa__dicho{border-color:rgba(0,0,0,.22)}
.wa__dicho--esperando{opacity:.55;font-style:normal;font-size:.8rem}

/* ---------- Ajustes --------------------------------------------------------
   Una tarjeta por cuenta: su estado de un vistazo y lo que hay que hacer.   */
.ajustes{display:grid;gap:1.2rem;max-width:52rem}
.ajuste{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.2rem 1.3rem}
.ajuste__cab{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;
  margin-bottom:.8rem}
.ajuste__cab h2{margin:0;font-size:1.05rem}
.ajuste__txt{margin:0 0 1rem;font-size:.9rem;color:var(--txt-2)}
.ajuste__txt code{font-family:var(--mono);font-size:.85em;color:#fff}
.ajuste__txt a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.mal{color:#e8a0a0}
/* El código de un solo uso de OpenAI: grande y separado, que se teclea a mano. */
.codigazo{margin:.5rem 0 .2rem;font-family:var(--mono);font-size:1.6rem;letter-spacing:.18em;
  color:#fff;background:#111;border:1px solid var(--linea);border-radius:8px;
  padding:.55rem .9rem;display:inline-block;user-select:all}
/* El sitio donde pegar una clave, escondido mientras no haga falta. */
.ajuste__mas{margin-top:.9rem;border-top:1px solid var(--linea);padding-top:.9rem}
.ajuste__mas>summary{cursor:pointer;font-size:.86rem;color:var(--txt-2);list-style:none}
.ajuste__mas>summary::-webkit-details-marker{display:none}
.ajuste__mas>summary::before{content:'+ ';font-family:var(--mono)}
.ajuste__mas[open]>summary::before{content:'– '}
.ajuste__mas>summary:hover{color:#fff}
.ajuste .wa-pasos li{margin-bottom:.5rem}
.ajuste .wa-url{margin:.5rem 0 0;font-size:.82rem}
.ajuste .wa-url a{color:#fff;overflow-wrap:anywhere}

/* ---------------------------------------------------- apuntes de conversación
   Lo que la IA saca de cada día de WhatsApp. Se lee en columna, agrupado por
   fecha. La franja de la izquierda marca lo importante sin usar color: en la
   capa negra un semáforo de colores quedaría de feria. */
.apuntes{display:flex;flex-direction:column;gap:.55rem}
.apuntes__dia{margin:1.1rem 0 .1rem;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-2)}
.apuntes__dia:first-child{margin-top:0}
.apunte{border:1px solid var(--linea);border-left:3px solid #2f2f2f;border-radius:10px;
  padding:.85rem 1rem;background:#0a0a0a}
.apunte--3{border-left-color:#fff}
.apunte--2{border-left-color:#666}
.apunte__cab{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.4rem}
.apunte__cab h4{margin:0;font-size:.95rem;flex:1 1 auto}
.apunte__cab .eti{flex:0 0 auto}
.apunte__txt{margin:0;font-size:.9rem;color:var(--txt-2);line-height:1.55}
.apunte__linea{margin:.5rem 0 0;font-size:.86rem;color:var(--txt-2)}
.apunte__linea b{color:#fff;font-weight:600}
.apunte__linea--pend{padding-left:.7rem;border-left:2px solid #3a3a3a}
.apunte__pie{margin:.6rem 0 0;font-size:.78rem;color:#7a7a7a}
.apunte__pie a{color:#aaa;text-decoration:underline;text-underline-offset:2px}
.apunte__pie a:hover{color:#fff}

/* ------------------------------------------------------------------- el mapa
   Fichas de «quién es quién». Cada una es una conversación por identificar, con
   lo que se ha deducido arriba y la decisión abajo. Las incógnitas llevan la
   franja marcada: son las que piden algo de Jesús. */
.mapa__h2{margin:2.2rem 0 .2rem;font-size:1.05rem}
.mapa__h2 span{display:inline-block;margin-left:.5rem;font-size:.8rem;color:var(--txt-2);font-weight:400}
.mapa__bajada{margin:0 0 1rem;font-size:.86rem;color:var(--txt-2)}
.mapa{display:flex;flex-direction:column;gap:.7rem}
.mapa__ficha{border:1px solid var(--linea);border-radius:12px;padding:1rem 1.1rem;background:#0a0a0a}
.mapa__ficha--duda{border-left:3px solid #fff}
.mapa__cab{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;justify-content:space-between}
.mapa__cab h3{margin:0;font-size:1rem}
.mapa__emp{margin-left:.5rem;font-size:.85rem;color:var(--txt-2);font-weight:400}
.mapa__meta{margin:.15rem 0 .6rem;font-size:.78rem;color:#7a7a7a}
.mapa__meta a{color:#aaa;text-decoration:underline;text-underline-offset:2px}
.mapa__meta a:hover{color:#fff}
.mapa__txt{margin:0 0 .4rem;font-size:.9rem;color:var(--txt-2);line-height:1.5}
.mapa__linea{margin:.25rem 0;font-size:.85rem;color:var(--txt-2)}
.mapa__linea b{color:#fff;font-weight:600}
.mapa__linea--duda{padding:.5rem .7rem;border-left:2px solid #fff;background:#111;border-radius:0 6px 6px 0}
.mapa__pie{margin:.5rem 0 0;font-size:.76rem;color:#666;font-style:italic}
.mapa__form{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linea);
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end}
.mapa__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;flex:1 1 420px}
.campo--min{margin:0}
.campo--min>span{display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:.25rem}
.campo--min>span small{text-transform:none;letter-spacing:0;opacity:.7}
.campo--min input,.campo--min select{width:100%}
/* Los dos desenlaces de una ficha: guardarla como cliente o apartarla. */
.mapa__botones{display:flex;gap:.5rem;flex-wrap:wrap}

/* Crear la ficha sin salir de la conversación. Va plegado: lo normal es que la
   persona ya esté en la lista, y un formulario siempre abierto ahí estorba. */
.wa__nueva{margin-top:.8rem;border-top:1px solid var(--linea);padding-top:.7rem}
.wa__nueva>summary{cursor:pointer;font-size:.84rem;color:var(--txt-2);list-style:none}
.wa__nueva>summary::-webkit-details-marker{display:none}
.wa__nueva>summary::before{content:'+ ';font-family:var(--mono)}
.wa__nueva[open]>summary::before{content:'– '}
.wa__nueva>summary:hover{color:#fff}
.wa__nueva-form{margin-top:.8rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.wa__nueva-form button{grid-column:1/-1;justify-self:start}

/* ==========================================================================
   Banco · los gastos de la cuenta
   --------------------------------------------------------------------------
   Sin un solo color, como todo lo demás: los gastos son barra maciza y los
   ingresos, barra hueca. Lo que distingue un ingreso de un gasto en las cifras
   es el signo y el peso, nunca el verde y el rojo.
   ========================================================================== */

.bnc-alta{border:1px solid var(--linea-2);border-radius:var(--r);background:var(--neg-2);
  padding:1.6rem 1.7rem;max-width:44rem}
.bnc-alta h2{margin-bottom:.6rem}
.bnc-alta p{color:var(--txt-2);font-size:.94rem;margin-bottom:1.2rem}
.bnc-alta code{font-family:var(--mono);font-size:.86rem;color:#fff}
.bnc-alta .admform{margin-bottom:.7rem}

/* Cuentas enlazadas y botón de actualizar */
.bnc-barra{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--linea)}
.bnc-ctas{display:flex;flex-wrap:wrap;gap:.5rem}
.bnc-cta{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .9rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.bnc-cta b{font-size:.9rem;color:#fff}
.bnc-cta span{font-family:var(--mono);font-size:.8rem;color:var(--txt-2)}
.bnc-cta small{font-size:.74rem;color:var(--txt-3)}
.bnc-cta--stripe b{display:inline-flex;align-items:center;gap:.35rem}
.bnc-cta--stripe b svg{width:.8rem;height:.8rem;color:var(--txt-3)}

/* Los doce meses de un vistazo, en filas: el mismo idioma visual que la lista
   de categorías de al lado — etiqueta, barra y cifra. */
.bnc-meses{display:flex;flex-direction:column;gap:.1rem}
.bnc-mesf{display:grid;grid-template-columns:3.2rem 1fr auto;align-items:center;
  gap:.2rem .7rem;padding:.4rem .6rem;border-radius:var(--r)}
.bnc-mesf:hover{background:var(--neg-4)}
.bnc-mesf__t{font-family:var(--mono);font-size:.76rem;color:var(--txt-3);white-space:nowrap}
.bnc-mesf__bs{display:flex;flex-direction:column;gap:2px;min-width:0}
.bnc-mesf__b{height:6px;min-width:1px;border-radius:1px}
.bnc-mesf__b--g{background:#4a4a4a}
.bnc-mesf__b--i{background:#2F6B4F}
.bnc-mesf__c{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums}
.bnc-mesf__g{color:var(--txt-3)}
.bnc-mesf__i{color:#4E9B76}
.bnc-mesf.es-activa{background:var(--neg-4)}
.bnc-mesf.es-activa .bnc-mesf__t{color:#fff;font-weight:700}
.bnc-mesf.es-activa .bnc-mesf__b--g{background:#fff}
.bnc-mesf.es-activa .bnc-mesf__b--i{background:#6FD3A0}
.bnc-mesf.es-activa .bnc-mesf__g{color:var(--txt-2)}
.bnc-mesf.es-activa .bnc-mesf__i{color:#6FD3A0}
.bnc-leyenda{display:flex;align-items:center;gap:.35rem;margin-top:.9rem;
  font-size:.72rem;color:var(--txt-3)}
.bnc-mu{display:inline-block;width:.6rem;height:.6rem;border-radius:1px}
.bnc-mu--g{background:#4a4a4a}
.bnc-mu--i{background:#2F6B4F}

/* Los tres botoncitos de la derecha de cada apunte */
.bnc-mov__acc{display:flex;align-items:center;gap:.25rem;justify-self:end}
.movico{display:inline-flex;align-items:center;justify-content:center;gap:.15rem;
  width:2rem;height:2rem;border:1px solid transparent;border-radius:var(--r);
  color:var(--txt-3);cursor:pointer}
.movico svg{width:1rem;height:1rem}
.movico:hover{color:#fff;border-color:var(--linea-2);background:var(--neg-4)}
.movico__n{font-size:.66rem;font-family:var(--mono)}
.movico--doc{color:var(--txt-2)}
/* Stripe se queda en gris hasta que se pasa por encima: está para mirarlo,
   no para llamar la atención en cada línea del extracto. */
.movico--stripe svg{width:.85rem;height:.85rem}
.movico--sube{opacity:.45}
.bnc-mov:hover .movico--sube{opacity:1}
.movico-f{display:contents}

/* Soltar el papel: facturas, recibos y fotos de tiques */
.bnc-subir{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.bnc-subir label{cursor:pointer}
.bnc-subir__nota{font-size:.78rem;color:var(--txt-2)}
.bnc-subir__pie{margin:0;font-size:.72rem;color:var(--txt-3);max-width:15rem}

.bnc-sueltos{margin-bottom:1.6rem;border-color:var(--linea-3)}
.bnc-t__n{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;
  background:var(--neg-4);color:var(--txt-2);font-size:.7rem;letter-spacing:0}
.adj-lista{display:flex;flex-direction:column;gap:.2rem}
.adj{display:grid;grid-template-columns:1fr 15rem auto;gap:.3rem .9rem;align-items:center;
  padding:.55rem .6rem;border-radius:var(--r)}
.adj:hover{background:var(--neg-4)}
.adj__q{min-width:0}
.adj__q a{font-size:.9rem;color:#fff;font-weight:600}
.adj__q a:hover{text-decoration:underline}
.adj__q small{display:block;font-size:.75rem;color:var(--txt-3)}
.adj__f select{width:100%}
.adj__x button{padding:.3rem .55rem;color:var(--txt-3)}
.adj__x button:hover{color:#fff}

/* Dos cajas: en qué se ha ido y el mes a mes */
.bnc-dos{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;align-items:stretch;margin-bottom:2rem}
.bnc-caja{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.2rem 1.3rem}
.bnc-t{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
  font-weight:700;margin-bottom:.9rem}

.bnc-nada{font-size:.86rem;color:var(--txt-3)}
.bnc-cats{display:flex;flex-direction:column;gap:.15rem}
.bnc-cat{position:relative;display:grid;grid-template-columns:1fr auto auto 2.6rem;gap:.7rem;
  align-items:center;padding:.5rem .6rem;border-radius:var(--r);overflow:hidden}
.bnc-cat:hover{background:var(--neg-4)}
.bnc-cat.es-activa{outline:1px solid var(--linea-3)}
.bnc-cat__b{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.08);pointer-events:none}
.bnc-cat.es-activa .bnc-cat__b{background:rgba(255,255,255,.16)}
.bnc-cat__t,.bnc-cat__n,.bnc-cat__i,.bnc-cat__p{position:relative}
.bnc-cat__t{font-size:.9rem;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnc-cat__n{font-size:.74rem;color:var(--txt-3);font-family:var(--mono)}
.bnc-cat__i{font-size:.9rem;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.bnc-cat__p{font-size:.76rem;color:var(--txt-3);text-align:right;font-variant-numeric:tabular-nums}


/* La lista de movimientos */
.bnc-lista{display:flex;flex-direction:column;gap:.3rem}
.bnc-dia{margin:1.3rem 0 .3rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.bnc-dia:first-child{margin-top:0}
.bnc-mov{display:grid;grid-template-columns:1fr 13rem auto auto;gap:1rem;align-items:center;
  padding:.75rem 1rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.bnc-mov--pend{border-style:dashed}
.bnc-mov__q{min-width:0}
.bnc-mov__q b{display:block;font-size:.94rem;color:#fff;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnc-mov__q small{display:block;font-size:.78rem;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnc-mov__cat select{width:100%;padding:.4rem .6rem;font-size:.82rem;color:var(--txt-2);
  background:var(--neg);border:1px solid var(--linea);border-radius:var(--r);
  appearance:none;-webkit-appearance:none;padding-right:1.8rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;background-size:.8rem}
.bnc-mov__cat select:hover{color:#fff;border-color:var(--linea-2)}
.bnc-mov__cat select:focus{outline:none;border-color:#fff;color:#fff}
.bnc-mov__cat option{background:#0A0A0A;color:#fff}
.bnc-mov__i{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;
  font-size:1rem;font-weight:700;color:var(--txt-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bnc-mov__i--mas{color:#fff}

@media (max-width:900px){
  .bnc-dos{grid-template-columns:1fr}
  .bnc-mov{grid-template-columns:1fr auto auto;gap:.5rem .8rem}
  .bnc-mov__cat{grid-row:2;grid-column:1}
  .bnc-mov__acc{grid-row:2;grid-column:2/-1;justify-self:end}
  .bnc-mov__cat select{width:auto;min-width:11rem}
  .bnc-mov__i{grid-row:1;grid-column:2}
  .adj{grid-template-columns:1fr auto;gap:.4rem .6rem}
  .adj__f{grid-column:1/-1}
}

/* ---------------------------------------------------------------------------
   Del cobro al banco (liquidaciones de Stripe)
   --------------------------------------------------------------------------- */

.liq-barra{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;margin-bottom:1.4rem}
.liq-meses{display:flex;gap:.4rem;flex-wrap:wrap}
.liq-t{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
  font-weight:700;margin:2.2rem 0 .9rem}
.liq-anual{margin:0 0 1.4rem;font-size:.92rem;color:var(--txt-2)}
.liq-anual b{color:#fff}
.liq-nota{margin:.7rem 0 0;font-size:.8rem;color:var(--txt-3)}
.liq-vacio{margin:0;font-size:.9rem;color:var(--txt-3)}
.liq-lio{margin:.4rem 0 0;padding-left:1.1rem;font-size:.88rem}
.liq-lio li{margin-bottom:.25rem}

.liq-tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.liq-tabla th{text-align:left;padding:.5rem .7rem;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  border-bottom:1px solid var(--linea)}
.liq-tabla td{padding:.6rem .7rem;border-bottom:1px solid var(--linea);color:var(--txt-2);
  vertical-align:top}
.liq-tabla td small{display:block;font-size:.78rem;color:var(--txt-3)}
.liq-tabla b{color:#fff}
.liq-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.liq-interna td{color:var(--txt-3)}
.liq-tabla--dentro{margin-top:.7rem;font-size:.85rem}
.liq-tabla--dentro td{border-bottom-color:var(--linea)}

.liq-lista{display:flex;flex-direction:column;gap:.3rem;list-style:none;margin:0;padding:0}
.liq-mov{display:grid;grid-template-columns:10.5rem 1fr auto;gap:1rem;align-items:center;
  padding:.75rem 1rem;border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.liq-mov--pend{border-style:dashed}
.liq-mov__f{font-size:.82rem;color:var(--txt-3);white-space:nowrap}
.liq-mov__q{min-width:0;font-size:.92rem;color:#fff}
.liq-mov__q small{display:block;font-size:.78rem;color:var(--txt-3);font-weight:400}
.liq-mov__i{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}

.liq-pay{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2)}
.liq-pay--suelta{border-style:dashed;border-color:#7A6A35}
.liq-pay summary{display:grid;grid-template-columns:10.5rem 1fr auto;gap:1rem;align-items:center;
  padding:.75rem 1rem;cursor:pointer;list-style:none}
.liq-pay summary::-webkit-details-marker{display:none}
.liq-pay summary:hover{background:var(--neg-4)}
.liq-pay__f{font-size:.82rem;color:var(--txt-3);white-space:nowrap}
.liq-pay__q{min-width:0;font-size:.92rem;color:#fff}
.liq-pay__q small{display:block;font-size:.78rem;color:var(--txt-3);font-weight:400}
.liq-pay__i{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.liq-pay details[open] summary{border-bottom:1px solid var(--linea)}
.liq-pay > details > table,.liq-pay > details > p{margin-inline:1rem}
.liq-pay > details > p:last-child{padding-bottom:.9rem}

@media (max-width:900px){
  .liq-mov,.liq-pay summary{grid-template-columns:1fr auto;gap:.4rem .8rem}
  .liq-mov__f,.liq-pay__f{grid-row:2;grid-column:1;font-size:.76rem}
  .liq-tabla{font-size:.82rem}
  .liq-tabla th,.liq-tabla td{padding:.45rem .4rem}
}

/* Claves puestas, tapadas, en la tarjeta de un ajuste */
.claves{display:grid;gap:.5rem;margin:0 0 1.2rem;padding:.9rem 1rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-3)}
.claves > div{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;
  justify-content:space-between}
.claves dt{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);font-weight:600}
.claves dd{margin:0;font-size:.86rem}
.claves code{font-family:var(--mono);color:var(--txt-2);overflow-wrap:anywhere}

/* ---------------------------------------------------------------------------
   Proyectos duplicados
   --------------------------------------------------------------------------- */

.dups{display:flex;flex-direction:column;gap:.6rem;list-style:none;margin:0 0 1.6rem;padding:0}
.dup{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:.9rem 1.1rem}
.dup__cab{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:baseline;margin-bottom:.7rem}
.dup__cab b{color:#fff;font-size:.95rem}
.dup__cab small{color:var(--txt-3);font-size:.8rem}
.dup__lados{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.dup__lado{padding:.6rem .8rem;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-3);min-width:0}
.dup__lado--queda{border-color:var(--linea-3)}
.dup__lado a{display:block;font-size:.92rem;color:#fff;font-weight:600;overflow-wrap:anywhere}
.dup__lado small{display:block;margin-top:.3rem;font-size:.78rem;color:var(--txt-3);line-height:1.5}
.dup__acc{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.dup__acc form{margin:0}

@media (max-width:760px){
  .dup__lados{grid-template-columns:1fr}
}

/* Aviso de las conversaciones apartadas por no ser del trabajo */
.wa-apartados{margin:-.8rem 0 1.2rem;font-size:.85rem;color:var(--txt-3)}
.wa-apartados b{color:var(--txt-2)}

/* Stripe dentro de la pantalla del banco */
/* El detalle de Stripe lo abre el icono de la fila. La casilla va justo antes
   del apunte, así que con `+ .bnc-mov + .bnc-dentro` se abre ese y solo ese —
   sin una línea de JavaScript. */
.bnc-dentro{display:none;margin:-.15rem 0 .45rem}
.mov-abre:checked + .bnc-mov + .bnc-dentro{display:block}
.mov-abre:checked + .bnc-mov .movico--stripe{color:#fff;border-color:var(--linea-3);background:var(--neg-4)}
.bnc-dentro > table{margin:0 1rem .6rem}
.bnc-stripe-mas{margin:1.6rem 0 0;border-top:1px solid var(--linea);padding-top:1rem}
.bnc-stripe-mas summary{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;cursor:pointer}
.bnc-stripe-mas summary:hover{color:#fff}
.bnc-stripe-mas > *{margin-top:1rem}

/* «Estás mirando otro mes» / última lectura del banco */
.bnc-mes-otro{margin:0 0 1rem;font-size:.85rem;color:var(--txt-3)}
.bnc-mes-otro b{color:var(--txt-2)}
.bnc-cta__saldo{font-family:inherit !important;font-size:1.15rem !important;
  font-weight:800;letter-spacing:-.02em;color:#fff !important;line-height:1.2}

/* ---------------------------------------------------------------------------
   Correos. Reutiliza la bandeja de WhatsApp (.wa); aquí solo va lo suyo: el
   asunto, los correos largos plegados y los adjuntos.
   ------------------------------------------------------------------------- */
.cor-estado{margin:0 0 1rem;font-size:.85rem;color:var(--txt-3)}
.cor-estado b{color:var(--txt)}
.cor-msj{max-width:min(78%,44rem)}
.cor-asunto{margin:0 0 .35rem;font-weight:700;color:#fff;font-size:.9rem}
.cor-largo summary{cursor:pointer;color:var(--txt-2)}
.cor-largo summary span{color:var(--txt-3);text-decoration:underline}
.cor-largo[open] summary{color:var(--txt-3);margin-bottom:.5rem}
.cor-largo[open] summary span{display:none}
.cor-adj{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 0}
.cor-adj a{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;
  border:1px solid var(--linea);border-radius:999px;font-size:.76rem;color:var(--txt-2)}
.cor-adj a:hover{border-color:var(--linea-3);color:#fff}
.cor-adj svg{width:.85rem;height:.85rem}
.cor-adj small{color:var(--txt-3)}

/* De qué canal salió un apunte. La ficha de un cliente junta WhatsApp y correo
   a propósito; esto es lo que evita que parezcan lo mismo. */
.eti--canal{display:inline-flex;align-items:center;gap:.28rem}
.eti--canal svg{width:.78rem;height:.78rem;opacity:.7}

/* ---------------------------------------------------------------------------
   Hacer una factura contándole a la IA qué has hecho
   ------------------------------------------------------------------------- */
.enc--con-acc{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.facnueva{display:flex;flex-direction:column;gap:1.2rem}
.facnueva__caja{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.3rem 1.4rem}
/* ⚠️ Los campos hay que vestirlos aquí: el estilo oscuro del portal cuelga de
   `.admform`, y sin él los <input> salen con el blanco del navegador — que en
   una pantalla negra es un fogonazo. */
.facnueva{color-scheme:dark}
.facnueva__caja label{display:block;margin-bottom:.9rem;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.facnueva__caja label small{color:var(--txt-3);font-weight:400;text-transform:none;letter-spacing:0}
.facnueva input[type=text],.facnueva select,.facnueva textarea{
  width:100%;margin-top:.3rem;padding:.55rem .7rem;font:inherit;font-size:.95rem;color:#fff;
  background:var(--neg);border:1px solid var(--linea-2);border-radius:var(--r);
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.facnueva textarea{resize:vertical;line-height:1.5}
.facnueva select{appearance:none;-webkit-appearance:none;padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:.85rem}
.facnueva option{background:#0A0A0A;color:#fff}
.facnueva input:focus,.facnueva select:focus,.facnueva textarea:focus{
  outline:none;border-color:#fff;background:var(--neg-3)}
.facnueva ::placeholder{color:var(--txt-3);opacity:.75}
.facnueva__fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0 .9rem}
.facnueva__acc{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

.faclineas{width:100%;border-collapse:collapse;margin:.4rem 0 1rem}
.faclineas th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);
  text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--linea)}
.faclineas th.num,.faclineas td.num{text-align:right}
.faclineas td{padding:.35rem .5rem;vertical-align:top;border-bottom:1px solid var(--linea)}
.faclineas td.num{width:6.5rem}
.faclineas input{width:100%}
.faclineas td.num input{text-align:right}
.faclineas__desc{margin-top:.25rem;font-size:.8rem}
.faclineas__base{font-family:var(--mono);font-size:.86rem;color:#fff;padding-top:.75rem;
  font-variant-numeric:tabular-nums}

.factotales{display:flex;flex-direction:column;gap:.25rem;margin:0 0 .4rem;align-items:flex-end}
.factotales > div{display:flex;gap:1.2rem;justify-content:flex-end;min-width:14rem}
.factotales dt{font-size:.82rem;color:var(--txt-3)}
.factotales dd{margin:0;min-width:6rem;text-align:right;font-family:var(--mono);
  font-size:.88rem;color:var(--txt);font-variant-numeric:tabular-nums}
.factotales__total dt{color:#fff;font-weight:700}
.factotales__total dd{color:#fff;font-weight:700;font-size:1.05rem}

@media (max-width:640px){
  .faclineas td.num{width:4.6rem}
  .faclineas__desc{display:none}
}

/* ---------------------------------------------------------------------------
   La agenda: el mes a la izquierda, lo que viene a la derecha
   ------------------------------------------------------------------------- */
.ag{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;align-items:start}
.ag__cal{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);padding:1.2rem 1.3rem}
.ag__cab{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.ag__cab h2{flex:1;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#fff;
  text-transform:capitalize;margin:0}
.ag__cab .bt{padding:.35rem .55rem}
.ag__cab svg{width:1rem;height:1rem}

.ag__rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.ag__dow{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  text-align:center;padding:.3rem 0 .5rem}
.ag__dia{position:relative;min-height:5.2rem;padding:.3rem;border:1px solid var(--linea);
  border-radius:6px;background:var(--neg);display:flex;flex-direction:column;gap:2px}
.ag__dia--fuera{border-color:transparent;background:transparent}
.ag__dia.es-hoy{border-color:#fff}
.ag__num{font-family:var(--mono);font-size:.72rem;color:var(--txt-3);padding:.1rem .15rem}
.ag__dia.es-hoy .ag__num{color:#fff;font-weight:700}

.ag-ev{display:block;padding:.16rem .3rem;border-radius:4px;font-size:.68rem;line-height:1.25;
  color:var(--txt-2);background:var(--neg-3);border-left:2px solid var(--linea-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-ev b{font-family:var(--mono);color:#fff;margin-right:.2rem}
.ag-ev:hover{background:var(--neg-4);color:#fff}
.ag-ev--solicitada{border-left-color:#E8CE7A}
.ag-ev--confirmada{border-left-color:#6FD3A0}
.ag-ev--cancelada{border-left-color:#7A3535;opacity:.5;text-decoration:line-through}
.ag-ev--bloqueo{border-left-color:#8a8a8a;background:repeating-linear-gradient(135deg,
  var(--neg-3),var(--neg-3) 4px,var(--neg-2) 4px,var(--neg-2) 8px)}
.ag-ev--mas{color:var(--txt-3);border-left-color:transparent;background:transparent}

.ag__leyenda{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:1rem 0 0;
  font-size:.72rem;color:var(--txt-3)}
.ag-mu{display:inline-block;width:.55rem;height:.55rem;border-radius:2px;margin-left:.5rem}
.ag-mu--solicitada{background:#E8CE7A}
.ag-mu--confirmada{background:#6FD3A0}
.ag-mu--bloqueo{background:#8a8a8a}

.ag-lista{display:flex;flex-direction:column;gap:.15rem}
.ag-fila{display:grid;grid-template-columns:3rem 1fr auto;gap:.2rem .8rem;align-items:start;
  padding:.6rem .5rem;border-radius:var(--r);border-bottom:1px solid var(--linea)}
.ag-fila:last-child{border-bottom:0}
.ag-fila:target{background:var(--neg-4)}
.ag-fila.es-bloqueo{opacity:.8}
.ag-fila__cuando{display:flex;flex-direction:column;font-family:var(--mono);line-height:1.3}
.ag-fila__cuando b{font-size:.86rem;color:#fff}
.ag-fila__cuando span{font-size:.74rem;color:var(--txt-3)}
.ag-fila__q{min-width:0}
.ag-fila__q b{display:block;font-size:.9rem;color:#fff}
.ag-fila__q small{display:block;font-size:.75rem;color:var(--txt-3);line-height:1.45}
.ag-fila__motivo{color:var(--txt-2)!important;margin-top:.15rem}
.ag-fila__acc{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
@media (min-width:901px) and (max-width:1500px){
  /* La columna de la derecha es estrecha: los botones debajo, no al lado. */
  .ag-fila{grid-template-columns:3rem 1fr}
  .ag-fila__acc{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;margin-top:.3rem}
}
.ag-fila__f{display:flex;gap:.3rem;margin:0}

@media (max-width:900px){
  .ag{grid-template-columns:1fr}
  .ag__dia{min-height:3.6rem}
  .ag-ev{font-size:.6rem}
}

/* ---------------------------------------------------------------------------
   Las jornadas: qué horas se pueden pedir desde la web

   Los siete días en una rejilla y no en una lista larga: la semana se lee de
   un vistazo y se ve enseguida cuál está en blanco, que es justo la pregunta
   que se viene a contestar aquí.
   ------------------------------------------------------------------------- */
.jor{margin-top:1.2rem;border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-2);padding:1.2rem 1.3rem}
.jor__enc{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem}
.jor__enc h2{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0 0 .25rem}
.jor__enc p{font-size:.86rem;color:var(--txt-3);line-height:1.5;margin:0;max-width:56ch}

.jor__quienes{display:flex;gap:.3rem;flex-wrap:wrap}
.jor__quien{padding:.35rem .7rem;border:1px solid var(--linea);border-radius:999px;
  font-size:.8rem;color:var(--txt-2);background:var(--neg)}
.jor__quien:hover{border-color:var(--linea-3);color:#fff}
.jor__quien.esta{border-color:#fff;color:#fff;background:var(--neg-4)}
.jor__quien i{color:var(--txt-3);font-style:normal}

.jor__resumen{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  font-size:.88rem;color:var(--txt-2)}
.jor__resumen svg{width:1rem;height:1rem;color:#6FD3A0;flex:0 0 auto}

/* Un día por fila y no siete columnas: en columnas, los relojes del navegador
   —que en inglés escriben «09:00 AM»— no caben y se comen unos a otros. En fila
   sobra sitio y encima se lee como lo que es, un horario. */
.jor__dias{display:grid;gap:.35rem}
.jor__dia{display:grid;grid-template-columns:9rem minmax(0,1fr);align-items:center;gap:.5rem .9rem;
  border:1px solid var(--linea);border-radius:var(--r);background:var(--neg);
  padding:.5rem .7rem;opacity:.55;transition:opacity .15s ease,border-color .15s ease}
.jor__dia.esta{opacity:1;border-color:var(--linea-3)}
.jor__cab{display:flex;align-items:center;gap:.5rem;cursor:pointer;
  font-size:.85rem;font-weight:700;color:#fff}
.jor__cab input{width:1rem;height:1rem;accent-color:#fff;flex:0 0 auto}
.jor__tramos{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem}
.jor__tramo{display:flex;align-items:center;gap:.4rem}
.jor__tramo span{color:var(--txt-3);font-size:.8rem}
.jor__tramo input{width:auto;min-width:0;padding:.35rem .5rem;font-family:var(--mono);
  font-size:.82rem;color:#fff;background:var(--neg-3);border:1px solid var(--linea);
  border-radius:6px;color-scheme:dark}
.jor__tramo input:focus{outline:none;border-color:#fff}
.jor__dia:not(.esta) .jor__tramo input{color:var(--txt-3)}

.jor__ayuda{margin:.8rem 0 0;font-size:.8rem;color:var(--txt-3);line-height:1.6}

.jor__reglas{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:end;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linea);color-scheme:dark}
.jor__reglas label{display:grid;gap:.3rem;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.jor__con{display:flex;align-items:center;gap:.35rem}
.jor__con i{font-style:normal;font-size:.72rem;color:var(--txt-3);text-transform:none;letter-spacing:0}
.jor__reglas input[type=number]{width:4.6rem}
.jor__reglas input[type=email]{width:14rem}
.jor__reglas input{padding:.45rem .55rem;font:inherit;font-size:.85rem;color:#fff;
  background:var(--neg);border:1px solid var(--linea);border-radius:6px}
.jor__reglas input:focus{outline:none;border-color:#fff;background:var(--neg-3)}
.jor__marca{display:flex!important;align-items:center;gap:.45rem;font-size:.8rem!important;
  font-weight:400!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--txt-2)!important;cursor:pointer}
.jor__marca input{width:1rem;height:1rem;accent-color:#fff}

.jor__pie{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem}
.jor__pie .admform__nota{margin:0}

.jor__mas{margin-top:1.1rem;border-top:1px solid var(--linea);padding-top:.8rem}
.jor__mas summary{font-size:.82rem;color:var(--txt-3);cursor:pointer}
.jor__mas summary:hover{color:#fff}
.jor__masc{padding-top:.8rem}
.jor__masc>p{font-size:.84rem;color:var(--txt-3);line-height:1.55;margin:0 0 .8rem;max-width:70ch}
.jor__masc .admform--fila input[type=text]{max-width:none;width:13rem}
.jor__baja{margin-top:.8rem}

@media (max-width:640px){
  .jor__dia{grid-template-columns:1fr}
  .jor__reglas input[type=email]{width:100%}
}
/* De qué va la reunión, en la lista de la agenda. */
.ag-fila__srv{color:#fff!important;font-weight:600}