/* SISTAH 3.0 - Portal público. Colores con contraste AA (mismos valores que el sistema de diseño interno). */
:root {
    --portal-rojo: #E31A22;
    --portal-rojo-hover: #C8151C;
    --portal-rojo-texto: #B8141B;
    --portal-tinta: #191C22;
    --portal-tinta-2: #4F5663;
    --portal-borde: #DCDFE4;
    --portal-fondo: #F7F8FA;
}
body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--portal-fondo);
    color: var(--portal-tinta);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1 0 auto; }
a { color: var(--portal-rojo-texto); }
.portal-nav { background: var(--portal-rojo); }
.portal-nav .nav-link { color: #fff; font-size: .95rem; }
.portal-nav .nav-link:hover, .portal-nav .nav-link:focus { color: #fff; text-decoration: underline; }
.portal-nav .nav-link.active { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.portal-nav .btn-light { color: var(--portal-rojo-texto); font-weight: 600; }
.portal-hero { background: linear-gradient(135deg, var(--portal-rojo) 0%, #9E1016 100%); color: #fff; padding: 56px 0 44px; }
.portal-hero h1 { font-weight: 700; }
.portal-hero .lead { opacity: .95; }
.btn-crh { background: var(--portal-rojo); border-color: var(--portal-rojo); color: #fff; font-weight: 600; }
.btn-crh:hover, .btn-crh:focus { background: var(--portal-rojo-hover); border-color: var(--portal-rojo-hover); color: #fff; }
.btn-outline-crh { border: 2px solid var(--portal-rojo-texto); color: var(--portal-rojo-texto); font-weight: 600; background: transparent; }
.btn-outline-crh:hover, .btn-outline-crh:focus { background: var(--portal-rojo-texto); color: #fff; }
.portal-card { background: #fff; border: 1px solid var(--portal-borde); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.portal-card-body { padding: 20px; }
.portal-servicio { text-align: center; height: 100%; padding: 24px; }
.portal-servicio .fa-solid { font-size: 2.25rem; color: var(--portal-rojo-texto); margin-bottom: 14px; }
.portal-dato { background: #fff; border-radius: 12px; padding: 22px; text-align: center; color: var(--portal-tinta); }
.portal-dato .cifra { font-size: 2.2rem; font-weight: 700; color: var(--portal-rojo-texto); line-height: 1.1; }
.portal-fecha { background: var(--portal-rojo); color: #fff; text-align: center; padding: 14px 10px; min-width: 76px; border-radius: 10px 0 0 10px; }
.portal-fecha .dia { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.portal-fecha .mes { font-size: .8rem; text-transform: uppercase; }
.portal-pie { background: #16191F; color: #C9CDD4; padding: 32px 0; margin-top: 48px; }
.portal-pie a { color: #fff; }
.form-label { font-weight: 600; font-size: .9rem; }
.form-control, .form-select { border-color: #878C95; }
.form-control:focus, .form-select:focus { border-color: var(--portal-tinta); box-shadow: 0 0 0 3px rgba(25,28,34,.16); }
.invalid-feedback { color: #A8191F; }
.form-control.is-invalid, .form-select.is-invalid { border-color: #C42127; }
.hp-campo { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#mapa { height: 420px; border-radius: 10px; border: 1px solid var(--portal-borde); }
@media (max-width: 575.98px) {
    .portal-hero { padding: 36px 0 28px; }
    .portal-hero h1 { font-size: 1.7rem; }
    #mapa { height: 300px; }
}

/* =========================================================
   SISTAH 3.0: portal del diseno de referencia (cabecera blanca,
   heroe, tarjetas de servicios, verificacion, directorio, formularios)
   ========================================================= */
:root {
    --ink-900: #191C22; --ink-700: #3A404A; --ink-600: #4F5663; --ink-500: #656C78; --ink-400: #878C95; --ink-300: #B9BEC6;
    --ink-200: #DCDFE4; --ink-150: #E8EAEE; --ink-100: #F1F3F5; --ink-50: #F7F8FA;
    --crh: #ED1C24; --ok: #13693F; --ok-velo: #E6F4EC; --peligro: #A8191F; --peligro-velo: #FDECEC; --info: #1C569E; --info-velo: #E9F0FA;
}
body { background: #fff; font-size: 14px; }
.pt-cab { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--ink-200); }
.pt-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-900); text-decoration: none; font-size: 17px; letter-spacing: -0.01em; }
.pt-marca b { font-weight: 700; }
.pt-cruz-logo { color: var(--crh); }
.pt-nav { display: flex !important; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.pt-nav-b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; color: var(--ink-700); font-size: 14px; font-weight: 600; text-decoration: none; }
.pt-nav-b:hover { background: var(--ink-100); color: var(--ink-900); }
.pt-nav-b.on { color: var(--portal-rojo-texto); background: #FDECEC; }
.btn-crh, .pt-ingresar { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 6px; }
.pt-cuerpo { padding: 24px; max-width: 1100px; margin: 0 auto; width: 100%; }
.pt-tit { margin-bottom: 18px; }
.pt-tit h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.pt-tit p { margin: 4px 0 0; font-size: 15px; color: var(--ink-600); }
.pt-eye { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--portal-rojo-texto); }
.pt-heroe { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px 32px; overflow: hidden; margin: 24px auto 0; max-width: 1052px; border-radius: 14px; background: linear-gradient(120deg, #FDECEC 0%, #FFF7F7 60%, #fff 100%); border: 1px solid #F6D5D6; }
.pt-heroe h1 { margin: 6px 0 8px; font-size: 34px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.pt-heroe p { max-width: 46ch; margin: 0 0 18px; font-size: 16px; color: var(--ink-700); }
.pt-cruz { color: var(--crh); opacity: 0.9; flex: 0 0 auto; }
.pt-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.pt-rejilla.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pt-rejilla.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-tj { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 120px; padding: 16px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; color: var(--ink-900); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.pt-tj:hover { border-color: var(--portal-rojo); box-shadow: 0 6px 18px -10px rgba(227, 26, 34, .5); color: var(--ink-900); }
.pt-tj .ic { color: var(--portal-rojo-texto); }
.pt-tj b { font-size: 16px; font-weight: 600; }
.pt-tj span { font-size: 13px; color: var(--ink-600); }
.pt-tarjeta { background: #fff; border: 1px solid var(--ink-200); border-radius: 10px; box-shadow: 0 1px 2px rgba(17, 20, 26, .05); margin-bottom: 16px; }
.pt-tarjeta-cab { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--ink-150); font-size: 16px; font-weight: 600; }
.pt-tarjeta-cab .ic { color: var(--ink-500); }
.pt-tarjeta-cuerpo { padding: 16px 18px 18px; }
.pt-lista { list-style: none; margin: 0; padding: 0; }
.pt-lista > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-150); }
.pt-lista > li:last-child { border-bottom: 0; }
.pt-li-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--ink-100); color: var(--ink-700); display: flex; align-items: center; justify-content: center; }
.pt-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-li-t b { font-weight: 600; font-size: 14px; }
.pt-li-t span { font-size: 12.5px; color: var(--ink-600); }
.pt-vacio { margin: 0; padding: 18px 0 6px; text-align: center; color: var(--ink-600); }
.pt-seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 8px; background: var(--ink-100); border: 1px solid var(--ink-200); }
.pt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pt-seg label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin: 0; border-radius: 6px; color: var(--ink-700); font-size: 14px; font-weight: 600; cursor: pointer; }
.pt-seg input:checked + label { background: #fff; color: var(--ink-900); box-shadow: 0 1px 3px rgba(17, 20, 26, .16), inset 0 0 0 1px var(--ink-200); }
.pt-seg input:focus-visible + label { outline: 2px solid var(--ink-900); outline-offset: 1px; }
.pt-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: 8px; border: 1px solid; font-size: 14px; }
.pt-aviso p { margin: 0; }
.pt-aviso.ok { background: var(--ok-velo); border-color: #B8DEC8; color: var(--ok); }
.pt-aviso.peligro { background: var(--peligro-velo); border-color: #F1C2C4; color: var(--peligro); }
.pt-aviso.info { background: var(--info-velo); border-color: #C5D6EE; color: var(--info); }
.ver-res { padding: 20px; border-radius: 10px; border: 1px solid #B8DEC8; background: #F3FAF6; }
.ver-res.mal, .ver-res.revocado { border-color: #F1C2C4; background: #FEF6F6; }
.ver-ok { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pt-sello { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ok-velo); color: var(--ok); }
.ver-res.mal .pt-sello, .ver-res.revocado .pt-sello { background: var(--peligro-velo); color: var(--peligro); }
.ver-ok h2 { margin: 0; font-size: 19px; font-weight: 600; }
.ver-ok p { margin: 0; font-size: 13.5px; color: var(--ink-600); }
.ver-datos { margin: 0; }
.ver-datos > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ink-150); }
.ver-datos dt { font-weight: 400; color: var(--ink-600); }
.ver-datos dd { margin: 0; text-align: right; font-weight: 500; }
.ver-nota { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--ink-600); }
.filial { padding: 16px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; }
.filial h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.filial p { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-700); }
.filial p .ic { margin-top: 2px; color: var(--ink-500); flex: 0 0 auto; }
.filial[hidden] { display: none; }
.pt-buscar { position: relative; display: block; max-width: 460px; margin-bottom: 16px; }
.pt-buscar .ic { position: absolute; left: 12px; top: 13px; color: var(--ink-500); }
.pt-buscar .form-control { padding-left: 38px; }
.pt-estrecha { max-width: 720px; }
.req-lista { margin: 14px 0 0; padding-left: 18px; }
.req-lista li { margin-bottom: 6px; font-size: 14px; }
.form-control, .form-select { min-height: 44px; }
.pt-form { display: flex; flex-direction: column; gap: 14px; }
.pt-form .pt-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.pt-form .form-label { margin-bottom: 6px; }
.pt-form .form-text { margin-top: 6px; font-size: 12.5px; color: var(--ink-600); }
@media (max-width: 1099.98px) { .pt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-rejilla.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899.98px) {
    .pt-cab { flex-wrap: wrap; padding: 10px 14px; position: static; }
    .pt-ingresar { order: 2; margin-left: auto; }
    .pt-nav { order: 3; width: 100%; margin-left: 0; }
    .pt-nav-b { padding: 0 10px; }
    .pt-heroe { padding: 24px 18px; margin: 16px 14px 0; }
    .pt-heroe h1 { font-size: 26px; }
    .pt-cruz { display: none; }
    .pt-cuerpo { padding: 16px 14px; }
    .pt-rejilla.c2, .pt-rejilla.c3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699.98px) { .pt-rejilla { grid-template-columns: minmax(0, 1fr); } .pt-form .pt-fila { grid-template-columns: minmax(0, 1fr); } }
.pt-cifras { margin: 14px 0 0 !important; font-size: 13.5px !important; color: var(--ink-600) !important; }
.btn-outline-crh { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 6px; }
.pt-heroe { max-width: none; margin: 0; border-radius: 0; border: 0; padding: 36px max(24px, calc((100% - 1052px) / 2)); }
.pt-btn-sec { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ink-300); background: #fff; color: var(--ink-900); font-weight: 600; text-decoration: none; }
.pt-btn-sec:hover { background: var(--ink-50); border-color: var(--ink-400); color: var(--ink-900); }
@media (max-width: 899.98px) { .pt-heroe { padding: 24px 18px; margin: 0; } }
.dir-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 8px; }
.dir-buscar { flex: 0 1 460px; min-width: 0; }
.dir-buscar .pt-buscar { margin-bottom: 0; }
.dir-depto { flex: 0 1 240px; min-width: 0; }
.dir-conteo { margin: 0 0 12px; font-size: 13px; color: var(--ink-600); }
.dir-mapa > summary { cursor: pointer; list-style: none; min-height: 48px; }
.dir-mapa > summary::-webkit-details-marker { display: none; }
.dir-mapa:not([open]) > summary { border-bottom: 0; }
.dir-mapa #mapa { margin: 12px; height: 380px; }
.filial a { color: var(--info); }
@media (max-width: 699.98px) { .dir-buscar, .dir-depto { flex: 1 1 100%; } .dir-mapa #mapa { height: 280px; } }
.pt-centrada { display: flex; flex-direction: column; align-items: center; }
.pt-centrada > .pt-tit, .pt-centrada > .pt-estrecha { width: 100%; max-width: 408px; }
.pt-centrada > .pt-tit + .pt-estrecha { margin-top: 0; }
.pt-num { font-variant-numeric: tabular-nums; }
.pt-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pt-form legend { float: none; width: auto; margin-bottom: 6px; font-size: 14px; }
.pt-form .pt-seg { display: flex; }
@media (min-width: 700px) { .pt-centrada > .pt-tit h1 { white-space: nowrap; } }
.pos-rejilla { max-width: 824px; margin-left: auto; margin-right: auto; }
.pos-titulo { margin: 4px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pos-meta { margin: 0 0 4px; font-size: 13px; color: var(--ink-600); }
.pos-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pos-adjunto { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px dashed var(--ink-400); border-radius: 6px; background: var(--ink-50); color: var(--ink-700); font-weight: 500; cursor: pointer; }
.pos-adjunto:hover { border-color: var(--ink-600); }
.pos-adjunto:has(+ .pos-archivo:focus-visible) { outline: 2px solid var(--ink-900); outline-offset: 1px; }
.pos-adjunto.lleno { border-style: solid; border-color: var(--ok); background: var(--ok-velo); color: var(--ok); }
.pos-adjunto.con-error, .pos-adjunto:has(+ .pos-archivo.is-invalid) { border-color: var(--peligro); }
.bol-oferta { display: flex; }
.bol-oferta .pt-tarjeta-cuerpo { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }