/* FK Home · Gestión — identidad real de FK Home.
   Negro #1D1D1B · Dorado #FBCB00 · Dorado profundo #C9971B
   Criterio: pantallas simples, pocas cosas a la vez, targets grandes. */

:root{
  --negro:#1D1D1B;
  --dorado:#FBCB00;
  --dorado-hondo:#C9971B;
  --blanco:#FFFFFF;
  --gris-fondo:#F4F4F2;
  --gris-linea:#E6E5DF;
  --gris-texto:#6B6B66;
  --rojo:#B3261E;
  --verde:#1B7A3D;
  --radio:12px;

  /* El degradado dorado de la marca: del amarillo limpio al dorado quemado.
     Es lo que viste la pestaña activa y los acentos, en vez de un color plano. */
  --oro-degradado:linear-gradient(170deg,#FFD83D 0%,var(--dorado) 34%,#E0A81A 72%,var(--dorado-hondo) 100%);
  --oro-suave:linear-gradient(170deg,#FFE48A 0%,#F3D06A 100%);

  /* FK Home se ve moderno y limpio: la profundidad la da la sombra, no otro
     borde. Caja sobre caja sobre caja es justo lo que rompe esa estetica. */
  --sombra:0 1px 2px rgba(29,29,27,.04), 0 8px 24px -12px rgba(29,29,27,.14);
  --sombra-alta:0 2px 4px rgba(29,29,27,.05), 0 18px 40px -18px rgba(29,29,27,.22);

  --barra-alto:84px;
}

*{box-sizing:border-box;}

/* `hidden` esconde, siempre.
   El navegador lo resuelve con `display:none`, pero CUALQUIER regla que le ponga
   un `display` a ese elemento le gana: `.campo{display:flex}` dejaba a la vista
   tres casillas que el formulario habia escondido —«Valor», «Base» y «Porcentaje»
   juntas y las tres con asterisco— y `.aviso` y `.pista-persona` pintaban
   recuadros vacios. El JavaScript hacia lo correcto; la hoja de estilos lo
   deshacia. Con esto, lo que se esconde queda escondido en toda la app. */
[hidden]{display:none !important;}
body{
  margin:0;
  color:var(--negro);
  /* Montserrat es la familia de la marca: la usa el propio sitio de FK Home.
     El sistema queda de respaldo por si la fuente no carga. */
  font:16px/1.5 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* El fondo no es un gris plano: lleva un halo dorado muy abierto arriba a la
     derecha y aclara hacia el centro. Se nota como "limpio", no como color. */
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(251,203,0,.10), transparent 62%),
    radial-gradient(900px 520px at 4% 102%, rgba(201,151,27,.07), transparent 60%),
    linear-gradient(176deg,#FAF9F5 0%,#F2F1EA 58%,#EFEEE6 100%);
  background-attachment:fixed;
  min-height:100vh;
}

/* La marca de agua: el isotipo, grande y casi invisible, anclado a la ventana.
   `fixed` + `pointer-events:none` para que no se mueva al bajar ni estorbe un
   clic. Al 3,5 % se percibe como textura de la marca, no como un logo pegado. */
body::before{
  content:''; position:fixed; inset:auto -7% -14% auto;
  width:min(640px,62vw); aspect-ratio:1;
  background:url('isotipo-fkhome.svg') no-repeat center/contain;
  opacity:.035; pointer-events:none; z-index:0;
}

/* Barra superior ---------------------------------------------------------- */
.barra{
  position:relative; z-index:30;
  display:flex; align-items:stretch;
  height:var(--barra-alto);
  background:linear-gradient(180deg,#232320 0%,var(--negro) 100%);
  color:var(--blanco);
  padding:0 30px;
  /* La linea dorada del pie de la barra tambien es degradada: es el remate de
     la franja, no un subrayado suelto. */
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--dorado-hondo),var(--dorado) 45%,#FFE066 70%,var(--dorado-hondo)) 1;
}
.marca{
  display:flex; align-items:center; gap:18px; text-decoration:none; color:var(--blanco);
  flex:0 0 auto; padding-right:4px;
}
.marca-logo{height:46px; width:auto; display:block;}
/* El nombre del modulo va separado del logotipo por una linea: la marca es de FK
   Home, "Gestion de arriendos" es de esta app. No se mezclan. */
.marca-modulo{
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#9A9A94;
  padding-left:16px; border-left:1px solid #3A3A36; line-height:1.3; white-space:nowrap;
}
/* En pantallas angostas el logotipo se basta solo: la etiqueta estorba. */
@media (max-width:1240px){ .marca-modulo{display:none;} }

/* Las pestañas van CENTRADAS en la franja: la marca manda a la izquierda, el
   perfil se va al extremo derecho y la navegacion queda sola en el medio, que es
   donde el ojo la busca. `flex:1` sobre el centro es lo que empuja los extremos.

   La activa ocupa TODO el alto de la barra, de borde a borde. Un recuadro
   redondeado flotando sobre la franja negra es caja sobre caja — justo lo que
   rompe la estetica limpia de FK Home. */
.nav{display:flex; flex:1 1 auto; justify-content:center; align-items:stretch; min-width:0;}
.nav a{
  display:flex; align-items:center; position:relative;
  color:#E3E3DE; text-decoration:none; padding:0 24px;
  font-weight:600; font-size:15px; white-space:nowrap;
  transition:color .16s ease, background-color .16s ease;
}
/* El hover se insinua con un velo y una linea dorada abajo, sin dibujar caja. */
.nav a::after{
  content:''; position:absolute; left:24px; right:24px; bottom:0; height:2px;
  background:var(--dorado); opacity:0; transition:opacity .16s ease;
}
.nav a:hover{color:var(--blanco); background:rgba(255,255,255,.05);}
.nav a:hover::after{opacity:.55;}

.nav a.activo{
  background:var(--oro-degradado);
  color:var(--negro); font-weight:700;
  /* Un brillo interno arriba: le da el volumen de metal en vez de amarillo plano. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 24px -16px rgba(0,0,0,.35);
}
.nav a.activo::after{opacity:0;}
.nav a:focus-visible{outline:2px solid var(--dorado); outline-offset:-4px;}
/* Con siete pestañas —el administrador ve Finanzas— la franja se aprieta antes:
   el nombre del módulo se va desde 1560 px y las pestañas se acercan. Van
   DESPUÉS de `.nav a`: con la misma especificidad, manda el orden. */
@media (max-width:1560px){ .marca-modulo{display:none;} .nav a{padding:0 16px;} }
@media (max-width:1180px){ .nav a{padding:0 11px; font-size:14px;} }
.sesion{display:flex; align-items:center; gap:12px; font-size:14px; color:#CFCFC9; flex:0 0 auto;}

/* El menu del perfil es un <details>: se abre sin JavaScript y el teclado lo
   recorre solo. "Salir" vive adentro porque es una accion del usuario, no una
   seccion de la app — suelta en la barra invitaba a tocarla sin querer. */
.perfil{position:relative;}
.perfil summary{
  display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  padding:7px 13px 7px 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); color:#E3E3DE;
  transition:border-color .16s ease, background-color .16s ease;
}
.perfil summary::-webkit-details-marker{display:none;}
.perfil summary:hover{background:rgba(255,255,255,.06); border-color:rgba(251,203,0,.45);}
.perfil[open] summary{background:rgba(255,255,255,.08); border-color:rgba(251,203,0,.6);}
.perfil-inicial{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--oro-degradado); color:var(--negro);
  font-weight:800; font-size:13.5px;
}
.perfil-nombre{font-weight:600; font-size:14px;}
.perfil-flecha{
  width:0; height:0; border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:5px solid currentColor; opacity:.7; transition:transform .16s ease;
}
.perfil[open] .perfil-flecha{transform:rotate(180deg);}

.perfil-menu{
  position:absolute; right:0; top:calc(100% + 12px); min-width:232px; z-index:40;
  background:var(--blanco); color:var(--negro);
  border-radius:var(--radio); padding:8px; box-shadow:var(--sombra-alta);
  display:flex; flex-direction:column;
}
.perfil-cabeza{padding:10px 12px 12px; border-bottom:1px solid var(--gris-linea); margin-bottom:6px;}
.perfil-cabeza b{display:block; font-size:14.5px;}
.perfil-cabeza span{font-size:12px; color:var(--gris-texto);}
.perfil-menu a{
  padding:10px 12px; border-radius:8px; text-decoration:none;
  color:var(--negro) !important; font-weight:600; font-size:14px;
}
.perfil-menu a:hover{background:#F2F1EA;}
.perfil-salir{color:var(--rojo) !important; margin-top:4px;}
.perfil-salir:hover{background:#FBE9E7 !important;}

.sesion-ayuda{
  color:#CFCFC9; text-decoration:none; font-weight:600; font-size:13px;
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:8px 15px;
  transition:border-color .16s ease, color .16s ease;
}
.sesion-ayuda:hover{border-color:var(--dorado); color:var(--dorado);}

/* ---- El boton del cajon y el cajon mismo (solo en pantalla angosta) ------- */
.menu-boton{
  display:none; align-items:center; justify-content:center; gap:5px; flex-direction:column;
  width:46px; height:46px; margin-left:auto; align-self:center;
  background:none; border:1px solid rgba(255,255,255,.18); border-radius:12px; cursor:pointer;
}
.menu-boton span{display:block; width:19px; height:2px; background:var(--blanco); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;}
body.con-cajon .menu-boton span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.con-cajon .menu-boton span:nth-child(2){opacity:0;}
body.con-cajon .menu-boton span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.cajon-fondo{
  position:fixed; inset:0; z-index:50; background:rgba(20,20,18,.45);
  opacity:0; transition:opacity .24s ease;
}
body.con-cajon .cajon-fondo{opacity:1;}

/* 60 % de la pantalla, translucido y por encima de todo: se comporta como el
   menu de una aplicacion, no como una lista que empuja el contenido. */
.cajon{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  /* 60 % exacto, como se pidio. El minimo es la cota de un telefono muy
     angosto, donde 60 % dejaria de ser tocable. */
  width:60%; min-width:230px; max-width:400px;
  display:flex; flex-direction:column;
  /* Sin relleno lateral: lo pone cada hijo. Asi la pestaña activa puede llegar
     de borde a borde en vez de quedar como un botoncito flotando adentro. */
  padding:0 0 18px;
  color:var(--blanco);
  background:linear-gradient(180deg,rgba(28,28,26,.93) 0%,rgba(18,18,16,.95) 100%);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border-left:1px solid rgba(251,203,0,.22);
  box-shadow:-24px 0 60px -24px rgba(0,0,0,.6);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.3,.7,.3,1);
  overflow-y:auto;
}
body.con-cajon .cajon{transform:translateX(0);}

.cajon-marca{display:flex; flex-direction:column; gap:6px; padding:22px 22px 20px;}
.cajon-marca img{height:38px; width:auto; align-self:flex-start;}
.cajon-marca span{
  font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:#9A9A94;
}

.cajon-nav{display:flex; flex-direction:column;}
.cajon-nav a{
  display:block; padding:15px 22px; text-decoration:none;
  color:#E3E3DE; font-weight:600; font-size:16px; position:relative;
}
.cajon-nav a:hover{background:rgba(255,255,255,.06);}
/* El dorado llega de borde a borde del cajon. Un rectangulo redondeado con aire
   a los lados es caja dentro de caja: lo mismo que se corrigio en la barra. */
.cajon-nav a.activo{
  background:var(--oro-degradado); color:var(--negro); font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -14px 24px -16px rgba(0,0,0,.3);
}

.cajon-pie{
  margin-top:auto; padding-top:14px; display:flex; flex-direction:column;
  border-top:1px solid rgba(255,255,255,.12);
}

/* El perfil se despliega: adentro van las acciones de esta persona. */
.cajon-perfil summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:14px 22px;
}
.cajon-perfil summary::-webkit-details-marker{display:none;}
.cajon-perfil summary:hover{background:rgba(255,255,255,.06);}
.cajon-perfil-quien{flex:1 1 auto; min-width:0;}
.cajon-perfil b{display:block; font-size:14.5px; line-height:1.25;}
.cajon-perfil small{font-size:12px; color:#9A9A94;}
.cajon-perfil[open] summary{background:rgba(255,255,255,.05);}
.cajon-perfil .perfil-flecha{flex:0 0 auto;}
.cajon-perfil[open] .perfil-flecha{transform:rotate(180deg);}
.cajon-perfil > a{
  display:block; padding:13px 22px 13px 56px; text-decoration:none;
  color:#CFCFC9; font-weight:600; font-size:14.5px;
  background:rgba(0,0,0,.22);
}
.cajon-perfil > a:hover{background:rgba(0,0,0,.34); color:var(--blanco);}
.cajon-salir{color:#FF9B91 !important;}

.cajon-ayuda{
  display:block; padding:15px 22px; text-decoration:none;
  color:#CFCFC9; font-weight:600; font-size:14.5px;
  border-top:1px solid rgba(255,255,255,.1);
}
.cajon-ayuda:hover{background:rgba(255,255,255,.06); color:var(--blanco);}

/* Ancho util de verdad. Antes eran 1000px fijos: en un monitor ancho quedaba una
   columnita al centro y el resto desperdiciado. Ahora crece con la pantalla y se
   frena donde una tabla deja de leerse comoda. */
/* El contenido se queda con el ancho de la ventana, no con una columnita al
   centro. El tope alto solo evita que en un monitor de 4K una tabla se estire
   hasta volverse ilegible; por debajo de eso, manda la pantalla. */
.contenido{
  position:relative; z-index:1;
  width:100%; max-width:1880px; margin:30px auto; padding:0 40px;
}
.contenido.ancho{max-width:2100px;}

/* Los textos largos SI se limitan: una linea de 1600px no se lee. */
.contenido > p.ayuda, .pantalla-que-es{max-width:78ch;}

@media (max-width:860px){
  .contenido{padding:0 16px; margin:18px auto;}
}
.pie{text-align:center; color:var(--gris-texto); font-size:13px; padding:28px 20px 40px;}

/* Encabezado de pantalla --------------------------------------------------- */
.cabecera{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.cabecera h1{font-size:27px; margin:0; font-weight:800; letter-spacing:-.3px;}
.cabecera .derecha{margin-left:auto; display:flex; gap:10px;}
/* La linea de orientacion bajo el titulo: para quien entra por primera vez. */
.pantalla-que-es{margin:-12px 0 20px; max-width:70ch; line-height:1.55;}
.pantalla-que-es b{color:var(--negro);}

.migaja{display:block; font-size:13px; color:var(--gris-texto); text-decoration:none; margin-bottom:6px;}

/* Botones ------------------------------------------------------------------ */
/* Cada variante define SU propio hover, con fondo y color juntos.
   Antes `.btn:hover` ponía fondo negro para todas y el texto oscuro de `.btn-claro`
   desaparecía sobre él. */
.btn{
  display:inline-block; padding:12px 22px; border-radius:var(--radio);
  border:2px solid var(--negro); background:var(--negro); color:var(--blanco);
  font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:#000; color:var(--blanco);}
.btn:focus-visible{outline:3px solid var(--dorado); outline-offset:2px;}

.btn-oro{background:var(--dorado); border-color:var(--dorado); color:var(--negro);}
.btn-oro:hover{background:var(--dorado-hondo); border-color:var(--dorado-hondo); color:var(--negro);}

.btn-claro{background:var(--blanco); color:var(--negro); border-color:var(--gris-linea);}
.btn-claro:hover{background:#EFEFEA; color:var(--negro); border-color:var(--negro);}

/* Tarjetas y tablas -------------------------------------------------------- */
/* Un formulario a 1600px de ancho no se llena, se recorre. Se le pone techo. */
/* Antes el formulario se topaba a 1100 px y quedaba CORRIDO a la izquierda
   dentro de una pagina ancha. Ahora llena el ancho y son las rejillas de campos
   las que reparten en columnas: el ojo recorre de arriba abajo, no de lado. */
form > .tarjeta{max-width:none;}

/* La profundidad la da la sombra, no otro borde. Caja con borde dentro de caja
   con borde dentro de caja es lo que rompe la estetica limpia de FK Home. */
.tarjeta{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05);
  border-radius:var(--radio); padding:26px 28px; margin-bottom:20px;
  box-shadow:var(--sombra);
}
/* En un teléfono, una tabla de seis columnas no cabe: que se deslice DENTRO de
   la tarjeta. En escritorio no se activa, porque ese overflow abre un contexto
   de formato propio y el navegador saca barras que no hacen falta. */
@media (max-width:860px){
  .tarjeta{overflow-x:auto;}
  /* ...salvo mientras una casilla tiene su lista abierta: el overflow la
     recortaba y no se podía deslizar (combo.js pone y quita la clase). */
  .tarjeta.tiene-lista-abierta{overflow:visible;}
}
.tarjeta h2{font-size:14px; margin:0 0 18px; text-transform:uppercase; letter-spacing:1.4px; font-weight:700; color:var(--gris-texto);}

.cifras{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:26px;}
.cifra{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05);
  border-radius:var(--radio); padding:22px 24px; box-shadow:var(--sombra);
  position:relative; overflow:hidden;
}
/* Un filo dorado a la izquierda en vez de un marco completo: acento, no caja. */
.cifra::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--oro-degradado);
}
.cifra b{display:block; font-size:34px; line-height:1.1;}
.cifra span{color:var(--gris-texto); font-size:14px;}

/* Las dos puertas de "¿qué vas a generar?": arriendo o venta ---------------- */
.opciones{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:24px;}

/* JERARQUIA DE LA PANTALLA DE GENERAR -------------------------------------- */
/* Dos tamanos a proposito: lo de todos los dias grande, lo ocasional chico.
   `auto-fit` con un minimo alto obliga a que arriba quepan dos y abajo cuatro. */
.opciones-grandes{grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-bottom:34px;}
/* Ese minimo de 420px es el que hace que arriba quepan dos y no tres; en un
   telefono no cabe ninguno, asi que ahi se suelta o la pagina se desborda. */
@media (max-width:520px){
  .opciones-grandes{grid-template-columns:1fr;}
  .opcion-destacada{padding:22px;}
  .opcion-destacada h2{font-size:21px;}
}
.opciones-chicas{grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:16px;}

/* La tarjeta grande se distingue por el filo dorado de arriba, no por un marco
   mas grueso: es un acento de marca, no otra caja. */
.opcion-destacada{padding:32px 32px 28px; position:relative; overflow:hidden;}
.opcion-destacada::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--oro-degradado);
}
.opcion-destacada h2{font-size:26px; margin:10px 0 14px;}
.opcion-destacada p{font-size:16px; margin-bottom:26px;}
.btn-grande{padding:15px 28px; font-size:16.5px;}

.opciones-chicas .opcion{padding:20px;}
.opciones-chicas .opcion h2{font-size:16.5px; margin:7px 0 9px;}
.opciones-chicas .opcion p{font-size:13.5px; margin-bottom:16px; line-height:1.55;}

/* La de crear se distingue sin gritar: fondo del papel y borde punteado, que es
   el lenguaje universal de "aqui todavia no hay nada, ponlo tu". */
.opcion-crear{background:rgba(255,255,255,.45); border:1px dashed #D5D1C2; box-shadow:none;}
.opcion-crear:hover{box-shadow:var(--sombra); background:var(--blanco);}

/* Separador de grupo: ordena sin agregar una caja mas. */
.grupo-titulo{
  font-size:12px; text-transform:uppercase; letter-spacing:1.6px; font-weight:700;
  color:var(--gris-texto); margin:0 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--gris-linea);
}
.opcion{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05);
  border-radius:var(--radio); padding:24px; display:flex; flex-direction:column;
  box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease;
}
.opcion:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}
.opcion .rotulo{font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--dorado-hondo); font-weight:700;}
.opcion h2{font-size:19px; margin:8px 0 12px; text-transform:none; letter-spacing:0;}
.opcion p{margin:0 0 20px; font-size:14.5px; color:var(--gris-texto); line-height:1.6;}
.opcion p b{color:var(--negro);}
.opcion .acciones{margin-top:auto;}

