/* ESTUDIO · maqueta navegable. Tokens por marca: Estudio Australis (claro) y AYIM (oscuro). */
:root {
  --fondo: #F3F0E7;
  --superficie: #FFFDF8;
  --superficie-2: #F8F5EC;
  --tinta: #14261F;
  --texto: #2B3A34;
  --tenue: #6E7A75;
  --marca: #1E5C4E;
  --marca-suave: #E4EEE9;
  --accion: #1E5C4E;
  --sobre-accion: #FBF8EF;
  --linea: #DDD6C6;
  --linea-suave: #EAE4D6;
  --ok: #2E7D5B; --ok-suave: #DFF0E6;
  --alerta: #B07A00; --alerta-suave: #FBEFCF;
  --mal: #B3352E; --mal-suave: #F9E1DE;
  --info: #2F5F9E; --info-suave: #E1EAF6;
  --tipo-titulos: Georgia, "Cambria", "Times New Roman", serif;
  --tipo-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tipo-mono: "Cascadia Mono", "Consolas", monospace;
  --radio: 12px; --radio-s: 8px;
  --sombra: 0 1px 2px rgba(20,38,31,.06), 0 6px 18px -8px rgba(20,38,31,.14);
  --wa-fondo: #ECE5DD; --wa-in: #FFFFFF; --wa-out: #DDF3D0; --wa-check: #53BDEB; --wa-cabecera: #1E5C4E;
  --ancho-lateral: 236px;
}
html[data-marca="ayim"] {
  --fondo: #161110;
  --superficie: #211a16;
  --superficie-2: #2a2119;
  --tinta: #efe7db;
  --texto: #d9cfbd;
  --tenue: #b0a290;
  --marca: #ff6b3d;
  --marca-suave: #33241c;
  --accion: #ff6b3d;
  --sobre-accion: #161110;
  --linea: #382c23;
  --linea-suave: #2c221b;
  --ok: #86c793; --ok-suave: #1e2f24;
  --alerta: #e8c268; --alerta-suave: #332b18;
  --mal: #ff8a7a; --mal-suave: #3a211d;
  --info: #8fb3e6; --info-suave: #1f2733;
  --tipo-titulos: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.6);
  --wa-fondo: #0b141a; --wa-in: #202c33; --wa-out: #3a2a1f; --wa-check: #53BDEB; --wa-cabecera: #202c33;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html[data-marca="ayim"] { color-scheme: dark; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--tipo-texto); font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--tipo-titulos); color: var(--tinta); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.65rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; } h4 { font-size: .92rem; }
p { margin: 0; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
strong { color: var(--tinta); }
.mono { font-family: var(--tipo-mono); font-size: .92em; }
.tenue { color: var(--tenue); }
.chico { font-size: .84rem; }
.derecha { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }
hr { border: 0; border-top: 1px solid var(--linea-suave); margin: 14px 0; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--ancho-lateral) 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--superficie); border-right: 1px solid var(--linea); display: flex; flex-direction: column; padding: 18px 14px 70px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--tinta); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo .iso { width: 34px; height: 34px; border-radius: 9px; background: var(--marca); color: var(--sobre-accion); display: grid; place-items: center; font-family: var(--tipo-titulos); font-weight: 700; font-size: 1.15rem; }
.logo .nombre { font-family: var(--tipo-titulos); font-weight: 700; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.01em; }
.logo .sub { display: block; font-family: var(--tipo-texto); font-size: .72rem; color: var(--tenue); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radio-s); color: var(--texto); font-weight: 500; font-size: .93rem; }
.nav a:hover { background: var(--superficie-2); text-decoration: none; }
.nav a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.nav a .ic { width: 20px; height: 20px; flex: none; opacity: .85; }
.nav a .pill { margin-left: auto; font-size: .7rem; background: var(--mal); color: #fff; border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.nav .grupo { display: flex; align-items: center; gap: 7px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); padding: 13px 10px 5px; margin-top: 6px; border-top: 1px solid var(--linea-suave); font-weight: 700; }
.nav .grupo:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.nav .grupo em { font-style: normal; font-size: .6rem; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; font-weight: 700; background: var(--superficie-2); color: var(--tenue); border: 1px solid var(--linea-suave); }
.nav .grupo.paquete { color: var(--marca); }
.nav .grupo.paquete em { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.nav .grupo.addon em { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.nav a { padding: 8px 10px; }
.lateral .pie { margin-top: auto; padding: 10px 8px 0; font-size: .78rem; color: var(--tenue); }
.usuario { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--linea-suave); margin-top: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none; }
.avatar.s { width: 26px; height: 26px; font-size: .66rem; }
.avatar.l { width: 48px; height: 48px; font-size: 1rem; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea-suave); }
.barra h1 { font-size: 1.25rem; }
.barra .migas { color: var(--tenue); font-size: .86rem; }
.barra .espacio { flex: 1; }
.buscar { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--superficie); border: 1px solid var(--linea); border-radius: 99px; padding: 6px 14px; color: var(--tenue); font-size: .86rem; min-width: 260px; }
.buscar svg { width: 16px; height: 16px; flex: none; }
.buscar kbd { margin-left: auto; font-family: var(--tipo-texto); font-size: .7rem; border: 1px solid var(--linea); border-radius: 4px; padding: 0 5px; }
.conmutador { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 99px; padding: 3px; }
.conmutador button { border: 0; background: transparent; border-radius: 99px; padding: 5px 12px; font-size: .8rem; font-weight: 600; color: var(--tenue); cursor: pointer; }
.conmutador button.activo { background: var(--tinta); color: var(--fondo); }
.campana { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea); background: var(--superficie); display: grid; place-items: center; cursor: pointer; }
.campana .punto { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mal); border: 2px solid var(--superficie); }

