@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =======================================================
   RESET GENERAL
======================================================= */

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

/* =======================================================
   VARIABLES DE COLOR
======================================================= */

:root{

    /* PRINCIPALES */
    --vino: #7b1e3b;
    --vino-hover: #61172f;

    --rosa-vino: #a8325b;

    --azul: #2563eb;
    --azul-hover: #1d4ed8;

    --verde: #16a34a;
    --verde-hover: #15803d;

    --rojo: #dc2626;
    --rojo-hover: #b91c1c;

    /* FONDOS */
    --glass: rgba(255,255,255,0.08);
    --glass-hover: rgba(255,255,255,0.12);

    --border: rgba(255,255,255,0.14);

    /* TEXTO */
    --texto: #ffffff;
    --texto-secundario: #d6d6d6;

    /* SOMBRAS */
    --shadow:
    0 8px 32px rgba(0,0,0,0.35);

    --shadow-hover:
    0 10px 28px rgba(0,0,0,0.45);

}

/* =======================================================
   BODY GENERAL
======================================================= */

body{

    font-family: 'Poppins', sans-serif;

    background:
    linear-gradient(
        rgba(10,10,20,0.82),
        rgba(10,10,20,0.82)
    ),
    url('assets/img/foto_tec.jpeg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: var(--texto);

    min-height: 100vh;

    padding: 30px;
}

/* =======================================================
   TITULOS GENERALES
======================================================= */

h1,
h2,
h3{
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* =======================================================
   LOGO
======================================================= */

.logo{

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 20px;
}

.logo img{

    width: 120px;
    height: auto;

    filter: drop-shadow(0 0 10px rgba(255,255,255,0.15));
}

/* =======================================================
   CONTENEDORES GLASSMORPHISM
======================================================= */

.login-form,
.dashboard-card,
.form-container,
.tabla-container{

    background: var(--glass);

    backdrop-filter: blur(14px);

    border: 1px solid var(--border);

    border-radius: 22px;

    box-shadow: var(--shadow);

    transition: 0.3s ease;
}

.login-form:hover,
.dashboard-card:hover,
.form-container:hover,
.tabla-container:hover{

    box-shadow: var(--shadow-hover);
}

/* =======================================================
   LOGIN
======================================================= */

.login-container{

    width: 100%;
    min-height: calc(100vh - 60px);

    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form{

    width: 400px;

    padding: 42px;
}

.login-form h2{

    text-align: center;

    margin-bottom: 10px;

    font-size: 30px;
}

.login-form p{

    text-align: center;

    color: var(--texto-secundario);

    margin-bottom: 30px;

    font-size: 14px;
}

/* =======================================================
   DASHBOARD
======================================================= */

.dashboard-container{

    width: 100%;
    min-height: calc(100vh - 60px);

    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-card{

    width: 470px;

    padding: 40px;

    text-align: center;
}

.dashboard-card h1{

    margin-bottom: 10px;

    font-size: 30px;
}

.dashboard-card h2{

    margin-bottom: 15px;

    color: #f2f2f2;
}

.dashboard-card p{

    margin-bottom: 25px;

    color: var(--texto-secundario);
}

/* =======================================================
   MENU DASHBOARD
======================================================= */

.menu{

    display: flex;
    flex-direction: column;

    gap: 16px;
}

.menu a{

    text-decoration: none;

    color: white;

    padding: 15px;

    border-radius: 14px;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--rosa-vino)
    );

    font-weight: 500;

    transition: 0.3s ease;
}

.menu a:hover{

    transform:
    translateY(-3px)
    scale(1.01);

    background:
    linear-gradient(
        135deg,
        var(--vino-hover),
        #8d2d53
    );

    box-shadow:
    0 10px 22px rgba(123,30,59,0.45);
}

/* =======================================================
   FORMULARIOS
======================================================= */

.form-container{

    width: 580px;

    margin: 40px auto;

    padding: 38px;
}

.form-container h2{

    text-align: center;

    margin-bottom: 28px;
}

/* =======================================================
   INPUTS
======================================================= */

.form-container input,
.form-container select,
.login-form input{

    width: 100%;

    padding: 14px;

    margin-bottom: 16px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background: rgba(255,255,255,0.10);

    color: white;

    outline: none;

    font-size: 14px;

    transition: 0.3s ease;
}

.form-container select option {
    color: black;
    background-color: white;
}

.form-container input::placeholder,
.login-form input::placeholder{

    color: #d9d9d9;
}

.form-container input:focus,
.form-container select:focus,
.login-form input:focus{

    background: rgba(255,255,255,0.16);

    border-color: rgba(255,255,255,0.25);

    transform: scale(1.01);
}

/* =======================================================
   LABELS
======================================================= */

.form-container label{

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    color: var(--texto-secundario);
}

/* =======================================================
   BOTONES GENERALES
======================================================= */

button{

    width: 100%;

    border: none;

    padding: 14px;

    border-radius: 14px;

    cursor: pointer;

    font-size: 15px;
    font-weight: 500;

    color: white;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--rosa-vino)
    );

    transition: 0.3s ease;
}

button:hover{

    transform:
    translateY(-3px)
    scale(1.01);

    background:
    linear-gradient(
        135deg,
        var(--vino-hover),
        #8d2d53
    );

    box-shadow:
    0 10px 22px rgba(123,30,59,0.45);
}

