/* ========================================
   TWGROUP - Tema Personalizado
   Color Principal: #2ECC71 (Verde Twgroup)
   ======================================== */

:root {
    --bago-primary: #2ECC71;
    --bago-primary-dark: #27AE60;
    --bago-primary-darker: #1E8449;
    --bago-primary-light: #58D68D;
    --bago-primary-rgb: 46, 204, 113;
    --bago-gradient: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    --bago-sidebar-gradient: linear-gradient(180deg, #2C3E50 0%, #34495E 100%);
}

/* ========================================
   Botones Primarios
   ======================================== */
.btn-primary {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bago-primary-dark) !important;
    border-color: var(--bago-primary-dark) !important;
    box-shadow: 0 4px 15px rgba(var(--bago-primary-rgb), 0.4) !important;
}

.btn-outline-primary {
    color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
    color: #fff !important;
}

/* ========================================
   Sidebar / Menú Lateral
   ======================================== */
.sidebar,
.c-sidebar,
.sidebar-nav {
    background: var(--bago-sidebar-gradient) !important;
}

.sidebar .nav-link,
.c-sidebar .nav-link,
.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
}

.sidebar .nav-link:hover,
.c-sidebar .nav-link:hover,
.sidebar-nav .nav-link:hover {
    color: #fff !important;
    background: rgba(46, 204, 113, 0.2) !important;
    border-left: 3px solid var(--bago-primary);
}

.sidebar .nav-link.active,
.c-sidebar .nav-link.active {
    background: rgba(46, 204, 113, 0.25) !important;
    color: #fff !important;
    border-left: 3px solid var(--bago-primary);
    font-weight: 600;
}

.sidebar .nav-icon,
.c-sidebar .nav-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar .nav-link:hover .nav-icon,
.c-sidebar .nav-link:hover .nav-icon {
    color: var(--bago-primary) !important;
}

.sidebar .nav-link.active .nav-icon,
.c-sidebar .nav-link.active .nav-icon {
    color: var(--bago-primary) !important;
}

/* Sidebar Header/Brand */
.sidebar-brand,
.c-sidebar-brand,
.sidebar .sidebar-header {
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(46, 204, 113, 0.2);
}

/* Dropdown en sidebar */
.sidebar .nav-dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar .nav-group-items {
    background: rgba(0, 0, 0, 0.15) !important;
}

.sidebar .nav-group-items .nav-link {
    padding-left: 3rem !important;
}

/* ========================================
   Header / Navbar
   ======================================== */
