/* ============================================================
   LOGIX
   Sistema de Gestión Comercial
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --background: #f5f7fb;
    --white: #ffffff;
    --text: #172554;
    --muted: #64748b;
    --border: #e2e8f0;

    --sidebar-width: 250px;
    --topbar-height: 70px;
}


/* ============================================================
   GENERAL
   ============================================================ */

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    background: var(--background);

    color: var(--text);

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* ============================================================
   LAYOUT GENERAL
   ============================================================ */

.app-layout {
    min-height: 100vh;
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: var(--topbar-height);

    background: var(--white);

    border-bottom: 1px solid var(--border);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 24px;

    z-index: 1000;
}

.topbar-left {
    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 0;
}

.topbar-logo {
    display: flex;

    align-items: center;

    min-width: 0;
}

.topbar-logo img {
    display: block;

    max-width: 150px;
    max-height: 42px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* ============================================================
   BOTÓN MENÚ
   ============================================================ */

.menu-toggle {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;

    background: transparent;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    color: var(--text);

    border-radius: 7px;
}

.menu-toggle:hover {
    background: #eff6ff;
}


/* ============================================================
   USUARIO TOPBAR
   ============================================================ */

.topbar-user {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 18px;

    min-width: 0;
}

.user-info {
    display: flex;

    flex-direction: column;

    text-align: right;

    min-width: 0;
}

.user-info strong {
    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.user-info span {
    margin-top: 3px;

    font-size: 12px;

    color: var(--muted);

    white-space: nowrap;
}

.logout-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    white-space: nowrap;

    background: #fee2e2;

    color: #991b1b;

    padding: 9px 13px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    transition: background 0.2s;
}

.logout-link:hover {
    background: #fecaca;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;

    top: var(--topbar-height);

    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background: var(--white);

    border-right: 1px solid var(--border);

    display: flex;

    flex-direction: column;

    z-index: 900;

    overflow-y: auto;

    overflow-x: hidden;

    transition: transform 0.25s ease;
}

.sidebar-brand {
    padding: 22px;

    border-bottom: 1px solid var(--border);

    text-align: center;

    flex-shrink: 0;
}

.sidebar-brand img {
    display: block;

    max-width: 145px;
    max-height: 55px;

    width: auto;
    height: auto;

    object-fit: contain;

    margin: 0 auto 8px;
}

.sidebar-brand span {
    display: block;

    color: var(--muted);

    font-size: 11px;
}

.sidebar-nav {
    padding: 15px 12px;

    flex: 1;
}

.nav-section-title {
    font-size: 10px;

    font-weight: 700;

    color: #94a3b8;

    letter-spacing: 1px;

    padding: 14px 12px 7px;
}

.nav-item {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 11px 12px;

    margin-bottom: 3px;

    border-radius: 8px;

    color: #475569;

    font-size: 14px;

    transition: background 0.2s, color 0.2s;
}

.nav-item:hover {
    background: #eff6ff;

    color: var(--primary);
}

.nav-icon {
    width: 22px;

    flex: 0 0 22px;

    text-align: center;

    font-size: 16px;
}

.sidebar-footer {
    padding: 15px;

    border-top: 1px solid var(--border);

    text-align: center;

    font-size: 11px;

    color: var(--muted);

    flex-shrink: 0;
}


/* ============================================================
   CONTENIDO PRINCIPAL
   IMPORTANTE:
   Los módulos NO deben redefinir .main-content
   ============================================================ */

.main-content {
    width: auto;

    min-height: 100vh;

    margin-left: var(--sidebar-width);

    padding: calc(var(--topbar-height) + 30px) 30px 40px;

    overflow-x: hidden;
}


/* ============================================================
   ENCABEZADO DE PÁGINA
   ============================================================ */

.page-header {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}

.page-header > div:first-child {
    min-width: 0;
}

.page-header h1 {
    font-size: 28px;

    line-height: 1.2;

    margin-bottom: 6px;
}

.page-header p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.5;
}


/* ============================================================
   TARJETAS
   ============================================================ */

.main-content .card {
    width: 100%;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 22px;

    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);

    overflow: hidden;
}

.main-content .card-header {
    margin-bottom: 24px;
}

.main-content .card-header h2 {
    margin-bottom: 6px;

    font-size: 20px;
}

.main-content .card-header p {
    color: var(--muted);

    font-size: 14px;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.main-content .toolbar {
    width: 100%;

    margin-bottom: 20px;
}


/* ============================================================
   FORMULARIOS
   ============================================================ */

.main-content .search-form {
    width: 100%;

    display: flex;

    align-items: flex-end;

    gap: 12px;

    flex-wrap: wrap;
}

.main-content .filter-group {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}

.main-content .filter-group label {
    font-size: 13px;

    font-weight: 600;
}

.main-content .search-field {
    flex: 1;

    min-width: 200px;
}

.main-content .filter-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


/* ============================================================
   INPUTS
   ============================================================ */

.main-content input,
.main-content select,
.main-content textarea {
    width: 100%;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 11px 12px;

    font-size: 14px;

    font-family: inherit;

    background: #ffffff;

    color: var(--text);

    outline: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(29, 78, 216, 0.10);
}

.main-content textarea {
    resize: vertical;

    min-height: 90px;
}


/* ============================================================
   FORM GRID
   ============================================================ */

.main-content .form-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.main-content .form-group {
    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;
}

.main-content .form-group-full {
    grid-column: 1 / -1;
}

.main-content .form-group label {
    font-size: 14px;

    font-weight: 600;
}

.main-content .form-group small {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.4;
}


/* ============================================================
   OPCIONES / CHECKBOX
   ============================================================ */

.main-content .form-options {
    display: flex;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

    padding-top: 5px;
}

.main-content .checkbox-label {
    display: flex !important;

    flex-direction: row !important;

    align-items: center;

    gap: 8px !important;

    cursor: pointer;
}

.main-content .checkbox-label input {
    width: auto;

    flex: 0 0 auto;
}


/* ============================================================
   COLOR
   ============================================================ */

.main-content .color-input {
    display: flex;

    align-items: center;

    gap: 12px;
}

.main-content .color-input input[type="color"] {
    width: 50px;

    height: 40px;

    padding: 3px;

    cursor: pointer;
}

.main-content .color-input span {
    color: var(--muted);

    font-size: 13px;
}


/* ============================================================
   ACCIONES FORMULARIOS
   ============================================================ */

.main-content .form-actions {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 10px;
}


/* ============================================================
   BOTONES
   ============================================================ */

.btn-primary,
.btn-secondary,
.btn-small {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    transition:
        background 0.2s,
        transform 0.1s;
}

.btn-primary,
.btn-secondary {
    min-height: 40px;

    padding: 10px 16px;
}

.btn-primary {
    background: var(--primary);

    color: #ffffff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:active,
.btn-secondary:active,
.btn-small:active {
    transform: translateY(1px);
}

.btn-secondary {
    background: #e2e8f0;

    color: #334155;
}

.btn-secondary:hover {
    background: #cbd5e1;
}


/* ============================================================
   TABLAS
   ============================================================ */

.main-content .table-container {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.main-content .data-table {
    width: 100%;

    min-width: 700px;

    border-collapse: collapse;
}

.main-content .data-table th,
.main-content .data-table td {
    padding: 13px 12px;

    border-bottom: 1px solid var(--border);

    text-align: left;

    vertical-align: middle;
}

.main-content .data-table th {
    background: #f8fafc;

    font-size: 13px;

    color: #475569;

    font-weight: 600;

    white-space: nowrap;
}

.main-content .data-table td {
    font-size: 14px;
}

.main-content .data-table td strong {
    display: block;
}

.main-content .data-table td small {
    display: block;

    color: var(--muted);

    margin-top: 3px;

    font-size: 12px;
}


/* ============================================================
   ACCIONES TABLA
   ============================================================ */

.main-content .actions {
    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;
}

.main-content .btn-small {
    min-height: 32px;

    padding: 7px 10px;

    background: var(--primary);

    color: #ffffff;

    font-size: 12px;
}

.main-content .btn-small:hover {
    background: var(--primary-dark);
}

.main-content .btn-small-secondary {
    background: #64748b;
}

.main-content .btn-small-secondary:hover {
    background: #475569;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}

.badge-success {
    background: #dcfce7;

    color: #166534;
}

.badge-danger {
    background: #fee2e2;

    color: #991b1b;
}

.badge-primary {
    background: #dbeafe;

    color: #1e40af;
}

.muted {
    color: var(--muted);
}


/* ============================================================
   ALERTAS
   ============================================================ */

.main-content .alert {
    width: 100%;

    padding: 13px 16px;

    border-radius: 8px;

    margin-bottom: 20px;

    font-size: 14px;

    line-height: 1.4;
}

.main-content .alert-success {
    background: #dcfce7;

    color: #166534;

    border: 1px solid #bbf7d0;
}

.main-content .alert-error {
    background: #fee2e2;

    color: #991b1b;

    border: 1px solid #fecaca;
}


/* ============================================================
   SIN RESULTADOS
   ============================================================ */

.main-content .empty-state {
    text-align: center !important;

    padding: 40px !important;

    color: var(--muted);
}
/* ============================================================
   RESUMEN / ESTADÍSTICAS
   ============================================================ */

.stats-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin: 20px 0 25px;
}

.stat-card {
    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 20px;

    min-width: 0;

    box-shadow:
        0 4px 15px rgba(15, 23, 42, 0.04);
}

.stat-label {
    color: var(--muted);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 8px;
}

.stat-value {
    color: var(--text);

    font-size: 23px;

    font-weight: 700;

    line-height: 1.2;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 25px;
}

.dashboard-card {
    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 20px;

    display: flex;

    gap: 15px;

    min-height: 140px;
}

.dashboard-card-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    background: #eff6ff;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;
}

.dashboard-card h3 {
    font-size: 16px;

    margin-bottom: 8px;
}

.dashboard-card p {
    font-size: 13px;

    line-height: 1.5;

    color: var(--muted);
}

.welcome-panel {
    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 25px;
}

.welcome-panel h2 {
    font-size: 18px;

    margin-bottom: 15px;
}

.welcome-panel p {
    color: var(--muted);

    margin-bottom: 8px;

    font-size: 14px;
}
/* ============================================================
   OVERLAY DEL SIDEBAR EN MÓVIL
   ============================================================ */

.sidebar-overlay {
    display: none;

    position: fixed;

    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(15, 23, 42, 0.35);

    z-index: 850;
}

.sidebar-overlay-visible {
    display: block;
}


/* Evita desplazamiento de la página cuando el menú está abierto */

body.menu-abierto {
    overflow: hidden;
}


/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 1100px) {
        .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .main-content {
        padding-left: 22px;
        padding-right: 22px;
    }

}


/* ============================================================
   RESPONSIVE - MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .stats-grid {
        grid-template-columns: 1fr;
    }  
    /* TOPBAR */

    .topbar {
        height: var(--topbar-height);

        padding: 0 15px;

        gap: 10px;
    }

    .topbar-left {
        gap: 10px;

        min-width: 0;
    }

    .topbar-logo img {
        max-width: 125px;

        max-height: 38px;
    }

    .menu-toggle {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        font-size: 23px;
    }

    .topbar-user {
        gap: 8px;

        flex-shrink: 0;
    }

    .user-info {
        display: none;
    }

    .logout-link {
        padding: 8px 10px;

        font-size: 12px;
    }


    /* SIDEBAR */

    .sidebar {
        transform: translateX(-100%);

        box-shadow:
            5px 0 20px rgba(15, 23, 42, 0.12);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }


    /* MAIN */

    .main-content {
        width: 100%;

        margin-left: 0;

        padding:
            calc(var(--topbar-height) + 24px)
            18px
            30px;
    }


    /* HEADER */

    .page-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

    .page-header h1 {
        font-size: 25px;
    }

    .page-header p {
        font-size: 13px;
    }

    .page-header > div:last-child {
        width: 100%;
    }

    .page-header > div:last-child .btn-primary {
        width: 100%;
    }


    /* CARDS */

    .main-content .card {
        padding: 18px;
    }


    /* FORMS */

    .main-content .form-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .main-content .form-group-full {
        grid-column: auto;
    }

    .main-content .search-form {
        flex-direction: column;

        align-items: stretch;
    }

    .main-content .filter-group,
    .main-content .search-field,
    .main-content .filter-actions {
        width: 100%;
    }

    .main-content .filter-actions {
        display: flex;

        flex-direction: row;
    }

    .main-content .filter-actions > * {
        flex: 1;
    }


    /* TABLAS */

    .main-content .table-container {
        margin-left: -18px;
        margin-right: -18px;

        width: calc(100% + 36px);

        padding-left: 18px;
        padding-right: 18px;
    }


    /* DASHBOARD */

    .dashboard-grid {
        grid-template-columns: 1fr;
    }


    /* FORM ACTIONS */

    .main-content .form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .main-content .form-actions > * {
        width: 100%;
    }

}


