/* =========================
   BASE
   ========================= */
html, body{
    font-family: 'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    font-size:14px; color:#212529;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Inter',sans-serif; font-weight:600; color:#1F3B57; letter-spacing:-.5px;
}
.navbar,.btn,.table,.form-control,.dropdown-menu{ font-family:'Inter',sans-serif; font-size:14px; }
.navbar-inverse{ background:#1F3B57; }
.breadcrumb-elements>li>a{ color:#2C3E50; }

/* Tokens */
:root{
    --primary:#1E3A8A;      /* navy corporativo */
    --accent:#FF5C33;       /* acento */
    --text:#0F172A;
    --muted:#475569;
    --border:#E5E7EB;
    --bg:#FFFFFF;
    --bg-soft:#F8FAFC;

    --blue-gray:#37474F;    /* compat para acordeones */
    --hdr-bg:#F8FAFC;
    --hdr-bg-hov:#EEF2F7;
    --hdr-bg-act:#E9EEF7;
    --text-900:#111827;
}

/* =========================
   UTILIDADES / GENERALES
   ========================= */
.text-center{ text-align:center !important; }
.highlight{ background:yellow; font-weight:700; }

/* SweetAlert */
.swal-wide{ border-radius:10px; font-family:'Segoe UI',sans-serif; }
.swal2-popup .swal2-title{ font-size:20px; font-weight:600; color:#1a80ad; }
.swal2-confirm.btn-primary{ background:#1a80ad; border:0; padding:8px 25px; border-radius:6px; font-weight:500; }

/* Progress */
.progress{ height:16px; border-radius:0; }
.progress .progress-bar{ font-size:11px; line-height:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; }
.progress-bar.progress-danger{ background:#EF4444; }
.progress-bar.progress-warning{ background:#F59E0B; }
.progress-bar.progress-info{ background:#3B82F6; }
.progress-bar.progress-success{ background:#22C55E; }

/* Badges (consolidadas) */
.badge{
    display:inline-block; border-radius:999px; padding:4px 10px; font-weight:600; font-size:12px; line-height:1;
}
.badge-success,.badge-yes{
    color:#166534; background:#DCFCE7; border:1px solid #86EFAC;
}
.badge-danger,.badge-no{
    color:#991B1B; background:#FEE2E2; border:1px solid #FCA5A5;
}



/* =========================
   DATATABLES / LISTADOS
   ========================= */
/* Header del panel */
.datatable-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; padding-right:10px; }
#filter-summary{ color:#64748B !important; font-weight:500; padding-left:8px; border-left:1px solid #e5e7eb; line-height:1.2; margin-left:15px !important; display:inline-block; margin-top:0px; }
.custom-page-title{ font-size:20px; font-weight:600; color:#2C3E50; margin:0 0 10px 15px; display:flex; align-items:center; gap:10px;padding-left: 15px }

/* Filtros (partial) */
#filters-form{
    background:#F8FAFC; border:1px solid #E5E7EB; border-radius:12px; padding:12px 14px; margin:10px 16px 12px;
}
#filters-form .form-group label{ font-weight:600; color:#334155; margin-bottom:6px; }
#filters-form .form-control,#filters-form .custom-select{ height:42px; border-radius:10px; }
#filters-form input.has-value,#filters-form select.has-value{ background:#FFF7E6; border-color:#F0AD4E; }
.btn-filter{ background:#FF5A1F; border:1px solid #FF5A1F; color:#fff; border-radius:10px; padding:8px 14px; font-weight:700; box-shadow:0 2px 8px rgba(255,90,31,.15); }
.btn-filter:hover{ background:#E4511D; border-color:#E4511D; }

/* Longitud (25/50/100) */
.dt-length-temp{ display:inline-flex; align-items:center; gap:8px; }
.dt-length-temp select{
    height:36px; border:1px solid var(--border); border-radius:10px; padding:4px 28px 4px 10px; background:#fff; cursor:pointer;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url('data:image/svg+xml;utf8,<svg fill="gray" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}

/* Tabla corporativa */
.table-responsive-custom{ padding:0 16px; overflow-x:visible; } /* sin scroll lateral */
.table-responsive-custom table{ width:100% !important; margin-bottom:0; }

#generic-table{
    border:1px solid var(--border); border-radius:12px 12px 0 0; overflow:hidden; background:#fff;
}
/* THEAD claro unificado */
#generic-table thead th{
    background:#F8FAFC !important; color:#334155 !important; font-weight:700; font-size:13px;
    border-bottom:1px solid #E5E7EB !important; padding:12px 14px; position:sticky; top:0; z-index:5;
}
#generic-table thead th:first-child{ border-top-left-radius:12px; }
#generic-table thead th:last-child{ border-top-right-radius:12px; }
/* Indicadores de orden */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{ position:relative; padding-right:18px !important; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after{
    content:"▾"; position:absolute; right:8px; top:50%; transform:translateY(-46%); opacity:.5; font-size:11px; color:#64748B; transition:color .2s,opacity .2s;
}
table.dataTable thead .sorting:hover:after{ color:var(--primary); opacity:.85; }
table.dataTable thead .sorting_asc:after{ content:"▴"; color:var(--primary); opacity:.9; }
table.dataTable thead .sorting_desc:after{ content:"▾"; color:var(--primary); opacity:.9; }

/* Celdas y filas */
#generic-table tbody td{
    vertical-align:middle; padding:12px 14px; color:var(--text); border-top:1px solid #EEF2F7 !important;
}
/* Stripe sutil — DataTables usa .odd/.even */
#generic-table tbody tr.odd td{ background:#FFFFFF !important; }        /* más limpio */
#generic-table tbody tr.even td{ background:#FAFBFF !important; }       /* gris/azulado muy suave */
#generic-table tbody tr:hover td{ background:#F1F5F9 !important; }

/* Columna énfasis */
#generic-table td.col-emphasis{ font-weight:700; color:#0F172A; letter-spacing:.2px; }

/* Estado vacío */
.dataTables_empty{ color:#94A3B8 !important; font-style:italic; background:#FAFBFC !important; }

/* Paginación */
.dataTables_wrapper .dataTables_paginate .pagination{ gap:6px; padding:10px 14px; }
.pagination .page-link{
    border:1px solid var(--border); background:#fff; color:#334155; border-radius:10px; padding:6px 10px;
    transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pagination .page-link:hover{ background:#F1F5F9; border-color:#CBD5E1; }
.pagination .page-item.active .page-link{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Loader listado */
.overlay-loader{
    position:absolute; inset:0; background:rgba(255,255,255,.8); z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-weight:600; font-size:1rem; color:#334155; backdrop-filter:blur(1px);
}
.overlay-loader .spinner{
    width:40px; height:40px; border:5px solid var(--primary); border-top:5px solid transparent; border-radius:50%;
    animation:spin .8s linear infinite; margin-bottom:10px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Botón/menú de acciones (consolidado) */
.dropdown-custom-wrapper{ position:relative; display:inline-block; }
.btn-action,
.dropdown-custom-wrapper .btn-custom-action{
    width:34px; height:34px; border:1px solid var(--border); background:#F8FAFC; color:var(--primary); border-radius:10px; padding:0;
    display:inline-grid; place-items:center; transition:background .15s, color .15s, box-shadow .15s, border-color .15s; cursor:pointer;
}
.btn-action:hover,.dropdown-custom-wrapper .btn-custom-action:hover{ background:#EFF4FA; color:var(--primary); box-shadow:0 4px 12px rgba(2,6,23,.08); }
.dropdown-custom-menu{
    display:none; position:absolute; right:0; top:100%; min-width:230px; background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 12px 30px rgba(2,6,23,.12), 0 2px 6px rgba(2,6,23,.06); padding:6px 0; list-style:none; z-index:999;
}
.dropdown-custom-wrapper.show .dropdown-custom-menu,
.dropdown-custom-wrapper.open .dropdown-custom-menu{ display:block; }
.dropdown-custom-menu li a{
    display:flex; align-items:center; gap:8px; padding:10px 12px; text-decoration:none; color:#333; border-radius:8px; transition:background .2s,color .2s;
}
.dropdown-custom-menu li a:hover{ background:#F8FAFC; color:var(--primary); }

/* Alineación de Actions */
#generic-table th.text-center,#generic-table td.text-center{ text-align:center !important; }
#generic-table td.text-center{ padding:10px 8px; }

/* =========================
   CARDS / FORMS (consolidados)
   ========================= */
.card,.panel,.panel-flat{ border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(17,24,39,.06); }
.panel .panel-body,.card .card-body{ padding:24px; }
.card-title,.panel .card-title,h5.card-title{ font-weight:700; letter-spacing:.2px; color:#37474F; margin-bottom:18px; }

.form-group label{ font-weight:600; color:#1f2937; margin-bottom:6px; }
.form-group label .req{ color:#DC2626; margin-left:4px; font-weight:700; }
.form-control,.custom-select{
    height:44px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#111827;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-control::placeholder{ color:#9CA3AF; }
.form-control:hover{ background:#FCFDFE; }
.form-control:focus,.custom-select:focus{ border-color:rgba(30,58,138,.35); box-shadow:0 0 0 .22rem rgba(30,58,138,.15); outline:0; }
textarea.form-control{ min-height:110px; padding-top:10px; }
.form-group{ margin-bottom:18px; }
.form-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; margin-top:10px; }
.form-control:disabled,.form-control[readonly]{ background:#F3F4F6; color:var(--muted); opacity:1; }

/* Títulos de panel con línea */
.panel-title{ position:relative; padding-bottom:8px; margin-bottom:15px; font-weight:700; }
.panel-title::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#1F3B57; border-radius:2px; }

/* =========================
   KPI / EXTRA (sin cambios funcionales)
   ========================= */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:992px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:576px){ .kpi-grid{ grid-template-columns:1fr; } }
.kpi-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.kpi-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.kpi-title{ font-weight:600; color:#334155; flex:1; }
.kpi-badge{ font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:#475569; background:#F8FAFC; white-space:nowrap; }
.kpi-good{ color:#166534; background:#DCFCE7; border-color:#86EFAC; }
.kpi-warn{ color:#9A3412; background:#FFEDD5; border-color:#FDBA74; }
.kpi-neutral{ color:#475569; background:#F1F5F9; border-color:#E2E8F0; }
.kpi-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#fff; }
.kpi-primary{ background:var(--primary); }
.kpi-accent{ background:var(--accent); }
.kpi-success{ background:#16A34A; }
.kpi-info{ background:#0E7490; }
.kpi-body{ margin-top:6px; }
.kpi-value{ font-size:1.6rem; font-weight:700; color:#0F172A; letter-spacing:.2px; }
.kpi-sub{ color:#64748B; font-size:.85rem; margin-top:2px; }
.kpi-progress{ margin-top:10px; height:8px; background:#EEF2F7; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.kpi-progress-bar{ height:100%; background:linear-gradient(90deg,var(--primary),#0E7490); border-radius:999px; }
.kpi-foot{ margin-top:8px; font-size:.78rem; color:#64748B; }



/* =========================
   NOTIFICATIONS (dropdown y center)
   ========================= */
/* (Se mantienen tus estilos “nc- / nd-” tal cual, no tenían duplicados funcionales) */
#notifDropdown .dropdown-menu{
    padding:0; width:420px; max-width:96vw; max-height:70vh; overflow:auto; border:none;
    border-radius:12px; box-shadow:0 12px 30px rgba(2,6,23,.18);
}
/* Header */
.nd-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.nd-head strong{ font-weight:700; color:#0f172a; }
.nd-head a{ font-size:12px; color:#0ea5e9; }
.nd-head a:hover{ text-decoration:underline; }
/* Lista + items */
#notifList{ list-style:none; margin:0; padding:0; }
.nd-item{ display:flex; padding:12px 0; border-bottom:1px solid #f1f5f9; }
.nd-item:last-child{ border-bottom:0; }
.nd-strip{ width:8px; border-radius:0 6px 6px 0; margin-right:12px; }
.nd-strip.info{ background:#0ea5e9; } .nd-strip.success{ background:#22c55e; } .nd-strip.warning{ background:#f59e0b; } .nd-strip.danger{ background:#ef4444; }
.nd-body{ padding:0 14px 0 0; flex:1; }
.nd-row1{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.nd-title{ font-weight:600; color:#0f172a; }
.nd-type{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:999px; color:#0f172a; background:#e2e8f0; }
.nd-type.info{ background:#e0f2fe; color:#075985; } .nd-type.success{ background:#dcfce7; color:#065f46; }
.nd-type.warning{ background:#ffedd5; color:#9a3412; } .nd-type.danger{ background:#fee2e2; color:#7f1d1d; }
.nd-message{ color:#475569; font-size:12px; line-height:1.35; }
.nd-row2{ margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nd-time{ font-size:11px; color:#94a3b8; margin-right:auto; }
.nd-actions .btn{ padding:4px 10px; font-size:12px; line-height:1.2; border-radius:8px; }
.nd-actions .btn-success{ background:#22c55e; border-color:#22c55e; } .nd-actions .btn-success:hover{ background:#16a34a; border-color:#16a34a; }
.nd-actions .btn-default{ background:#fff; border-color:#e2e8f0; color:#0f172a; } .nd-actions .btn-default:hover{ background:#f8fafc; }
.nd-item:hover{ background:#f8fafc; }

/* Notifications Center (“nc-”) — tus estilos originales depurados no tenían solapes, se mantienen */
.nc-wrap{ margin:12px 0 24px; }
.nc-page-title{ margin:0 0 14px; font-weight:800; color:#0f172a; }
.nc-divider{ height:2px; background:linear-gradient(90deg,#0ea5e9 0,#38bdf8 40%,transparent 40%); border:0; margin:8px 0 18px; }
/* ... (resto de reglas nc- tal como las tenías, sin duplicados) */

/* === DASHBOARD — FIXES ESPECÍFICOS === */

/* ESPACIADO ENTRE SECCIONES */
.kpi-grid{ margin: 12px 0 16px; }
.ah-trio{  margin: 6px 0 16px; }

/* KPI GRID (4-3-2-1 columnas responsivo) */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
@media (max-width:1200px){ .kpi-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:992px){  .kpi-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:576px){  .kpi-grid{ grid-template-columns:1fr;} }

/* KPI CARD: vuelve el borde, radio, padding y sombra sutil */
.kpi-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.kpi-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.kpi-title{ font-weight:600; color:#334155; flex:1; }
.kpi-badge{ font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid #E5E7EB; background:#F8FAFC; color:#475569; white-space:nowrap; }
.kpi-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:#fff; }
.kpi-primary{ background:#1E3A8A; } .kpi-accent{ background:#FF5C33; } .kpi-success{ background:#16A34A; } .kpi-info{ background:#0E7490; }
.kpi-value{ font-size:1.6rem; font-weight:700; color:#0F172A; letter-spacing:.2px; }
.kpi-sub{ color:#64748B; font-size:.85rem; margin-top:2px; }
.kpi-progress{ margin-top:10px; height:8px; background:#EEF2F7; border-radius:999px; overflow:hidden; border:1px solid #E5E7EB; }
.kpi-progress-bar{ height:100%; background:linear-gradient(90deg,#1E3A8A,#0E7490); border-radius:999px; }
.kpi-foot{ margin-top:8px; font-size:.78rem; color:#64748B; }

/* TRÍO DE CARDS DEL SEGUNDO BLOQUE */
.ah-trio{
    display:grid !important;
    grid-template-columns:1fr 1.5fr 1fr;
    gap:16px;
}
@media (max-width:1200px){ .ah-trio{ grid-template-columns:1fr 1fr; } }
@media (max-width:768px){  .ah-trio{ grid-template-columns:1fr; } }

/* AH CARD: contenedor uniforme */
.ah-card{
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:12px;
    padding:16px;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.ah-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.ah-head h6{ margin:0; font-weight:700; color:#0F172A; }
.ah-muted{ color:#64748B; font-size:.85rem; }

/* DONUT: centro blanco y capa superior bien ordenada */
.ah-donut-wrap{ display:flex; align-items:center; gap:18px; }
.ah-donut{ position:relative; width:160px; height:160px; border-radius:50%; }
.ah-donut::after{ content:""; position:absolute; inset:14px; background:#fff; border-radius:50%; }
.ah-donut-center{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:1; }
.ah-donut-value{ font-size:1.4rem; font-weight:800; color:#0F172A; line-height:1;margin-top: 64px; }
.ah-donut-sub{ color:#6B7280; font-size:.85rem; }
.ah-legend{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ah-legend li{ display:flex; align-items:center; gap:8px; color:#0F172A; }
.ah-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.ah-dot-primary{ background:#2563EB; } .ah-dot-accent{ background:#9333EA; } .ah-dot-warn{ background:#F59E0B; } .ah-dot-muted{ background:#94A3B8; }

/* LISTAS */
.ah-listy{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ah-listy li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid #E5E7EB; border-radius:12px; background:#fff; }
.ah-title{ font-weight:600; color:#0F172A; }
.ah-sub{ font-size:.85rem; }
.ah-chip{ font-size:.75rem; padding:2px 8px; border-radius:999px; border:1px solid; margin-right:6px; }
.ah-chip-warn{ color:#9A3412; background:#FFEDD5; border-color:#FDBA74; }
.ah-chip-ok{ color:#166534; background:#DCFCE7; border-color:#86EFAC; }
.ah-mini-progress{ display:inline-block; width:120px; height:8px; background:#EEF2F7; border:1px solid #E5E7EB; border-radius:999px; overflow:hidden; }
.ah-mini-progress i{ display:block; height:100%; background:linear-gradient(90deg,#1E3A8A,#0E7490); }

/* TIMELINE */
.ah-timeline{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ah-timeline li{ display:flex; align-items:flex-start; gap:10px; }
.ah-bullet{ width:10px; height:10px; border-radius:50%; margin-top:6px; }
.ah-bullet-primary{ background:#2563EB; } .ah-bullet-accent{ background:#9333EA; } .ah-bullet-warn{ background:#F59E0B; }

/* TABLA INFERIOR DENTRO DEL DASHBOARD (si aplica) */
.dashboard table.table,
#dashboard table.table{
    margin-top:12px;
    background:#fff;
    border-radius:12px 12px 0 0;
    overflow:hidden;
}
.dashboard table.table thead th,
#dashboard table.table thead th{
    background:#F8FAFC;
    color:#334155;
    font-weight:700;
    border-bottom:1px solid #E5E7EB;
}

/* =========================
   NOTIFICATIONS CENTER (scoped)
   ========================= */

/* Fallback tokens por si no existen */
:root{
    --nc-primary: var(--primary, #1E3A8A);
    --nc-border:  var(--border,  #E5E7EB);
    --nc-soft:    #F8FAFC;
    --nc-text:    #0F172A;
    --nc-muted:   #64748B;
}

/* Wrapper y cabeceras */
.nc-wrap{ margin:12px 0 24px; }
.nc-page-title{ margin:0 0 14px; font-weight:800; color:var(--nc-text); }
.nc-divider{
    height:2px; border:0; margin:8px 0 18px;
    background:linear-gradient(90deg,#0ea5e9 0,#38bdf8 40%,transparent 40%);
}
.nc-section-title{ font-weight:700; color:var(--nc-text); margin:16px 0 10px; }

/* Tarjeta contenedora */
.nc-card{
    background:#fff;
    border:1px solid var(--nc-border);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(2,6,23,.06);
    overflow:hidden;
}

/* Tabla */
.nc-table{ width:100%; border-collapse:separate; border-spacing:0; }
.nc-table th,.nc-table td{ padding:16px 14px; vertical-align:middle; }
.nc-table thead th{
    font-weight:700; color:#475569;
    background:var(--nc-soft);
    border-bottom:1px solid var(--nc-border);
}
.nc-table tbody tr{ border-bottom:1px solid #F1F5F9; }
.nc-table tbody tr:last-child{ border-bottom:0; }
.nc-table tbody tr:hover{ background:var(--nc-soft); }

/* Mensaje vacío */
.nc-empty{ padding:20px 14px; color:#94a3b8; font-style:italic; }

/* Texto de celdas */
.nc-title{ font-weight:600; color:var(--nc-text); }
.nc-message{
    color:#475569; font-size:13px; line-height:1.35; max-width:900px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nc-created{ color:#64748B; font-size:13px; }

/* Pills de tipo */
.nc-pill{
    display:inline-block; font-size:12px; line-height:1;
    padding:6px 10px; border-radius:999px; font-weight:700;
    background:#e2e8f0; color:#0f172a;
}
.nc-pill.info{    background:#e0f2fe; color:#075985; }
.nc-pill.success{ background:#dcfce7; color:#065f46; }
.nc-pill.warning{ background:#ffedd5; color:#9a3412; }
.nc-pill.danger{  background:#fee2e2; color:#7f1d1d; }

/* Acciones alineadas a la derecha (los botones se definen abajo) */
.nc-actions{
    display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:nowrap;
}

/* Botones “soft” y “primary solid” (scoped) */
.nc-actions .btn,
.nc-btn-primary,
.nc-btn-soft,
.btn-soft,
.btn-primary-solid{
    height:36px; padding:0 14px; font-size:13px; line-height:1;
    border-radius:10px; box-shadow:0 1px 0 rgba(2,6,23,.04);
}

.btn-soft,
.nc-actions .btn.btn-soft,
.nc-btn-soft{
    background:#fff; border:1px solid var(--nc-border); color:var(--nc-text);
}
.btn-soft:hover,
.nc-actions .btn.btn-soft:hover,
.nc-btn-soft:hover{ background:var(--nc-soft); }

.btn-primary-solid,
.nc-btn-primary{
    background:#22c55e; border:1px solid #22c55e; color:#fff;
}
.btn-primary-solid:hover,
.nc-btn-primary:hover{
    background:#16a34a; border-color:#16a34a; color:#fff;
    box-shadow:0 2px 8px rgba(22,163,74,.25);
}

/* Utilidad por si no existe en tu hoja */
.text-right{ text-align:right !important; }

/* Responsive: en móvil ocultar thead y apilar */
@media (max-width: 992px){
    .nc-table thead{ display:none; }
    .nc-table tbody tr{ display:block; padding:12px 10px; }
    .nc-table tbody td{ display:block; padding:8px 10px; border-bottom:0; }
    .nc-table tbody tr + tr{ border-top:1px solid #EEF2F7; }
    .nc-actions{ justify-content:flex-start; gap:6px; flex-wrap:wrap; }
    .nc-actions .btn{ width:100% !important; }
}

/* ============ MODAL ============ */
#notifModal .modal-dialog{ max-width:720px; width:96%; }
#notifModal .modal-content{
    border:0; border-radius:16px; box-shadow:0 20px 50px rgba(2,6,23,.22); overflow:hidden; position:relative;
}
#notifModal .nc-rail{ position:absolute; left:0; top:0; bottom:0; width:6px; background:#0ea5e9; } /* default info */
#notifModal.info    .nc-rail{ background:#0ea5e9; }
#notifModal.success .nc-rail{ background:#22c55e; }
#notifModal.warning .nc-rail{ background:#f59e0b; }
#notifModal.danger  .nc-rail{ background:#ef4444; }

#notifModal .modal-header{ padding:18px 22px 10px 22px; border:0; }
#notifModal .nc-head{ display:flex; align-items:center; gap:10px; }
#notifModal .nc-title{ margin:10px 0 0; font-size:22px; font-weight:800; color:var(--nc-text); }
#notifModal .nc-time{ color:#94a3b8; font-size:12px; }
#notifModal .nc-pill{ font-weight:800; }
#notifModal.info    .nc-pill{ background:#e0f2fe; color:#075985; }
#notifModal.success .nc-pill{ background:#dcfce7; color:#065f46; }
#notifModal.warning .nc-pill{ background:#ffedd5; color:#9a3412; }
#notifModal.danger  .nc-pill{ background:#fee2e2; color:#7f1d1d; }

#notifModal .modal-body{ padding:12px 22px 6px 22px; }
#notifModal .nc-message{ color:#475569; font-size:15px; line-height:1.6; white-space:pre-wrap; }

#notifModal .modal-footer{
    border:0; padding:16px 22px 22px; display:flex; gap:10px; flex-wrap:wrap;
}
#notifModal .nc-btn-primary{ background:var(--nc-primary); border:1px solid var(--nc-primary); color:#fff; }
#notifModal .nc-btn-primary:hover{ background:#1e40af; border-color:#1e40af; }
#notifModal .close{ opacity:.5; font-size:28px; margin-top:-4px; }
#notifModal .close:hover{ opacity:.9; }

@media (max-width:480px){
    #notifModal .nc-title{ font-size:19px; }
    #notifModal .modal-footer{ justify-content:flex-start; }
}

/* =========================
   DASHBOARD – Tabla “In progress”
   ========================= */

/* Card contenedor */
.table-card{
    background:#fff;
    border:1px solid var(--border, #E5E7EB);
    border-radius:12px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    overflow:hidden; /* respeta el redondeado */
}

/* Tabla base */
.table-card .custom-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:0;
}

/* Cabecera */
.table-card .custom-table thead th{
    background:#F8FAFC;              /* header claro */
    color:#334155;
    font-weight:700;
    padding:12px 14px;
    border-top:0;
    border-bottom:1px solid var(--border, #E5E7EB);
    vertical-align:middle;
}
.table-card .custom-table thead th:first-child{ border-top-left-radius:12px; }
.table-card .custom-table thead th:last-child{  border-top-right-radius:12px; }

/* Celdas */
.table-card .custom-table tbody td{
    padding:12px 14px;
    color:#0F172A;
    vertical-align:middle;
    border-top:1px solid #F1F5F9;
    background:#fff;
}

/* Zebra & hover sutil */
.table-card .custom-table tbody tr:nth-child(even) td{ background:#FBFBFE; }
.table-card .custom-table tbody tr:hover td{ background:#F7FAFC; }

/* Utilidades de alineación (por si Bootstrap no las aplica) */
.text-left{ text-align:left!important; }
.text-center{ text-align:center!important; }

/* --- Badges de estado --- */
.badge{
    display:inline-block;
    font-weight:600;
    font-size:.78rem;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid transparent;
    line-height:1;
}
.badge-pill{ border-radius:999px; }
.badge-warn{
    color:#9A3412;
    background:#FFEDD5;
    border-color:#FDBA74;
}

/* --- Barra de progreso compacta --- */
.progress-custom{
    position:relative;
    height:15px;
    background:#EEF2F7;
    border:1px solid var(--border, #E5E7EB);
    border-radius:999px;
    overflow:hidden;
}
.progress-custom .progress-bar{
    height:100%;
    font-size:11px;
    color:#fff;
    text-align:right;
    padding-right:6px;
    line-height:12px;
    white-space:nowrap;
}
.progress-success{ background:linear-gradient(90deg, #16A34A, #22C55E); }
.progress-warning{ background:linear-gradient(90deg, #F59E0B, #FB923C); }
.progress-danger{  background:linear-gradient(90deg, #DC2626, #EF4444); }

/* --- Menú de acciones (tres puntos) --- */
.dropdown-custom-wrapper{ position:relative; display:inline-block; }
.btn-custom-action{
    width:34px; height:34px;
    border:1px solid var(--border, #E5E7EB);
    background:#F8FAFC;
    color:#1E3A8A;
    border-radius:10px;
    cursor:pointer;
    display:grid; place-items:center;
    transition:background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-custom-action:hover{ background:#EFF4FA; box-shadow:0 4px 12px rgba(2,6,23,.08); }

.dropdown-custom-menu{
    position:absolute;
    right:0; top:40px;
    background:#fff;
    border:1px solid var(--border, #E5E7EB);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(2,6,23,.12), 0 2px 6px rgba(2,6,23,.06);
    padding:6px;
    list-style:none;
    margin:0;
    display:none;
    z-index:30;
}
.dropdown-custom-menu li a{
    display:flex; gap:8px; align-items:center;
    padding:8px 10px; color:#0F172A; border-radius:8px; text-decoration:none;
}
.dropdown-custom-menu li a:hover{ background:#F8FAFC; color:#1E3A8A; }

/* mostrar menú cuando tu JS añade .open (o .show) al wrapper */
.dropdown-custom-wrapper.open .dropdown-custom-menu,
.dropdown-custom-wrapper.show .dropdown-custom-menu{ display:block; }

/* =========================
   LISTADOS – Zebra y hover suaves (DataTables)
   ========================= */

/* Odd (impares) – gris muy sutil */
#generic-table.table-striped > tbody > tr:nth-of-type(odd),
#generic-table tbody tr.odd {
    background-color: #FAFAFA !important;   /* más claro que el gris anterior */
}

/* Even (pares) – blanco o un leve tinte */
#generic-table.table-striped > tbody > tr:nth-of-type(even),
#generic-table tbody tr.even {
    background-color: #FFFFFF !important;    /* o #FBFBFE si quieres un tinte mínimo */
}

/* Asegura que el color llega a las celdas aunque otro CSS pinte el <td> */
#generic-table tbody tr.odd > td,
#generic-table tbody tr.even > td {
    background-color: inherit !important;
}

/* Hover sutil (por encima del zebra) */
#generic-table.table-hover tbody tr:hover,
#generic-table.table-hover tbody tr:hover > td,
#generic-table tbody tr:hover,
#generic-table tbody tr:hover > td {
    background-color: #F6FAFF !important;    /* azul muy claro */
}

/* Quita cualquier “striped” que venga de Bootstrap si compite */
#generic-table.table-striped > tbody > tr > * {
    box-shadow: none !important; /* evita sombreado interno de algunas skins */
}

/* ===== List header (title + summary + length) ===== */
.datatable-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 0 12px;   /* compacto */
}
.custom-page-title{          /* h4 del título */
    margin:0;
}
#filter-summary{
    margin-left:8px;           /* pegado al título */
    padding-left:8px;
    border-left:1px solid #E5E7EB;
    color:#64748B;
    font-weight:500;
}
#custom-length-container{
    margin-left:auto;          /* a la derecha */
    display:flex;
    align-items:center;
}

/* ===== Length control limpio (sin “Show … entries”) ===== */
.dt-length-temp{ display:inline-flex; align-items:center; }
.dt-length-temp label{ font-size:0; margin:0; }          /* ocultar texto “Show … entries” */
.dt-length-temp select{
    font-size:14px;            /* re-aplicar tamaño al select */
    height:36px;
    border:1px solid #E5E7EB;
    border-radius:10px;
    padding:4px 28px 4px 10px;
    background:#fff;
    cursor:pointer;
}
/* Por si DataTables vuelve a renderizar el length fuera: */
#generic-table_length label{ font-size:0; }
#generic-table_length select{ font-size:14px; }


.dataTables_length {
    margin: 10px 0 10px 10px;
}

/* ===== Notifications list – layout fino ===== */
.table-page{ padding:16px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.table-page .page-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:12px;
}
.table-page .page-head h4{ font-weight:700; color:#1E293B; }
.table-page .page-head .btn-primary{ height:36px; padding:0 14px; border-radius:10px; }

.table-page .table-card{ margin-top:4px; } /* aire entre cabecera y tabla */

/* Asegura ancho y estilos de la tabla corporativa aquí también */
.table-page .custom-table{ width:100%; }

/* ===== Notifications list header ===== */
.panel .page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px 16px 8px; /* alinea con el borde de la tabla */
}

/* Botón “New notification” alineado a la derecha */
.btn.btn-new{
    background:#1E3A8A;               /* brand */
    border:1px solid #1E3A8A;
    color:#fff;
    border-radius:12px;
    padding:8px 14px;
    font-weight:700;
    box-shadow:0 3px 10px rgba(30,58,138,.18);
    transition:transform .03s ease, box-shadow .15s ease, filter .15s ease;
}
.btn.btn-new:hover{ filter:brightness(1.05); box-shadow:0 6px 16px rgba(30,58,138,.22); }
.btn.btn-new:active{ transform:translateY(1px); }

/* “Aire” lateral de la tabla dentro del panel */
.panel .table-responsive{ padding: 0 16px 12px; }

/* ===== Pills Yes/No (mejoradas) ===== */
.pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    font-weight:700;
    border:1px solid transparent;
    white-space:nowrap;
}
.pill-success{
    color:#166534;
    background:#DCFCE7;
    border-color:#86EFAC;
}
.pill-muted{
    color:#475569;
    background:#F1F5F9;
    border-color:#E2E8F0;
}

/* ===== Notifications Center – HERO header ===== */
.nc-hero{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    background:#FFFFFF;
    border:1px solid #E5E7EB;
    border-radius:14px;
    box-shadow:0 6px 20px rgba(2,6,23,.05);
    margin: 4px 0 14px;
}
.nc-hero-left{ display:flex; align-items:center; gap:12px; }

.nc-hero-icon{
    width:52px; height:52px; border-radius:14px;
    display:grid; place-items:center;
    color:#fff;
    background: linear-gradient(135deg,#1E3A8A 0%, #0E7490 100%);
    box-shadow: 0 8px 22px rgba(30,58,138,.25);
}

.nc-hero-title{
    margin:0; line-height:1.15;
    font-size:22px; font-weight:800; letter-spacing:.1px;
    color:#0F172A;   /* slate-900 */
}
.nc-hero-sub{
    margin:2px 0 0 0;
    font-size:13px; color:#64748B; /* slate-500 */
}

.nc-hero-right{ display:flex; align-items:center; gap:8px; }

/* CTA del hero (opcional) */
.nc-hero-btn{
    background:#1E3A8A; border:1px solid #1E3A8A; color:#fff;
    border-radius:10px; padding:8px 14px; font-weight:700;
    box-shadow:0 4px 12px rgba(30,58,138,.18);
    transition:transform .03s ease, box-shadow .15s ease, filter .15s ease;
}
.nc-hero-btn:hover{ filter:brightness(1.05); box-shadow:0 8px 18px rgba(30,58,138,.22); }
.nc-hero-btn:active{ transform:translateY(1px); }

/* En pantallas pequeñas el botón salta abajo */
@media (max-width: 640px){
    .nc-hero{ flex-wrap:wrap; padding:14px; }
    .nc-hero-right{ width:100%; justify-content:flex-start; }
}

/* =========================
   SweetAlert2 — Estilo corporativo
   ========================= */
:root{
    --nc-primary:  #1E3A8A;   /* navy corporativo */
    --nc-text:     #0F172A;
    --nc-muted:    #64748B;
    --nc-bg:       #FFFFFF;
    --nc-soft:     #F8FAFC;
    --nc-border:   #E5E7EB;
    --nc-shadow:   0 20px 50px rgba(2,6,23,.15), 0 2px 10px rgba(2,6,23,.06);

    /* Estados */
    --nc-success:  #16A34A;
    --nc-success-bg: #ECFDF5;
    --nc-warning:  #F59E0B;
    --nc-warning-bg: #FFFBEB;
    --nc-info:     #0EA5E9;
    --nc-info-bg:  #E0F2FE;
    --nc-danger:   #DC2626;
    --nc-danger-bg:#FEF2F2;
}

/* Contenedor / backdrop */
.swal2-container{
    padding: 18px !important;
    backdrop-filter: blur(2px);
}

/* Popup base */
.swal2-popup{
    border-radius: 16px !important;
    background: var(--nc-bg) !important;
    border: 1px solid var(--nc-border) !important;
    box-shadow: var(--nc-shadow) !important;
    padding: 20px 22px 18px !important;
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Título + texto */
.swal2-title{
    color: var(--nc-text) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    letter-spacing: .2px;
    margin: 6px 0 2px !important;
}
.swal2-html-container{
    color: var(--nc-muted) !important;
    font-size: 14px !important;
    line-height: 1.5;
    margin: 8px 2px 0 !important;
}

/* Icono “soft chip” */
.swal2-icon{
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--nc-border);
    border-radius: 12px !important;
    width: 68px !important;
    height: 68px !important;
    margin: 6px auto 8px !important;
}
.swal2-icon .swal2-icon-content{ font-size: 32px !important; }

/* Colores por estado */
.swal2-icon.swal2-info{
    color: var(--nc-info) !important;
    background: var(--nc-info-bg) !important;
}
.swal2-icon.swal2-success{
    color: var(--nc-success) !important;
    background: var(--nc-success-bg) !important;
}
.swal2-icon.swal2-warning{
    color: var(--nc-warning) !important;
    background: var(--nc-warning-bg) !important;
}
.swal2-icon.swal2-error{
    color: var(--nc-danger) !important;
    background: var(--nc-danger-bg) !important;
}

/* Acciones / botones */
.swal2-actions{
    margin-top: 16px !important;
    gap: 10px !important;
}
.swal2-styled{
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-width: 120px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: transform .03s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Confirm (primario) */
.swal2-styled.swal2-confirm{
    background: var(--nc-primary) !important;
    border: 1px solid var(--nc-primary) !important;
}
.swal2-styled.swal2-confirm:hover{
    filter: brightness(1.05);
    box-shadow: 0 6px 16px rgba(30,58,138,.22);
}

/* Cancel (ghost) */
.swal2-styled.swal2-cancel{
    background: #fff !important;
    color: var(--nc-text) !important;
    border: 1px solid var(--nc-border) !important;
}
.swal2-styled.swal2-cancel:hover{
    background: var(--nc-soft) !important;
}

/* Focus ring accesible */
.swal2-styled:focus{
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(30,58,138,.22) !important;
}

/* Barra de botones invertida en móvil estrecho (más cómodo) */
@media (max-width: 420px){
    .swal2-actions{ flex-direction: column-reverse; }
    .swal2-styled{ width: 100%; }
}


/* ===== Permisos — look corporativo ===== */
.perm-wrap{ margin-top:6px; }

/* HERO */
.perm-hero{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.06);
    margin-bottom:12px;
}
.perm-hero-left{ display:flex; align-items:center; gap:12px; }
.perm-hero-icon{
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:12px; color:#fff; background:linear-gradient(135deg,#1E3A8A,#0E7490);
    box-shadow:0 6px 18px rgba(30,58,138,.22);
}
.perm-hero-title{ margin:0; font-weight:800; color:#0F172A; letter-spacing:.2px; }
.perm-hero-sub{ margin:2px 0 0; color:#64748B; font-size:13px; }
.perm-hero-email{ font-weight:600; color:#334155; }
.perm-hero-dot{ opacity:.55; margin:0 6px; }
.perm-hero-right .btn{ height:36px; }

/* Cards / acordeones */
.perm-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06); }
.perm-card + .perm-card{ margin-top:10px; }

.perm-acc-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; text-decoration:none !important; color:#111827; font-weight:700;
    background:var(--hdr-bg); border-left:4px solid transparent;
    transition:background .2s ease, border-color .2s ease;
}
.perm-acc-btn:hover{ background:var(--hdr-bg-hov); }
.perm-acc-btn.collapsed{ background:var(--hdr-bg); }
.perm-acc-btn:not(.collapsed){ background:var(--hdr-bg-act); border-left-color:#37474F; }

.perm-acc-btn::after{
    content:""; width:.75rem; height:.75rem;
    border-right:2px solid rgba(17,24,39,.7); border-bottom:2px solid rgba(17,24,39,.7);
    transform:rotate(45deg); transition:transform .2s ease, opacity .2s ease; opacity:.7; margin-left:10px;
}
.perm-acc-btn:not(.collapsed)::after{ transform:rotate(-135deg); opacity:1; }

.perm-card-body{ padding:16px 18px; }

/* Fila de permiso */
.perm-item{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px;
    background:#fff;
}
.perm-item:hover{ background:#F9FAFB; }
.perm-item-title{ font-weight:600; color:#0F172A; display:block; }
.perm-item-text{ display:flex; flex-direction:column; gap:4px; }

/* Estados (chips) */
.perm-item-state{
    display:inline-block; font-size:12px; line-height:1; padding:4px 8px; border-radius:999px;
    border:1px solid var(--border);
}
.perm-item-state.state-granted{ color:#166534; background:#DCFCE7; border-color:#86EFAC; font-weight:700; }
.perm-item-state.state-denied { color:#991B1B; background:#FEE2E2; border-color:#FCA5A5; font-weight:700; }
.perm-item-state.state-role   { color:#075985; background:#E0F2FE; border-color:#BAE6FD; font-weight:700; }
.perm-item-state.state-none   { color:#475569; background:#F1F5F9; border-color:#E2E8F0; }

/* Switch (BootstrapSwitch) – compact y alineado */
.bootstrap-switch{
    border-radius:999px !important; border:1px solid var(--border) !important; box-shadow:none !important;
}
.bootstrap-switch.bootstrap-switch-mini{ min-width:64px; }
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off{
    font-weight:700; padding:4px 10px;
}
.bootstrap-switch .bootstrap-switch-label{ padding:4px 8px; }

/* Barra de acciones */
.perm-actions{
    display:flex; align-items:center; justify-content:flex-end; gap:10px;
    margin-top:14px; padding-top:12px;
    border-top:1px solid var(--border);
}

/* Alert inline spacing */
.perm-alert{ margin:8px 0 12px; }

/* ======================================================
   ROLE PERMISSIONS – look corporativo (match user page)
   ====================================================== */

/* Tokens (fallbacks) */
:root{
    --primary: #1E3A8A;
    --border:  #E5E7EB;
    --bg:      #FFFFFF;
    --soft:    #F8FAFC;
    --muted:   #64748B;
    --text:    #0F172A;
    --success: #16A34A;
    --danger:  #EF4444;
}

/* ---------- HERO (opcional, si lo usas en esta vista) ---------- */
.rp-hero{
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; margin-bottom:14px;
}
.rp-hero-left{ display:flex; gap:12px; align-items:center; }
.rp-hero-icon{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg, #1E3A8A, #0E7490); color:#fff;
    box-shadow:0 6px 18px rgba(30,58,138,.18);
}
.rp-hero-title{ margin:0; font-weight:800; color:var(--text); letter-spacing:.2px; }
.rp-hero-sub{ margin:0; color:var(--muted); font-size:.9rem; }
.rp-hero-actions{ display:flex; gap:8px; }
.rp-hero-actions .btn{
    height:34px; border-radius:10px; padding:0 12px; font-weight:600;
    box-shadow:0 1px 0 rgba(2,6,23,.04);
}
.rp-hero-actions .btn-ghost{ background:#fff; border:1px solid var(--border); color:#0f172a; }
.rp-hero-actions .btn-ghost:hover{ background:#F1F5F9; }

/* ---------- ACCORDION (roles) ---------- */
#permissionsAccordion{ margin-top:8px; }

#permissionsAccordion .card{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.06);
}
#permissionsAccordion .card + .card{ margin-top:10px; }

/* Header de sección */
#permissionsAccordion .card-header{
    background:var(--soft);
    border-bottom:1px solid var(--border);
    padding:0;
}
#permissionsAccordion .card-header .btn.btn-link{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; text-decoration:none !important; color:var(--text);
    font-weight:700; background:transparent; border-left:4px solid transparent;
    transition:background .2s, border-color .2s, color .2s;
}
#permissionsAccordion .card-header .btn.btn-link:hover{ background:#EEF2F7; }
#permissionsAccordion .card-header .btn.btn-link:not(.collapsed){
    background:#E9EEF7; border-left-color:#37474F;
}
/* Chevron */
#permissionsAccordion .card-header .btn.btn-link::after{
    content:""; width:.75rem; height:.75rem;
    border-right:2px solid rgba(17,24,39,.7); border-bottom:2px solid rgba(17,24,39,.7);
    transform:rotate(45deg); opacity:.7; margin-left:10px;
    transition:transform .2s ease, opacity .2s ease;
}
#permissionsAccordion .card-header .btn.btn-link:not(.collapsed)::after{
    transform:rotate(-135deg); opacity:1;
}

/* Contador (4/4, 6/6, etc.) si lo pones dentro del botón */
#permissionsAccordion .sec-count{
    margin-left:10px; font-size:.8rem; color:#475569;
    background:#E2E8F0; border-radius:999px; padding:2px 8px;
}

/* Body */
#permissionsAccordion .card-body{ background:#fff; padding:16px 20px; }

/* Tira “Grant all · Revoke all” debajo del header */
#permissionsAccordion .bulk-actions{
    padding:8px 16px 0 16px; display:flex; gap:10px; align-items:center; color:#64748B;
}
#permissionsAccordion .bulk-actions a{
    color:#0EA5E9; font-weight:700; text-decoration:none;
}
#permissionsAccordion .bulk-actions a:hover{ text-decoration:underline; }

/* Grid interno: forzamos 2 columnas en desktop (como la de usuarios) */
#permissionsAccordion .card-body .row > [class*="col-"]{ margin-bottom:12px; }
@media (min-width: 992px){
    #permissionsAccordion .card-body .row > .col-md-4{
        flex:0 0 50%; max-width:50%;
    }
}

/* Título/etiquetas de cada permiso */
#permissionsAccordion .form-check .display-block{
    color:#0F172A; font-weight:700; letter-spacing:.2px;
}
#permissionsAccordion .form-check .small{
    display:inline-block; margin-left:8px; font-size:.75rem; padding:2px 8px; border-radius:999px;
    border:1px solid var(--border); color:#64748B; background:#F8FAFC; font-weight:700;
}
#permissionsAccordion .form-check .small.badge-success{
    color:#166534; background:#DCFCE7; border-color:#86EFAC;
}
#permissionsAccordion .form-check .small.badge-danger{
    color:#991B1B; background:#FEE2E2; border-color:#FCA5A5;
}
#permissionsAccordion .form-check .small.badge-info{
    color:#075985; background:#E0F2FE; border-color:#BAE6FD;
}

/* ---------- Bootstrap Switch – look compacto corporativo ---------- */
#permissionsAccordion .bootstrap-switch{
    border-radius:999px; border:1px solid var(--border);
    height:28px; min-width:64px; box-shadow:none; background:#fff;
}
#permissionsAccordion .bootstrap-switch .bootstrap-switch-handle-on,
#permissionsAccordion .bootstrap-switch .bootstrap-switch-handle-off{
    border-radius:999px; line-height:26px; font-weight:700;
}
#permissionsAccordion .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{
    background:var(--success);
}
#permissionsAccordion .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger{
    background:var(--danger);
}
#permissionsAccordion .bootstrap-switch .bootstrap-switch-label{
    background:#fff;
}

/* ---------- Footer acciones ---------- */
.perm-actions{
    display:flex; gap:10px; justify-content:flex-end; margin-top:14px;
}
.perm-actions .btn{
    height:38px; border-radius:10px; font-weight:700; padding:0 16px;
    box-shadow:0 1px 0 rgba(2,6,23,.04);
}
.perm-actions .btn-primary{
    background:var(--primary); border-color:var(--primary); color:#fff;
}
.perm-actions .btn-primary:hover{ filter:brightness(1.05); }
.perm-actions .btn-ghost{
    background:#fff; border:1px solid var(--border); color:#0F172A;
}
.perm-actions .btn-ghost:hover{ background:#F1F5F9; }

/* ---------- Botones de cabecera (Grant all / Revoke all global) ---------- */
.rp-top-actions{ display:flex; gap:8px; }
.rp-top-actions .btn{
    height:34px; border-radius:10px; padding:0 12px; font-weight:700;
}
.rp-top-actions .btn-ghost{ background:#fff; border:1px solid var(--border); color:#0F172A; }
.rp-top-actions .btn-ghost:hover{ background:#F1F5F9; }


/* ===== Role permissions – mismo look que "user permissions" ===== */

/* Card base */
#rolePermissionsAccordion .card{
    border:1px solid var(--border, #E5E7EB);
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.06);
    overflow:hidden;
}
#rolePermissionsAccordion .card + .card{ margin-top:10px; }

/* Header */
#rolePermissionsAccordion .card-header{
    display:flex; align-items:center;
    gap:10px; padding:0;
    background:var(--soft, #F8FAFC);
    border-bottom:1px solid var(--border, #E5E7EB);
}

/* Botón de cabecera (título + contador) */
#rolePermissionsAccordion .card-header .btn.btn-link{
    flex:1 1 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:14px 16px;
    text-decoration:none !important;
    color:var(--text, #0F172A);
    font-weight:700;
    border-left:4px solid transparent;
    background:transparent;
    box-shadow:none;
    transition:background .2s, border-color .2s, color .2s;
}
#rolePermissionsAccordion .card-header .btn.btn-link:hover{
    background:#EEF2F7;
}
#rolePermissionsAccordion .card-header .btn.btn-link:not(.collapsed){
    background:#E9EEF7;
    border-left-color:#37474F;
}

/* Chevron */
#rolePermissionsAccordion .card-header .btn.btn-link::after{
    content:"";
    width:.75rem; height:.75rem;
    border-right:2px solid rgba(17,24,39,.7);
    border-bottom:2px solid rgba(17,24,39,.7);
    transform:rotate(45deg);
    opacity:.7; margin-left:10px;
    transition:transform .2s, opacity .2s;
}
#rolePermissionsAccordion .card-header .btn.btn-link:not(.collapsed)::after{
    transform:rotate(-135deg); opacity:1;
}

/* Acciones rápidas a la derecha del header */
#rolePermissionsAccordion .card-header .link-quiet{
    color:#0EA5E9; font-weight:700; text-decoration:none;
}
#rolePermissionsAccordion .card-header .link-quiet:hover{ text-decoration:underline; }

/* Contador x/y (pill) */
#rolePermissionsAccordion .kpi-badge{
    font-size:.75rem; padding:2px 8px;
    border-radius:999px; white-space:nowrap;
    border:1px solid var(--border, #E5E7EB);
    color:#475569; background:#F8FAFC;
    font-weight:700;
}

/* Body */
#rolePermissionsAccordion .card-body{ padding:16px 20px; background:#fff; }
#rolePermissionsAccordion .card-body .row > [class*="col-"]{ margin-bottom:12px; }

/* Forzar 2 columnas como en usuario (tu HTML ya usa col-md-6) */
@media (min-width:992px){
    #rolePermissionsAccordion .card-body .row > .col-md-6{
        flex:0 0 50%; max-width:50%;
    }
}

/* Etiqueta del permiso y badges de estado si los usas */
#rolePermissionsAccordion .form-check .display-block{
    color:#0F172A; font-weight:700; letter-spacing:.2px;
}
#rolePermissionsAccordion .form-check .small{
    display:inline-block; margin-left:8px;
    font-size:.75rem; padding:2px 8px; border-radius:999px;
    border:1px solid var(--border, #E5E7EB);
    color:#64748B; background:#F8FAFC; font-weight:700;
}
#rolePermissionsAccordion .form-check .small.badge-success{
    color:#166534; background:#DCFCE7; border-color:#86EFAC;
}
#rolePermissionsAccordion .form-check .small.badge-danger{
    color:#991B1B; background:#FEE2E2; border-color:#FCA5A5;
}
#rolePermissionsAccordion .form-check .small.badge-info{
    color:#075985; background:#E0F2FE; border-color:#BAE6FD;
}


/*//--------------------------------------------------*/



/* =========================================================
   Switch corporativo (idéntico al de Usuarios) — bootstrap-switch
   ========================================================= */

/* Contenedor */
.bootstrap-switch{
    border: 1px solid #E5E7EB;            /* slate-200 */
    border-radius: 9999px;
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(2,6,23,.04);
}
.bootstrap-switch.bootstrap-switch-small{
    height: 28px;                          /* alto visual */
    min-width: 92px;                       /* espacio para "Yes"/"No" */
}

/* Cápsulas ON/OFF */
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off{
    height: 26px;
    line-height: 26px;
    padding: 0 14px;
    font-weight: 700;
    border-radius: 9999px;
}

/* Estado ON (verde) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success{
    background: #16A34A;                  /* green-600 */
    color: #fff;
}

/* Estado OFF por defecto (gris claro) */
.bootstrap-switch .bootstrap-switch-handle-off{
    background: #F1F5F9;                  /* slate-100 */
    color: #64748B;                       /* slate-500 */
}

/* *** Claves de comportamiento ***/
/* Cuando el switch está APAGADO => el handle OFF debe ser rojo */
.bootstrap-switch.bootstrap-switch-off
.bootstrap-switch-handle-off.bootstrap-switch-danger{
    background: #EF4444 !important;       /* red-500 */
    color: #fff !important;
}

/* Cuando el switch está ENCENDIDO => el handle OFF (danger) se neutraliza */
.bootstrap-switch.bootstrap-switch-on
.bootstrap-switch-handle-off.bootstrap-switch-danger{
    background: #F8FAFC !important;       /* slate-50 */
    color: #94A3B8 !important;            /* slate-400 */
}

/* Cuando el switch está APAGADO => el handle ON se neutraliza */
.bootstrap-switch.bootstrap-switch-off
.bootstrap-switch-handle-on.bootstrap-switch-success{
    background: #F8FAFC !important;
    color: #94A3B8 !important;
}

/* “Knob” central (dos rayitas) */
.bootstrap-switch .bootstrap-switch-label{
    background: #FFFFFF;                  /* que se funda con el fondo */
    border-left: 1px solid #E5E7EB;
    border-right: 1px solid #E5E7EB;
    width: 22px !important;               /* mismo ancho que pones por JS */
    border-radius: 10px;
}
.bootstrap-switch .bootstrap-switch-label::after{
    content: "";
    display: block;
    width: 2px;
    height: 12px;
    background: #CBD5E1;                  /* slate-300 */
    box-shadow: 4px 0 0 #CBD5E1;          /* segunda rayita */
    border-radius: 1px;
    margin: 7px auto;                     /* centrado vertical */
}

/* Transición suave del deslizamiento */
.bootstrap-switch .bootstrap-switch-container{
    transition: margin-left .18s ease;
}

/* Ajustes finos para que no “salte” el alto */
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label{
    display: inline-block;
    vertical-align: middle;
}

/* Elimina rayas del knob y evita transparencias */
.bootstrap-switch .bootstrap-switch-label {
    background-color: #ffffff !important; /* knob blanco */
    border: none !important;
    box-shadow: inset 0 0 0 1px #e5e7eb; /* aro fino */
    width: 22px !important;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

/* Oculta cualquier pseudo-elemento que agregue rayas */
.bootstrap-switch .bootstrap-switch-label::before,
.bootstrap-switch .bootstrap-switch-label::after {
    display: none !important;
}


/* Clip total del switch */
.bootstrap-switch,
.bootstrap-switch .bootstrap-switch-container {
    overflow: hidden !important;
}

/* ===== Switch – look & feel como en Usuarios ===== */

/* 1) Elimina por completo el label central (es lo que te dibuja el cuadradito/las rayas) */
.bootstrap-switch .bootstrap-switch-label,
.bootstrap-switch .bootstrap-switch-label::before,
.bootstrap-switch .bootstrap-switch-label::after{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2) Contenedor del switch: pill limpio */
.bootstrap-switch{
    border: 1px solid var(--border, #E5E7EB) !important;
    background: #fff !important;
    border-radius: 9999px !important;
    height: 32px !important;                 /* mismo alto que en Usuarios */
    min-width: 104px !important;             /* espacio para "Yes" / "No" */
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}

/* quita overflow/artefactos y deja el track redondeado */
.bootstrap-switch .bootstrap-switch-container{
    border-radius: 9999px !important;
    padding: 0 !important;
    height: 100% !important;
}

/* 3) “Half pills” de Yes / No */
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off{
    width: 52px !important;                  /* ancho de cada mitad */
    height: 30px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    border: none !important;
    text-shadow: none !important;
}

/* colores corporativos */
.bootstrap-switch .bootstrap-switch-handle-on{
    background: #4CAF50 !important;          /* verde Yes */
    color: #fff !important;
}
.bootstrap-switch .bootstrap-switch-handle-off{
    background: #E15649 !important;          /* rojo No */
    color: #fff !important;
}

/* 4) Estados: no queremos sombras ni bordes raros */
.bootstrap-switch,
.bootstrap-switch *{
    box-shadow: none !important;
}

/* 5) Variante small del plugin → normalízala a nuestro alto */
.bootstrap-switch.bootstrap-switch-small{
    height: 32px !important;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off{
    height: 30px !important;
    line-height: 30px !important;
    font-size: 14px !important;
    width: 52px !important;
}

/* 6) Alineación fina para que no quede “corte” entre mitad y mitad */
.bootstrap-switch .bootstrap-switch-container{
    transform: translateZ(0); /* evita sub‑pixeles raros en algunos navegadores */
}

.logout-icon {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    border-radius: 50%;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.logout-icon i {
    font-size: 28px;
    color: #fff;
}


/* ====== Custom styles for wizard ====== */
/* =====================================================
   WIZARD · STEP 1 (Consent) — SCOPED SOLO A ESTE STEP
   (aplícalo tal cual; elimina cualquier CSS previo de step 1)
   ===================================================== */
/* =========================
   WIZARD — Título y contador de paso
   ========================= */

/* Contenedor del título del paso (usa en ambos steps) */
.form-wizard-title{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;              /* permite que el <small> pase a línea 100% */
    margin: 2px 0 18px;
    color: #0f172a;               /* text-slate-900 */
}

/* Subtítulo del paso */
.form-wizard-title > small{
    flex-basis: 100%;
    margin-left: 42px;            /* deja respirar el subtítulo respecto al chip */
    color: #64748b;               /* text-slate-500 */
    font-size: 13px;
}

/* CHIP del número — unificado para ambas clases */
.ah-step-count,
.form-wizard-count{
    /* tamaño */
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 8px;

    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* tipografía */
    font: 700 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #fff;

    /* look */
    background: linear-gradient(135deg, #3b5bfd 0%, #2b3fbf 100%);
    border: 1px solid rgba(27, 35, 88, .10);
    box-shadow:
            0 0 0 3px rgba(126, 143, 255, .25),   /* halo exterior suave */
            0 2px 6px rgba(19, 28, 67, .12);      /* sombra leve */
}

/* Por si en algún HTML el número está envuelto en un span extra */
.ah-step-count > *,
.form-wizard-count > *{
    line-height: 1;
}

/* =========================
   WIZARD — Tarjetas/Secciones y espaciados
   ========================= */

/* Tarjetas “custom-card” y grupos dentro del step */
.step .custom-card{
    background: #fff;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 18px 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

/* Bordes suaves a bloques (como las filas de consent) */
.step .consent-checkbox,
.step .ah-block,
.step .nc-card,
.step .wizard-block{
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
}

/* Legend/encabezados de secciones dentro del paso */
.step legend{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #111827;
    font-size: 15px;
    margin: 2px 0 12px;
}
.step legend .position-left{ margin-right: 2px; }

/* Inputs y grupos */
.step .form-group{
    margin-bottom: 14px;
}
.step .form-control,
.step select.form-control{
    height: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .01) inset;
}
.step .form-control:focus{
    border-color: #aab4ff;
    outline: none;
    box-shadow:
            0 0 0 3px rgba(170, 180, 255, .25),
            0 1px 0 rgba(16, 24, 40, .01) inset;
}

/* Etiquetas */
.step label{
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
    font-size: 13px;
}

/* =========================
   WIZARD — Encabezado de la página y barra de progreso
   ========================= */

/* Título superior “Create Assessment” */
.page-title,
.h-page-title{
    color: #0f172a;
    font-weight: 800;
}

/* Barra de progreso más integrada */
.progress-wizard,
.wizard-progress{
    height: 15px !important;
    background: #eef2ff !important;
}
/* ===== Tokens (puedes poner --header-bg en tu header/nav) ===== */
:root{
    --header-bg: #334155;                 /* fallback si no lo defines en el header */
    --header-bg-500: #3b4d69;             /* un pelín más claro */
    --header-bg-600: #2b3a4f;             /* un pelín más oscuro */
    --progress-gloss: rgba(255,255,255,.12);
}

/* canal y base neutra, más delgada y redondeada */
.progress-wizard .progress,
.wizard-progress .progress{
    background: #EEF2F7;
    height: 10px;
    border-radius: 999px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
    overflow: hidden;
}

/* barra azul coherente con el header + sutil gloss y depth */
.progress-wizard .progress-bar,
.wizard-progress .progress-bar{
    background:
            linear-gradient(90deg, var(--header-bg-500), var(--header-bg-600)),
            linear-gradient(180deg, var(--progress-gloss), transparent);
    box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.08),
            0 1px 2px rgba(0,0,0,.08);
    transition: width .3s ease, background-color .2s ease;
}

/* Si quieres que tome exactamente el color del header, define la var ahí: */
/* .app-header, .navbar { --header-bg: #334155; } */


.progress-bar-wizard{
    line-height: 15px;
}

/* =========================
   WIZARD — Botonera inferior
   ========================= */

.step-actions .btn,
.form-actions .btn{
    border-radius: 10px !important;
    height: 38px;
}
.step-actions .btn-primary,
.form-actions .btn-primary{
    background: linear-gradient(135deg, #3b5bfd, #2b3fbf);
    border: none;
}
.step-actions .btn-primary:hover,
.form-actions .btn-primary:hover{
    filter: brightness(0.97);
}

/* ==========
   STEP HEADER
   ========== */
.ah-step {
    /* un pequeño desplazamiento global para evitar que todo quede “pegado” a la izquierda */
    padding-left: 4px;
}

.ah-step-title {
    display: flex;
    align-items: center;
    gap: 10px;                 /* separación entre número, título y subtítulo */
    margin: 8px 0 10px;
}


.ah-step-sub {
    color: #6b7280;
    font-size: 13px;
    margin-left: 18px;          /* separamos el subtítulo del texto principal */
}

/* ==========
   CARD / CONTENEDOR
   ========== */

/* ==========
   CONSENT LIST
   ========== */
.ah-consent-list {
    list-style: none !important;  /* fuera bullets del UL */
    margin: 0;
    padding: 0;
}

.ah-consent{
    padding: 15px;
}

/* por si algún reset añade bullets al li, lo forzamos también */
.ah-consent-list > li {
    list-style: none !important;
}

.ah-consent-item + .ah-consent-item {
    margin-top: 10px;          /* separación entre ítems */
}

.ah-consent-item {
    background: #f9fafb;       /* leve contraste atrás del texto */
    border: 1px solid #eef2f6;
    border-radius: 10px;
    padding: 10px 12px;
}

.ah-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;                 /* switch vs texto */
    cursor: pointer;
}

.ah-consent-text {
    color: #111827;
    font-size: 14px;
}

.ah-req {
    color: #ef4444;            /* asterisco requerido */
}

/* ==========
   CAMPOS (nombre + fecha)
   ========== */
.ah-field-label {
    display: block;
    font-weight: 600;
    color: #111827;
    margin: 14px 0 6px;
}

.ah-input {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
}

/* Pequeño ajuste de verticalidad para los inputs en columnas */
#validation-step1 .row .col-md-6 .form-control.ah-input {
    margin-top: 2px;
}

/* ==========
   BOTONERA (si tu layout la envuelve con .form-actions/.step-actions)
   ========== */
#validation-step1 .form-actions,
#validation-step1 .step-actions {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid #eef2f6;
}


/* ========== TÍTULO DEL PASO (común a todos los steps) ========== */
.ah-step {
    margin: 18px 0 0;          /* separa el fieldset del contenedor */
    padding: 0 8px;            /* pequeño breathing en laterales */
}

.ah-step-title{
    display:flex;
    align-items:center;
    gap:12px;                  /* espacio fijo entre número y texto */
    margin: 0px 8px 14px;     /* MISMO margen para todos los pasos */
    font-weight:700;
    font-size:1.06rem;
    color: var(--text-900, #0f172a);
}

/* subtítulo “Before proceeding…” */
.ah-step-sub{
    margin-left: 8px;
    color: var(--text-600, #475569);
    font-weight: 500;
}

/* contador del paso (badge) — MISMO estilo para 1, 2, 3… */
.ah-step-count{
    --ah-s-bg1:#4f46e5;        /* indigo 600 */
    --ah-s-bg2:#7c3aed;        /* violet 600 */
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    color:#fff;
    background: linear-gradient(135deg,var(--ah-s-bg1),var(--ah-s-bg2));
    box-shadow: 0 4px 12px rgba(79,70,229,.28);
    transform: translateY(1px);
}

/* ========== TARJETAS / BLOQUES DEL CONTENIDO ========== */
/* Caja blanca homogénea para consent, address, education, etc. */

.custom-card{
    background:#fff;
    padding:16px;
    margin: 12px 8px 0;
}

/* ========== LISTA DE CONSENT (sin bullets + espaciado uniforme) ========== */
.ah-consent-list{
    list-style:none;       /* elimina bullets “extra” */
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.ah-consent-item{
    background: #f7f9fc;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
}
.ah-consent-label{
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.ah-consent-label .switch{ margin-top:3px; } /* alinea el switch con el texto */
.ah-consent-text{ color: var(--text-800,#1f2937); line-height:1.5; }
.ah-req{ color:#ef4444; font-weight:600; }

/* ========== LEGEND / SUBSECCIONES DEL STEP 2 (mismo look en todas) ========== */
legend.text-semibold{
    display:flex;
    align-items:center;
    gap:10px;
    margin: 18px 8px 10px;     /* mismo margen que el step 1 para que casen */
    padding:0 0 10px 0;
    color: var(--text-900,#0f172a);
    font-weight:700;
    font-size: .95rem;
}
legend.text-semibold .position-left{
    width:24px; height:24px;
    display:inline-flex;
    align-items:center; justify-content:center;
    border-radius:50%;
    color:#4f46e5;                 /* indigo 600 */
    background: #EEF2FF;           /* indigo 50 */
}

/* ========== CAMPOS E INPUTS (coherencia de aire vertical) ========== */
.ah-consent .row,
.custom-card .row{ margin-top: 6px; }
.ah-field-label{ display:block; margin: 2px 0 6px; color: var(--text-700,#334155); font-weight:600; }
.ah-input,
.custom-card .form-control,
.custom-card select{
    border-radius:10px;
}

/* ========== ZONA DE ACCIONES (botones inferiores) ========== */
.ah-step + .wizard-actions,
.ah-consent + .wizard-actions{
    margin-top: 18px;
}


/* Mantener mismo ritmo visual entre steps y secciones */
#validation-step3 .custom-card { margin: 12px 8px 0; padding: 16px; }

/* Ayuda textual compacta bajo controles */
.ah-help{ margin-top:6px; font-size:.85rem; color:var(--text-600,#475569); }

/* Listbox “multiselect” aspecto compacto si el plugin deja el select visible */
.listbox.form-control{ min-height:40px; padding:6px 10px; }

/* Mantener consistencia de secciones */
#validation-step4 .custom-card { margin: 12px 8px 0; padding: 16px; }

/* Ajustes de listbox/multiselect para que no “salte” el layout */
.listbox.form-control { min-height: 44px; padding: 6px 10px; }

/* Ayuda breve bajo controles */
.ah-help { margin-top: 6px; font-size: .85rem; color: var(--text-600, #475569); }

/* Ícono redondo del legend (coincide con tu estilo existente) */
legend.text-semibold .ah-legend-icon{
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF2FF;      /* indigo-50 */
}
legend.text-semibold .ah-legend-icon svg{
    display: block;
}

#validation-step5 .custom-card {
    margin: 12px 8px 0;
    padding: 16px;
}

/* =========================
   BUTTONS – Base + Variants
   ========================= */
:root{
    --ah-indigo-50:#EEF2FF;
    --ah-indigo-400:#818CF8;
    --ah-indigo-600:#4F46E5;
    --ah-indigo-700:#4338CA;
    --ah-violet-600:#7C3AED;
    --ah-slate-700:#334155;
    --ah-slate-600:#475569;
    --ah-slate-400:#94A3B8;
    --ah-green-600:#16a34a;
    --ah-green-700:#15803d;
    --ah-red-600:#dc2626;
    --ah-white:#fff;
}

.ah-btn{
    --btn-h:38px;
    height: var(--btn-h);
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #fff;
    color: var(--ah-slate-700);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .02s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    box-shadow: 0 1px 1px rgba(16,24,40,.06);
}

.ah-btn:hover{ transform: translateY(-1px); }
.ah-btn:active{ transform: translateY(0); }
.ah-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(129,140,248,.35);
}

/* Tokens de marca (azure, sin subtono violeta) */
:root{
    --ah-brand-50:  #EEF4FF;
    --ah-brand-100: #E3ECFF;
    --ah-brand-400: #5B8DFF;
    --ah-brand-600: #2E5DE7; /* principal */
    --ah-brand-700: #254CC7; /* hover/active */
    --ah-brand-800: #1E3FA8;
}

/* Base común */
.ah-btn{
    border-radius: 10px;
    font-weight: 600;
    padding: 10px 16px;
    line-height: 1.2;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .02s ease;
}
.ah-btn:focus{ outline:0; }
.ah-btn:focus-visible{ box-shadow: 0 0 0 .2rem rgba(46,93,231,.22); }

/* Ghost (Back) */
.ah-btn-ghost{
    background:#fff;
    border:1px solid #e5e7eb;
    color: var(--ah-slate-700);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ah-btn-ghost:hover{
    background:#f8fafc;
    border-color:#dfe3ea;
    color: var(--ah-slate-900);
}
.ah-btn-ghost:active{ background:#f1f5f9; transform: translateY(1px); }

/* Outline (Next no save) */
.ah-btn-outline{
    background:#fff;
    border:1px solid var(--ah-brand-400);
    color: var(--ah-brand-700);
}
.ah-btn-outline:hover{ background: var(--ah-brand-50); }
.ah-btn-outline:active{ background:#E9EFFF; transform: translateY(1px); }

/* Primary sólido (Save) */
.ah-btn-primary{
    background: var(--ah-brand-600);
    color:#fff;
    border:1px solid var(--ah-brand-600);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ah-btn-primary:hover{
    background: var(--ah-brand-700);
    border-color: var(--ah-brand-700);
}
.ah-btn-primary:active{
    background: var(--ah-brand-700);
    border-color: var(--ah-brand-700);
    transform: translateY(1px);
}

/* Gradient (Save & Continue) */
.ah-btn-gradient{
    background: linear-gradient(135deg, var(--ah-brand-600), var(--ah-brand-700));
    color:#fff;
    border:1px solid var(--ah-brand-700);
    box-shadow: 0 4px 12px rgba(46,93,231,.22), 0 2px 4px rgba(0,0,0,.06);
}
.ah-btn-gradient:hover{ filter: brightness(1.02); }
.ah-btn-gradient:active{ filter: brightness(.98); transform: translateY(1px); }

/* Success (igual que antes) */
.ah-btn-success{
    background: var(--ah-green-600);
    border-color: var(--ah-green-600);
    color:#fff;
}
.ah-btn-success:hover{ background: var(--ah-green-700); }

/* Disabled / loading */
.ah-btn[disabled], .ah-btn.is-loading{
    opacity:.65; cursor:not-allowed; transform:none; box-shadow:none;
}


/* Mini icono SVG alineado */
.ah-btn .ah-ico{
    width: 16px; height: 16px;
    display:inline-flex; align-items:center; justify-content:center;
}

/* Spinner CSS puro para .is-loading */
.ah-btn .ah-spinner{
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.6);
    border-top-color: #fff;
    animation: ahspin .8s linear infinite;
}
.ah-btn.ah-btn-outline .ah-spinner{ border-color: rgba(79,70,229,.35); border-top-color: var(--ah-indigo-700); }
.ah-btn-ghost .ah-spinner{ border-color: rgba(51,65,85,.35); border-top-color: var(--ah-slate-700); }
@keyframes ahspin { to { transform: rotate(360deg); } }

/* Layout contenedor acciones */
.form-wizard-actions,
.ah-actions{
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #eef2f6;
}
.ah-actions-right{ display:flex; gap:10px; align-items:center; }

/* Botón de Swal footer (reutiliza look) */
.swal2-footer .ah-btn{ margin: 0 4px; }

/* ===== Step 19 – Layout */
.ah-final-card{ padding:18px 18px 22px; border-top:4px solid #4f46e5; border-radius:12px; }
.ah-final-grid{ margin-top:6px; }

/* section titles */
.ah-block-title{
    font-weight:700; font-size:15px; color:#0f172a; margin:6px 0 10px;
}

/* ===== Pills toggle (radios) */
.ah-toggle{ display:flex; gap:10px; flex-wrap:wrap; }
.ah-toggle input[type=radio]{ position:absolute; opacity:0; pointer-events:none; }
.ah-option{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 14px; border:1px solid #e6eaf2; border-radius:10px;
    background:#fff; color:#111827; font-weight:600; cursor:pointer;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:.18s ease;
}
.ah-option:hover{ border-color:#cdd5ff; transform:translateY(-1px); }
.ah-toggle input:checked + .ah-option{
    color:#fff; border-color:transparent;
    background:linear-gradient(135deg,#3b5bfd,#2b3fbf);
    box-shadow:0 6px 16px rgba(59,91,253,.28);
}
.ah-option i{ font-size:14px; }

/* ===== Service plan checkbox */
.ah-service{
    display:flex; justify-content:center; align-items:center;
    gap:10px; margin-top:12px; color:#0f172a; font-weight:600;
}
.ah-service input{ width:16px; height:16px; }
.ah-link{ color:#4f46e5; }

/* ===== CTA */
.ah-btn{ border-radius:12px; height:44px; padding:0 18px; border:0; font-weight:700; }
.ah-btn-lg{ height:46px; padding:0 22px; font-size:15px; }
.ah-btn-gradient{
    color:#fff; background:linear-gradient(135deg,#3b5bfd,#2b3fbf);
    box-shadow:0 6px 18px rgba(59,91,253,.28);
    transition:.2s ease;
}
.ah-btn-gradient:hover{ filter:brightness(.98); transform:translateY(-1px); }
.ah-btn-gradient i{ margin-right:8px; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background: transparent !important;
    border: 1px solid #fff !important;
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: .5em .2em !important;
}



/* ===== Sensory Profile Header Styling ===== */
.sensory-header {
    background: #f3f4f6;              /* gris claro elegante */
    border-bottom: 2px solid #e5e7eb; /* línea divisoria */
    padding: 10px 0;
    border-radius: 6px 6px 0 0;       /* esquinas superiores redondeadas */
}

.sensory-header .header-cell {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em; /* tracking */
    color: #374151;         /* gris oscuro para contraste */
}

/* Opcional: resaltar filas hover (UX agradable) */
.sensory-row:hover {
    background: #f9fafb;
    transition: background 0.2s ease;
}

.page-header-default{
    margin-bottom: 10px !important;
}

/* Override del clip que corta el dropdown */
.table-card{
    overflow: visible;           /* antes: hidden */
    position: relative;          /* asegura stacking context */
}

/* Por si acaso algún otro contenedor clippea */
.table-card .custom-table{
    overflow: visible;           /* seguro */
}

/* Asegura que el menú flote por encima */
.dropdown-custom-wrapper{ position: relative; }
.dropdown-custom-menu{ z-index: 10000; }


/* 1) Evita el clip de contenedores comunes de tablas */
.table-card,
.panel .table-responsive,
.table-responsive,
.table-responsive-custom,
.dataTables_wrapper {
    overflow: visible !important;
    position: relative; /* asegura stacking context sano */
}

/* 2) Asegura stacking del menú */
.dropdown-custom-wrapper { position: relative; }
.dropdown-custom-menu {
    z-index: 10000;              /* por encima de la tarjeta/tabla */
    top: 100%;                   /* justo debajo del botón */
    margin-top: 6px;             /* pequeño aire */
}


/* deja de recortar en la tabla */
#generic-table{
    overflow: visible !important;       /* antes: hidden */
    border: none !important;            /* el borde lo pondremos fuera */
    border-radius: 0 !important;
    background: transparent;            /* opcional */
}



.dropdown-custom-wrapper{ position: relative; }
.dropdown-custom-menu{
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10000;                     /* por encima de tabla/thead */
}