/*=========================================
    PROYECTO AJAX - JQUERY     Archivo: estilos.css
==========================================*/


:root{
    --imagen-fondo: url('minimoss.gif');
    --velo: .10;               


    --tinta:    #16302b;        
    --tinta-2:  #4a635d;    
    --salvia:   #8fb3a6;     
    --coral:    #e4614e;        
    --coral-2:  #c94a38;    
    --vidrio:   rgba(255,255,255,.50);
}

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

body{
    font-family:'DM Sans', system-ui, sans-serif;
    color:var(--tinta);
    min-height:100vh;
    position:relative;
    background:#dce8e3;
}

/* La imagen de fondo: fija, cubre toda la pantalla */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background-image:var(--imagen-fondo);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* Velo que suaviza la imagen para que se lea el texto */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,
        rgba(255,255,255,calc(var(--velo) + .1)) 0%,
        rgba(255,255,255,var(--velo)) 45%,
        rgba(220,232,227,calc(var(--velo) + .2)) 100%);
}

.contenedor{
    width:92%;
    max-width:900px;
    margin:0 auto;
    padding:70px 0 60px;
}

/*  TITULOS  */
h1{
    text-align:center;
    font-family:'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size:clamp(2rem, 5vw, 3.2rem);
    font-weight:700;
    line-height:1.1;
    letter-spacing:-.02em;
    color:var(--tinta);
    margin-bottom:50px;
}

h2{
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--coral);
    margin-bottom:22px;
}

/*  CAJAS DE VIDRIO  */
.caja{
    background:var(--vidrio);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.6);
    margin-bottom:22px;
    padding:32px;
    border-radius:20px;
    box-shadow:0 10px 40px rgba(22,48,43,.10);
}

/*  FORMULARIO  */
label{
    display:block;
    margin-top:20px;
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.04em;
    color:var(--tinta-2);
}

input{
    width:100%;
    padding:13px 16px;
    margin-top:7px;
    font-size:.95rem;
    font-family:inherit;
    color:var(--tinta);
    background:rgba(255,255,255,.75);
    border:1px solid var(--salvia);
    border-radius:12px;
    transition:border-color .2s, box-shadow .2s, background .2s;
}

input::placeholder{ color:#9aada8; }

input:focus{
    outline:none;
    background:#fff;
    border-color:var(--coral);
    box-shadow:0 0 0 4px rgba(228,97,78,.14);
}

/*  BOTONES  */
button{
    margin-top:26px;
    margin-right:10px;
    padding:13px 26px;
    font-family:inherit;
    font-size:.9rem;
    font-weight:600;
    border:none;
    border-radius:999px;         /* pastilla */
    cursor:pointer;
    color:#fff;
    background:var(--tinta);
    transition:transform .18s, background .18s, box-shadow .18s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(22,48,43,.25);
}

button:active{ transform:translateY(0); }

button:focus-visible{
    outline:3px solid var(--coral);
    outline-offset:3px;
}

/* Los dos principales en coral, los secundarios discretos */
#btnGuardar{ background:var(--coral); }
#btnGuardar:hover{ background:var(--coral-2); }

#btnValidar{
    background:transparent;
    color:var(--tinta);
    border:1.5px solid var(--tinta);
}
#btnValidar:hover{ background:var(--tinta); color:#fff; }

#btnConsultar,
#btnLoad{
    margin-top:0;
    background:var(--tinta);
}

/*  CAJAS DE RESPUESTA  */
#respuesta,
#datosServidor,
#contenidoLoad{
    padding:20px;
    border-radius:14px;
    background:rgba(255,255,255,.55);
    border:1px dashed var(--salvia);
    color:var(--tinta-2);
    font-size:.92rem;
    line-height:1.6;
    overflow-x:auto;
}

#respuesta{ min-height:52px; }
#datosServidor,
#contenidoLoad{ margin-top:20px; }

#datosServidor:empty,
#contenidoLoad:empty{ display:none; }

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

/*  TABLA  */
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:.92rem;
    background:rgba(255,255,255,.6);
    border-radius:14px;
    overflow:hidden;
}

table th{
    background:var(--tinta);
    color:#fff;
    padding:14px 12px;
    text-align:left;
    font-family:'JetBrains Mono', monospace;
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.1em;
    text-transform:uppercase;
}

table td{
    padding:13px 12px;
    border-bottom:1px solid rgba(143,179,166,.35);
}

table tbody tr:last-child td{ border-bottom:none; }
table tbody tr:hover{ background:rgba(228,97,78,.08); }

/*  ESTADOS DE VALIDACION  */
.error{
    color:var(--coral-2);
    font-size:.8rem;
    margin-top:6px;
}

.correcto{
    border-color:#3f9b6d;
    background:rgba(63,155,109,.07);
}

.incorrecto{
    border-color:var(--coral);
    background:rgba(228,97,78,.07);
}

/*  RESPONSIVE  */
@media(max-width:700px){
    .contenedor{ padding:40px 0; }
    .caja{ padding:22px; border-radius:16px; }
    button{
        width:100%;
        margin-right:0;
        margin-bottom:10px;
    }
    #btnConsultar, #btnLoad{ margin-top:10px; }
}

/*  ACCESIBILIDAD  */
@media(prefers-reduced-motion:reduce){
    *{ transition:none !important; }
    button:hover{ transform:none; }
}