/* ===========================================================================
   modulos.css — componentes nuevos de AlejandroSepulveda.cl
   Se suma a sitio.css sin modificarlo: misma paleta, mismos tipos, mismas
   reglas de un píxel. Solo añade: páginas de documento, formularios,
   actualidad, banner y centro de preferencias de privacidad.
   =========================================================================== */

/* ---------------------------------------------------------- documentos */
.doc{ padding-block:clamp(48px,6vw,96px) }
.doc__head{ max-width:74ch; margin-bottom:clamp(28px,3.4vw,44px) }
.doc__head h1{ font-size:clamp(2rem,4.2vw,3.1rem); letter-spacing:-.025em; margin-top:16px }
.doc__head .lead{ margin-top:18px; font-size:clamp(1.02rem,1.4vw,1.14rem); line-height:1.72 }
.doc__meta{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.doc__body{ max-width:74ch }
.doc__body h2{ font-size:clamp(1.25rem,2.1vw,1.62rem); margin-top:clamp(32px,3.6vw,46px) }
.doc__body h3{ font-size:clamp(1.05rem,1.6vw,1.2rem); margin-top:26px; font-family:var(--body); font-weight:600; letter-spacing:0 }
.doc__body p{ margin-top:14px; font-size:clamp(1rem,1.32vw,1.06rem); line-height:1.78 }
.doc__body ul,.doc__body ol{ margin:14px 0 0; padding-left:20px }
.doc__body li{ margin-top:8px; line-height:1.7 }
.doc__body li::marker{ color:var(--petrol) }
.doc__body a{ text-decoration:underline }
.doc__box{ margin-top:26px; padding:clamp(20px,2.6vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }
.doc__box h3{ margin-top:0; font-family:var(--display); font-size:1.15rem }
.doc__toc{ margin-top:26px; padding:clamp(20px,2.6vw,30px); background:var(--petrol-lt); border-radius:var(--r) }
.doc__toc ol{ margin:12px 0 0; padding-left:20px; columns:2; column-gap:32px }
.doc__toc li{ margin-top:6px; font-size:15px }
@media (max-width:640px){ .doc__toc ol{ columns:1 } }

/* ------------------------------------------------------------ tarjetas */
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px); margin-top:clamp(26px,3.2vw,40px) }
.mini{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,28px) }
.mini h3{ font-size:1.06rem; font-family:var(--body); font-weight:600; letter-spacing:0 }
.mini p{ margin-top:10px; font-size:15px }
.mini ul{ margin:12px 0 0; padding-left:18px }
.mini li{ margin-top:6px; font-size:14.5px; line-height:1.6 }

