/* ============================================================
   PORTAL VÍCTOR SEGUROS - CORE DESIGN TOKENS
   ============================================================ */

:root {
  --font-main: 'Inter', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --navy: #002855;
  --navy-light: #063161;
  --navy-deep: #021730;
  --steel: #4A7495;
  --steel-glow: #70a1c7;
  --white: #F9F9F9;
  --green-glow: #10b981;
  --amber-glow: #f59e0b;
  --red-glow: #ef4444;
  --purple-glow: #a855f7;
  --glass-bg: rgba(2, 23, 48, 0.5);
  --glass-border: rgba(249, 249, 249, 0.08);
  --glass-border-glow: rgba(112, 161, 199, 0.35);
  --white-70: rgba(249, 249, 249, 0.7);
  --white-40: rgba(249, 249, 249, 0.4);
  --white-10: rgba(249, 249, 249, 0.1);
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); background-color: var(--navy-deep); color: var(--white); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative; }

.bg-orbs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.35; }
.orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--steel) 0%, transparent 70%); }
.orb-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--navy) 0%, transparent 70%); }

.glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.glass:hover { border-color: var(--glass-border-glow); box-shadow: 0 12px 40px 0 rgba(112, 161, 199, 0.15); }
.hidden { display: none !important; }

.btn-primary, .btn-secondary, .role-btn, .ramo-nav-btn, .poliza-subtab-btn, .cobranza-filter-btn { font-family: var(--font-heading); font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; }
.btn-primary { background: linear-gradient(135deg, var(--steel) 0%, var(--navy) 100%); color: var(--white); padding: 0.8rem 1.6rem; border-radius: 8px; }
.btn-primary:hover { background: linear-gradient(135deg, var(--steel-glow) 0%, var(--navy-light) 100%); transform: scale(1.01); }
.btn-secondary { background: transparent; border: 1px solid var(--white-40); color: var(--white); padding: 0.8rem 1.6rem; border-radius: 8px; }

.form-control-glass { width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.75rem 1rem; color: var(--white); outline: none; }
.form-control-glass:focus { border-color: var(--steel-glow); background: rgba(255, 255, 255, 0.1); }

/* LOGIN OVERLAY */
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 9999; background: #021730; }
.login-card { width: 100%; max-width: 480px; padding: 2.5rem; text-align: center; }
.login-logo { height: 75px; margin-bottom: 1rem; }
.login-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }
.login-sub { font-size: 0.9rem; color: var(--white-70); margin-bottom: 2rem; }
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.role-grid button:last-child { grid-column: span 2; }
.role-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--glass-border); padding: 1.2rem 0.5rem; border-radius: 12px; color: var(--white); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.role-btn:hover { background: rgba(74, 116, 149, 0.15); border-color: var(--steel-glow); }
.password-form-group input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); padding: 1rem; color: var(--white); border-radius: 8px; text-align: center; font-size: 1.1rem; outline: none; margin-bottom: 1rem; }
.password-actions { display: flex; gap: 1rem; justify-content: center; }
.error-text { color: var(--red-glow); font-size: 0.85rem; margin-bottom: 1rem; font-weight: 600; }
.login-clean-footer-box { margin-top: 2.5rem; font-size: 0.76rem; color: var(--white-40); border-top: 1px solid rgba(255,255,255,0.05); padding-top: 1.2rem; }

