/* Importar tipografias para toda la plataforma */
@font-face {
    font-family: 'AvenirLTStd-Black';
    src: url('AvenirLTStd-Black.otf') format('truetype');
}
@font-face {
    font-family: 'AvenirLTStd-Book';
    src: url('AvenirLTStd-Book.otf') format('truetype');
}
@font-face {
    font-family: 'AvenirLTStd-Roman';
    src: url('AvenirLTStd-Roman.otf') format('truetype');
}

/* Variables */
:root {
    /* Colores version clara */
    --darkcolor1: white;
    --darkcolor2: rgb(243, 238, 238);
    --darkcolor3: #ffffff;
    --darkcolor4: black;
    --darkcolor5: white;
    --darkcolor6: rgb(219, 219, 219);
    --darkcolor7: rgb(247, 196, 196);
    --darkcolor8: rgb(223, 168, 168);
    --darkcolor9: rgb(241, 255, 230);
    --darkcolor10: rgb(193, 215, 175);
    --darkcolor11: rgb(26, 26, 26);
    --darkcolor12: rgb(219, 219, 219);;

    /* === TIPOGRAFÍA === */
    --font-800: 'AvenirLTStd-Black', sans-serif;
    --font-600: 'AvenirLTStd-Book', sans-serif;
    --font-400: 'AvenirLTStd-Roman', sans-serif;

    /* === Linea Separadora Color === */
    --LineaSeparadoraColor: #acacac87;

    /* === BASE (LIGHT MODE) === */
    --bg-1: #f5f7fb;   /* fondo general */
    --bg-2: #ffffff;   /* cards / panels */
    --bg-3: #eef2f7;   /* hover / bloques suaves */

    /* texto */
    --text-1: #111827; /* principal */
    --text-2: #4b5563; /* secundario */
    --text-3: #9ca3af; /* muted */

    /* bordes */
    --border: #e5e7eb;

    /* acentos */
    --primary: #2563eb;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* transición */
    --transition: 0.3s ease;
}

/* Variables tema oscuro */
[data-theme="dark"] {
    /* Colores version oscura */
    --darkcolor1: #111c28;
    --darkcolor2: #0b141b;
    --darkcolor3: #111827;
    --darkcolor4: white;
    --darkcolor5: white;
    --darkcolor6: #10171f;
    --darkcolor7: rgb(45, 24, 28);
    --darkcolor8: rgb(22, 14, 15);
    --darkcolor9: rgb(33, 45, 24);
    --darkcolor10: rgb(18, 24, 14);
    --darkcolor11: rgb(170 170 170);
    --darkcolor12: #344455;

    /* === Linea Separadora Color === */
    --LineaSeparadoraColor: #111827;

    --bg-1: #0b1220;
    --bg-2: #111827;
    --bg-3: #1f2937;

    --text-1: #f9fafb;
    --text-2: #d1d5db;
    --text-3: #9ca3af;

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

    --primary: #3b82f6;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    .custom-navbar{
        background: rgba(17, 24, 39, 0.85);
    }
}

