/* ==========================================================================
   PORTAL DE CLIENTES · jesussolaz.com
   --------------------------------------------------------------------------
   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__izq{display:flex;align-items:center;gap:.75rem;min-width:0}
.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}
/* El nombre de la empresa, pequeño, bajo el de la persona que ha entrado.
   ⚠️ Va aquí y no al final de la hoja: estaba escrito después del bloque del
   móvil, ganaba por orden al `display:none` de ese bloque y en el teléfono el
   nombre completo —que no parte— se montaba encima de la marca. */
.cab__quien{display:flex;flex-direction:column;line-height:1.25;text-align:right;
  font-size:.82rem;color:var(--txt-2);white-space:nowrap}
.cab__quien small{font-size:.72rem;color:var(--txt-3)}

/* Texto que solo leen los lectores de pantalla: el botón del menú es un icono. */
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* El botón del menú del móvil. En pantalla ancha no existe: el menú está
   siempre a la vista en la columna de la izquierda. */
.cab__men{display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:42px;height:42px;margin-left:-.5rem;padding:0;cursor:pointer;
  background:transparent;border:1px solid transparent;color:#fff;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.cab__men:hover{border-color:var(--linea-2);background:var(--neg-3)}
.cab__men svg{width:22px;height:22px}
.cab__men .men-ic--x{display:none}
.cab__men[aria-expanded="true"] .men-ic{display:none}
.cab__men[aria-expanded="true"] .men-ic--x{display:block}

.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
   ========================================================================== */
/* ⚠️ Antes el menú del móvil era una tira horizontal que se deslizaba. No
   valía: con la barra de desplazamiento escondida no había manera de saber que
   a la derecha seguía habiendo entradas, los títulos de los grupos («Portal»,
   «Trámites pendientes», «Cuenta») se quitaban para que cupiera y el aviso de
   firma pendiente desaparecía entero. Ahora es un menú a pantalla completa que
   se abre con el botón de la cabecera, con todo lo que hay en el de escritorio.
   Empieza en 64px, que es justo el alto de la cabecera. */
@media (max-width:900px){
  .cuerpo{grid-template-columns:1fr}
  .cab__men{display:inline-flex}
  .cab__quien{display:none}

  .lateral{
    display:none;
    position:fixed;inset:64px 0 0;z-index:55;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--neg);border-right:0;border-bottom:0;
    padding:1.1rem 0 3rem;
    animation:men-entra .2s var(--ease);
  }
  body.men-abierto .lateral{display:block}
  /* Con el menú abierto la página de detrás no se mueve. */
  body.men-abierto{overflow:hidden}

  .men{padding-inline:var(--marco)}
  .men a{padding:.8rem .7rem;font-size:1rem}
  .men__t{margin-top:1.8rem}
  .men__aviso{margin-inline:.7rem}

  .principal{padding-top:1.5rem}
  .rej-2,.rej-3{grid-template-columns:1fr}
}
@keyframes men-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform: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 svg{
  display:inline-block;width:1em;height:1em;margin-right:.3em;vertical-align:-.14em;
}
.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__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem}
/* Todo el menú menos la marca: en el móvil es lo que se despliega de una pieza. */
.admlat__panel{display:flex;flex-direction:column;flex:1 1 auto;min-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 una barra con la marca y el botón, y el menú entero desplegándose
     por debajo a pantalla completa: catorce entradas no caben en una columna
     por encima del contenido, y en una tira horizontal la mitad se quedaban
     fuera de la pantalla sin nada que lo indicara.
     ⚠️ El panel va `position:absolute` y NO `fixed`: `.admlat` lleva
     `backdrop-filter`, y eso convierte al elemento en el marco de referencia de
     todo lo `fixed` que haya dentro (el panel se quedaría del alto de la barra).
     Por eso la barra tiene un alto fijo de 56px: es de donde arranca el panel. */
  .adm{grid-template-columns:1fr;min-height:0}
  /* ⚠️ `min-width:0`, o el contenido del menú estira la columna y es la PÁGINA
     la que se desliza a lo ancho. Una casilla de rejilla mide por defecto lo
     que su contenido, y aquí el contenido no cabe. */
  .adm > *{min-width:0}
  .admlat{display:block;position:sticky;top:0;z-index:60;height:auto;overflow:visible;
    border-right:0;border-bottom:1px solid var(--linea);padding:0;
    background:rgba(10,10,10,.94);backdrop-filter:blur(14px)}
  .admlat__barra{min-height:56px;padding:.4rem var(--marco)}
  .admlat__logo{display:flex;align-items:baseline;gap:.5rem;padding:0}
  .admlat__logo span{display:inline;font-size:.68rem}

  .admlat__panel{
    display:none;
    position:absolute;top:56px;left:0;right:0;height:calc(100dvh - 56px);
    z-index:55;background:var(--neg);border-top:1px solid var(--linea);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:1rem 0 2.5rem;animation:men-entra .2s var(--ease);
  }
  body.men-abierto .admlat__panel{display:flex}

  .admlat .men{padding-inline:var(--marco)}
  .admlat .men a{padding:.8rem .7rem;font-size:1rem}
  .admlat__pie{padding:1.2rem var(--marco) 0;margin-top:1rem}
  .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}
