/* Subachoque Rinde Cuentas: ajustes sobre el Kit UI gov.co con los verdes institucionales de Subachoque. */
:root {
    --verde: #2A421A;
    --lima: #8DB836;
    --cielo: #E8F1F8;
    --sol: #F7C934;
    --coral: #E4572E;
    --tinta: #1f2a37;
    --gris: #5b6675;
    --fondo-suave: #F4F7F8;
}
.salto-contenido { position: absolute; left: -9999px; }
.salto-contenido:focus { left: 1rem; top: 1rem; z-index: 1000; background: #fff; padding: .5rem 1rem; }
.logo-alcaldia { height: 60px; width: auto; }
.franja-rinde { height: 6px; background: linear-gradient(90deg, var(--verde) 0 33%, var(--lima) 33% 66%, var(--sol) 66%); }

.nav-rinde { background: #fff; border-bottom: 1px solid #e3e8ee; position: sticky; top: 0; z-index: 20; }
.nav-rinde ul { list-style: none; margin: 0 auto; padding: 0 1rem; max-width: 1180px; display: flex; gap: .25rem; overflow-x: auto; }
.nav-rinde a { display: block; padding: .8rem .7rem; color: var(--tinta); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; }
.nav-rinde a:hover, .nav-rinde a:focus, .nav-rinde a[aria-current="page"] { border-bottom-color: var(--lima); color: var(--verde); }

.contenido { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem 3.5rem; display: block; }
.contenido h1 { color: var(--verde); font-weight: 800; line-height: 1.15; }
.contenido h2 { color: var(--verde); font-size: 1.35rem; font-weight: 800; margin-top: 2.2rem; }
.contenido h3 { font-size: 1.05rem; font-weight: 700; color: var(--tinta); }
.antetitulo { color: var(--lima); text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .8rem; margin: 0 0 .3rem; }
.bajada { font-size: 1.12rem; color: var(--gris); max-width: 70ch; }
.lead-verde { border-left: 5px solid var(--lima); padding-left: .9rem; }

.heroe { background: linear-gradient(135deg, var(--verde), #3d5f26 60%, #56802f); color: #fff; border-radius: 18px; padding: 2.2rem 2rem; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.heroe h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .2rem 0 .8rem; }
.heroe p { color: #eef5e6; font-size: 1.1rem; }
.heroe .antetitulo { color: var(--sol); }
@media (max-width: 860px) { .heroe { grid-template-columns: 1fr; padding: 1.6rem 1.2rem; } }

.voz { background: #fff; color: var(--tinta); border-radius: 14px; padding: 1.2rem; }
.heroe .voz p { color: var(--tinta); }
.voz strong.grande { display: block; font-size: 2.6rem; color: var(--verde); line-height: 1; }
.voz .fila { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed #dfe6dc; }

.etapas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; counter-reset: etapa; margin: 1rem 0; padding: 0; list-style: none; }
.etapas li { background: var(--fondo-suave); border-radius: 12px; padding: .9rem; border-top: 5px solid #cfd8c6; font-size: .92rem; }
.etapas li strong { display: block; color: var(--verde); }
.etapas li.actual { background: #fff; border-top-color: var(--lima); box-shadow: 0 4px 14px rgba(42, 66, 26, .15); }
.etapas li.actual strong::after { content: " · ahora"; color: var(--coral); }
@media (max-width: 860px) { .etapas { grid-template-columns: 1fr 1fr; } }

.puertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.2rem 0; }
.puerta { border-radius: 18px; padding: 1.5rem; text-decoration: none; color: var(--tinta); display: block; border: 2px solid transparent; transition: transform .15s; }
.puerta:hover, .puerta:focus { transform: translateY(-3px); border-color: var(--verde); }
.puerta .icono { font-size: 2.6rem; line-height: 1; }
.puerta h3 { font-size: 1.3rem; margin: .6rem 0 .4rem; color: var(--verde); }
.puerta-ninez { background: #FFF4CC; }
.puerta-jovenes { background: #E6F2D9; }
.puerta-ciudad { background: var(--cielo); }
@media (max-width: 860px) { .puertas { grid-template-columns: 1fr; } }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.tarjeta { background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; padding: 1.1rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.cifra { background: #fff; border: 1px solid #e3e8ee; border-top: 5px solid var(--lima); border-radius: 12px; padding: 1rem; }
.cifra strong { display: block; font-size: 2rem; color: var(--verde); line-height: 1.1; }
.cifra span { color: var(--gris); font-size: .9rem; }

.barra { height: 10px; background: #e6ece2; border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--lima), var(--verde)); border-radius: 99px; }
.linea-plan { display: grid; grid-template-columns: 1fr 10rem 3.5rem; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid #eef2ea; }
.linea-plan a { font-weight: 700; color: var(--verde); }
@media (max-width: 640px) { .linea-plan { grid-template-columns: 1fr 3.5rem; } .linea-plan .barra { grid-column: 1 / -1; } }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.obra { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e3e8ee; display: flex; flex-direction: column; }
.obra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f2f2f2; }
.obra .pie { padding: .9rem; font-size: .92rem; flex: 1; }
.obra .quien { color: var(--gris); font-size: .85rem; }
.respuesta-alcaldia { margin-top: .7rem; background: #EEF6E2; border-left: 4px solid var(--lima); padding: .6rem .7rem; border-radius: 6px; font-size: .88rem; }
.respuesta-alcaldia b { color: var(--verde); }
.sin-respuesta { margin-top: .7rem; color: var(--gris); font-style: italic; font-size: .85rem; }

.etiqueta { display: inline-block; background: var(--fondo-suave); border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; margin: .1rem .15rem .1rem 0; color: var(--tinta); }
.estado { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.estado-ok, .estado-cumplido, .estado-respondida { background: #E3F4D6; color: #2c5212; }
.estado-curso, .estado-en_curso, .estado-publicada { background: #E1EDF8; color: #134a7a; }
.estado-espera, .estado-por_iniciar { background: #FFF4CC; color: #6b5300; }
.estado-vencido, .estado-vencida { background: #FDE2DD; color: #9b2412; }

.panel { background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; padding: 1.4rem; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.campos .completo { grid-column: 1 / -1; }
@media (max-width: 680px) { .campos { grid-template-columns: 1fr; } }
.campo label, .campo legend { font-weight: 700; display: block; margin-bottom: .3rem; font-size: 1rem; }
.campo input[type=text], .campo input[type=number], .campo input[type=email], .campo input[type=file], .campo input[type=datetime-local], .campo input[type=date], .campo input[type=password], .campo select, .campo textarea {
    width: 100%; border: 1px solid #9aa5b1; border-radius: 8px; padding: .6rem .7rem; font: inherit; background: #fff;
}
.campo textarea { min-height: 6rem; }
.campo .ayuda { color: var(--gris); font-size: .88rem; margin: .25rem 0 0; }
.error-campo { color: #a3240e; font-size: .9rem; margin: .3rem 0 0; font-weight: 600; }
[aria-invalid="true"] { border-color: #a3240e !important; }
.opciones { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.opciones label { font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.autorizacion { display: flex; gap: .6rem; align-items: flex-start; background: #FFF8E1; border-left: 5px solid var(--sol); padding: .9rem 1rem; border-radius: 6px; font-size: .95rem; }
.autorizacion input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; }
.boton { display: inline-block; background: var(--verde); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.5rem; font-weight: 800; text-decoration: none; cursor: pointer; font: inherit; font-weight: 800; }
.boton:hover, .boton:focus { background: #1d2f12; color: #fff; }
.boton-sol { background: var(--sol); color: var(--tinta); }
.boton-sol:hover, .boton-sol:focus { background: #e6b51c; color: var(--tinta); }
.boton-borde { background: #fff; color: var(--verde); border: 2px solid var(--verde); }
.boton-pequeno { padding: .35rem .9rem; font-size: .88rem; }
.enlace-boton { background: none; border: 0; padding: 0; color: #0b5cad; text-decoration: underline; cursor: pointer; font: inherit; }

.ninez h1, .ninez h2 { color: #8a4b00; }
.ninez .heroe-ninez { background: #FFF4CC; border-radius: 22px; padding: 1.6rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 860px) { .ninez .heroe-ninez { grid-template-columns: 1fr; } }
.pasos-ninez { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pasos-ninez li { background: #fff; border-radius: 14px; padding: .8rem 1rem; font-size: 1.05rem; }
.pasos-ninez li b { color: var(--coral); font-size: 1.3rem; margin-right: .4rem; }

.pregunta-item { background: #fff; border: 1px solid #e3e8ee; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; }
.votos { text-align: center; }
.votos strong { display: block; font-size: 1.6rem; color: var(--verde); }
.votos form { margin: .2rem 0 0; }
.plazo { font-size: .85rem; color: var(--gris); }

table.tabla { width: 100%; border-collapse: collapse; background: #fff; font-size: .93rem; }
.tabla th { background: var(--verde); color: #fff; text-align: left; padding: .55rem .7rem; }
.tabla td { padding: .55rem .7rem; border-bottom: 1px solid #e8ece4; vertical-align: top; }
.tabla tbody tr:nth-child(even) { background: var(--fondo-suave); }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

.alerta { border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; }
.alerta-exito { background: #E3F4D6; border-left: 5px solid var(--lima); }
.alerta-error { background: #FDE2DD; border-left: 5px solid var(--coral); }
.alerta-aviso { background: #FFF4CC; border-left: 5px solid var(--sol); }
.alerta-info { background: var(--cielo); border-left: 5px solid #0b5cad; }

.fuente { font-size: .85rem; color: var(--gris); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

svg a text, svg a { text-decoration: none; }
svg a:hover path, svg a:focus path { stroke-width: 3; }