/*
   Lo que se abre encima de una pantalla: SabioPopup, SabioBottomSheet (y su pie de filtros) y SabioPanelFlotante.
   Una sola hoja de estilos: antes cada instancia metía su <style>, aun cerrada, y las solapas vivas las dejan montadas.
   Las animaciones son sólo transform y opacity, con fill "backwards" en la entrada: al terminar no queda ningún
   transform, que encerraría a lo position: fixed de adentro (listas de combos, calendarios).
   Los colores llegan por variables desde cada componente (Theme): --sp-fondo, --sp-borde, --sp-gris, --sp-sombra...
*/

/* ---------- Movimiento ---------- */
@keyframes sabioTelonEntra { from { opacity: 0; } }
@keyframes sabioTelonSale { to { opacity: 0; } }
@keyframes sabioCajaEntra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sabioCajaSale { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes sabioPanelEntra { from { opacity: 0; transform: translateX(24px); } }
@keyframes sabioPanelSale { to { opacity: 0; transform: translateX(18px); } }
@keyframes sabioHojaEntra { from { transform: translateY(100%); } }
@keyframes sabioHojaSale { to { transform: translateY(100%); } }
@keyframes sabioCapaToque { 40% { transform: scale(1.012); } }
@keyframes sabioCapaFunde { from { opacity: 0; } }

/* ---------- Partes comunes ---------- */
.sp-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 8px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.sp-cabecera.sp-compacta { padding: 10px 14px; }
.sp-cabecera.sp-sola { padding: 18px 20px; }
.sp-scrolleada > .sp-cabecera { border-bottom-color: color-mix(in srgb, var(--sp-borde) 70%, transparent); }
.sp-titulos { flex: 1 1 auto; min-width: 0; }
.sp-titulo { margin: 0; padding-top: 1px; font-size: 15px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--sp-texto); }
.sp-subtitulo { margin: 1px 0 0; font-size: var(--sabio-fs-12, 12px); color: var(--sp-texto3); }
.sp-descripcion { margin: 4px 0 0; font-size: var(--sabio-fs-13, 13px); line-height: 1.5; color: var(--sp-texto2); white-space: pre-wrap; }
.sp-icono {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--sp-tono);
    background: color-mix(in srgb, var(--sp-tono) 12%, transparent);
}
.sp-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px 12px 20px;
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--sp-borde) 70%, transparent);
    background: color-mix(in srgb, var(--sp-gris) 45%, var(--sp-fondo));
    border-radius: 0 0 15px 15px;
}
.sp-atajos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 11px;
    color: var(--sp-texto3);
}
.sp-atajos kbd {
    font: 500 10.5px/12px inherit;
    font-family: inherit;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid var(--sp-borde);
    color: var(--sp-texto3);
}
.sp-pregunta { margin-right: auto; font-size: var(--sabio-fs-13, 13px); font-weight: 500; color: var(--sp-texto); animation: sabioCapaFunde .12s ease-out backwards; }
.sabio-capa-atras { transform: scale(.985); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.sabio-capa-toque { animation: sabioCapaToque .14s ease-out; }

/* ---------- SabioPopup ---------- */
.sp-overlay {
    left: 0;
    right: 0;
    top: var(--vv-offset-top, 0px);
    height: var(--vv-height, 100dvh);
    background-color: var(--sp-telon);
    display: flex;
    align-items: center;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    padding: var(--sp-pad, 16px);
    box-sizing: border-box;
    animation: sabioTelonEntra .18s ease-out backwards;
}
.sp-overlay.sabio-capa-encima { background-color: var(--sp-telon2); }
.sp-overlay.sp-arriba { align-items: flex-start; }
.sp-caja {
    position: relative;
    width: 100%;
    max-width: var(--sp-ancho, 500px);
    max-height: calc(var(--vv-height, 100dvh) - 32px);
    min-height: 0;
    height: var(--sp-alto, auto);
    align-self: center;
    margin: auto;
    background-color: var(--sp-fondo);
    border: 1px solid color-mix(in srgb, var(--sp-borde) 80%, transparent);
    border-radius: 16px;
    box-shadow: var(--sp-sombra);
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: sabioCajaEntra .2s cubic-bezier(.16, 1, .3, 1) backwards;
}
.sp-overlay.sp-arriba > .sp-caja { align-self: flex-start; margin: 0 auto; }
.sp-caja:focus { outline: none; }
.sp-asa { display: none; }
.sp-cuerpo {
    padding: 6px 20px 18px;
    flex: 1;
    min-height: 0;
    max-height: calc(var(--vv-height, 90vh) - 160px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: contain;
}
.sp-cuerpo.sp-sin-cabecera { padding: 24px; }
.sp-cuerpo.sp-compacta { padding: 10px; }
.sp-cuerpo.sp-fijo { max-height: none; overflow-y: hidden; }
.sp-overlay.sabio-capa-sale { animation: sabioTelonSale .14s ease-in forwards; pointer-events: none; }
.sp-overlay.sabio-capa-sale > .sp-caja { animation: sabioCajaSale .13s cubic-bezier(.4, 0, 1, 1) forwards; }

/* Teléfono: la misma caja es una hoja anclada abajo, sobre el teclado (el overlay sigue al visual viewport). */
@media (max-width: 767px) {
    .sp-overlay, .sp-overlay.sp-arriba { align-items: flex-end; padding: 0; overflow: hidden; }
    .sp-caja, .sp-overlay.sp-arriba > .sp-caja {
        max-width: 100%;
        max-height: calc(var(--vv-height, 100dvh) * .92);
        height: var(--sp-alto-tel, auto);
        align-self: flex-end;
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
        animation: sabioHojaEntra .26s cubic-bezier(.16, 1, .3, 1) backwards;
    }
    .sp-asa { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--sp-borde); margin: 8px auto 2px; flex: none; }
    .sp-cabecera { padding: 6px 12px 8px 16px; }
    .sp-cabecera.sp-sola { padding: 6px 16px 16px; }
    .sp-cuerpo { padding: 6px 16px 14px; max-height: none; }
    .sp-cuerpo.sp-sin-cabecera { padding: 8px 16px 14px; }
    .sp-pie { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 0; flex-wrap: wrap; }
    .sp-pie > .sabio-btn { flex: 1 1 0; min-width: 0; }
    .sp-atajos { display: none; }
    .sp-pregunta { flex: 1 0 100%; margin: 0; }
    .sp-overlay.sabio-capa-sale { animation-duration: .18s; }
    .sp-overlay.sabio-capa-sale > .sp-caja { animation: sabioHojaSale .18s cubic-bezier(.4, 0, 1, 1) forwards; }
}

/* ---------- SabioBottomSheet ---------- */
/* El backdrop sigue al visual viewport: en iOS, con el teclado, no queda una franja negra.
   position: fixed va además inline: el layout le revierte el zoom del contenido por ese atributo. */
.sbs-overlay {
    left: 0;
    right: 0;
    top: var(--vv-offset-top, 0px);
    height: var(--vv-height, 100dvh);
    background: var(--sp-telon);
    animation: sabioTelonEntra .18s ease-out backwards;
}
.sbs-overlay.sabio-capa-encima { background: var(--sp-telon2); }
.sbs-overlay.sabio-capa-sale { animation: sabioTelonSale .14s ease-in forwards; pointer-events: none; }

/* Teléfono: anclada abajo y sobre el teclado (bottom = --vv-keyboard-height), con el alto
   tomado del visual viewport para que el header nunca quede tapado. */
.sbs-hoja {
    left: 0;
    right: 0;
    bottom: var(--vv-keyboard-height, 0px);
    max-height: var(--sbs-alto);
    min-height: 200px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    display: flex;
    flex-direction: column;
    animation: sabioHojaEntra .26s cubic-bezier(.16, 1, .3, 1) backwards;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}
.sbs-hoja:focus { outline: none; }
.sbs-hoja-sale {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
    animation: sabioHojaSale .18s cubic-bezier(.4, 0, 1, 1) forwards;
}
.sbs-grabber {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    margin: 8px auto 4px auto;
    flex-shrink: 0;
}
.sbs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: var(--sbs-header-pad);
    flex-shrink: 0;
}
.sbs-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sbs-cerrar {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sp-texto2);
    background: color-mix(in srgb, var(--sp-texto2) 9%, var(--sp-fondo));
}
@media (hover: none) and (pointer: coarse) {
    .sbs-cerrar { width: 40px; height: 40px; border-radius: 12px; }
}
.sbs-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
}
.sbs-pie {
    flex-shrink: 0;
    padding: var(--sbs-footer-pad);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.sbs-pregunta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.sbs-pregunta > .sabio-btn { flex: 1 1 0; min-width: 0; }

/* Escritorio: panel a la derecha, del alto del contenido. El ancho lo da --sbs-ancho. La hoja vive
   dentro de .main-content (fixed = otro contexto de apilado): arranca debajo de la barra y a la
   izquierda del asistente con las variables que pone el layout. */
@media (min-width: 768px) {
    .sbs-hoja.sbs-lateral {
        left: auto;
        top: calc(var(--sabio-contenido-top, 0px) + 8px);
        right: calc(var(--sabio-contenido-derecha, 0px) + 8px);
        bottom: 8px;
        width: min(var(--sbs-ancho), calc(100vw - var(--sabio-contenido-derecha, 0px) - 16px));
        max-height: none;
        min-height: 0;
        border-radius: 16px;
        padding-bottom: 0;
        border: 1px solid color-mix(in srgb, var(--sp-borde) 80%, transparent);
        box-shadow: var(--sp-sombra) !important;
        animation: sabioPanelEntra .24s cubic-bezier(.16, 1, .3, 1) backwards;
    }
    .sbs-hoja-sale.sbs-lateral { animation: sabioPanelSale .15s cubic-bezier(.4, 0, 1, 1) forwards; }
    .sbs-lateral .sbs-grabber { display: none; }
    .sbs-lateral .sbs-header { padding: 14px 14px 12px 20px; }
    .sbs-lateral .sbs-pie { padding: 12px 14px 12px 20px; }
    .sbs-lateral .sbs-pregunta > .sabio-btn { flex: none; }
    .sbs-lateral .sbs-pregunta .sp-pregunta { flex: none; margin-right: auto; }
}

/* ---------- SabioBottomSheetFilterFooter ---------- */
.sbs-ff {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.sbs-ff-limpiar {
    display: flex;
    justify-content: center;
}
.sbs-ff-botones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .sbs-ff {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .sbs-ff-limpiar { justify-content: flex-start; }
    .sbs-ff-botones {
        grid-template-columns: minmax(96px, auto) minmax(120px, auto);
        justify-content: end;
        width: auto;
        margin-left: auto;
    }
}

/* ---------- SabioPanelFlotante ---------- */
@keyframes sabioPanelFondoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sabioPanelFondoOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sabioPanelDerechaIn { from { opacity: 0; transform: translateX(36px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sabioPanelDerechaOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px) scale(.99); } }
@keyframes sabioPanelCentroIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sabioPanelCentroOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
.sabio-panel-fondo { animation: sabioPanelFondoIn .22s ease-out backwards; }
.sabio-panel-fondo.sabio-panel-saliendo { animation: sabioPanelFondoOut .18s ease-in forwards; }
.sabio-panel-derecha { animation: sabioPanelDerechaIn .34s cubic-bezier(.16, 1, .3, 1) backwards; }
.sabio-panel-derecha.sabio-panel-saliendo { animation: sabioPanelDerechaOut .18s cubic-bezier(.4, 0, 1, 1) forwards; }
.sabio-panel-centro { animation: sabioPanelCentroIn .3s cubic-bezier(.16, 1, .3, 1) backwards; }
.sabio-panel-centro.sabio-panel-saliendo { animation: sabioPanelCentroOut .16s cubic-bezier(.4, 0, 1, 1) forwards; }
.sabio-panel:focus { outline: none; }
/* app.css oculta las barras de todo el portal; en un panel largo la barra dice que hay más abajo. */
.sabio-panel-cuerpo { scrollbar-width: auto; }
.sabio-panel-cuerpo::-webkit-scrollbar { display: block; width: 8px; background: transparent; }
.sabio-panel-cuerpo::-webkit-scrollbar-track { background: transparent; }
.sabio-panel-cuerpo::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- Movimiento reducido: un fundido corto, sin desplazamiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .sp-overlay, .sp-caja, .sbs-overlay, .sbs-hoja, .sbs-hoja.sbs-lateral { animation: sabioCapaFunde .08s linear backwards !important; }
    .sp-overlay.sabio-capa-sale, .sbs-overlay.sabio-capa-sale { animation: sabioTelonSale .08s linear forwards !important; }
    .sp-overlay.sabio-capa-sale > .sp-caja, .sbs-hoja-sale, .sbs-hoja-sale.sbs-lateral { animation: sabioTelonSale .08s linear forwards !important; }
    .sabio-capa-atras { transform: none; transition: none; }
    .sabio-capa-toque { animation: none; }
    .sabio-panel-fondo, .sabio-panel-derecha, .sabio-panel-centro { animation-duration: .01s !important; }
}

/* ---------- SabioVisorFoto ---------- */
.sv-fondo {
    inset: 0;
    background: rgba(0, 0, 0, .9);
    animation: sabioTelonEntra .18s ease-out backwards;
    cursor: zoom-out;
}
.sv-fondo.sabio-capa-sale { animation: sabioTelonSale .14s ease-in forwards; pointer-events: none; }
.sv-caja {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    outline: none;
    animation: sabioCajaEntra .2s cubic-bezier(.16, 1, .3, 1) backwards;
}
.sv-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px;
    flex: none;
    color: #fff;
    font-size: var(--sabio-fs-14, 14px);
    font-weight: 600;
    cursor: default;
}
.sv-acciones { display: flex; align-items: center; gap: 8px; }
.sv-boton {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .15);
    cursor: pointer;
}
.sv-lienzo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.sv-foto {
    max-width: min(1400px, 100%);
    max-height: 100%;
    min-width: 0;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .8);
    cursor: default;
}
@media (prefers-reduced-motion: reduce) {
    .sv-fondo, .sv-caja { animation: sabioCapaFunde .08s linear backwards !important; }
    .sv-fondo.sabio-capa-sale { animation: sabioTelonSale .08s linear forwards !important; }
}