/**
 * @file style.css
 * @description Estilos del Editor PDF Interactivo — Proyecto Sándwich.
 * @project Editor PDF Interactivo
 * @phase Fase 1 — Cimientos Técnicos
 * @created 2026-05-14
 */

/* Define los estilos base y el reseteo de márgenes para asegurar consistencia entre navegadores */

/* ================================================================
   1. SISTEMA DE DISEÑO (Tokens)
   ================================================================ */
:root {
    /* Define colores principales de la paleta claro-índigo */
    --color-bg-app: #f8fafc;
    --color-bg-canvas: #e2e8f0;
    --color-primario: #6366f1;
    --color-primario-hover: #4f46e5;
    --color-texto: #1e293b;
    --color-texto-secundario: #64748b;
    
    /* Define colores de superficies y paneles flotantes */
    --color-superficie: rgba(255, 255, 255, 0.95);
    --color-borde: rgba(0, 0, 0, 0.08);
    --color-borde-hover: rgba(0, 0, 0, 0.15);
    --color-sombra: rgba(0, 0, 0, 0.08);
    --color-hover-btn: #f1f5f9;
}

/* ================================================================
   2. RESET Y BASE (Global)
   ================================================================ */

/* Establece el modelo de caja y elimina espaciados por defecto en todos los elementos */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configura el comportamiento base del documento para soportar dimensiones relativas */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Configura la tipografía global, el esquema de colores claro y el comportamiento del scroll */
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    background: var(--color-bg-app);
    color: var(--color-texto);
    overflow: hidden;
    padding: 1vh 1vw; /* Agrego un marco de seguridad del 3% para amortiguar la app y evitar desbordes */
    box-sizing: border-box; /* Aseguro que el padding se descuente de las dimensiones del viewport */
}

/* ================================================================
   3. CONTENEDORES PRINCIPALES Y WORKSPACE
   ================================================================ */

/* Establece el contenedor flexible que organiza el editor en una estructura vertical;
   isolation: isolate crea un contexto de apilamiento aislado para que la plataforma
   anfitriona pueda gestionar sus propios overlays sin colisionar con el orden interno */
.d_editor_wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #ffffff;
    border-radius: 12px; /* Redondeo premium para encuadrar la aplicación flotante */
    box-shadow: 0 10px 30px var(--color-sombra); /* Sombra elegante de elevación */
    border: 1px solid var(--color-borde); /* Delimitador fino de la interfaz */
}


/* Define el área principal de trabajo para acomodar los paneles absolutos */
.d_workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-canvas);
}

/* ================================================================
   4. TOP BAR PREMIUM (Cabecera Flotante/Glass)
   ================================================================ */

/* Configura la barra superior con efecto Glassmorphism suave sobre blanco */
.d_topbar_premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: var(--color-superficie);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-borde);
    flex-shrink: 0;
    box-shadow: 0 2px 10px var(--color-sombra);
}

/* Alinea los grupos internos de la cabecera */
.d_topbar_seccion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estiliza el logotipo de texto principal */
.d_logo_text {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-texto);
    letter-spacing: -0.02em;
}

/* Genera el separador visual entre herramientas de la cabecera */
.d_toolbar_separador {
    width: 1px;
    height: 1.5rem;
    background-color: var(--color-borde);
    margin: 0 0.5rem;
}

/* Glifo compacto interno de los botones de la topbar: por defecto oculto en landscape,
   sólo se revela en portrait para sustituir el label largo. */
