/*
 * SGA Command Center: paleta Ctrl+K y pantalla "¿Qué necesitas?".
 * Usa solo los tokens de uti-sistema.css, asi que el modo oscuro
 * (html[data-bs-theme="dark"]) llega solo.
 */

/* ---------- Lista de resultados (compartida) ---------- */
.cc-lista { position: relative; overflow-y: auto; overscroll-behavior: contain; }
.cc-lista.cc-cargando::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--purpura-soft, #5A4080), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: cc-barrido 0.9s linear infinite;
}
@keyframes cc-barrido { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.cc-grupo { padding: 6px 0; }
.cc-grupo + .cc-grupo { border-top: 1px solid var(--mist, #E8EAED); }
.cc-grupo-titulo {
    font-size: var(--t-xs, .75rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--stone, #5B5168); padding: 6px 16px 4px;
}

.cc-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 16px; margin: 0 6px;
    border-radius: var(--r-sm, 8px); color: var(--ink, #1C1430); text-decoration: none;
    transition: background-color .12s ease;
}
.cc-item:hover, .cc-item:focus { text-decoration: none; color: var(--ink, #1C1430); }
.cc-item.activo { background: var(--purpura-wash, #F1ECF8); }
.cc-icono {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--r-sm, 8px);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--cc-color, #5B5168);
    background: color-mix(in srgb, var(--cc-color, #5B5168) 12%, transparent);
    font-size: 14px;
}
.cc-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-icono img.cc-modulo-img { width: 24px; height: 24px; object-fit: contain; }
.cc-icono [hidden] { display: none !important; }
.cc-titulo { font-size: var(--t-base, .875rem); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El resalte de coincidencias es el de uti-sistema.css (mark), igual que el buscador del panel. */
.cc-detalle { font-size: var(--t-xs, .75rem); color: var(--stone, #5B5168); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-chip {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--purpura, #3C235F);
    background: var(--purpura-wash, #F1ECF8); border-radius: var(--r-pill, 999px); padding: 2px 8px;
}
.cc-estrella {
    flex: 0 0 auto; border: 0; background: transparent; color: var(--lila, #C4BDD4);
    width: 30px; height: 30px; border-radius: var(--r-xs, 6px); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
.cc-item:hover .cc-estrella, .cc-item.activo .cc-estrella, .cc-estrella.activa, .cc-estrella:focus-visible { opacity: 1; }
.cc-estrella:hover { color: var(--naranja, #EA600A); transform: scale(1.1); }
.cc-estrella.activa { color: var(--naranja, #EA600A); }
.cc-estrella:focus-visible { outline: 2px solid var(--purpura-soft, #5A4080); outline-offset: 1px; }
.cc-enter { flex: 0 0 auto; font-size: 12px; color: var(--stone, #5B5168); opacity: 0; width: 14px; }
.cc-item.activo .cc-enter { opacity: .8; }

.cc-vacio {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 28px 20px; color: var(--stone, #5B5168);
}
.cc-vacio i { font-size: 20px; color: var(--lila, #C4BDD4); margin-bottom: 6px; }
.cc-vacio strong { color: var(--ink, #1C1430); font-weight: 600; font-size: var(--t-base, .875rem); }
.cc-vacio span { font-size: var(--t-sm, .8125rem); }

.cc-pide-eleccion .cc-item.activo { animation: cc-pulso .5s ease; }
@keyframes cc-pulso { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px var(--purpura-soft, #5A4080) inset; } }

/* ---------- Paleta Ctrl+K ---------- */
.cc-paleta-abierta, .cc-paleta-abierta body { overflow: hidden; }
.cc-capa {
    position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh 16px 16px; background: rgba(20, 13, 34, .38);
    opacity: 0; transition: opacity .12s ease;
}
.cc-capa[hidden] { display: none; }
.cc-capa.visible { opacity: 1; }
.cc-caja {
    width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column;
    background: var(--white, #FFFFFF); color: var(--ink, #1C1430);
    border: 1px solid var(--line, #D7D9DE); border-radius: var(--r-md, 12px);
    box-shadow: var(--sombra-alta, 0 12px 32px rgba(60, 35, 95, .16));
    transform: translateY(-6px) scale(.99); transition: transform .14s ease;
    overflow: hidden;
}
.cc-capa.visible .cc-caja { transform: none; }
.cc-cabeza { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--mist, #E8EAED); }
.cc-cabeza > i { color: var(--stone, #5B5168); }
.cc-cabeza input,
.cc-cabeza input[type=text] {
    flex: 1 1 auto; height: 54px; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important;
    font-size: var(--t-md, 1rem); color: var(--ink, #1C1430); padding: 0; margin: 0;
}
.cc-cabeza input::placeholder { color: var(--stone, #5B5168); opacity: .8; }
.cc-caja .cc-lista { flex: 1 1 auto; padding: 4px 0; min-height: 60px; }
.cc-pie {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 16px;
    border-top: 1px solid var(--mist, #E8EAED); font-size: var(--t-xs, .75rem); color: var(--stone, #5B5168);
}
.cc-pie a { margin-left: auto; color: var(--purpura, #3C235F); font-weight: 600; }
.cc-tecla {
    display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--line, #D7D9DE);
    border-bottom-width: 2px; border-radius: 4px; font: 600 11px/1.4 var(--font-body, sans-serif);
    color: var(--stone, #5B5168); background: var(--paper, #F6F7F8); text-align: center;
}

/* Boton de la barra lateral que abre la paleta */
.cc-disparador {
    display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 4px 8px 10px;
    padding: 8px 10px; border: 1px solid var(--line, #D7D9DE); border-radius: var(--r-sm, 8px);
    background: var(--paper, #F6F7F8); color: var(--stone, #5B5168); font-size: var(--t-sm, .8125rem);
    cursor: pointer; text-align: left; transition: border-color .12s ease, background-color .12s ease;
}
.cc-disparador:hover { border-color: var(--purpura-soft, #5A4080); background: var(--white, #FFFFFF); }
.cc-disparador .rail-texto { flex: 1 1 auto; }
.barra-plegada .cc-disparador .cc-tecla { display: none; }

/* ---------- Pantalla "¿Qué necesitas?" ---------- */
.cc-pantalla { max-width: 760px; margin: 0 auto; padding: 5vh 0 48px; }
.cc-saludo { text-align: center; margin-bottom: 22px; }
.cc-saludo small { display: block; color: var(--stone, #5B5168); font-size: var(--t-base, .875rem); margin-bottom: 4px; }
.cc-saludo h2 {
    font-family: var(--font-title, sans-serif); font-weight: 700; color: var(--purpura, #3C235F);
    font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; letter-spacing: -.01em;
}
.cc-principal {
    position: relative; background: var(--white, #FFFFFF); border: 1px solid var(--line, #D7D9DE);
    border-radius: var(--r-lg, 18px); box-shadow: var(--sombra-tarjeta, 0 2px 8px rgba(28, 20, 48, .07));
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cc-principal:focus-within { border-color: var(--purpura-soft, #5A4080); box-shadow: var(--sombra-alta, 0 12px 32px rgba(60, 35, 95, .16)); }
.cc-principal .cc-cabeza { border-bottom: 0; padding: 0 20px; }
.cc-principal .cc-cabeza input { height: 62px; font-size: var(--t-lg, 1.125rem); }
.cc-principal .cc-lista { max-height: 52vh; }
.cc-principal .cc-lista:not(:empty) { border-top: 1px solid var(--mist, #E8EAED); padding: 4px 0 8px; }
.cc-ejemplos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.cc-ejemplo {
    border: 1px solid var(--line, #D7D9DE); background: transparent; color: var(--stone, #5B5168);
    border-radius: var(--r-pill, 999px); padding: 5px 12px; font-size: var(--t-sm, .8125rem); cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.cc-ejemplo:hover { border-color: var(--purpura-soft, #5A4080); color: var(--purpura, #3C235F); }

.cc-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 34px; }
.cc-seccion h3 {
    font-size: var(--t-xs, .75rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--stone, #5B5168); margin: 0 0 8px 4px;
}
.cc-seccion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-atajo {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm, 8px);
    color: var(--ink, #1C1430); text-decoration: none; font-size: var(--t-base, .875rem);
    transition: background-color .12s ease;
}
.cc-atajo:hover, .cc-atajo:focus-visible { background: var(--purpura-wash, #F1ECF8); color: var(--ink, #1C1430); text-decoration: none; }
.cc-atajo .cc-icono { flex-basis: 28px; width: 28px; height: 28px; font-size: 12px; }
.cc-atajo span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-seccion li { display: flex; align-items: center; gap: 2px; }
.cc-seccion li .cc-atajo { flex: 1 1 auto; min-width: 0; }
.cc-seccion li:hover .cc-estrella { opacity: 1; }
.cc-seccion-vacia { color: var(--stone, #5B5168); font-size: var(--t-sm, .8125rem); padding: 8px 10px; }

.cc-ver-todos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
a.cc-boton-todos, a.cc-boton-todos:hover { text-decoration: none; }
.cc-boton-todos {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line, #D7D9DE);
    background: var(--white, #FFFFFF); color: var(--purpura, #3C235F); font-weight: 600;
    border-radius: var(--r-pill, 999px); padding: 9px 18px; cursor: pointer; font-size: var(--t-base, .875rem);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.cc-boton-todos:hover { border-color: var(--purpura-soft, #5A4080); box-shadow: var(--sombra-baja); }

/* Drawer "Ver todos los módulos" */
.cc-drawer-capa { position: fixed; inset: 0; z-index: 1990; background: rgba(20, 13, 34, .30); opacity: 0; transition: opacity .15s ease; }
.cc-drawer-capa[hidden] { display: none; }
.cc-drawer-capa.visible { opacity: 1; }
.cc-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
    background: var(--white, #FFFFFF); box-shadow: var(--sombra-alta); display: flex; flex-direction: column;
    transform: translateX(16px); transition: transform .18s ease;
}
.cc-drawer-capa.visible .cc-drawer { transform: none; }
.cc-drawer-cabeza { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mist, #E8EAED); }
.cc-drawer-cabeza h3 { flex: 1 1 auto; margin: 0; font-size: var(--t-lg, 1.125rem); font-family: var(--font-title, sans-serif); color: var(--purpura, #3C235F); }
.cc-drawer-cabeza button { border: 0; background: transparent; width: 32px; height: 32px; border-radius: var(--r-xs, 6px); color: var(--stone, #5B5168); cursor: pointer; }
.cc-drawer-cabeza button:hover { background: var(--cloud, #EEF0F4); }
.cc-drawer-filtro { padding: 10px 16px; border-bottom: 1px solid var(--mist, #E8EAED); }
.cc-drawer-filtro input { width: 100%; }
.cc-drawer-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 8px 8px 24px; }
.cc-drawer-seccion { font-size: var(--t-xs, .75rem); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stone, #5B5168); padding: 14px 8px 6px; }
.cc-drawer details { border-radius: var(--r-sm, 8px); }
.cc-drawer summary {
    display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer; list-style: none;
    border-radius: var(--r-sm, 8px); font-weight: 600; font-size: var(--t-base, .875rem); color: var(--ink, #1C1430);
}
.cc-drawer summary::-webkit-details-marker { display: none; }
.cc-drawer summary:hover { background: var(--cloud, #EEF0F4); }
.cc-drawer summary .cc-conteo { margin-left: auto; font-weight: 500; color: var(--stone, #5B5168); font-size: var(--t-xs, .75rem); }
.cc-drawer summary::after { content: '\f078'; font: 900 10px 'Font Awesome 6 Free'; color: var(--stone, #5B5168); transition: transform .15s ease; }
.cc-drawer details[open] summary::after { transform: rotate(180deg); }
.cc-drawer-lista { display: flex; flex-direction: column; padding: 2px 0 8px 46px; }
.cc-drawer-lista a { padding: 5px 8px; border-radius: var(--r-xs, 6px); color: var(--ink, #1C1430); font-size: var(--t-sm, .8125rem); text-decoration: none; }
.cc-drawer-lista a:hover { background: var(--purpura-wash, #F1ECF8); text-decoration: none; }

@media (max-width: 575px) {
    .cc-capa { padding-top: 8px; }
    .cc-caja { max-height: calc(100vh - 16px); }
    .cc-pie .cc-pie-teclas { display: none; }
    .cc-pantalla { padding-top: 16px; }
    .cc-estrella { opacity: 1; }
    .cc-principal .cc-tecla, .cc-disparador .cc-tecla { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-capa, .cc-caja, .cc-drawer, .cc-drawer-capa, .cc-item, .cc-estrella { transition: none; }
    .cc-lista.cc-cargando::before, .cc-pide-eleccion .cc-item.activo { animation: none; }
}

/* ---------- Inicio del SGA (panel.html) ---------- */
.cc-principal--panel { margin: 18px 0 10px; }
.cc-ejemplos--panel { justify-content: flex-start; margin: 0 0 22px; }

/* "Ver todos tus modulos": el catalogo completo, plegado */
.panel-catalogo {
    margin: 26px 0 8px; border: 1px solid var(--line, #D7D9DE); border-radius: var(--r-md, 12px);
    background: var(--white, #FFFFFF);
}
.panel-catalogo > summary {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none;
    border-radius: var(--r-md, 12px); transition: background-color .12s ease;
}
.panel-catalogo > summary::-webkit-details-marker { display: none; }
.panel-catalogo > summary:hover { background: var(--purpura-wash, #F1ECF8); }
.panel-catalogo > summary:focus-visible { outline: 2px solid var(--purpura-soft, #5A4080); outline-offset: 2px; }
.panel-catalogo-icono {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--r-sm, 8px);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--purpura, #3C235F); background: var(--purpura-wash, #F1ECF8);
}
.panel-catalogo-texto { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.panel-catalogo-texto strong { color: var(--purpura, #3C235F); font-size: var(--t-md, 1rem); }
.panel-catalogo-texto span { color: var(--stone, #5B5168); font-size: var(--t-sm, .8125rem); }
.panel-catalogo-flecha { color: var(--stone, #5B5168); transition: transform .15s ease; }
.panel-catalogo[open] > summary { border-bottom: 1px solid var(--mist, #E8EAED); border-radius: var(--r-md, 12px) var(--r-md, 12px) 0 0; }
.panel-catalogo[open] .panel-catalogo-flecha { transform: rotate(180deg); }
.panel-catalogo > :not(summary) { margin-left: 18px; margin-right: 18px; }
.panel-catalogo > :first-of-type:not(summary) { margin-top: 16px; }
.panel-catalogo > :last-child { margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .panel-catalogo-flecha { transition: none; } }

/* ---------- "Inicio: Panel / Buscador" junto al boton del tema (barra lateral) ---------- */
.barra-pie .cc-tema-inicio { margin-bottom: 6px; }
.barra-pie .cc-tema-inicio i { color: var(--naranja, #EA600A); }

/* Aviso de novedades en /commandcenter (el modal vive en el panel) */
.cc-novedades { display: flex; justify-content: center; margin: -8px 0 16px; }
.cc-novedades a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
    font-size: var(--t-sm, .8125rem); font-weight: 600; text-decoration: none;
    color: var(--naranja-hover, #C24E08); background: color-mix(in srgb, var(--naranja, #EA600A) 12%, transparent); }
.cc-novedades a:hover { text-decoration: underline; }

/* ---------- Fondo 3D de /commandcenter (static/js/cc-fondo.js) ---------- */
/* Pantalla completa y fijo (el JS lo mueve al <body>): queda detras de todo,
   se ve en los espacios entre tarjetas y no se mueve con el scroll. */
.cc-escenario { position: relative; }
.cc-fondo {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    opacity: 0; transition: opacity 1s ease;
}
.cc-fondo.listo { opacity: 1; }
.cc-fondo canvas { display: block; width: 100% !important; height: 100% !important; }
/* Velo muy suave en el centro: la red se ve fuerte en los bordes y discreta
   detras del contenido, para que nada cueste leer. */
.cc-fondo::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 60% at 55% 45%,
        color-mix(in srgb, var(--paper, #F6F7F8) 70%, transparent) 0%, transparent 100%);
}
/* Un halo suave detras del titulo, para que siempre se lea sobre la red */
.cc-saludo { position: relative; }
.cc-saludo::before {
    content: ""; position: absolute; inset: -20px 15%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, var(--paper, #F6F7F8), transparent);
    opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .cc-fondo { transition: none; } }