/* ========================================
   FUENTES MODERNAS PARA SIGAFIRMA
   ======================================== */

/* Opción 1: INTER (Recomendada - la que usa Filament) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Alternativas si quieres probar:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
*/

:root {
    --primary: #ea628d;
    --primary-hover: #e3356c;
    --info: #6eb5e8;
    --info-hover: #389ae0;
    --success: #6bc283;
    --success-hover: #43a35e;
    --warning: #f3b562;
    --warning-hover: #ef992a;
    --light: #ffdf80;
    --light-hover: #ffcc33;
    --danger: #e88b89;
    --danger-hover: #dd5755;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Fuente principal */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dark-mode {
    --primary: #5a0c25;
    --primary-hover: #871237;
    --info: #0e3958;
    --info-hover: #155684;
    --success: #1e482a;
    --success-hover: #2c6d3f;
    --warning: #5f3907;
    --warning-hover: #8e550b;
    --light: #664d00;
    --light-hover: #997300;
    --danger: #551211;
    --danger-hover: #801b19;
}

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

body {
    background: var(--gray-50);
    font-family: var(--font-family);
    color: var(--gray-900);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   NAVBAR COMPACTO CON LOGO GRANDE
   ======================================== */
.custom-navbar {
    background: white !important;
    border-bottom: 1px solid var(--gray-200) !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
}

.custom-navbar .container {
    padding: 1rem !important;
}

.navbar-brand {
    padding: 0;
    margin-right: 2rem;
}

.navbar-brand img {
    height: 52px !important;
    width: auto;
}

.nav-link {
    color: var(--gray-700) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.375rem 1rem !important;
    border-radius: 6px;
    transition: all 0.15s ease;
    font-family: var(--font-family);
}

.nav-link:hover {
    background: var(--gray-100);
    color: var(--gray-900) !important;
}

.dropdown-menu {
    border: 1px solid var(--gray-200);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.dropdown-item {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--gray-700);
    transition: all 0.15s ease;
    margin-bottom: 2px;
    font-family: var(--font-family);
}

.dropdown-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.dropdown-item.active {
    background: rgba(134, 18, 54, 0.1);
    color: var(--primary);
}

.dropdown-item i {
    width: 20px;
    margin-right: 0.5rem;
    color: var(--gray-400);
}

/* ========================================
   CONTAINER Y LAYOUT
   ======================================== */
.wrap {
    min-height: 100vh;
    background: var(--gray-50);
}

.container {
    max-width: 1400px;
    /*padding: 2rem 1rem;*/
}

/* ========================================
   TÍTULOS LIMPIOS
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 600;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 1.5rem;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
}

/* ========================================
   PANELES TIPO CARD LIMPIO
   ======================================== */
.panel {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.panel-body {
    padding: 1.5rem;
}

/* ========================================
   BOTONES FLAT MODERNOS - COLORES SUAVES
   ======================================== */
/* Refuerzo de especificidad para que los estilos de botones prevalezcan sobre Bootstrap/Yii2 */
body .btn, body .btn:focus, body .btn:active, body .btn:visited {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: none !important;
    outline: none !important;
}

body .btn-success,
body .btn-success:focus,
body .btn-success:active,
body .btn-success:hover,
body .btn-success:visited {
    background: var(--success) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
body .btn-success:hover,
body .btn-success:focus {
    background: #5aa374 !important;
    color: #fff !important;
}

body .btn-primary,
body .btn-primary:focus,
body .btn-primary:active,
body .btn-primary:hover,
body .btn-primary:visited {
    background: var(--gray-400) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
body .btn-primary:hover,
body .btn-primary:focus {
    background: var(--gray-600) !important;
    color: #fff !important;
}

body .btn-danger,
body .btn-danger:focus,
body .btn-danger:active,
body .btn-danger:hover,
body .btn-danger:visited {
    background: var(--danger) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
body .btn-danger:hover,
body .btn-danger:focus {
    background: #d77876 !important;
    color: #fff !important;
}

body .btn-info,
body .btn-info:focus,
body .btn-info:active,
body .btn-info:hover,
body .btn-info:visited {
    background: var(--info) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
body .btn-info:hover,
body .btn-info:focus {
    background: #5ca0d3 !important;
    color: #fff !important;
}

body .btn:active {
    transform: scale(0.98) !important;
}

.btn-default, 
.btn-default:hover, 
.btn-default:active, 
.btn-default:visited, 
.btn-default:focus, 
.btn-default:active:focus, 
.btn-default:not(:disabled):not(.disabled):active, 
.btn-default:not(:disabled):not(.disabled).active, 
.show > .btn-default.dropdown-toggle,
.btn-default:not(:disabled):not(.disabled):active:focus {
 	color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 0 transparent;
 }

body .btn-default:hover,
body .btn-default:focus {
    background: #e74b7d !important;
    color: #fff !important;
}

#compraventa-grid-clear-filters-btn,
#mandato-grid-clear-filters-btn,
#generico-grid-clear-filters-btn,
#user-grid-clear-filters-btn,
#despachos-grid-clear-filters-btn,
#limitPhone-grid-clear-filters-btn,
#role-grid-clear-filters-btn,
#permission-grid-clear-filters-btn {
    background-color: var(--primary);
}

/* ICONOS BLANCOS EN BOTONES */
.btn i,
.btn .fa,
.btn .fas,
.btn .far {
    color: white !important;
}


body .btn:hover {
    transform: none !important;
    box-shadow: none !important;
}




body .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

body .btn i {
    font-size: 0.875rem !important;
}

/* ========================================
   BARRA DE ACCIONES SUPERIOR
   ======================================== */
.row.pb-3 {
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.row.pb-3 .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ========================================
   SELECTOR DE REGISTROS
   ======================================== */
.form-inline.pull-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    font-family: var(--font-family);
}

.form-inline select {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: white;
    color: var(--gray-900);
    cursor: pointer;
    font-family: var(--font-family);
}

.form-inline select:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(110, 181, 232, 0.15);
}

/* ========================================
   TABLA MODERNA CON SEPARADORES VERTICALES
   ======================================== */
.table-responsive {
    border-radius: 12px;
    overflow: hidden;
    background: white;
    border: 1px solid var(--gray-200);
}

.table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family);
}

.table thead {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--gray-200);
    border-right: 1px solid rgba(229, 231, 235, 0.6);
    background: var(--gray-50);
}

.table thead th:last-child {
    border-right: none;
}

.table thead th a {
    color: var(--gray-600);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.table thead th a:hover {
    color: var(--gray-900);
}

.table tbody tr {
    border-bottom: 1px solid var(--gray-200);
    transition: background 0.15s ease;
}

.table tbody tr:hover {
    background: var(--gray-50);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table td {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--gray-700);
    vertical-align: middle;
    border-right: 1px solid rgba(229, 231, 235, 0.4);
}

.table td:last-child {
    border-right: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

.table-bordered {
    border: none;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--gray-50);
}

.table-striped tbody tr:nth-of-type(even) {
    background: white;
}

/* ========================================
   FILTROS DE TABLA LIMPIOS
   ======================================== */
#mandato-grid-filters {
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

#mandato-grid-filters td {
    padding: 0.75rem 1rem;
    border-right: 1px solid rgba(229, 231, 235, 0.4);
}

#mandato-grid-filters td:last-child {
    border-right: none;
}

