/* =====================================================================
   Techo para volver — hoja de estilos
   Paleta tomada de la identidad de la Fundación
   ===================================================================== */
:root{
  --rojo:#ED1B24;
  --rojo-cl:#FF3B43;
  --azul:#10377D;
  --azul-osc:#081F4A;
  --azul-cl:#16469B;
  --crema:#F7F4EF;
  --naranja:#FF5622;
  --gris:#5B6B87;
  --gris-cl:#8A99B4;
  --linea:#E2E7F0;
  --ok:#1B8A4B;
  --radio:16px;
  --sombra:0 6px 24px rgba(8,31,74,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#1E2B45;background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.contenedor{width:min(1160px,92vw);margin-inline:auto}

/* ------------------------------------------------------------- nav */
.nav{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:14px}
.marca a:hover{text-decoration:none}
.marca img{height:38px;width:auto;transition:opacity .15s}
.marca-logo:hover img{opacity:.75}
.marca-tx{font-weight:700;font-style:italic;color:var(--azul);line-height:1.05;font-size:15px;
  border-left:2px solid var(--linea);padding-left:14px}
.pie-logos a:hover img{opacity:.75}
.pie-logos img{transition:opacity .15s}
.menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:999px;font-weight:500;font-size:15px;color:var(--gris)}
.menu a:hover{background:#F1F4FA;text-decoration:none;color:var(--azul)}
.menu a.on{background:#EBF0FA;color:var(--azul);font-weight:600}
.btn-nav{background:var(--rojo)!important;color:#fff!important;font-weight:600!important}
.btn-nav:hover{background:#c9151d!important}

/* ------------------------------------------------------------- hero */
.hero{background:radial-gradient(120% 90% at 15% 0%,var(--azul-cl) 0%,var(--azul) 42%,var(--azul-osc) 100%);
  color:#fff;padding:64px 0 56px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 70%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 70%)}
.hero>*{position:relative;z-index:2}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--rojo);color:#fff;
  font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;padding:9px 18px;border-radius:999px}
.chip .pt{width:9px;height:9px;border-radius:50%;background:#fff}
.hero h1{font-size:clamp(34px,5.4vw,62px);font-weight:700;font-style:italic;text-transform:uppercase;
  line-height:.95;letter-spacing:-.02em;margin:20px 0 0;max-width:16ch}
.hero h1 .rj{color:var(--rojo-cl)}
.hero p{margin-top:18px;max-width:62ch;color:#D7E1F5;font-weight:300;font-size:clamp(16px,2vw,19px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ------------------------------------------------------------- meta */
.meta{margin-top:30px;max-width:640px}
.meta-tx{display:flex;justify-content:space-between;font-size:14px;color:#BFD0EE;margin-bottom:8px;gap:12px}
.meta-tx b{color:#fff}
.riel{height:14px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.riel span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--rojo),#FF6A44)}

/* ------------------------------------------------------------ barra */
.barra{background:var(--crema);border-bottom:1px solid #E9E3D9}
.barra-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px}
.kpi{padding:20px 22px;border-right:1px solid #E9E3D9}
.kpi:last-child{border-right:0}
.k-n{display:block;font-size:clamp(21px,3vw,29px);font-weight:700;font-style:italic;color:var(--azul);line-height:1.1}
.k-l{display:block;font-size:13.5px;color:var(--gris);margin-top:4px}

/* -------------------------------------------------------- secciones */
.seccion{padding:56px 0}
.seccion.alt{background:#FAFBFD;border-block:1px solid var(--linea)}
.tit{font-size:clamp(24px,3.4vw,34px);font-weight:700;font-style:italic;color:var(--azul);
  text-transform:uppercase;line-height:1.05;letter-spacing:-.01em}
.sub{color:var(--gris);margin-top:10px;max-width:70ch}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}

/* ------------------------------------------------------------ botón */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--rojo);color:#fff;font-weight:600;
  padding:12px 22px;border-radius:999px;border:0;cursor:pointer;font-size:15px;font-family:inherit;
  transition:background .15s}
.btn:hover{background:#c9151d;text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--azul);border:2px solid var(--linea)}
.btn.sec:hover{background:#F1F4FA;color:var(--azul)}
.btn.fantasma{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff}
.btn.fantasma:hover{background:rgba(255,255,255,.12)}
.btn.mini{padding:7px 14px;font-size:13.5px}
.btn.peligro{background:#fff;color:#B3202A;border:2px solid #F2CDD0}
.btn.peligro:hover{background:#FDF1F2;color:#B3202A}

/* ------------------------------------------------------------ tabla */
.tabla-caja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
th{background:#F6F8FC;font-weight:600;color:var(--gris);font-size:13px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBFCFE}
td.val,th.val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.val{font-weight:600;color:var(--azul)}
tfoot td{background:#F6F8FC;font-weight:700;color:var(--azul);border-top:2px solid var(--linea)}
.anon{color:var(--gris-cl);font-style:italic}

/* ----------------------------------------------------------- tarjetas */
.rejilla{display:grid;gap:20px}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra)}
a.tarjeta:hover{text-decoration:none;border-color:#C6D2E8}
a.tarjeta:hover h3,a.tarjeta:hover p{text-decoration:none}
.tarjeta h3{font-size:18px;color:var(--azul);font-weight:600;line-height:1.25}
.tarjeta .fecha{font-size:13px;color:var(--gris-cl);margin-bottom:6px}
.tarjeta p{color:var(--gris);font-size:15px;margin-top:8px}
.tarjeta .valor{font-size:24px;font-weight:700;font-style:italic;color:var(--azul);margin-top:10px}

/* ------------------------------------------------------------ galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:16px}
.galeria figure{border-radius:12px;overflow:hidden;background:#EEF1F7;position:relative}
.galeria img{width:100%;height:180px;object-fit:cover;transition:transform .25s}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{font-size:12.5px;color:var(--gris);padding:7px 10px}

/* --------------------------------------------------------- entrega */
.entrega{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;
  box-shadow:var(--sombra);margin-bottom:22px}
.entrega-cab{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.etiqueta{display:inline-block;background:#EBF0FA;color:var(--azul);font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:999px}

/* ------------------------------------------------------------ cuenta */
.cuenta{background:var(--crema);border:2px solid #E9E3D9;border-radius:var(--radio);padding:26px;text-align:center}
.cuenta .et{color:var(--gris);font-size:15px}
.cuenta .num{font-size:clamp(30px,6vw,46px);font-weight:700;font-style:italic;color:var(--azul);
  line-height:1.15;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.cuenta .titular{font-weight:600;color:#8A4526;margin-top:6px;font-size:clamp(16px,2.2vw,19px);line-height:1.3}
.cuenta .nit{color:var(--gris);font-size:15px}
.aviso{background:#FFF6E8;border:2px solid #FBE0B5;color:#7A4F14;border-radius:var(--radio);
  padding:16px 20px;font-size:15px;margin-top:20px}

/* ------------------------------------------------------------- pie */
.pie{background:#fff;border-top:1px solid var(--linea);padding:30px 0;margin-top:20px}
.pie-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pie-logos img{height:34px;width:auto}
.pie-logos img[alt*="Colombiana"]{height:42px}
.pie-logos .sep{width:1px;height:28px;background:var(--linea)}
.pie-rs{font-size:12.5px;color:var(--gris);margin-top:14px;line-height:1.5}
.pie-legal{font-size:12.5px;color:var(--gris-cl);margin-top:10px}

/* ----------------------------------------------------------- vacío */
.vacio{text-align:center;padding:44px 20px;color:var(--gris-cl);background:#FAFBFD;
  border:2px dashed var(--linea);border-radius:var(--radio)}
.vacio strong{display:block;color:var(--gris);font-size:17px;margin-bottom:6px}

/* ===================================================================
   PANEL DE ADMINISTRACIÓN
   =================================================================== */
.admin-nav{background:var(--azul-osc);color:#fff;padding:10px 0}
.admin-nav a{color:#C7D6F2;padding:8px 14px;border-radius:8px;font-size:14.5px;font-weight:500}
.admin-nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.admin-nav a.on{background:rgba(255,255,255,.16);color:#fff}
.admin-nav .nav-in{padding:6px 0}
.admin-nav .marca-tx{color:#fff;border-left-color:rgba(255,255,255,.25)}
.salir{background:none;border:0;color:#C7D6F2;font:inherit;font-size:14.5px;cursor:pointer;padding:8px 14px;border-radius:8px}
.salir:hover{background:rgba(255,255,255,.1);color:#fff}

.login-caja{max-width:430px;margin:70px auto;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:34px;box-shadow:var(--sombra)}
.login-caja img{height:44px;margin-bottom:20px}

.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;font-weight:600;color:var(--gris);margin-bottom:6px}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=date],.campo input[type=number],.campo input[type=file],
.campo select,.campo textarea{
  width:100%;padding:11px 14px;border:2px solid var(--linea);border-radius:11px;
  font-family:inherit;font-size:15px;color:#1E2B45;background:#fff}
.campo textarea{min-height:92px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--azul-cl);box-shadow:0 0 0 3px rgba(22,70,155,.12)}
.campo .ayuda{font-size:12.5px;color:var(--gris-cl);margin-top:5px}
.fila{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--gris);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--azul)}

.alerta{padding:13px 18px;border-radius:11px;font-size:14.5px;margin-bottom:18px}
.alerta.mal{background:#FDF1F2;border:1px solid #F2CDD0;color:#B3202A}
.alerta.bien{background:#EDF9F1;border:1px solid #C4E8D2;color:#166B3C}

.panel-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:30px}
.panel-stat{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra)}
.panel-stat .n{font-size:27px;font-weight:700;font-style:italic;color:var(--azul);line-height:1.1}
.panel-stat .l{font-size:13.5px;color:var(--gris);margin-top:4px}

.acciones{display:flex;gap:8px;flex-wrap:wrap}
.borrador{display:inline-block;background:#FFF1E9;color:#B4501F;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px}

@media (max-width:720px){
  .kpi{border-right:0;border-bottom:1px solid #E9E3D9}
  .kpi:last-child{border-bottom:0}
  .marca-tx{display:none}
  .seccion{padding:40px 0}
}
@media print{
  .nav,.pie-legal,.acciones,.btn,.admin-nav{display:none!important}
  body{font-size:12px}
}