/* =======================================================
   INPUT FILE
======================================================= */

input[type="file"]{

    background: rgba(255,255,255,0.10);

    padding: 12px;

    cursor: pointer;
}

/* =======================================================
   TABLAS
======================================================= */

.tabla-container{

    width: 96%;

    margin: 40px auto;

    padding: 30px;

    overflow-x: auto;
}

.tabla-container h2{

    margin-bottom: 20px;
}

/* =======================================================
   BUSCADOR AJAX
======================================================= */

#busqueda{

    width: 100%;

    padding: 14px;

    margin-bottom: 20px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background: rgba(255,255,255,0.10);

    color: white;

    outline: none;

    transition: 0.3s ease;
}

#busqueda::placeholder{

    color: #d6d6d6;
}

#busqueda:focus{

    background: rgba(255,255,255,0.16);

    border-color: rgba(255,255,255,0.20);
}

/* =======================================================
   TABLAS INTERNAS
======================================================= */

table{

    width: 100%;

    border-collapse: collapse;

    overflow: hidden;

    border-radius: 16px;
}

table th{

    background: rgba(255,255,255,0.14);

    padding: 16px;

    color: white;

    font-weight: 600;

    font-size: 14px;
}

table td{

    padding: 16px;

    border-bottom:
    1px solid rgba(255,255,255,0.06);

    text-align: center;

    font-size: 14px;
}

table tr{

    transition: 0.3s ease;
}

table tr:hover{

    background: rgba(255,255,255,0.05);
}

/* =======================================================
   BOTONES DE ACCIONES
======================================================= */

.btn-editar,
.btn-eliminar,
.btn-pdf{

    display: inline-block;

    padding: 10px 16px;

    margin: 3px;

    border-radius: 12px;

    text-decoration: none;

    color: white !important;

    font-size: 13px;
    font-weight: 500;

    transition: 0.3s ease;
}
.btn-crear{

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    font-size: 14px;
    font-weight: 500;

    background:
    linear-gradient(
        135deg,
        var(--vino),
        var(--rosa-vino)
    );

    transition: 0.3s ease;

    margin-bottom: 10px;
}

.btn-crear:hover{

    transform: translateY(-2px);

    background:
    linear-gradient(
        135deg,
        var(--vino-hover),
        #8d2d53
    );

    box-shadow:
    0 8px 18px rgba(123,30,59,0.35);
}

/* EDITAR */

.btn-editar{

    background:
    linear-gradient(
        135deg,
        var(--verde),
        #22c55e
    );
}

.btn-editar:hover{

    background:
    linear-gradient(
        135deg,
        var(--verde-hover),
        #16a34a
    );

    transform:
    translateY(-2px);

    box-shadow:
    0 8px 18px rgba(34,197,94,0.35);
}

/* ELIMINAR */

.btn-eliminar{

    background:
    linear-gradient(
        135deg,
        var(--rojo),
        #ef4444
    );
}

.btn-eliminar:hover{

    background:
    linear-gradient(
        135deg,
        var(--rojo-hover),
        #dc2626
    );

    transform:
    translateY(-2px);

    box-shadow:
    0 8px 18px rgba(239,68,68,0.35);
}

/* PDF */

.btn-pdf{

    background:
    linear-gradient(
        135deg,
        var(--azul),
        #3b82f6
    );
}

.btn-pdf:hover{

    background:
    linear-gradient(
        135deg,
        var(--azul-hover),
        #2563eb
    );

    transform:
    translateY(-2px);

    box-shadow:
    0 8px 18px rgba(59,130,246,0.35);
}

/* =======================================================
   SCROLLBAR
======================================================= */

::-webkit-scrollbar{

    width: 10px;
}

::-webkit-scrollbar-track{

    background: rgba(255,255,255,0.05);
}

::-webkit-scrollbar-thumb{

    background: rgba(255,255,255,0.18);

    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover{

    background: rgba(255,255,255,0.28);
}

/* =======================================================
   RESPONSIVE
======================================================= */

/* =======================================================
   TOP BAR
======================================================= */

.top-bar{

    width: 95%;

    margin: 0 auto 20px auto;

    display: flex;

    justify-content: flex-start;
}

/* =======================================================
   BOTON DASHBOARD
======================================================= */

.btn-dashboard{

    display: inline-block;

    padding: 12px 18px;

    border-radius: 12px;

    text-decoration: none;

    color: white;

    font-size: 14px;
    font-weight: 500;

    background:
    linear-gradient(
        135deg,
        #374151,
        #1f2937
    );

    transition: 0.3s ease;
}

.btn-dashboard:hover{

    transform: translateY(-2px);

    background:
    linear-gradient(
        135deg,
        #4b5563,
        #111827
    );

    box-shadow:
    0 8px 18px rgba(0,0,0,0.35);
}

@media(max-width: 768px){

    body{

        padding: 15px;
    }

    .login-form,
    .dashboard-card,
    .form-container{

        width: 100%;
    }

    .tabla-container{

        width: 100%;
        padding: 20px;
    }

    table{

        font-size: 13px;
    }

    .btn-editar,
    .btn-eliminar,
    .btn-pdf{

        display: block;

        width: 100%;

        margin-bottom: 6px;
    }

    .menu a{

        font-size: 14px;
    }
}