/* ============================================================
   Criterio · estética de ACM La Fe · GIA (octubre de 2026)
   Papel, petróleo y óxido; Inter Tight para titulares, Inter para el texto,
   IBM Plex Mono para rótulos y datos. Esquinas rectas, filetes de tinta.
   ============================================================ */
@font-face{font-family:"Inter";src:url("/estatico/Inter-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("/estatico/InterTight-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/estatico/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/estatico/IBMPlexMono-500.woff2") format("woff2");font-weight:500 700;font-display:swap}

:root{
  --paper:#efebe1;--paper2:#e4dfd2;--card:#fff;
  --ink:#0f1f26;--ink2:#34454d;--muted:#5d6a71;--muted2:#8d979c;
  --rule:#b5ad9b;--rule2:#d8d1c1;--border:#cfc7b5;--border-dark:#a89e87;
  --pet:#006d77;--pet2:#00404a;--pet-soft:#dbe9ea;--pet-bg:#eef3f2;
  --ox:#a94423;--ox-soft:#f2dcd3;--oro:#b8860b;--oro-soft:#f3e7c9;--tinta:#172c34;
  --titulo:"Inter Tight","Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ancho:1240px;--ease:cubic-bezier(.22,.61,.36,1)
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--pet)}
b,strong{font-weight:650}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.ojo{font:500 11px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ox)}
.ojo.gris{color:var(--muted)}
:focus-visible{outline:2px solid var(--pet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:30;background:rgba(239,235,225,.93);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule2)}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:22px}
.marca{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;flex:none}
.marca img{height:36px;width:auto;display:block}
.marca .sep{width:1px;height:30px;background:var(--rule2)}
.marca-t{font:800 20px/1 var(--titulo);letter-spacing:-.03em}
.marca-t i{font-style:normal;color:var(--ox)}
.marca-s{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.nav{display:flex;gap:2px;margin-left:10px}
.nav a{display:flex;align-items:baseline;gap:7px;padding:9px 12px;text-decoration:none;color:var(--ink2);font-weight:600;font-size:14px;border-bottom:3px solid transparent}
.nav a span{font:500 10.5px var(--mono);color:var(--ox)}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:14px}
.yo{font:500 11.5px var(--mono);color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 15px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font:500 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,transform .15s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.lleno{background:var(--ink);color:var(--paper)}
.btn.lleno:hover{background:var(--pet2);border-color:var(--pet2)}
.btn.suave{border-color:var(--border-dark);color:var(--ink2)}
.btn.suave:hover{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn.peq{min-height:32px;padding:6px 11px;font-size:11px}
.lnk{background:none;border:0;cursor:pointer;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lnk:hover{color:var(--ink)}

/* ---------- portada ---------- */
.mast{position:relative;overflow:hidden;border-bottom:3px solid var(--ink)}
.mast-in{position:relative;max-width:var(--ancho);margin:0 auto;padding:56px 24px 40px;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
.mast svg.red{position:absolute;right:-60px;top:-40px;width:min(64vw,760px);height:auto;pointer-events:none}
.mast svg.red .n{animation:flota 8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.mast svg.red .n:nth-child(2n){animation-duration:10s;animation-delay:-3s}
.mast svg.red .n:nth-child(3n){animation-duration:12s;animation-delay:-6s}
@keyframes flota{from{transform:translate(0,0)}to{transform:translate(5px,-8px)}}
.mast h1{font:800 clamp(52px,8.4vw,112px)/.92 var(--titulo);letter-spacing:-.045em;margin-top:14px;position:relative}
.mast h1 .pet{color:var(--pet)}
.mast h1 .pt{color:var(--ox)}
.mast .lead{position:relative;margin-top:18px;font:500 clamp(18px,2vw,23px)/1.35 var(--titulo);letter-spacing:-.01em;color:var(--ink2);max-width:34ch;text-wrap:pretty}
.mast .meta{position:relative;margin-top:22px;font:400 12px var(--mono);color:var(--muted)}
.mast .meta b{font:800 15px var(--titulo);color:var(--ink);letter-spacing:-.01em}
.lema{position:absolute;right:24px;bottom:20px;font:600 15px var(--titulo);letter-spacing:-.01em;color:var(--ink2)}
.lema span{color:var(--ox)}

main{max-width:var(--ancho);margin:0 auto;padding:0 24px 80px}
.sec{margin-top:40px;border-top:3px solid var(--ink);padding-top:20px}
.sec-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.sec-cab .nn{font:500 11px var(--mono);background:var(--ink);color:var(--paper);padding:4px 9px;letter-spacing:.05em}
.sec-cab h2{font:800 28px/1 var(--titulo);letter-spacing:-.035em}
.sec-cab .cuenta{font:400 12px var(--mono);color:var(--muted)}
.sec-cab .der{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.chipf{border:1px solid var(--border);background:transparent;padding:6px 11px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.chipf:hover{border-color:var(--ink)}
.chipf.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* cifras */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-bottom:30px}
.kpi{border-top:2px solid var(--ink);padding-top:10px}
.kpi .v{font:800 46px/1 var(--titulo);letter-spacing:-.04em}
.kpi .v.pet{color:var(--pet)} .kpi .v.ox{color:var(--ox)}
.kpi .l{font-size:13px;color:var(--ink2);margin-top:6px}

/* tarjetas de informe */
.cartas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.carta{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);color:inherit;text-decoration:none;min-width:0;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;animation:sube .55s var(--ease) both}
.carta:nth-child(2){animation-delay:.06s}.carta:nth-child(3){animation-delay:.12s}.carta:nth-child(4){animation-delay:.18s}
.carta:hover{transform:translateY(-3px);border-color:var(--border-dark);box-shadow:0 18px 36px -26px rgba(15,31,38,.45)}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.carta-banda{position:relative;height:150px;overflow:hidden;background:var(--pet);color:#fff;display:flex;align-items:flex-end;padding:16px 20px}
.carta-banda.teratogenia{background:var(--ox)} .carta-banda.hoja{background:#7a6a2a}
.carta-banda svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.carta-banda .cat{position:relative;font:800 64px/.9 var(--titulo);letter-spacing:-.05em;white-space:nowrap}
.carta-banda .cat small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.etq{position:absolute;left:20px;top:16px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--tinta);color:#fff;padding:4px 8px}
.carta-cu{padding:20px 22px 0;flex:1;display:flex;flex-direction:column}
.carta-t{display:flex;align-items:baseline;gap:10px}
.carta-t .nn{font:500 11px var(--mono);color:var(--ox)}
.carta-t h3{font:800 30px/1.02 var(--titulo);letter-spacing:-.035em}
.carta .sub{color:var(--muted);font-size:13.5px;margin-top:6px}
.carta .prop{margin-top:14px;font-weight:600;font-size:14px;line-height:1.45;color:var(--ink2)}
.carta .imp{margin-top:10px;font-size:13.5px;color:var(--ink2)}
.carta .imp b{color:var(--ink)}
.carta-pie{margin:18px 22px 0;border-top:1px solid var(--rule2);padding:12px 0 16px;display:flex;align-items:center;gap:14px;font:400 11.5px var(--mono);color:var(--muted)}
.carta-pie .abrir{margin-left:auto;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px;letter-spacing:.04em}
.estado{display:inline-block;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor}
.estado.borrador{color:var(--pet)} .estado.en_revision{color:var(--oro)} .estado.aprobado{color:#2e7d5b;background:#e3f0e8;border-color:#2e7d5b}
.barrita{flex:none;width:70px;height:4px;background:var(--rule2);position:relative}
.barrita i{position:absolute;inset:0 auto 0 0;background:var(--pet)}
.vacio{background:var(--card);border:1px dashed var(--border-dark);padding:48px 24px;text-align:center;color:var(--ink2)}
.vacio b{display:block;font:800 22px var(--titulo);letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}

/* ---------- página de un informe ---------- */
.ph{max-width:var(--ancho);margin:0 auto;padding:30px 24px 0}
.ph-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ph h1{font:800 clamp(44px,6.4vw,78px)/.95 var(--titulo);letter-spacing:-.045em;margin-top:12px}
.ph .sub{color:var(--ink2);margin-top:10px;font-size:15.5px}
.ph-der{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ph-der .meta{font:400 12px var(--mono);color:var(--muted)}
.ph-der .meta b{font:800 22px var(--titulo);color:var(--ink);letter-spacing:-.02em;display:block}
.ph-acc{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
select.estado-sel{appearance:none;-webkit-appearance:none;border:1px solid var(--ink);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230f1f26' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;padding:8px 34px 8px 13px;font:500 11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;min-height:38px;cursor:pointer}
.tabs{max-width:var(--ancho);margin:24px auto 0;padding:0 24px;display:flex;gap:6px;border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 18px 12px 0;margin-right:14px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--ink2);white-space:nowrap;display:flex;align-items:baseline;gap:7px}
.tabs button span{font:500 10.5px var(--mono);color:var(--ox)}
.tabs button em{font-style:normal;font:500 10px var(--mono);background:var(--ox);color:#fff;padding:1px 6px;margin-left:2px}
.tabs button.on{color:var(--ink);font-weight:800;border-bottom-color:var(--ink)}
.panel{display:none;margin-top:26px} .panel.on{display:block}

.propuesta{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--ink);display:grid;grid-template-columns:260px 1fr;gap:0}
.propuesta .izq{padding:24px;border-right:1px solid var(--rule2);background:var(--pet-bg)}
.propuesta .cat{font:800 84px/.85 var(--titulo);letter-spacing:-.06em;color:var(--pet);margin-top:10px;white-space:nowrap}
.propuesta .tcat{font:700 15px/1.35 var(--titulo);margin-top:14px;letter-spacing:-.01em}
.propuesta .der{padding:24px 28px}
.propuesta .res{font:600 17px/1.5 var(--titulo);letter-spacing:-.005em;color:var(--ink)}
.razones{list-style:none;margin-top:18px;display:grid;gap:14px}
.razones li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.razones .ic{width:30px;height:30px;border-radius:50%;background:var(--pet);color:#fff;display:grid;place-items:center;flex:none;margin-top:-3px}
.razones .ic svg{width:15px;height:15px}
.impacto{margin-top:20px;border-top:2px solid var(--ink);padding-top:12px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.impacto .l{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ox)}
.impacto .t{font-size:14.5px;color:var(--ink)}

.visor{margin-top:22px;background:var(--card);border:1px solid var(--border)}
.visor-cab{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule2)}
.visor-cab .t{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.visor-cab .acc{margin-left:auto;display:flex;gap:8px}
.visor iframe{display:block;width:100%;height:calc(100vh - 120px);min-height:620px;border:0;background:#4f5254}

.dos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.caja{background:var(--card);border:1px solid var(--border)}
.caja-cab{display:flex;align-items:baseline;gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule2)}
.caja-cab h3{font:800 19px var(--titulo);letter-spacing:-.025em}
.caja-cab .n{margin-left:auto;font:400 12px var(--mono);color:var(--muted)}
.caja-cu{padding:6px 20px 18px}
.disc{padding:16px 0;border-bottom:1px solid var(--rule2)}
.disc:last-child{border-bottom:0}
.disc h4{font:700 15.5px var(--titulo);letter-spacing:-.01em;margin-bottom:10px}
.disc dl{display:grid;grid-template-columns:118px 1fr;gap:8px 14px;font-size:14px;line-height:1.5}
.disc dt{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.disc dd{color:var(--ink2)}
.disc dd.manda{color:var(--ink);background:var(--pet-bg);padding:9px 12px}
.progreso{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule2)}
.progreso .bar{flex:1;height:6px;background:var(--rule2);position:relative}
.progreso .bar i{position:absolute;inset:0 auto 0 0;background:var(--pet);transition:width .3s var(--ease)}
.progreso .t{font:500 12px var(--mono);color:var(--ink2)}
.chk{list-style:none}
.chk li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule2);font-size:14px;line-height:1.5;color:var(--ink2)}
.chk li:last-child{border-bottom:0}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--pet);cursor:pointer}
.chk li.hecho>span{color:var(--muted2);text-decoration:line-through;text-decoration-color:var(--rule)}
.chk .quien{display:block;font:400 11px var(--mono);color:var(--muted2);text-decoration:none;margin-top:3px}

.metodo{counter-reset:m;list-style:none;display:grid;gap:14px}
.metodo li{counter-increment:m;display:grid;grid-template-columns:34px 1fr;gap:12px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.metodo li::before{content:counter(m,decimal-leading-zero);font:500 12px var(--mono);color:var(--ox);padding-top:2px}
.ficheros{list-style:none;display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.ficheros li::before{content:"— ";color:var(--muted2)}
.dato{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule2);font-size:14px}
.dato:last-child{border-bottom:0}
.dato span{color:var(--muted)}
.dato b{font-weight:600;text-align:right}

.item{padding:14px 0;border-bottom:1px solid var(--rule2);font-size:14px}
.item:last-child{border-bottom:0}
.item .meta{font:400 11.5px var(--mono);color:var(--muted);margin-top:2px}
.item p{margin-top:6px;color:var(--ink2);line-height:1.5}
.campo{display:block;margin-top:14px}
.campo>span{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
input[type=text],textarea,select.campo-sel{width:100%;border:1px solid var(--border);background:#fff;padding:10px 12px;font-size:15px;border-radius:0}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input[type=text]:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
input[type=file]{font-size:13.5px;max-width:100%}
.fila{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.ayuda{font-size:13px;color:var(--muted);margin-top:6px}

/* ---------- solicitudes ---------- */
.tabla{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border)}
.tabla th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--card)}
.tabla td{padding:15px 16px;border-bottom:1px solid var(--rule2);vertical-align:top;font-size:14px}
.tabla tr:last-child td{border-bottom:0}
.tabla .med{font:800 18px var(--titulo);letter-spacing:-.02em}
.tabla .med small{display:block;font:400 13px var(--sans);color:var(--muted);letter-spacing:0;margin-top:3px}
.tabla tbody tr.clic{cursor:pointer}
.tabla tbody tr.clic:hover td{background:#faf8f3}
.form{max-width:780px;background:var(--card);border:1px solid var(--border);border-top:3px solid var(--ink);padding:26px 28px 28px}
.tipos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tipos label{border:1px solid var(--border);padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:3px;position:relative}
.tipos label b{font:800 17px var(--titulo);letter-spacing:-.02em}
.tipos label small{font-size:12.5px;color:var(--muted)}
.tipos input{position:absolute;opacity:0}
.tipos label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--pet-bg)}
.tipos label.off{opacity:.5;cursor:not-allowed}
.tipos label .pronto{position:absolute;right:10px;top:10px;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ox)}

#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--paper);padding:11px 18px;font:500 12px var(--mono);letter-spacing:.03em;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
#toast.v{opacity:1;transform:translateX(-50%)}

/* ---------- pantallas pequeñas ---------- */
@media (max-width:1020px){
  .dos{grid-template-columns:1fr}
  .propuesta{grid-template-columns:1fr}
  .propuesta .izq{border-right:0;border-bottom:1px solid var(--rule2)}
  .propuesta .cat{font-size:64px}
  .marca .sep,.marca-s{display:none}
}
@media (max-width:760px){
  .cab-in{padding:8px 14px;gap:10px;flex-wrap:wrap}
  .marca img{height:30px}
  .nav{order:3;width:100%;margin:0}
  .yo{display:none}
  .mast-in{padding:40px 16px 30px;min-height:260px}
  .lema{display:none}
  main,.ph,.tabs{padding-left:16px;padding-right:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartas{grid-template-columns:1fr}
  .tipos{grid-template-columns:1fr}
  .ph-der{text-align:left;align-items:flex-start}
  .ph-acc{justify-content:flex-start}
  .visor iframe{height:72vh;min-height:440px}
  .tabla thead{display:none}
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr{border-bottom:1px solid var(--rule2)}
  .tabla td{border:0;padding:6px 16px}
  .tabla td:first-child{padding-top:14px}.tabla td:last-child{padding-bottom:14px}
  .disc dl{grid-template-columns:1fr}
}