/* ============================================================
   RESPONSIVE - TELÉFONOS PEQUEÑOS
   ============================================================ */

@media (max-width: 480px) {

    .topbar {
        padding: 0 10px;
    }

    .topbar-left {
        gap: 6px;
    }

    .topbar-logo img {
        max-width: 105px;

        max-height: 34px;
    }

    .logout-link {
        padding: 7px 9px;

        font-size: 11px;
    }

    .main-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .main-content .card {
        padding: 15px;
    }

    .page-header h1 {
        font-size: 23px;
    }

    .main-content .table-container {
        margin-left: -15px;
        margin-right: -15px;

        width: calc(100% + 30px);

        padding-left: 15px;
        padding-right: 15px;
    }

}


/* ============================================================
   FOOTER DEL LOGIN
   ============================================================ */

.login-footer {
    width: 100%;

    text-align: center;

    padding: 18px 20px 22px;

    font-size: 13px;

    color: var(--muted);
}

.login-footer strong {
    color: var(--text);

    font-weight: 600;
}

.login-footer a {
    color: var(--primary);

    text-decoration: none;

    font-weight: 600;
}

.login-footer a:hover {
    text-decoration: underline;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-body {
    min-height: 100vh;

    background: var(--background);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px 20px 0;
}

.login-container {
    width: 100%;

    max-width: 430px;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;
}

.login-card {
    width: 100%;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 18px;

    padding: 40px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);
}