/* Cambio de color del icono del menu en Celular*/
[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .navbar-toggler {
    border: 1px solid var(--border) !important;
}
[data-theme="light"] .navbar-toggler {
    border: 1px solid var(--border) !important; 
}

body{
    background: var(--bg-1);
    color: var(--text-1);
    font-family: var(--font-400);
    transition: background var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container-fluid{
    max-width: 1400px;
    margin: 0 auto;
}
.custom-navbar{
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), border var(--transition);
    backdrop-filter: blur(8px);
}
/* Por si se requiere mas fuerza al item seleccionado del navbar
 . *nav-link.active {
 background-color: rgba(255, 255, 255, 0.267);
 border-radius: 0.25rem;
 transition: background-color 0.3s ease;
 }
 */




.mensajeBienvenida {
    font-size: clamp(13px, 0.8vw, 20px);
    font-weight: 400;
    color: var(--darkcolor4);
    padding: 0.3em 0em;
    line-height: 1.5em;
    margin: 0;
}


.titleNavbar{
    color: var(--darkcolor4);
}
.nav-link.textLink{
    color: var(--text-2);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link.textLink:hover{
    color: var(--primary);
}

.nav-link.active{
    color: var(--primary) !important;
    font-weight: 600;
}
.img-Navbar{
    max-width: 6em;
    margin-right: 1em;
}

/*Login*/
.container_content {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    min-height: 80vh;       /* Asegura que ocupe toda la altura de la pantalla */
}

.container_form {
    width: 100%;
    max-width: 40%;
    background-color: var(--darkcolor3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Sombra suave */
    text-align: center; /* Centra texto y elementos inline */
    border-radius: 15px;
    padding: 2em;
    transition: background-color var(--transicion), color var(--transicion);
}





/* Espaciado entre campos */
/* SOLO MÓVIL */
@media (min-width: 850px) {
    .inputForm, .campo {
        margin-bottom: 10px;
    }
}

/* Inputs de los formularios */
[data-theme="dark"] .inputForm {
    background: var(--darkcolor1);
    border: 1px solid #2a3a4a;
    color: var(--darkcolor4);

    padding: 10px 12px;
    border-radius: 8px;

    font-size: 14px;
    width: 100%;

    transition: all 0.2s ease-in-out;
    
}
[data-theme="dark"] .inputForm:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
    color: var(--darkcolor4);
}


[data-theme="light"] .inputForm {
    background: #fbfcff;
    border: 1px solid #d7e5ff;
    color: #2d3748;

    padding: 10px 12px;    
    border-radius: 8px;

    font-size: 14px;
    width: 100%;

    font-weight: 400;
    outline: none;

    transition: all .25s ease;

    box-shadow:
        0 1px 2px rgba(0,0,0,.03),
        inset 0 1px 2px rgba(255,255,255,.8);
}
[data-theme="light"] .inputForm:focus {
    outline: none;

    border-color: #4da3ff;
    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(77,163,255,.12),
        0 4px 12px rgba(77,163,255,.08);

    color: var(--darkcolor4);

    transition: all .2s ease;
}



/* Query para móviles */
@media (max-width: 768px) {
    .inputForm{
        width: 100%;
    }
}
.error-text {
    color: red;
    margin-top: 0.4em;
    font-size: 0.9em;
}


[data-theme="dark"] .container_form {
    border: 1px solid #2a3a4a;
}
[data-theme="light"] .container_form {
    border: 0px solid;
}
.container_form form {
    width: 100%;
    max-width: 100%; /* o menos si lo quieres más angosto */
    margin: 0 auto;   /* Esto centra el formulario horizontalmente */
    text-align: center; /* Opcional: para que los labels/inputs no queden centrados */
}
/* Query para móviles */
@media (max-width: 768px) {
    .container_form {
        max-width: 80%;
    }
}

.divNotificaciones {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeSlideIn 1.2s ease-out forwards;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Animación de entrada */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.titleText{
    font-family: 'AvenirLTStd-Book';
    color: var(--darkcolor4);
    padding: 0.3em;
    font-weight: 600;
    font-size: 2.5em;
    line-height: 1em;
    transition: background-color var(--transicion), color var(--transicion);
}
.infoText{
    color: var(--text-2) !important;
    font-size: 0.9rem;
    margin: 6px 0 0 0;
    line-height: 1.4;
}
/* Query para móviles */
@media (max-width: 768px) {
    .titleText{
        font-size: 2em;
    }
}


/* Campos de formularios */
.labelInputs{
    color: var(--darkcolor4);
    padding: 0.3em 0em;
    transition: background-color var(--transicion), color var(--transicion);
}

/* Campos de filtros*/
.inputFilter{
    max-width: 100%;
    border-radius: 5px;
    border-style: none;
    background-color: var(--colorInputs);
    padding: 0.7em;
    color: var(--darkcolor4);
    transition: background-color var(--transicion), color var(--transicion);
}
/* Query para móviles */
@media (max-width: 768px) {
    .inputFilter{
        width: 100%; /* Usa todo el ancho del contenedor padre */
    }
}
.inputFilter:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
    color: var(--darkcolor4);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}


.buttonSendForm{
    border-style: none;
    padding: 0.7em;
    background-color: #2f6fdd;
    color: var(--darkcolor5);
    border-radius: 5px;
    transition: background-color 0.2s; /* Aplica la animación siempre */
}
.buttonSendForm:hover{
    background-color: #214fa0;
}

/*Icono de busqueda*/
.input-icon {
    position: relative;
}

.input-icon input {
    width: 100%;
    padding-right: 40px;
}

.input-icon i {
    position: absolute;
    right: 14px;
    top: 40%;
    transform: translateY(-50%);
    pointer-events: none;
}

/*Recuadro de sugerencias para las busqueads*/
    /* Lista de sugerencias */
    .suggestions-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--darkcolor1);
        /*border: 1px solid var(--darkcolor4);*/
        border-color: #4a90e2;
        border-radius: 8px;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        border-top: none;
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        display: none; /* Oculto por defecto */
    }

    /* Cada opción */
    .suggestions-list li {
        padding: 8px;
        cursor: pointer;
        font-size: 14px;
        color: var(--darkcolor4);
    }

    /* Hover en opciones */
    .suggestions-list li:hover {
        background-color: var(--darkcolor12);
    }

