.form-control-auto {
    height: auto !important;
}
div.dataTables_wrapper div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -26px;
    text-align: center;
    padding: 1em 0;
    background: #d9e4ed;
}

/* =========================================================
   IFITEC Theme - Bootstrap 5.3 friendly
   Laravel 12
   ========================================================= */

:root {
    --if-sidebar: #3f4d73;
    --if-sidebar-hover: #4b5b86;
    --if-sidebar-active: #58709a;
    --if-sidebar-text: #eef3fb;

    --if-topbar: #7faec0;
    --if-topbar-dark: #6ea0b3;

    --if-page-bg: #eef2f5;
    --if-card-bg: #f4f5f7;
    --if-card-head: #dfe5ec;
    --if-card-border: #d6dde6;

    --if-text: #41516b;
    --if-text-soft: #74839a;
    --if-heading: #2f4670;

    --if-primary: #6fa8bd;
    --if-primary-hover: #5d98ae;
    --if-primary-rgb: 111, 168, 189;

    --if-success: #76b39d;
    --if-warning: #d7b56d;
    --if-danger: #cb7e7e;

    --if-table-head: #eef1f4;
    --if-table-border: #e1e6ec;
    --if-input-bg: #ffffff;
    --if-input-border: #cfd8e3;

    --if-shadow-sm: 0 2px 10px rgba(45, 67, 95, 0.08);
    --if-shadow-md: 0 8px 24px rgba(45, 67, 95, 0.12);

    --bs-body-bg: var(--if-page-bg);
    --bs-body-color: var(--if-text);
    --bs-primary: var(--if-primary);
    --bs-primary-rgb: var(--if-primary-rgb);
    --bs-border-color: var(--if-card-border);
    --bs-border-radius: 0.7rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-box-shadow-sm: var(--if-shadow-sm);
    --bs-box-shadow: var(--if-shadow-md);
    --bs-font-sans-serif:
        "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   Base
   ========================================================= */
html,
body {
    height: 100%;
}

body {
    background: var(--if-page-bg);
    color: var(--if-text);
    font-size: 0.95rem;
    letter-spacing: 0.1px;
}

a {
    color: #456d9b;
    text-decoration: none;
}

a:hover {
    color: #355981;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--if-heading);
    font-weight: 600;
}

.small,
small {
    color: var(--if-text-soft);
}

/* scrollbar sutil */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: #bcc8d6;
    border-radius: 999px;
}
*::-webkit-scrollbar-track {
    background: #edf1f5;
}

/* =========================================================
   Layout principal
   ========================================================= */
.app-layout {
    min-height: 100vh;
    display: flex;
}

.app-sidebar {
    width: 250px;
    background: var(--if-sidebar);
    color: var(--if-sidebar-text);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 20px rgba(37, 52, 78, 0.14);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    min-height: 112px;
    background: linear-gradient(
        180deg,
        var(--if-topbar) 0%,
        var(--if-topbar) 100%
    );
    color: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-content {
    padding: 1.5rem;
    margin-top: -1.5rem; /* ayuda a que el panel se “meta” bajo el header */
}

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar-brand {
    padding: 1.2rem 1rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-brand img {
    max-width: 72px;
    margin-bottom: 0.5rem;
}

.sidebar-brand .brand-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.sidebar-brand .brand-version {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
}

.sidebar-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #d5e0ef;
    background: rgba(173, 214, 224, 0.45);
    padding: 0.75rem 1rem;
    letter-spacing: 0.03em;
    margin-top: 0.75rem;
}

.sidebar-nav {
    padding: 0.5rem 0;
}

.sidebar-nav .nav-link {
    color: var(--if-sidebar-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    margin: 0.1rem 0.5rem;
    border-radius: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link svg {
    width: 1rem;
    min-width: 1rem;
    opacity: 0.95;
}

.sidebar-nav .nav-link:hover {
    background: var(--if-sidebar-hover);
    color: #fff;
    transform: translateX(2px);
}

.sidebar-nav .nav-link.active {
    background: rgba(151, 201, 214, 0.18);
    color: #bfe5ef;
    font-weight: 600;
    position: relative;
}

.sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 20%;
    bottom: 20%;
    width: 4px;
    border-radius: 999px;
    background: #a9dce9;
}

.sidebar-nav .nav-link .nav-text {
    line-height: 1.2;
}

.sidebar-nav .nav-item + .nav-item {
    margin-top: 0.1rem;
}

/* Submenus */
.sidebar-nav .collapse .nav-link,
.sidebar-nav .collapsing .nav-link {
    padding-left: 2.6rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86);
}

/* =========================================================
   Topbar
   ========================================================= */
.topbar-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.topbar-icon-btn {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* =========================================================
   Cards / paneles
   ========================================================= */
.content-panel,
.card.if-card {
    background: var(--if-card-bg);
    border: 1px solid var(--if-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--if-shadow-sm);
    overflow: hidden;
}

.content-panel-header,
.card.if-card .card-header {
    background: var(--if-card-head);
    border-bottom: 1px solid var(--if-card-border);
    padding: 1rem 1.25rem;
    color: var(--if-heading);
    font-weight: 700;
}

.content-panel-body,
.card.if-card .card-body {
    background: rgba(255, 255, 255, 0.45);
    padding: 1.25rem;
}

.section-card {
    background: #fff;
    border: 1px solid var(--if-card-border);
    border-radius: 0.9rem;
    box-shadow: var(--if-shadow-sm);
}

/* =========================================================
   Botones
   ========================================================= */
.btn {
    font-weight: 500;
    border-radius: 0.65rem;
    padding: 0.5rem 0.95rem;
    box-shadow: none;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--if-primary-rgb), 0.18);
}