.login-header {
    text-align: center;

    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 42px;

    line-height: 1;

    color: var(--text);

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 12px;
}

.login-header p {
    font-size: 15px;

    color: var(--muted);

    line-height: 1.5;
}

.login-body .form-group {
    margin-bottom: 20px;
}

.login-body .form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: var(--text);
}

.login-body .form-group input {
    width: 100%;

    height: 46px;

    padding: 0 14px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: #ffffff;

    color: var(--text);

    font-size: 15px;

    outline: none;
}

.login-body .form-group input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(29, 78, 216, 0.12);
}

.btn-login {
    width: 100%;

    height: 48px;

    border: none;

    border-radius: 9px;

    background: var(--primary);

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.1s;
}

.btn-login:hover {
    background: var(--primary-dark);
}

.btn-login:active {
    transform: translateY(1px);
}

.login-body .alert-error {
    background: #fef2f2;

    border: 1px solid #fecaca;

    color: #b91c1c;

    border-radius: 9px;

    padding: 12px 14px;

    margin-bottom: 20px;

    font-size: 14px;

    line-height: 1.4;
}


/* ============================================================
   LOGIN RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    .login-body {
        padding: 20px 15px 0;
    }

    .login-card {
        padding: 30px 24px;

        border-radius: 14px;
    }

    .login-header h1 {
        font-size: 36px;
    }

    .login-footer {
        font-size: 12px;

        padding-top: 15px;
    }

}
/* ============================================================
   BUSCADOR MAESTRO
   ============================================================ */

.resultados-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    margin-bottom: 15px;
}

.resultados-header h2 {
    font-size: 19px;
}

.resultado-card {
    width: 100%;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 18px;

    margin-bottom: 12px;

    background: var(--white);
}

.resultado-tipo {
    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--primary);

    margin-bottom: 6px;
}

.resultado-nombre {
    font-size: 18px;

    font-weight: 700;

    margin-bottom: 7px;
}

.resultado-info {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;
}

.resultado-rol {
    display: inline-flex;

    margin-top: 10px;

    padding: 5px 9px;

    border-radius: 6px;

    background: #eff6ff;

    color: var(--primary);

    font-size: 12px;

    font-weight: 700;
}

.buscador-ayuda {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;
}

/* ------------------------------------------------------------
   Ancho de columnas
   ------------------------------------------------------------ */

.main-content .table th:nth-child(1),
.main-content .table td:nth-child(1) {
    width: 5%;

    text-align: center;
}

.main-content .table th:nth-child(2),
.main-content .table td:nth-child(2) {
    width: 15%;
}

.main-content .table th:nth-child(3),
.main-content .table td:nth-child(3) {
    width: 14%;
}

.main-content .table th:nth-child(4),
.main-content .table td:nth-child(4) {
    width: 16%;
}

.main-content .table th:nth-child(5),
.main-content .table td:nth-child(5) {
    width: 12%;
}

.main-content .table th:nth-child(6),
.main-content .table td:nth-child(6) {
    width: 18%;
}

.main-content .table th:nth-child(7),
.main-content .table td:nth-child(7) {
    width: 20%;
}


/* ------------------------------------------------------------
   Acciones
   ------------------------------------------------------------ */