.d_btn_glyph {
    display: none;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Label largo del botón: visible en landscape (lectura completa).
   En portrait se oculta vía @media; el tooltip (title) sigue informando. */
.d_btn_label {
    display: inline;
}

/* Etiquetas "Página" (landscape) vs "Pg." (portrait) para el indicador de página */
.d_pagina_label {
    display: inline;
}
.d_pagina_label_corto {
    display: none;
}

/* ================================================================
   5. DOCK LATERAL FLOTANTE (Herramientas Izquierdas)
   ================================================================ */

/* Aplica diseño flotante, bordes redondeados al menú lateral.
   NOTA: no se aplica backdrop-filter porque convertiría al dock en stacking context
   atrapando los submenús (.d_group_menu) debajo del lienzo del PDF (canvas hermano que
   se pinta después en orden de flex). El fondo translúcido a 95% ya es casi opaco. */
.d_dock_lateral {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    min-width: max-content;
    box-shadow: 2px 0 10px var(--color-sombra);
}

/* Oculta la barra de scroll del menú lateral */
.d_dock_lateral::-webkit-scrollbar {
    width: 0;
}

/* Define el separador horizontal nativo del menú de herramientas */
.d_toolbar_separador_h {
    width: 100%;
    height: 1px;
    background-color: var(--color-borde);
    margin: 0.5rem 0;
}

/* ================================================================
   6. MENÚS ANIDADOS CSS (Hover Logic)
   ================================================================ */

/* Prepara el contenedor relativo para alojar los menús contextuales expandibles */
.d_tool_group {
    position: relative;
    width: 100%;
}

/* Estiliza la pestaña visible que desencadena el menú expandible */
.d_group_icon {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    color: var(--color-texto-secundario);
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Aplica el hover de la pestaña de agrupación */
.d_group_icon:hover {
    background: var(--color-hover-btn);
    color: var(--color-primario);
}

/* Construye la caja del submenú posicionada de manera absoluta;
   z-index: 1 es seguro porque el menú se cierra al hacer clic fuera (no es un overlay persistente)
   y el contexto de apilamiento ya está aislado en .d_editor_wrapper vía isolation: isolate */
.d_group_menu {
    position: absolute;
    left: 100%;
    top: 0;
    transform: translateX(10px);
    background: var(--color-superficie);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.375rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
    width: max-content;
    max-width: 16rem;
}

/* Botón compacto de icono: cuadrado, centrado, dimensión fija para una cuadrícula limpia.
   Selector combinado para ganar especificidad sobre .d_boton_herramienta { width: 100% }
   que aparece más adelante en la hoja. El tooltip (title) revela el nombre completo. */
.d_boton_herramienta.d_btn_icono {
    min-width: 2.25rem;
    width: auto;
    height: 2.25rem;
    padding: 0 0.25rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Estilo específico de la marca de resaltado dentro del botón icono (mantiene legibilidad) */
.d_btn_icono mark {
    background: #fde047;
    color: #000;
    padding: 0 0.25rem;
    border-radius: 2px;
    font-weight: 700;
    line-height: 1;
}

/* Subrayado y tachado conservan la decoración nativa con peso firme */
.d_btn_icono u,
.d_btn_icono s {
    font-weight: 700;
    text-decoration-thickness: 0.125rem;
}

/* Muestra el submenú interactivo basado en hover, focus o clic explícito (.d_menu_abierto
   se activa desde JS para soportar dispositivos táctiles donde :hover no es confiable) */
.d_tool_group:hover .d_group_menu,
.d_tool_group:focus-within .d_group_menu,
.d_tool_group.d_menu_abierto .d_group_menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Si el dock lateral tiene un grupo con hover, se oculta temporalmente el menú del grupo con foco que no tiene hover */
.d_dock_lateral:has(.d_tool_group:hover) .d_tool_group:focus-within:not(:hover) .d_group_menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ================================================================
   7. INSPECTOR CONTEXTUAL FLOTANTE (Propiedades Derechas)
   ================================================================ */

/* Reservorio invisible para todos los control-grupos del inspector. La barra
   horizontal SaaS que antes ocupaba este contenedor fue eliminada: ahora cada
   herramienta muestra su propio panel flotante (.d_floating_tabs_panel) a la
   derecha del dock. El reservorio mantiene los grupos en el DOM para que el
   dispatcher pueda moverlos via appendChild segun la herramienta activa. */
.d_floating_inspector {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

/* Layout por defecto (cuando no hay pestañas activas) */
#p_panel_trazo_default {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

/* Panel flotante universal: caja vertical anclada a la derecha del dock,
   reemplaza la antigua barra horizontal del inspector. Cada herramienta
   activa configura sus pestañas y controles via el dispatcher de JS. */
.d_floating_tabs_panel {
    position: absolute;
    top: 1rem;
    left: 8.5rem; /* Alineado a la derecha del dock lateral */
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    border: 1px solid #aaa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
    padding: 0.25rem 0.25rem 0.5rem 0.25rem;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    width: max-content;
}

.d_floating_tabs_panel.d_oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
}

.d_tabs_header {
    display: flex;
    justify-content: stretch;
    gap: 0.25rem;
    padding: 0.25rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5rem;
}

/* Boton de pestaña: azul lleno cuando activo (matching PDF mockup) */
.d_tab_btn {
    flex: 1;
    padding: 0.3rem 0.6rem;
    background: #ffffff;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    color: #333;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.d_tab_btn:hover {
    background: #f5f7fb;
}
.d_tab_btn.d_activo {
    background: #1e66f5;
    border-color: #1e66f5;
    color: #ffffff;
}

.d_tabs_body {
    padding: 0.4rem 0.25rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* El contenedor interno delega su layout al padre para unificar grupos */
.d_tab_content {
    display: none;
}

.d_tab_content:not(.d_oculto) {
    display: contents;
}

/* Grupo de control dentro del panel: layout horizontal interno
   (label / picker / botón Ø) compacto y centrado. */
.d_floating_tabs_panel .d_control_grupo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    margin: 0;
}

/* Oculta el inspector inteligentemente si no hay controles contextuales visibles */
#p_panel_trazo:not(:has(.d_control_contextual:not(.d_oculto))) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-20px);
}

/* Ordena verticalmente cada sub-grupo del inspector interactivo */
.d_control_grupo {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-direction: column;
}

/* Modifica la jerarquía tipográfica para los labels del inspector */
.d_control_grupo label {
    font-size: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-secundario);
}

/* Destaca los valores numéricos con el acento primario */
.d_valor_label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primario);
    min-width: 2.1875rem;
}

