/* ============================================================
   Estilos complementarios al template AspStudio
   Solo añadimos lo que NO existe en el template.
   ============================================================ */

/* Logo en header */
.brand-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--bs-theme);
    color: var(--bs-theme-color);
    margin-right: 8px;
}
.brand-img-text { font-weight: 800; font-size: 14px; }
.brand-text { font-weight: 600; letter-spacing: .3px; }
.brand-text b { font-weight: 800; }

/* ===== Stat tile (dashboard) ===== */
.stat-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}
.stat-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}
.stat-tile-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .7;
    font-weight: 600;
}

/* Bg helpers suaves */
.bg-soft-blue   { background: rgba(52,143,226,.12); color: #348fe2; }
.bg-soft-teal   { background: rgba(0,172,193,.12);  color: #00acc1; }
.bg-soft-orange { background: rgba(244,138,0,.12);  color: #f48a00; }
.bg-soft-red    { background: rgba(255,91,87,.12);  color: #ff5b57; }
.bg-soft-green  { background: rgba(50,177,108,.12); color: #32b16c; }
.bg-soft-purple { background: rgba(114,124,245,.12); color: #727cf5; }

/* Filter card sutil */
.filter-card { background: rgba(var(--bs-body-color-rgb), .015); }

/* Botones de acción compactos en tablas */
.btn-icon { padding: .25rem .5rem; line-height: 1; }

/* Header de tabla siguiendo estética AspStudio */
.table-aspstudio thead th {
    background: rgba(var(--bs-body-color-rgb), .04);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: rgba(var(--bs-body-color-rgb), .65);
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .15);
    white-space: nowrap;
    padding: .65rem .75rem;
}
.table-aspstudio tbody td {
    font-size: 13px;
    padding: .55rem .75rem;
    vertical-align: middle;
}
.table-aspstudio tbody tr.table-active {
    background-color: rgba(var(--bs-theme-rgb), .12);
}

/* Fila duplicada (resaltado suave en lugar de table-warning fuerte) */
.row-duplicada > td {
    background-color: rgba(255, 193, 7, .08) !important;
}

/* Pequeños refuerzos para legibilidad */
.alert { border: 0; }

/* Atajos del control de rango de fechas (estilo Analytics) */
.rango-presets {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .6rem .75rem;
    border-top: 1px solid rgba(0, 0, 0, .075);
}
.flatpickr-calendar.rango-presets-cal { width: auto; }

/* ============================================================
   Shell con iframe (navegacion sin recargar el menu)
   ============================================================ */

/* En el SHELL: el iframe llena el area de contenido (bajo header,
   a la derecha del sidebar), a pantalla completa y sin padding. */
body.app-shell #content {
    position: fixed;
    top: var(--bs-app-header-height, 3.75rem);
    left: var(--bs-app-sidebar-width, 15rem);
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
}
@media (max-width: 991.98px) {
    body.app-shell #content { left: 0; }
}
#appFrame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bs-body-bg);
}

/* Paginas internas cargadas DENTRO del iframe: ocultan su propio
   header/sidebar (el shell ya los muestra) y usan todo el ancho. */
html.embedded #header,
html.embedded #sidebar { display: none !important; }
html.embedded .app-content { margin-left: 0 !important; }

/* TomSelect dentro de modales: el desplegable usa dropdownParent='body'
   (para no recortarse), pero el z-index por defecto de tom-select (~10)
   queda DEBAJO del modal de Bootstrap (~1055) y las opciones se ven
   vacias. Lo subimos por encima del modal. */
.ts-dropdown { z-index: 1060; }