/*
 * Capa del portal de convocatorias sobre Bootstrap 5.3.
 *
 * Bootstrap pone la grilla, el menú, los formularios, las tablas y las
 * alertas. Este archivo adapta sus variables a la identidad de la Alcaldía
 * (tokens en subachoque-govco.css, que se carga antes) y define los
 * componentes propios: portada, tarjetas de convocatoria, líneas de
 * inversión, fases, cronograma, «antes / ahora» y preinscripción.
 */

:root{
  --verde:var(--suba-verde-600);
  --verde-oscuro:var(--suba-verde-700);
  --verde-medio:var(--suba-verde-500);
  --verde-suave:var(--suba-verde-50);
  --tinta:var(--suba-gris-700);
  --apagado:var(--suba-gris-600);
  --claro:var(--suba-gris-50);
  --linea:var(--suba-gris-100);
  --sombra:0 14px 40px rgba(31,60,2,.10);
  --radio:14px;

  --bs-primary:var(--verde);
  --bs-primary-rgb:62,116,4;
  --bs-body-font-family:var(--gc-font-body);
  --bs-body-font-size:.95rem;
  --bs-body-color:var(--tinta);
  --bs-body-color-rgb:75,75,75;
  --bs-secondary-color:var(--apagado);
  --bs-border-color:var(--linea);
  --bs-link-color:var(--verde);
  --bs-link-color-rgb:62,116,4;
  --bs-link-hover-color:var(--verde-oscuro);
  --bs-link-hover-color-rgb:47,90,3;
  --bs-border-radius:.5rem;
  --bs-border-radius-lg:.75rem;
  --bs-focus-ring-color:rgba(72,135,4,.3);
  --bs-danger:var(--suba-error);
  --bs-danger-rgb:168,5,33;
  --bs-success:var(--suba-exito);
  --bs-success-rgb:21,131,97;
}
html{scroll-behavior:smooth}
body{line-height:1.6;background:#fff}
h1,h2,h3,h4,h5,h6,.titulo-seccion,.kpi,.codigo,.cifra-numero{font-family:var(--gc-font-title)}
section[id],[id].ancla{scroll-margin-top:24px}

/* Botones del portal: redondeados, Verdana negrita, verde 600 y verde 500 al pasar. */
.btn{--bs-btn-font-family:var(--gc-font-body);--bs-btn-font-size:14px;--bs-btn-font-weight:700;--bs-btn-padding-x:1.3rem;--bs-btn-padding-y:.7rem;--bs-btn-border-radius:2rem;--bs-btn-border-width:2px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-lg{--bs-btn-padding-y:.85rem;--bs-btn-font-size:15px}
.btn-sm{--bs-btn-padding-y:.35rem;--bs-btn-padding-x:.9rem;--bs-btn-font-size:12px}
.btn-primary{
  --bs-btn-bg:var(--verde);--bs-btn-border-color:var(--verde);
  --bs-btn-hover-bg:var(--verde-oscuro);--bs-btn-hover-border-color:var(--verde-oscuro);
  --bs-btn-active-bg:var(--suba-verde-800);--bs-btn-active-border-color:var(--suba-verde-800);
  --bs-btn-disabled-bg:var(--verde);--bs-btn-disabled-border-color:var(--verde);
  --bs-btn-focus-shadow-rgb:72,135,4;
}
.btn-outline-primary{
  --bs-btn-color:var(--verde);--bs-btn-border-color:var(--verde);
  --bs-btn-hover-bg:var(--verde);--bs-btn-hover-border-color:var(--verde);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--verde-oscuro);--bs-btn-active-border-color:var(--verde-oscuro);
  --bs-btn-focus-shadow-rgb:72,135,4;background:#fff;
}
.btn-claro{--bs-btn-color:var(--verde-oscuro);--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-bg:var(--suba-amarillo);--bs-btn-hover-border-color:var(--suba-amarillo);--bs-btn-hover-color:var(--suba-gris-900)}
.btn-borde-claro{--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.8);--bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--verde-oscuro);--bs-btn-hover-border-color:#fff}
.nav-pills{--bs-nav-pills-link-active-bg:var(--verde);--bs-nav-link-font-weight:700;--bs-nav-link-color:var(--verde)}