/* ================================================================
   8. SISTEMA DE BOTONES MODERNOS
   ================================================================ */

/* Normaliza transiciones y formas para todos los botones genéricos */
.d_boton_primario,
.d_boton_secundario,
.d_boton_herramienta {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Define el peso visual y la sombra del botón de llamada a la acción */
.d_boton_primario {
    background: var(--color-primario);
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* Añade microinteracción de elevación para botones primarios */
.d_boton_primario:hover {
    background: var(--color-primario-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4);
}

/* Reduce el contraste para botones secundarios usando bordes claros */
.d_boton_secundario {
    background: transparent;
    color: var(--color-texto);
    border-color: var(--color-borde);
}

/* Mejora el feedback sutil en secundario al interactuar */
.d_boton_secundario:hover {
    background: var(--color-hover-btn);
    border-color: var(--color-borde-hover);
}

/* Adapta el ancho del botón herramienta para fluir dentro del grid o menú CSS */
.d_boton_herramienta {
    background: transparent;
    color: var(--color-texto-secundario);
    width: 100%;
    text-align: left;
}

/* Retorna al ancho automático si están incrustados en la cabecera */
.d_topbar_premium .d_boton_herramienta {
    width: auto;
}

/* Oscurece el fondo e incrementa contraste del texto al posar cursor sobre herramientas */
.d_boton_herramienta:hover {
    background: var(--color-hover-btn);
    color: var(--color-texto);
}

/* Enfatiza el modo activo tiñendo fondo y bordes de la familia de acento índigo */
.d_boton_herramienta.d_activo {
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primario);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Resuelve el estado inhabilitado opacando visualmente el botón */
.d_boton_herramienta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--color-texto-secundario);
}

/* Botón de eliminar en el inspector flotante con estilos premium y soporte para modo oscuro */
.d_btn_eliminar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    width: auto;
}

.d_btn_eliminar:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

body[data-theme="dark"] .d_btn_eliminar {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.2);
}

body[data-theme="dark"] .d_btn_eliminar:hover {
    background: #f87171;
    color: #0b0d14;
    border-color: #f87171;
    box-shadow: 0 2px 6px rgba(248, 113, 113, 0.3);
}

.d_icon_trash {
    stroke: currentColor;
    flex-shrink: 0;
}

/* ================================================================
   9. INPUTS, SELECTS Y RANGES (Estilización Nativa)
   ================================================================ */

/* Oculta estructuralmente los inputs que JS intercepta por defecto */
.d_input_hidden {
    display: none;
}

/* Controla de forma absoluta el estado inactivo del framework (no alterar) */
.d_oculto {
    display: none !important;
}

/* Overlay de edicion del alumno sobre la caja de respuestas.
   Posicionamiento fijo en pantalla; el JS calcula left/top/width/height a partir
   de la geometria del rect en la caja. Scroll nativo con scrollbar oculta para que
   el texto antiguo se desplace fuera del area visible mientras se escribe. */
.d_textarea_alumno {
    position: fixed;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.16;
    transform-origin: top left;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.d_textarea_alumno::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Oculta los controles cromados por defecto del input color */
input[type="color"] {
    -webkit-appearance: none;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

/* Elimina el borde de la caja contenedora en Chrome/Edge */
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* Refina la esfera de color para acoplarla al diseño redondo nativo */
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* Dibuja la barra base plana para el deslizador estandarizado */
input[type="range"] {
    -webkit-appearance: none;
    width: 5rem;
    height: 0.35rem;
    background: var(--color-borde);
    border-radius: 1rem;
    cursor: pointer;
}

/* Construye la bola de arrastre (thumb) interactiva para el rango */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background: var(--color-primario);
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Maximiza visualmente el pulgar al posar el ratón para guiar interacción */
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Moderniza el input de tipo dropdown desplegable */
.d_input_select {
    background: var(--color-superficie);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

/* Aplica el tinte del foco primario al abrir la selección de fuentes */
.d_input_select:focus {
    border-color: var(--color-primario);
}

/* Configura un separador miniaturizado específico para los bloques de edición de texto */
.d_toolbar_separador_mini {
    width: 0.0625rem;
    height: 1.25rem;
    background: var(--color-borde);
    margin: 0 0.25rem;
}

/* Ajusta el espaciado para botones pequeños (como negritas, cursiva) */
.d_btn_formato {
    min-width: 2rem;
    padding: 0.25rem;
    font-size: 0.85rem;
    text-align: center;
}

/* Diseño Flexbox del Menú de Texto */
#p_grupo_texto {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    width: 100%;
    box-sizing: border-box;
}

#p_grupo_texto.d_oculto {
    display: none !important;
}

.d_row_selects {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.d_row_selects select {
    box-sizing: border-box;
}

#p_input_fuente {
    width: 48%;
}

#p_input_tamano_fuente {
    width: 28%;
}