table{width:100%; border-collapse:collapse; font-size:15px;}
th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--gris-texto); padding:10px 12px; border-bottom:2px solid var(--negro);
}
td{padding:12px; border-bottom:1px solid var(--gris-linea); vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.num,th.num{text-align:right; white-space:nowrap;}
tbody tr:hover{background:#FBFBF9;}
.codigo{font-weight:800; letter-spacing:.5px; white-space:nowrap;}
a.fila{color:var(--negro); text-decoration:none; font-weight:700;}
a.fila:hover{color:var(--dorado-hondo); text-decoration:underline;}

/* Formularios -------------------------------------------------------------- */
.campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.campo{display:flex; flex-direction:column; gap:6px;}
.campo.ancho{grid-column:1/-1;}
label{font-weight:700; font-size:14px;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  padding:12px 14px; border:1px solid var(--gris-linea); border-radius:var(--radio);
  font:inherit; background:var(--blanco); color:var(--negro); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dorado); border-color:var(--dorado);}
textarea{min-height:90px; resize:vertical;}
.ayuda{font-size:13px; color:var(--gris-texto);}
.acciones{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

.buscador{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
/* El campo de texto manda: el desplegable de tipos no debe comerse el ancho. */
.buscador input[type=text]{flex:1 1 220px; min-width:0;}
.buscador select{flex:0 1 230px;}
.buscador .btn{flex:0 0 auto;}

/* Pestañas (Propietarios / Arrendatarios) ---------------------------------- */
/* Se deslizan de lado en un teléfono en vez de partirse en dos filas:
   así la línea dorada del activo sigue leyéndose. */
.pestanas{
  display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--gris-linea);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{display:none;}
.pestanas a{
  padding:11px 20px; text-decoration:none; color:var(--gris-texto);
  font-weight:700; font-size:15px; position:relative; white-space:nowrap;
}
.pestanas a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:3px;
  border-radius:3px 3px 0 0; background:var(--oro-degradado);
  opacity:0; transition:opacity .16s ease;
}
.pestanas a:hover{color:var(--negro);}
.pestanas a:hover::after{opacity:.4;}
.pestanas a.activa{color:var(--negro);}
.pestanas a.activa::after{opacity:1;}

/* Tabla editable (deducciones del contrato) -------------------------------- */
#tabla-deducciones input,#tabla-deducciones select{min-width:120px;}
#tabla-deducciones td{vertical-align:middle;}
#tabla-deducciones .btn{padding:8px 14px; font-size:14px;}

/* Calendario del equipo ---------------------------------------------------- */
.semana-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.semana-barra .btn{padding:9px 16px; font-size:14px;}
.semana-rango{font-weight:700; margin-right:auto;}

/* Siete columnas fijas: una semana partida en dos filas se lee mal.
   En pantallas angostas sí se deja envolver. */
.semana{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px;}
@media (max-width:1000px){
  .semana{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
}
.dia{
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-radius:var(--radio); padding:12px; display:flex; flex-direction:column; gap:8px;
  min-height:150px;
}
/* Los nombres casan con views/agenda/index.php: al rehacer el planificador
   las vistas cambiaron de clase y estas reglas quedaron sin nadie que las usara. */
.dia.es-hoy{border-color:var(--negro); box-shadow:inset 0 3px 0 var(--dorado);}
.dia-cabeza{display:flex; align-items:baseline; gap:7px; padding-bottom:8px; border-bottom:1px solid var(--gris-linea);}
.dia-nombre{font-size:11px; font-weight:800; letter-spacing:1px; color:var(--gris-texto);}
.dia-numero{font-size:20px; font-weight:800; line-height:1;}
.pildora-hoy{
  margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.8px; background:var(--dorado); color:var(--negro); padding:2px 7px; border-radius:999px;
}
.dia-libre{margin:0; color:#A6A6A0; font-size:13px;}
.dia-agendar{
  margin-top:auto; font-size:13px; font-weight:700; color:var(--gris-texto);
  text-decoration:none; padding-top:6px;
}
.dia-agendar:hover{color:var(--negro); text-decoration:underline;}

.cita{
  display:block; text-decoration:none; color:var(--negro);
  background:var(--gris-fondo); border-left:4px solid var(--dorado-hondo);
  border-radius:6px; padding:8px 10px; font-size:13px; line-height:1.35;
}
.cita:hover{background:#EFEFEA;}
.cita-mia{border-left-color:var(--dorado); background:#FFF9E3;}
.cita-mia:hover{background:#FCF2CF;}
.cita-ajena{background:#F0F0EE; border-left-color:#C9C9C3; color:var(--gris-texto);}
.cita-hora{display:block; font-weight:800; font-size:12px;}
.cita-motivo{display:block; font-weight:600;}
.cita-dato{display:block; color:var(--gris-texto); font-size:12px;}
.cita-persona{display:block; color:var(--gris-texto); font-size:11px; margin-top:3px;}
.cita-cumplida{opacity:.62;}
.cita-cancelada{opacity:.62;}
.cita-cancelada .cita-motivo{text-decoration:line-through;}

/* Estados y avisos --------------------------------------------------------- */
.etiqueta{
  display:inline-block; padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.etiqueta-arrendado{background:#E7F3EA; color:var(--verde);}
.etiqueta-disponible{background:#FFF6D6; color:var(--dorado-hondo);}
.etiqueta-inactivo,.etiqueta-terminado{background:#EEEEEC; color:var(--gris-texto);}
.etiqueta-activo{background:#E7F3EA; color:var(--verde);}
.etiqueta-agendada{background:#FFF6D6; color:var(--dorado-hondo);}
.etiqueta-cumplida{background:#E7F3EA; color:var(--verde);}
.etiqueta-cancelada{background:#EEEEEC; color:var(--gris-texto);}
.etiqueta-comprado{background:#FFF6D6; color:var(--dorado-hondo);}
.etiqueta-anulado{background:#FBE9E7; color:var(--rojo);}

.aviso{padding:14px 18px; border-radius:var(--radio); margin-bottom:22px; font-weight:600;}
.aviso-ok{background:#E7F3EA; color:var(--verde); border:1px solid #B9DFC5;}
.aviso-error{background:#FBE9E7; color:var(--rojo); border:1px solid #F0C4C0;}

.vacio{text-align:center; padding:44px 20px; color:var(--gris-texto);}
.vacio p{margin:0 0 18px;}
.nota{background:#FFF9E3; border-left:4px solid var(--dorado); padding:12px 16px; border-radius:6px; font-size:14px;}

/* Ficha de datos ----------------------------------------------------------- */
.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.ficha div{display:flex; flex-direction:column; gap:3px;}
.ficha dt,.ficha .rotulo{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-texto); font-weight:700;}
.ficha .dato{font-size:16px;}

/* Login -------------------------------------------------------------------- */
.login-pantalla{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background-color:var(--negro); padding:20px;
  /* El patron de marca, muy bajo: tiene que sentirse, no competir con el logo. */
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.login-pantalla::before{
  content:""; position:fixed; inset:0; background:var(--negro); opacity:.82; pointer-events:none;
}
.login-marco{position:relative; z-index:1;}
.login-marco{width:100%; max-width:400px;}
.login-logo{display:block; width:190px; margin:0 auto 30px;}
.login-caja{
  background:var(--blanco); border-radius:14px; padding:36px;
  border-top:6px solid var(--dorado);
}
.login-caja p{margin:0 0 24px; color:var(--gris-texto); font-size:13.5px; text-align:center;}
.login-caja .btn{width:100%; text-align:center; margin-top:18px;}
.lista-equipos{list-style:none; margin:0 0 14px; padding:0;}
.lista-equipos li{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; padding:10px 0; border-top:1px solid rgba(29,29,27,.07);}
.lista-equipos li:first-child{border-top:0;}
.lista-equipos .ayuda{flex-basis:100%;}
.login-recordar{margin-top:16px; font-size:14px; color:var(--gris-texto);}
.login-pie{
  text-align:center; color:#6E6E68; font-size:11.5px;
  letter-spacing:.6px; margin:24px 0 0;
}

@media (max-width:700px){
  .barra{gap:12px; padding:12px 16px;}
  .nav{margin-left:0; width:100%;}
  .sesion{width:100%; justify-content:space-between;}
  .contenido{margin:20px auto;}
}


/* Ayuda -------------------------------------------------------------------- */
/* El indice de arriba: lleva a la pregunta sin obligar a leer todo lo anterior. */
.ayuda-indice{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px;}
.ayuda-indice a{
  font-size:13.5px; font-weight:600; text-decoration:none; color:var(--negro);
  background:var(--blanco); border:1px solid var(--gris-linea);
  border-radius:999px; padding:8px 16px;
}
.ayuda-indice a:hover{border-color:var(--negro); background:#EFEFEA;}

.ayuda-titulo{
  font-size:21px; font-weight:800; letter-spacing:-.2px; margin:38px 0 14px;
  scroll-margin-top:24px;
}

.ayuda-lista{margin:0; display:grid; gap:18px;}
.ayuda-lista dt{font-weight:700; font-size:16px; margin-bottom:5px;}
.ayuda-lista dd{margin:0; color:var(--gris-texto); line-height:1.65; max-width:78ch;}
.ayuda-lista dd b{color:var(--negro);}

.ayuda-pasos{margin:0 0 4px; padding-left:22px; display:grid; gap:13px;}
.ayuda-pasos li{color:var(--gris-texto); line-height:1.65; max-width:78ch;}
.ayuda-pasos li b{color:var(--negro);}

/* Los caminos paso a paso ---------------------------------------------------
   Quien llega a la Ayuda trae UNA tarea en la cabeza. Cada tarea es un renglon
   que se abre: veintitantas a la vista y abiertas serian un muro de texto. */
.camino-grupo{
  font-size:12.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gris-texto); margin:26px 0 10px;
}
.caminos{display:grid; gap:10px;}
.camino{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05); border-left:4px solid transparent;
  border-radius:var(--radio); box-shadow:var(--sombra); scroll-margin-top:20px;
}
/* El filo dorado marca el que esta abierto: el acento de la marca, no un marco. */
.camino[open]{border-left-color:var(--dorado);}
.camino > summary{
  display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; cursor:pointer; list-style:none;
  padding:16px 20px; font-size:16px; font-weight:700; line-height:1.35;
}
.camino > summary::-webkit-details-marker{display:none;}
.camino > summary:hover .camino-que{text-decoration:underline; text-decoration-color:var(--dorado); text-underline-offset:4px;}
.camino > summary::after{
  content:''; flex:0 0 auto; margin-left:auto;
  width:8px; height:8px; border-right:2px solid var(--gris-texto); border-bottom:2px solid var(--gris-texto);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.camino[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.camino-que{flex:1 1 220px;}
.camino-sale{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--gris-texto);
}
.camino-cuerpo{padding:6px 20px 22px;}
.camino-cuerpo .acciones{margin-top:18px;}

/* Los pasos, con su numero grande: se sigue con el dedo sin perder el renglon. */
.camino .ayuda-pasos{list-style:none; padding-left:0; counter-reset:paso; gap:15px;}
.camino .ayuda-pasos > li{counter-increment:paso; position:relative; padding-left:44px; min-height:30px;}
.camino .ayuda-pasos > li::before{
  content:counter(paso); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%;
  background:var(--negro); color:var(--dorado); font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.camino-nota{
  margin:18px 0 0; padding:12px 15px; border-radius:9px; max-width:78ch;
  background:#FAFAF6; border-left:3px solid var(--dorado);
  color:var(--gris-texto); font-size:14px; line-height:1.6;
}
.camino-nota b{color:var(--negro);}

/* El nombre de un boton o de una casilla, TAL COMO SALE EN PANTALLA. Va en
   recuadro para que se distinga de una palabra cualquiera de la frase. */
.toca{
  padding:1px 7px; border-radius:6px; background:#F2F1EA; border:1px solid var(--gris-linea);
  color:var(--negro); font-weight:600; font-size:.94em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* Lo nuevo: una tarjeta chica por novedad, con el enlace a donde se usa. */
.novedades{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:12px;}
.novedad{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:16px 18px; display:flex; flex-direction:column; gap:6px;
}
.novedad b{font-size:15px; line-height:1.35;}
.novedad p{margin:0; font-size:13.5px; color:var(--gris-texto); line-height:1.55;}
.novedad a{margin-top:auto; padding-top:4px; font-size:13px; font-weight:700; color:var(--negro); text-decoration:none;}
.novedad a:hover{text-decoration:underline; text-decoration-color:var(--dorado); text-underline-offset:4px;}

/* Los enlaces dentro del texto de ayuda: negro con filo dorado, no el azul del navegador. */
.camino-cuerpo a:not(.btn), .ayuda-lista a, .ayuda-pasos a, .ayuda-enlazada a{
  color:var(--negro); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--dorado); text-decoration-thickness:2px; text-underline-offset:3px;
}
.camino-cuerpo a:not(.btn):hover, .ayuda-lista a:hover, .ayuda-pasos a:hover, .ayuda-enlazada a:hover{text-decoration-color:var(--dorado-hondo);}

/* El indice de lo de consulta va DESPUES de los caminos: arriba solo queda lo
   que se viene a hacer. Quince botones antes de la primera tarea era un muro. */
.ayuda-indice-consulta{margin-bottom:6px;}

.tabla-numeros td{vertical-align:middle;}
.tabla-numeros-para{color:var(--gris-texto);}

@media (max-width:700px){
  .camino > summary{padding:14px 16px; font-size:15px;}
  .camino-cuerpo{padding:4px 16px 18px;}
  .camino .ayuda-pasos > li{padding-left:40px;}
  .camino-cuerpo .acciones .btn{width:100%; text-align:center;}
  .novedades{grid-template-columns:1fr;}
  /* En el celular el "para que es" va debajo: tres columnas no caben. */
  .tabla-numeros tr{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--gris-linea);}
  .tabla-numeros tr:first-child{display:none;}
  .tabla-numeros tr:last-child{border-bottom:none;}
  .tabla-numeros td{padding:0; border:0;}
  .tabla-numeros-para{grid-column:1 / -1; font-size:13.5px;}
}

.sesion-ayuda{
  color:#CFCFC9 !important; font-weight:400 !important;
  border:1px solid #3A3A36; border-radius:999px; padding:5px 13px; font-size:13px;
}
.sesion-ayuda:hover{border-color:var(--dorado); color:var(--dorado) !important;}


/* Borradores --------------------------------------------------------------- */
/* Un borrador no es un documento: no tiene numero y se puede corregir. El aviso
   lo dice en vez de darlo por sabido, porque esa distincion es TODA la idea. */
.aviso-borrador{
  background:#FFF8E1; color:#6B5415; border:1px solid #EBD79A; font-weight:400;
}
.aviso-borrador b{color:#4A3A0D;}
.aviso-detalle{display:block; margin-top:5px; font-size:13.5px; opacity:.9;}
.aviso-detalle a{color:inherit;}

/* Lo repuesto por el navegador: informa, no alarma. */
.aviso-recuperado{
  background:#EEF4FA; color:#2B4A66; border:1px solid #C3D8E8; font-weight:400;
}
.enlace-aviso{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer; font-weight:600;
}

/* Tres acciones en una fila: emitir pesa, guardar acompana, cancelar se retira. */
.acciones-documento{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.btn-plano{
  background:none; border-color:transparent; color:var(--gris-texto); font-weight:600;
}
.btn-plano:hover{background:none; color:var(--negro); text-decoration:underline;}

/* La fila de un borrador en las listas: se distingue de un documento emitido. */
tr.es-borrador td{background:#FFFDF5;}
.etiqueta-borrador{background:#F5E6B8; color:#6B5415;}


/* Filtros y resumen de periodo --------------------------------------------- */
.buscador-fecha{
  display:flex; align-items:center; gap:7px; font-size:13px; color:var(--gris-texto);
  white-space:nowrap;
}
.buscador-fecha input{width:auto;}

/* La respuesta a "cuanto movio este periodo", antes de la tabla y no despues:
   si va al pie hay que recorrer 200 filas para encontrarla. */
.resumen-periodo{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
  padding:4px 0 20px; margin-bottom:18px; border-bottom:1px solid var(--gris-linea);
}
.resumen-periodo b{display:block; font-size:22px; line-height:1.2;}
.resumen-periodo span{font-size:13px; color:var(--gris-texto);}
.resumen-anulado b{color:var(--rojo);}
.resumen-accion{margin-left:auto;}


/* PLANIFICADOR ============================================================== */
/* La barra de control: que vista, de quien. Una sola fila para no sumar cajas. */
.planificador-barra{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:18px;
}
.pestanas-vista{margin-bottom:0; flex:0 0 auto;}
.planificador-filtro{
  display:flex; align-items:center; gap:9px; margin-left:auto;
  font-size:13px; color:var(--gris-texto);
}
.planificador-filtro select{width:auto; min-width:190px;}

/* La rejilla del mes. Siete columnas fijas: si se dejaran crecer, el calendario
   deja de leerse como calendario. Las filas tienen alto minimo para que un dia
   con una cita y uno con tres no deformen la semana.
   `minmax(0,1fr)` y no `1fr`: con `1fr` una columna no se encoge por debajo de
   lo que mide su texto, y un motivo largo la ensanchaba hasta sacar el domingo
   de la rejilla (en escritorio) o la rejilla de la pantalla (en el celular). */
.mes-rejilla{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px;
  background:var(--gris-linea); border:1px solid var(--gris-linea);
  border-radius:var(--radio); overflow:hidden; margin-bottom:18px;
}
.mes-encabezado{
  background:var(--negro); color:#CFCFC9; padding:9px 12px;
  font-size:11.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
}
.mes-dia{
  background:var(--blanco); min-height:118px; padding:8px 9px 10px;
  display:flex; flex-direction:column; gap:4px; min-width:0;
}
/* Los dias del mes vecino se ven, porque la semana tiene que estar completa,
   pero se apagan para que no compitan con el mes que se esta mirando. */
.mes-dia.es-de-otro-mes{background:#FAFAF7;}
.mes-dia.es-de-otro-mes .mes-dia-numero{color:#B5B5AE;}
.mes-dia.es-hoy{background:#FFFBEC; box-shadow:inset 0 0 0 2px var(--dorado);}

.mes-dia-cabeza{display:flex; align-items:center; gap:7px; margin-bottom:2px;}
.mes-dia-numero{font-weight:700; font-size:14px;}
.mes-dia-mas{
  margin-left:auto; color:#B5B5AE; text-decoration:none; font-size:17px; line-height:1;
  padding:0 4px; border-radius:5px;
}
.mes-dia-mas:hover{background:var(--dorado); color:var(--negro);}
.mes-dia-resto{font-size:11.5px; color:var(--gris-texto); text-decoration:none;}
.mes-dia-resto:hover{text-decoration:underline; color:var(--negro);}

/* La ficha de una cita. La franja de color del borde izquierdo es lo que deja
   leer un mes entero sin abrir nada: cada tipo de cita tiene el suyo. */
.cita-ficha{
  display:block; text-decoration:none; color:var(--negro);
  background:#F6F6F2; border-left:3px solid var(--color-tipo,#5D4037);
  border-radius:4px; padding:5px 7px; font-size:12px; line-height:1.3;
}
.cita-ficha:hover{background:#EDEDE6;}
.hora-corta{display:none;}
.cita-ficha b{display:block; font-size:11px; color:var(--gris-texto); font-weight:700;}
.cita-motivo{
  display:block; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cita-quien{display:block; font-size:11px; color:var(--gris-texto);}
/* La cita ajena no es un enlace y se nota: solo dice que la hora esta tomada. */
.cita-ficha.es-ajena{
  background:#F0F0EC; border-left-color:#C7C7C0; color:var(--gris-texto); cursor:default;
}
.cita-ficha.es-cumplida{opacity:.62;}
.cita-ficha.es-cancelada{opacity:.5; text-decoration:line-through;}

/* El punto de color, para listas y fichas donde no cabe una franja. */
.punto-tipo{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:middle;
}
.punto-grande{width:14px; height:14px; margin-right:0;}

.leyenda{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 22px; font-size:12.5px; color:var(--gris-texto);}
.leyenda-item{display:inline-flex; align-items:center;}

.fila-separadora td{
  background:#F6F6F2; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.6px;
}
.texto-apagado{color:#A8A8A1;}

/* El recordatorio que sale en Inicio. */
.aviso-recordatorio{
  background:#FFF4E0; color:#6B4A15; border:1px solid #EFD3A0; font-weight:400;
}
.aviso-recordatorio b{color:#4A320D;}
.aviso-recordatorio a{color:inherit; font-weight:600;}

/* En un telefono la semana sigue en siete columnas, pero chatas: cada cita
   muestra solo su hora y el resto esta a un toque. */
@media (max-width:900px){
  .mes-dia{min-height:84px; padding:6px 3px;}
  .mes-dia-cabeza{gap:1px;}
  /* El «+» de cada dia y la cita misma se tocan con el dedo: 24 px minimo. */
  .mes-dia-mas{
    min-width:24px; min-height:24px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .mes-dia-resto{display:inline-flex; align-items:center; min-height:24px;}
  .cita-ficha{min-height:24px; overflow:hidden;}
  .cita-ficha b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mes-encabezado{padding:7px 5px; font-size:10px; letter-spacing:.6px; text-align:center;}
  /* Solo en la rejilla del mes: en la semana cada dia es una tarjeta ancha y
     el motivo si cabe. */
  .mes-rejilla .cita-motivo,.mes-rejilla .cita-quien{display:none;}
  .mes-rejilla .cita-ficha{padding:3px 4px;}
  .mes-rejilla .cita-ficha b{font-size:10px;}
  /* «10:00 a. m.» no cabe en 40 px y salia «10:0…»: en la celda va «10:00» o
     «14:00», y al tocarla se ve todo. Hoy ya lo marca el filo dorado. */
  .mes-rejilla .hora-larga,.mes-rejilla .pildora-hoy{display:none;}
  .mes-rejilla .hora-corta{display:inline;}
  .planificador-filtro{margin-left:0;}
}


/* Menos divisiones ---------------------------------------------------------
   FK Home se ve limpio. Cada linea de mas es una division visual que no aporta
   informacion: la jerarquia la dan el espacio y el peso de la tipografia. */
.mes-rejilla{border-color:rgba(29,29,27,.06); box-shadow:var(--sombra);}
.dia{box-shadow:var(--sombra); border-color:rgba(29,29,27,.05);}
.ficha{border-color:transparent;}
.resumen-periodo{border-bottom-color:rgba(29,29,27,.08);}
.ayuda-indice a{border-color:rgba(29,29,27,.08); box-shadow:var(--sombra);}
.ayuda-indice a:hover{border-color:var(--dorado-hondo); background:var(--blanco);}

/* El boton principal tambien lleva el degradado de la marca. */
.btn-oro{
  background:var(--oro-degradado); border-color:transparent; color:var(--negro);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px -3px rgba(201,151,27,.6);
}
.btn-oro:hover{
  background:linear-gradient(170deg,#FFE066 0%,#F6C800 36%,#D79F18 74%,#B8880F 100%);
  border-color:transparent; color:var(--negro);
}

/* En pantallas muy anchas los campos no se estiran hasta volverse absurdos:
   la rejilla reparte en mas columnas en vez de hacer casillas de medio metro. */
@media (min-width:1500px){
  .campos{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
}
@media (max-width:860px){
  .contenido{padding:0 16px;}
  .tarjeta{padding:20px 18px;}
}


/* ---- Barra angosta: las pestañas se van al cajón -------------------------
   Este bloque va AL FINAL a proposito. Tiene la misma especificidad que las
   reglas que anula (.nav, .sesion, .menu-boton), asi que lo unico que decide es
   el orden: puesto antes, no hacia absolutamente nada. */
@media (max-width:980px){
  .barra{height:auto; min-height:68px; padding:0 16px; gap:12px; align-items:center;}
  .marca-logo{height:36px;}
  .nav,.sesion{display:none;}
  .menu-boton{display:flex;}
}
@media (min-width:981px){
  .cajon,.cajon-fondo{display:none !important;}
}

/* Con el cajon abierto la pagina no se mueve detras, y el `translateX(100%)` del
   cajon cerrado no estira el documento hacia la derecha. */
body.con-cajon{overflow:hidden;}
.cajon{will-change:transform;}
html{overflow-x:clip;}


/* ==========================================================================
   MOVIL: compactar, no apilar
   --------------------------------------------------------------------------
   El problema no era que no cupiera: era que todo se apilaba en una columna
   infinita y habia que bajar media pantalla para ver tres numeros. Aqui el
   contenido se REORGANIZA, no solo se encoge.
   ========================================================================== */
@media (max-width:700px){

  .contenido{margin:16px auto 10px;}
  .cabecera{gap:10px; margin-bottom:16px;}
  .cabecera h1{font-size:22px;}
  /* Con cuatro botones (la ficha de un documento) no caben en una fila: bajan. */
  .cabecera .derecha{margin-left:0; width:100%; flex-wrap:wrap;}
  .cabecera .derecha .btn{flex:1 1 auto; text-align:center;}

  .tarjeta{padding:18px 16px; margin-bottom:14px;}
  .tarjeta h2{font-size:12.5px; margin-bottom:14px;}
  .pantalla-que-es{margin:-6px 0 16px; font-size:14px;}

  /* Las cifras dejan de ser tres bloques altos y pasan a dos columnas chatas:
     tres numeros se ven de un vistazo en vez de ocupar media pantalla. */
  .cifras{grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px;}
  .cifra{padding:14px 14px 14px 16px;}
  .cifra b{font-size:22px;}
  .cifra span{font-size:11.5px; line-height:1.35; display:block;}
  /* Si queda una suelta al final, que ocupe la fila entera en vez de media. */
  .cifra:last-child:nth-child(odd){grid-column:1 / -1;}

  /* Los botones de accion van en fila y se reparten el ancho. Apilados, tres
     botones son tres pantallazos de desplazamiento. */
  .acciones{gap:8px; margin-top:16px;}
  .acciones .btn{flex:1 1 44%; text-align:center; padding:12px 14px; font-size:14.5px;}
  .acciones-documento .btn-plano{flex:1 1 100%;}

  /* La ficha de datos en dos columnas: son etiquetas cortas, no parrafos. */
  .ficha{grid-template-columns:repeat(2,1fr); gap:14px;}
  .ficha .dato{font-size:15px; overflow-wrap:anywhere;}

  /* Un campo por fila, pero sin el aire de escritorio. */
  .campos{gap:14px;}

  /* Las tarjetas de "¿que vas a generar?" se vuelven filas compactas: el titulo
     manda, la explicacion se recorta a dos lineas y el boton se va al lado. */
  .opciones-chicas{gap:10px;}
  .opciones-chicas .opcion{
    display:grid; grid-template-columns:1fr auto; grid-template-areas:
      "rotulo rotulo" "titulo boton" "texto texto";
    align-items:center; gap:4px 12px; padding:16px;
  }
  .opciones-chicas .opcion .rotulo{grid-area:rotulo;}
  .opciones-chicas .opcion h2{grid-area:titulo; margin:2px 0;}
  .opciones-chicas .opcion p{
    grid-area:texto; margin:4px 0 0; font-size:12.5px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .opciones-chicas .opcion .acciones{grid-area:boton; margin:0;}
  .opciones-chicas .opcion .acciones .btn{flex:0 0 auto; padding:10px 16px; font-size:13.5px;}

  /* Buscador y filtros: que no ocupen una pantalla ellos solos. */
  .buscador{gap:8px;}
  .buscador input[type=text]{flex:1 1 100%;}
  .buscador select,.buscador-fecha{flex:1 1 calc(50% - 4px);}
  .buscador .btn{flex:1 1 100%;}

  .resumen-periodo{gap:10px 20px; padding-bottom:14px; margin-bottom:14px;}
  .resumen-periodo b{font-size:18px;}
  .resumen-accion{margin-left:0; flex:1 1 100%;}
  .resumen-accion .btn{width:100%; text-align:center;}

  /* Columnas que en un telefono solo estorban: el numero, el valor y el estado
     son lo que se busca; el resto esta a un toque de distancia en la ficha. */
  .oculta-movil{display:none;}

  table{font-size:14px;}
  th,td{padding:10px 8px;}

  .ayuda-indice{gap:6px; margin-bottom:22px;}
  .ayuda-indice a{font-size:12.5px; padding:7px 13px;}
  .ayuda-titulo{font-size:18px; margin:28px 0 12px;}

  .migaja{margin-bottom:10px;}
  .pie{padding:20px 16px 28px; font-size:12px;}
}

/* En un telefono muy angosto las cifras vuelven a una sola columna: dos
   numeros de ocho digitos uno al lado del otro no se leen. */
@media (max-width:380px){
  .cifras{grid-template-columns:1fr;}
  .cifra:last-child:nth-child(odd){grid-column:auto;}
  .acciones .btn{flex:1 1 100%;}
}


/* La cuenta del propietario, a la vista mientras se edita -------------------
   Felipe lleva anios haciendo esta resta a mano y le sale mal. Verla armarse
   sola, linea por linea, es el valor real del producto: no es decoracion. */
.liquidacion{
  margin-top:4px; padding:18px 20px; border-radius:var(--radio);
  background:#FAFAF6; border:1px solid var(--gris-linea);
  max-width:620px;
}
.liq-linea{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:7px 0; font-size:15px;
}
.liq-linea b{font-variant-numeric:tabular-nums; white-space:nowrap;}
.liq-linea small{display:block; font-size:12px; color:var(--gris-texto);}
.liq-resta b{color:var(--rojo);}
.liq-total{
  margin-top:8px; padding-top:14px; border-top:2px solid var(--gris-linea);
  font-size:17px; font-weight:700;
}
.liq-total b{font-size:22px;}
.liq-aviso{color:var(--rojo); margin:10px 0 0;}

/* "Sobre el canon, menos..." — una casilla por cada concepto de mas arriba. */
.ded-menos{min-width:190px;}
.ded-casilla{
  display:flex; align-items:center; gap:7px; font-size:13px; line-height:1.3;
  padding:3px 0; cursor:pointer;
}
.ded-casilla input{width:auto; margin:0; flex:0 0 auto;}
.ded-nota{font-size:12.5px; color:#A8A8A1; font-style:italic;}
#tabla-deducciones td{vertical-align:middle;}
#tabla-deducciones .ded-monto{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--gris-texto);}
#tabla-deducciones input[type=checkbox]{min-width:0;}
#tabla-deducciones td:first-child{width:32%;}
#tabla-deducciones td:first-child input{min-width:210px;}
#tabla-deducciones [name="ded_valor[]"]{max-width:170px;}


/* La pista de donde se ha visto a una persona -------------------------------
   No amarra persona con inmueble —esa independencia es deliberada—: solo le
   recuerda a quien esta llenando el documento donde la ha visto antes. */
.pista-persona{
  margin-top:8px; padding:9px 13px; border-radius:9px; font-size:13.5px;
  background:#FFF8E1; color:#6B5415; border:1px solid #EBD79A;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.pista-persona.pista-nueva{background:#EEF4FA; color:#2B4A66; border-color:#C3D8E8;}
.pista-persona .enlace-aviso{color:inherit;}


/* Subir y bajar un descuento. Hace falta porque un concepto solo puede restar de
   los que estan ARRIBA: sin mover, el que se agrega al final queda inservible. */
.ded-acciones{white-space:nowrap; text-align:right;}
.ded-acciones .btn-mover{display:inline-block; vertical-align:middle; margin-right:4px;}
.ded-acciones .btn{vertical-align:middle;}
.btn-mover{
  background:none; border:1px solid var(--gris-linea); border-radius:7px;
  width:28px; height:28px; cursor:pointer; color:var(--gris-texto);
  font-size:10px; line-height:1; padding:0;
}
.btn-mover:hover{border-color:var(--negro); color:var(--negro); background:#F2F1EA;}
.btn-mover.sin-uso{opacity:.25; pointer-events:none;}

/* La explicacion de una columna, a un toque. Abierta siempre ocupaba media
   pantalla en la pagina que mas se usa; sin ella, la columna no se entiende.
   No es una tarjeta: es una linea de texto que se despliega donde esta. */
.explica{margin:16px 0 4px; max-width:78ch;}
.explica > summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:13.5px; color:var(--gris-texto); padding:4px 0;
}
.explica > summary::-webkit-details-marker{display:none;}
.explica > summary::before{
  content:'?'; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:1.5px solid currentColor; font-size:11px; font-weight:700; line-height:15px; text-align:center;
}
.explica > summary:hover{color:var(--negro);}
.explica[open] > summary{color:var(--negro); font-weight:600;}
.explica .ayuda{margin:8px 0 0 26px;}
.liq-aviso-suave{margin:10px 0 0;}


/* PANEL: jerarquia, no adornos ============================================= */
/* El titulo del grupo y el filtro en la misma linea: un filtro flotando arriba
   de la pantalla manda mas que el contenido que filtra, y no es asi. */
.franja-periodo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.franja-periodo .grupo-titulo{margin:0; padding:0; border:0;}

.periodos{display:flex; gap:4px; flex-wrap:wrap;}
.periodos a{
  font-size:13px; font-weight:600; text-decoration:none; color:var(--gris-texto);
  padding:7px 14px; border-radius:999px; border:1px solid transparent;
  white-space:nowrap;
}
.periodos a:hover{background:var(--blanco); border-color:var(--gris-linea); color:var(--negro);}
.periodos a.activo{
  background:var(--negro); color:var(--blanco); border-color:var(--negro);
}

/* La tarjeta de cifra lleva TRES pesos: el numero manda, el titulo lo explica
   en dos palabras y la nota dice de que documento sale. Esa nota es la respuesta
   a "que estoy viendo aqui" — una etiqueta, no un parrafo debajo del bloque. */
.cifra b{display:block; font-size:30px; line-height:1.12; letter-spacing:-.5px;}
.cifra-titulo{display:block; font-size:14px; font-weight:600; color:var(--negro); margin-top:6px;}
.cifra-nota{
  display:block; margin-top:3px;
  font-size:11.5px; letter-spacing:.4px; text-transform:uppercase;
  color:var(--gris-texto); font-weight:600;
}

/* Una cifra que lleva a su listado es un atajo, y se nota al pasar por encima. */
.cifra-enlace{text-decoration:none; color:inherit; display:block; transition:transform .16s ease, box-shadow .16s ease;}
.cifra-enlace:hover{transform:translateY(-2px); box-shadow:var(--sombra-alta);}

/* Las de contexto pesan menos: no son plata. */
.cifras-chicas{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:26px;}
.cifras-chicas .cifra{padding:16px 18px;}
.cifras-chicas .cifra b{font-size:22px;}
.cifras-chicas .cifra::before{background:var(--gris-linea);}

/* PLEGABLES ================================================================
   Lo de consulta ocupa media pantalla y casi nunca es lo que se viene a hacer.
   Un <details> lo cierra sin una linea de JavaScript y el teclado lo recorre. */
.plegable{
  background:var(--blanco); border:1px solid rgba(29,29,27,.05);
  border-radius:var(--radio); margin-bottom:16px; box-shadow:var(--sombra);
  overflow:hidden;
}
.plegable > summary{
  display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
  padding:16px 24px; font-size:14px; color:var(--gris-texto);
}
.plegable > summary::-webkit-details-marker{display:none;}
.plegable > summary b{
  font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gris-texto);
}
.plegable > summary:hover b{color:var(--negro);}
/* La flecha la dibuja el propio summary: un icono menos que mantener. */
.plegable > summary::after{
  content:''; margin-left:auto; flex:0 0 auto;
  width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.plegable[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.plegable-cuantos{
  background:#F2F1EA; color:var(--gris-texto); border-radius:999px;
  padding:2px 9px; font-size:12px; font-weight:700;
}
.plegable-cuerpo{padding:0 24px 22px;}
.plegable-cuerpo table{margin-top:-4px;}

@media (max-width:700px){
  .franja-periodo{gap:10px; margin-bottom:10px;}
  .periodos a{font-size:12px; padding:6px 11px;}
  .cifra b{font-size:23px;}
  .cifra-titulo{font-size:12.5px;}
  .cifra-nota{font-size:10.5px;}
  .plegable > summary{padding:14px 16px;}
  .plegable-cuerpo{padding:0 16px 18px;}
}

/* El numero con el que va a salir cada documento, en «¿Que vas a generar?».
   Sirve para que el prefijo se vuelva familiar: quien ve «CC-0012» antes de
   generar, despues reconoce una cuenta de cobro por su numero sin abrirla. */
.opcion .rotulo{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.prefijo{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px; font-weight:700;
  letter-spacing:.3px; text-transform:none; color:var(--negro);
  background:#FBF3D3; border-radius:6px; padding:3px 8px; white-space:nowrap;
}
.opcion p .prefijo{font-size:.92em; padding:2px 7px;}

/* La bitacora (Configuracion → Actividad). Se lee de arriba abajo, como un
   cuaderno: la hora a la izquierda, lo que paso en negrita y el detalle debajo. */
.tabla-actividad td{vertical-align:top;}
.actividad-cuando{white-space:nowrap; font-weight:600;}
.actividad-cuando span{display:block; font-weight:400; font-size:12.5px; color:var(--gris-texto);}
.actividad-accion{font-weight:700;}
.actividad-alerta{color:var(--rojo);}
.actividad-detalle{display:block; margin-top:4px; font-size:13px; color:var(--gris-texto); line-height:1.5; word-break:break-word;}
.actividad-desde{font-size:12.5px; color:var(--gris-texto); white-space:nowrap;}
.buscador select{width:auto; min-width:200px; flex:0 0 auto;}

/* La pantalla de «algo fallo»: suelta, sin el marco de la app. */
.pantalla-error{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:#F6F5EF;}
.error-caja{
  width:100%; max-width:560px; background:var(--blanco); border-radius:18px; padding:40px 36px;
  box-shadow:var(--sombra-alta); border-top:4px solid var(--dorado); text-align:left;
}
.error-caja img{display:block; margin-bottom:18px;}
.error-caja h1{font-size:26px; margin:0 0 14px;}
.error-caja p{color:var(--gris-texto); line-height:1.6; margin:0 0 12px;}
.error-caja p b{color:var(--negro);}
.error-referencia{font-size:13px; margin-top:24px !important; padding-top:16px; border-top:1px solid rgba(29,29,27,.08);}
.error-detalle{
  margin:18px 0 0; padding:14px; background:#1D1D1B; color:#F4F4F2; border-radius:10px;
  font-size:12px; line-height:1.5; overflow:auto; max-height:320px; white-space:pre-wrap;
}

/* El pie de una lista con paginas: la cuenta a un lado, los dos botones al otro. */
.paginas{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(29,29,27,.08);
}
.paginas-cuenta{font-size:14px; color:var(--gris-texto);}
.paginas-cuenta b{color:var(--negro);}
.paginas-botones{display:flex; gap:10px;}
.tarjeta + .paginas{border-top:0; padding-top:0; margin-top:-6px; margin-bottom:22px;}

/* Un formulario de un solo boton dentro de una tabla o una fila de acciones:
   se comporta como el boton, sin abrir una caja propia. */
form.en-linea{display:inline; margin:0;}
.btn-chico{padding:9px 16px; font-size:14px;}

/* LA CASILLA UNICA ============================================================
   Escribir lo nuevo, recibir sugerencias y ver el listado, en el mismo sitio.
   Ver views/_combo.php. Sin caja sobre caja: la lista flota con sombra y el
   acento es un filo dorado, igual que en el resto de la app. */
.combo{position:relative;}
/* La pista de «dónde se ha visto a esta persona» ocupa la fila entera. */
.campos > .pista-persona{grid-column:1/-1; margin-top:-6px;}
.combo > input[type=text]{padding-right:54px;}
.combo-flecha{
  position:absolute; top:1px; right:1px; bottom:1px; width:50px;
  border:0; background:transparent; cursor:pointer; border-radius:0 var(--radio) var(--radio) 0;
  display:flex; align-items:center; justify-content:center; color:var(--gris-texto);
}
.combo-flecha::after{
  content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
}
.combo-flecha:hover{color:var(--negro); background:#F7F6F0;}
.combo-abierto .combo-flecha::after{transform:rotate(-135deg) translate(-2px,-2px);}

.combo-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--blanco); border-radius:var(--radio); box-shadow:var(--sombra-alta);
  border:1px solid rgba(29,29,27,.07); overflow:hidden;
}
.combo-lista{list-style:none; margin:0; padding:6px 0; max-height:min(340px,46vh); overflow-y:auto; overscroll-behavior:contain;}
.combo-lista:empty{display:none;}
.combo-lista li{
  padding:10px 16px 10px 14px; border-left:3px solid transparent; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; min-height:46px; justify-content:center;
}
.combo-lista li:hover,.combo-lista li.activo{background:#FDF8E3; border-left-color:var(--dorado);}
.combo-texto{font-weight:600; line-height:1.3;}
.combo-texto mark{background:none; color:inherit; font-weight:800; box-shadow:inset 0 -2px 0 var(--dorado);}
.combo-detalle{font-size:12.5px; color:var(--gris-texto); line-height:1.35;}
.combo-nota{margin:0; padding:11px 16px; font-size:13px; color:var(--gris-texto); line-height:1.45;}
.combo-lista:not(:empty) + .combo-nota{border-top:1px solid rgba(29,29,27,.07); background:#FAFAF7;}
.combo-pie{border-top:1px solid rgba(29,29,27,.07); padding:10px 16px; font-size:14px; font-weight:700;}
.combo-pie a{color:var(--negro);}

/* Una casilla de dinero que no se entiende: lo dice ahi mismo, al salir de
   ella, en vez de esperar a que el servidor devuelva la pantalla entera. */
.campo-dudoso{border-color:var(--rojo) !important; background:#FFF6F5;}
.dinero-aviso{display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--rojo); font-weight:600;}
/* La fecha dicha en palabras: no bloquea, solo hace mirar dos veces. */
.fecha-nota{display:block; margin-top:6px; font-size:13px; line-height:1.4; color:#8A5A00; font-weight:600;}

/* El resumen de Documentos, compactado en el movil.
   Ahora lleva una cifra por tipo de documento en vez de un solo total, asi que
   apilado en una columna empujaba la tabla 236px hacia abajo. En dos columnas
   cabe de un vistazo, que es justo para lo que esta. */
@media (max-width:700px){
  .resumen-periodo{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
    padding:2px 0 16px; margin-bottom:14px;
  }
  .resumen-periodo b{font-size:18px;}
  .resumen-periodo span{font-size:12px; line-height:1.35; display:block;}
  .resumen-anulado{grid-column:1 / -1;}
  /* El boton de exportar no compite con las cifras: fila propia, ancho completo. */
  .resumen-accion{grid-column:1 / -1; margin-left:0;}
  .resumen-accion .btn{width:100%;}
}

/* El editor de descuentos en el celular: una tarjeta por descuento.
   Como tabla media 939px dentro de una pantalla de 390: el valor, las casillas
   de "menos..." y el boton de quitar quedaban fuera, a un deslizon de lado que
   nadie adivina. Apilado, cada descuento se lee de arriba abajo:
       concepto
       como se calcula | valor
       sobre el canon, menos...
       queda en        | subir bajar quitar
   Va con el id ADEMAS de la clase para ganarle a `#tabla-deducciones input`. */
@media (max-width:760px){
  #tabla-deducciones.editor-descuentos,
  #tabla-deducciones.editor-descuentos tbody{display:block; width:100%;}
  #tabla-deducciones.editor-descuentos thead{display:none;}
  #tabla-deducciones.editor-descuentos tbody tr{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; align-items:center;
    padding:16px 0; border-bottom:1px solid var(--gris-linea);
  }
  #tabla-deducciones.editor-descuentos tbody tr:first-child{padding-top:4px;}
  #tabla-deducciones.editor-descuentos tbody tr:last-child{border-bottom:none;}
  #tabla-deducciones.editor-descuentos tbody td{
    display:block; padding:0; border:0; width:auto; min-width:0; text-align:left;
  }
  #tabla-deducciones.editor-descuentos tbody td:nth-child(1),
  #tabla-deducciones.editor-descuentos tbody td:nth-child(4){grid-column:1 / -1;}
  #tabla-deducciones.editor-descuentos input:not([type=checkbox]),
  #tabla-deducciones.editor-descuentos select{min-width:0; max-width:none; width:100%;}
  #tabla-deducciones.editor-descuentos .ded-menos::before,
  #tabla-deducciones.editor-descuentos .ded-monto::before{
    display:block; margin-bottom:3px; font-size:11px; font-weight:700; letter-spacing:1px;
    text-transform:uppercase; color:var(--gris-texto);
  }
  #tabla-deducciones.editor-descuentos .ded-menos::before{content:'Sobre el canon, menos\2026';}
  #tabla-deducciones.editor-descuentos .ded-monto::before{content:'Queda en';}
  #tabla-deducciones.editor-descuentos .ded-monto{font-size:16px; font-weight:700; color:var(--negro);}
  #tabla-deducciones.editor-descuentos .ded-casilla{padding:7px 0; font-size:14.5px;}
  #tabla-deducciones.editor-descuentos .ded-acciones{text-align:right;}
  #tabla-deducciones.editor-descuentos .btn-mover{width:38px; height:38px; font-size:12px;}
}

/* ---- «¿De quién es esta plata?» (Finanzas) --------------------------------- */
.opciones-de-quien{display:flex; flex-wrap:wrap; gap:10px 26px;}
.de-quien-opcion{display:flex; align-items:center; gap:9px; font-size:15px; cursor:pointer;}
.de-quien-opcion input{width:auto; margin:0;}
.pago-de-cobro{grid-column:1 / -1; background:#FFF8DC; border-left:4px solid #C9971B; padding:12px 16px; border-radius:var(--radio);}
.pago-de-cobro-titulo{margin:0 0 8px; font-weight:600;}
.pago-de-cobro-linea{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px;}
.te-deben-total{font-weight:700; color:var(--negro); letter-spacing:0; text-transform:none;}
.te-deben-pagar select{width:auto; min-width:0; padding:4px 6px; font-size:13px; margin-right:6px;}
.campo-boton{display:flex; align-items:flex-end;}
.finanzas-fechas label{display:flex; align-items:center; gap:6px; font-size:14px;}
.finanzas-tabla td, .finanzas-tabla th{padding:9px 6px;}
.finanzas-tabla .finanzas-sub th{font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gris-texto); text-align:left; padding-top:18px;}
.finanzas-tabla .finanzas-total td{font-weight:700; border-top:1px solid var(--gris-linea);}
.finanzas-resultado td{font-size:18px; font-weight:800;}
.finanzas-resultado.positivo td{color:var(--verde);}
.finanzas-resultado.negativo td{color:var(--rojo);}
.finanzas-manos{margin-top:18px; padding:16px 18px; border-left:4px solid #C9971B; background:#FBF9F2; border-radius:var(--radio);}
.finanzas-manos b.cifra-manos{display:block; font-size:26px; margin:4px 0 6px;}
.finanzas-manos.negativo{border-left-color:var(--rojo); background:#FBE9E7;}
.finanzas-manos.negativo b.cifra-manos{color:var(--rojo);}
.aviso-clasificar{background:#FFF8DC; border:1px solid #F1DFA0; color:var(--negro); font-weight:400;}
.clasificar-fila{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px;}
/* Cada renglón se toca, pero no es un enlace azul de página web: es una cifra
   de la casa con un filo dorado que invita a abrirla. */
.finanzas-tabla a{color:inherit; text-decoration:none; border-bottom:1px dotted #C9971B;}
.finanzas-tabla a:hover{color:#8C6A12; border-bottom-style:solid;}
/* En el celular, los dos botones de «de quién es» uno encima del otro: en fila
   empujaban la tabla fuera de la pantalla. */
@media (max-width:700px){
  /* `form.en-linea` lo deja en línea con más especificidad: se le gana igual. */
  form.en-linea.clasificar-botones{display:inline-flex; flex-direction:column; gap:6px; align-items:flex-end;}
}
.ded-dueno select{min-width:130px;}
@media (max-width:760px){
  #tabla-deducciones.editor-descuentos .ded-dueno::before{
    content:'\BF De qui\E9n es?'; display:block; margin-bottom:3px; font-size:11px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase; color:var(--gris-texto);
  }
}

/* La fianza (Configuración y Finanzas) ------------------------------------- */
.etiqueta-dato{font-weight:700; font-size:14px;}
.opciones-fianza{display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:6px;}
.opcion-casilla{display:inline-flex; align-items:center; gap:9px; font-weight:400; font-size:15px; cursor:pointer; min-height:28px;}
.opcion-casilla input{flex:0 0 auto;}
/* El aviso de cada mes va en su propia fila, debajo de las cifras: dice en
   palabras si lo pagado cuadra. El color solo acompaña; la frase es lo que manda. */
.tabla-fianza .fianza-aviso td{border-top:0; padding-top:0; font-size:13px; color:var(--gris-texto);}
.tabla-fianza .fianza-aviso.fianza-cuadra td{color:var(--verde);}
.tabla-fianza .fianza-aviso.fianza-no_cuadra td{color:var(--rojo); font-weight:600;}
.tabla-fianza .fianza-aviso.fianza-falta_pago td{color:#8A5A00;}
/* Los enlaces de Finanzas van con el filo dorado de la casa, no en azul de navegador. */
#fianza .ayuda a{color:inherit; font-weight:600; text-decoration:none; border-bottom:1px dotted #C9971B;}

/* Las citas pedidas desde la web ------------------------------------------- */
.solicitudes-web{border-left:4px solid var(--dorado);}
.solicitud{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between;
  padding:12px 0; border-top:1px solid rgba(29,29,27,.07);}
.solicitud:first-of-type{border-top:0;}
.solicitud-que{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 280px;}
.solicitud-mensaje{font-size:13.5px; color:var(--gris-texto); font-style:italic;}
.solicitud-acciones{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.solicitud-acciones select{width:auto; min-width:0;}
.etiqueta-por_confirmar{background:#FFF4D6; color:#7A5600;}
/* En el calendario, una solicitud todavía no es una cita firme: borde punteado. */
.cita-ficha.es-por-confirmar{border-left-style:dashed; background:#FFF8E1;}

.tabla-horario td,.tabla-horario th{padding:8px 6px; vertical-align:middle;}
/* «08:00 a. m.» no cabe en 140 px: se cortaba la última letra. */
.tabla-horario input[type=time]{width:auto; min-width:168px; max-width:190px;}

/* Avisos al celular ---------------------------------------------------------- */
.avisos-oferta{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between;
  border-left:4px solid var(--dorado);}
.avisos-texto{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 300px; margin:0;}
.avisos-texto span{color:var(--gris-texto); font-size:14px;}
.avisos-acciones{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.avisos-panel .acciones form{margin:0;}

.publica-resumen{margin:18px 0 0; padding:12px 14px; border-radius:10px; background:#FFF8E1; font-weight:600; font-size:15px;}
.publica-resumen.falta{background:#FDECEA; color:#8A1C14;}
.publica-dia.tiene-hora{box-shadow:inset 0 -4px 0 var(--dorado);}

/* El expediente digital y la venta en la ficha (migración 019) ---------------- */
.etiqueta-separado{background:#FDE9D6; color:#9A4A00;}
.etiqueta-vendido{background:#E4ECF7; color:#24476F;}
.etiqueta-sol-estudio{background:#FFF6D6; color:var(--dorado-hondo);}
.etiqueta-sol-aprobado{background:#E7F3EA; color:var(--verde);}
.etiqueta-sol-no_aprobado{background:#EEEEEC; color:var(--gris-texto);}

.exp-acceso{display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; border-left:4px solid var(--dorado);}
.exp-acceso:hover{box-shadow:0 6px 22px rgba(29,29,27,.10);}
.exp-acceso-icono{flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:var(--negro); color:var(--dorado);
  display:flex; align-items:center; justify-content:center;}
.exp-acceso-texto{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0;}
.exp-acceso-texto b{font-size:17px;}
.exp-acceso-texto span{color:var(--gris-texto); font-size:14px;}
.exp-acceso-ir{font-weight:700; color:var(--dorado-hondo); white-space:nowrap;}
.venta-tarjeta .venta-estado{margin:0 0 6px; font-size:16px;}
.venta-plegable{margin:14px 0 0; box-shadow:none; border:1px solid rgba(29,29,27,.08);}
.venta-precio{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;}
.venta-precio .campo{flex:1 1 220px; margin:0;}
.venta-quitar{margin-top:12px;}

.exp-pestanas{display:flex; gap:6px; margin:4px 0 18px; padding:4px; background:#F2F1EA; border-radius:999px; width:max-content; max-width:100%;}
.exp-pestanas a{padding:10px 22px; border-radius:999px; text-decoration:none; color:var(--gris-texto); font-weight:700; min-height:24px;}
.exp-pestanas a.activa{background:var(--negro); color:var(--dorado);}
.exp-grupo{margin:30px 0 12px; font-size:19px; display:flex; flex-direction:column; gap:3px;}
.exp-grupo span{font-size:14px; font-weight:400; color:var(--gris-texto);}
.exp-subgrupo{margin:18px 0 8px; font-size:16px;}
.exp-subgrupo span{font-weight:400; color:var(--gris-texto); font-size:14px; margin-left:6px;}

.exp-etapa > summary{gap:12px;}
.exp-num{flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--negro); color:var(--dorado);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.exp-etapa > summary b{font-size:15px; letter-spacing:.4px;}
.exp-progreso{margin-left:auto; font-size:13px; font-weight:700; color:#9A4A00; background:#FDE9D6; border-radius:999px; padding:3px 10px; white-space:nowrap;}
.exp-progreso.completo{color:var(--verde); background:#E7F3EA;}
.exp-etapa .plegable-cuerpo{padding-top:0;}
.exp-que{margin:0 0 10px;}
.exp-docs{list-style:none; margin:0; padding:0;}
.exp-doc{padding:12px 0; border-top:1px solid rgba(29,29,27,.07);}
.exp-doc:first-child{border-top:0;}
.exp-doc-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.exp-marca{flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid #D8D6CC; display:inline-flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff;}
.exp-doc.tiene .exp-marca{background:var(--verde); border-color:var(--verde);}
.exp-otro .exp-marca{border-style:dashed; color:var(--gris-texto);}
.exp-doc-nombre{flex:1 1 180px; min-width:0; font-weight:600;}
.exp-falta{font-size:12px; font-weight:700; color:#9A4A00; margin-left:6px; text-transform:uppercase; letter-spacing:.6px;}
.exp-doc-nombre .texto-apagado{font-weight:400; font-size:13px; margin-left:6px;}

.exp-subir{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0;}
.exp-nombre{width:auto; min-width:0; flex:1 1 180px; max-width:280px;}
.con-js .exp-input{display:none;}
.exp-estado{font-size:13px; color:var(--gris-texto); flex-basis:100%;}
.exp-estado:empty{display:none;}
.exp-estado.error{color:#A1251B; font-weight:600;}
.exp-subir.subiendo .exp-enviar{opacity:.6;}

.exp-archivos{list-style:none; margin:10px 0 0 34px; padding:0; display:flex; flex-direction:column; gap:8px;}
.exp-archivo{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 10px; border-radius:10px; background:#FAF9F4;}
.exp-ver{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 200px; text-decoration:none; color:inherit; min-height:24px;}
.exp-ver:hover .exp-archivo-nombre{text-decoration:underline;}
.exp-mini{width:56px; height:56px; object-fit:cover; border-radius:8px; flex:0 0 auto; background:#eee;}
.exp-icono{flex:0 0 auto; width:56px; height:56px; border-radius:8px; background:var(--negro); color:var(--dorado);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.6px;}
.exp-icono-pdf{background:#7A1E14; color:#fff;}
.exp-icono-doc,.exp-icono-docx{background:#1F4E8C; color:#fff;}
.exp-icono-xls,.exp-icono-xlsx{background:#1E6B3A; color:#fff;}
.exp-archivo-nombre{overflow-wrap:anywhere; font-weight:600;}
.exp-archivo-meta{font-size:13px; color:var(--gris-texto);}
.exp-opciones{flex-basis:100%;}
.exp-opciones > summary{cursor:pointer; color:var(--dorado-hondo); font-weight:700; font-size:14px; min-height:24px; display:inline-flex; align-items:center;}
.exp-opciones-cuerpo{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px;}
.exp-versiones{margin:8px 0 0;}

.exp-solicitante{padding:14px 0; border-top:1px solid rgba(29,29,27,.08);}
.exp-solicitante:first-of-type{border-top:0;}
.exp-sol-cab{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;}
.exp-sol-cab b{font-size:17px;}
.exp-sol-editar{margin-left:auto; font-size:14px; color:var(--dorado-hondo); font-weight:700; min-height:24px; display:inline-flex; align-items:center;}
/* Los plegables con formulario dentro no recortan: la lista de la casilla única
   sobresale hacia abajo y tiene que verse entera (ver «El celular, con el dedo»). */
.exp-agregar,.venta-plegable{overflow:visible;}
.exp-agregar .campos,.venta-plegable .campos{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.exp-sol-datos{margin:4px 0 8px;}
.exp-sol-acciones{margin-top:4px;}
.exp-solicitante .exp-etapa{margin-top:10px; box-shadow:none; border:1px solid rgba(29,29,27,.08);}
.exp-agregar{margin-top:12px; box-shadow:none; border:1px dashed rgba(201,151,27,.6);}

@media (max-width:700px){
  .exp-archivos{margin-left:0;}
  .exp-acceso-ir{display:none;}
  .exp-pestanas{width:100%;}
  .exp-pestanas a{flex:1 1 0; text-align:center;}
  .exp-doc-cab .exp-subir{flex-basis:100%; padding-left:34px;}
}

/* «Agenda tu cita»: la página pública ----------------------------------------
   La ve un cliente, no Felipe: es la cara de FK Home en la web. Franja negra con
   el patrón isométrico y el logo dorado, y debajo tarjetas blancas sin marcos de
   más. Las opciones y las horas son botones grandes: se eligen con el pulgar. */
.publica{background:var(--gris-fondo, #F6F6F2);}
.publica::before{display:none;}
.publica-cabecera{
  background-color:var(--negro); background-size:420px auto; background-position:center;
  padding:28px 20px 30px; text-align:center; border-bottom:3px solid var(--dorado);
}
.publica-logo{height:64px; width:auto;}
.publica-contenido{max-width:760px; margin:0 auto; padding:26px 16px 10px;}
.publica-contenido h1{font-size:28px; margin:0 0 6px;}
.publica-intro{color:var(--gris-texto); margin:0 0 18px;}
.publica-listo p{margin:0 0 16px; line-height:1.6;}
.publica-opciones{display:flex; flex-wrap:wrap; gap:10px;}
.publica-opcion,.publica-hora{position:relative; cursor:pointer;}
.publica-opcion input,.publica-hora input{position:absolute; opacity:0; width:1px; height:1px;}
.publica-opcion span,.publica-hora span{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px;
  border-radius:999px; background:var(--blanco); box-shadow:inset 0 0 0 1px rgba(29,29,27,.16);
  font-weight:600; font-size:15px;
}
.publica-opcion input:checked + span,.publica-hora input:checked + span{
  background:var(--negro); color:var(--dorado); box-shadow:none;
}
.publica-opcion input:focus-visible + span,.publica-hora input:focus-visible + span{outline:2px solid var(--dorado); outline-offset:2px;}
.publica-dias{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin-bottom:6px;}
.publica-dia{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; min-width:58px; min-height:58px;
  border:0; border-radius:12px; background:var(--blanco); box-shadow:inset 0 0 0 1px rgba(29,29,27,.14);
  font:inherit; cursor:pointer; padding:8px 6px;
}
.publica-dia span{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--gris-texto);}
.publica-dia b{font-size:19px;}
.publica-dia.activo{background:var(--negro); box-shadow:none;}
.publica-dia.activo span,.publica-dia.activo b{color:var(--dorado);}
.publica-horas{border:0; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.publica-horas legend{font-weight:700; margin-bottom:10px; padding:0; width:100%;}
.publica-autorizo{display:flex; gap:10px; align-items:flex-start; margin:18px 0 4px; font-weight:400; font-size:13.5px; line-height:1.5; color:var(--gris-texto);}
.publica-autorizo input{flex:0 0 auto; margin-top:2px;}
.publica-pie{text-align:center; color:var(--gris-texto); font-size:13px; padding:24px 16px 34px;}
.publica-pie a{color:inherit; font-weight:700;}
/* Fuera de la vista y fuera del orden del teclado: una persona no lo llena. */
.campo-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
input[type=tel]{
  padding:12px 14px; border:1px solid var(--gris-linea); border-radius:var(--radio);
  font:inherit; background:var(--blanco); color:var(--negro); width:100%;
}

/* El celular, con el dedo (8 oct 2026) --------------------------------------
   Salio de recorrer todas las pantallas a 390 px con un robot que mide. Dos
   reglas que valen para cualquier pantalla nueva:
   - Una casilla con letra de menos de 16 px hace que el iPhone AMPLIE la
     pagina al tocarla, y queda uno mirando media casilla sin saber volver.
   - Lo que se toca mide al menos 24 px de alto y de ancho: un dedo no es un
     puntero. */

/* El mes del pago y la hora de la cita no estaban en la regla general de las
   casillas: salian con la letra y el borde del navegador, distintas a todas. */
input[type=month],input[type=time]{
  padding:12px 14px; border:1px solid var(--gris-linea); border-radius:var(--radio);
  font:inherit; background:var(--blanco); color:var(--negro); width:100%;
}

@media (max-width:700px){
  /* `!important` a proposito: hay casillas con su propio tamano de letra en
     selectores mas fuertes (`#tabla-deducciones input`), y esta regla tiene
     que ganarles a todas sin perseguirlas una por una. */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px !important;}
  input[type=checkbox],input[type=radio]{width:24px; height:24px; flex:0 0 24px; margin:0;}
  .migaja{padding:5px 0; margin-bottom:6px;}
  .novedad a{padding:5px 0 3px;}
}

/* En un telefono muy angosto el numero del dia se achica un poco para que el
   «+» de 24 px siga cabiendo al lado en una columna de 45 px. */
@media (max-width:420px){
  .mes-dia{padding:5px 2px;}
  .mes-dia-numero{font-size:13px;}
  /* Los botones de una fila de tabla («Ya me pagaron», «De un tercero») pueden
     partirse en dos lineas: a 360 px empujaban la tabla fuera de su tarjeta.
     La celda `.num` no deja partir el texto y el boton lo hereda. */
  td .te-deben-pagar .btn,td .clasificar-botones .btn{white-space:normal; padding:8px 10px; font-size:13px; line-height:1.25;}
}