#mandato-grid-filters input,
#mandato-grid-filters select {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: white;
    color: var(--gray-900);
    transition: all 0.15s ease;
    font-family: var(--font-family);
}

#mandato-grid-filters input:focus,
#mandato-grid-filters select:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(110, 181, 232, 0.15);
}

#mandato-grid-filters input::placeholder {
    color: var(--gray-400);
}

/* ========================================
   SUMMARY
   ======================================== */
.summary {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 500;
    background: white;
    font-family: var(--font-family);
}

/* ========================================
   ESTADOS/BADGES - COLORES SUAVES
   ======================================== */
.table td i[data-toggle="tooltip"] {
    font-size: 1.125rem;
}

.fa-file-signature {
    color: var(--success) !important;
}

.fa-clock {
    color: var(--info) !important;
}

.fa-ban,
.fa-user-times {
    color: var(--danger) !important;
}

.fa-file-download,
.fa-file-upload {
    color: var(--success) !important;
}

.fa-paper-plane {
    color: var(--success) !important;
}

/* ========================================
   TOOLTIPS
   ======================================== */
.text-primary[data-toggle="tooltip"] {
    color: var(--info) !important;
    cursor: help;
}

/* ========================================
   BOTONES EN TABLA - COLORES SUAVES
   ======================================== */