.d_col_color_texto {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.d_color_texto_letra {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--color-texto);
    user-select: none;
}

.d_row_format_buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.25rem;
}

.d_row_bottom_options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.d_col_resalte {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.d_col_resalte label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    color: var(--color-texto);
    cursor: pointer;
    user-select: none;
}

#p_input_fondo_texto,
#p_input_color_texto {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.0625rem solid var(--color-borde);
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

#p_input_fondo_texto::-webkit-color-swatch-wrapper,
#p_input_color_texto::-webkit-color-swatch-wrapper {
    padding: 0;
}

#p_input_fondo_texto::-webkit-color-swatch,
#p_input_color_texto::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.d_col_opacidad_txt {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
}

.d_col_opacidad_txt:has(#p_input_opacidad_texto.d_oculto) {
    display: none !important;
}

.d_label_opacidad_title {
    font-size: 0.6rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-texto-secundario);
}

.d_row_opacidad_slider_container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.d_row_opacidad_slider_container input[type="range"] {
    flex-grow: 1;
    width: 100%;
}

.d_row_opacidad_slider_container .d_valor_label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primario);
    min-width: 2.1875rem;
    text-align: right;
}

/* Botones de radio premium circulares */
.d_btn_radio_custom {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid var(--color-borde);
    border-radius: 50%;
    outline: none;
    background-color: var(--color-superficie);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.d_btn_radio_custom:checked {
    border-color: var(--color-primario);
}

.d_btn_radio_custom::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--color-primario);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: scale(0.5);
}

.d_btn_radio_custom:checked::after {
    opacity: 1;
    transform: scale(1);
}

/* Helper para las columnas de los otros inspectores */
.d_columna_color {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.d_columna_check {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.d_label_checkbox_custom {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}


/* ================================================================
   10. NAVEGACIÓN Y PAGINACIÓN
   ================================================================ */

/* Encapsula la paginación de PDF usando contrastes de superficie tenues */
.d_control_navegacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-hover-btn);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    margin-top: 1rem;
}

/* Fija la legibilidad de la cadena de texto de página actual vs total */
.d_indicador_paginas {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    min-width: 6rem;
    text-align: center;
    user-select: none;
    font-weight: 500;
}

/* Acentúa el conteo variable asignando el azul corporativo */
.d_indicador_paginas span {
    color: var(--color-primario);
    font-weight: 600;
}

.d_input_pagina_actual {
    width: 3.5rem;
    height: 1.8rem;
    text-align: center;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    background-color: var(--color-superficie);
    color: var(--color-primario);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    margin: 0 4px;
    outline: none;
    transition: all 0.2s ease;
}

.d_input_pagina_actual:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 2px rgba(138, 170, 229, 0.2);
}

/* Ocultar las flechas nativas del input number */
.d_input_pagina_actual::-webkit-inner-spin-button, 
.d_input_pagina_actual::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.d_input_pagina_actual {
    -moz-appearance: textfield;
}

/* ================================================================
   11. ÁREA CENTRAL, CANVAS Y ESTADO VACÍO (SÁNDWICH)
   ================================================================ */

/* Centra el documento de trabajo proporcionando relleno infinito como márgenes */
.d_canvas_container {
    flex: 1;
    overflow: auto;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem;
}

/* Coordina visualmente el comportamiento flexible sin PDF inicial cargado */
.d_estado_vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2.5rem;
    color: var(--color-texto-secundario);
    text-align: center;
    font-size: 1rem;
    flex: 1;
}

/* Dibuja un placeholder visual simulando el ícono nativo antes de archivo adjunto */
.d_estado_icono {
    width: 4.5rem;
    height: 4.5rem;
    border: 2px dashed var(--color-borde-hover);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-texto-secundario);
    margin-bottom: 0.5rem;
}

/* Complementa la orientación al usuario con instrucciones legibles */
.d_estado_hint {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
}

