/* =============================================================
   app.css - Portal Conectados
   Colores corporativos: #C0384A (rojo) + #1A1A2E (navy)
   Estructura: Light variables / Dark variables / Base / Utilities
   ============================================================= */

/* -------------------------------------------------------------
   MODO CLARO - variables base
   ------------------------------------------------------------- */
:root {
   /* Corporativos */
   --primary-color: #C0384A;
   --primary-dark: #A02D3C;
   --primary-light: #F5E6E9;
   --secondary-color: #1A1A2E;
   --secondary-light: #4A4A6A;
   /* Semanticos */
   --success-color: #16A34A;
   --warning-color: #D97706;
   --danger-color: #DC2626;
   --info-color: #2563EB;
   /* Layout - jerarquia de fondos */
   --bg-header: #F0F0F0;
   --bg-sidebar: #E8E8E8;
   --bg-body: #F9FAFB;
   --bg-card: #ffffff;
   /* Bordes */
   --border-color: #DCDCDC;
   --border-color-soft: #E8E8E8;
   /* Texto */
   --text-primary: #1A1A2E;
   --text-secondary: #4A4A6A;
   --text-muted: #94A3B8;
   /* Sidebar - modo claro */
   --sidebar-bg: #E8E8E8;
   --sidebar-border: #DCDCDC;
   --sidebar-text: #4A4A6A;
   --sidebar-text-muted: #94A3B8;
   --sidebar-icon: #94A3B8;
   --sidebar-hover: rgba(0,0,0,.05);
   --sidebar-active-bg: rgba(192,56,74,.08);
   --sidebar-active-text: #C0384A;
   --sidebar-active-icon: #C0384A;
   --sidebar-active-border: #C0384A;
   --sidebar-footer-border: #DCDCDC;
   --sidebar-tooltip-bg: #1A1A2E;
   --sidebar-tooltip-text: #ffffff;
   /* Radzen - sobreescribir con colores Conectados */
   --rz-primary: #C0384A;
   --rz-primary-dark: #A02D3C;
   --rz-primary-light: #F5E6E9;
   --rz-primary-contrast: #ffffff;
   --rz-secondary: #4A4A6A;
   --rz-secondary-dark: #1A1A2E;
   --rz-secondary-light: #E8E8F0;
   --rz-secondary-contrast: #ffffff;
   --rz-success: #16A34A;
   --rz-success-light: #DCFCE7;
   --rz-warning: #D97706;
   --rz-warning-light: #FEF3C7;
   --rz-danger: #DC2626;
   --rz-danger-light: #FEE2E2;
   --rz-info: #2563EB;
   --rz-info-light: #DBEAFE;
   --rz-base-background-color: #ffffff;
   --rz-content-background-color: #F9FAFB;
   --rz-text-color: #1A1A2E;
   --rz-text-secondary-color: #4A4A6A;
   --rz-border-color: #DCDCDC;
   --rz-border-radius: 8px;
   --rz-input-focus-border-color: #C0384A;
   --rz-card-shadow: 0 1px 3px rgba(0,0,0,.06);
   --rz-grid-header-background-color: #F0F0F0;
   --rz-grid-row-hover-background-color: #FDF2F4;
   --rz-grid-row-selected-background-color: #F5E6E9;
   --rz-tab-active-color: #C0384A;
   --rz-tab-active-border-color: #C0384A;
   --rz-switch-checked-background-color: #C0384A;
   --rz-progressbar-background-color: #F5E6E9;
}

   /* -------------------------------------------------------------
   MODO OSCURO - sobreescritura de variables
   ------------------------------------------------------------- */
   :root[data-theme="dark"] {
      /* Corporativos dark */
      --primary-color: #E8637A;
      --primary-dark: #C0384A;
      --primary-light: #2D1A1E;
      /* Layout - jerarquia de fondos dark */
      --bg-header: #1E1E2E;
      --bg-sidebar: #16162A;
      --bg-body: #0F0F1A;
      --bg-card: #1A1A2E;
      /* Bordes */
      --border-color: #2D2D42;
      --border-color-soft: #252538;
      /* Texto */
      --text-primary: #F1F5F9;
      --text-secondary: #94A3B8;
      --text-muted: #64748B;
      /* Sidebar - modo oscuro */
      --sidebar-bg: #16162A;
      --sidebar-border: #2D2D42;
      --sidebar-text: rgba(255,255,255,.65);
      --sidebar-text-muted: rgba(255,255,255,.25);
      --sidebar-icon: rgba(255,255,255,.4);
      --sidebar-hover: rgba(255,255,255,.05);
      --sidebar-active-bg: rgba(232,99,122,.18);
      --sidebar-active-text: #ffffff;
      --sidebar-active-icon: #E8637A;
      --sidebar-active-border: #E8637A;
      --sidebar-footer-border: rgba(255,255,255,.08);
      --sidebar-tooltip-bg: #000000;
      --sidebar-tooltip-text: #ffffff;
      /* Radzen dark */
      --rz-primary: #E8637A;
      --rz-primary-dark: #C0384A;
      --rz-primary-light: #2D1A1E;
      --rz-secondary: #94A3B8;
      --rz-secondary-dark: #64748B;
      --rz-success: #4ADE80;
      --rz-success-light: #052E16;
      --rz-warning: #FCD34D;
      --rz-warning-light: #1C1400;
      --rz-danger: #F87171;
      --rz-danger-light: #2D0A0A;
      --rz-info: #60A5FA;
      --rz-info-light: #0A1929;
      --rz-base-background-color: #1A1A2E;
      --rz-content-background-color: #0F0F1A;
      --rz-text-color: #F1F5F9;
      --rz-text-secondary-color: #94A3B8;
      --rz-text-disabled-color: #475569;
      --rz-border-color: #2D2D42;
      --rz-input-background-color: #1E2A3A;
      --rz-input-border-color: #2D2D42;
      --rz-input-focus-border-color: #E8637A;
      --rz-input-placeholder-color: #64748B;
      --rz-card-shadow: 0 1px 3px rgba(0,0,0,.4);
      --rz-grid-header-background-color: #1E1E2E;
      --rz-grid-header-color: #F1F5F9;
      --rz-grid-row-hover-background-color: #2D1A1E;
      --rz-grid-row-selected-background-color: #3D1F27;
      --rz-grid-row-selected-color: #F1F5F9;
      --rz-tab-active-color: #E8637A;
      --rz-tab-active-border-color: #E8637A;
      --rz-switch-checked-background-color: #E8637A;
      --rz-progressbar-background-color: #2D1A1E;
   }