/* ---- Íconos (sprite public/img/iconos.svg) ---- */
.icono{display:inline-block;width:1.15em;height:1.15em;fill:currentColor;vertical-align:-.2em;flex:0 0 auto}

/* ---- Títulos de sección ---- */
.seccion{padding:72px 0}
.seccion-gris{background:var(--claro)}
.seccion-verde{background:var(--verde-suave)}
.eyebrow{color:var(--verde);font-family:var(--gc-font-title);font-weight:800;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;margin-bottom:8px}
.titulo-seccion{font-size:clamp(26px,3.2vw,38px);line-height:1.15;letter-spacing:-.5px;color:var(--verde-oscuro);font-weight:800;margin-bottom:12px}
.cabeza-seccion{max-width:760px;margin-bottom:36px}
.cabeza-seccion p{color:var(--apagado);font-size:15.5px;margin:0}
.miga{font-size:12.5px;margin-bottom:14px}
.miga a{color:rgba(255,255,255,.9);text-decoration:underline}
.miga span{color:rgba(255,255,255,.75)}

/* ---- Portada ---- */
.portada{position:relative;color:#fff;background:var(--suba-verde-700) url("../img/fotos/panoramica.webp") center 55%/cover no-repeat;overflow:hidden}
.portada:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(31,60,2,.94) 0%,rgba(47,90,3,.86) 45%,rgba(72,135,4,.45) 100%)}
.portada .container{position:relative;padding-top:70px;padding-bottom:70px}
.portada h1{font-size:clamp(34px,5vw,56px);line-height:1.05;font-weight:900;letter-spacing:-1px;margin-bottom:16px}
.portada h1 span{color:var(--suba-amarillo)}
.portada .lead{font-size:17px;max-width:620px;color:rgba(255,255,255,.92)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--gc-font-title);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px;color:var(--suba-amarillo)}
.kicker:before{content:"";width:28px;height:3px;background:var(--suba-amarillo);border-radius:3px}
.portada-credito{position:absolute;right:12px;bottom:8px;font-size:10.5px;color:rgba(255,255,255,.7);z-index:1}
.portada-credito a{color:inherit}
.portada-aviso{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radio);padding:20px 22px;backdrop-filter:blur(3px)}
.portada-aviso h2{font-size:18px;font-weight:800;margin-bottom:6px}
.portada-aviso p{font-size:13.5px;margin:0;color:rgba(255,255,255,.9)}

/* Portada interna (páginas de convocatoria) */
.portada-interna{background-image:url("../img/fotos/valle.webp");background-position:center 45%}
.portada-interna .container{padding-top:44px;padding-bottom:48px}
.portada-interna h1{font-size:clamp(28px,4vw,44px)}
.datos-clave{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.datos-clave li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:2rem;padding:8px 14px;font-size:13px}
.datos-clave strong{color:var(--suba-amarillo)}

