/*=========================================
    PROYECTO AJAX - JQUERY     Archivo: estilos.css
    Rediseño: paleta inspirada en textiles guatemaltecos
==========================================*/

:root{
    --crema:#FFF8EC;
    --tinta:#1F2A24;
    --turquesa:#0E7C7B;
    --turquesa-oscuro:#0B3D3A;
    --coral:#FF6B4A;
    --amarillo:#FFC94A;
    --morado:#6E4AA6;
    --linea:#E7DFCB;
    --sombra: 0 10px 25px rgba(11,61,58,.12);
}

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

body{
    font-family:'Nunito Sans', Arial, Helvetica, sans-serif;
    background:var(--crema);
    color:var(--tinta);
    -webkit-font-smoothing:antialiased;
}

/* ===== Franja tejida (elemento firma) ===== */
.franja-tejido{
    height:10px;
    width:100%;
    background:repeating-linear-gradient(
        90deg,
        var(--turquesa) 0 24px,
        var(--coral) 24px 48px,
        var(--amarillo) 48px 72px,
        var(--morado) 72px 96px
    );
    background-size:200% 100%;
    animation:tejer 14s linear infinite;
}
@keyframes tejer{
    0%{ background-position:0% 0; }
    100%{ background-position:-200% 0; }
}

.contenedor{
    width:90%;
    max-width:1100px;
    margin:0 auto 40px;
}

/* ===== Encabezado ===== */
.encabezado{
    text-align:center;
    padding:40px 10px 20px;
    opacity:0;
    animation:aparecer .7s ease forwards;
}
.eyebrow{
    display:inline-block;
    font-family:'Baloo 2', sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--turquesa);
    background:#E6F4F3;
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:14px;
}
h1{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size:clamp(28px, 4vw, 40px);
    color:var(--turquesa-oscuro);
    line-height:1.2;
}
h1 .resalte{
    color:var(--coral);
    position:relative;
}
.subtitulo{
    margin-top:12px;
    color:#5B6B62;
    font-size:16px;
}

/* ===== Cajas ===== */
.caja{
    background:white;
    margin-bottom:25px;
    padding:26px 26px 28px;
    border-radius:16px;
    box-shadow:var(--sombra);
    border-top:6px solid var(--turquesa);
    opacity:0;
    transform:translateY(18px);
    animation:aparecer .6s ease forwards;
}
/* pequeño desfase por caja para dar sensación de cascada */
.caja:nth-of-type(1){ animation-delay:.05s; border-top-color:var(--turquesa); }
.caja:nth-of-type(2){ animation-delay:.12s; border-top-color:var(--coral); }
.caja:nth-of-type(3){ animation-delay:.19s; border-top-color:var(--amarillo); }
.caja:nth-of-type(4){ animation-delay:.26s; border-top-color:var(--morado); }
.caja:nth-of-type(5){ animation-delay:.33s; border-top-color:var(--turquesa); }

.caja:hover{
    box-shadow:0 14px 32px rgba(11,61,58,.16);
    transform:translateY(-2px);
    transition:box-shadow .3s ease, transform .3s ease;
}

@keyframes aparecer{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
}

h2{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    color:var(--turquesa-oscuro);
    margin-bottom:20px;
    font-size:21px;
    display:flex;
    align-items:center;
    gap:10px;
}
h2 .icono{
    font-size:20px;
}

/* ===== Formulario ===== */
label{
    display:block;
    margin-top:15px;
    font-weight:700;
    color:var(--tinta);
    font-size:14px;
}
input{
    width:100%;
    padding:11px 12px;
    margin-top:6px;
    border:1.5px solid var(--linea);
    border-radius:8px;
    font-size:15px;
    font-family:inherit;
    background:#FDFBF5;
    transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
input:focus{
    outline:none;
    border-color:var(--turquesa);
    background:white;
    box-shadow:0 0 0 4px rgba(14,124,123,.15);
}

/*BOTONES*/
button{
    margin-top:20px;
    padding:12px 22px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    color:white;
    font-family:'Baloo 2', sans-serif;
    font-weight:600;
    font-size:15px;
    margin-right:10px;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#btnValidar{ background:linear-gradient(135deg, #2FAE7A, #1E8E5E); }
#btnGuardar{ background:linear-gradient(135deg, var(--turquesa), var(--turquesa-oscuro)); }
#btnConsultar{ background:linear-gradient(135deg, #29B6C2, #167E88); }
#btnLoad{ background:linear-gradient(135deg, var(--morado), #4E3378); }

button:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 10px 20px rgba(0,0,0,.18);
    opacity:.95;
}
button:active{
    transform:translateY(0) scale(.97);
    box-shadow:0 4px 8px rgba(0,0,0,.15);
}

/*RESPUESTA AJAX*/
#respuesta{
    background:#EAF7F6;
    border:1.5px dashed #8FCFC9;
    color:var(--turquesa-oscuro);
    padding:16px;
    min-height:40px;
    border-radius:10px;
    transition:background .3s ease, border-color .3s ease;
}
#datosServidor{
    margin-top:15px;
    background:#FFF6E0;
    padding:16px;
    border-radius:10px;
    border:1.5px dashed var(--amarillo);
}
#contenidoLoad{
    margin-top:15px;
    background:#F1EBFA;
    padding:16px;
    border-radius:10px;
    border:1.5px dashed #B79EE0;
}

/*BUSCADOR*/
#buscar{
    margin-bottom:20px;
}

/*TABLA*/
.tabla-wrapper{
    overflow-x:auto;
    border-radius:10px;
}
table{
    width:100%;
    border-collapse:collapse;
}
table th{
    background:var(--turquesa-oscuro);
    color:white;
    padding:13px 12px;
    text-align:left;
    font-family:'Baloo 2', sans-serif;
    font-weight:600;
    letter-spacing:.02em;
}
table td{
    padding:11px 12px;
    border-bottom:1px solid var(--linea);
}
table tr:nth-child(even){
    background:#FBF8F0;
}
table tbody tr{
    transition:background .2s ease, transform .2s ease;
}
table tbody tr:hover{
    background:#D9F1EF;
    transform:scale(1.01);
}

/*MENSAJES*/
.error{
    color:#D8402D;
    font-size:13px;
    margin-top:6px;
    font-weight:600;
}
.correcto{
    border:2px solid #2FAE7A !important;
    background:#F1FBF6;
}
.incorrecto{
    border:2px solid #D8402D !important;
    background:#FDF1EF;
    animation:sacudir .35s ease;
}
@keyframes sacudir{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    75%{ transform:translateX(4px); }
}

/*RESPONSIVE*/
@media(max-width:700px){
    button{
        width:100%;
        margin-bottom:10px;
    }
    .caja{
        padding:20px;
    }
}

/* Respeto por preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}