/* 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}

/* ============================================================ CONFIGURADOR
   Presupuestos que el cliente arma él: mejoras del equipo y extras. La pantalla
   es de elegir, no de leer, así que cada opción es un objetivo grande de pulsar
   —45 px de alto largo— y el precio va siempre a la derecha, alineado, para que
   se puedan comparar de un vistazo sin leerse el texto.
   Negro y blanco estricto, como el resto del portal: lo elegido se distingue
   por el marco y el fondo, nunca por color. */

.cfg{
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-2);
  margin:2.6rem 0;padding:clamp(1.2rem,3vw,2.2rem);
}
.cfg__cab{max-width:64ch;margin-bottom:1.8rem}
.cfg__sup{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:.5rem;
}
.cfg__cab h2{font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.2;margin-bottom:.7rem;color:var(--blanco)}
.cfg__int{color:var(--txt-2);font-size:.95rem}
.cfg__int b{color:var(--txt)}

.cfg__grupo{border:0;padding:0;margin:0 0 2rem}
.cfg__grupo legend{
  font-size:1.02rem;font-weight:600;color:var(--blanco);
  padding:0;margin-bottom:.35rem;
}
.cfg__ayuda{color:var(--txt-3);font-size:.87rem;margin-bottom:.9rem;max-width:62ch}

.cfg__ops{display:grid;gap:.6rem}

.cfg__op{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;gap:.9rem;
  padding:.95rem 1.1rem;
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--neg-3);
  cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.cfg__op:hover{border-color:var(--linea-2);background:var(--neg-4)}
.cfg__op.es-elegida{border-color:var(--linea-3);background:var(--neg-4)}
.cfg__op input{position:absolute;opacity:0;width:0;height:0}
.cfg__op:focus-within{outline:2px solid var(--linea-3);outline-offset:2px}

/* La marca: círculo para «elige una», cuadro para «añade las que quieras». */
.cfg__marca{
  width:18px;height:18px;margin-top:.2rem;flex:none;
  border:1px solid var(--linea-3);border-radius:50%;
  display:block;position:relative;
}
.cfg__op input[type=checkbox]+.cfg__marca{border-radius:2px}
.cfg__op.es-elegida .cfg__marca{background:var(--blanco);border-color:var(--blanco)}
.cfg__op.es-elegida .cfg__marca::after{
  content:"";position:absolute;inset:0;
  background:var(--neg);
  clip-path:polygon(16% 52%,38% 74%,84% 26%,92% 36%,38% 90%,8% 60%);
  transform:scale(.78);
}
.cfg__op input[type=radio]:checked+.cfg__marca::after{
  clip-path:none;border-radius:50%;transform:scale(.42);
}

.cfg__txt{display:block;min-width:0}
.cfg__txt b{display:block;color:var(--blanco);font-weight:600;line-height:1.35}
.cfg__txt small{display:block;color:var(--txt-2);font-size:.86rem;margin-top:.2rem}
.cfg__impacto{
  display:block;font-style:normal;font-size:.86rem;margin-top:.45rem;
  padding-left:.7rem;border-left:1px solid var(--linea-2);
  color:var(--txt);
}

.cfg__precio{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--blanco);font-weight:600;
  font-size:.95rem;margin-top:.15rem;
}

/* El pie: lo que suma todo, pegado abajo al desplazar. */
.cfg__pie{
  position:sticky;bottom:0;
  display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:flex-end;
  margin:.4rem -.4rem -.4rem;padding:1.1rem 1.2rem;
  border:1px solid var(--linea-2);border-radius:var(--r);
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(8px);
}
.cfg__suma{display:flex;flex-direction:column;gap:.1rem}
.cfg__suma span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.cfg__suma b{font-size:clamp(1.3rem,3.4vw,1.7rem);color:var(--blanco);font-variant-numeric:tabular-nums;line-height:1.15}
.cfg__suma small{font-size:.8rem;color:var(--txt-3)}
.cfg__suma--sub b{font-size:1.1rem}
.cfg__suma.es-vacia{display:none}
.cfg__nota{flex:1 1 100%;font-size:.83rem;color:var(--txt-3);min-height:1.2em;margin:0}
.cfg__nota.es-ok{color:var(--txt-2)}
.cfg__nota.es-mal{color:var(--blanco)}