.header,
.c-header,
.navbar {
    border-bottom: 3px solid var(--bago-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.header .navbar-brand,
.c-header .navbar-brand {
    color: var(--bago-primary-dark) !important;
    font-weight: 600;
}

/* ========================================
   Links y textos
   ======================================== */
a {
    color: var(--bago-primary);
}

a:hover {
    color: var(--bago-primary-dark);
}

.text-primary {
    color: var(--bago-primary) !important;
}

.bg-primary {
    background-color: var(--bago-primary) !important;
}

/* ========================================
   Cards con borde primario
   ======================================== */
.card.border-primary {
    border-color: var(--bago-primary) !important;
}

/* ========================================
   Badges
   ======================================== */
.badge.bg-primary {
    background-color: var(--bago-primary) !important;
}

/* ========================================
   Progress bars
   ======================================== */
.progress-bar {
    background-color: var(--bago-primary) !important;
}

/* ========================================
   Form controls focus
   ======================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--bago-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bago-primary-rgb), 0.25) !important;
}

/* ========================================
   Tabs
   ======================================== */
.nav-tabs .nav-link.active {
    border-color: var(--bago-primary) !important;
    color: var(--bago-primary) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--bago-primary) !important;
}

/* ========================================
   Page Title
   ======================================== */
.page-title {
    color: var(--bago-primary) !important;
}

/* ========================================
   Login Page
   ======================================== */
.login-logo {
    max-width: 200px;
    margin-bottom: 1.5rem;
}

.login-container {
    background: linear-gradient(135deg, #1E8449 0%, #27AE60 50%, #2ECC71 100%);
    min-height: 100vh;
}

/* ========================================
   Logo en Sidebar
   ======================================== */
.sidebar-logo {
    max-height: 40px;
    width: auto;
}

.sidebar-brand-text {
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff !important;
}

/* ========================================
   FIX Original: Input readonly
   ======================================== */
input:read-only {
    background-color: gainsboro;
}

input[readonly]:focus {
    background-color: gainsboro;
}

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
    background: #eee;
    box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
    display: none;
}

/* ========================================
   FIX CRÍTICO: Paginador con flechas gigantes (Tailwind)
   ======================================== */

/* Contenedor del paginador Tailwind */
.relative.z-0.inline-flex {
    font-size: 1rem !important;
}

/* Los botones del paginador */
.relative.z-0.inline-flex .relative.inline-flex.items-center {
    max-width: 3rem !important;
    max-height: 2.5rem !important;
}

/* SVG dentro del paginador - FORZAR TAMAÑO PEQUEÑO */
.relative.z-0.inline-flex svg,
.relative.z-0.inline-flex .relative.inline-flex.items-center svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem !important;
    min-height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* Clases Tailwind w-5 h-5 sobrescritas */
svg.w-5,
svg.h-5,
.w-5.h-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Clase w-1 corregida */
svg.w-1 {
    width: 1.25rem !important; /* Forzar a w-5 */
}

/* Path dentro de SVG - evitar expansión */
.relative.z-0.inline-flex svg path {
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* Todos los SVG en el DOM que sean hijos de elementos con inline-flex */
span.inline-flex svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
}

/* Fix para DataTables si existe */
.dataTables_paginate .pagination .page-link {
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    max-width: 3rem !important;
    max-height: 3rem !important;
}

.dataTables_paginate svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
}

/* ========================================
   Estilos adicionales con tema verde
   ======================================== */

/* Botón "Salir" del sidebar */
.sidebar .btn-danger,
.c-sidebar .btn-danger {
    background-color: #E74C3C !important;
    border-color: #E74C3C !important;
}

.sidebar .btn-danger:hover,
.c-sidebar .btn-danger:hover {
    background-color: #C0392B !important;
    border-color: #C0392B !important;
}

/* Alertas de éxito con verde */
.alert-success {
    background-color: rgba(46, 204, 113, 0.1) !important;
    border-color: var(--bago-primary) !important;
    color: var(--bago-primary-darker) !important;
}

/* Iconos de acción en tablas */
.btn-sm.btn-link {
    color: var(--bago-primary-dark) !important;
}

.btn-sm.btn-link:hover {
    color: var(--bago-primary-darker) !important;
}

/* Checkbox y radio buttons */
.form-check-input:checked {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
}

/* Select2 focus */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--bago-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bago-primary) !important;
}

/* Breadcrumbs */
.breadcrumb-item.active {
    color: var(--bago-primary-dark) !important;
}

.breadcrumb-item a {
    color: var(--bago-primary) !important;
}

.breadcrumb-item a:hover {
    color: var(--bago-primary-darker) !important;
}

/* Spinner/Loading */
.spinner-border.text-primary {
    color: var(--bago-primary) !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--bago-primary-dark) !important;
}

/* Dropdown menu items hover */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(46, 204, 113, 0.1) !important;
    color: var(--bago-primary-darker) !important;
}

/* Card headers con color primario */
.card-header.bg-primary {
    background-color: var(--bago-primary) !important;
}

/* Switch toggle */
.form-switch .form-check-input:checked {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
}

/* Paginación activa */
.page-item.active .page-link {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
}

.page-link {
    color: var(--bago-primary) !important;
}

.page-link:hover {
    color: var(--bago-primary-dark) !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
}

/* Lista de acciones en CRUD */
.btn-group .btn-primary {
    background-color: var(--bago-primary) !important;
    border-color: var(--bago-primary) !important;
}

/* Footer */
.app-footer {
    border-top: 2px solid rgba(46, 204, 113, 0.2) !important;
}

/* Scrollbar personalizada (webkit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--bago-primary-dark);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bago-primary-darker);
}