/* ---- Cifras ---- */
.cifras{margin-top:-40px;position:relative;z-index:2}
.cifra{height:100%;background:#fff;border-radius:var(--radio);padding:22px 20px;box-shadow:var(--sombra);border-top:4px solid var(--verde-medio)}
.cifra-numero{font-size:30px;font-weight:900;color:var(--verde-oscuro);line-height:1.1}
.cifra-texto{font-size:13px;color:var(--apagado);margin-top:4px}

/* ---- Estado de la convocatoria ---- */
.estado{display:inline-flex;align-items:center;gap:6px;border-radius:2rem;padding:4px 12px;font-size:12px;font-weight:700;font-family:var(--gc-font-title);text-transform:uppercase;letter-spacing:.6px}
.estado:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.estado-en_preparacion{background:var(--suba-amarillo-suave);color:#7A5A00}
.estado-abierta{background:#DDF3E9;color:var(--suba-exito)}
.estado-cerrada{background:var(--suba-gris-100);color:var(--suba-gris-600)}

/* ---- Tarjetas de convocatoria ---- */
.tarjeta-conv{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:transform .2s,box-shadow .2s}
.tarjeta-conv:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tarjeta-conv-cabeza{padding:22px 24px 0}
.tarjeta-conv h3{font-size:21px;font-weight:800;color:var(--verde-oscuro);margin:12px 0 8px}
.tarjeta-conv p{font-size:14px;color:var(--apagado)}
.tarjeta-conv-cuerpo{padding:0 24px 20px;flex:1}
.tarjeta-conv dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:0}
.tarjeta-conv dt{color:var(--apagado);font-weight:400}
.tarjeta-conv dd{margin:0;font-weight:700;color:var(--tinta)}
.tarjeta-conv-pie{padding:16px 24px;background:var(--claro);border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:8px}
.tarjeta-conv.destacada{border:2px solid var(--verde-medio)}

/* ---- Líneas de inversión ---- */
.linea{height:100%;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column}
.linea-icono{width:46px;height:46px;border-radius:12px;background:var(--verde-suave);color:var(--verde);display:grid;place-items:center;margin-bottom:14px}
.linea-icono .icono{width:24px;height:24px}
.linea h3{font-size:17px;font-weight:800;color:var(--verde-oscuro);margin-bottom:6px}
.linea p{font-size:13.5px;color:var(--apagado);flex:1}
.linea-monto{margin-top:10px;padding-top:12px;border-top:1px dashed var(--suba-gris-200);font-size:12.5px;color:var(--apagado)}
.linea-monto strong{display:block;font-family:var(--gc-font-title);font-size:20px;color:var(--verde);font-weight:900}

/* ---- Pasos / fases ---- */
.fases{counter-reset:fase;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.fases li{counter-increment:fase;position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 18px 18px 64px}
.fases li:before{content:counter(fase);position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--verde-medio);color:#fff;font-family:var(--gc-font-title);font-weight:900;display:grid;place-items:center}
.fases strong{display:block;color:var(--verde-oscuro);font-family:var(--gc-font-title);font-size:15.5px;margin-bottom:2px}
.fases span{font-size:13px;color:var(--apagado)}

/* ---- Listas de chequeo ---- */
.chequeo{list-style:none;padding:0;margin:0}
.chequeo li{position:relative;padding:10px 0 10px 32px;border-bottom:1px solid var(--linea);font-size:14px}
.chequeo li:last-child{border-bottom:0}
.chequeo li:before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--verde-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233E7404' d='M6.4 11.3 3.2 8.1l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z'/%3E%3C/svg%3E") center/14px no-repeat}
.chequeo strong{color:var(--tinta)}
.chequeo small{display:block;color:var(--apagado);font-size:12.5px;margin-top:2px}
.chequeo.alerta li:before{background:#FBE7EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A80521' d='M4.6 3.5 8 6.9l3.4-3.4 1.1 1.1L9.1 8l3.4 3.4-1.1 1.1L8 9.1l-3.4 3.4-1.1-1.1L6.9 8 3.5 4.6z'/%3E%3C/svg%3E") center/12px no-repeat}
.caja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px}
.caja h3{font-size:18px;font-weight:800;color:var(--verde-oscuro);margin-bottom:10px}

/* ---- Antes / ahora (cambios 2026) ---- */
.cambio{height:100%;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.cambio-cabeza{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--linea)}
.cambio-cabeza .icono{width:22px;height:22px;color:var(--verde)}
.cambio-cabeza h3{font-size:16px;font-weight:800;color:var(--verde-oscuro);margin:0;flex:1}
.cambio-cabeza small{font-size:11px;color:var(--apagado);white-space:nowrap}
.cambio-antes{padding:12px 20px;font-size:13px;color:var(--apagado);background:var(--claro)}
.cambio-ahora{padding:14px 20px 18px;font-size:14px;flex:1}
.cambio-antes b,.cambio-ahora b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.cambio-ahora b{color:var(--verde)}

/* ---- Avisos ---- */
.aviso{display:flex;gap:14px;align-items:flex-start;border-radius:var(--radio);padding:18px 20px;background:var(--suba-amarillo-suave);border-left:5px solid var(--suba-amarillo);font-size:14px}
.aviso .icono{width:24px;height:24px;color:#7A5A00;margin-top:2px}
.aviso strong{color:var(--suba-gris-900)}
.aviso-verde{background:var(--verde-suave);border-left-color:var(--verde-medio)}
.aviso-verde .icono{color:var(--verde)}

/* ---- Tablas ---- */
.tabla-suba{background:#fff;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea)}
.tabla-suba table{margin:0}
.tabla-suba thead th{background:var(--verde-medio);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;border:0;padding:12px 14px}
.tabla-suba td{padding:12px 14px;font-size:13.5px;vertical-align:top}
.tabla-suba tbody tr:nth-child(even) td{background:var(--claro)}
.tabla-suba .total td{font-weight:800;background:var(--verde-suave)!important}
.fecha{white-space:nowrap;font-weight:700;color:var(--verde-oscuro)}

/* ---- Índice lateral de la página de convocatoria ---- */
.indice{position:sticky;top:20px}
.indice .nav-link{padding:7px 12px;font-size:13px;color:var(--tinta);border-left:3px solid var(--linea);border-radius:0}
.indice .nav-link:hover{color:var(--verde);border-left-color:var(--verde-medio);background:var(--verde-suave)}
.indice .btn{margin-top:14px;width:100%}
.bloque{padding:40px 0;border-bottom:1px solid var(--linea)}
.bloque:last-child{border-bottom:0}
.bloque h2{font-size:26px;font-weight:800;color:var(--verde-oscuro);margin-bottom:6px}
.bloque>p.intro{color:var(--apagado);margin-bottom:22px}

/* ---- Documentos para descargar ---- */
.documento{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);color:var(--tinta);text-decoration:none}
.documento:hover{border-color:var(--verde-medio);box-shadow:var(--sombra)}
.documento-tipo{flex:0 0 46px;height:54px;border-radius:6px;background:#C62828;color:#fff;font:800 12px var(--gc-font-title);display:grid;place-items:center}
.documento strong{display:block;color:var(--verde-oscuro)}
.documento small{color:var(--apagado)}

/* ---- Preguntas frecuentes (details nativo, sin JavaScript) ---- */
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 50px 16px 20px;position:relative;font-family:var(--gc-font-title);font-weight:800;font-size:16px;color:var(--verde-oscuro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--verde-suave);color:var(--verde);display:grid;place-items:center;font-size:18px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 20px 18px;margin:0;font-size:14px;color:var(--apagado)}

/* ---- Preinscripción ---- */
.form-card{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:30px;box-shadow:var(--sombra)}
.form-card legend{font-family:var(--gc-font-title);font-weight:800;color:var(--verde-oscuro);font-size:14px;text-transform:uppercase;letter-spacing:1px;padding-bottom:8px;margin-bottom:14px;border-bottom:2px solid var(--verde-suave);width:100%}
.form-label,.col-form-label{font-size:13px;font-weight:700}
.form-label.required:after,legend.required:after{content:" *";color:var(--suba-error)}
.form-control,.form-select{font-size:14.5px;padding:.65rem .85rem;border-width:1.5px;border-color:var(--suba-gris-200);border-radius:10px}
.form-control:focus,.form-select:focus{border-color:var(--verde-medio);box-shadow:0 0 0 .25rem rgba(72,135,4,.2)}
.form-check-input{border-color:var(--suba-gris-500)}
.form-check-input:checked{background-color:var(--verde);border-color:var(--verde)}
.form-check-input:focus{box-shadow:0 0 0 .25rem rgba(72,135,4,.2);border-color:var(--verde-medio)}
.form-text{font-size:12px}
.opciones-linea .form-check{border:1.5px solid var(--suba-gris-200);border-radius:10px;padding:10px 12px 10px 38px;margin-bottom:8px}
.opciones-linea .form-check:has(input:checked){border-color:var(--verde-medio);background:var(--verde-suave)}
.opciones-linea .form-check-label{font-size:13.5px}
.opciones-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 16px}
.opciones-grupos .form-check-label{font-size:13.5px}
.opciones-linea-horizontal .form-check{display:inline-block;margin-right:1.2rem}
.autoriza{background:var(--claro);border-radius:12px;padding:16px 18px;font-size:13px}
.autoriza .form-check{margin:0}
.autoriza .form-check-label{font-weight:400}
.autoriza .form-text{display:none}
.trampa{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.lateral-form li{display:flex;gap:10px;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:10px}
.lateral-form .icono{color:var(--verde);width:20px;height:20px;margin-top:2px}

/* ---- Confirmación ---- */
.confirmacion{padding:70px 0;background:var(--verde-suave);min-height:70vh}
.codigo{display:inline-block;font-size:32px;font-weight:900;letter-spacing:3px;color:var(--verde-oscuro);background:#fff;border:2px dashed var(--verde-medio);border-radius:14px;padding:10px 22px}

/* ---- Panel del personal ---- */
.admin{padding:40px 0 60px;background:var(--claro);min-height:70vh}
.admin h1{font-size:30px;color:var(--verde-oscuro);font-weight:800}
.kpi{font-size:34px;font-weight:900;color:var(--verde-oscuro);line-height:1.1}
.barra{height:8px;border-radius:6px;background:var(--verde-medio);min-width:4px}
.table>thead th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--apagado);font-weight:700}
.ingreso{max-width:440px}
.ingreso-icono{width:62px;height:62px;margin:0 auto 12px;border-radius:16px;background:var(--verde-suave);display:grid;place-items:center}
.ingreso-icono .icono{width:32px;height:32px;color:var(--verde)}
.ingreso .form-control-lg,.ingreso .input-group-lg>.form-control{font-size:16px}
.ingreso-ayuda{padding-left:18px;margin:18px 4px 0}
.ingreso-ayuda li{margin-bottom:4px}
.opcion-rol{padding:10px 12px 10px 36px;border:1px solid var(--linea);border-radius:12px;margin-bottom:8px}
.opcion-rol .form-check-label{font-size:14px}
.clave-temporal{font-family:ui-monospace,Consolas,monospace;letter-spacing:2px;user-select:all}

/* ---- Botón fijo "Preinscribirme" en el celular ---- */
.cta-movil{position:fixed;left:16px;right:16px;bottom:16px;z-index:1030;display:none;box-shadow:0 10px 28px rgba(31,60,2,.35);transition:transform .3s ease,opacity .3s ease}
.cta-movil.oculto{transform:translateY(140%);opacity:0;pointer-events:none}
@media (max-width:991.98px){.cta-movil{display:flex}}

/* ---- Animación de entrada (solo con JS y sin "reducir movimiento") ---- */
.anim .revelar{opacity:0;transform:translateY(24px);transition:opacity .6s ease var(--retraso,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--retraso,0ms)}
.anim .revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tarjeta-conv,.tarjeta-conv:hover{transition:none;transform:none}
}

/* ---- Responsive ---- */
@media (max-width:991.98px){
  .seccion{padding:52px 0}
  .indice{position:static}
  .portada .container{padding-top:48px;padding-bottom:60px}
}
@media (max-width:575.98px){
  .form-card{padding:20px 16px}
  .codigo{font-size:24px;letter-spacing:2px}
  .bloque h2{font-size:22px}
  .tabla-suba td,.tabla-suba thead th{padding:10px}
}
@media print{
  .barra-govco,.menu-suba,.cta-movil,.indice,.pie{display:none!important}
  .portada{background:none;color:#000}
  .portada:before{display:none}
}