/* =============================================
   theme.css — UI/UX Standard: Bordes y Líneas Suaves
   Cargado al final de base.css para aplicar sobre
   todos los módulos del sistema.
   ============================================= */

/* =============================================
   1. CARDS — border-radius: 12px
   ============================================= */
.card,
.card-container,
.dashboard-card,
.info-card,
.stat-card,
.profile-card,
.data-card,
.permissions-container,
.filters-container,
.unified-form-section,
.unified-tabs-container,
[class*="card-"]:not(.card-header):not(.card-body):not(.socio-card):not(.beneficiario-card):not(.cuenta-bancaria-card):not(.emergencia-card):not(.notaria-card):not(.mega-card-title):not(.card-info-left):not(.card-icon-box):not(.card-text-box):not(.card-stats-right) {
  border-radius: var(--radius-card, 12px);
  border: 1px solid var(--border-color, #E5E7EB);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
  transition: box-shadow var(--transition-medium, 0.3s ease), transform var(--transition-medium, 0.3s ease);
}

.card:hover,
.dashboard-card:hover,
.info-card:hover,
.stat-card:hover,
.data-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.10));
  transform: translateY(-2px);
}

.card-header {
  border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
}

.card-body:last-child {
  border-radius: 0 0 var(--radius-card, 12px) var(--radius-card, 12px);
}

/* =============================================
   2. BOTONES — border-radius: 8px
   ============================================= */
.btn,
.unified-btn,
button:not(.btn-avatar):not(.tox-button):not(.note-btn):not(.close-portal):not(.close):not([class*="socio-"]),
[class*="btn-"] {
  border-radius: var(--radius-btn, 8px);
  border: 1px solid transparent;
  transition: all var(--transition-fast, 0.2s ease);
}

