:root {
    /* tema oscuro por defecto */
    --bg: #0f172a;
    --card: #111827;
    --muted: #94a3b8;
    --search-bg: #d8d9da;
    --text: #ffffff;
    --accent: #22d3ee;
    --accent-2: #06b6d4;
    --ring: rgba(34, 211, 238, .35);
    --radius: 5px;
    --bg-search-btn: rgba(83, 95, 116, 0.35);
    --card-papper-color: skyblue;
    --multiply: white;

}

body.light-mode {
    --bg: #f9fafb;
    /* gris muy claro */
    --card: #ffffff;
    /* fondo tarjetas */
    --muted: #6b7280;
    /* gris medio */
    --text: #1f2937;
    /* gris oscuro */
    --accent: #074752;
    /* cyan */
    --accent-2: #023c4a;
    --ring: rgba(5, 69, 81, 0.25);
    /* --bg-search-btn: rgba(136, 212, 217, 0.35); */
    --card-papper-color: rgb(12, 140, 203);
    --multiply: black;
}


* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background: var(--bg);
    background-repeat: no-repeat;
    color: var(--text);
    margin: 0;
    padding: 24px 16px;
    /* background: linear-gradient(180deg, #0b1220, #0b1326); */
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.offcanvas {
    background: var(--bg);
    background-repeat: no-repeat;
    color: var(--text);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

/* —— Título —— */
#tittle_container {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

#tittle_container h1 {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0;
    color: var(--text);
}

/* —— Tarjeta de filtros —— */
#search_container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    margin: 0 auto 20px auto;
    /* width: min(1100px, 100%); */
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--text);
    ;
    border-radius: var(--radius);
    padding: 16px;
}

#tittle_search,
.journal_search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    width: 100%;
}

#search_container label {
    font-size: .85rem;
    color: var(--muted);
}

#search_container input[type="text"] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius);
    border: 1px solid var(--text);
    background: var(--bg);
    color: var(--text);
    outline: none;
    /* transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; */
}



.choices__inner,
.choices__list {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-height: 40px;
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid var(--text, #111);
    background: var(--bg, #fff) !important;
    color: var(--text, #111) !important;
    /* z-index: 0 !important; */
    text-align: center !important;
    /* centra el texto */
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 1px;
    /* por si Choices las hace flex */

}

.choices__item {
    width: 30% !important;
    min-width: 200px !important;
    /* z-index: 3 !important; */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    min-height: 40px;
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid var(--text, #111);
    background: var(--bg, #fff) !important;
    color: var(--text, #111) !important;
}

#more_written {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap;
    align-content: flex-start;
}

#pills_search {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
}

.choices__list {
    border: 0 !important;
}

.is-active.choices__list .choices__list {
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
}

.choices__list.choices__list--dropdown.is-active {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
}

.is-active.choices__list {
    margin-top: 0;
}

.choices__item--selectable {
    margin-top: 3px !important;
}


.choices__input {
    border: 1px solid var(--text, #111);
    background: var(--bg, #fff) !important;
    color: var(--text, #111) !important;
    border: 0 !important;
}

.choices__button {
    border: 0 !important;
    width: 20% !important;
    min-width: 20px !important;
    background-size: min(100%, 20px) auto !important;
}

/* Botón Buscar */

.toggle-body {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-search-btn);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease;
}
.toggle-body.select{
    background: color-mix(in srgb, var(--bg-search-btn) 80%, var(--multiply) );
}

.nav-link {
    display: inline-flex;
    align-items: center;
    /* centra verticalmente el contenido */
    justify-content: center;
    /* centra horizontalmente */
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: var(--radius);
    background: var(--bg-search-btn);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease;
    line-height: 1;
    /* evita desviaciones por line-height */
}

#search:hover,
#toggle-body:hover {
    filter: brightness(1.05);
}

#search:active {
    transform: translateY(1px);
}

/* —— Contenedor tabla —— */
#table_container {
    display: flex;
    justify-content: flex-start !important;
    width: 100%;
    background-repeat: no-repeat;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-container {
    /* width: min(1100px, 100%); */
    background: var(--bg);
    color: var(--text);
    border: 1px solid;
    border-radius: var(--radius);
    padding: 12px;
    overflow-x: auto;
    /* fallback responsive si no usas el plugin Responsive */
}

#table_wrapper {
    width: 100% !important;
    /* fallback responsive si no usas el plugin Responsive */
}

/* —— Tabla borderless —— */
#table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 700px;
    /* Fuerza scroll si pantalla es más pequeña */
    table-layout: auto;

}

/* Sin bordes en celdas */
#table th,
#table td {
    border: none;
    padding: 12px 10px;
    vertical-align: middle;
    background: var(--bg);
    color: var(--text);
    font-size: .95rem;
    white-space: normal;

    /* color-mix(in srgb, red 12%, transparent); */
    /* word-break: break-word; */
}



a {
    background: var(--bg);
    color: var(--text) !important;
}

.card_tittle,
.card_text,
.card_body,
.card {
    background: var(--bg) !important;
    color: var(--text) !important;
    background-color: var(--bg) !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center;
}

#cards_container {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin-top: 20px;

}

