/*=========================================================
    SISTEMA GoTrendier
    Archivo: estilos.css

    Puedes personalizar:
    - Colores
    - Tipografía
    - Tamaños
    - Botones
    - Tabla
==========================================================*/


/*=========================================================
    COLORES PRINCIPALES
    Cambia estos colores si deseas otro estilo.
==========================================================*/

:root{

    --rosa:#ff4081;
    --rosa-hover:#e73370;
    --gris:#fafafa;
    --gris-claro:#f5f5f5;
    --gris-borde:#dddddd;
    --texto:#444444;
    --verde:#43a047;
    --rojo:#e53935;
    --azul:#42a5f5;
    --blanco:#ffffff;

}


/*=========================================================
    CONFIGURACIÓN GENERAL
==========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:var(--gris);
    font-family:Arial, Helvetica, sans-serif;
    color:var(--texto);

}


/*=========================================================
    ENCABEZADO
==========================================================*/

header{

    width:100%;
    background:var(--rosa);
    color:white;
    padding:20px;

    box-shadow:0 4px 15px rgba(0,0,0,.15);

}

header h1{

    text-align:center;
    font-size:30px;

}

header p{

    text-align:center;
    margin-top:5px;

}


/*=========================================================
    MENÚ DE NAVEGACIÓN
==========================================================*/

nav{

    margin-top:20px;
    text-align:center;

}

nav a{

    color:white;

    text-decoration:none;

    margin:0 15px;

    font-weight:bold;

    transition:.3s;

}

nav a:hover{

    color:#ffe3ef;

}


/*=========================================================
    CONTENEDOR PRINCIPAL
==========================================================*/

.contenedor{

    width:90%;
    max-width:1000px;

    margin:40px auto;

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:0 10px 25px rgba(0,0,0,.1);

}


/*=========================================================
    TÍTULOS
==========================================================*/

h2{

    color:var(--rosa);

    text-align:center;

    margin-bottom:25px;

}


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

form{

    width:100%;

}


/*=========================================================
    ETIQUETAS
==========================================================*/

label{

    display:block;

    margin-top:18px;

    font-weight:bold;

}


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

input,
select,
textarea{

    width:100%;

    padding:12px;

    margin-top:8px;

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

    border-radius:8px;

    font-size:15px;

    transition:.3s;

}


/*=========================================================
    EFECTO AL ESCRIBIR
==========================================================*/

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--rosa);

    box-shadow:0 0 10px rgba(255,64,129,.3);

}


/*=========================================================
    ÁREA DE TEXTO
==========================================================*/

textarea{

    resize:none;

    min-height:100px;

}


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

button{

    width:100%;

    padding:15px;

    margin-top:30px;

    background:var(--rosa);

    color:white;

    border:none;

    border-radius:8px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:var(--rosa-hover);

    transform:translateY(-2px);

}


/*=========================================================
    BOTONES SECUNDARIOS
==========================================================*/

.boton{

    display:inline-block;

    padding:12px 18px;

    border-radius:8px;

    text-decoration:none;

    color:white;

    transition:.3s;

    font-weight:bold;

}

.azul{

    background:var(--azul);

}

.verde{

    background:var(--verde);

}

.rojo{

    background:var(--rojo);

}

.azul:hover,
.verde:hover,
.rojo:hover{

    opacity:.85;

}


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

table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

}

th{

    background:var(--rosa);

    color:white;

    padding:14px;

}

td{

    padding:12px;

    border-bottom:1px solid #eeeeee;

    text-align:center;

}


/*=========================================================
    EFECTO SOBRE LAS FILAS
==========================================================*/

tr:hover{

    background:#fff4f8;

}


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

.buscador{

    display:flex;

    gap:10px;

    margin-bottom:25px;

}

.buscador input{

    flex:1;

}

.buscador button{

    width:180px;

    margin-top:0;

}


/*=========================================================
    TARJETAS
==========================================================*/

.card{

    background:white;

    padding:20px;

    border-radius:12px;

    margin-bottom:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}


/*=========================================================
    MENSAJES
==========================================================*/

.exito{

    background:#d4edda;

    color:#155724;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

}

.error{

    background:#f8d7da;

    color:#721c24;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

}


/*=========================================================
    BADGES PARA ESTADO DE ENVÍO
==========================================================*/

.estado{

    padding:8px 15px;

    border-radius:20px;

    color:white;

    font-size:13px;

    font-weight:bold;

}

.pendiente{

    background:#f39c12;

}

.preparando{

    background:#3498db;

}

.enviado{

    background:#8e44ad;

}

.entregado{

    background:#27ae60;

}

.cancelado{

    background:#e74c3c;

}


/*=========================================================
    PIE DE PÁGINA
==========================================================*/

footer{

    margin-top:40px;

    text-align:center;

    color:#777;

    padding:20px;

}


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

@media(max-width:768px){

    .contenedor{

        width:95%;

        padding:20px;

    }

    .buscador{

        flex-direction:column;

    }

    .buscador button{

        width:100%;

    }

    table{

        font-size:13px;

    }

    th,
    td{

        padding:8px;

    }

    nav a{

        display:block;

        margin:10px 0;

    }

}