.btn-sm {
  border-radius: calc(var(--radius-btn, 8px) - 2px);
  min-height: 44px !important;
  min-width: 100px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.btn-lg {
  border-radius: var(--radius-btn, 8px);
  min-height: 44px !important;
  min-width: 100px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Separación entre buscador y botón de filtro */
.search-container-styled form.row {
  column-gap: 16px;
  row-gap: 12px;
}

/* =============================================
   TOOLTIPS: Solo el tooltip global (#global-tooltip)
   Se desactivan los tooltips antiguos basados en
   pseudo-elementos (::before/::after) que aparecían arriba.
   ============================================= */
[data-tooltip]::before,
[data-tooltip]::after {
  content: none !important;
  display: none !important;
}

/* =============================================
   3. INPUTS, SELECTS, TEXTAREAS — border-radius: 8px
   ============================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea,
.form-control,
.form-select,
.unified-form-input {
  border-radius: var(--radius-input, 8px);
  border: 1px solid var(--border-color, #E5E7EB);
  transition: border-color var(--transition-fast, 0.2s ease), box-shadow var(--transition-fast, 0.2s ease);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.unified-form-input:focus {
  border-color: var(--primary, #2e6f75);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 46, 111, 117), 0.15);
}

/* =============================================
   4. MODALES — border-radius: 16px
   ============================================= */
.modal-content,
.modal-dialog,
.unified-modal,
.modal-system-content,
.kambi-modal-box,
[class*="modal-"]:not(.modal-backdrop):not(.portal-modal):not(.qr-modal) {
  border-radius: var(--radius-modal, 16px);
  border: 1px solid var(--border-color, #E5E7EB);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
  overflow: hidden;
}

.modal-header {
  border-radius: var(--radius-modal, 16px) var(--radius-modal, 16px) 0 0;
}

.modal-footer {
  border-radius: 0 0 var(--radius-modal, 16px) var(--radius-modal, 16px);
}

/* =============================================
   5. TABLAS Y CONTENEDORES — border-radius: 12px
   ============================================= */
.table,
.table-container,
.dataTable,
.dataTables_wrapper,
[class*="table-"]:not(.modern-table) {
  border-radius: var(--radius-table, 12px);
  overflow: hidden;
}

.table-container,
.dataTables_wrapper {
  border: 1px solid var(--border-color, #E5E7EB);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.table thead th:first-child {
  border-radius: var(--radius-table, 12px) 0 0 0;
}

.table thead th:last-child {
  border-radius: 0 var(--radius-table, 12px) 0 0;
}

/* Contenedores principales */
.main-container,
.content-wrapper,
.section-container,
.dashboard-container,
.admin-container,
.interface-container {
  border-radius: var(--radius-container, 12px);
}

/* =============================================
   6. SEPARADORES Y LÍNEAS SUAVES
   ============================================= */
hr,
.separator,
.divider {
  border: none;
  border-top: 1px solid var(--border-color, #E5E7EB);
  opacity: 0.6;
}

.table td,
.table th,
table td,
table th,
.list-group-item {
  border-color: var(--border-color, #E5E7EB);
}

.accordion-item,
.accordion-header {
  border-color: var(--border-color, #E5E7EB);
}

/* =============================================
   7. PILLS / BADGES
   ============================================= */
.badge,
.pill,
.tag,
[class*="badge-"],
[class*="pill-"] {
  border-radius: var(--radius-full, 9999px);
}

/* =============================================
   8. NAVEGACIÓN / TABS
   ============================================= */
.nav-tabs .nav-link {
  border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
}

.nav-pills .nav-link {
  border-radius: var(--radius-btn, 8px);
}

/* =============================================
   MODO OSCURO
   ============================================= */
body.dark-theme .card,
body.dark-theme .card-container,
body.dark-theme .dashboard-card,
body.dark-theme .info-card,
body.dark-theme .stat-card,
body.dark-theme .profile-card,
body.dark-theme .data-card,
body.dark-theme .permissions-container,
body.dark-theme .filters-container,
body.dark-theme .unified-form-section,
body.dark-theme .unified-tabs-container,
body.dark-theme [class*="card-"]:not(.card-header):not(.card-body):not(.socio-card):not(.beneficiario-card):not(.cuenta-bancaria-card):not(.emergencia-card):not(.notaria-card):not(.mega-card-title):not(.card-info-left):not(.card-icon-box):not(.card-text-box):not(.card-stats-right) {
  border-color: var(--border-color, #2D3748);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25));
}

body.dark-theme .card:hover,
body.dark-theme .dashboard-card:hover,
body.dark-theme .info-card:hover,
body.dark-theme .stat-card:hover,
body.dark-theme .data-card:hover {
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.30));
}

body.dark-theme input[type="text"],
body.dark-theme input[type="email"],
body.dark-theme input[type="password"],
body.dark-theme input[type="number"],
body.dark-theme input[type="date"],
body.dark-theme input[type="tel"],
body.dark-theme select,
body.dark-theme textarea,
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .unified-form-input {
  border-color: var(--border-color, #2D3748);
  background-color: var(--bg-input, #2a2a2a);
  color: var(--text-primary, #e0e0e0);
}

body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus,
body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus,
body.dark-theme .unified-form-input:focus {
  border-color: var(--neon-cyan, #00f7ff);
  box-shadow: 0 0 0 3px rgba(0, 247, 255, 0.2);
}

body.dark-theme .modal-content,
body.dark-theme .modal-dialog,
body.dark-theme .unified-modal,
body.dark-theme .modal-system-content,
body.dark-theme .kambi-modal-box,
body.dark-theme [class*="modal-"]:not(.modal-backdrop):not(.portal-modal):not(.qr-modal) {
  border-color: var(--border-color, #2D3748);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.30));
}

body.dark-theme .table,
body.dark-theme .table-container,
body.dark-theme .dataTable,
body.dark-theme .dataTables_wrapper,
body.dark-theme [class*="table-"]:not(.modern-table) {
  border-color: var(--border-color, #2D3748);
}

body.dark-theme hr,
body.dark-theme .separator,
body.dark-theme .divider {
  border-top-color: var(--border-color, #2D3748);
}

body.dark-theme .table td,
body.dark-theme .table th,
body.dark-theme table td,
body.dark-theme table th,
body.dark-theme .list-group-item {
  border-color: var(--border-color, #2D3748);
}

/* =============================================
   UTILITY: Grid de 4 columnas (Consolidación y otros)
   ============================================= */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .grid-4 {
    grid-template-columns: 1fr;
  }
}