/* -------------------------------------------------------------
   BASE
   ------------------------------------------------------------- */
* {
   box-sizing: border-box;
}

html, body {
   margin: 0;
   padding: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: var(--bg-body);
   color: var(--text-primary);
   transition: background-color .3s, color .3s;
}

/* -------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------- */
.text-center {
   text-align: center;
}

.mt-1 {
   margin-top: 0.5rem;
}

.mt-2 {
   margin-top: 1rem;
}

.mt-3 {
   margin-top: 1.5rem;
}

.mt-4 {
   margin-top: 2rem;
}

.mb-1 {
   margin-bottom: 0.5rem;
}

.mb-2 {
   margin-bottom: 1rem;
}

.mb-3 {
   margin-bottom: 1.5rem;
}

.mb-4 {
   margin-bottom: 2rem;
}

.p-1 {
   padding: 0.5rem;
}

.p-2 {
   padding: 1rem;
}

.p-3 {
   padding: 1.5rem;
}

.p-4 {
   padding: 2rem;
}

.rz-text-subtitle1 {
   color: var(--text-secondary) !important;
}

.rz-text-subtitle2 {
   color: var(--text-secondary) !important;
}

.rz-badge-light {
   background: var(--primary-light) !important;
   color: var(--primary-color) !important;
}

.rz-pager-page {
   background: var(--rz-primary-light) !important;
}

.rz-pager-last, .rz-pager-next {
   background: var(--rz-primary-light) !important;
}

.rz-pager-page.rz-state-active {
   background: var(--rz-primary-dark) !important;
   color: var(--rz-primary-contrast) !important;
}

.rz-pager-first, .rz-pager-prev {
   background: var(--rz-primary-light) !important;
}

.rz-menuitem {
   cursor: pointer;
}

   .rz-menuitem:hover {
      background: var(--rz-primary) !important;
   }

.rz-dropdown-items li:hover {
   background: var(--rz-primary) !important;
}

.rz-state-highlight.rz-menuitem, .rz-state-highlight.rz-autocomplete-list-item, .rz-state-highlight.rz-multiselect-item, .rz-autocomplete-items li.rz-state-highlight, .rz-dropdown-items li.rz-state-highlight, .rz-multiselect-items li.rz-state-highlight, .rz-dropdown-item.rz-state-highlight {
   background: var(--rz-primary) !important;
}


.rz-dropdown-clear-icon{
   color: var(--rz-primary) !important;
}

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

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

.rz-text-caption {
   color: var(--rz-text-caption-color) !important;
}

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


/* -------------------------------------------------------------
   ANIMACIONES
   ------------------------------------------------------------- */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.fade-in {
   animation: fadeIn 0.3s ease-in-out;
}

/* -------------------------------------------------------------
   CARD HOVER
   ------------------------------------------------------------- */
.card-hover {
   transition: all 0.3s ease;
}

   .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0,0,0,.12);
   }

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */
@media (max-width: 768px) {
   .hide-mobile {
      display: none !important;
   }
}

@media (min-width: 769px) {
   .hide-desktop {
      display: none !important;
   }
}

/* -------------------------------------------------------------
   LOADING SPINNER
   ------------------------------------------------------------- */
.loading-spinner {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 400px;
}

/* -------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------- */
::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: rgba(192,56,74,.3);
   border-radius: 99px;
}

   ::-webkit-scrollbar-thumb:hover {
      background: rgba(192,56,74,.55);
   }

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
   background: rgba(232,99,122,.3);
}

   :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
      background: rgba(232,99,122,.55);
   }

/* -------------------------------------------------------------
   SELECCION DE TEXTO
   ------------------------------------------------------------- */
