/* Marca Red de Hogares Ana Lilian (tokens tomados de analilian.cl): morado, lavanda, oliva y crema;
   títulos Playfair Display, texto Inter, bordes suaves y botones tipo píldora. */
:root {
  --fondo: oklch(98.5% .012 90);        /* crema */
  --tarjeta: oklch(100% 0 0);
  --texto: oklch(22% .03 285);
  --suave: oklch(50% .02 285);
  --borde: oklch(93% .01 285);
  --acento: oklch(51% .19 295);         /* morado principal */
  --acento-texto: oklch(99% .005 285);
  --acento-oscuro: oklch(35% .1 295);
  --lavanda: oklch(95% .035 300);
  --lavanda-media: oklch(85% .08 300);
  --oliva: oklch(68% .07 130);
  --oliva-suave: oklch(92% .035 130);
  --error: oklch(55% .2 25);
  --revisar: oklch(65% .14 75);
  --ok: oklch(55% .12 145);
  --radio: 1rem;
  --titulos: "Playfair Display", ui-serif, Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 16px;
  background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--acento-oscuro); }
.marca img { height: 40px; width: auto; }
.marca span { font-family: var(--titulos); font-size: 1.05rem; font-weight: 600; border-left: 1px solid var(--borde); padding-left: 10px; }
header nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
header nav a { color: var(--texto); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: .93rem; }
header nav a:hover { background: var(--lavanda); color: var(--acento-oscuro); }
header nav span { color: var(--suave); font-size: .9rem; padding: 0 8px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
h1, h2 { font-family: var(--titulos); font-weight: 600; color: var(--texto); }
h1 { font-size: 1.9rem; margin: 8px 0 18px; }
h2 { font-size: 1.25rem; margin: 22px 0 10px; }
a { color: var(--acento); }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; box-shadow: 0 1px 2px oklch(22% .03 285 / .04); }
.angosto { max-width: 380px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ancho { grid-column: span 2; }
@media (max-width: 520px) { .ancho { grid-column: auto; } }
.fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; margin-bottom: 8px; }
label.check { flex-direction: row; align-items: center; font-weight: 400; gap: 8px; }
small { color: var(--suave); font-weight: 400; }
input, select, textarea { font: inherit; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); color: var(--texto); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lavanda-media); outline-offset: 1px; border-color: var(--acento); }
input[type=checkbox] { width: auto; accent-color: var(--acento); }
textarea { resize: vertical; }
button, .boton { display: inline-block; font: inherit; font-size: .93rem; font-weight: 500; padding: 9px 20px; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--acento-texto); cursor: pointer; text-decoration: none; margin: 8px 8px 8px 0; }
button:hover, .boton:hover { background: var(--acento-oscuro); }
button:disabled { opacity: .6; cursor: wait; }
button.secundario { background: var(--tarjeta); color: var(--acento-oscuro); border: 1px solid var(--borde); }
button.secundario:hover { background: var(--lavanda); }
button.link { background: none; color: var(--error); padding: 0; margin: 0; border-radius: 0; }
.insignia { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-size: .75rem; font-weight: 700; text-align: center; }
.tabla { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: var(--lavanda); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num input { width: 130px; text-align: right; }
tr.total td { font-weight: 700; background: var(--lavanda); }
tr.inactivo { opacity: .5; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.acciones button { margin: 0; }
.resumen { color: var(--suave); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifras div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; }
.cifras span { color: var(--suave); font-size: .85rem; }
.cifras strong { font-family: var(--titulos); font-size: 2rem; line-height: 1.2; }
.cifras div:first-child { background: var(--lavanda); border-color: var(--lavanda-media); }
.cifras div:first-child strong { color: var(--acento); }
@media (max-width: 520px) { .cifras { grid-template-columns: 1fr 1fr; } .cifras strong { font-size: 1.35rem; } }
.chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.burbuja { border-radius: 18px; padding: 10px 16px; max-width: 85%; border: 1px solid var(--borde); }
.burbuja.yo { align-self: flex-end; background: var(--acento); color: var(--acento-texto); border: 0; border-bottom-right-radius: 6px; }
.burbuja.yo small { color: var(--lavanda); }
.burbuja.asesor { align-self: flex-start; background: var(--tarjeta); border-bottom-left-radius: 6px; }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0; padding-left: 20px; }
@media (max-width: 520px) { .burbuja { max-width: 100%; } .marca span { display: none; } }
.ia { border: 1px dashed var(--lavanda-media); background: var(--lavanda); border-radius: var(--radio); padding: 14px; margin-bottom: 16px; }
.ia form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
details summary { cursor: pointer; }
.boton.grande { padding: 14px 26px; font-size: 1.05rem; }
.miniatura { max-width: 220px; max-height: 300px; border-radius: 10px; border: 1px solid var(--borde); }
.selector-foto { padding: 14px; background: var(--tarjeta); }
/* Dashboard: barras horizontales (serie 1 morado, serie 2 oliva; validados para daltonismo) */
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 24px; }
.paneles h3 { font-family: var(--titulos); font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; }
.paneles h3 + .barras, .paneles .resumen + .barras { margin-top: 10px; }
.paneles .barras + h3 { margin-top: 18px; }
.barras { display: flex; flex-direction: column; gap: 8px; }
.fila-barra { display: grid; grid-template-columns: minmax(100px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: .88rem; }
.fila-barra:hover .pista { background: var(--lavanda); }
.etq { color: var(--texto); line-height: 1.25; overflow-wrap: anywhere; }
.pista { display: flex; flex-direction: column; gap: 2px; background: oklch(97% .005 285); border-radius: 4px; min-height: 14px; justify-content: center; }
.barra { display: block; height: 14px; background: #7244c5; border-radius: 0 4px 4px 0; min-width: 2px; }
.doble .barra { height: 9px; }
.barra.c2, .leyenda .c2 { background: #5c7e34; }
.barra.c1, .leyenda .c1 { background: #7244c5; }
.val { color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.leyenda { display: flex; gap: 14px; font-size: .82rem; color: var(--suave); margin: 4px 0 6px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.revisar { color: var(--revisar); }
.pago { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.pago input { width: 7.5em; padding: 7px 10px; }
.pago button { margin: 0; padding: 8px 14px; }
.aviso { padding: 10px 14px; border-radius: 12px; border-left: 4px solid; background: var(--tarjeta); margin: 6px 0; }
.aviso-error { border-color: var(--error); background: oklch(97% .02 25); }
.aviso-revisar { border-color: var(--revisar); background: oklch(97.5% .03 85); }
.aviso-info { border-color: var(--oliva); background: var(--oliva-suave); }