@keyframes vibrate { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.vibrate-error { animation: vibrate 0.35s ease-in-out; border-color: rgba(239, 68, 68, 0.4) !important; }

/* PORTAL CORE LAYOUT (MÁXIMO CENTRADO) */
.portal { max-width: 1340px; width: 100%; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; margin-bottom: 2rem; }
.header-logo { height: 45px; }
.nav { display: flex; gap: 0.4rem; }
.nav-link { color: var(--white-70); text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 0.9rem; border-radius: 8px; }
.nav-link:hover, .nav-link.active { color: var(--white); background: rgba(74, 116, 149, 0.2); }
.header-user { display: flex; align-items: center; gap: 0.8rem; }
.user-badge-name { font-size: 0.85rem; font-weight: 600; }
.user-badge { background: rgba(112, 161, 199, 0.15); border: 1px solid var(--steel-glow); color: var(--steel-glow); padding: 0.4rem 0.9rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.btn-logout { background: transparent; border: none; color: var(--red-glow); font-size: 0.85rem; cursor: pointer; font-weight: 600; }

.main { width: 100%; margin: 0 auto 3rem auto; }
.section { display: none; animation: fadeIn 0.4s ease forwards; }
.section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.section-title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
.section-subtitle-desc { font-size: 0.9rem; color: var(--white-70); margin-bottom: 1rem; }

/* DASHBOARD */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.card.kpi { display: flex; align-items: center; gap: 1.8rem; padding: 1.8rem; }
.kpi-icon { font-size: 2.4rem; background: rgba(255,255,255,0.05); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 14px; flex-shrink: 0; }
.kpi-info { display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0.2rem; }
.kpi-label { font-size: 0.84rem; color: var(--white-40); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--steel-glow); line-height: 1; margin-top: 0.2rem; }

.dashboard-extended-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.validation-main-box { padding: 1.5rem; }
.validation-split-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.5rem; margin-top: 1rem; }
.validation-list { max-height: 290px; overflow-y: auto; padding-right: 0.5rem; }
.validation-item { background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); padding: 1rem; border-radius: 10px; margin-bottom: 0.8rem; cursor: pointer; }
.validation-item:hover, .validation-item.selected { background: rgba(239, 68, 68, 0.12); border-color: var(--red-glow); }
.val-item-title { font-weight: 600; font-size: 0.9rem; }
.val-item-sub { font-size: 0.78rem; color: var(--white-40); margin-top: 0.2rem; }
.validation-resolver-panel { border-left: 1px solid var(--glass-border); padding-left: 1.5rem; display: flex; flex-direction: column; }
.resolver-placeholder { margin: auto; text-align: center; color: var(--white-40); font-size: 0.9rem; }
.form-inner-title { font-family: var(--font-heading); font-size: 1rem; margin-bottom: 1.2rem; }
.form-group { margin-bottom: 1.2rem; position: relative; }
.form-group label { display: block; font-size: 0.8rem; color: var(--white-70); margin-bottom: 0.4rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.predictive-box input { width: 100%; padding: 0.7rem; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); color:#fff; border-radius:6px; outline:none; }
.autocomplete-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: #061f3d; border: 1px solid var(--steel-glow); border-radius: 8px; z-index: 100; max-height: 180px; overflow-y: auto; margin-top: 4px; }
.dropdown-opt { padding: 0.65rem 1rem; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dropdown-opt:hover { background: var(--steel); }

.production-chart-box { padding: 1.5rem; display: flex; flex-direction: column; }
.chart-header-inline-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
.integrated-live-kpi-block { display: flex; flex-direction: column; text-align: right; }
.live-kpi-sublabel { font-size: 0.72rem; color: var(--white-40); text-transform: uppercase; font-family: var(--font-heading); letter-spacing: 0.5px; }
.live-kpi-value-display { font-size: 1.4rem; font-weight: 700; color: var(--steel-glow); font-family: var(--font-heading); margin-top: 0.1rem; }
.chart-canvas-wrapper { position: relative; width: 100%; height: 260px; margin: auto; }

/* CALENDARIO */
.calendar-section-container { padding: 1.5rem; }
.calendar-grid-macro { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 1.2rem; margin-bottom: 1.5rem; }
.calendar-day-cell { background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); min-height: 90px; border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.calendar-day-cell:hover { background: rgba(112, 161, 199, 0.1); border-color: var(--steel-glow); }
.calendar-day-cell.active-selected { background: rgba(74, 116, 149, 0.25); border-color: var(--steel-glow); box-shadow: inset 0 0 8px rgba(112, 161, 199, 0.3); }
.day-number-label { font-size: 0.8rem; font-weight: 600; color: var(--white-40); }
.micro-tag-event { font-size: 0.62rem; font-weight: 600; padding: 2px 4px; border-radius: 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.micro-tag-event.cobranza { background: rgba(16, 185, 129, 0.15); color: var(--green-glow); border: 1px solid rgba(16, 185, 129, 0.3); }
.calendar-agenda-day-view { border-top: 1px solid var(--glass-border); padding-top: 1.5rem; }
.agenda-cards-loop { display: flex; flex-direction: column; gap: 0.6rem; }
.agenda-mini-line-item { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.04); padding: 0.9rem 1.2rem; border-radius: 8px; font-size: 0.88rem; display: flex; align-items: center; gap: 0.8rem; }
.agenda-indicator-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.agenda-indicator-dot.cobranza { background: var(--green-glow); box-shadow: 0 0 8px var(--green-glow); }

/* CLIENTES Y PÓLIZAS */
.clientes-module-layout { display: flex; flex-direction: column; gap: 1.2rem; }
.search-clients-header { padding: 1.2rem; }
.search-clients-header input { width: 100%; background: transparent; border: none; outline: none; color: white; font-size: 1.1rem; }
.clients-split-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.5rem; }
.clients-results-sidebar { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.client-result-item-card { padding: 1.1rem; cursor: pointer; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 12px; }
.client-result-item-card:hover, .client-result-item-card.active { background: rgba(74, 116, 149, 0.15); border-color: var(--steel-glow); }
.c-res-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; }
.c-res-type-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-right: 0.3rem; }
.c-res-type-badge.contratante { background: rgba(112, 161, 199, 0.2); color: var(--steel-glow); }