.contenido { padding: 24px 28px 90px; width: 100%; max-width: 1760px; margin: 0 auto; }
@media (min-width: 1700px) { .contenido { padding-left: 40px; padding-right: 40px; } .barra { padding-left: 40px; padding-right: 40px; } }
.contenido.ancho { max-width: none; }

.banda { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; text-align: center; font-size: .74rem; letter-spacing: .04em; color: var(--tenue); background: color-mix(in srgb, var(--superficie) 92%, transparent); border-top: 1px solid var(--linea-suave); padding: 6px; backdrop-filter: blur(6px); }

/* ---------- Componentes ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.tarjeta.plana { box-shadow: none; }
.tarjeta .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tarjeta .cab h2, .tarjeta .cab h3 { flex: 1; }
.tarjeta .cab a { font-size: .84rem; font-weight: 600; }
.rejilla { display: grid; gap: 16px; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c21 { grid-template-columns: 2fr 1fr; }
.c12 { grid-template-columns: 1fr 2fr; }
.c31 { grid-template-columns: 3fr 1fr; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila.entre { justify-content: space-between; }
.fila.arriba { align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 4px; }
.mt { margin-top: 16px; } .mt-s { margin-top: 8px; } .mb { margin-bottom: 16px; }
.pila > * + * { margin-top: 16px; }

.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi .eti { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.kpi .val { font-family: var(--tipo-titulos); font-size: 1.75rem; color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .det { font-size: .84rem; color: var(--tenue); }
.kpi .det b { color: var(--texto); font-weight: 600; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accion); color: var(--sobre-accion); border: 1px solid transparent; border-radius: var(--radio-s); padding: 9px 16px; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .16s, transform .12s; }
.boton:hover { filter: brightness(1.08); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton.sec { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.boton.sec:hover { background: var(--superficie-2); }
.boton.fantasma { background: transparent; color: var(--marca); border-color: transparent; padding: 6px 10px; }
.boton.chico { padding: 5px 11px; font-size: .8rem; }
.boton.peligro { background: var(--mal); color: #fff; }
.boton svg { width: 16px; height: 16px; }

.etiqueta { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linea-suave); white-space: nowrap; letter-spacing: .01em; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.etiqueta.mal { background: var(--mal-suave); color: var(--mal); border-color: transparent; }
.etiqueta.info { background: var(--info-suave); color: var(--info); border-color: transparent; }
.etiqueta.marca { background: var(--marca-suave); color: var(--marca); border-color: transparent; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); flex: none; }
.punto.verde { background: var(--ok); } .punto.ambar { background: var(--alerta); } .punto.rojo { background: var(--mal); }
.punto.pulso { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: pulso 2.2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 7px transparent; } }

table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: var(--superficie-2); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .principal-celda { font-weight: 600; color: var(--tinta); }
.tabla .sub { display: block; font-size: .8rem; color: var(--tenue); font-weight: 400; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linea-suave); }
.lista li:last-child { border-bottom: 0; }
.lista .cuerpo { flex: 1; min-width: 0; }
.lista .titulo { font-weight: 600; color: var(--tinta); font-size: .92rem; }
.lista .meta { font-size: .8rem; color: var(--tenue); }
.lista .lado { text-align: right; font-size: .84rem; white-space: nowrap; }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; }
.pestanas button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; color: var(--tenue); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .92rem; }
.pestanas button.activo { color: var(--marca); border-color: var(--marca); }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros button { border: 1px solid var(--linea); background: var(--superficie); border-radius: 99px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--tenue); cursor: pointer; }
.filtros button.activo { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }

.interruptor { position: relative; width: 40px; height: 22px; border-radius: 99px; background: var(--linea); border: 0; cursor: pointer; transition: background .2s; flex: none; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.interruptor.on { background: var(--ok); }
.interruptor.on::after { transform: translateX(18px); }

.barra-prog { height: 8px; border-radius: 99px; background: var(--linea-suave); overflow: hidden; }
.barra-prog > span { display: block; height: 100%; background: var(--marca); border-radius: 99px; }

.aviso { border-radius: var(--radio); padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid; font-size: .9rem; }
.aviso.mal { background: var(--mal-suave); border-color: color-mix(in srgb, var(--mal) 30%, transparent); color: var(--tinta); }
.aviso.alerta { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); }
.aviso.ok { background: var(--ok-suave); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aviso.info { background: var(--info-suave); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.aviso .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }

.campo { display: grid; gap: 5px; font-size: .86rem; }
.campo > span { color: var(--tenue); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.campo input, .campo select, .campo textarea { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 9px 12px; width: 100%; color: var(--tinta); }
.dato { display: grid; gap: 2px; }
.dato .eti { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.dato .val { color: var(--tinta); font-weight: 500; }

/* Línea de tiempo */
.timeline { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.timeline li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 8px 0 14px; }
.timeline .ico { width: 20px; height: 20px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linea); display: grid; place-items: center; position: relative; z-index: 1; color: var(--tenue); }
.timeline .ico svg { width: 11px; height: 11px; }
.timeline li[data-tipo="resolucion"] .ico { border-color: var(--info); color: var(--info); }
.timeline li[data-tipo="factura"] .ico, .timeline li[data-tipo="pago"] .ico { border-color: var(--ok); color: var(--ok); }
.timeline li[data-tipo="whatsapp"] .ico { border-color: #25D366; color: #25D366; }
.timeline li[data-tipo="propuesta"] .ico { border-color: var(--marca); color: var(--marca); }
.timeline li[data-tipo="recordatorio"] .ico { border-color: var(--alerta); color: var(--alerta); }
.timeline .texto { font-size: .92rem; color: var(--tinta); }
.timeline .meta { font-size: .78rem; color: var(--tenue); }

/* Modal */
.modal-fondo { position: fixed; inset: 0; background: rgba(10,14,12,.55); display: none; place-items: center; z-index: 100; padding: 24px; }
.modal-fondo.abierto { display: grid; }
.modal { background: var(--superficie); border-radius: 16px; width: min(760px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); border: 1px solid var(--linea); animation: aparece .18s ease-out; }
.modal .m-cab { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--linea-suave); }
.modal .m-cab h2 { flex: 1; }
.modal .m-cuerpo { padding: 22px; }
.modal .m-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linea-suave); background: var(--superficie-2); border-radius: 0 0 16px 16px; }
.cerrar { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--tenue); padding: 4px 8px; border-radius: 6px; }
.cerrar:hover { background: var(--superficie-2); }
@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(20px); background: var(--tinta); color: var(--fondo); padding: 11px 18px; border-radius: 10px; font-size: .9rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); opacity: 0; transition: .25s; z-index: 200; pointer-events: none; display: flex; gap: 14px; align-items: center; }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast button { background: transparent; border: 0; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Documento tributario electrónico (vista previa con formato SII) */
.dte-marco { position: relative; }
.dte { background: #fff; color: #111; border: 1px solid #ccc; padding: 26px 30px 22px; font-size: .8rem; font-family: Arial, Helvetica, "Segoe UI", sans-serif; line-height: 1.35; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.dte * { color: inherit; }
.dte .cab { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: start; }
.dte .emisor .rs { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.dte .emisor div { font-size: .78rem; }
.dte .emisor .giro { font-weight: 700; margin-top: 2px; }
.dte .rojo { border: 2.5px solid #d40000; color: #d40000; border-radius: 4px; padding: 10px 8px; text-align: center; font-weight: 700; line-height: 1.35; }
.dte .rojo .rut { font-size: .95rem; }
.dte .rojo .tipo { font-size: .9rem; margin: 4px 0; }
.dte .rojo .folio { font-size: .95rem; }
.dte .sii { text-align: center; font-size: .74rem; margin-top: 4px; font-weight: 700; color: #333; }
.dte .receptor { margin-top: 16px; border: 1px solid #333; border-radius: 3px; padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 24px; font-size: .78rem; }
.dte .receptor b { display: inline-block; min-width: 118px; font-weight: 700; }
.dte table.det { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .78rem; }
.dte table.det th { background: #eee; border: 1px solid #333; padding: 5px 6px; text-align: left; font-size: .72rem; text-transform: uppercase; }
.dte table.det td { border-left: 1px solid #333; border-right: 1px solid #333; padding: 6px; vertical-align: top; }
.dte table.det tr:last-child td { border-bottom: 1px solid #333; }
.dte table.det .n { text-align: right; white-space: nowrap; }
.dte .bajo { display: grid; grid-template-columns: 1fr 300px; gap: 18px; margin-top: 14px; align-items: start; }
.dte .obs { border: 1px solid #333; border-radius: 3px; padding: 6px 10px; font-size: .74rem; min-height: 64px; }
.dte .obs b { display: block; margin-bottom: 2px; }
.dte table.tot { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dte table.tot td { border: 1px solid #333; padding: 5px 8px; }
.dte table.tot td:last-child { text-align: right; font-variant-numeric: tabular-nums; width: 46%; }
.dte table.tot tr.total td { font-weight: 700; background: #eee; }
.dte .pie { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-top: 16px; align-items: end; }
.dte .pdf417 { display: grid; grid-template-columns: repeat(60, 1fr); gap: 0; width: 290px; height: 92px; border: 1px solid #999; padding: 3px; background: #fff; }
.dte .pdf417 i { display: block; background: #000; }
.dte .pdf417 i.b { background: #fff; }
.dte .timbre { font-size: .7rem; text-align: center; margin-top: 3px; font-weight: 700; }
.dte .acuse { border: 1px solid #333; border-radius: 3px; padding: 8px 10px; font-size: .68rem; }
.dte .acuse .campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin-top: 8px; }
.dte .acuse .campos span { border-bottom: 1px solid #333; padding-bottom: 2px; }
.dte-marco .cedible { position: absolute; right: -8px; top: 50%; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #555; transform: rotate(90deg); }
.factura-doc { background: #fff; color: #1a1a1a; border: 1px solid #ddd; padding: 34px 38px; font-size: .86rem; font-family: "Segoe UI", system-ui, sans-serif; }
.factura-doc h2, .factura-doc h3 { color: #1a1a1a; }

/* Semana (calendario) */
.semana { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dia { background: var(--superficie-2); border: 1px solid var(--linea-suave); border-radius: var(--radio-s); padding: 10px; min-height: 200px; }
.dia.hoy { border-color: var(--marca); background: var(--marca-suave); }
.dia .d-cab { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600; }
.dia .d-num { font-family: var(--tipo-titulos); font-size: 1.3rem; color: var(--tinta); }
.evento { margin-top: 8px; border-left: 3px solid var(--marca); background: var(--superficie); border-radius: 6px; padding: 6px 8px; font-size: .78rem; box-shadow: var(--sombra); }
.evento .h { font-weight: 700; color: var(--tinta); }
.evento.plazo { border-color: var(--alerta); }
.evento.audiencia { border-color: var(--info); }
.evento.auto { border-color: var(--ok); }

/* Roles */
.rol-tarjeta { display: grid; gap: 10px; }
.permisos { display: grid; gap: 6px; font-size: .84rem; }
.permisos div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--linea-suave); }

/* Carpetas del archivo */
.carpeta { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radio-s); cursor: pointer; }
.carpeta:hover, .carpeta.activa { background: var(--superficie-2); }
.carpeta svg { width: 22px; height: 22px; color: var(--alerta); flex: none; }
.carpeta .n { font-weight: 600; color: var(--tinta); font-size: .9rem; }
.carpeta .c { margin-left: auto; font-size: .78rem; color: var(--tenue); }
.subcarpetas { padding-left: 46px; display: none; }
.carpeta.activa + .subcarpetas { display: block; }
.subcarpetas div { padding: 6px 8px; font-size: .86rem; color: var(--texto); border-radius: 6px; cursor: pointer; }
.subcarpetas div:hover { background: var(--superficie-2); }

.icono-pdf { width: 40px; height: 48px; border-radius: 6px; background: #E5484D; color: #fff; display: grid; place-items: center; font-size: .66rem; font-weight: 800; letter-spacing: .04em; flex: none; position: relative; }
.icono-pdf::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--superficie) rgba(0,0,0,.2) transparent; }

/* Responsive */
@media (max-width: 1100px) { .c4 { grid-template-columns: repeat(2, 1fr); } .c3 { grid-template-columns: repeat(2, 1fr); } .c21, .c12, .c31 { grid-template-columns: 1fr; } .buscar { display: none; } }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding-bottom: 12px; } .nav { flex-direction: row; flex-wrap: wrap; } .nav .grupo, .lateral .pie, .usuario { display: none; } .c2, .c3, .c4 { grid-template-columns: 1fr; } .contenido, .barra { padding-left: 16px; padding-right: 16px; } .semana { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Pulido UX (iteración 2) ---------- */
/* Cursor y foco: todo lo clicable se ve clicable; el caret se ve. */
button, .boton, .clic, .carpeta, .doc-fila, .nav a, .conmutador button, .pestanas button, .filtros button, .interruptor, .campana, .buscar, .evento, .tarjeta.kpi[href], .accion, label.tarea { cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, textarea { cursor: text; caret-color: var(--marca); }
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: .8; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--linea)); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.campo input:disabled { background: var(--superficie-2); color: var(--tenue); cursor: default; }

/* Dropdowns: apariencia propia, chevron, estados. */
select, .campo select { appearance: none; -webkit-appearance: none; padding-right: 38px !important; background-color: var(--superficie); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7A75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; color: var(--tinta); }
html[data-marca="ayim"] select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0a290' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
select option { background: var(--superficie); color: var(--tinta); padding: 8px; }
select:focus { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); outline: none; }

/* Hover en tarjetas enlazadas y filas */
.tarjeta.kpi[href] { transition: transform .15s, box-shadow .15s, border-color .15s; }
.tarjeta.kpi[href]:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--marca) 40%, var(--linea)); box-shadow: 0 10px 24px -12px rgba(20,38,31,.28); }
.boton.sec:focus-visible, .boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.lista li a:hover, .tabla a:hover { text-decoration: underline; }
.migas a { color: var(--tenue); }
.migas a:hover { color: var(--marca); }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--tenue); margin-bottom: 10px; }
.volver:hover { color: var(--marca); text-decoration: none; }
.volver svg { width: 14px; height: 14px; }

/* Búsqueda global (Ctrl K) */
.busq { position: fixed; inset: 0; z-index: 120; background: rgba(10,14,12,.5); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.busq.abierto { display: flex; }
.busq .caja { width: min(680px, 94vw); background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); overflow: hidden; animation: aparece .15s ease-out; }
.busq input { width: 100%; border: 0; background: transparent; padding: 16px 18px; font-size: 1.05rem; color: var(--tinta); outline: none; border-bottom: 1px solid var(--linea-suave); }
.busq .res { max-height: 56vh; overflow: auto; padding: 6px; }
.busq .grupo-b { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); font-weight: 700; padding: 10px 12px 4px; }
.busq a.item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.busq a.item:hover, .busq a.item.sel { background: var(--marca-suave); }
.busq a.item .t { font-weight: 600; font-size: .92rem; }
.busq a.item .s { font-size: .78rem; color: var(--tenue); }
.busq a.item .k { margin-left: auto; font-size: .72rem; color: var(--tenue); }
.busq .pie-b { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--linea-suave); font-size: .74rem; color: var(--tenue); background: var(--superficie-2); }
.busq kbd { font-family: var(--tipo-texto); border: 1px solid var(--linea); border-radius: 4px; padding: 0 5px; font-size: .7rem; }

/* Tour guiado */
.tour-velo { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.tour-foco { position: fixed; z-index: 151; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10,14,12,.62), 0 0 0 3px var(--marca); transition: all .3s ease; pointer-events: none; }
.tour-caja { position: fixed; z-index: 152; width: min(380px, 92vw); background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.6); animation: aparece .2s ease-out; }
.tour-caja .paso { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--marca); font-weight: 700; }
.tour-caja h3 { margin: 4px 0 6px; font-size: 1.1rem; }
.tour-caja p { font-size: .9rem; }
.tour-caja .acc { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.tour-caja .acc .espacio { flex: 1; }
.tour-caja .puntos { display: flex; gap: 5px; }
.tour-caja .puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--linea); }
.tour-caja .puntos i.on { background: var(--marca); }
.tour-caja.centro { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92vw); }
.tour-flecha { position: absolute; width: 14px; height: 14px; background: var(--superficie); border-left: 1px solid var(--linea); border-top: 1px solid var(--linea); transform: rotate(45deg); }
.btn-tour { position: fixed; right: 16px; bottom: 34px; z-index: 49; }
.btn-tour .boton { box-shadow: 0 8px 22px -8px rgba(0,0,0,.45); border-radius: 99px; padding: 7px 14px; font-size: .8rem; }

/* Cursor dibujado para capturas (?cursor=x,y) */
.cursor-falso { position: fixed; z-index: 500; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* ---------- Transiciones entre páginas ---------- */
/* Fundido cruzado nativo entre documentos (Chrome/Edge 126+); en el resto, fundido al entrar y al salir. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* Solo opacidad: un transform en body haría que todo lo position:fixed (modales, desplegables, novedades) se posicione respecto al body y no a la ventana. */
body { animation: pagina-entra .28s ease-out; }
body.saliendo { opacity: 0; transition: opacity .16s ease-in; }
@keyframes pagina-entra { from { opacity: 0; } to { opacity: 1; } }
html.captura body { animation: none; }
.nav a, .tabla tr.clic, .lista li, .carpeta, .tarjeta { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.nav a.activo { position: relative; }
.nav a.activo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--marca); }
@media (prefers-reduced-motion: reduce) { body { animation: none; } body.saliendo { opacity: 1; } }

/* ---------- Desplegables propios (reemplazan al select nativo) ---------- */
.sel { position: relative; width: 100%; }
.sel > select { display: none !important; }
.sel-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 9px 12px; min-height: 42px; color: var(--tinta); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s; }
.sel-btn:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--linea)); }
.sel-btn:focus-visible, .sel.abierto .sel-btn { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); }
.sel-btn:disabled { background: var(--superficie-2); color: var(--tenue); cursor: default; }
.sel-btn .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn .txt small { color: var(--tenue); font-size: .8em; margin-left: 6px; }
.sel-btn svg { width: 16px; height: 16px; color: var(--tenue); flex: none; transition: transform .18s; }
.sel.abierto .sel-btn svg { transform: rotate(180deg); }
.sel-menu { position: fixed; z-index: 400; min-width: 200px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.35), 0 2px 8px -4px rgba(0,0,0,.2); padding: 6px; max-height: 300px; overflow: auto; animation: aparece .14s ease-out; }
.sel-op { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .92rem; color: var(--tinta); }
.sel-op .p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sel-op .p small { color: var(--tenue); font-size: .78rem; font-family: var(--tipo-mono); }
.sel-op:hover, .sel-op.foco { background: var(--marca-suave); color: var(--marca); }
.sel-op .ok { width: 16px; height: 16px; color: var(--marca); opacity: 0; flex: none; }
.sel-op.sel-actual { font-weight: 600; }
.sel-op.sel-actual .ok { opacity: 1; }