@media (max-width:640px){
  .cfg__op{grid-template-columns:auto 1fr;row-gap:.5rem}
  .cfg__precio{grid-column:2;text-align:left}
  .cfg__pie{gap:1rem 1.6rem}
}
@media (prefers-reduced-motion:reduce){
  .cfg__op{transition:none}
}

/* ==========================================================================
   PÁGINAS · el explorador de carpetas
   ==========================================================================
   Una sola lista: las carpetas son filas como las demás y se entra pulsándolas.
   Lo que no está en ninguna sale ahí mismo, mezclado, que es como se busca. */

/* Migas de pan: dónde estoy y cómo salgo. */
.migas{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:.5rem;font-size:.85rem;color:var(--txt-3);
}
.migas a{color:var(--txt-2)}
.migas a:hover{color:#fff}
.migas b{color:var(--txt)}
.migas span{color:var(--linea-3)}
.migas__atras{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .55rem .2rem .35rem;margin-right:.3rem;
  border:1px solid var(--linea);border-radius:999px;
}
.migas__atras svg{width:13px;height:13px}
.migas__atras:hover{border-color:var(--linea-3)}

/* La fila de una carpeta: el nombre entra, y debajo lo que tiene dentro. */
.carp-nom{display:inline-flex;align-items:center;gap:.5rem;color:inherit}
.carp-nom svg{width:15px;height:15px;flex:none;opacity:.55}
.carp-nom:hover svg{opacity:1}
.carp-dentro{display:block;margin-top:.2rem;font-size:.78rem;color:var(--txt-3)}
.fila-carp td{background:var(--neg-2)}
table.t tbody tr.fila-carp:hover td{background:var(--neg-3)}

/* Renombrar y borrar, plegados: en la tabla solo se ve «Editar». */
.carp-acc>summary{cursor:pointer;list-style:none;font-size:.8rem;color:var(--txt-3)}
.carp-acc>summary::-webkit-details-marker{display:none}
.carp-acc>summary::marker{content:''}
.carp-acc>summary:hover{color:#fff}
.carp-acc__caja{
  display:grid;gap:.7rem;margin-top:.7rem;padding:.85rem;
  border:1px solid var(--linea);background:var(--neg-3);
  text-align:left;min-width:15rem;
}
.carp-acc__caja .admform--fila input[type=text]{max-width:none;flex:1 1 8rem}

/* La columna de las casillas: lo justo para que quepan. */
table.t th.marca,table.t td.marca{width:1%;padding-right:.4rem}
table.t input[type=checkbox]{width:1rem;height:1rem;accent-color:#fff;cursor:pointer}

/* La barra de acciones, pegada debajo de su tabla. */
.marcado{
  margin-top:-1px;padding:.85rem 1rem;
  border:1px solid var(--linea);background:var(--neg-2);
}
.marcado__t{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);
}

/* Debajo de todo: crear carpeta aquí, y el recuento de lo que se enseña. */
.pie-lista{display:grid;gap:.6rem;margin-top:1.1rem}

/* Los campos de texto de un formulario en fila que sí necesitan sitio (el
   nombre de una carpeta, el buscador). */
.admform--fila input[type=text].ancho{max-width:none;flex:1 1 14rem;min-width:9rem}

/* Las direcciones son largas de verdad —taxibac tiene caminos de 200 letras—:
   se parten donde haga falta en vez de estirar la tabla hasta el infinito. */
table.t td.dir-cel{max-width:34rem}
table.t td.dir-cel a{overflow-wrap:anywhere;color:var(--txt)}
table.t td.dir-cel a:hover{color:#fff}

/* ---------- Páginas · clics por mes --------------------------------------
   Doce barras, una por mes cerrado. El color no adorna: dice si ese mes fue
   mejor o peor que el anterior, que es lo único que se mira de un vistazo.

   Son los dos únicos colores de todo el panel, y están elegidos para tener
   contraste de sobra sobre el negro: los verdes y rojos «de marca» se apagan
   sobre fondo oscuro y quedan sucios. */
:root{
  --sube:#3FB950;
  --baja:#F85149;
}

table.t th.graf,table.t td.graf{width:1%;white-space:nowrap;padding-right:1.4rem}
.barras{display:block}
.barras__suelo{stroke:var(--linea);stroke-width:1}
.barras__b{pointer-events:none}
.barras__b--sube{fill:var(--sube)}
.barras__b--baja{fill:var(--baja)}
.barras__b--igual{fill:var(--txt-3)}
/* La zona de paso del ratón: invisible, pero es la que lleva el rótulo. */
.barras__z{fill:transparent}
.barras__z:hover{fill:rgba(255,255,255,.07)}
.graf__nada{color:var(--txt-3)}

/* La leyenda, debajo de la tabla. Los cuadraditos repiten el color para quien
   no distinga verde de rojo: al lado va escrito qué es cada uno. */
.leyenda{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center;
  font-size:.82rem;color:var(--txt-3)}
.leyenda i{display:inline-block;width:.6rem;height:.6rem;margin-right:.35rem;
  vertical-align:baseline;font-style:normal}
.leyenda i.sube{background:var(--sube)}
.leyenda i.baja{background:var(--baja)}
.leyenda i.igual{background:var(--txt-3)}

/* ==========================================================================
   Pagos recurrentes · el calendario de vencimientos
   El verde y el rojo solo dicen «ya pagado» / «se pasó de fecha», como en el
   resto del portal (mismos tonos que el beneficio del banco).
   ========================================================================== */
.pag-cal{border:1px solid var(--linea);border-radius:var(--r);background:var(--neg-2);overflow:hidden}
.pag-cal__mes{padding:.55rem .9rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);background:var(--neg-3);border-bottom:1px solid var(--linea);border-top:1px solid var(--linea)}
.pag-cal__mes:first-child{border-top:0}
.pag-cal__fila{display:grid;grid-template-columns:2.2rem 1fr auto 5.5rem;align-items:center;gap:.6rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--linea)}
.pag-cal__fila:last-child{border-bottom:0}
.pag-cal__dia{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:#fff;text-align:center}
.pag-cal__con{min-width:0}
.pag-cal__con b{display:block;color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pag-cal__con small{display:block;color:var(--txt-3);font-size:.74rem}
.pag-cal__imp{font-family:var(--mono);font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.pag-cal__est{font-size:.74rem;color:var(--txt-3);text-align:right}
.pag-cal__fila.es-pagado .pag-cal__dia,
.pag-cal__fila.es-pagado .pag-cal__est{color:#6FD3A0}
.pag-cal__fila.es-pagado{opacity:.72}
.pag-cal__fila.es-atrasado .pag-cal__dia,
.pag-cal__fila.es-atrasado .pag-cal__est{color:#e8a0a0}
/* El formulario de alta: los campos fluyen y se ajustan al ancho. */
.pag-nuevo{display:flex;flex-wrap:wrap;gap:.7rem .8rem;align-items:flex-end}
.pag-nuevo label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--txt-3)}
.pag-nuevo label.admform__check{flex-direction:row;align-items:center;gap:.35rem}
@media (max-width:560px){
  .pag-cal__fila{grid-template-columns:2rem 1fr auto;grid-template-areas:"dia con imp" "dia est est"}
  .pag-cal__est{grid-area:est;text-align:left}
}

/* ==========================================================================
   Asistente financiero · la burbuja flotante (solo en el panel de admin)
   ========================================================================== */
#fin-bot{position:fixed;right:18px;bottom:18px;z-index:900;font-size:14px}
#fin-bot-abrir{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.05rem;border:1px solid var(--linea-3);
  border-radius:100px;background:var(--neg-2);color:#fff;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.55);
  font-weight:600;letter-spacing:-.01em}
#fin-bot-abrir:hover{background:var(--neg-3);border-color:#fff}
#fin-bot-abrir svg{width:18px;height:18px}
#fin-bot.abierto #fin-bot-abrir{display:none}
#fin-bot-panel{display:flex;flex-direction:column;width:min(94vw,380px);height:min(72vh,560px);
  border:1px solid var(--linea-3);border-radius:12px;background:var(--neg);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.7)}
#fin-bot-panel>header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;
  border-bottom:1px solid var(--linea);background:var(--neg-2)}
