:root {
    --primario: #012E45;
    --secundario: #006E87;
    --cyan: #00CBFF;
    --coral: #F8A899;
    --magenta: #D3215D;
    --fondo-suave: #D3F6FF;
    --fondo: #F4F6FA;
    --texto: #22242B;
    --texto-secundario: #666b73;
    --borde: #E1E4EA;
    --exito: #1FAA59;
    --error: #E5484D;
    --radio: 10px;
    --sombra: 0 4px 14px rgba(1, 46, 69, 0.08);
    --fuente: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--texto); line-height: 1.5; font-size: 14px; }
a { color: var(--secundario); }
h1, h2, h3 { color: var(--primario); margin: 0 0 12px; }

/* ---------- Layout del panel ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 15; color: #fff;
    background: var(--primario);
    background: linear-gradient(165deg, var(--primario) 0%, color-mix(in srgb, var(--primario) 65%, black) 100%);
    flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden;
    transition: width 0.2s ease, transform 0.25s ease;
}
.sidebar nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 0; display: flex; flex-direction: column; }
.sidebar .logo { padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar .logo img { max-width: 140px; max-height: 40px; width: auto; }
.sidebar nav a {
    display: flex; align-items: center; gap: 10px; padding: 11px 20px; color: #cfe3ea;
    text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.06); }
.sidebar nav a.activo { background: rgba(255,255,255,0.08); border-left-color: var(--cyan); color: #fff; }
.sidebar .seccion-menu {
    padding: 16px 20px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: rgba(255,255,255,0.4);
}
.sidebar .seccion-menu:first-of-type { margin-top: 6px; }

/* ---------- Menú lateral en acordeón (una sección por cada grupo) ---------- */
.sidebar .seccion-menu-acordeon { border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar .seccion-menu-acordeon:first-of-type { border-top: none; margin-top: 6px; }
.sidebar .seccion-menu-acordeon summary {
    list-style: none; cursor: pointer; user-select: none;
    padding: 14px 20px 14px 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: rgba(255,255,255,0.55); display: flex; justify-content: space-between; align-items: center;
}
.sidebar .seccion-menu-acordeon summary::-webkit-details-marker { display: none; }
.sidebar .seccion-menu-acordeon summary::marker { content: ''; }
.sidebar .seccion-menu-acordeon summary::after {
    content: '▸'; font-size: 10px; transition: transform 0.15s ease; color: rgba(255,255,255,0.4);
}
.sidebar .seccion-menu-acordeon[open] summary::after { transform: rotate(90deg); }
.sidebar .seccion-menu-acordeon summary:hover { color: #fff; }
.sidebar .seccion-menu-acordeon > a { padding-top: 9px; padding-bottom: 9px; }

/* ---------- Íconos del menú (SVG en línea) ---------- */
.sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Botón de contraer/expandir el menú ---------- */
.btn-colapsar-menu {
    display: flex; align-items: center; gap: 10px; width: 100%; flex-shrink: 0;
    padding: 12px 20px; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.08);
    color: #9fb8c2; font-family: var(--fuente); font-size: 12.5px; cursor: pointer; text-align: left;
}
.btn-colapsar-menu:hover { color: #fff; background: rgba(255,255,255,0.05); }
.btn-colapsar-menu svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- Modo colapsado: solo íconos, sin texto ---------- */
body.menu-colapsado .sidebar { width: 68px; }
body.menu-colapsado .sidebar .logo { padding: 18px 0; text-align: center; }
body.menu-colapsado .sidebar .logo img { max-width: 34px; }
body.menu-colapsado .texto-menu { display: none; }
body.menu-colapsado .sidebar nav a { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.menu-colapsado .sidebar .seccion-menu-acordeon summary { justify-content: center; padding-left: 0; padding-right: 0; }
body.menu-colapsado .sidebar .seccion-menu-acordeon summary::after { display: none; }
body.menu-colapsado .btn-colapsar-menu { justify-content: center; padding-left: 0; padding-right: 0; }

/* ---------- Barra de desplazamiento discreta del menú (en vez de la del navegador por defecto) ---------- */
.sidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.sidebar nav::-webkit-scrollbar { width: 5px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

@media (max-width: 900px) {
    body.menu-colapsado .sidebar { width: 220px; }
    body.menu-colapsado .texto-menu { display: inline; }
}

.btn-menu-movil {
    display: none; background: none; border: none; color: var(--primario); cursor: pointer;
    padding: 6px; margin-right: 10px; flex-shrink: 0;
}
.btn-menu-movil svg { width: 24px; height: 24px; }

.overlay-menu-movil {
    display: none; position: fixed; inset: 0; background: rgba(1,46,69,0.5); z-index: 15;
}
.overlay-menu-movil.abierto { display: block; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: 220px; transition: margin-left 0.2s ease; }
body.menu-colapsado .main { margin-left: 68px; }
.topbar {
    background: #fff; border-bottom: 1px solid var(--borde); padding: 14px 26px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar .usuario { font-size: 13px; color: var(--texto-secundario); display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.topbar .usuario a { color: var(--error); text-decoration: none; }

/* ---------- Avatar del usuario ---------- */
.avatar-usuario { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-iniciales {
    display: flex; align-items: center; justify-content: center; background: var(--primario); color: #fff;
    font-size: 12px; font-weight: 700;
}

/* ---------- Búsqueda global (topbar) ---------- */
.busqueda-global { position: relative; display: flex; align-items: center; }
.busqueda-global-icono { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--texto-secundario); pointer-events: none; }
.busqueda-global input {
    width: 220px; padding: 8px 10px 8px 32px; border: 1px solid var(--borde); border-radius: 8px;
    font-size: 12.5px; font-family: var(--fuente); background: var(--fondo);
}
.busqueda-global input:focus { outline: none; border-color: var(--secundario); background: #fff; }
.resultados-busqueda-global {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-height: 360px; overflow-y: auto;
    background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); z-index: 25;
}
.busqueda-grupo-titulo { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--texto-secundario); }
.busqueda-resultado { display: flex; flex-direction: column; padding: 8px 14px; text-decoration: none; border-bottom: 1px solid #f2f4f7; }
.busqueda-resultado:hover { background: var(--fondo); }
.busqueda-resultado-nombre { font-size: 12.5px; color: var(--texto); font-weight: 500; }
.busqueda-resultado-detalle { font-size: 11px; color: var(--texto-secundario); }
.busqueda-sin-resultados { padding: 14px; font-size: 12.5px; color: var(--texto-secundario); margin: 0; }

@media (max-width: 860px) {
    .busqueda-global input { width: 140px; }
}
@media (max-width: 600px) {
    .busqueda-global { display: none; }
}

/* ---------- Campana de notificaciones (topbar) ---------- */
.menu-notificaciones { position: relative; }
.menu-notificaciones summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; color: var(--texto-secundario); position: relative;
}
.menu-notificaciones summary::-webkit-details-marker { display: none; }
.menu-notificaciones summary::marker { display: none; content: ''; }
.menu-notificaciones summary:hover { background: var(--fondo); color: var(--texto); }
.menu-notificaciones summary svg { width: 19px; height: 19px; }
.notif-contador {
    position: absolute; top: 2px; right: 2px; background: var(--magenta); color: #fff; font-size: 9.5px;
    font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; padding: 0 3px; line-height: 1;
}
.menu-notificaciones-lista {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 320px; max-height: 380px; overflow-y: auto;
    background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra);
}
.notif-item { display: block; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid #f2f4f7; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--fondo); }
.notif-item.no-leida { background: #eef8fb; }
.notif-item .notif-mensaje { display: block; font-size: 12.5px; color: var(--texto); margin-bottom: 3px; }
.notif-item .notif-fecha { display: block; font-size: 10.5px; color: var(--texto-secundario); }

@media (max-width: 480px) {
    .menu-notificaciones-lista {
        position: fixed; top: 62px; left: 12px; right: 12px; width: auto; max-height: 70vh;
    }
}

/* ---------- Menú desplegable del usuario (topbar) ---------- */
.menu-usuario { position: relative; }
.menu-usuario summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--texto); padding: 4px 8px; border-radius: 20px;
}
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary::marker { display: none; content: ''; }
.menu-usuario summary:hover { background: var(--fondo); }
.menu-usuario-lista {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 160px;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra); overflow: hidden;
}
.menu-usuario-lista a { display: block; padding: 10px 14px; font-size: 13px; text-decoration: none; color: var(--texto); }
.menu-usuario-lista a:hover { background: var(--fondo); }

.contenido { padding: 24px 26px; flex: 1; min-width: 0; }

/* ---------- Tarjetas / genéricos ---------- */
.card { background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 20px; margin-bottom: 18px; min-width: 0; }

/* ---------- Menú "Más opciones" (agrupa botones secundarios, sobre todo útil en móvil) ---------- */
.menu-mas-opciones { position: relative; display: inline-block; }
.menu-mas-opciones summary { list-style: none; cursor: pointer; }
.menu-mas-opciones summary::-webkit-details-marker { display: none; }
.menu-mas-opciones-lista {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 210px;
    background: #fff; border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra); overflow: hidden;
}
.menu-mas-opciones-lista a {
    display: block; padding: 10px 14px; font-size: 13px; color: var(--texto); text-decoration: none; border-bottom: 1px solid #f2f4f7;
}
.menu-mas-opciones-lista a:last-child { border-bottom: none; }
.menu-mas-opciones-lista a:hover { background: var(--fondo); }
.card h2 { font-size: 15px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--secundario); color: #fff; border: none;
    padding: 9px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn.btn-primario { background: var(--primario); background: linear-gradient(120deg, var(--primario), color-mix(in srgb, var(--primario) 65%, black)); }
.btn.btn-outline { background: transparent; color: var(--primario); border: 1px solid var(--borde); }
.btn.btn-peligro { background: var(--error); background: linear-gradient(120deg, var(--error), color-mix(in srgb, var(--error) 65%, black)); }
.btn.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn.btn-icono { padding: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.btn.btn-icono svg { width: 15px; height: 15px; }

/* ---------- Input de archivo con estilo consistente (botón + nombre elegido) ---------- */
.campo-archivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.campo-archivo .nombre-archivo-elegido { font-size: 12px; color: var(--texto-secundario); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-nuevo { background: #E6F1FB; color: #185FA5; }
.badge-contactado { background: #FAEEDA; color: #854F0B; }
.badge-calificado { background: #EEEDFE; color: #534AB7; }
.badge-cliente { background: #EAF3DE; color: #3B6D11; }
.badge-descartado { background: #FCEBEB; color: #A32D2D; }

.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.alerta-error { background: #FCE8E8; color: var(--error); }
.alerta-exito { background: #E7F7EE; color: var(--exito); }
.alerta-info { background: var(--fondo-suave); color: var(--primario); }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 12.5px; color: var(--texto); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="password"],
.campo input[type="number"], .campo input[type="date"], .campo input[type="datetime-local"],
.campo textarea, .campo select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: 13.5px; font-family: inherit;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--secundario); }
.campo-inline { display: flex; align-items: center; gap: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---------- Campo de contraseña con botón mostrar/ocultar ---------- */
.campo-password { position: relative; display: flex; align-items: center; }
.campo-password input { padding-right: 44px; width: 100%; }
.campo-password .btn-toggle-password {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 6px; cursor: pointer;
    color: var(--texto-secundario); padding: 0;
}
.campo-password .btn-toggle-password:hover { background: var(--fondo); color: var(--primario); }
.campo-password .btn-toggle-password:focus-visible { outline: 2px solid var(--secundario); outline-offset: 1px; }
.campo-password .btn-toggle-password svg { width: 19px; height: 19px; pointer-events: none; }

/* ---------- Tablas (vista Lista del CRM) ---------- */
table.tabla-datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla-datos th { text-align: left; padding: 10px 12px; background: var(--fondo); color: var(--texto-secundario); font-size: 11.5px; text-transform: uppercase; border-bottom: 1px solid var(--borde); }
table.tabla-datos td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
table.tabla-datos tr:hover td { background: #FAFBFD; }

/* ---------- Columna de acciones fija a la derecha (para tablas con muchas columnas) ---------- */
table.tabla-datos .columna-fija-derecha { position: sticky; right: 0; box-shadow: -4px 0 6px -4px rgba(0,0,0,0.15); }
table.tabla-datos th.columna-fija-derecha { background: var(--fondo); }
table.tabla-datos td.columna-fija-derecha { background: #fff; }
table.tabla-datos tr:hover td.columna-fija-derecha { background: #FAFBFD; }

/* ---------- Filtros ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.barra-filtros .campo { margin-bottom: 0; min-width: 150px; }
.barra-filtros .acordeon-filtro-personalizado { flex-basis: 100%; order: 99; }

/* ---------- Panel de filtros colapsable (reutilizable en cualquier pantalla con filtros) ---------- */
.panel-filtros-colapsable summary { list-style: none; cursor: pointer; }
.panel-filtros-colapsable summary::-webkit-details-marker { display: none; }
.resumen-panel-filtros {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--texto);
}
.resumen-panel-filtros .texto-editar-filtros {
    font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap;
    background: var(--error); padding: 6px 14px; border-radius: 20px;
}
.panel-filtros-colapsable[open] .resumen-panel-filtros { padding-bottom: 14px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.tabs-vista { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs-vista a { padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--texto-secundario); background: #fff; border: 1px solid var(--borde); white-space: nowrap; }
.tabs-vista a.activo { background: var(--primario); color: #fff; border-color: var(--primario); }

.barra-guardar-sticky {
    position: sticky; top: 10px; z-index: 5; padding: 12px 20px;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}
.barra-guardar-sticky span { font-size: 13px; color: var(--texto-secundario); }
.barra-guardar-sticky .btn { flex-shrink: 0; }

/* ---------- Kanban ---------- */
.kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban-columna { background: #fff; border-radius: 10px; min-width: 240px; max-width: 240px; flex-shrink: 0; box-shadow: var(--sombra); }
.kanban-columna-header { padding: 12px 14px; font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; }
.kanban-cuerpo { padding: 10px; min-height: 60px; }
.kanban-card {
    background: var(--fondo); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: grab;
    border: 1px solid var(--borde); font-size: 12.5px;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card .nombre { font-weight: 600; margin-bottom: 3px; }
.kanban-card .meta { color: var(--texto-secundario); font-size: 11px; }
.kanban-columna.drag-over { outline: 2px dashed var(--secundario); }

/* ---------- Acordeón de preguntas (editor de tests) ---------- */
.acordeon-pregunta {
    border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; overflow: hidden;
}
.acordeon-pregunta summary {
    list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center;
    gap: 10px; background: var(--fondo); font-size: 13.5px;
}
.acordeon-pregunta summary::-webkit-details-marker { display: none; }
.acordeon-pregunta summary::marker { display: none; content: ''; }
.acordeon-pregunta summary::before {
    content: '▸'; color: var(--texto-secundario); flex-shrink: 0; transition: transform 0.15s ease; font-size: 12px;
}
.acordeon-pregunta[open] summary::before { transform: rotate(90deg); }
.acordeon-pregunta summary:hover { background: #eef1f5; }
.acordeon-numero {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--primario); color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.acordeon-titulo { font-weight: 600; color: var(--texto); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acordeon-meta { flex-shrink: 0; font-size: 11.5px; color: var(--texto-secundario); white-space: nowrap; }
.acordeon-cuerpo { padding: 16px 14px; border-top: 1px solid var(--borde); }

.btn-eliminar-acordeon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
    color: var(--texto-secundario); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.btn-eliminar-acordeon:hover { background: #FCE8E8; color: var(--error); }

.titulo-grupo-categoria {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--secundario); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--fondo-suave);
}
.titulo-grupo-categoria:first-of-type { margin-top: 4px; }

/* ---------- Barra de cobertura de diagnósticos ---------- */
.barra-cobertura {
    display: flex; width: 100%; height: 30px; border-radius: 6px; overflow: hidden;
    background: repeating-linear-gradient(45deg, #f3f3f3, #f3f3f3 6px, #e9e9e9 6px, #e9e9e9 12px);
    margin-top: 10px;
}
.segmento-cobertura {
    height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; color: #fff; font-weight: 600; overflow: hidden; white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.4);
}
.segmento-hueco { background: transparent !important; }

/* ---------- Acordeón de grupo/ámbito (diagnósticos) — más grande que el de pregunta ---------- */
.acordeon-grupo-diagnostico {
    background: #fff; border-radius: 12px; box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden;
}
.acordeon-grupo-diagnostico summary {
    list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px;
}
.acordeon-grupo-diagnostico summary::-webkit-details-marker { display: none; }
.acordeon-grupo-diagnostico summary::marker { display: none; content: ''; }
.acordeon-grupo-diagnostico summary::before {
    content: '▸'; color: var(--texto-secundario); flex-shrink: 0; transition: transform 0.15s ease;
}
.acordeon-grupo-diagnostico[open] summary::before { transform: rotate(90deg); }
.acordeon-grupo-diagnostico summary .acordeon-titulo { font-size: 15px; font-weight: 700; color: var(--primario); white-space: normal; }
.acordeon-grupo-diagnostico summary:hover { background: var(--fondo); }
.acordeon-grupo-diagnostico > .acordeon-cuerpo { padding: 4px 20px 20px; border-top: 1px solid var(--borde); }

.badge-advertencia {
    flex-shrink: 0; background: #FCE8E8; color: var(--error); font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

.badge-exito {
    flex-shrink: 0; background: #E7F7EE; color: var(--exito); font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

/* ---------- Insignia de estado con color dinámico (reemplaza las clases badge-* fijas) ---------- */
.badge-dinamico {
    display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
}

/* ---------- Selector de teléfono con indicativo + bandera ---------- */
.campo-telefono { display: flex; gap: 8px; }
.selector-indicativo { flex: 0 0 140px; }
.campo-telefono input[type="tel"] { flex: 1; }

/* ---------- Panel de configurar/ordenar columnas ---------- */
.fila-columna-config {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px;
    background: var(--fondo); margin-bottom: 4px; font-size: 12.5px;
}
.btn-reordenar {
    width: 26px; height: 26px; border: 1px solid var(--borde); background: #fff; border-radius: 6px;
    cursor: pointer; font-size: 11px; color: var(--texto-secundario); flex-shrink: 0;
}
.btn-reordenar:hover { background: var(--secundario); color: #fff; border-color: var(--secundario); }

/* ---------- Barra de acciones masivas (leads) ---------- */
.barra-acciones-masivas {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--fondo-suave);
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px;
}
.barra-acciones-masivas.visible { display: flex; }
.barra-acciones-masivas select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--borde); font-size: 12.5px; }
#contador-seleccionados { font-weight: 600; color: var(--primario); }

/* ---------- Botones ícono compactos (limpiar / exportar) ---------- */
.grupo-botones-icono { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 2px; }
.btn-icono {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 56px; height: 44px; border-radius: 8px; border: 1px solid var(--borde); background: #fff;
    color: var(--texto-secundario); text-decoration: none; cursor: pointer; flex-shrink: 0;
}
.btn-icono svg { width: 18px; height: 18px; }
.btn-icono span { font-size: 10px; font-weight: 600; }
.btn-icono:hover { background: var(--fondo); border-color: var(--secundario); color: var(--secundario); }

@media (max-width: 480px) {
    .campo-telefono { flex-direction: column; }
    .selector-indicativo { flex: 1; }
}

/* ---------- Desplegable personalizado de país/indicativo con banderas reales ---------- */
.select-bandera-contenedor { position: relative; width: 100%; }
/* Cuando el menú de banderas reemplaza visualmente al <select> de indicativo (que queda oculto),
   el contenedor nuevo debe respetar el mismo ancho fijo, o rompe la fila con el teléfono. */
.campo-telefono .select-bandera-contenedor { width: auto; flex: 0 0 140px; }

@media (max-width: 480px) {
    .campo-telefono .select-bandera-contenedor { flex: 1; }
}
.select-bandera-boton {
    width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px;
    border: 1px solid var(--borde); border-radius: 8px; background: #fff; cursor: pointer;
    font-size: 13.5px; font-family: inherit; text-align: left;
}
.select-bandera-boton img { border-radius: 2px; flex-shrink: 0; }
.select-bandera-boton span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-bandera-boton svg { flex-shrink: 0; color: var(--texto-secundario); }
.select-bandera-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra);
}
.select-bandera-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.select-bandera-item:hover { background: var(--fondo); }
.select-bandera-item img { border-radius: 2px; flex-shrink: 0; }

.fila-opcion { display: flex; align-items: end; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fila-opcion .campo { margin-bottom: 0; flex: 1; min-width: 140px; }
.fila-opcion .campo-puntaje { flex: 0 0 90px; min-width: 90px; }
.fila-opcion .campo-inline { flex: 0 0 auto; min-width: 0; padding-bottom: 9px; }
.fila-opcion-nueva { padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--borde); }
.btn-eliminar-opcion {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--borde); background: #fff;
    color: var(--texto-secundario); cursor: pointer; font-size: 13px; margin-bottom: 0;
}
.btn-eliminar-opcion:hover { background: #FCE8E8; color: var(--error); border-color: #FCE8E8; }

@media (max-width: 600px) {
    .acordeon-meta { display: none; }
    .acordeon-titulo { white-space: normal; }
    .fila-opcion .campo { min-width: 100%; }
    .fila-opcion .campo-puntaje { flex: 1; min-width: 100%; }
    .tabs-vista { width: 100%; }
    .tabs-vista a { flex: 1; text-align: center; }
}

/* ---------- Dashboard ---------- */
.metricas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.metrica-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--sombra); text-align: center; }
.metrica-card .valor { font-size: 26px; font-weight: 700; color: var(--primario); }
.metrica-card .etiqueta { font-size: 11.5px; color: var(--texto-secundario); margin-top: 4px; }

/* ---------- Login / público ---------- */
.pantalla-centrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--primario); padding: 20px; }
.caja-login { background: #fff; border-radius: 14px; padding: 34px 32px; width: 100%; max-width: 380px; box-shadow: var(--sombra); }
.caja-login .logo { text-align: center; margin-bottom: 20px; }
.caja-login .logo img { max-width: 160px; }

.encabezado-publico { background: var(--primario); padding: 28px 16px; text-align: center; }
.encabezado-publico img { max-height: 72px; }
.contenedor-publico { width: 100%; max-width: 680px; margin: 0 auto; padding: 26px 16px; }

/* ---------- Aviso de cookies en el flujo público del test ---------- */
.aviso-cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: #fff; border-top: 1px solid var(--borde);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.aviso-cookies p { margin: 0; font-size: 12.5px; color: var(--texto-secundario); flex: 1 1 260px; }
.aviso-cookies a { color: var(--primario); }
.aviso-cookies .btn { flex-shrink: 0; }
@media (max-width: 480px) {
    .aviso-cookies { flex-direction: column; align-items: stretch; text-align: center; }
    .aviso-cookies .btn { width: 100%; justify-content: center; }
}

/* ---------- Títulos más prominentes en el flujo público del test ---------- */
.titulo-test-publico { font-size: 26px; font-weight: 800; color: var(--primario); margin: 0 0 6px; line-height: 1.25; }
.descripcion-test-publico { font-size: 14.5px; color: var(--texto-secundario); margin: 0 0 22px; }
.titulo-categoria-publico { font-size: 22px; font-weight: 800; color: var(--primario); margin: 0 0 10px; }
.enunciado-pregunta-publico { display: block; font-size: 19px; font-weight: 700; color: var(--texto); line-height: 1.4; margin-bottom: 8px; }

@media (max-width: 480px) {
    .titulo-test-publico { font-size: 21px; }
    .titulo-categoria-publico { font-size: 19px; }
    .enunciado-pregunta-publico { font-size: 17px; }
}
.barra-progreso { background: var(--borde); border-radius: 20px; height: 8px; margin-bottom: 24px; }
.barra-progreso-relleno { background: var(--cyan); height: 8px; border-radius: 20px; transition: width 0.3s; }
.opciones-lista { display: flex; flex-direction: column; gap: 8px; }
.opciones-lista label { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--borde); border-radius: 8px; cursor: pointer; font-weight: 400; }
.opciones-lista input { accent-color: var(--secundario); }
.ayuda-pregunta { font-size: 12px; color: var(--texto-secundario); margin: 4px 0 10px; font-style: italic; }
.resultado-puntaje { text-align: center; padding: 10px; }
.resultado-puntaje .porcentaje { font-size: 2.4rem; font-weight: 700; color: var(--primario); }

/* ---------- Informes de resultado de las encuestas (tipo estándar / perfil / índice) ---------- */
.informe h2 { margin-bottom: 4px; }
.informe-nota { font-size: 13px; color: var(--texto-secundario); margin: 0 0 18px; }
.informe-subtitulo { font-size: 15px; color: var(--primario); margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid var(--borde); }
.informe-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 6px 0 4px; }
.informe-hero-grafico { flex: 0 0 auto; }
.informe-hero-grafico svg { display: block; max-width: 100%; height: auto; }
.informe-hero-dona { padding: 6px; }
.informe-hero-texto { flex: 1 1 260px; min-width: 0; }
.informe-hero-texto p { margin: 0 0 8px; line-height: 1.6; }
.informe-hero-radar .informe-hero-grafico { flex: 1 1 320px; max-width: 460px; }
.informe-hero-radar .informe-hero-texto { display: flex; flex-direction: column; gap: 12px; }
.informe-indice-nivel { font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--secundario); margin-bottom: 6px; }
.informe-card { border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; background: #fff; }
.informe-card .k { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-secundario); margin-bottom: 2px; }
.informe-card .t { display: block; font-weight: 700; color: var(--primario); margin-bottom: 4px; font-size: 16px; }
.informe-card .t small { font-size: 12px; font-weight: 600; background: var(--fondo-suave); color: var(--secundario); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.informe-card p { margin: 0; font-size: 13px; line-height: 1.5; }
.informe-card-destacada { border-left: 4px solid var(--secundario); }
.informe-card-foco { border-left: 4px solid #E9B44C; background: #FFFAF0; }
.informe-dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.informe-dim { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; background: #fff; }
.informe-dim-cabecera { display: flex; align-items: center; gap: 12px; }
.informe-dim-dona { flex: 0 0 auto; line-height: 0; }
.informe-nombre { font-weight: 700; line-height: 1.3; }
.informe-meta { font-size: 11.5px; color: var(--texto-secundario); margin-left: 4px; }
.informe-lectura { font-size: 12.5px; color: var(--texto-secundario); margin: 8px 0 0; line-height: 1.5; }
.informe-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; text-align: center; }
.informe-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.informe-mini svg { display: block; }
.etiqueta-informe { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-top: 3px; background: var(--fondo-suave); color: var(--secundario); }
.etiqueta-informe.bajo { background: #FBEFD9; color: #8F5400; }
.etiqueta-informe.medio { background: var(--borde); color: var(--texto); }
.informe-escala { position: relative; padding-top: 30px; margin-top: 18px; }
.informe-escala-tramos { display: flex; gap: 2px; height: 12px; }
.informe-escala-tramos i { display: block; border-radius: 3px; }
.informe-escala-tramos i:nth-child(1) { opacity: .2; }
.informe-escala-tramos i:nth-child(2) { opacity: .4; }
.informe-escala-tramos i:nth-child(3) { opacity: .7; }
.informe-escala-tramos i:nth-child(4) { opacity: 1; }
.informe-escala-nombres { display: flex; gap: 2px; font-size: 11.5px; color: var(--texto-secundario); margin-top: 6px; }
.informe-escala-nombres small { display: block; font-size: 10.5px; }
.informe-alfiler { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 700; text-align: center; }
.informe-alfiler::after { content: ""; display: block; margin: 2px auto 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--texto); width: 0; }
.informe-aviso { background: #FBEFD9; color: #8F5400; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-top: 12px; }
.informe-paso { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; }
.informe-paso b { color: var(--primario); }
.informe-paso .hoy { color: var(--texto-secundario); display: block; margin: 2px 0; }
@media (max-width: 560px) {
    .informe-hero { justify-content: center; text-align: center; }
    .informe-hero-radar { text-align: left; }
    .informe-dims { grid-template-columns: 1fr; }
}

/* ---------- Alternativa de estado del Kanban para móvil (sin drag&drop) ---------- */
.kanban-card select.mover-estado-movil {
    display: none; width: 100%; margin-top: 8px; padding: 6px 8px; font-size: 12px;
    border: 1px solid var(--borde); border-radius: 6px; background: #fff;
}

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

    .btn-menu-movil { display: inline-flex; align-items: center; }

    .sidebar {
        top: 0; left: 0; height: 100vh; z-index: 20;
        transform: translateX(-100%);
    }
    .sidebar.abierto { transform: translateX(0); }
    .main, body.menu-colapsado .main { margin-left: 0; }

    .topbar { padding: 12px 16px; }
    .contenido { padding: 16px; }

    /* Tablas: scroll horizontal en vez de romper el layout */
    table.tabla-datos { display: block; overflow-x: auto; white-space: nowrap; }
    table.tabla-datos th, table.tabla-datos td { white-space: nowrap; }

    /* Kanban: como el arrastrar y soltar no funciona con el dedo en móvil,
       se muestra un selector de estado como alternativa dentro de cada tarjeta. */
    .kanban-card { cursor: default; }
    .kanban-card select.mover-estado-movil { display: block; }
    .kanban-columna { min-width: 78vw; max-width: 78vw; }
}

@media (max-width: 480px) {
    .menu-usuario summary span:not(.avatar-usuario):not(.avatar-iniciales) { display: none; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .contenedor-publico { max-width: 90%; }
}

@media (max-width: 600px) {
    .contenedor-publico { padding: 16px 10px; }
    .card { padding: 16px; }
    .btn { padding: 12px 16px; }
    .metricas-grid { grid-template-columns: repeat(2, 1fr); }
    .barra-filtros { flex-direction: column; align-items: stretch; }
    .barra-filtros .campo { min-width: 0; }

    /* En pantallas muy angostas, el texto explicativo de la barra de guardado
       estorba más de lo que ayuda: se deja solo el botón, siempre accesible. */
    .barra-guardar-sticky span { display: none; }
    .barra-guardar-sticky { justify-content: center; }
    .barra-guardar-sticky .btn { width: 100%; justify-content: center; }
}

/* Protección general: nada debe poder generar una barra de scroll horizontal
   en el body completo, sin importar el tamaño de pantalla. */
html, body { max-width: 100%; overflow-x: hidden; }

/* =====================================================================
   MODO OSCURO
   Se activa con [data-theme="dark"] en <html>. Usamos !important en los
   colores de fondo/texto porque muchas tarjetas y widgets del sistema
   fijan su color directamente en el HTML (estilo en línea), y eso pesa
   más que una regla normal de esta hoja de estilos — sin !important,
   el modo oscuro se quedaría a medias en esas pantallas.
   ===================================================================== */
[data-theme="dark"] {
    --fondo: #14151f;
    --texto: #e6e6ea;
    --texto-secundario: #9a9aa8;
    --borde: #2c2d3a;
}
[data-theme="dark"] body { background: #14151f !important; color: #e6e6ea; }

[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .reporte-card,
[data-theme="dark"] .metrica-card,
[data-theme="dark"] .dashcom-filtros,
[data-theme="dark"] .panel-filtros-colapsable,
[data-theme="dark"] .caja-login-alena {
    background: #1c1d29 !important;
    color: #e6e6ea;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

[data-theme="dark"] table.tabla-datos th,
[data-theme="dark"] table.tabla-comparativo th { background: #232431 !important; color: #9a9aa8; }
[data-theme="dark"] table.tabla-datos td,
[data-theme="dark"] table.tabla-comparativo td { border-color: #2c2d3a; color: #e6e6ea; }
[data-theme="dark"] table.tabla-datos tr:hover td { background: #232431 !important; }
[data-theme="dark"] table.tabla-datos td.columna-fija-derecha,
[data-theme="dark"] table.tabla-datos th.columna-fija-derecha { background: #1c1d29 !important; }

[data-theme="dark"] .campo input[type="text"], [data-theme="dark"] .campo input[type="email"],
[data-theme="dark"] .campo input[type="tel"], [data-theme="dark"] .campo input[type="password"],
[data-theme="dark"] .campo input[type="number"], [data-theme="dark"] .campo input[type="date"],
[data-theme="dark"] .campo input[type="datetime-local"], [data-theme="dark"] .campo textarea,
[data-theme="dark"] .campo select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="color"], [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: #232431 !important; color: #e6e6ea !important; border-color: #383a4a !important;
}
[data-theme="dark"] .campo label { color: #9a9aa8; }
[data-theme="dark"] .btn.btn-outline { background: transparent !important; color: #c9c9d4; border-color: #383a4a; }
[data-theme="dark"] a { color: #6fb3e0; }
[data-theme="dark"] .resumen-filtros-dashboard, [data-theme="dark"] .resumen-panel-filtros { color: #e6e6ea; }
[data-theme="dark"] .alerta { background: #232431; }
[data-theme="dark"] hr, [data-theme="dark"] .barra-progreso { background: #2c2d3a; }

/* ---------- Botón de alternar modo oscuro (en la barra superior) ---------- */
.boton-modo-oscuro {
    background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px;
    color: var(--texto-secundario); display: flex; align-items: center;
}
.boton-modo-oscuro:hover { background: var(--fondo); }
.boton-modo-oscuro svg { width: 19px; height: 19px; }
[data-theme="dark"] .boton-modo-oscuro:hover { background: #232431; }
[data-theme="dark"] .topbar { background: #1c1d29 !important; border-color: #2c2d3a; }
[data-theme="dark"] .sidebar { background: linear-gradient(165deg, #1c1d29 0%, #14151f 100%) !important; }
[data-theme="dark"] .busqueda-global input:focus { background: #232431 !important; }
[data-theme="dark"] .menu-notificaciones-lista { background: #1c1d29 !important; }
[data-theme="dark"] .notif-item { border-color: #2c2d3a; }
[data-theme="dark"] .notif-item:hover { background: #232431 !important; }
[data-theme="dark"] .notif-item.no-leida { background: #16232b !important; }
[data-theme="dark"] .notif-item .notif-mensaje { color: #e6e6ea; }

/* ---------- Utilidades ----------
   Consolidan los patrones de `style="..."` que se repetían igual en varias
   vistas (auditoría de estructura, sep-2026). Los estilos verdaderamente
   únicos de una sola vista se dejan como style="" en el propio archivo. */
.u-m0 { margin: 0; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-neg6 { margin-top: -6px; }
.u-mt-neg8 { margin-top: -8px; }
.u-m-4-0-0 { margin: 4px 0 0; }
.u-m-0-0-3 { margin: 0 0 3px; }
.u-m-0-0-4 { margin: 0 0 4px; }
.u-m-16-0-8 { margin: 16px 0 8px; }
.u-m-30-0 { margin: 30px 0; }
.u-fw-400 { font-weight: 400; }
.u-fw-600 { font-weight: 600; }
.u-text-11 { font-size: 11px; }
.u-text-11-5 { font-size: 11.5px; }
.u-text-12 { font-size: 12px; }
.u-text-13 { font-size: 13px; }
.u-text-13-5 { font-size: 13.5px; }
.u-muted { color: var(--texto-secundario); }
.u-error-text { color: var(--error); }
.u-secondary-text { color: var(--secundario); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-scroll-x { overflow-x: auto; }
.u-clickable { cursor: pointer; }
.u-flex-1 { flex: 1; }
.u-flex { display: flex; }
.u-flex-between { justify-content: space-between; }
.u-flex-end { justify-content: flex-end; }
.u-items-center { align-items: center; }
.u-items-end { align-items: end; }
.u-wrap { flex-wrap: wrap; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-14 { gap: 14px; }
.u-mw-600 { max-width: 600px; }
.u-mw-640 { max-width: 640px; }
.u-divider { border: none; border-top: 1px solid var(--borde); }
.u-box { background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px; }
.u-box-p10 { padding: 10px 14px; }
.u-box-p12 { padding: 12px 14px; }
.u-swatch { height: 38px; padding: 2px; border: 1px solid var(--borde); border-radius: 6px; }
.u-swatch-50 { width: 50px; }
.u-swatch-60 { width: 60px; }
.u-btn-link-error { color: var(--error); background: none; border: none; cursor: pointer; }
.u-hidden { display: none; }
.u-inline { display: inline; }
.u-self-end { align-self: flex-end; }
.u-m-16-0 { margin: 16px 0; }
.u-m-18-0 { margin: 18px 0; }
.u-m-20-0 { margin: 20px 0; }