.containerTitlesTable{
    border-radius: 8px 8px 0px 0px;
    border-style: none;
    background-color: var(--darkcolor3);;
    padding: 0.7em;
    color: var(--darkcolor4);
    width: 100%;
}
.containerInfoTable{
    position: relative; /* Establece el contexto de posicionamiento */
    border-radius: 0px;
    border-style: none;
    background-color: var(--darkcolor3);;
    padding: 0.7em;
    color: var(--darkcolor4);
    width: 100%;
}

.containerInfoTable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2%; /* Comienza desde el 10% del ancho */
    width: 95%; /* El ancho del borde es el 80% del contenedor */
    height: 1px; /* Ajusta el grosor del borde */

    background-color: var(--colordivTable); /* Color del borde */
}
.containerInfoTable:hover {
    background-color: var(--darkcolor6);
    transition: background-color 0.2s; /* Aplica la animación siempre */
}
.containerInfoTable2{
    position: relative; /* Establece el contexto de posicionamiento */
    border-radius: 0px;
    border-style: none;
    background-color: var(--darkcolor7);
    padding: 0.7em;
    color: var(--darkcolor4);
    width: 100%;
}
.containerInfoTable2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2%; /* Comienza desde el 10% del ancho */
    width: 95%; /* El ancho del borde es el 80% del contenedor */
    height: 1px; /* Ajusta el grosor del borde */

    background-color: var(--colordivTable); /* Color del borde */
}
.containerInfoTable2:hover {
    background-color: var(--darkcolor8);
    transition: background-color 0.2s; /* Aplica la animación siempre */
}
.containerInfoTable3{
    position: relative; /* Establece el contexto de posicionamiento */
    border-radius: 0px;
    border-style: none;
    background-color: var(--darkcolor9);
    padding: 0.7em;
    color: var(--darkcolor4);
    width: 100%;
}
.containerInfoTable3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2%; /* Comienza desde el 10% del ancho */
    width: 95%; /* El ancho del borde es el 80% del contenedor */
    height: 1px; /* Ajusta el grosor del borde */

    background-color: var(--colordivTable); /* Color del borde */
}
.containerInfoTable3:hover {
    background-color: var(--darkcolor10);
    transition: background-color 0.2s; /* Aplica la animación siempre */
}

.titlesTable{
    color: var(--darkcolor4);
    padding: 1.3em 0em 0em 0em;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1em;
}
.infoTable{
    color: var(--darkcolor4);
    padding: 0.3em 0em;
    font-size: 1em;
    line-height: 1.5em;
    margin: 0; /* Elimina margen por defecto del <p> */
}


.containerFilter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* 🔥 centra horizontalmente */
}

/*Opciones*/
.divOptions{
    display: flex;
    justify-content: center;
}
.botonEditar, .botonEliminar, .botonExpediente, .botonCrear{
    font-family: var(--font400);
    color: var(--darkcolor5) !important;
    font-weight: 400;
    font-size: 0.8em;
    margin-left: 0.5em;
    text-decoration: none;
    border-style: none;
    border-radius: 4px;
    padding: 8px 12px;
    transition: background-color 0.3s ease-in-out;
}
.botonEditar{
    background-color: #007bff;
}
.botonEditar:hover{
    background-color: #0f3b83;
}
.botonEliminar{
    background-color: #ea3f3f;
    padding: 0.5em 1.2em;
}
.botonEliminar:hover{
    background-color: #830f0f;
}
.botonExpediente{
    background-color: #FF9800;
}
.botonExpediente:hover{
    background-color: #4d2701;
}
.botonCrear{
    background-color: #4CAF50;
}
.botonCrear:hover{
    background-color: #123113;
}


