/* ==========================================================================
   COLNADE — Módulo de inscripción en línea
   Última actualización: 2026-09-18

   Archivo APARTE de publico.css a propósito: así el módulo nuevo no puede
   romper el estilo de lo que ya está en producción. Usa las mismas variables
   de color del sitio (--forest, --leaf, --gold, --cyan, --sand, --cream...).
   ========================================================================== */

/* ---------- Barra de pasos ---------- */
.ins-pasos {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    flex-wrap: wrap;
}

.ins-paso {
    flex: 1 1 130px;
    min-width: 0;
    padding: 10px 4px 0;
    border-top: 4px solid var(--line, #ddd6cc);
    font-size: 12.5px;
    color: var(--muted, #7a7a7a);
    line-height: 1.35;
}

.ins-paso strong {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ins-paso.hecho {
    border-top-color: var(--leaf, #88a329);
    color: var(--leaf-deep, #6f8720);
}

.ins-paso.actual {
    border-top-color: var(--forest, #24474c);
    color: var(--forest, #24474c);
    font-weight: 700;
}

/* ---------- Tarjeta del formulario ---------- */
.ins-card {
    background: #fff;
    border: 1px solid var(--line, #e4ded4);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 18px rgba(36, 71, 76, .06);
}

.ins-card + .ins-card {
    margin-top: 18px;
}

.ins-titulo {
    margin: 0 0 4px;
    font-size: 25px;
    color: var(--forest, #24474c);
}

.ins-sub {
    margin: 0 0 26px;
    color: var(--muted, #6f6f6f);
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Campos ---------- */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.ins-grid .ancho {
    grid-column: 1 / -1;
}

.ins-campo label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #353435);
    margin-bottom: 6px;
}

.ins-campo .pista {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted, #8a8a8a);
    margin-top: 3px;
}

.ins-campo input[type="text"],
.ins-campo input[type="email"],
.ins-campo input[type="tel"],
.ins-campo input[type="date"],
.ins-campo input[type="number"],
.ins-campo select,
.ins-campo textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--line, #d9d2c7);
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: var(--ink, #353435);
    background: #fff;
    box-sizing: border-box;
}

.ins-campo textarea {
    min-height: 92px;
    resize: vertical;
}

.ins-campo input:focus,
.ins-campo select:focus,
.ins-campo textarea:focus {
    outline: none;
    border-color: var(--cyan, #2eb9d5);
    box-shadow: 0 0 0 3px rgba(46, 185, 213, .16);
}

.ins-campo.malo input,
.ins-campo.malo select,
.ins-campo.malo textarea {
    border-color: var(--red, #e0374a);
}

.ins-error {
    display: block;
    color: var(--red, #e0374a);
    font-size: 12.5px;
    margin-top: 5px;
    font-weight: 600;
}

/* ---------- Sí / No ---------- */
.ins-sino {
    display: inline-flex;
    border: 1.5px solid var(--line, #d9d2c7);
    border-radius: 10px;
    overflow: hidden;
}

.ins-sino label {
    margin: 0;
    padding: 9px 22px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    color: var(--muted, #6f6f6f);
}

.ins-sino input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ins-sino input:checked + label {
    background: var(--forest, #24474c);
    color: #fff;
    font-weight: 700;
}

/* ---------- Avisos ---------- */
.ins-aviso {
    padding: 15px 18px;
    border-radius: 11px;
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.ins-aviso-ok {
    background: #eef6e2;
    border-left: 4px solid var(--leaf, #88a329);
    color: #40560f;
}

.ins-aviso-malo {
    background: #fdecee;
    border-left: 4px solid var(--red, #e0374a);
    color: #8d1b28;
}

.ins-aviso-nota {
    background: var(--cream, #f0ecec);
    border-left: 4px solid var(--sand, #c3ad8e);
    color: var(--ink, #353435);
}

.ins-aviso-ojo {
    background: #fff6e2;
    border-left: 4px solid var(--gold, #f8ae13);
    color: #6b4a03;
}

/* ---------- Documentos ---------- */
.ins-docs {
    display: grid;
    gap: 12px;
}

.ins-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px solid var(--line, #e4ded4);
    border-radius: 12px;
    background: #fff;
    flex-wrap: wrap;
}

.ins-doc.listo {
    border-color: var(--leaf, #88a329);
    background: #f7fbf0;
}

.ins-doc-ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 700;
    background: var(--cream, #f0ecec);
    color: var(--muted, #8a8a8a);
    flex: 0 0 auto;
}

.ins-doc.listo .ins-doc-ic {
    background: var(--leaf, #88a329);
    color: #fff;
}

.ins-doc-txt {
    flex: 1 1 200px;
    min-width: 0;
}

.ins-doc-txt b {
    display: block;
    font-size: 15px;
    color: var(--ink, #353435);
}

.ins-doc-txt span {
    font-size: 12.5px;
    color: var(--muted, #8a8a8a);
    word-break: break-word;
}

.ins-doc-acc {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ins-doc input[type="file"] {
    font-size: 13px;
    max-width: 220px;
}

/* ---------- Resumen final ---------- */
.ins-resumen dt {
    font-size: 11.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted, #8a8a8a);
    margin-top: 14px;
}

.ins-resumen dd {
    margin: 3px 0 0;
    font-size: 15px;
    color: var(--ink, #353435);
}

/* ---------- Casillas de autorización ---------- */
.ins-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 17px;
    border: 1.5px solid var(--line, #e4ded4);
    border-radius: 11px;
    margin-bottom: 11px;
    background: #fff;
}

.ins-consent input {
    margin-top: 3px;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    accent-color: var(--forest, #24474c);
}

.ins-consent label {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink, #353435);
    cursor: pointer;
}

.ins-consent .opcional {
    font-size: 12px;
    color: var(--muted, #8a8a8a);
}

/* ---------- Pie de botones ---------- */
.ins-pie {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.ins-pie .btn {
    min-width: 140px;
}

/* ---------- Teléfono ---------- */
@media (max-width: 720px) {
    .ins-card {
        padding: 22px 18px;
    }

    .ins-grid {
        grid-template-columns: 1fr;
    }

    .ins-paso {
        flex-basis: 100%;
        border-top-width: 3px;
        padding-top: 7px;
    }

    .ins-paso:not(.actual) strong {
        display: inline;
    }

    .ins-pie .btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Cuenta del ecólogo (/mi-cuenta)
   ========================================================================== */
.eco-barra {
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    flex-wrap:wrap; padding:12px 16px; background:#fff; border:1px solid var(--line,#e4ded4);
    border-radius:12px; margin-bottom:20px; font-size:13.5px; color:var(--muted,#6f6f6f);
}
.eco-barra nav { display:flex; gap:16px; flex-wrap:wrap; }
.eco-barra nav a { color:var(--forest,#24474c); text-decoration:none; font-weight:600; }
.eco-barra nav a:hover { text-decoration:underline; }

.eco-tarjeta {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
    background:var(--forest,#24474c); border-radius:14px; padding:20px 22px; margin-top:18px;
}
.eco-tarjeta small {
    display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
    color:rgba(255,255,255,.62); margin-bottom:5px;
}
.eco-tarjeta b { color:#fff; font-size:17px; font-family:'Courier New',monospace; letter-spacing:.03em; word-break:break-all; }

.eco-acciones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.eco-accion {
    display:block; padding:20px; background:#fff; border:1px solid var(--line,#e4ded4);
    border-radius:14px; text-decoration:none; transition:border-color .15s, transform .15s;
}
.eco-accion:hover { border-color:var(--cyan,#2eb9d5); transform:translateY(-2px); }
.eco-accion b { display:block; color:var(--forest,#24474c); font-size:16px; margin-bottom:6px; }
.eco-accion span { display:block; color:var(--muted,#7a7a7a); font-size:13.3px; line-height:1.5; }

.eco-estado { padding:16px 18px; border-radius:12px; background:var(--cream,#f0ecec); margin-top:16px; }
.eco-estado b { display:block; font-size:18px; color:var(--forest,#24474c); margin-bottom:4px; }
.eco-estado span { font-size:14.5px; color:var(--ink,#353435); line-height:1.55; }
.eco-estado-gold   { background:#fff6e2; }
.eco-estado-leaf   { background:#eef6e2; }
.eco-estado-forest { background:#e2ecec; }
.eco-estado-cyan   { background:#ddf3f8; }

@media (max-width:720px) {
    .eco-tarjeta, .eco-acciones { grid-template-columns:1fr; }
}

/* ---------- Bloque «traer mis datos» del paso 1 ---------- */
.ins-traer { background:var(--cream,#f0ecec); border-color:var(--sand,#c3ad8e); }
.ins-traer .ins-campo input { background:#fff; }

/* ---------- Separador entre «retomar» y «empezar de cero» ---------- */
.ins-separa {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0 26px;
    color: var(--muted, #8a8a8a);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
}

.ins-separa::before,
.ins-separa::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line, #ddd6cc);
}

/* El bloque de retomar se ve secundario: más pequeño y apagado */
.ins-traer {
    background: var(--cream, #f0ecec);
    border-color: var(--line, #ddd6cc);
    padding: 22px 24px;
}

.ins-traer .ins-titulo {
    font-size: 18px;
}

.ins-traer .ins-sub {
    font-size: 14px;
    margin-bottom: 16px;
}

.ins-traer .ins-campo input {
    background: #fff;
}

/* El de empezar de cero es el principal: más aire y borde marcado */
.ins-card-primera {
    border-color: var(--sand, #c3ad8e);
    border-width: 2px;
}

/* ---------- Aviso de «tienes una solicitud a medias» ---------- */
.ins-seguir {
    background: #eef6e2;
    border-color: var(--leaf, #88a329);
    border-width: 2px;
}

/* ==========================================================================
   Textos legales con lectura obligatoria
   ========================================================================== */
.lg-bloque {
    border: 1.5px solid var(--line, #e4ded4);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: #fff;
}

.lg-bloque.lg-obliga { border-color: var(--sand, #c3ad8e); }

.lg-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: var(--forest, #24474c);
    font-size: 15px;
}

.lg-version {
    font-size: 11.5px;
    color: var(--muted, #8a8a8a);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}

/* La caja del texto: alta pero con tope, para obligar a bajar */
.lg-texto {
    max-height: 280px;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid var(--line, #e4ded4);
    border-radius: 9px;
    background: var(--wash, #f6f4f1);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink, #353435);
}

.lg-texto:focus { outline: 2px solid var(--cyan, #2eb9d5); outline-offset: 2px; }
.lg-texto.leido { border-color: var(--leaf, #88a329); background: #fbfdf7; }

.lg-texto h3 {
    font-size: 13.5px;
    color: var(--forest, #24474c);
    margin: 16px 0 6px;
}

.lg-texto h3:first-child { margin-top: 0; }
.lg-texto p { margin: 0 0 9px; }
.lg-texto ul { margin: 0 0 10px; padding-left: 20px; }
.lg-texto li { margin-bottom: 5px; }

.lg-texto .lg-fin {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--line, #ddd6cc);
    text-align: center;
    color: var(--muted, #9a9a9a);
    font-size: 12px;
    letter-spacing: .06em;
}

/* Lo que el Colegio todavía debe definir */
.lg-texto .lg-falta {
    background: #fdf0d4;
    color: #7a5602;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
}

/* El aviso de "baja hasta el final" */
.lg-aviso {
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 700;
}

.lg-aviso .lg-aviso-falta { color: var(--gold, #c98905); }
.lg-aviso .lg-aviso-listo { display: none; color: var(--leaf-deep, #6f8720); }
.lg-aviso.leido .lg-aviso-falta { display: none; }
.lg-aviso.leido .lg-aviso-listo { display: inline; }

/* La casilla apagada se ve apagada */
.lg-bloque .ins-consent { border: 0; padding: 12px 0 0; margin: 0; background: none; }
.lg-bloque .ins-consent input:disabled { opacity: .35; cursor: not-allowed; }
.lg-bloque .ins-consent input:disabled + label { color: var(--muted, #9a9a9a); }

.lg-nota {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted, #8a8a8a);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ---------- Textos legales publicados ---------- */
.lg-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.lg-tab {
    padding:9px 15px; border:1.5px solid var(--line,#e2ddd4); border-radius:9px;
    background:#fff; color:var(--ink,#353435); font-size:13.5px; text-decoration:none;
}
.lg-tab:hover { border-color:var(--cyan,#2eb9d5); }
.lg-tab.on { background:var(--forest,#24474c); border-color:var(--forest,#24474c); color:#fff; font-weight:700; }

.lg-publicado {
    background:#fff; border:1px solid var(--line,#e4ded4); border-radius:14px;
    padding:30px 32px; font-size:15px; line-height:1.72; color:var(--ink,#353435);
}
.lg-publicado h3 { font-size:17px; color:var(--forest,#24474c); margin:26px 0 8px; }
.lg-publicado h3:first-child { margin-top:0; }
.lg-publicado p { margin:0 0 12px; }
.lg-publicado ul { margin:0 0 14px; padding-left:22px; }
.lg-publicado li { margin-bottom:6px; }
.lg-publicado .lg-falta {
    background:#fdf0d4; color:#7a5602; padding:1px 6px; border-radius:4px; font-weight:700;
}

@media (max-width:720px) {
    .lg-publicado { padding:22px 18px; font-size:14.5px; }
}

/* ---------- Mientras un documento va subiendo ---------- */
.ins-doc.subiendo {
    border-color: var(--cyan, #2eb9d5);
    background: #f2fbfd;
}

.ins-doc.subiendo .ins-doc-ic {
    background: var(--cyan, #2eb9d5);
    color: #fff;
}

.ins-doc input[type="file"]:disabled { opacity: .4; cursor: not-allowed; }