.client-map-detail-panel { display: flex; flex-direction: column; gap: 1.2rem; }
.client-title-display { font-size: 1.4rem; color: #fff; font-family: var(--font-heading); font-weight: 700; }
.hierarchy-label { font-size: 0.7rem; font-weight: 700; color: var(--white-40); letter-spacing: 1px; display: block; margin-bottom: 0.4rem; }
.contratante-main-card { padding: 1.5rem; border-left: 4px solid var(--steel-glow); }
.asegurados-hierarchy-box { padding: 1.5rem; }
.node-titular-box { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.15); padding: 0.8rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.node-dependientes-area { padding-left: 0.5rem; font-size: 0.88rem; }
.dependientes-clean-list { margin-top: 0.5rem; padding-left: 1.2rem; }
.dependientes-clean-list li { margin-bottom: 0.4rem; color: var(--white-70); }
.contactos-hierarchy-box { padding: 1.5rem; }
.sub-card-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight:600; margin-bottom: 1rem; color: var(--white-40); text-transform: uppercase; }
.contactos-loop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.contact-mini-card-node { background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.15); padding: 0.8rem; border-radius: 8px; font-size: 0.85rem; }
.contact-node-name { font-weight: 600; font-size: 0.9rem; color: #fff; }

.polizas-module-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; }
.polizas-sidebar-ramos { display: flex; flex-direction: column; gap: 1.2rem; }
.ramos-navigator-card { padding: 1.2rem; }
.filter-panel-title { display: block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; color: var(--white-40); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 1rem; }
.vertical-ramos-menu { display: flex; flex-direction: column; gap: 0.6rem; }
.ramo-nav-btn { width: 100%; text-align: left; padding: 0.9rem 1.2rem; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); color: var(--white-70); font-size: 0.9rem; }
.ramo-nav-btn:hover, .ramo-nav-btn.active { background: rgba(74, 116, 149, 0.2); border-color: var(--steel-glow); color: white; }
.static-production-box { padding: 1.5rem; text-align: center; background: rgba(74, 116, 149, 0.06); }
.static-total-premium { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--steel-glow); margin-top: 0.4rem; }
.polizas-main-content-area { display: flex; flex-direction: column; gap: 1.5rem; }
.polizas-data-card-wrapper { padding: 1.2rem; }
.polizas-subtabs-row { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 0.5rem; }
.poliza-subtab-btn { background: transparent; color: var(--white-40); padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.88rem; }
.poliza-subtab-btn:hover, .poliza-subtab-btn.active { color: white; background: rgba(255,255,255,0.05); }
.poliza-subtab-btn.active { border-bottom: 2px solid var(--steel-glow); border-radius: 6px 6px 0 0; }
.polizas-table-container { overflow-x: auto; }
.table-premium-glass { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.88rem; }
.table-premium-glass th { font-family: var(--font-heading); font-weight: 600; color: var(--white-40); padding: 0.75rem 1rem; border-bottom: 1px solid var(--glass-border); font-size: 0.75rem; text-transform: uppercase; }
.table-premium-glass td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
.table-premium-glass tbody tr td:first-child strong { color: var(--steel-glow); cursor: pointer; text-decoration: underline; }
.table-premium-glass tbody tr td:nth-child(2) { color: var(--white); cursor: pointer; font-weight: 500; }
.table-premium-glass tbody tr td:nth-child(2):hover { color: var(--steel-glow); text-decoration: underline; }