/* ----------------------------------------------------------- formulas */
.form{ margin-top:clamp(24px,3vw,36px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,38px); max-width:760px }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.form__row{ display:flex; flex-direction:column; gap:7px }
.form__row--full{ grid-column:1 / -1 }
.form label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); font-family:var(--body); font-size:16px; color:var(--fg);
}
.form textarea{ min-height:130px; resize:vertical }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--petrol); background:var(--surface) }
.form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid{ border-color:oklch(0.55 0.16 25) }
.form__check{ display:flex; gap:11px; align-items:flex-start; margin-top:6px }
.form__check input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--petrol) }
.form__check span{ font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--fg-soft); line-height:1.55 }
.form__actions{ margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.form__note{ margin-top:14px; font-size:13px; color:var(--muted); line-height:1.6 }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.hp{ position:absolute; left:-9999px }
.alerta{ margin-top:16px; padding:13px 16px; border-radius:var(--r); font-size:14.5px; line-height:1.6; display:none }
.alerta:not(:empty){ display:block }
.alerta--ok{ background:oklch(0.95 0.03 155); color:oklch(0.34 0.08 155); border:1px solid oklch(0.85 0.05 155) }
.alerta--error{ background:oklch(0.95 0.03 25); color:oklch(0.40 0.14 25); border:1px solid oklch(0.86 0.06 25) }
@media (max-width:640px){ .form__grid{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- actualidad */
.notas{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,22px) }
.notas--home{ grid-template-columns:repeat(4,1fr); margin-top:clamp(26px,3.2vw,40px) }
.nota{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; gap:10px }
.nota:hover{ border-color:var(--line-strong) }
.nota__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted) }
.nota__cat{ color:var(--petrol) }
.nota__title{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.32 }
.nota__title a{ color:var(--fg); text-decoration:none }
.nota__title a:hover{ color:var(--petrol); text-decoration:underline }
.nota__bajada{ font-size:14.5px; line-height:1.6; color:var(--fg-soft) }
@media (max-width:1023px){ .notas--home{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .notas,.notas--home{ grid-template-columns:1fr } }

.filtros{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:clamp(24px,3vw,36px); padding-bottom:22px; border-bottom:1px solid var(--line) }
.filtros__row{ display:flex; flex-direction:column; gap:6px; min-width:180px }
.filtros label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.filtros input,.filtros select{ padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); font-family:var(--body); font-size:15.5px; color:var(--fg) }
.filtros__row--grow{ flex:1 1 240px }
.pager{ margin-top:clamp(26px,3.2vw,40px); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between }
.pager__info{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.pager__nav{ display:flex; flex-wrap:wrap; gap:8px }
.pager__link{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--fg-soft); text-decoration:none; font-size:15px }
.pager__link:hover{ border-color:var(--petrol); color:var(--petrol) }
.pager__link.is-actual{ background:var(--petrol); border-color:var(--petrol); color:#fff }
.vacio{ margin-top:24px; padding:24px 0; border-bottom:1px solid var(--line); color:var(--muted) }

/* ------------------------------------------ privacidad y preferencias */
.pv-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:80; display:flex; justify-content:center; pointer-events:none }
.pv-banner__box{
  pointer-events:auto; width:min(760px,100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(20px,2.6vw,30px); box-shadow:0 24px 60px oklch(0.27 0.02 250 / .16);
}
.pv-banner__box h2{ font-size:clamp(1.15rem,1.9vw,1.45rem) }
.pv-banner__box p{ margin-top:12px; font-size:14.5px; line-height:1.65; color:var(--fg-soft) }
.pv-banner__actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px }
.pv-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px;
  background:var(--petrol); color:#fff; border:1px solid var(--petrol); border-radius:999px;
  font-family:var(--body); font-weight:600; font-size:14.5px; cursor:pointer;
}
.pv-btn:hover{ background:var(--petrol-dk); border-color:var(--petrol-dk); color:#fff }
.pv-btn--ghost{ background:var(--surface); color:var(--fg); border-color:var(--line) }
.pv-btn--ghost:hover{ background:var(--surface); border-color:var(--petrol); color:var(--petrol) }

.pv-panel{ position:fixed; inset:0; z-index:90; background:oklch(0.27 0.02 250 / .42); display:flex; align-items:center; justify-content:center; padding:20px }
.pv-panel[hidden]{ display:none }
.pv-panel__box{ width:min(680px,100%); max-height:88vh; overflow:auto; background:var(--surface); border-radius:var(--r); padding:clamp(24px,3vw,38px) }
.pv-panel__box h2{ font-size:clamp(1.25rem,2.1vw,1.6rem) }
.pv-panel__lead{ margin-top:12px; font-size:15px; color:var(--fg-soft) }
.pv-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--line) }
.pv-row:first-of-type{ margin-top:18px }
.pv-row__txt strong{ display:block; font-size:15.5px; color:var(--fg) }
.pv-row__txt span{ display:block; margin-top:4px; font-size:14px; color:var(--muted); line-height:1.55; max-width:44ch }
.pv-switch{ position:relative; flex:none; width:52px; height:30px; display:inline-block }
.pv-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.pv-switch__vis{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .2s ease }
.pv-switch__vis::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:50%; transition:transform .2s ease }
.pv-switch input:checked + .pv-switch__vis{ background:var(--petrol) }
.pv-switch input:checked + .pv-switch__vis::after{ transform:translateX(22px) }
.pv-switch input:disabled + .pv-switch__vis{ opacity:.55 }
.pv-switch input:disabled{ cursor:not-allowed }
.pv-switch input:focus-visible + .pv-switch__vis{ outline:2px solid var(--petrol); outline-offset:3px }
.pv-panel__actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px }

/* Botón de texto para el pie */
.link-btn{ background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--fg-soft); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase }
.link-btn:hover{ color:var(--petrol) }

@media (max-width:640px){
  .pv-banner{ left:10px; right:10px; bottom:10px }
  .pv-banner__actions .pv-btn{ width:100% }
}