::selection {
   background: rgba(192,56,74,.18);
   color: #1A1A2E;
}

:root[data-theme="dark"] ::selection {
   background: rgba(232,99,122,.22);
   color: #F1F5F9;
}

/* -------------------------------------------------------------
   NAVBAR ACTIVO
   ------------------------------------------------------------- */
.nav-active {
   background: rgba(192,56,74,.1) !important;
   border-radius: 8px;
}

:root[data-theme="dark"] .nav-active {
   background: rgba(232,99,122,.18) !important;
}

/* -------------------------------------------------------------
   DIALOG RESPONSIVE
   ------------------------------------------------------------- */
.rz-dialog-wrapper {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 1rem !important;
}

.rz-dialog {
   margin: auto !important;
   position: fixed !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
}

@media (max-width: 768px) {
   .rz-dialog {
      width: 95vw !important;
      max-width: 95vw !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
   }

   .rz-dialog-content {
      padding: 0.75rem !important;
   }

   .rz-dialog-title {
      font-size: 1rem !important;
      padding: 0.75rem 1rem !important;
   }
}

/* =============================================================
   DATAGRID - Estilos responsivos al tema
   ============================================================= */

/* Contenedor de la grilla */
.rz-data-grid {
   border: 1px solid var(--border-color) !important;
   border-radius: var(--rz-border-radius) !important;
   background: var(--bg-card) !important;
}

   /* Header de columnas */
   .rz-data-grid .rz-datatable-thead th,
   .rz-grid-table thead th {
      background: var(--bg-header) !important;
      color: var(--text-primary) !important;
      border-bottom: 1px solid var(--border-color) !important;
      border-right: 1px solid var(--border-color) !important;
      font-size: .78rem !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: .04em !important;
   }

   /* Filas */
   .rz-data-grid .rz-datatable-tbody td,
   .rz-grid-table tbody td {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-bottom: 1px solid var(--border-color-soft) !important;
      border-right: 1px solid var(--border-color-soft) !important;
      font-size: .85rem !important;
   }

   /* Hover fila */
   .rz-data-grid .rz-datatable-tbody tr:hover td {
      background: var(--rz-grid-row-hover-background-color) !important;
   }

   /* Fila seleccionada */
   .rz-data-grid .rz-state-highlight td {
      background: var(--rz-grid-row-selected-background-color) !important;
      color: var(--rz-grid-row-selected-color, var(--text-primary)) !important;
   }

   /* Filas alternadas - zebra opcional */
   .rz-data-grid .rz-datatable-tbody tr:nth-child(even) td {
      background: var(--bg-body) !important;
   }

/* Paginador */
.rz-paginator {
   background: var(--bg-header) !important;
   border-top: 1px solid var(--border-color) !important;
   color: var(--text-secondary) !important;
}

   .rz-paginator .rz-paginator-page,
   .rz-paginator .rz-paginator-first,
   .rz-paginator .rz-paginator-prev,
   .rz-paginator .rz-paginator-next,
   .rz-paginator .rz-paginator-last {
      color: var(--text-secondary) !important;
      border-radius: 6px !important;
   }

      .rz-paginator .rz-paginator-page:hover {
         background: var(--sidebar-hover) !important;
         color: var(--text-primary) !important;
      }

   .rz-paginator .rz-state-active {
      background: var(--primary-color) !important;
      color: #fff !important;
   }

/* Filtro de columnas */
.rz-column-header-filter input {
   background: var(--bg-card) !important;
   color: var(--text-primary) !important;
   border: 1px solid var(--border-color) !important;
   border-radius: 4px !important;
}

/* Sin resultados */
.rz-datatable-emptymessage td {
   background: var(--bg-card) !important;
   color: var(--text-muted) !important;
   text-align: center !important;
   padding: 2rem !important;
}

/* =============================================================
   DATAGRID - Filas intercaladas y hover
   ============================================================= */

/* Fila par - fondo ligeramente diferente */
.rz-grid-table > tbody > tr:nth-child(even) > td {
   background-color: var(--bg-body) !important;
}

/* Fila impar - fondo card */
.rz-grid-table > tbody > tr:nth-child(odd) > td {
   background-color: var(--bg-card) !important;
}

/* Hover - debe ir DESPUES de las reglas de zebra para ganar */
.rz-grid-table > tbody > tr:hover > td {
   background-color: var(--primary-light) !important;
   /*cursor: pointer;*/
   transition: background-color .15s ease;
}

/* Dark mode - hover mas suave */
:root[data-theme="dark"] .rz-grid-table > tbody > tr:hover > td {
   background-color: var(--sidebar-active-bg) !important;
}

/* Lineas de la grilla Both */
.rz-grid-table > tbody > tr > td {
   border-right: 1px solid var(--border-color-soft) !important;
   border-bottom: 1px solid var(--border-color-soft) !important;
}

.rz-grid-table > thead > tr > th {
   background-color: var(--bg-header) !important;
   border-right: 1px solid var(--border-color) !important;
   border-bottom: 2px solid var(--border-color) !important;
   color: var(--text-primary) !important;
   font-size: .78rem !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: .04em !important;
}