.agentes-metrics-card { padding: 1.5rem; }
.agentes-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.agent-metric-item-card { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); padding: 1rem; border-radius: 10px; }
.ag-card-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; color: var(--steel-glow); margin-bottom: 0.4rem; }
.ag-stat-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--white-70); }
.ag-stat-val { font-weight: 600; color: white; }

/* ============================================================
   NUEVO MAQUETADO: SECCIÓN COBRANZA (3D DOBLE COLUMNA)
   ============================================================ */
.cobranza-module-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; }
.cobranza-sidebar-controls { display: flex; flex-direction: column; gap: 1.2rem; }
.search-cobranza-header { padding: 1.2rem; }
.search-cobranza-header input { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); border-radius: 8px; padding: 0.7rem; color: white; outline: none; margin-top: 0.5rem; }
.status-filter-panel-cobranza { padding: 1.2rem; }
.vertical-cobranza-menu { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.cobranza-filter-btn { width: 100%; text-align: left; padding: 0.9rem 1.2rem; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); color: var(--white-70); font-size: 0.88rem; }
.cobranza-filter-btn:hover, .cobranza-filter-btn.active { color: white; background: rgba(74, 116, 149, 0.2); border-color: var(--steel-glow); }
.cobranza-filter-btn.status-vencida.active { border-color: var(--red-glow); background: rgba(239, 68, 68, 0.15); color: var(--red-glow); }
.cobranza-filter-btn.status-porvencer.active { border-color: var(--amber-glow); background: rgba(245, 158, 11, 0.15); color: var(--amber-glow); }
.cobranza-filter-btn.status-aplicada.active { border-color: var(--green-glow); background: rgba(16, 185, 129, 0.15); color: var(--green-glow); }

.cobranza-main-content-area { display: flex; flex-direction: column; gap: 1.5rem; }
.cobranza-kpis-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.kpi-mini-cob { padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.kpi-mini-cob div { font-size: 0.8rem; text-transform: uppercase; color: var(--white-40); font-family: var(--font-heading); font-weight: 600; }
.kpi-mini-cob h4 { font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; color: white; }

/* SEMÁFORO DE FILAS DENTRO DE LA CARTERA */
.row-status-vencida { border-left: 4px solid var(--red-glow); background: rgba(239, 68, 68, 0.02); }
.row-status-porvencer { border-left: 4px solid var(--amber-glow); background: rgba(245, 158, 11, 0.02); }
.row-status-aplicada { border-left: 4px solid var(--green-glow); background: rgba(16, 185, 129, 0.02); }

.badge-vencida { background: rgba(239, 68, 68, 0.2); color: var(--red-glow); border: 1px solid var(--red-glow); }
.badge-porvencer { background: rgba(245, 158, 11, 0.2); color: var(--amber-glow); border: 1px solid var(--amber-glow); }
.badge-aplicada { background: rgba(16, 185, 129, 0.2); color: var(--green-glow); border: 1px solid var(--green-glow); }

/* SINIESTROS CENTRADO */
.siniestros-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; height: 560px; }
.siniestros-sidebar { display: flex; flex-direction: column; gap: 1rem; max-height: 100%; }
.search-filter-card { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.search-box-container input { width: 100%; padding: 0.65rem 1rem; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); border-radius: 8px; color: white; outline: none; }
.status-badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.status-filter-btn { background: rgba(255,255,255,0.02); border: 1px solid var(--glass-border); border-radius: 4px; color: var(--white-70); font-size: 0.72rem; padding: 6px; cursor: pointer; }
.status-filter-btn:hover, .status-filter-btn.active { background: var(--steel); color: white; }
.siniestros-list-container { overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.siniestro-item-card { padding: 1rem; cursor: pointer; border-left: 4px solid var(--amber-glow); background: rgba(255,255,255,0.01); border-radius: 8px; }
.s-item-title-row { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.88rem; }
.s-item-meta { font-size: 0.78rem; color: var(--white-40); margin-top: 0.3rem; }
.siniestros-detail-view { overflow-y: auto; height: 100%; }
.detail-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; color: var(--white-40); padding: 2rem; }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.detail-active-content { display: flex; flex-direction: column; gap: 1.2rem; }
.current-siniestro-header { padding: 1.5rem; }
.detail-main-title { font-family: var(--font-heading); font-size: 1.25rem; }
.detail-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; font-size: 0.88rem; margin-top: 1rem; }

