@import url("fonts.css");

/* ============================================================
   C.R. Lagos de Verde Alfaguara — documentos públicos
   Pensado para leerse en celular, de pie, por gente de todas
   las edades: cuerpo de 18px, interlineado amplio, alto contraste.
   ============================================================ */

:root{
  --papel:#FBFAF8;
  --papel-2:#F3F2EE;
  --tinta:#1A1F1D;
  --tinta-2:#3D4642;
  --tinta-3:#5F6B65;
  --linea:#E0E3DD;
  --linea-2:#CBD1C9;
  --verde:#14513E;
  --verde-2:#2F7D5F;
  --verde-suave:#EDF3EF;
  --realce:#8A5A00;
  --realce-fondo:#FBF3E2;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ancho:70ch;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#141816;
    --papel-2:#1B211E;
    --tinta:#EDF0EC;
    --tinta-2:#C2CAC5;
    --tinta-3:#98A29C;
    --linea:#2A322E;
    --linea-2:#3C453F;
    --verde:#7FCBA6;
    --verde-2:#5FB88D;
    --verde-suave:#1A2622;
    --realce:#E9C27A;
    --realce-fondo:#2A2317;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,figure{margin:0}
a{color:var(--verde-2);text-underline-offset:3px}
a:hover{color:var(--verde)}
:focus-visible{outline:3px solid var(--verde-2);outline-offset:3px;border-radius:3px}

.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--verde);color:#fff;padding:12px 20px;font-family:var(--sans);font-weight:600;border-radius:0 0 8px 0}
.saltar:focus{left:0}

/* ---------- cabecera institucional ---------- */
.membrete{background:var(--verde);color:#F4F8F5}
@media (prefers-color-scheme:dark){.membrete{background:#10201A}}
.membrete-in{max-width:var(--ancho);margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;justify-content:space-between}
.membrete .nombre{font-family:var(--sans);font-weight:700;font-size:14.5px;letter-spacing:.02em;line-height:1.35}
.membrete .nit{font-family:var(--sans);font-size:12.5px;opacity:.82;letter-spacing:.04em}
.membrete a{color:#F4F8F5}

/* ---------- portada del documento ---------- */
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.portada{padding:44px 0 32px;border-bottom:2px solid var(--verde)}
.tipo-doc{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--verde-2);margin-bottom:14px}
h1{font-family:var(--sans);font-weight:700;font-size:clamp(28px,6vw,40px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;color:var(--tinta)}
.subtitulo{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--tinta-3);margin-top:14px}

.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:10px;overflow:hidden;margin-top:28px}
.ficha div{background:var(--papel-2);padding:13px 16px}
.ficha dt{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:3px}
.ficha dd{margin:0;font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--tinta)}

/* ---------- índice ---------- */
.indice{margin:32px 0 8px;border:1px solid var(--linea);border-radius:10px;background:var(--papel-2);overflow:hidden}
.indice summary{font-family:var(--sans);font-weight:600;font-size:15px;padding:15px 20px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.indice summary::-webkit-details-marker{display:none}
.indice summary::after{content:"▾";font-size:13px;color:var(--tinta-3);transition:transform .2s ease}
.indice[open] summary::after{transform:rotate(180deg)}
.indice ol{margin:0;padding:0 20px 18px 20px;list-style:none;counter-reset:cap}
.indice li{margin:0}
.indice a{display:block;font-family:var(--sans);font-size:14.5px;line-height:1.4;padding:7px 0;color:var(--tinta-2);text-decoration:none;border-top:1px solid var(--linea)}
.indice a:hover{color:var(--verde-2)}
.indice .sub{padding-left:16px;font-size:13.5px;color:var(--tinta-3)}

/* ---------- cuerpo del documento ---------- */
.cuerpo{padding:8px 0 56px}
.cap{margin-top:44px;scroll-margin-top:16px}
.cap > h2{
  font-family:var(--sans);font-weight:700;font-size:clamp(19px,4vw,23px);line-height:1.25;
  color:var(--verde);padding-bottom:10px;border-bottom:1px solid var(--linea-2);margin-bottom:20px;text-wrap:balance;
}
@media (prefers-color-scheme:dark){.cap > h2{color:var(--verde)}}
h3{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.35;color:var(--tinta);margin:28px 0 10px;text-wrap:balance;scroll-margin-top:16px}
h4{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--tinta-2);margin:20px 0 8px}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 15px;padding-left:26px}
li{margin-bottom:9px}
li:last-child{margin-bottom:0}
ul.limpia{list-style:none;padding-left:0}
ul.limpia li{padding-left:20px;position:relative}
ul.limpia li::before{content:"—";position:absolute;left:0;color:var(--verde-2)}
strong{font-weight:600;color:var(--tinta)}
em{font-style:italic}
.termino{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--verde);display:block;margin-top:18px}