/* ============================================================== IRIS ===
   El widget de Iris trae su propia hoja (iris/widget.css), que el propio
   widget inyecta al final del <head>. Estas reglas la ajustan al sitio:
   especificidad mayor, así que ganan sin tocar el archivo entregado.
   Objetivo: que no tape el aviso de privacidad ni el botón de WhatsApp.  */
#iris-widget{ font-family:var(--body) }
#iris-launcher{ font-family:var(--body); font-weight:600; letter-spacing:.005em }

/* Con el aviso de privacidad en pantalla, el widget se aparta hacia arriba
   y el panel se acorta para no salirse de la ventana. */
html.con-banner-privacidad #iris-widget{ bottom:clamp(200px,26vh,240px) }
html.con-banner-privacidad #iris-panel{ height:min(520px,calc(100dvh - 300px)) }

/* En pantallas bajas o angostas no hay sitio para los dos: el widget espera
   a que el visitante resuelva el aviso. */
@media (max-width:640px){ html.con-banner-privacidad #iris-widget{ display:none } }
@media (max-height:620px){ html.con-banner-privacidad #iris-widget{ display:none } }

/* El panel nunca debe quedar por debajo de la franja de botones del pie. */
#iris-panel{ max-height:calc(100dvh - 130px) }
@media (max-width:640px){ #iris-panel{ width:calc(100vw - 24px); right:-10px } }
/* ========================================================= MIS DATOS Y DERECHOS ===
   Modal rápido que reutiliza el mismo backend (/api/derechos.php). No es un
   segundo sistema de derechos: es la misma solicitud, con el mismo expediente,
   solo que sin salir de la página. Identidad de AlejandroSepulveda.cl. */

/* La hoja del sitio no define este tono y se usa para el borde al pasar el dedo. */
:root{ --line-strong: oklch(0.855 0.008 250) }

.dsr{ position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px }
.dsr[hidden]{ display:none }
.dsr__overlay{ position:absolute; inset:0; background:oklch(0.27 0.02 250 / .48); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.dsr__caja{
  position:relative; width:min(620px,100%); max-height:90vh; overflow:auto;
  background:var(--surface); border-radius:var(--r); padding:clamp(24px,3vw,40px);
  box-shadow:0 30px 80px oklch(0.27 0.02 250 / .28);
}
.dsr__x{
  position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; background:none;
  font-size:26px; line-height:1; cursor:pointer; color:var(--muted); border-radius:var(--r);
}
.dsr__x:hover{ background:var(--petrol-lt); color:var(--petrol) }
.dsr__caja h2{ font-size:clamp(1.35rem,2.4vw,1.8rem); padding-right:52px }
.dsr__lead{ margin-top:14px; font-size:15px; line-height:1.7; color:var(--fg-soft) }
.dsr form{ margin-top:24px; display:flex; flex-direction:column; gap:16px }
.dsr .form__row{ display:flex; flex-direction:column; gap:7px }
.dsr .form__row label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) }
.dsr .form__row input,.dsr .form__row select,.dsr .form__row textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); font-family:var(--body); font-size:16px; color:var(--fg);
}
.dsr .form__row textarea{ min-height:110px; resize:vertical }
.dsr .form__row input:focus,.dsr .form__row select:focus,.dsr .form__row textarea:focus{ border-color:var(--petrol); background:var(--surface) }
.dsr__nota{ font-size:14px; line-height:1.65; color:var(--fg-soft); background:var(--petrol-lt); padding:13px 15px; border-radius:var(--r) }
.dsr__privacidad{ font-size:13.5px; line-height:1.65; color:var(--muted); border-top:1px solid var(--line); padding-top:16px }
.dsr__ok{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line) }
.dsr__ok h3{ font-size:1.15rem; font-family:var(--display); font-weight:400; color:var(--fg) }
.dsr__ok p{ margin-top:12px; font-size:15px; line-height:1.7 }
.dsr__ok code{ font-family:var(--mono); font-size:15px; letter-spacing:.05em; background:var(--petrol-lt); padding:4px 9px; border-radius:4px; color:var(--fg) }

/* Con el modal abierto, la pagina no se desplaza y el chat no se superpone. */
html.dsr-abierto{ overflow:hidden }
html.dsr-abierto #iris-widget{ display:none }

@media (max-width:640px){
  .dsr{ padding:10px }
  .dsr__caja{ max-height:94vh; padding:22px 18px }
  .dsr__x{ top:6px; right:6px }
}