/* Configura el envoltorio del sándwich creando la hoja de papel elevada */
.d_sandwich {
    position: relative;
    display: inline-block;
    vertical-align: top;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* Sombra difusa moderna tipo Figma */
    background: #ffffff;
    border-radius: 8px; /* Reblandece los bordes ásperos de un documento nativo */
}

/* Provee un entorno de display base para que las dimensiones coincidan */
#p_canvas_fondo {
    display: block;
    border-radius: 8px;
}

/* Forzar superposición inmutable entre la capa Fabric interactiva y la imagen visual del PDF */
.d_sandwich .canvas-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 8px;
}

/* ================================================================
   12. INDICADOR DE CARGA GLOBAL (SPINNER)
   ================================================================ */

/* Empaña enteramente la interfaz mediante filtro difuminador profundo mientras procesa memoria PDF */
.d_cargador {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transition: opacity 0.3s ease;
}

/* Declara tipográficamente el letrero persistente de carga en un formato prominente */
.d_cargador p {
    color: var(--color-texto);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

/* Ensambla la estructura semicircular rotatoria de retroalimentación asíncrona */
.d_spinner_anillo {
    width: 4rem;
    height: 4rem;
    border: 4px solid var(--color-borde);
    border-top: 4px solid var(--color-primario);
    border-radius: 50%;
    animation: girar 1s linear infinite;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Ejecuta de manera secuencial 360 grados la aguja del spinner infinito */
@keyframes girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================================================
   13. CONTROLES DE TEXTO (Fase 5.6)
   ================================================================ */

.d_input_select {
    background: var(--color-superficie);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.d_input_select:focus {
    border-color: var(--color-primario);
}

.d_toolbar_separador_mini {
    width: 1px;
    height: 1.25rem;
    background: var(--color-borde);
    margin: 0 0.25rem;
}

/* Evita que los botones de formato ocupen el 100% del ancho como en el menú lateral */
.d_floating_inspector .d_boton_herramienta.d_btn_formato,
.d_floating_tabs_panel .d_boton_herramienta.d_btn_formato {
    width: auto;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   14. ESTADO DE INICIO (Sin PDF)
   ================================================================ */

/* Oculta todo el arsenal de edición si no hay un archivo PDF en el lienzo */
body:has(#p_estado_vacio:not(.d_oculto)) .d_dock_lateral,
body:has(#p_estado_vacio:not(.d_oculto)) .d_floating_inspector,
body:has(#p_estado_vacio:not(.d_oculto)) .d_seccion_nav,
body:has(#p_estado_vacio:not(.d_oculto)) .d_seccion_history,
body:has(#p_estado_vacio:not(.d_oculto)) #p_btn_guardar,
body:has(#p_estado_vacio:not(.d_oculto)) #p_btn_exportar {
    display: none !important;
    pointer-events: none;
}

/* ================================================================
   15. POPOVER NOTAS ADHESIVAS (Fase 7.6)
   ================================================================ */

.d_popover_nota {
    position: absolute;
    width: 250px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.d_popover_nota textarea {
    width: 100%;
    height: 100px;
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-texto);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s ease;
}

.d_popover_nota textarea:focus {
    border-color: var(--color-primario);
    background: #ffffff;
}

.d_popover_footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Ocultar el botón Nota Adh. en modo Alumno de forma elegante */
body:has(#p_select_modo option[value="alumno"]:checked) #p_btn_nota_adhesiva {
    display: none !important;
}

/* ================================================================
   15.5 POPOVER ENLACES EXTERNOS (Fase 3.6)
   ================================================================ */

.d_popover_enlace {
    position: absolute;
    width: auto;
    max-width: 320px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

.d_popover_enlace_contenido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.d_url_texto {
    font-size: 0.8rem;
    color: var(--color-primario);
    text-decoration: underline;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 160px;
    cursor: pointer;
    font-weight: 500;
}

/* Ocultar el botón Enlace en modo Alumno de forma elegante */
body:has(#p_select_modo option[value="alumno"]:checked) #p_btn_enlace {
    display: none !important;
}

/* ================================================================
   15.6 MODAL DE CONFIGURACIÓN DE HIPERVÍNCULOS (Centrado en Pantalla)
   ================================================================ */

.d_modal_enlace {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transition: opacity 0.25s ease;
}

.d_modal_enlace_cuerpo {
    width: 90%;
    max-width: 420px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transform: scale(0.95);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.d_modal_enlace:not(.d_oculto) .d_modal_enlace_cuerpo {
    transform: scale(1);
}

.d_modal_enlace_titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-texto);
    margin: 0;
}

.d_modal_enlace_input_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.d_modal_enlace_input_wrapper label {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    font-weight: 500;
}

.d_modal_enlace_input_wrapper input {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.d_modal_enlace_input_wrapper input:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(30, 102, 245, 0.15);
}

.d_selector_radial_grupo {
    display: flex;
    gap: 0.5rem;
    background: var(--color-bg-app);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    align-items: center;
}

.d_radio_oculto {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.d_radio_label_premium {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-texto-secundario);
    user-select: none;
}

.d_radio_label_premium:hover {
    background: rgba(0, 0, 0, 0.02);
    color: var(--color-texto);
}

.d_radio_oculto:checked + .d_radio_label_premium {
    background: var(--color-superficie);
    border-color: var(--color-borde);
    color: var(--color-primario);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.d_radio_icon_svg {
    display: block;
    stroke: currentColor;
}

.d_radio_icon_text {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: currentColor;
}

.d_modal_enlace_botones {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.d_modal_enlace_botones button {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.d_cursor_enlace_flotante {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-primario);
    color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transform: translate(15px, -30px);
    transition: opacity 0.15s ease;
    opacity: 0.95;
}

.d_cursor_enlace_flotante svg {
    stroke: currentColor;
}

.d_cursor_enlace_flotante span {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffffff;
}


/* ================================================================
   16. BARRA FLOTANTE DERECHA (Zoom e Historial — Opciones Adicionales)
   ================================================================ */

.d_barra_flotante_derecha {
    position: fixed;
    right: 12px;
    top: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    padding: 5px 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    gap: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.d_barra_flotante_derecha:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.d_grupo_flotante_vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.d_boton_flotante {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: #ffffff;
    color: var(--color-texto);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    padding: 0;
}

.d_boton_flotante:hover:not(:disabled) {
    background: var(--color-primario);
    color: #ffffff;
    border-color: var(--color-primario);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.d_boton_flotante:active:not(:disabled) {
    transform: scale(0.95);
}

.d_boton_flotante:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
    color: #94a3b8;
    border-color: rgba(0, 0, 0, 0.04);
}

.d_valor_flotante_label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-primario);
    min-width: 26px;
    text-align: center;
    user-select: none;
    padding: 1px 2px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 4px;
    line-height: 1.1;
}

.d_divisor_flotante {
    width: 16px;
    height: 1px;
    background: var(--color-borde);
    margin: 2px 0;
}

.d_divisor_seccion_flotante {
    width: 100%;
    height: 1px;
    background: var(--color-borde);
    opacity: 0.6;
}


/* ================================================================
   17. BOTÓN FLOTANTE DE TEMA (Claro / Oscuro)
   ================================================================ */

/* Botón circular anclado en la esquina inferior izquierda a un 10% del fondo de pantalla.
   Intercambia entre los SVG de sol (modo claro) y luna (modo oscuro) según data-theme. */
.d_btn_tema {
    position: fixed;
    left: 2.2rem;
    bottom: 4vh;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 1px solid #7e7e7e;
    box-shadow: 0 6px 18px var(--color-sombra), 0 0 0 1px rgba(0,0,0,0.02);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.d_btn_tema:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 10px 24px var(--color-sombra), 0 0 0 1px var(--color-borde-hover);
}

.d_btn_tema:active {
    transform: translateY(0) scale(0.97);
}

/* Los dos SVG ocupan el mismo espacio: alternamos visibilidad según el tema */
.d_tema_svg {
    width: 2.25rem;
    height: 2.25rem;
    display: block;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

/* Modo claro (por defecto): se ve el sol, la luna queda oculta */
.d_tema_luna { display: none; }

/* Modo oscuro: se ve la luna, el sol queda oculto */
body[data-theme="dark"] .d_tema_sol { display: none; }
body[data-theme="dark"] .d_tema_luna { display: block; }


/* ================================================================
   18. TEMA OSCURO — Paleta Índigo + Negro
   ================================================================ */

/* Redefine las variables CSS bajo el atributo data-theme="dark" del body.
   Todos los componentes que consumen las variables (--color-*) cambian automáticamente.
   Mantenemos el indigo #6366f1 como acento; cambia fondo, superficies y texto. */
body[data-theme="dark"] {
    --color-bg-app: #0b0d14;
    --color-bg-canvas: #14161f;
    --color-primario: #818cf8;
    --color-primario-hover: #a5b4fc;
    --color-texto: #e5e7eb;
    --color-texto-secundario: #9ca3af;
    --color-superficie: rgba(24, 26, 36, 0.95);
    --color-borde: rgba(255, 255, 255, 0.08);
    --color-borde-hover: rgba(255, 255, 255, 0.18);
    --color-sombra: rgba(0, 0, 0, 0.45);
    --color-hover-btn: #1f2230;
}

/* Cobertura de colores hardcodeados: piezas que no consumen variables y quedarían en blanco.
   La página del PDF (.d_sandwich) se mantiene blanca a propósito: el documento del alumno
   conserva su fondo original; sólo cambia el chasis de la aplicación alrededor. */

body[data-theme="dark"] .d_editor_wrapper {
    background: var(--color-bg-app);
}

body[data-theme="dark"] .d_tabs_header {
    border-bottom-color: var(--color-borde);
}

body[data-theme="dark"] .d_tab_btn {
    background: rgba(185, 185, 185, 0.03);
    border-color: var(--color-borde);
    color: var(--color-texto);
}

body[data-theme="dark"] .d_tab_btn:hover {
    background: var(--color-hover-btn);
}

body[data-theme="dark"] .d_tab_btn.d_activo {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #ffffff;
}

body[data-theme="dark"] .d_floating_tabs_panel {
    border-color: var(--color-borde);
}

body[data-theme="dark"] .d_popover_nota textarea {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-texto);
}

body[data-theme="dark"] .d_popover_nota textarea:focus {
    background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .d_boton_flotante {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-texto);
}

body[data-theme="dark"] .d_boton_flotante:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-texto-secundario);
    border-color: var(--color-borde);
}

body[data-theme="dark"] .d_radio_label_premium:hover {
    background: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .d_cargador {
    background: rgba(11, 13, 20, 0.6);
}

body[data-theme="dark"] .d_valor_flotante_label {
    background: rgba(129, 140, 248, 0.12);
}

/* La etiqueta "Modo:" usa color inline en HTML; lo forzamos al texto secundario del tema */
body[data-theme="dark"] .d_rol_label {
    color: var(--color-texto-secundario) !important;
}

body[data-theme="dark"] #p_area_edicion {
    background-color: #555;
}


/* ================================================================
   14.4. RESPONSIVE DESIGN (Pantallas de Baja Altura / Vertical Compact Mode)
   ================================================================ */
@media (max-height: 850px) and (orientation: landscape) {
    .d_dock_lateral {
        padding: 0.5rem 0.375rem;
        gap: 0.15rem;
    }
    .d_dock_lateral .d_boton_herramienta,
    .d_dock_lateral .d_group_icon {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
    .d_toolbar_separador_h {
        margin: 0.25rem 0;
    }
}

/* ================================================================
   14.5. RESPONSIVE DESIGN (Pantallas Angostas / Compact Mode)
   ================================================================ */
@media (max-width: 1150px) {
    /* Ocultamos las etiquetas largas de los botones y mostramos los glifos compactos */
    .d_btn_label {
        display: none;
    }
    .d_btn_glyph {
        display: inline;
        font-size: 0.8125rem;
    }
    /* Reducimos el espaciado para optimizar el espacio horizontal */
    .d_topbar_premium {
        padding: 0.6rem 1rem;
        gap: 0.75rem;
    }
    .d_topbar_premium .d_boton_primario,
    .d_topbar_premium .d_boton_secundario {
        padding: 0.4rem 0.65rem;
        font-size: 0.75rem;
    }
    /* Abreviación de etiqueta de página para evitar desbordes */
    .d_pagina_label {
        display: none;
    }
    .d_pagina_label_corto {
        display: inline;
    }
    .d_logo_text {
        font-size: 0.95rem;
    }
}

/* ================================================================
   15. RESPONSIVE DESIGN (Vista Portrait Premium)
   ================================================================ */
@media (orientation: portrait) {
    /* Reorganiza el espacio de trabajo principal en estructura vertical para apilar el lienzo y el dock */
    .d_workspace {
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    /* Modifica la barra superior para permitir el envolvimiento y aprovechar el ancho de la pantalla */
    .d_topbar_premium {
        flex-wrap: wrap;
        padding: 0.5rem 2%;
        gap: 0.5rem;
    }

    /* Expande las secciones de la barra superior, centra los controles y permite que los
       botones internos también envuelvan en varias filas para evitar el amontonamiento */
    .d_topbar_seccion {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Nav (Página) e History (Modo) comparten fila: width auto les permite vivir juntos */
    .d_topbar_seccion.d_seccion_nav,
    .d_topbar_seccion.d_seccion_history {
        width: auto;
        flex: 0 1 auto;
    }

    /* Oculta el separador vertical del logo en portrait: pierde sentido cuando los botones envuelven */
    .d_topbar_seccion .d_toolbar_separador {
        display: none;
    }

    /* Intercambia label largo por glifo compacto en los botones de la topbar.
       El tooltip (title) sigue mostrando el nombre completo al hacer hover. */
    .d_btn_label {
        display: none;
    }
    .d_btn_glyph {
        display: inline;
        font-size: 0.8125rem;
    }

    /* Etiqueta "Página" → "Pg." para ahorrar espacio en portrait */
    .d_pagina_label {
        display: none;
    }
    .d_pagina_label_corto {
        display: inline;
    }

    /* Reduce el padding horizontal de los botones de la topbar para encajar más por fila */
    .d_topbar_premium .d_boton_primario,
    .d_topbar_premium .d_boton_secundario {
        padding: 0.4rem 0.65rem;
        font-size: 0.75rem;
    }

    /* Reduce el logotipo y permite que pierda relevancia visual cuando el espacio escasea */
    .d_logo_text {
        font-size: 0.85rem;
    }

    /* Transforma el panel lateral en una barra de herramientas horizontal ubicada en la parte inferior.
       IMPORTANTE: anulamos backdrop-filter en portrait porque convertiría al dock en bloque contenedor
       de los menús position: fixed (descendientes), atrapándolos dentro de su overflow-x: auto y
       haciéndolos invisibles. Sin backdrop-filter el menú se ancla correctamente al viewport. */
    .d_dock_lateral {
        flex-direction: row;
        width: 100%;
        min-width: 100%;
        overflow-x: auto;
        padding: 0.5rem 2%;
        border-right: none;
        border-top: 0.0625rem solid var(--color-borde);
        box-shadow: 0 -0.125rem 0.625rem var(--color-sombra);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Oculta los separadores horizontales para ahorrar espacio en la vista inferior */
    .d_toolbar_separador_h {
        display: none;
    }

    /* Ajusta la estructura de los grupos de herramientas para alinearse lado a lado;
       conserva position: relative del estado base para no romper el contexto de hover/focus */
    .d_tool_group {
        width: auto;
    }

    /* Reposiciona los submenús desplegables como overlay fijo. Centrado mediante left: 50% +
       translateX(-50%): técnica más predecible que margin: auto cuando hay position: fixed
       sobre Safari/iOS. width: max-content fuerza al menú a ajustarse al ancho real de sus
       iconos en lugar de estirarse al viewport completo. max-width: 80vw deja un margen para
       que la barra flotante derecha siga accesible cuando el submenú es ancho. */
    .d_group_menu {
        position: fixed;
        left: 50%;
        right: auto;
        top: 22%;
        bottom: auto;
        width: max-content;
        max-width: 80vw;
        transform: translate(-50%, 0) !important;
        transition: opacity 0.2s ease, visibility 0.2s !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Reescribe la regla de apertura: conserva el centrado horizontal y la posición fija */
    .d_tool_group:hover .d_group_menu,
    .d_tool_group:focus-within .d_group_menu,
    .d_tool_group.d_menu_abierto .d_group_menu {
        position: fixed !important;
        left: 50% !important;
        top: 22% !important;
        bottom: auto !important;
        transform: translate(-50%, 0) !important;
    }

    /* En portrait con top: 22%, el menú ya no colisiona con el inspector contextual en la parte inferior */
    body:has(#p_panel_trazo .d_control_contextual:not(.d_oculto)) .d_group_menu {
        top: 22% !important;
        bottom: auto !important;
        max-height: 28vh;
    }

    /* En portrait también añade efecto visual al icono del grupo cuando el menú está abierto */
    .d_tool_group.d_menu_abierto .d_group_icon {
        background: var(--color-hover-btn);
        color: var(--color-primario);
    }

    /* Adapta el inspector flotante a un diseño horizontal sobre la barra de herramientas;
       max-height reducido para dejar margen al submenú elevado y padding compacto
       para que sea menos invasivo en portrait. El apilado por encima de la barra
       flotante derecha se logra por jerarquia DOM + stacking context: ambos viven
       dentro de #p_contenedor_principal (isolation: isolate); el inspector y los
       submenús ya traen z-index: 1 base (por ser menús temporalmente activos), lo
       que basta para pintarlos por encima del bar (z-auto) sin elevar z-index aqui. */
    .d_floating_inspector {
        top: auto;
        bottom: 4rem;
        left: 2%;
        right: 2%;
        width: 96%;
        max-height: 22vh;
        overflow-y: auto;
        padding: 0.375rem 0.75rem;
        gap: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }

    /* Ajusta el grupo de controles internos del inspector flotante para evitar apilamientos */
    .d_control_grupo {
        margin-bottom: 0;
        margin-right: 0.5rem;
    }

    /* Dimensiona el contenedor del canvas para abarcar dinámicamente el área restante */
    .d_canvas_container {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    /* Reduce la tipografía y el espaciado de los botones para encajar más elementos en pantalla */
    .d_boton_herramienta {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }

    .d_flechaBtn {
        display: none;
    }
}