/* ---------- Panel de novedades (campanita) ---------- */
.campana.activa { border-color: var(--marca); }
.notis { position: fixed; z-index: 380; width: min(420px, 94vw); background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.4); animation: aparece .16s ease-out; overflow: hidden; }
.notis .cab-n { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); }
.notis .cab-n h3 { flex: 1; font-size: 1rem; }
.notis .cab-n button { border: 0; background: transparent; color: var(--marca); font-weight: 600; font-size: .8rem; cursor: pointer; }
.notis .lista-n { max-height: 60vh; overflow: auto; }
.notis a.n { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--linea-suave); color: var(--tinta); text-decoration: none; align-items: start; }
.notis a.n:last-child { border-bottom: 0; }
.notis a.n:hover { background: var(--superficie-2); text-decoration: none; }
.notis a.n.leida { opacity: .55; }
.notis .ic-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); }
.notis .ic-n svg { width: 16px; height: 16px; }
.notis .ic-n.mal { background: var(--mal-suave); color: var(--mal); }
.notis .ic-n.alerta { background: var(--alerta-suave); color: var(--alerta); }
.notis .ic-n.ok { background: var(--ok-suave); color: var(--ok); }
.notis .t { font-size: .88rem; font-weight: 600; }
.notis .d { font-size: .8rem; color: var(--tenue); }
.notis .h { font-size: .74rem; color: var(--tenue); white-space: nowrap; }
.notis .pie-n { padding: 10px 16px; border-top: 1px solid var(--linea-suave); font-size: .78rem; color: var(--tenue); background: var(--superficie-2); }