.btn-primary {
    background-color: var(--if-primary);
    border-color: var(--if-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--if-primary-hover);
    border-color: var(--if-primary-hover);
    color: #fff;
}

.btn-light {
    background: #f6f8fb;
    border-color: #d8e0e8;
    color: #425571;
}

.btn-light:hover {
    background: #edf2f7;
    border-color: #cfd8e3;
    color: #30455f;
}

.btn-soft {
    background: #dbe8ee;
    border: 1px solid #bfd2db;
    color: #446170;
}

.btn-soft:hover {
    background: #cfe0e7;
    color: #334c58;
}

/* Botón estilo “Nuevo” */
.btn-new {
    background: var(--if-primary);
    border: 1px solid rgba(0, 0, 0, 0.04);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 0.55rem;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(70, 120, 138, 0.18);
}

.btn-new:hover {
    background: var(--if-primary-hover);
    color: #fff;
}

/* =========================================================
   Botones solo ícono
   ========================================================= */

.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    line-height: 1;
}

/* tamaño pequeño */
.btn-icon-only.btn-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
}

/* tamaño grande */
.btn-icon-only.btn-lg {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.2rem;
    border-radius: 0.75rem;
}

/* icono centrado */
.btn-icon-only i,
.btn-icon-only svg {
    pointer-events: none;
}

/* =========================================================
   Variantes suaves (muy usadas en dashboards modernos)
   ========================================================= */

.btn-icon-soft {
    background: #eef4f7;
    border: 1px solid #d9e3ea;
    color: #4a6178;
}

.btn-icon-soft:hover {
    background: #e3edf3;
    color: #2f4762;
}

/* colores */
.btn-icon-primary {
    background: rgba(var(--if-primary-rgb), 0.12);
    border: 1px solid rgba(var(--if-primary-rgb), 0.25);
    color: var(--if-primary);
}

.btn-icon-primary:hover {
    background: rgba(var(--if-primary-rgb), 0.22);
    color: var(--if-primary-hover);
}

.btn-icon-success {
    background: rgba(118, 179, 157, 0.15);
    border: 1px solid rgba(118, 179, 157, 0.25);
    color: #4f7f6e;
}

.btn-icon-danger {
    background: rgba(203, 126, 126, 0.15);
    border: 1px solid rgba(203, 126, 126, 0.25);
    color: #9a5a5a;
}

.btn-icon-warning {
    background: rgba(215, 181, 109, 0.18);
    border: 1px solid rgba(215, 181, 109, 0.3);
    color: #8a6b2a;
}

/* =========================================================
   Variante ghost (ultra limpia tipo Argon)
   ========================================================= */

.btn-icon-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: #7a8ea5;
}

.btn-icon-ghost:hover {
    background: #edf3f8;
    color: #3e5875;
}

/* =========================================================
   Focus accesible (Bootstrap 5.3 friendly)
   ========================================================= */

.btn-icon-only:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--if-primary-rgb), 0.18);
}

.btn-icon-only {
    transition: all 0.18s ease;
}

.btn-icon-only:hover {
    transform: translateY(-1px);
}

/* =========================================================
   Formularios
   ========================================================= */
.form-label {
    color: #65758c;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.form-control,
.form-select {
    background-color: var(--if-input-bg);
    border: 1px solid var(--if-input-border);
    border-radius: 0.65rem;
    color: var(--if-text);
    min-height: 2.55rem;
}

.form-control::placeholder {
    color: #9aa9bc;
}

.form-control:focus,
.form-select:focus {
    border-color: #8fb8c8;
    box-shadow: 0 0 0 0.2rem rgba(var(--if-primary-rgb), 0.14);
}

.input-group-text {
    background: #f2f5f8;
    border-color: var(--if-input-border);
    color: #708197;
}

.form-filter-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.45rem;
    border: 1px solid #d4dce6;
    border-radius: 0.65rem;
    background: #aeb9c7;
    color: #fff;
    box-shadow: var(--if-shadow-sm);
}