.divData {
    display: flex;
    align-items: center;   /* Vertical */
    justify-content: center; /* Horizontal */
    word-break: break-all;
}

/*Footer*/
.containerAll{
    display: grid;
    min-height: 100vh; /* Hace que el contenedor ocupe toda la altura de la pantalla */
    grid-template-rows: auto 1fr auto; /* Tres filas: header, main, footer */
}


.espaciadoFooter{
    background-color: var(--darkcolor1);;
    padding: 1em;
    transition: background-color var(--transicion), color var(--transicion);
}
footer {
    background-color: var(--darkcolor2);
    color: var(--darkcolor4);
    text-align: center;
    padding: 10px 0;
    position: relative;
    transition: background-color var(--transicion), color var(--transicion);
}
.textoFooter{
    color: var(--darkcolor4) ;
    font-weight: 400;
    font-size: 0.8em;
    transition: background-color var(--transicion), color var(--transicion);
}


footer.bg-gradient {
    background: var(--gradientFooter) !important;
}


.errorlist {
    color: #dc3545;           /* rojo tipo Bootstrap */
    font-size: 14px;
    list-style: none;         /* quita los puntos */
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 0;
}

.errorlist li {
    background-color: #ffe6e6;
    border-left: 4px solid #dc3545;
    padding: 6px 10px;
    border-radius: 4px;
}


.tituloYAcciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
}
/* Móvil */
@media (max-width: 600px) {
    .tituloYAcciones {
        flex-direction: column;
        align-items: flex-start; /* título arriba, botón abajo */
    }
}
/* Contenedor */
.filtrosBox {
    max-width: 95%;
}
/* Grid del formulario */
.formFiltros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: end; /* ← esta línea */
}
/* Campo individual */
.campo {
    display: flex;
    flex-direction: column;
}
/* Labels */
.campo label {
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--darkcolor11);
}
/* Inputs (los que renderiza Django) */
.campo input,
.campo select {
    font-size: 13px;
    overflow-x: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;    
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
/* Campo que ocupa toda la fila */
.campo-full {
    grid-column: span 2;
}
/* Botón */
.acciones {
    display: flex;
    align-items: flex-end;
}
.acciones button {
    width: 100%;
}
/* Tablet */
@media (max-width: 1024px) {
    .formFiltros {
        grid-template-columns: repeat(3, 1fr);
    }
    .campo-full {
        grid-column: span 3;
    }
}
/* Móvil */
@media (max-width: 600px) {
    .formFiltros {
        grid-template-columns: 1fr;
    }
    .campo-full {
        grid-column: span 1;
    }
    .acciones {
        margin-top: 5px;
    }
}


.textCardMovil{
    font-family: var(--font600);
    color: var(--darkcolor4);
}
/* BOTÓN VER MÁS */
.botonVerMas {
    background: #1f2d3a;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 5px;
    transition: 0.2s;
}
.botonVerMas:hover {
    background: #344455;
}

/* ICONO ROTACIÓN */
.botonVerMas i {
    transition: transform 0.3s;
    display: inline-block;
}
.botonVerMas.activo i {
    transform: rotate(180deg);
}

/* FILA DETALLE */
.filaDetalle {
    display: none;
    background: var(--bg-2);
}

/* TD DEL DETALLE — crítico */
.filaDetalle td {
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    max-width: 0;
}

/* CONTENIDO DETALLE */
.contenidoDetalle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .col-programacion,
    .col-horas,
    .col-torre {
        display: none;
    }

}