#cardsBody {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;

}

.card {
    border: 1px solid var(--text) !important;
    border-radius: var(--radius) !important;

}

@media (orientation: landscape) {
    .card {
        max-width: 30%;
        min-width: 30%;
    }
}

@media (orientation: portrait) {
    .card {
        max-width: 100%;
        min-width: 100%;
    }
}

/* Cabecera sutil */
#table thead th {
    font-weight: 700;
    text-align: center;
    background: var(--bg);
    background-repeat: no-repeat;
    background-position: center right;
    color: var(--text);
    /* header fijo al hacer scroll horizontal */
    top: 0;
    z-index: 1;
}

/* Filas con efecto hover */
#table tbody tr {
    border-radius: var(--radius);
}

#table tbody tr:hover {
    background: var(--bg);

    background-repeat: no-repeat;
    color: var(--text);
}

/* Ocultar columnas con clase utilitaria */
.d-none {
    display: none !important;
}

/* —— DataTables overrides (sin bordes y con estética) —— */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--muted);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--bg);
    background: var(--bg);
    background-repeat: no-repeat;
    color: var(--text);
    color: #fff;
    border-radius: var(--radius);
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--muted);
}

/* —— Responsive —— */
@media (max-width: 900px) {
    #search_container {
        grid-template-columns: 1fr;
    }

    #search {
        width: 100%;
    }

    .btn-text {
        display: none;
    }
}

#top_controls {
    width: 100%;
    margin: 0 auto 12px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#ligth_mode {
    position: static;
    margin-right: 8px;
    z-index: 1000;
}

#toggle-theme {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text);
    /* usa el color del tema actual */
    /* transition: transform 0.2s ease, color 0.2s ease; */
}

#toggle-theme:hover {
    transform: scale(1.0);
    color: var(--accent);
}


.btn-close {
    filter: none !important;
    background-color: transparent !important;
}

body.light-mode .btn-close,
body.light-mode .offcanvas .btn-close {
    /* en tema claro mostrar X oscura */
    filter: none !important;
    color: var(--bg) !important;
}

body:not(.light-mode) .btn-close,
body:not(.light-mode) .offcanvas .btn-close,
.offcanvas .btn-close {
    /* en tema oscuro mostrar X blanca */
    filter: invert(1) saturate(2) brightness(1.2) !important;
    color: var(--bg) !important;
}

/* Posicionamiento y escala para el botón de Google Sign-In */
.g_id_signin {
    position: relative;
    margin-left: 4px;
    transform-origin: center;
    transform: scale(0.85);
    z-index: 1100;
}

/* Ajuste responsivo: mantener espacio con el toggle y reducir tamaño en pantallas muy pequeñas */
@media (max-width: 480px) {
    #top_controls {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    .g_id_signin {
        transform: scale(0.7);
        margin-left: 0;
        align-self: flex-end;
    }

    #ligth_mode {
        align-self: flex-end;
    }
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.45));
    color: #fff;
    z-index: 2000;
    transition: opacity .4s ease, visibility .4s ease;
}

.loading-overlay .loading-content {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    backdrop-filter: blur(3px);
}

.loading-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}

.loading-text {
    font-weight: 700;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hidden state */
.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
#search,#btn-menu,#btn-logout{
    align-self: flex-start;
    border-radius: var(--radius);
}
.card-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.card-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.card-title {
    color: var(--card-papper-color);
    text-decoration: none;
}
.card-text{
    color: color-mix(in srgb, var(--text)  80%, black);
    text-decoration: none;
}
.pill {
    color: var(--text);
    border-color: var(--text);
}