/* bloques destacados */
.nota{background:var(--papel-2);border-left:4px solid var(--verde-2);border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0}
.nota p{font-size:16.5px}
.nota .rotulo{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-2);display:block;margin-bottom:7px}
.aviso-edicion{background:var(--realce-fondo);border:1px solid var(--realce);border-radius:8px;padding:16px 20px;margin:22px 0}
.aviso-edicion p{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--tinta-2);margin:0}
.aviso-edicion strong{color:var(--realce)}
.paragrafo{background:var(--verde-suave);border-radius:8px;padding:16px 20px;margin:20px 0}
.paragrafo .rotulo{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);display:block;margin-bottom:7px}

/* tabla de proveedores */
.tabla-envoltura{overflow-x:auto;margin:20px 0;border:1px solid var(--linea);border-radius:10px}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:14.5px;min-width:460px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:var(--papel-2);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
tr:last-child td{border-bottom:0}

/* ---------- portada de índice general ---------- */
.intro{padding:40px 0 8px}
.intro p{font-size:19px;line-height:1.65;color:var(--tinta-2)}
.tarjetas{display:grid;gap:16px;margin:30px 0 8px}
.tarjeta{display:block;border:1px solid var(--linea-2);border-radius:12px;padding:24px;background:var(--papel-2);text-decoration:none;transition:border-color .18s ease,background .18s ease}
.tarjeta:hover{border-color:var(--verde-2);background:var(--verde-suave)}
.tarjeta .rotulo{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-2);display:block;margin-bottom:9px}
.tarjeta h2{font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.25;color:var(--tinta);margin-bottom:8px}
.tarjeta p{font-size:16px;line-height:1.55;color:var(--tinta-3);margin:0}
.tarjeta .ir{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--verde-2);margin-top:12px;display:inline-block}

.recuadro-contacto{border:1px solid var(--linea);border-radius:12px;padding:24px;margin:30px 0 10px}
.recuadro-contacto h2{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--tinta);margin-bottom:12px}
.recuadro-contacto p{font-size:16.5px;margin-bottom:10px}
.recuadro-contacto ul{padding-left:22px}
.recuadro-contacto li{font-size:16.5px}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--linea);background:var(--papel-2);margin-top:40px}
.pie{max-width:var(--ancho);margin:0 auto;padding:28px 24px 40px;font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--tinta-3)}
.pie strong{display:block;color:var(--tinta-2);font-weight:600;margin-bottom:5px}
.pie .fila{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)}
.pie a{color:var(--tinta-3);text-decoration:underline}
.pie a:hover{color:var(--verde-2)}

.volver{display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:600;margin:0 0 4px;text-decoration:none}
.volver::before{content:"← "}

@media (max-width:640px){
  body{font-size:17px}
  .envoltura,.membrete-in,.pie{padding-left:18px;padding-right:18px}
  .portada{padding-top:32px}
  .ficha{grid-template-columns:1fr}
  .tarjeta{padding:20px}
}

@media print{
  .indice,.saltar,.volver{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .membrete{background:#fff;color:#000;border-bottom:2px solid #000}
  .cap>h2{color:#000}
  a{color:#000;text-decoration:none}
}