/* ══════════════════════════════════════════════════════════════
   Portal de Autogestión — Tema Corporativo Turquesa
   Paleta: #4ea8b3 (turquesa), #3d9aa5 (oscuro), #39557b (profundo)
   Fuente: Poppins | Sin FontAwesome — usar RadzenIcon (Material Icons)
   ══════════════════════════════════════════════════════════════ */

/* ── Fuente global Poppins ── */
html, body, .rz-body, .rz-sidebar, .rz-header,
button, input, select, textarea, .rz-label, .rz-text {
    font-family: 'Poppins', sans-serif !important;
}

/* ── Elimina degradado/malla del fondo por defecto de Radzen ── */
body, .rz-body {
    background: #ffffff !important;
    background-image: none !important;
    background-color: #ffffff !important;
}
:root .rz-standard,
:root .rz-default {
    --rz-body-background-color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA STANDARD — Sidebar blanco, texto turquesa
   ════════════════════════════════════════════════════════════════ */
:root .rz-standard,
.rz-standard ~ .rz-dialog-wrapper,
body:has(.rz-standard) .rz-dialog-wrapper {
    --rz-header-background-color: #4ea8b3 !important;
    --rz-sidebar-background-color: #ffffff !important;
    --rz-border-color: #e0e0e1 !important;
    --rz-panel-menu-border-color: #e0e0e1 !important;
    --rz-panel-menu-item-background-color: #ffffff !important;
    --rz-panel-menu-item-color: #4ea8b3 !important;
    --rz-panel-menu-item-icon-color: #4ea8b3 !important;
    --rz-panel-menu-item-active-background-color: #e8f5f6 !important;
    --rz-panel-menu-item-hover-background-color: #f0f9fa !important;
    --rz-panel-menu-item-2nd-level-background-color: #f4f5f5 !important;
    --rz-panel-menu-item-2nd-level-color: #4ea8b3 !important;
    --rz-panel-menu-item-2nd-level-active-background-color: #e8f5f6 !important;
    --rz-panel-menu-item-2nd-level-hover-background-color: #eaeaeb !important;
    --rz-panel-menu-item-3rd-level-background-color: #f9f9f9 !important;
    --rz-panel-menu-item-3rd-level-color: #4ea8b3 !important;
    --rz-panel-menu-item-3rd-level-active-background-color: #e8f5f6 !important;
    --rz-panel-menu-item-3rd-level-hover-background-color: #efefef !important;
    --rz-grid-header-background-color: #4ea8b3 !important;
    --rz-grid-header-color: #ffffff !important;
}

:root .rz-standard .link-layout-text {
    --rz-link-color: white !important;
    --rz-link-hover-color: rgba(255,255,255,0.9) !important;
}
:root .rz-standard th,
.rz-standard ~ .rz-dialog-wrapper th,
body:has(.rz-standard) .rz-dialog-wrapper th {
    --rz-grid-frozen-cell-background-color: #4ea8b3 !important;
}
:root .rz-standard .rz-header {
    background: linear-gradient(90deg, #56b8c4 0%, #3d9aa5 100%) !important;
    --rz-sidebar-toggle-hover-background-color: #3d9aa5 !important;
    --rz-sidebar-toggle-background-color: #4ea8b3 !important;
    --rz-sidebar-toggle-color: white !important;
    --rz-sidebar-toggle-hover-color: white !important;
}
:root .rz-standard .rz-accordion-header {
    --rz-accordion-item-background-color: #f5fbfc !important;
    --rz-accordion-item-color: #39557b !important;
    --rz-accordion-hover-color: #4ea8b3 !important;
}

/* ════════════════════════════════════════════════════════════════
   TEMA DEFAULT — Sidebar turquesa, texto blanco
   ════════════════════════════════════════════════════════════════ */
:root .rz-default,
.rz-default ~ .rz-dialog-wrapper,
body:has(.rz-default) .rz-dialog-wrapper {
    --rz-header-background-color: #3d9aa5 !important;
    --rz-sidebar-background-color: #4ea8b3 !important;
    --rz-border-color: rgba(255,255,255,0.18) !important;
    --rz-panel-menu-border-color: rgba(255,255,255,0.15) !important;
    --rz-panel-menu-item-background-color: #4ea8b3 !important;
    --rz-panel-menu-item-color: #ffffff !important;
    --rz-panel-menu-item-icon-color: #ffffff !important;
    --rz-panel-menu-item-active-background-color: #3d9aa5 !important;
    --rz-panel-menu-item-hover-background-color: #5bbac6 !important;
    --rz-panel-menu-item-2nd-level-background-color: #3a8f99 !important;
    --rz-panel-menu-item-2nd-level-color: #ffffff !important;
    --rz-panel-menu-item-2nd-level-active-background-color: #2e7a83 !important;
    --rz-panel-menu-item-2nd-level-hover-background-color: #42a0ab !important;
    --rz-panel-menu-item-3rd-level-background-color: #317880 !important;
    --rz-panel-menu-item-3rd-level-color: #ffffff !important;
    --rz-panel-menu-item-3rd-level-active-background-color: #276268 !important;
    --rz-panel-menu-item-3rd-level-hover-background-color: #3a8f99 !important;
    --rz-grid-header-background-color: #2e6b75 !important;
    --rz-grid-header-color: #ffffff !important;
    --rz-primary: #4ea8b3 !important;
    --rz-primary-darker: #3d9aa5 !important;
    --rz-text-color: #1e293b !important;
}

:root .rz-default .link-layout-text {
    --rz-link-color: white !important;
    --rz-link-hover-color: rgba(255,255,255,0.85) !important;
}
:root .rz-default th,
.rz-default ~ .rz-dialog-wrapper th,
body:has(.rz-default) .rz-dialog-wrapper th {
    --rz-grid-frozen-cell-background-color: #2e6b75 !important;
}
:root .rz-default .rz-header {
    background: linear-gradient(90deg, #4ea8b3 0%, #39557b 100%) !important;
    --rz-sidebar-toggle-hover-background-color: #3d9aa5 !important;
    --rz-sidebar-toggle-background-color: #4ea8b3 !important;
    --rz-sidebar-toggle-color: white !important;
    --rz-sidebar-toggle-hover-color: white !important;
}
:root .rz-default .rz-sidebar {
    background-color: #4ea8b3 !important;
}
:root .rz-default .rz-sidebar .rz-panel-menu-item-wrapper {
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
:root .rz-default .rz-accordion-header {
    --rz-accordion-item-background-color: #3d9aa5 !important;
    --rz-accordion-item-color: #ffffff !important;
    --rz-accordion-hover-color: rgba(255,255,255,0.85) !important;
}
.rz-default .rz-header {
    background: linear-gradient(90deg, #4ea8b3 0%, #39557b 100%) !important;
}

/* ── Bordes y separadores del sidebar (ambos temas) ── */
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-panel-menu-item,
.rz-sidebar .rz-panel-menu-item-wrapper {
    border-color: #e0e0e1 !important;
}
.rz-sidebar .rz-panel-menu-item-wrapper {
    border-bottom: 1px solid #e8e8e9 !important;
}
.rz-sidebar .rz-panel-menu > .rz-panel-menu-item-wrapper:last-child {
    border-bottom: none !important;
}

/* ── Íconos SVG del menú heredan color del tema ── */
.rz-panel-menu-item svg {
    stroke: currentColor !important;
    fill: none !important;
}

/* ── Header de la aplicación ── */
.h-logo-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    height: 34px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
.h-logo-btn:hover { background: rgba(255,255,255,0.22); }
.h-logo-text { color: white; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.h-company-logo { height: 30px; width: auto; object-fit: contain; }
.h-user-name { color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 500; }
.h-avatar-btn {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 50%; border: none; cursor: pointer;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    padding: 0; transition: transform 0.2s;
}
.h-avatar-btn:hover { transform: scale(1.06); }
.h-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.h-avatar-initials { color: white; font-size: 11px; font-weight: 700; }
.h-logout-btn {
    background: transparent; border: none; cursor: pointer;
    color: rgba(255,255,255,0.7); padding: 6px;
    border-radius: 6px; display: flex; align-items: center;
    transition: color 0.2s, background 0.2s;
}
.h-logout-btn:hover { color: white; background: rgba(255,255,255,0.1); }

/* ── Override botón login (verde corporativo) ── */
.login-btn.rz-button,
.login-btn.rz-variant-filled,
.login-btn.rz-primary {
    background: #198A88 !important;
    background-color: #198A88 !important;
    border-color: #198A88 !important;
    color: white !important;
}
.login-btn.rz-button:hover {
    background: #147a78 !important;
    background-color: #147a78 !important;
    border-color: #147a78 !important;
}

/* ── Clases de utilidad ── */
.ShadowCard { box-shadow: 20px 20px 70px rgba(0,0,0,0.2); }
.border-left-primary { border-left: 0.25rem solid #4ea8b3 !important; }
.border-bottom-primary { border-bottom: 0.25rem solid #4ea8b3 !important; }

/* ── Fixes Radzen ── */
.rz-sidebar .rz-navigation-item-wrapper .rz-navigation-item-link {
    padding-inline-start: 1rem !important;
}
.rz-state-disabled { cursor: not-allowed !important; }
.rz-form-field-content:has(.rz-state-disabled) { cursor: not-allowed !important; }
.rz-dropdown-panel.rz-popup { min-width: 150px !important; }
.rz-dropdown-panel.rz-popup input { min-width: 50px !important; }
.max-height-modal-pers { max-height: 80vh !important; }

/* ── Responsive ── */
@media screen and (max-width: 768px) {
    .max-height-modal-pers { max-height: 100vh !important; }
}

/* ── Spinner de carga estilo iOS ── */
@keyframes pn-enter {
    from { opacity:0; transform:scale(0.94) translateY(10px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes pn-blade {
    0% { opacity:1; }
    100% { opacity:0.12; }
}
@keyframes pn-bounce {
    0%,60%,100% { transform:translateY(0); opacity:.3; }
    30% { transform:translateY(-6px); opacity:1; }
}
.pn-loader { display:flex; flex-direction:column; align-items:center; padding:2.25rem 2.75rem 2rem; animation:pn-enter .26s cubic-bezier(0,0,.2,1) both; }
.pn-stage { position:relative; width:80px; height:80px; }
.pn-blade { position:absolute; left:50%; top:4px; width:12px; height:26px; margin-left:-6px; border-radius:6px; background:#4ea8b3; transform-origin:6px 36px; animation:pn-blade .9s ease-in-out infinite; }
.pn-b0 { transform:rotate(0deg);   animation-delay:0s;      }
.pn-b1 { transform:rotate(45deg);  animation-delay:-0.7875s; }
.pn-b2 { transform:rotate(90deg);  animation-delay:-0.675s;  }
.pn-b3 { transform:rotate(135deg); animation-delay:-0.5625s; }
.pn-b4 { transform:rotate(180deg); animation-delay:-0.45s;   }
.pn-b5 { transform:rotate(225deg); animation-delay:-0.3375s; }
.pn-b6 { transform:rotate(270deg); animation-delay:-0.225s;  }
.pn-b7 { transform:rotate(315deg); animation-delay:-0.1125s; }
.pn-label { margin-top:1.25rem; color:#1e293b; font-weight:600; font-size:.9375rem; }
.pn-sub { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:.35rem; color:#64748b; font-size:.775rem; }
.pn-dots { display:flex; gap:5px; align-items:center; }
.pn-dot { display:block; width:5px; height:5px; border-radius:50%; background:#4ea8b3; animation:pn-bounce .95s ease-in-out infinite; }
.pn-dot:nth-child(2) { animation-delay:.16s; }
.pn-dot:nth-child(3) { animation-delay:.32s; }
@media (prefers-reduced-motion: reduce) {
    .pn-blade, .pn-dot, .pn-loader { animation:none !important; }
    .pn-loader { opacity:1; transform:none; }
    .pn-blade { opacity:.4; }
    .pn-dot { opacity:.6; }
}