.main-content .table-actions {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.main-content .table-actions form {
    margin: 0;
}


/* ------------------------------------------------------------
   Botones pequeños
   ------------------------------------------------------------ */

.main-content .btn-sm {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 7px 12px;

    border: none;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    text-decoration: none;

    transition:
        background 0.2s,
        transform 0.1s;
}

.main-content .btn-sm:active {
    transform: translateY(1px);
}


/* ------------------------------------------------------------
   Botón secundario pequeño
   ------------------------------------------------------------ */

.main-content .btn-sm.btn-secondary {
    background: #e2e8f0;

    color: #334155;
}

.main-content .btn-sm.btn-secondary:hover {
    background: #cbd5e1;
}


/* ------------------------------------------------------------
   Botón peligro / desactivar
   ------------------------------------------------------------ */

.main-content .btn-sm.btn-danger {
    background: #fee2e2;

    color: #991b1b;
}

.main-content .btn-sm.btn-danger:hover {
    background: #fecaca;
}


/* ------------------------------------------------------------
   Botón activar
   ------------------------------------------------------------ */

.main-content .btn-sm.btn-success {
    background: #dcfce7;

    color: #166534;
}

.main-content .btn-sm.btn-success:hover {
    background: #bbf7d0;
}


/* ------------------------------------------------------------
   Texto auxiliar
   ------------------------------------------------------------ */

.main-content .text-muted {
    color: var(--muted);
}


/* ============================================================
   TABLAS - PANTALLAS PEQUEÑAS
   ============================================================ */

@media (max-width: 768px) {

    .main-content .table {
        min-width: 850px;
    }

    .main-content .table th,
    .main-content .table td {
        padding: 12px 13px;
    }

}

/* ------------------------------------------------------------
   COLUMNAS
   ------------------------------------------------------------ */

.main-content .usuarios-listado .col-numero {
    width: 6%;
}

.main-content .usuarios-listado .col-nombre {
    width: 15%;
}

.main-content .usuarios-listado .col-usuario {
    width: 15%;
}

.main-content .usuarios-listado .col-rol {
    width: 18%;
}

.main-content .usuarios-listado .col-estado {
    width: 12%;
}

.main-content .usuarios-listado .col-acceso {
    width: 17%;
}

.main-content .usuarios-listado .col-acciones {
    width: 17%;
}


/* ------------------------------------------------------------
   ENCABEZADO Y DATOS
   ------------------------------------------------------------ */

.main-content .usuarios-listado th,
.main-content .usuarios-listado td {
    box-sizing: border-box;

    padding: 14px 16px;

    text-align: left;

    vertical-align: middle;

    border-bottom: 1px solid var(--border);
}


/* ------------------------------------------------------------
   ENCABEZADO
   ------------------------------------------------------------ */

.main-content .usuarios-listado th {
    font-size: 14px;

    font-weight: 700;

    color: var(--text);

    white-space: nowrap;
}


/* ------------------------------------------------------------
   DATOS
   ------------------------------------------------------------ */

.main-content .usuarios-listado td {
    font-size: 14px;

    color: #334155;

    line-height: 1.5;
}


/* ------------------------------------------------------------
   COLUMNA NUMÉRICA
   ------------------------------------------------------------ */

.main-content .usuarios-listado th:first-child,
.main-content .usuarios-listado td:first-child {
    text-align: center;
}


/* ------------------------------------------------------------
   USUARIO
   ------------------------------------------------------------ */

.main-content .usuarios-listado td:nth-child(3) {
    font-weight: 600;
}


/* ------------------------------------------------------------
   ACCIONES
   ------------------------------------------------------------ */

.main-content .usuarios-listado th:last-child,
.main-content .usuarios-listado td:last-child {
    text-align: center;
}

.main-content .usuarios-listado .table-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    flex-wrap: wrap;
}

.main-content .usuarios-listado .table-actions form {
    margin: 0;
}


/* ------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------ */

.main-content .usuarios-listado .btn-sm {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    padding: 7px 12px;

    border: none;

    border-radius: 8px;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.2;

    cursor: pointer;

    text-decoration: none;
}

.main-content .usuarios-listado .btn-secondary {
    background: #e2e8f0;

    color: #334155;
}

.main-content .usuarios-listado .btn-secondary:hover {
    background: #cbd5e1;
}

.main-content .usuarios-listado .btn-danger {
    background: #fee2e2;

    color: #991b1b;
}

.main-content .usuarios-listado .btn-danger:hover {
    background: #fecaca;
}

.main-content .usuarios-listado .btn-success {
    background: #dcfce7;

    color: #166534;
}

.main-content .usuarios-listado .btn-success:hover {
    background: #bbf7d0;
}