.table td .btn {
    padding: 0.375rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.table td .btn i {
    margin: 0;
}

.table td .btn-success[style] {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.table td .btn-success[style]:hover {
    background-color: #5aa374 !important;
    border-color: #5aa374 !important;
}

body .btn-default:hover{
    background-color: var(--primary-hover) !important;
}
body .btn-success:hover {
    background-color: var(--success-hover) !important;
}
body .btn-primary:hover {
    background-color: var(--gray-500) !important;
}
body .btn-danger:hover {
    background-color: var(--danger-hover) !important;
}
body .btn-info:hover {
    background-color: var(--info-hover) !important;
}
/* ========================================
   FORMULARIOS MODERNOS
   ======================================== */
.form-control {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    background: white;
    color: var(--gray-900);
    transition: all 0.15s ease;
    font-family: var(--font-family);
    height: 40px    ;
}

.form-control:focus {
    outline: none;
    border-color: var(--info);
    box-shadow: 0 0 0 3px rgba(110, 181, 232, 0.15);
}

.form-control::placeholder {
    color: var(--gray-400);
}

.form-control-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

fieldset {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

fieldset legend {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
    padding: 0 0.75rem;
    margin-bottom: 0;
    font-family: var(--font-family);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
    font-family: var(--font-family);
}

/* ========================================
   MODALES LIMPIOS
   ======================================== */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modal-header {
    border-bottom: 1px solid var(--gray-200);
    padding: 1.25rem 1.5rem;
}

.modal-header .close {
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.modal-header .close:hover {
    background: var(--gray-100);
}

.modal-body {
    padding: 1.5rem;
}

.modal-body h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

/* ========================================
   LIST GROUP LIMPIO
   ======================================== */
.list-group-item {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.15s ease;
    font-family: var(--font-family);
}

.list-group-item:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.list-firma-masiva {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.list-firma-masiva input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--gray-300);
    cursor: pointer;
}

.list-firma-masiva label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-700);
    cursor: pointer;
}

/* ========================================
   ALERTS LIMPIOS
   ======================================== */
.alert {
    border: none;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-family: var(--font-family);
}

.alert-light {
    background: var(--gray-50);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}

/* ========================================
   PAGINACIÓN MODERNA - COLORES SUAVES
   ======================================== */
.pagination {
    display: flex;
    gap: 0.25rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: white;
    border-top: 1px solid var(--gray-200);
}

.pagination li {
    list-style: none;
}

.pagination li a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.15s ease;
    font-family: var(--font-family);
}

.pagination li a:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.pagination li.active a {
    background: var(--info);
    border-color: var(--info);
    color: white;
}

.pagination li.disabled span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .panel-body {
        padding: 1rem;
    }
    
    .table thead th {
        font-size: 0.7rem;
        padding: 0.5rem;
    }
    
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.8125rem;
    }
    
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .navbar-brand img {
        height: 42px !important;
    }
}

/* ========================================
   SCROLL PERSONALIZADO
   ======================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ========================================
   MEJORAS VISUALES ADICIONALES
   ======================================== */
.fa-info-circle {
    color: var(--info) !important;
    font-size: 0.875rem;
}

.table td[style*="width:120px"],
.table td[style*="width:150px"],
.table td[style*="width:160px"] {
    white-space: nowrap;
}

.table td[style*="text-align:center"] {
    text-align: center;
}

/* ========================================
   MODO OSCURO
   ======================================== */