/*=========================================================
    HISTORIAL 2.0
    PANEL ADMINISTRATIVO
==========================================================*/


/*=========================================================
    BIENVENIDA
==========================================================*/

.bienvenida{

    background:linear-gradient(135deg,#ff4081,#ff77a8);

    color:white;

    padding:25px;

    border-radius:15px;

    margin-bottom:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.bienvenida h2{

    color:white;

    margin-bottom:10px;

    text-align:left;

}

.bienvenida p{

    font-size:16px;

}



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

.dashboard{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:18px;

    margin-bottom:30px;

}



/*=========================================================
    TARJETAS
==========================================================*/

.tarjeta{

    background:white;

    border-radius:15px;

    padding:22px;

    text-align:center;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

    transition:.30s;

    border-top:6px solid var(--rosa);

}

.tarjeta:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 30px rgba(0,0,0,.15);

}

.tarjeta h3{

    margin-bottom:12px;

    color:#666;

    font-size:16px;

}

.numero{

    font-size:34px;

    font-weight:bold;

}



/*=========================================================
    COLORES DE TARJETAS
==========================================================*/

.total{

    border-top-color:#ff4081;

}

.total .numero{

    color:#ff4081;

}


.pendientes{

    border-top-color:#f39c12;

}

.pendientes .numero{

    color:#f39c12;

}


.preparandoCard{

    border-top-color:#3498db;

}

.preparandoCard .numero{

    color:#3498db;

}


.enviados{

    border-top-color:#8e44ad;

}

.enviados .numero{

    color:#8e44ad;

}


.entregados{

    border-top-color:#27ae60;

}

.entregados .numero{

    color:#27ae60;

}


.cancelados{

    border-top-color:#e74c3c;

}

.cancelados .numero{

    color:#e74c3c;

}



/*=========================================================
    BUSCADOR MEJORADO
==========================================================*/

.buscador{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:center;

}

.buscador input{

    flex:1;

    min-width:250px;

}

.buscador button{

    width:170px;

}

.limpiar{

    background:#757575;

}

.limpiar:hover{

    background:#616161;

}



/*=========================================================
    INFORMACIÓN DE RESULTADOS
==========================================================*/

.info-registros{

    background:#fff4f8;

    border-left:6px solid var(--rosa);

    padding:18px;

    border-radius:10px;

    margin-bottom:25px;

    font-size:16px;

}



/*=========================================================
    TABLA ADMINISTRATIVA
==========================================================*/

table{

    overflow:hidden;

    border-radius:10px;

}

tr:nth-child(even){

    background:#fafafa;

}

tr:hover{

    background:#ffe6ef;

}



/*=========================================================
    MATRÍCULA
==========================================================*/

td:first-child{

    font-weight:bold;

    color:#444;

}



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

.acciones{

    display:flex;

    justify-content:center;

    gap:8px;

}

.acciones .boton{

    padding:8px 12px;

    font-size:13px;

}



/*=========================================================
    FECHA ACTUAL
==========================================================*/

.fecha-actual{

    text-align:right;

    color:#888;

    margin-bottom:18px;

    font-size:15px;

}



/*=========================================================
    RESPONSIVE DEL DASHBOARD
==========================================================*/

@media(max-width:768px){

.dashboard{

grid-template-columns:1fr;

}

.tarjeta{

padding:18px;

}

.numero{

font-size:28px;

}

.fecha-actual{

text-align:center;

margin-bottom:20px;

}

.acciones{

flex-direction:column;

}

.acciones .boton{

width:100%;

}
}

/*=========================================================
    BOTÓN HERO
==========================================================*/

.bienvenida .boton{

    display:inline-block;

    width:auto;

    padding:15px 35px;

    font-size:18px;

    text-decoration:none;

}

/*=========================================================
    BANNER PRINCIPAL
==========================================================*/

.banner{

    background:linear-gradient(135deg,#ff4081,#ff77a8,#ffb6d5);

    color:white;

    border-radius:20px;

    padding:60px 40px;

    margin-bottom:40px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.banner h2{

    color:white;

    font-size:42px;

    margin-bottom:20px;

}

.banner p{

    font-size:19px;

    line-height:1.7;

    max-width:750px;

    margin:auto;

}

.banner .boton{

    display:inline-block !important;

    padding:18px 45px !important;

    background:#ffffff !important;

    color:#ff4081 !important;

    border:3px solid #ffffff !important;

    border-radius:50px !important;

    text-decoration:none !important;

    font-size:18px !important;

    font-weight:bold !important;

    margin-top:35px !important;

}

.banner .boton:hover{

    transform:translateY(-5px);

    background:#fff0f5;

}

.banner-iconos{

    display:flex;

    justify-content:center;

    gap:35px;

    margin-top:40px;

    flex-wrap:wrap;

}

.icono-banner{

    background:rgba(255,255,255,.20);

    padding:18px 22px;

    border-radius:15px;

    backdrop-filter:blur(4px);

    font-size:18px;

}

@media(max-width:768px){

.banner{

padding:40px 20px;

}

.banner h2{

font-size:30px;

}

.banner p{

font-size:16px;

}

.banner-iconos{

gap:15px;

}

}