/* =========================================================
   PREREGISTRO DE ARTESANOS — IFAT
========================================================= */

:root{
    --pre-vino:#981447;
    --pre-vino-oscuro:#680b2e;
    --pre-vino-claro:#f9edf2;
    --pre-fondo:#f3f5f8;
    --pre-blanco:#ffffff;
    --pre-texto:#1d2939;
    --pre-gris:#667085;
    --pre-borde:#e4e7ec;
    --pre-verde:#177245;
    --pre-rojo:#b42318;
}

*{box-sizing:border-box}

body.preregistro-page{
    margin:0;
    min-height:100vh;
    color:var(--pre-texto);
    background:var(--pre-fondo);
    font-family:Arial,Helvetica,sans-serif;
    text-align:left;
}

.preregistro-header{
    background:#fff;
    border-bottom:1px solid var(--pre-borde);
    box-shadow:0 4px 16px rgba(16,24,40,.06);
}

.institutional-bar{
    padding:8px 20px;
    color:rgba(255,255,255,.86);
    background:var(--pre-vino-oscuro);
    font-size:10px;
    text-align:center;
}

.header-main{
    width:calc(100% - 40px);
    max-width:1400px;
    min-height:105px;
    margin:0 auto;
    padding:17px 0;
    display:flex;
    align-items:center;
    gap:24px;
}

.header-logo img{
    width:150px;
    max-height:70px;
    object-fit:contain;
}

.header-copy{
    padding-left:23px;
    border-left:1px solid var(--pre-borde);
}

.header-copy span{
    display:block;
    margin-bottom:5px;
    color:var(--pre-vino);
    font-size:10px;
    font-weight:800;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.header-copy h1{
    margin:0;
    font-size:27px;
    text-transform:uppercase;
}

.header-copy p{
    margin:6px 0 0;
    color:var(--pre-gris);
    font-size:12px;
}

.preregistro-content{
    width:calc(100% - 40px);
    max-width:1400px;
    margin:25px auto;
}

.intro-card{
    margin-bottom:20px;
    padding:22px 24px;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    color:#fff;
    background:linear-gradient(135deg,var(--pre-vino-oscuro),var(--pre-vino));
    border-radius:18px;
    box-shadow:0 12px 28px rgba(104,11,46,.20);
}

.intro-icon{
    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:14px;
    background:rgba(255,255,255,.12);
}

.intro-icon svg{width:25px;height:25px}

.intro-card h2{margin:0;font-size:22px}

.intro-card p{
    margin:6px 0 0;
    color:rgba(255,255,255,.8);
    font-size:12px;
    line-height:1.5;
}

.folio-chip{
    min-width:130px;
    padding:11px 15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:13px;
    background:rgba(255,255,255,.12);
}

.folio-chip span{
    color:rgba(255,255,255,.7);
    font-size:9px;
    text-transform:uppercase;
}

.folio-chip strong{margin-top:4px;font-size:22px}

.preregistro-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.form-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--pre-borde);
    border-radius:16px;
    box-shadow:0 7px 22px rgba(16,24,40,.06);
}

.card-heading{
    padding:16px 19px;
    display:flex;
    align-items:center;
    gap:11px;
    background:#fcfcfd;
    border-bottom:1px solid var(--pre-borde);
}

.card-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:11px;
    color:#fff;
    background:var(--pre-vino);
}

.card-icon svg{width:20px;height:20px}
.card-heading h3{margin:0;font-size:17px}

.card-heading p{
    margin:4px 0 0;
    color:var(--pre-gris);
    font-size:11px;
}

.form-grid{
    padding:20px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.field{min-width:0}
.field-full{grid-column:1/-1}

.field label{
    display:block;
    margin-bottom:7px;
    color:#344054;
    font-size:12px;
    font-weight:700;
}

.field label span{color:var(--pre-rojo)}

.field input,
.field select{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #d0d5dd;
    border-radius:9px;
    color:#101828;
    background:#fff;
    font:inherit;
    font-size:13px;
    outline:none;
    transition:.2s ease;
}

.field input:focus,
.field select:focus{
    border-color:var(--pre-vino);
    box-shadow:0 0 0 3px rgba(152,20,71,.10);
}

.field input.readonly{
    color:#667085;
    background:#f2f4f7;
    cursor:not-allowed;
}

.uppercase{text-transform:uppercase}

.form-actions{
    grid-column:1/-1;
    padding:18px 20px;
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    background:#fff;
    border:1px solid var(--pre-borde);
    border-radius:14px;
    box-shadow:0 5px 16px rgba(16,24,40,.05);
}

.btn{
    min-height:43px;
    padding:10px 16px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    border:1px solid transparent;
    border-radius:10px;
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.btn svg{width:17px;height:17px}

.btn-primary{
    color:#fff;
    background:var(--pre-vino);
    box-shadow:0 4px 11px rgba(152,20,71,.18);
}

.btn-primary:hover{
    background:var(--pre-vino-oscuro);
    transform:translateY(-1px);
}

.btn-secondary{
    color:var(--pre-texto);
    background:#fff;
    border-color:#d0d5dd;
}

.btn-secondary:hover{
    color:var(--pre-vino);
    border-color:var(--pre-vino);
}

.btn-pdf{color:#fff;background:var(--pre-verde)}
.btn-pdf:hover{background:#105c38}

.preregistro-footer{
    margin-top:35px;
    color:#fff;
    background:linear-gradient(135deg,var(--pre-vino-oscuro),var(--pre-vino));
}

.footer-content{
    width:calc(100% - 40px);
    max-width:1400px;
    margin:0 auto;
    padding:30px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.footer-brand img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:13px;
    border:2px solid rgba(255,255,255,.55);
}

.footer-brand h3,
.footer-social h4{margin:0;font-size:13px}

.footer-brand p{
    max-width:620px;
    margin:6px 0 0;
    color:rgba(255,255,255,.7);
    font-size:10px;
    line-height:1.5;
}

.social-links{margin-top:10px;display:flex;gap:8px}

.social-links a{
    width:35px;
    height:35px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:9px;
    color:#fff;
    background:rgba(255,255,255,.1);
    text-decoration:none;
}

.social-links a:hover{color:var(--pre-vino);background:#fff}

.footer-bottom{
    padding:13px 20px;
    border-top:1px solid rgba(255,255,255,.14);
    color:rgba(255,255,255,.6);
    font-size:9px;
    text-align:center;
}

@media(max-width:850px){
    .preregistro-form{grid-template-columns:1fr}
    .intro-card{grid-template-columns:52px 1fr}
    .folio-chip{grid-column:1/-1;width:100%}
    .footer-content{align-items:flex-start;flex-direction:column}
}

@media(max-width:600px){
    .header-main,
    .preregistro-content,
    .footer-content{width:calc(100% - 20px)}

    .header-main{
        align-items:flex-start;
        flex-direction:column;
    }

    .header-copy{
        padding-left:0;
        border-left:0;
    }

    .header-copy h1{font-size:22px}
    .intro-card{padding:19px 16px}
    .form-grid{grid-template-columns:1fr;padding:16px}
    .field-full{grid-column:auto}
    .form-actions{flex-direction:column}
    .form-actions .btn{width:100%}
}