/* ============================================================
   Sistema de Admisión — Colegio San Pío Talagante
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #f0f4f0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

/* Cabecera */
.site-header {
    background: #4c7b53;
    color: white;
    padding: 16px 0;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.site-logo {
    height: 70px;
    width: auto;
    flex-shrink: 0;
    background: white;
    border-radius: 6px;
    padding: 6px;
}
.site-header-texto { text-align: left; }
.site-title    { font-size: 1.4em; font-weight: 700; }
.site-subtitle { font-size: 0.95em; opacity: 0.85; margin-top: 4px; }

/* Contenido principal */
main { flex: 1; padding: 32px 0; }

/* Tarjeta */
.card {
    background: white;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}
.card h2      { color: #4c7b53; margin-bottom: 16px; font-size: 1.3em; }
.card p       { margin-bottom: 12px; color: #555; }
.card-angosta { max-width: 480px; margin-left: auto; margin-right: auto; }
.card-centrada { text-align: center; }

/* Campos del formulario */
.campo { margin-bottom: 20px; }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; color: #444; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.2s;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: #4c7b53;
    box-shadow: 0 0 0 3px rgba(76,123,83,0.12);
}
.campo small { display: block; margin-top: 4px; color: #888; font-size: 0.85em; }
.requerido   { color: #c00; }

/* Botones */
.btn {
    display: inline-block;
    padding: 11px 24px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-primario         { background: #4c7b53; color: white; }
.btn-primario:hover   { background: #3a5e3f; }
.btn-secundario       { background: #e2e8f0; color: #4c7b53; }
.btn-secundario:hover { background: #cbd5e1; }
.btn:disabled         { background: #c8d5ca; color: #fff; cursor: not-allowed; }
.acciones { margin-top: 24px; }

/* Alertas */
.alerta {
    padding: 14px 16px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.alerta-error { background: #fdecea; border-left: 4px solid #c00; color: #7a0000; }
.alerta-info  { background: #eaf2eb; border-left: 4px solid #4c7b53; color: #4c7b53; }
.alerta-exito { background: #eef3e8; border-left: 4px solid #637941; color: #4a5a30; }
.alerta ul    { padding-left: 18px; }
@keyframes resaltar-pulso {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    40%       { box-shadow: 0 0 0 5px #4c7b53aa; }
}
.alerta-resaltada { animation: resaltar-pulso 0.5s ease 3; }

/* Ícono OK */
.icono-ok { font-size: 3em; color: #637941; margin-bottom: 16px; }

/* Ayuda */
.ayuda   { margin-top: 20px; font-size: 0.9em; color: #666; text-align: center; }
.ayuda a { color: #4c7b53; }

/* Pie de página */
.site-footer {
    background: #4c7b53;
    color: rgba(255,255,255,0.75);
    text-align: center;
    padding: 16px 0;
    font-size: 0.85em;
}
.site-footer a { color: rgba(255,255,255,0.9); }

/* Responsive base */
@media (max-width: 600px) {
    .card { padding: 20px 16px; }
    .site-title { font-size: 1.1em; }
}

/* ============================================================
   FORMULARIO PRINCIPAL
   ============================================================ */

.formulario-body { background: #eef2ee; }

/* Navegador de secciones */
.nav-formulario {
    background: white;
    border-bottom: 1px solid #dde3ec;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-secciones-lista {
    list-style: none;
    display: flex;
    gap: 0;
    overflow-x: auto;
}
.nav-seccion a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    text-decoration: none;
    color: #888;
    font-size: 0.9em;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-seccion.activa a  { color: #4c7b53; border-bottom-color: #4c7b53; font-weight: 600; }
.nav-seccion.completa a { color: #637941; border-bottom-color: #637941; }
.nav-seccion.pendiente a:hover { color: #555; background: #f5f7fa; }
.nav-icono { font-size: 1em; }

/* Main del formulario */
.formulario-main { padding: 24px 0 40px; }

/* Subtítulo de sección */
.subtitulo-seccion {
    background: #f0f4f0;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 24px;
}

/* Fieldsets */
.fieldset {
    border: 1px solid #dde3ec;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.fieldset legend {
    font-weight: 700;
    color: #4c7b53;
    padding: 0 8px;
    font-size: 0.95em;
}
.fieldset-nota {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 16px;
}

/* Grupos de campos */
.campos-grupo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.campos-grupo-3 { grid-template-columns: repeat(3, 1fr); }
.campo-amplio   { grid-column: span 1; }
.campo-medio    { max-width: 300px; }

/* Radios con estilo de tarjeta */
.campo-radio label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #dde3ec;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.campo-radio input[type="radio"] { accent-color: #4c7b53; }
.campo-radio label:has(input:checked) { border-color: #4c7b53; background: #f0f4f0; }
.radio-etiqueta       { display: flex; flex-direction: column; }
.radio-etiqueta small { color: #888; font-size: 0.82em; }

/* Feedback de RUT */
.feedback       { display: block; margin-top: 4px; font-size: 0.85em; }
.feedback-ok    { color: #637941; }
.feedback-error { color: #c00; }
.input-ok       { border-color: #637941 !important; }
.input-error    { border-color: #c00 !important; }

/* Acciones del formulario */
.acciones-formulario { margin-top: 28px; text-align: right; }

/* Autoguardado */
.autoguardado-aviso {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #333;
    color: white;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.85em;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 999;
    pointer-events: none;
}
.autoguardado-aviso.visible { opacity: 1; }
.autoguardado-aviso.ok      { background: #637941; }
.autoguardado-aviso.error   { background: #c00; }

/* Responsive formulario */
@media (max-width: 600px) {
    .campos-grupo-3     { grid-template-columns: 1fr; }
    .nav-seccion a      { padding: 12px 14px; font-size: 0.8em; }
    .acciones-formulario { text-align: center; }
}

/* ============================================================
   SECCIÓN ADULTOS RESPONSABLES
   ============================================================ */

/* Lista de adultos agregados */
.adultos-lista { margin-bottom: 32px; }
.adultos-lista h3,
.adulto-form-contenedor h3 {
    font-size: 1em;
    color: #4c7b53;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eef2ee;
}

.adulto-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    margin-bottom: 10px;
}
.adulto-info { flex: 1; }
.adulto-info strong { display: block; color: #4c7b53; margin-bottom: 4px; }
.adulto-parentesco { font-size: 0.85em; color: #888; display: block; margin-bottom: 6px; }

/* Badges */
.adulto-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
    font-size: 0.75em;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}
.badge-verde   { background: #eef3e8; color: #637941; }
.badge-azul    { background: #e8f2e9; color: #4c7b53; }
.badge-gris    { background: #f0f4f0; color: #555; font-weight: 400; }
.badge-morado  { background: #f0ebf8; color: #6b3fa0; }

/* Acciones por adulto */
.adulto-acciones {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Botón designar apoderado */
.btn-designar {
    background: none;
    border: 1px solid #b8a8d4;
    color: #6b3fa0;
    padding: 4px 10px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.78em;
    white-space: nowrap;
    transition: all 0.2s;
}
.btn-designar:hover { background: #f0ebf8; border-color: #6b3fa0; }

/* Botón eliminar */
.btn-eliminar {
    background: none;
    border: 1px solid #dde3ec;
    color: #c00;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-eliminar:hover { background: #fdecea; border-color: #c00; }

/* Checkboxes */
.campo-checkbox { margin-bottom: 16px; }
.campo-checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #444;
}
.campo-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4c7b53;
    flex-shrink: 0;
}
.campo-checkbox small { display: block; margin-top: 4px; color: #888; font-size: 0.82em; padding-left: 28px; }

/* ============================================================
   SECCIÓN ANTECEDENTES
   ============================================================ */

/* Opciones de radio en fila */
.opciones-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.opcion-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 2px solid #dde3ec;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: border-color 0.2s;
}
.opcion-radio:has(input:checked) {
    border-color: #4c7b53;
    background: #f0f4f0;
}
.opcion-radio input[type="radio"] { accent-color: #4c7b53; }

/* Campo de edad con años y meses en línea */
.campo-edad {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 6px;
}
.campo-edad > div {
    display: flex;
    align-items: center;
    gap: 6px;
}
.label-inline {
    font-weight: normal;
    color: #555;
    font-size: 0.95em;
}

/* ============================================================
   NAVEGADOR DE DOS NIVELES
   ============================================================ */

/* Nivel 1: grupos */
.nav-grupos-lista {
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 2px solid #dde3ec;
}
.nav-grupo {
    padding: 10px 24px;
    font-size: 0.85em;
    font-weight: 600;
    color: #aaa;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.nav-grupo.activo {
    color: #4c7b53;
    border-bottom-color: #4c7b53;
}
.nav-grupo.completo {
    color: #637941;
    border-bottom-color: #637941;
}
.nav-grupo-etiqueta,
.nav-grupo-etiqueta:link,
.nav-grupo-etiqueta:visited {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.nav-grupo-etiqueta:hover {
    text-decoration: underline;
}

/* Nivel 2: secciones — ajustar tamaño para caber más */
.nav-secciones-lista .nav-seccion a {
    padding: 10px 14px;
    font-size: 0.82em;
}

/* ============================================================
   TABLAS DE AUTONOMÍA Y DESARROLLO SOCIAL
   ============================================================ */

.tabla-autonomia {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.tabla-autonomia th {
    text-align: center;
    font-weight: 600;
    color: #4c7b53;
    padding: 8px 12px;
    border-bottom: 2px solid #dde3ec;
}
.tabla-autonomia th:first-child { text-align: left; }
.tabla-autonomia td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f4f0;
    color: #444;
}
.tabla-autonomia tr:last-child td { border-bottom: none; }
.tabla-autonomia tr:hover td { background: #f8fafc; }
.td-radio { text-align: center; }
.td-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #4c7b53;
    cursor: pointer;
}

/* ============================================================
   HITOS DE DESARROLLO (años/meses)
   ============================================================ */

.hitos-grupo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hito-fila {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f0;
}
.hito-fila:last-child { border-bottom: none; }
.hito-etiqueta {
    font-weight: 500;
    color: #444;
    font-size: 0.95em;
}
.hito-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hito-inputs input[type="number"] {
    width: 70px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    text-align: center;
}
.hito-inputs input[type="number"]:focus {
    outline: none;
    border-color: #4c7b53;
    box-shadow: 0 0 0 3px rgba(76,123,83,0.12);
}
.hito-label { color: #666; font-size: 0.9em; }
.hito-nunca {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88em;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
}
.hito-nunca input[type="checkbox"] { cursor: pointer; }

@media (max-width: 600px) {
    .hito-fila { grid-template-columns: 1fr; }
    .hito-nunca { justify-self: start; }
}

/* ============================================================
   PÁGINA DE CONFIRMACIÓN FINAL
   ============================================================ */

.resumen-grupo { margin-bottom: 28px; }
.resumen-grupo-titulo {
    font-size: 1em;
    font-weight: 700;
    color: #4c7b53;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #eef2ee;
}
.resumen-lista  { list-style: none; }
.resumen-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f4f0;
}
.resumen-item:last-child { border-bottom: none; }
.resumen-icono {
    font-size: 1.1em;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.resumen-item.completa .resumen-icono { color: #637941; }
.resumen-item.pendiente .resumen-icono { color: #aaa; }
.resumen-etiqueta { flex: 1; color: #444; font-size: 0.95em; }
.resumen-item.pendiente .resumen-etiqueta { color: #999; }
.resumen-link {
    font-size: 0.85em;
    color: #4c7b53;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #dde3ec;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.resumen-link:hover { background: #f0f4f0; }

.confirmacion-aviso {
    background: #fff8e1;
    border-left: 4px solid #f9a825;
    padding: 14px 16px;
    border-radius: 5px;
    margin: 20px 0;
    font-size: 0.95em;
    color: #555;
}

.btn-enviar {
    background: #637941;
    color: white;
    padding: 14px 32px;
    font-size: 1.05em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.2s;
}
.btn-enviar:hover { background: #4a5a30; }

/* ============================================================
   Barra de vista de administrador
   ============================================================ */

.admin-barra-vista {
    background: #f59e0b;
    color: #1a1a1a;
    padding: 0.55rem 0;
    font-size: 0.88rem;
    font-weight: 500;
}
.admin-barra-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-barra-vista a {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.admin-barra-vista a:hover { opacity: 0.75; }

/* Deshabilitar interacción en modo admin */
.vista-admin input,
.vista-admin select,
.vista-admin textarea {
    pointer-events: none;
    background-color: #f7f8f7;
    cursor: default;
}
.vista-admin button[type="submit"],
.vista-admin .btn-guardar,
.vista-admin .btn-enviar,
.vista-admin .btn-primario { display: none; }
.vista-admin #autoguardado-aviso { display: none; }