.form-filter-box:hover {
    background: #9aa8b8;
    color: #fff;
}

/* =========================================================
   Dropdowns / menús
   ========================================================= */
.dropdown-menu {
    border: 1px solid #d7e0e8;
    border-radius: 0.85rem;
    box-shadow: 0 12px 30px rgba(54, 76, 102, 0.14);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: 0.55rem;
    padding: 0.55rem 0.75rem;
    color: #44556f;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #edf4f7;
    color: #2f4762;
}

/* =========================================================
   Tabla estilo sistema original
   ========================================================= */
.table-wrap {
    background: #fff;
    border-radius: 0.9rem;
    border: 1px solid var(--if-table-border);
    overflow: hidden;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #fbfcfd;
    --bs-table-hover-bg: #f5f8fb;
    color: var(--if-text);
    margin-bottom: 0;
    vertical-align: middle;
}

.table thead th {
    background: var(--if-table-head);
    color: #8a98aa;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--if-table-border);
    border-top: 0;
    white-space: nowrap;
    padding: 0.95rem 1rem;
}

.table tbody td {
    border-color: var(--if-table-border);
    padding: 0.92rem 1rem;
    font-size: 0.9rem;
}

.table tbody tr:hover {
    background: #f8fbfd;
}

/* columnas estilo screenshot */
.table-clave {
    color: #57729a;
    white-space: nowrap;
}

.table-name {
    color: #4d6689;
    font-weight: 500;
}

.table-muted {
    color: #90a0b2;
}

.table-actions .btn {
    padding: 0.35rem 0.55rem;
    min-width: 2rem;
}

/* =========================================================
   Badges
   ========================================================= */
.badge {
    border-radius: 999px;
    padding: 0.45em 0.7em;
    font-weight: 600;
}

.badge-soft-primary {
    background: rgba(var(--if-primary-rgb), 0.14);
    color: #456779;
}

.badge-soft-success {
    background: rgba(118, 179, 157, 0.16);
    color: #467665;
}

.badge-soft-warning {
    background: rgba(215, 181, 109, 0.18);
    color: #84672a;
}

.badge-soft-danger {
    background: rgba(203, 126, 126, 0.16);
    color: #8f4b4b;
}

/* =========================================================
   Paginación
   ========================================================= */
.pagination {
    --bs-pagination-border-radius: 0.65rem;
    --bs-pagination-color: #5b708f;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #d8e0e8;
    --bs-pagination-hover-color: #38526d;
    --bs-pagination-hover-bg: #edf3f8;
    --bs-pagination-hover-border-color: #d1dce7;
    --bs-pagination-active-bg: var(--if-primary);
    --bs-pagination-active-border-color: var(--if-primary);
}

/* =========================================================
   Breadcrumb / page title
   ========================================================= */
.page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.page-heading-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--if-heading);
}

.breadcrumb {
    margin-bottom: 0;
    --bs-breadcrumb-divider-color: #9fb1c2;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #7d8ea3;
    font-size: 0.88rem;
}

/* =========================================================
   Helpers
   ========================================================= */
.bg-panel {
    background: var(--if-card-bg) !important;
}

.bg-topbar {
    background: var(--if-topbar) !important;
}

.text-soft {
    color: var(--if-text-soft) !important;
}

.shadow-soft {
    box-shadow: var(--if-shadow-sm) !important;
}

.rounded-soft {
    border-radius: 0.85rem !important;
}

.border-soft {
    border: 1px solid var(--if-card-border) !important;
}

/* =========================================================
   Bootstrap 5.3 extras modernos
   ========================================================= */

/* glass muy sutil para toolbar secundaria */
.toolbar-glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(217, 226, 234, 0.8);
    border-radius: 0.9rem;
    box-shadow: var(--if-shadow-sm);
}

/* tarjetas estadísticas */
.stat-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    border: 1px solid #dde5ed;
    border-radius: 1rem;
    box-shadow: var(--if-shadow-sm);
    padding: 1rem 1.1rem;
}

.stat-card .stat-label {
    font-size: 0.82rem;
    color: #7e8ea4;
}

.stat-card .stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #324964;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        transition: left 0.25s ease;
    }

    .app-sidebar.show {
        left: 0;
    }

    .app-topbar {
        min-height: 84px;
        padding: 0.9rem 1rem;
    }

    .app-content {
        padding: 1rem;
        margin-top: -1rem;
    }

    .content-panel-header,
    .card.if-card .card-header,
    .content-panel-body,
    .card.if-card .card-body {
        padding: 1rem;
    }
}

@media (max-width: 767.98px) {
    .table thead th,
    .table tbody td {
        padding: 0.8rem 0.75rem;
    }

    .page-heading {
        align-items: flex-start;
    }
}