/* PERMISOS Y PERFIL */
.acl-card { padding: 2.2rem; max-width: 100%; margin: 0 auto; }
.acl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid var(--white-10); padding-bottom: 1rem; }
.acl-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.acl-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.15); padding: 1.2rem 1.5rem; border-radius: 12px; border: 1px solid var(--glass-border); }
.acl-info { display: flex; flex-direction: column; gap: 0.3rem; }
.acl-name { font-weight: 600; font-size: 1rem; color: white; font-family: var(--font-heading); }
.acl-desc { font-size: 0.82rem; color: var(--white-70); }

.toggle { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.track { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(255,255,255,0.08); border-radius:24px; transition: 0.3s; border: 1px solid var(--glass-border); }
.thumb { position: absolute; height:18px; width:18px; left:3px; bottom:3px; background: var(--white-40); border-radius:50%; transition: 0.3s; }
.toggle input:checked + .track { background: linear-gradient(135deg, var(--steel) 0%, var(--steel-glow) 100%); }
.toggle input:checked + .track .thumb { transform: translateX(22px); background: white; }
.acl-footer { display: flex; align-items: center; border-top: 1px solid var(--white-10); padding-top: 1.5rem; }

.profile-card { padding: 2.2rem; max-width: 100%; margin: 0 auto; }
.profile-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2rem; }
.profile-form-block { display: flex; flex-direction: column; gap: 1.4rem; }
.profile-footer { display: flex; align-items: center; border-top: 1px solid var(--white-10); padding-top: 1.5rem; }

/* ============================================================
   RECUADRO TRANSLÚCIDO (MODAL FLOTANTE MAESTRO 3D)
   ============================================================ */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 17, 36, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: all 0.3s ease; }
.modal-card { width: 100%; max-width: 680px; padding: 2.2rem; position: relative; }
.modal-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--white-10); padding-bottom: 0.8rem; }
.modal-header-row h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: white; }
.btn-close-x { background: transparent; border: none; color: var(--white-40); font-size: 1.8rem; cursor: pointer; font-weight: 300; transition: color 0.2s; }
.btn-close-x:hover { color: var(--red-glow); }

.modal-grid-clinical-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 2rem; }
@media (max-width: 550px) { .modal-grid-clinical-body { grid-template-columns: 1fr; } }
.modal-clinical-item { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.03); padding: 0.85rem 1.1rem; border-radius: 8px; font-size: 0.88rem; line-height: 1.4; color: var(--white-70); }
.modal-clinical-item strong { display: block; font-size: 0.75rem; text-transform: uppercase; color: var(--white-40); font-family: var(--font-heading); margin-bottom: 0.2rem; letter-spacing: 0.3px; }
.highlight-steel { color: var(--steel-glow) !important; font-weight: 600; }
.modal-footer-action-row { border-top: 1px solid var(--white-10); padding-top: 1.2rem; }

.footer { text-align: center; padding: 1.8rem; font-size: 0.8rem; color: var(--white-40); border-top: 1px solid var(--white-10); width: 100%; margin-top: auto; background: #021124; z-index: 10; }
.toast { background: var(--green-glow); color: white; padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.85rem; }
.badge { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; display: inline-block; }