/* CONTENIDO DETALLE TABLET */
@media (min-width: 601px) {
    .contenidoDetalle {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .contenidoDetalle {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1200px) {
    .contenidoDetalle {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ITEMS */
.detalleItem {
    color: var(--darkcolor4) !important;
    font-size: 1em;
    color: #ddd;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}


.detalleTablet {
    display: none;
}

@media (max-width: 1024px) {
    .detalleTablet {
        display: block;
    }
}


/* Tabla General */
.tablaDatos {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.tablaDatos th,
.tablaDatos td {
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    width: var(--w, auto); /* 👈 CLAVE DEL PATRÓN */
}

/* =========================
 *  HEADERS Y CELDAS
 = *======================== */
.tablaDatos th {
    padding: 1.3em 6px 0.5em 6px;
    color: var(--darkcolor4);
    font-weight: 600;
    font-size: 1.1em;
    white-space: nowrap;
}

.tablaDatos td {
    padding: 6px 0;
    color: var(--darkcolor4);
    font-size: 0.8em;
    line-height: 1.5em;
}
.tablaDatos td:not(.texto-largo) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.infoPaginacion {
    color: var(--darkcolor4);
    font-weight: 400;
    font-size: 1em;
    white-space: nowrap;
    font-style: italic;
}
/* =========================
 *  COLORES POR ESTADO
 = *======================== */
.infoTableInProduction {
    background-color: var(--darkcolor3);
}
.infoTableInProduction:hover {
    background-color: var(--darkcolor6);
    transition: background-color 0.2s;
}

.infoTableToBeDone {
    background-color: var(--darkcolor7);
}
.infoTableToBeDone:hover {
    background-color: var(--darkcolor8);
    transition: background-color 0.2s;
}

.infoTableComplete {
    background-color: var(--darkcolor9);
}
.infoTableComplete:hover {
    background-color: var(--darkcolor10);
    transition: background-color 0.2s;
}


.lineaSeparadoraFilas {
    border-top: 1px solid var(--border);
}



/* TABLE DATA */
.tableData {
    width: 95%;
    max-width: 95%;
    overflow-x: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Por defecto (PC): botones en fila, ocultos en detalle */
.botonesAccionDetalle {
    display: none;
}

/* Tablet: ocultar en fila, mostrar en detalle */
@media (max-width: 1024px) {
    .botonesAccion {
        display: none;
    }

    .botonesAccionDetalle {
        display: block;
    }
}

/* VISTA CELULAR */
/* 🔥 CONTROL DE VISTAS */
.vistaCardsMobile {
    display: none;
}

/* SOLO MÓVIL */
@media (max-width: 850px) {
    .tableData {
        display: none; /* ocultar tabla */
    }

    .vistaCardsMobile {
        display: block;
        padding: 10px;
    }
}

/* CARD */
.cardMobile {
    background-color: var(--bg-2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* HEADER */
.cardMobileHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cardMobileFecha {
    font-weight: 600;
    font-size: 14px;
}

/* ESTADOS */
.estadoPendiente {
    color: #facc15;
}

.estadoProduccion {
    color: #60a5fa;
}

.estadoCompleto {
    color: #4ade80;
}

/* BODY */
.cardMobileBody p {
    margin: 2px 0;
    font-size: 13px;
}

/* HORAS */
.cardMobileHoras {
    margin: 8px 0;
    font-size: 13px;
}

/* ACCIONES */
.cardMobileAcciones {
    margin-top: 8px;
}

/* DETALLE */
.cardMobileDetalle summary {
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 6px;
}

/* CONTENIDO EXTRA */
.cardMobileExtra {
    background: var(--bg-2);
    padding: 8px;
    border-radius: 8px;
    font-size: 13px;
}

/* BOTONES */
.cardMobileBotones {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.cardMobileBotones button {
    flex: 1;
}

/* VACÍO */
.cardMobileVacia {
    text-align: center;
    padding: 20px;
    color: #aaa;
}







.footer-custom{
    background: linear-gradient(180deg, #2E4B85 0%, #01A0E2 100%);
    border-top: 1px solid var(--border);
    color: #ffffff;
    margin-top: 60px;
}
[data-theme="dark"] .footer-custom{
    background: linear-gradient(
        180deg,
        #0f172a 0%,
        #111827 100%
    );
    border-top: 1px solid var(--border);
    color: var(--text-2);
}
.footer-custom{
    box-shadow: 0 -10px 30px rgba(0,0,0,0.08);
}
.footer-custom h5{
    font-weight: 700;
}

.footer-custom a{
    color: #d1d5db;
    transition: color 0.2s ease;
}

.footer-custom a:hover{
    color: var(--primary);
}