#fin-bot-panel>header b{color:#fff}
#fin-bot-cerrar{background:none;border:0;color:var(--txt-3);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
#fin-bot-cerrar:hover{color:#fff}
#fin-bot-hilo{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.fin-bot-msg{max-width:85%;padding:.6rem .8rem;border-radius:12px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.fin-bot-msg--bot{align-self:flex-start;background:var(--neg-3);border:1px solid var(--linea);color:var(--txt)}
.fin-bot-msg--yo{align-self:flex-end;background:#fff;color:#000;font-weight:500}
.fin-bot-msg--pensando{color:var(--txt-3);font-style:italic}
.fin-bot-msg--error{border-color:#7d3535;color:#e8a0a0}
#fin-bot-form{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem;border-top:1px solid var(--linea);background:var(--neg-2)}
#fin-bot-texto{flex:1;resize:none;max-height:120px;padding:.55rem .7rem;border:1px solid var(--linea-2);
  border-radius:10px;background:var(--neg);color:var(--txt);font:inherit;line-height:1.4}
#fin-bot-texto:focus{outline:none;border-color:#fff}
#fin-bot-enviar{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#000;
  font-size:1.15rem;font-weight:700;cursor:pointer}
#fin-bot-enviar:disabled{opacity:.4;cursor:default}
@media (max-width:560px){
  #fin-bot{right:12px;bottom:12px;left:12px}
  #fin-bot-panel{width:auto}
}