/*=========================================
    PROYECTO AJAX - JQUERY     Archivo: estilos.css
==========================================*/
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background: linear-gradient(135deg, #fff5fb 0%, #f4e8ff 45%, #f9f4ff 100%);
    color:#4b2354;
    min-height:100vh;
}

.hero{
    background: linear-gradient(90deg, #8e44ad 0%, #c94f96 50%, #d98bb9 100%);
    color:white;
    padding:40px 20px;
    text-align:center;
    box-shadow:0 6px 20px rgba(142,68,173,0.25);
}

.hero-content{
    max-width:900px;
    margin:0 auto;
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:0.8rem;
    opacity:0.9;
    margin-bottom:10px;
}

.hero h1{
    font-size:2rem;
    margin-bottom:12px;
}

.hero-text{
    font-size:1rem;
    opacity:0.95;
}

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

.caja{
    background:rgba(255,255,255,0.95);
    margin-bottom:25px;
    padding:24px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(117, 52, 138, 0.12);
    border:1px solid rgba(191, 126, 187, 0.2);
}

h2{
    color:#8e44ad;
    margin-bottom:20px;
    font-size:1.3rem;
}

label{
    display:block;
    margin-top:15px;
    font-weight:bold;
    color:#6b3d6f;
}

input{
    width:100%;
    padding:12px;
    margin-top:7px;
    border:1px solid #e4c7e7;
    border-radius:10px;
    font-size:15px;
    background:#fffdfd;
}

input:focus{
    outline:none;
    border:2px solid #c94f96;
    background:#fff4fb;
    box-shadow:0 0 0 3px rgba(201,79,150,0.15);
}

/*BOTONES*/
button{
    margin-top:20px;
    padding:12px 20px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    color:white;
    font-size:15px;
    margin-right:10px;
    transition:all .3s ease;
    box-shadow:0 6px 14px rgba(142,68,173,0.18);
    font-weight:600;
}

#btnValidar{
    background:linear-gradient(90deg, #3f7d20, #6ab04c);
}

#btnGuardar{
    background:linear-gradient(90deg, #1f6f9a, #3d8cc4);
}

#btnConsultar{
    background:linear-gradient(90deg, #bb6b1d, #e09a3f);
}

#btnLoad{
    background:linear-gradient(90deg, #8a3b72, #c95f90);
}

#btnValidar:hover{
    background:linear-gradient(90deg, #2d5f17, #4f8d34);
}

#btnGuardar:hover{
    background:linear-gradient(90deg, #14506f, #2f7098);
}

#btnConsultar:hover{
    background:linear-gradient(90deg, #964f12, #c97b2f);
}

#btnLoad:hover{
    background:linear-gradient(90deg, #6f2d58, #a93e72);
}

button:hover{
    opacity:1;
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 10px 18px rgba(0,0,0,0.18);
}

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

/*RESPUESTA AJAX*/
#respuesta{
    background:#fff2fa;
    border:1px solid #e7b5d3;
    padding:15px;
    min-height:40px;
    border-radius:10px;
}

#datosServidor{
    margin-top:15px;
    background:#f9ebff;
    padding:15px;
    border-radius:10px;
    border:1px solid #d8b6ea;
}

#contenidoLoad{
    margin-top:15px;
    background:#fdf0ff;
    padding:15px;
    border-radius:10px;
    border:1px solid #e1bde5;
}

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

/*TABLA*/
table{
    width:100%;
    border-collapse:collapse;
    overflow:hidden;
    border-radius:10px;
}

table th{
    background:#8e44ad;
    color:white;
    padding:12px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:0.9rem;
}

table td{
    padding:12px 10px;
    border:1px solid #ebdff0;
}

table tr:nth-child(even){
    background:#fcf6ff;
}

table tr:hover{
    background:#f2e3fb;
}

table tbody tr td:first-child{
    font-weight:bold;
    color:#7a3d8f;
}

/*MENSAJES*/
.error{
    color:#c0392b;
    font-size:13px;
    margin-top:5px;
}

.correcto{
    border:2px solid #7d3c98;
}

.incorrecto{
    border:2px solid #e74c3c;
}

.pie{
    background:#6f3c88;
    color:white;
    text-align:center;
    padding:20px;
    margin-top:20px;
}

/*RESPONSIVE*/
@media(max-width:700px){
    .hero h1{
        font-size:1.6rem;
    }

    button{
        width:100%;
        margin-bottom:10px;
    }
}