html {
  font-size: calc(14px * var(--mw-font-scale, 1));
}

@media (min-width: 768px) {
  html {
    font-size: calc(16px * var(--mw-font-scale, 1));
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Evitar que el logo deforme el navbar */
.navbar-brand .logo-marena {
    height: 28px; /* el mismo valor de la etiqueta <img> */
    width: auto; /* mantiene proporci�n */
    object-fit: contain; /* por si cambias el alto */
}

/* Opcional: afinado para pantallas peque�as */
@media (max-width: 576px) {
    .navbar-brand .logo-marena {
        height: 24px;
    }
}

/* M�s separaci�n horizontal entre columnas de esta tabla */
.table-spacious > :not(caption) > * > th,
.table-spacious > :not(caption) > * > td {
    padding-left: 1.25rem; /* antes ~.75rem con table-sm */
    padding-right: 1.25rem;
}

/* Si quieres un pel�n m�s en pantallas grandes */
@media (min-width: 992px) {
    .table-spacious > :not(caption) > * > th,
    .table-spacious > :not(caption) > * > td {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.tabla-datos {
    width: 100%; /* Hace que la tabla use todo el ancho disponible */
    border-collapse: collapse;
    table-layout: auto; /* Usa 'fixed' si hay muchas columnas y quieres ancho estable */
}

    .tabla-datos th, .tabla-datos td {
        /* Evita l�mites de ancho escondidos por estilos globales */
        max-width: none;
        white-space: nowrap; /* Pon 'normal' si prefieres que corte l�neas */
    }

/* Elimina l�mites de ancho comunes que �encajan� el contenido al centro */
html, body, header, footer, main, .content, .body-content, .main-content, .container {
    max-width: none !important;
    width: 100% !important;
}

/* Asegura que cualquier fila/columna ocupe el 100% si hay Bootstrap */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col, .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Por si hay una clase intermedia que envuelve tu contenido (aj�stala si existe) */
.wrapper, .page, .page-content, .tabla-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* Las tablas realmente a todo lo ancho */
table, .table, .table-responsive {
    width: 100% !important;
}
/* Centrado y separaci�n natural entre botones */
.col-accion {
    display: flex;
    justify-content: center; /* centrado horizontal */
    align-items: center; /* centrado vertical */
    gap: 8px; /* espacio entre Editar y Eliminar */
}

/* ===== MODO OSCURO (boton de la barra superior) ===== */
/* Bootstrap 5.3 themea solo cards, modales, formularios, tablas, dropdowns...
   Aqui ajustamos los elementos con color fijo: la barra y los fondos claros. */
[data-bs-theme="dark"] .navbar.bg-light {
    background-color: #11161c !important;
    border-bottom: 1px solid #2a323d;
}
[data-bs-theme="dark"] .bg-light {
    background-color: #232b35 !important;
}
[data-bs-theme="dark"] .bg-white {
    background-color: #1f262e !important;
}
/* Boton del tema */
#btnTema i { transition: transform .2s ease; }
#btnTema:hover i { transform: rotate(20deg); }

/* ===== BARRA SUPERIOR PEGAJOSA (acompana al bajar) ===== */
/* La barra debe quedar por encima de las cabeceras de tabla que tambien son
   sticky (Bootstrap les da z-index 1020). */
.navbar.sticky-top { z-index: 1030; }

/* Las cabeceras de tabla "pegajosas" se colocan justo debajo de la barra
   superior (~56px de alto) para que no queden ocultas tras ella al desplazarse. */
thead.sticky-top,
thead.sticky-top th,
thead[style*="sticky"],
thead[style*="sticky"] th { top: 56px !important; }

/* Tarjetas del menu principal (Home/Index) */
[data-bs-theme="dark"] .card-btn {
    background-color: #1f262e !important;
    border-color: #2a323d !important;
}
[data-bs-theme="dark"] .card-btn:hover {
    background-color: #2a323d !important;
}
[data-bs-theme="dark"] .card-title {
    color: #e9ecef !important;
}
[data-bs-theme="dark"] .card-sub {
    color: #adb5bd !important;
}

/* ===== TEXTOS OSCUROS EN MODO OSCURO =====
   El texto marcado como oscuro (clases .text-dark / .text-black) debe volverse
   legible (claro) cuando el fondo pasa a oscuro. Se EXCEPTÚAN los fondos de
   color fijo que siguen siendo claros en modo oscuro (avisos amarillos / info):
   ahí el texto debe seguir siendo oscuro. */
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black {
    color: var(--bs-body-color) !important;
}
/* Excepciones: texto oscuro sobre fondo claro fijo (badges/avisos) -> sigue oscuro */
[data-bs-theme="dark"] .bg-warning.text-dark,
[data-bs-theme="dark"] .bg-info.text-dark,
[data-bs-theme="dark"] .bg-warning .text-dark,
[data-bs-theme="dark"] .bg-info .text-dark,
[data-bs-theme="dark"] .alert-warning .text-dark,
[data-bs-theme="dark"] .alert-info .text-dark {
    color: #212529 !important;
}

/* Filas de tabla con color de Bootstrap (table-primary/success/danger/info/warning):
   su fondo es un tono CLARO fijo también en modo oscuro. El texto atenuado
   (text-muted / text-secondary) se aclararía y desaparecería sobre ese fondo claro,
   así que aquí lo mantenemos oscuro (conservando el matiz "atenuado"). Los badges
   no se tocan: llevan su propio fondo de color. */
[data-bs-theme="dark"] .table-primary .text-muted,
[data-bs-theme="dark"] .table-primary .text-secondary,
[data-bs-theme="dark"] .table-success .text-muted,
[data-bs-theme="dark"] .table-success .text-secondary,
[data-bs-theme="dark"] .table-danger .text-muted,
[data-bs-theme="dark"] .table-danger .text-secondary,
[data-bs-theme="dark"] .table-info .text-muted,
[data-bs-theme="dark"] .table-info .text-secondary,
[data-bs-theme="dark"] .table-warning .text-muted,
[data-bs-theme="dark"] .table-warning .text-secondary {
    color: rgba(33, 37, 41, .75) !important;
}

/* ===== NOTIFICACIONES TOAST ===== */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 360px;
    pointer-events: none;
}

.toast-container .toast {
    pointer-events: auto;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    min-width: 280px;
    animation: slideInRight 0.3s ease-out;
}

.toast-container .toast.hide {
    animation: slideOutRight 0.3s ease-out forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

/* Dark mode para toasts */
[data-bs-theme="dark"] .toast-container .toast {
    background-color: #1f262e;
    border-color: #2a323d;
}

.toast-body {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

/* Responsive: en móviles, ancho completo menos márgenes */
@media (max-width: 576px) {
    .toast-container {
        max-width: calc(100% - 2rem);
        right: 1rem;
        left: 1rem;
    }

    .toast-container .toast {
        min-width: unset;
    }
}

/* ============================================================
   PULIDO VISUAL (2026-07): micro-animaciones, esqueletos de
   carga, estados vacíos y refinado del modo oscuro.
   ============================================================ */

/* ---- Micro-animaciones / transiciones suaves ---- */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
a { transition: color .12s ease; }
.form-control, .form-select { transition: border-color .15s ease, box-shadow .15s ease; }
.table > tbody > tr { transition: background-color .12s ease; }
.card { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.list-group-item, .nav-link, .badge, .alert, .dropdown-item { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

/* Aparición suave del contenido al cargar cada página */
.main-container { animation: mw-fade-in .28s ease both; }
@keyframes mw-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Transición suave al cambiar de tema claro/oscuro (sin "flash" brusco) */
body, .navbar, .card, .table, .modal-content, .form-control, .form-select,
.list-group-item, .dropdown-menu { transition: background-color .25s ease, color .2s ease, border-color .25s ease; }

/* ---- Esqueletos de carga (skeletons) — usar en vez de spinner-border ---- */
:root { --mw-skel: #e6eaf0; --mw-skel-shine: rgba(255,255,255,.65); }
[data-bs-theme="dark"] { --mw-skel: #2a323d; --mw-skel-shine: rgba(255,255,255,.07); }
.skeleton { position: relative; overflow: hidden; background: var(--mw-skel); border-radius: 6px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--mw-skel-shine), transparent); animation: mw-shimmer 1.3s infinite; }
@keyframes mw-shimmer { 100% { transform: translateX(100%); } }
.skeleton-line { height: .85rem; margin: .5rem 0; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; }
.skeleton-circle { border-radius: 50%; width: 2.5rem; height: 2.5rem; }
.skeleton-btn { height: 2.2rem; width: 7rem; border-radius: 8px; }
.skeleton-row { display: flex; gap: 1rem; align-items: center; padding: .55rem 0; }
.skeleton-row > .skeleton { flex: 1; height: 1rem; }

/* ---- Estados vacíos (sin datos): icono amable + mensaje ---- */
.empty-state { text-align: center; padding: 2.75rem 1rem; color: var(--bs-secondary-color, #6c757d); }
.empty-state .es-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--bs-tertiary-bg, #f1f3f5); color: var(--bs-secondary-color, #8a97a8); }
.empty-state .es-icon i { font-size: 2rem; line-height: 1; }
.empty-state h6 { margin: 0 0 .35rem; font-weight: 700; color: var(--bs-body-color); font-size: 1.02rem; }
.empty-state p { margin: 0 auto; max-width: 42ch; font-size: .9rem; }
.empty-state .es-actions { margin-top: 1.1rem; }

/* ---- Refinado del modo oscuro ---- */
[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.35) !important; }
[data-bs-theme="dark"] .shadow { box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }
[data-bs-theme="dark"] .border { border-color: #2a323d !important; }
[data-bs-theme="dark"] .text-muted { color: #93a1b3 !important; }
[data-bs-theme="dark"] .empty-state .es-icon { background: #1f2732; color: #8a97a8; }
/* Barra de desplazamiento discreta (ambos temas) */
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #c2ccd8; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9b6c4; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a434f; border: 3px solid transparent; background-clip: content-box; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5563; border: 3px solid transparent; background-clip: content-box; }

/* ---- Respeto a "reducir movimiento" del sistema ---- */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}