.dark-mode .wrap,
.dark-mode .form-control,
.dark-mode .input-group-text,
.dark-mode .custom-control-input,
.dark-mode .personalizacion .card-header,
.dark-mode .personalizacion .card-body,
.dark-mode .modal-content , 
.dark-mode .notification .card-header,
.dark-mode .notification .card-body,
.dark-mode .alert,
.dark-mode .select2-selection,
.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background: var(--gray-800) !important;
    color: var(--gray-500) !important;
}

.dark-mode .form-control,
.dark-mode .input-group-text {
    border: 1px solid var(--gray-600) !important;
}

.dark-mode div:has(form.form-principal) {
    border-right: 1px solid var(--gray-600) !important;
    border-left: 1px solid var(--gray-600) !important;
    background-color: var(--gray-900);
}

.dark-mode h1, h2, h3, h4, h5, h6 {
    color: var(--gray-500) !important;
}
.dark-mode .custom-navbar, 
.dark-mode .filters{
    background: var(--gray-900) !important;
    color: var(--gray-500) !important;
    border-bottom: 1px solid var(--gray-700) !important;
}

.dark-mode .custom-navbar .nav-link, 
.dark-mode .dropdown-item, 
.dark-mode ,.modal-content .list-group-item, 
.dark-mode ,.modal-content .list-firma-masiva label{
    color: var(--gray-500) !important;
}

.dark-mode .nav-link:hover, 
.dark-mode .dropdown-menu a:hover  {
    background: var(--gray-700) !important;
    color: var(--gray-400) !important;
}

.dark-mode .navbar-nav .dropdown-menu, 
.dark-mode .table-striped tbody tr:nth-of-type(even),
.dark-mode .pagination,
.dark-mode .footer,
.dark-mode .card {
    background: var(--gray-900) !important;
    color: var(--gray-500) !important;
}

.dark-mode .panel,
.dark-mode .table-responsive,
.dark-mode ,
.dark-mode .modal-content .list-group-item {
    background: var(--gray-900) !important;
    border: 1px solid var(--gray-700) !important;
}

.dark-mode .table tbody tr,
.dark-mode .personalizacion .card-header,
.dark-mode .notification .card-header {
    border-bottom: 1px solid var(--gray-600) !important;
}

.dark-mode .table-bordered th, 
.dark-mode .table-bordered td {
    border: none !important;
}

.dark-mode .table td {
    color: var(--gray-500) !important;
    border-right: 1px solid var(--gray-600) !important;
}

.dark-mode .filters input, 
.dark-mode .filters select,
.dark-mode .form-inline select {
    border: 1px solid var(--gray-500);
    background: var(--gray-800);
    color: var(--gray-500);
}

.dark-mode .grid-view .table thead th{
    background: var(--gray-900) !important;
    border-bottom: 1px solid var(--gray-600) !important;
    border-right: 1px solid var(--gray-600) !important;
}

.dark-mode .summary {
    color: var(--gray-500);
    background: var(--gray-900);
    border-bottom: 1px solid var(--gray-600);
}

.dark-mode .btn, 
.dark-mode .btn i,
body.dark-mode .btn-success,
body.dark-mode .btn-success span,
.dark-mode ul.pagination li.disabled span {
    color: var(--gray-400) !important;
}

.dark-mode .btn-primary, 
.dark-mode .btn-primary:focus, 
.dark-mode .btn-primary:active, 
.dark-mode .btn-primary:visited {
    background: var(--gray-700) !important;
    color: var(--gray-400) !important;
}

.dark-mode .btn-primary:hover,
.dark-mode .pagination li a:hover {
    background: var(--gray-500) !important;
}

.dark-mode .btn-success:hover {
    color: var(--gray-50) !important;
}

.dark-mode .pagination,
.dark-mode .footer {
    border-top: 1px solid var(--gray-600);
}

.dark-mode .pagination li a{
    background: var(--gray-600) !important;
    color: var(--gray-400) !important;
}

.dark-mode ul.pagination li.disabled {
    background: var(--gray-800) !important;
}