/* --- VARIABLES Y ESTILOS GLOBALES --- */
/* Paleta de colores profesional y moderna */
:root {
    /* Colores base */
    --color-primary: #007aff;
    /* Azul vibrante para acciones principales */
    --color-secondary: #5856d6;
    /* Púrpura para elementos secundarios */
    --color-accent: #ff9500;
    /* Naranja para alertas o highlights */
    --color-success: #34c759;
    /* Verde para acciones exitosas */

    /* Fondos y superficies */
    --bg-light: linear-gradient(180deg, rgba(242, 242, 247, 0.9) 0%, rgba(232, 232, 237, 0.8) 100%);
    /* Fondo principal claro y neutro con gradiente y transparencia */
    --bg-dark: linear-gradient(135deg, rgba(28, 28, 30, 0.98) 0%, rgba(44, 44, 46, 0.95) 100%);
    /* Fondo oscuro para sidebars o modos noche con gradiente y transparencia */
    --surface-light: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 245, 0.9) 100%);
    /* Superficie de elementos como modales o tarjetas con gradiente y transparencia */
    --surface-dark: linear-gradient(135deg, rgba(44, 44, 46, 0.95) 0%, rgba(60, 60, 62, 0.9) 100%);
    /* Superficie oscura con gradiente y transparencia */

    /* Texto y bordes */
    --text-primary: #1d1d1f;
    /* Texto principal sobre fondos claros */
    --text-secondary: rgba(60, 60, 67, 0.6);
    /* Texto secundario, con transparencia */
    --text-light: #f2f2f7;
    /* Texto sobre fondos oscuros */
    --border-color: linear-gradient(90deg, rgba(60, 60, 67, 0.05) 0%, rgba(60, 60, 67, 0.25) 50%, rgba(60, 60, 67, 0.05) 100%);
    /* Borde sutil con gradiente y transparencia */

    /* Sombras y gradientes */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --gradient-primary: linear-gradient(60deg, rgba(0, 122, 255, 0.85) 0%, rgba(88, 86, 214, 1) 100%);
    /* Gradiente principal con transparencia ajustada */
}

body {
    font-family: 'Roboto Slab', serif;
    /* El fondo del body ahora usa directamente la variable --bg-light, que ya es un gradiente */
    background: var(--bg-light);
    margin: 0;
    display: flex;
    height: 100vh;
    /* Ocupa toda la altura de la ventana */
    color: var(--text-primary);
}

/* --- CURSORES PERSONALIZADOS --- */
/* --- CURSORES PERSONALIZADOS --- */

/* Cursor por defecto */
/* La URL del cursor se define con una variable CSS (--cursor-default) que se puede cambiar con JS */
body,
#board-container {
    cursor: var(--cursor-default, url('cursors/cursor.svg') 10 2, auto) !important;
}

/* Cursor por defecto para las notas, para que no herede el de agarre al mover */
.stickynote {
    cursor: var(--cursor-default, url('cursors/cursor.svg') 10 2, auto);
}

/* Cursor de mano para elementos clickeables */
/* También necesita !important para poder anular la regla de body */
button,
a,
.tab-btn,
.board-item-btn,
#sidebar-collapse-btn,
#about-btn,
#sidebar-expander,
.search-result-item,
.trash-item-actions button,
#close-popover-btn,
.modal-close-btn,
.connect-btn,
.stickynote-tab,
.background-preview,
#board-manager li {
    cursor: var(--cursor-pointer, url('cursors/hand.svg') 8 2, pointer) !important;
}

/* Cursor de agarre para elementos que se están arrastrando o agarrando */
/* También necesita !important (incluyendo tu nueva regla .stickynote) */
.dragging,
.palette-note:active,
body.panning,
body.panning * {
    cursor: var(--cursor-grabbing, url('cursors/grabing.svg') 16 16, grabbing) !important;
}

/* Cursor de mano abierta (grab) para el fondo del tablero cuando se puede mover */
.pannable {
    /* Usamos el cursor de mano, pero con el valor 'grab' para indicar que se puede agarrar */
    /* No usamos !important para que la clase .panning pueda sobreescribirlo */
    cursor: var(--cursor-pointer, url('cursors/hand.svg') 8 2, grab);
}

/* Cursor de texto para áreas de escritura */
.stickynote-title,
.stickynote-text,
#board-manager #search-input,
#share-link-output {
    cursor: var(--cursor-text, url('cursors/cursor-text.svg') 8 8, text) !important;
}

/* --- PANEL DE GESTIÓN DE TABLEROS --- */
#board-manager {
    /* El ancho ahora se controla por JS, con un valor inicial y límites */
    flex-shrink: 0;
    /* Evita que se encoja */
    background: var(--bg-dark);
    /* Usamos el gradiente definido en root */
    color: var(--text-light);
    padding: 20px;
    display: flex;
    flex-direction: column;
    z-index: 200;
    box-shadow: var(--shadow-md);
    transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    /* Necesario para posicionar el botón de colapso */
}

/* El margen de colapso ahora se establece dinámicamente con JS */
/* #board-manager.collapsed { margin-left: -300px; } */

#board-manager h3 {
    margin-top: 0;
    font-weight: 700;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    padding-bottom: 10px;
    display: flex;
    gap: 10px;
    /* Espacio entre elementos del título */
    justify-content: space-between;
    align-items: center;
}

/* --- PESTAÑAS DEL PANEL --- */
.tab-nav {
    display: flex;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    background-color: transparent;
    border: none;
    color: var(--text-light);
    padding: 15px 5px;
    /* Aumentamos el espaciado vertical */
    font-size: 1.5em;
    /* Icono aún más grande */
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    opacity: 0.6;
    display: flex;
    /* Para alinear icono y texto */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Más espacio entre icono y texto */
    min-width: 0;
    /* Permite que el botón se encoja */
}

.tab-btn:hover {
    opacity: 1;
    background: var(--surface-dark);
}

/* Usamos el gradiente */
.tab-btn.active {
    background: var(--surface-dark);
    border-bottom-color: var(--color-primary);
    font-weight: bold;
    opacity: 1;
}

/* Usamos el gradiente */
.tab-btn .tab-text {
    font-size: 0.55em;
    /* Ajustamos el tamaño relativo al icono */
    font-family: 'Roboto Slab', serif;
    white-space: nowrap;
    /* Evita que el texto se parta en dos líneas */
}

#tab-content-container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    /* Oculta el contenido que se desborda durante la animación */
}

.tab-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px; /* Respiro al final del scroll */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Animación de entrada más sutil */
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* --- Scroll Estilizado para Pestañas y Contenidos Internos --- */
.tab-content::-webkit-scrollbar,
.tab-content *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.tab-content::-webkit-scrollbar-track,
.tab-content *::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content::-webkit-scrollbar-thumb,
.tab-content *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.tab-content::-webkit-scrollbar-thumb:hover,
.tab-content *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.tab-content.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.tab-title {
    font-size: 1em;
    font-weight: bold;
    color: var(--text-light);
    opacity: 0.9;
    margin: 0 0 10px 0;
}

/* --- COMPARTIR Y EXPORTAR --- */
.share-options-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.share-card {
    display: grid;
    grid-template-areas:
        "icon name"
        "icon desc";
    grid-template-columns: auto 1fr;
    align-items: center;
    background: var(--surface-dark);
    padding: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.share-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.share-card-icon {
    grid-area: icon;
    font-size: 1.8em;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-card-name {
    grid-area: name;
    font-weight: bold;
    font-size: 1em;
    color: var(--text-light);
    margin-bottom: 4px;
    align-self: end;
}

.share-card-desc {
    grid-area: desc;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.2;
    align-self: start;
}

#share-link-output {
    background: var(--surface-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    padding: 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.8em;
    resize: none;
    height: 40px;
    transition: all 0.2s ease;
}

#share-link-output:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* --- LISTA DE TABLEROS --- */
#board-manager ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    flex-grow: 1;
    overflow-y: auto;
    max-height: 40vh;
    /* Controla la altura máxima de la lista */
}

#board-manager li {
    padding: 12px 15px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#board-manager li:hover {
    background: var(--surface-dark);
}

/* Usamos el gradiente */
#board-manager li.active {
    background-color: var(--color-primary);
    font-weight: bold;
}

.board-item-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Para que el ellipsis funcione */
}

.board-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.board-creation-date {
    font-size: 0.75em;
    opacity: 0.7;
    margin-top: 4px;
    white-space: nowrap;
    color: var(--text-light);
}

.board-item-buttons {
    display: flex;
    gap: 5px;
}

.board-item-btn {
    background: none;
    border: none;
    color: var(--text-light);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.board-item-btn:hover {
    opacity: 1;
}

#board-manager .tab-content button {
    margin-top: 15px;
    /* Espacio sobre el botón */
    width: 100%;
    padding: 12px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#board-manager #search-input {
    /* Se mantiene el estilo del input de búsqueda */
    width: 100%;
    padding: 10px;
    margin: 15px 0 0 0;
    border-radius: 6px;
    border: 1px solid var(--surface-dark);
    background: var(--surface-dark);
    /* Usamos el gradiente */
    color: var(--text-light);
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.2s;
}

#board-manager #search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    /* El borde puede seguir siendo un color sólido */
    background: var(--bg-dark);
    /* Usamos el gradiente */
}

/* --- Resultados de Búsqueda Global --- */
#global-search-results {
    margin-top: 10px;
    max-height: 200px;
    /* Ajustado para el nuevo layout */
    overflow-y: auto;
}

.search-result-item {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--surface-dark);
    /* Usamos el gradiente */
    transition: background-color 0.2s ease;
    border-left: 3px solid var(--color-secondary);
    /* Mantener color sólido para el acento */
}

.search-result-item:hover {
    background-color: var(--sidebar-hover);
}

.search-result-item .note-snippet {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    opacity: 0.8;
    font-size: 0.85em;
}

#board-manager .tab-content button:hover {
    background-size: 150% 150%;
    transform: translateY(-2px);
}

#board-manager .icon {
    font-size: 1.2em;
}

/* --- BOTONES PARA OCULTAR/MOSTRAR PANEL --- */
#sidebar-collapse-btn {
    padding: 0 5px;
    /* Ajustado para el nuevo tamaño del icono */
    border-radius: 5px;
    transition: background-color 0.2s ease;
    display: flex;
    /* Para centrar el icono */
    align-items: center;
}

#sidebar-collapse-btn:hover {
    background: var(--surface-dark);
    /* Usamos el gradiente */
}

#sidebar-collapse-btn img {
    width: 32px;
    height: 32px;
    filter: invert(1);
    /* Para que el SVG negro se vea blanco */
    opacity: 0.8;
}

/* --- NUEVO: Estilos para el botón "Sobre mí" --- */
#about-btn {
    background: none;
    border: none;
    padding: 0 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    margin-left: auto;
    /* Empuja el botón a la derecha */
}

#about-btn:hover {
    background: var(--surface-dark);
    /* Usamos el gradiente */
}

#about-btn img {
    width: 24px;
    /* Un poco más pequeño para diferenciarlo */
    height: 24px;
    opacity: 0.8;
}

#sidebar-expander {
    position: absolute;
    left: 0;
    top: 50%;
    /* Oculto por defecto fuera de la pantalla */
    transform: translateY(-50%) translateX(-100%);
    width: 25px;
    height: 60px;
    /* Ajustado para el nuevo tamaño del icono */
    background: var(--bg-dark);
    /* Usamos el gradiente */
    color: var(--text-light);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
    z-index: 199;
}

#sidebar-expander:hover {
    background: var(--gradient-primary);
}

/* Estilos para el SVG dentro del expansor */
#sidebar-expander img {
    width: 20px;
    height: 20px;
    filter: invert(1);
    /* Para que el SVG negro se vea blanco */
    opacity: 0.8;
    transition: transform 0.2s ease;
}

/* Cuando el panel está colapsado, la manija de expansión se muestra */
#board-manager.collapsed~#sidebar-expander {
    transform: translateY(-50%) translateX(0);
}

/* El expander de la paleta NO se muestra en desktop, solo en móvil mediante media query */
#palette-expander {
    display: none;
}

/* --- TIRADOR PARA REDIMENSIONAR EL PANEL --- */
#sidebar-resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    cursor: var(--cursor-ew_resize, url('cursors/cursor-ew-resize.svg') 16 16, ew-resize) !important;
    z-index: 201;
    /* Por encima del contenido del panel */
    background-color: transparent;
    transition: background-color 0.2s ease;
}

#sidebar-resizer:hover,
#sidebar-resizer.resizing {
    background-color: var(--color-primary);
}

/* Cuando se está redimensionando, aplicamos el cursor a todo el body */
body.sidebar-resizing,
body.sidebar-resizing * {
    cursor: var(--cursor-ew_resize, url('cursors/cursor-ew-resize.svg') 16 16, ew-resize) !important;
}

/* Cuando se está redimensionando una NOTA, forzamos el cursor de redimensionar en todo el body */
body.sidebar-resizing,
body.sidebar-resizing * {
    cursor: var(--cursor-se_resize, se-resize) !important;
}

/* --- INDICADOR DE USO DE localStorage --- */
#storage-indicator {
    padding: 10px 0 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: auto;
    flex-shrink: 0;
}

.storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.storage-label {
    font-size: 0.72em;
    font-weight: 700;
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.storage-text {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-light);
    opacity: 0.7;
    font-family: 'Roboto Slab', monospace;
}

.storage-bar-track {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.storage-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background: var(--color-primary);
    transition: width 0.5s ease, background-color 0.4s ease;
}

/* Colores de alerta según uso */
.storage-bar-fill.warn {
    background: var(--color-accent); /* naranja al 70% */
}

.storage-bar-fill.danger {
    background: #ff3b30; /* rojo al 90% */
}

/* --- SECCIÓN DE PLANTILLAS --- */
#template-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    overflow-y: auto;
    flex-grow: 1;
}

.template-card {
    background: var(--surface-dark);
    border-radius: 8px;
    padding: 15px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon name"
        "icon desc";
    gap: 0 12px;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: var(--cursor-pointer, pointer) !important;
}

.template-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    background: var(--gradient-primary);
}

.template-card-icon {
    grid-area: icon;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.template-card-name {
    grid-area: name;
    font-weight: bold;
    font-size: 1.1em;
}

.template-card-desc {
    grid-area: desc;
    font-size: 0.85em;
    opacity: 0.7;
    line-height: 1.4;
}

/* --- ESTILOS PARA LA PESTAÑA DE LÍNEAS --- */
.style-option {
    margin-bottom: 20px;
    position: relative;
    /* Para el posicionamiento del valor del range */
}

.style-option label {
    display: block;
    font-size: 0.9em;
    margin-bottom: 8px;
    font-weight: bold;
    opacity: 0.8;
}

.style-option input[type="color"],
.style-option select,
.style-option input[type="range"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(60, 60, 67, 0.2);
    /* Fallback para border-color */
    background-color: #3a3a3a;
    color: var(--text-light);
    font-family: 'Nunito', sans-serif;
}

.style-option input[type="color"] {
    padding: 0;
    height: 38px;
    border-radius: 6px;
    border: 2px solid var(--surface-dark);
    background: none;
    transition: border-color 0.2s ease;
}

.style-option input[type="color"]:hover {
    border-color: var(--color-primary);
}

.style-option input[type="range"] {
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--surface-dark);
    border-radius: 4px;
    outline: none;
    transition: background 0.2s ease;
}

.style-option input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--text-light);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid var(--bg-dark);
    transition: background 0.2s ease;
}

.style-option input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--color-primary);
}

.style-option input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--text-light);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid var(--bg-dark);
}

.style-option-grid {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 15px;
    align-items: end;
}

.style-option-slider {
    position: relative;
}

.range-value {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8em;
    font-weight: bold;
    opacity: 0.7;
}

.visual-select-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: rgba(40, 40, 40, 0.5); /* Subtle container background */
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.visual-select-btn {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 10px 6px;
    transition: all 0.2s ease;
    color: var(--text-light);
    opacity: 0.5;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual-select-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    opacity: 0.8;
}

.visual-select-btn.active {
    background: var(--surface-light); /* Light elevated color */
    color: var(--color-primary); /* Use primary color for the icon */
    opacity: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.visual-select-btn svg {
    width: 100%;
    height: 20px;
}  

/* For SVG overriding inline stroke-width */
.visual-select-btn svg path,
.visual-select-btn svg rect,
.visual-select-btn svg circle,
.visual-select-btn svg line {
    stroke-width: 2.5 !important;
}

.visual-select-btn img {
    width: 100%;
    height: 20px;
    filter: invert(1) opacity(0.8);
    transition: filter 0.2s ease;
}

.visual-select-btn.active img {
    filter: invert(0) opacity(1);
}

.checkbox-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 5px;
}

.checkbox-group label {
    margin-bottom: 0;
    /* Anular el margen de .style-option label */
    cursor: pointer;
}

/* --- NUEVO: Estilos para el checkbox de confirmación en la pestaña de líneas --- */
.prompt-delete-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-dark);
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
}

.prompt-delete-container label {
    margin: 0;
}

/* --- NUEVO: Estilos para tarjetas de "Aplicar a" en Fondos --- */
.apply-to-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.apply-to-card {
    flex: 1;
    padding: 12px;
    background: var(--surface-dark);
    border-radius: 8px;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.apply-to-card:hover {
    border-color: var(--color-secondary);
    transform: translateY(-2px);
}

.apply-to-card.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--bg-dark);
}

.apply-to-icon {
    font-size: 1.5em;
}

.apply-to-text {
    font-size: 0.85em;
    font-weight: bold;
}

/* --- ESTILOS PARA LA PESTAÑA DE FONDOS --- */
#background-options-container {
    margin-top: 15px;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.background-category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 10px;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
}

.background-preview {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.background-preview:hover {
    transform: scale(1.15);
    z-index: 2;
    position: relative;
}

.background-preview.active {
    border-color: var(--color-accent);
    transform: scale(1.1);
}

/* --- PALETA DE NOTAS --- */
#note-palette {
    width: 90px;
    /* Un poco más estrecho para un look más compacto */
    flex-shrink: 0;
    padding-top: 20px;
    /* Solo padding superior */
    background: var(--surface-light);
    /* Usamos el gradiente */
    box-shadow: var(--shadow-sm);
    z-index: 100;
    display: flex;
    /* Cambiado para el nuevo layout */
    flex-direction: column;
    align-items: center;
    /* Centramos los elementos */
    gap: 20px;
    /* Aumentamos el espacio */
    border-right: 1px solid rgba(60, 60, 67, 0.2);
    /* Fallback para border-color */
    transition: margin-left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    /* Evita que las notas se salgan al animarse */
    position: relative;
    /* ¡CLAVE! Para que el indicador de scroll se posicione dentro de la paleta */
}


/* Cuando el panel está colapsado Y la paleta está fijada, se oculta */
#board-manager.collapsed~#note-palette {
    margin-left: -120px;
    /* Ancho de la paleta (100px) + padding (2*10px) */
}

/* Si la paleta NO está fijada, se ignora la regla anterior */
body:not(.palette-pinned) #board-manager.collapsed~#note-palette {
    margin-left: 0;
}

.palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    /* Añadimos padding aquí */
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    box-sizing: border-box;
}

.palette-title-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.palette-create-icon {
    width: 30px;
    height: 30px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.palette-header span {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.9em;
    text-align: center;
}

#pin-palette-btn {
    background: none;
    border: none;
    border-radius: 6px;
    opacity: 0.5;
    transition: all 0.3s ease;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-title-container:hover .palette-create-icon {
    opacity: 1;
}

#pin-palette-btn:hover {
    opacity: 1;
    background-color: var(--bg-light);
}

#pin-palette-btn.active {
    opacity: 1;
    color: var(--color-primary);
    background-color: var(--bg-light);
    transform: rotate(45deg);
}

.pin-icon {
    width: 20px;
    height: 20px;
}

/* --- NUEVO: Contenedor con scroll para las notas de la paleta --- */
#palette-scroll-container {
    flex-grow: 1;
    /* Ocupa el espacio disponible */
    width: 100%;
    position: relative;
    /* Para posicionar las notas dentro */
    overflow-y: auto;
    /* Habilita el scroll vertical */
    padding: 20px 0;
    /* Más padding para el efecto de desvanecimiento */
    /* --- NUEVO: Máscara para el efecto de scroll infinito --- */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Ocultar la barra de scroll por defecto */
#palette-scroll-container::-webkit-scrollbar {
    display: none;
}

#palette-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- NUEVO: Indicador de scroll --- */
.scroll-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* No interfiere con el drag & drop */
    z-index: 5;
    /* Asegura que esté sobre las notas de la paleta */
}

/* --- FLECHAS DE SCROLL: ANIMACIONES DIRECCIONALES CINEMATICAS --- */

/* Flecha ABAJO: cae con impulso, rebota suavemente, deja estela */
@keyframes arrow-dive-down {
    0% {
        transform: translateY(-6px) translateX(-50%) scale(0.85);
        opacity: 0.3;
        filter: brightness(0.7);
    }

    30% {
        transform: translateY(4px) translateX(-50%) scale(1.12);
        opacity: 1;
        filter: brightness(1.4) drop-shadow(0 4px 8px rgba(0, 180, 255, 0.8));
    }

    55% {
        transform: translateY(-2px) translateX(-50%) scale(1.02);
        opacity: 1;
        filter: brightness(1.1);
    }

    75% {
        transform: translateY(2px) translateX(-50%) scale(1.05);
        opacity: 0.95;
        filter: brightness(1.2) drop-shadow(0 6px 12px rgba(0, 180, 255, 0.5));
    }

    100% {
        transform: translateY(0) translateX(-50%) scale(1);
        opacity: 0.85;
        filter: brightness(1);
    }
}

/* Anillo de onda que emana hacia abajo desde la flecha */
@keyframes ring-pulse-down {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0.9;
        border-color: rgba(0, 200, 255, 0.9);
    }

    60% {
        transform: translateX(-50%) scale(2.2);
        opacity: 0.3;
        border-color: rgba(0, 200, 255, 0.3);
    }

    100% {
        transform: translateX(-50%) scale(3);
        opacity: 0;
        border-color: rgba(0, 200, 255, 0);
    }
}

/* Flecha ARRIBA: asciende con impulso hacia arriba */
@keyframes arrow-dive-up {
    0% {
        transform: translateY(6px) translateX(-50%) scale(0.85);
        opacity: 0.3;
        filter: brightness(0.7);
    }

    30% {
        transform: translateY(-4px) translateX(-50%) scale(1.12);
        opacity: 1;
        filter: brightness(1.4) drop-shadow(0 -4px 8px rgba(255, 220, 0, 0.8));
    }

    55% {
        transform: translateY(2px) translateX(-50%) scale(1.02);
        opacity: 1;
        filter: brightness(1.1);
    }

    75% {
        transform: translateY(-2px) translateX(-50%) scale(1.05);
        opacity: 0.95;
        filter: brightness(1.2) drop-shadow(0 -6px 12px rgba(255, 220, 0, 0.5));
    }

    100% {
        transform: translateY(0) translateX(-50%) scale(1);
        opacity: 0.85;
        filter: brightness(1);
    }
}

@keyframes ring-pulse-up {
    0% {
        transform: translateX(-50%) scale(0.5);
        opacity: 0.9;
        border-color: rgba(255, 220, 50, 0.9);
    }

    60% {
        transform: translateX(-50%) scale(2.2);
        opacity: 0.3;
        border-color: rgba(255, 220, 50, 0.3);
    }

    100% {
        transform: translateX(-50%) scale(3);
        opacity: 0;
        border-color: rgba(255, 220, 50, 0);
    }
}

/* Idle: suave flotacion continua mientras la flecha es visible */
@keyframes float-down {

    0%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    50% {
        transform: translateY(5px) translateX(-50%);
    }
}

@keyframes float-up {

    0%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    50% {
        transform: translateY(-5px) translateX(-50%);
    }
}

.scroll-indicator img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 2px 6px rgba(0, 180, 255, 0.4));
}

/* --- NUEVO: Indicador de scroll hacia arriba (posicion base) --- */
.scroll-indicator-up {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
}

.scroll-indicator-up img {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 -2px 6px rgba(255, 220, 0, 0.4));
}

/* Anillo decorativo pseudo-elemento */
.scroll-indicator::before,
.scroll-indicator-up::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid transparent;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin-top: -18px;
    margin-left: -18px;
    pointer-events: none;
}

/* Idle: flotan continuamente cuando tienen clase .visible (asignada desde JS) */
.scroll-indicator.visible {
    animation: float-down 1.8s ease-in-out infinite;
}

.scroll-indicator-up.visible {
    animation: float-up 1.8s ease-in-out infinite;
}

/* Al hacer scroll se dispara la animacion de impacto */
.scroll-indicator.scrolling-down {
    animation: arrow-dive-down 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scroll-indicator.scrolling-down::before {
    animation: ring-pulse-down 0.55s ease-out forwards;
}

.scroll-indicator-up.scrolling-up {
    animation: arrow-dive-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.scroll-indicator-up.scrolling-up::before {
    animation: ring-pulse-up 0.55s ease-out forwards;
}


/* --- TABLERO PRINCIPAL --- */
/* El contenedor del tablero se encarga del fondo y el scroll */
#board-container {
    position: relative;
    flex-grow: 1;
    /* Ocupa el espacio restante */
    height: 100%;
    background-image: repeating-linear-gradient(90deg, hsla(280, 0%, 67%, 0.06) 0px, hsla(280, 0%, 67%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(280, 0%, 67%, 0.06) 0px, hsla(280, 0%, 67%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(280, 0%, 67%, 0.09) 0px, hsla(280, 0%, 67%, 0.09) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, hsla(280, 0%, 67%, 0.09) 0px, hsla(280, 0%, 67%, 0.09) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, hsl(226, 47%, 26%), hsl(226, 47%, 26%));
    overflow: hidden;
    /* Oculta las barras de scroll para un lienzo infinito */
}

/* El tablero en sí solo contiene las notas y es lo que se escala */
#board {
    position: relative;
    /* Mantenemos la posición para las notas */
    /* El tamaño ya no es necesario para el scroll, se ajustará con JS si es necesario,
       pero para el paneo por transformación, un tamaño grande inicial funciona. */
    width: 100%;
    height: 100%;
    transform-origin: top left;
    /* El zoom y paneo se originan desde la esquina superior izquierda */
}

/* --- CONTROLES DE ZOOM --- */
#zoom-controls {
    position: fixed;
    bottom: 30px;
    left: 50%;
    z-index: 1500;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Ajustado para el nuevo tamaño del icono */
    background: var(--surface-dark);
    /* Usamos el gradiente */
    padding: 8px 12px;
    border-radius: 25px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(5px);
    color: var(--text-light);
}

#zoom-controls button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface-dark);
    /* Usamos el gradiente */
    color: var(--text-light);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.2s;
    padding: 0;
    /* Reset padding */
}

#zoom-controls button:hover {
    background: var(--gradient-primary);
    transform: scale(1.1);
}

/* Estilos para el modo búsqueda */
#board.searching .stickynote {
    opacity: 0.2;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#board.searching .stickynote.highlight {
    opacity: 1;
    transform: scale(1.03) !important;
    /* !important para sobreescribir el transform al arrastrar */
    box-shadow: 0 0 25px 5px var(--color-accent);
    z-index: 999;
}

/* --- NOTAS DE PLANTILLA EN LA PALETA --- */
.palette-note {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    cursor: url('cursors/cursor.svg') 10 2, grab;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
    position: absolute;
    /* Posicionadas absolutamente dentro del contenedor de scroll */
    left: 50%;
    margin-left: -30px;
    /* Centrado horizontal */
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.palette-note:hover {
    transform: scale(1.1) !important;
    /* !important para sobreescribir la rotación inicial */
    box-shadow: var(--shadow-md);
    z-index: 10;
    /* Se pone por encima de las demás al hacer hover */
}

.palette-note.dark-theme {
    /* Borde claro para notas oscuras en la paleta, mejorando contraste */
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- NOTAS ADHESIVAS EN EL TABLERO --- */
.stickynote {
    position: absolute;
    width: 200px;
    min-height: 200px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    user-select: none;
    box-sizing: border-box;
    border: 2px dashed var(--text-primary);
    border-radius: 15px 5px 20px 5px;
    /* ¡Esquinas asimétricas! */
    display: flex;
    /* Para controlar el hijo de texto */
    flex-direction: column;
}

/* --- NUEVOS ESTILOS PARA TÍTULO Y PESTAÑAS --- */
.stickynote-title {
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    outline: none;
    cursor: text;
}

.stickynote.locked {
    cursor: url('cursors/cursor.svg') 10 2, default;
}

.stickynote.locked .resizer,
.stickynote.locked .connect-btn,
.stickynote.locked .stickynote-text {
    pointer-events: none;
}

.stickynote.locked::before {
    content: '🔒';
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 16px;
    opacity: 0.6;
    z-index: 15;
}

/* Cuando una nota tiene un fondo de imagen, el color de fondo se quita */
.stickynote[style*="background-image"] {
    background-color: transparent !important;
}

/* --- IMAGEN ADJUNTA EN NOTA (.has-image) --- */
.stickynote.has-image {
    background-image: var(--note-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Mantener el color base como fallback semi-transparente */
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0,0,0,0.35);
}

/* Texto legible sobre la imagen de fondo */
.stickynote.has-image .stickynote-title,
.stickynote.has-image .stickynote-text {
    background: rgba(0, 0, 0, 0.38);
    border-radius: 5px;
    padding: 4px 7px;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Indicador de imagen en esquina superior derecha */
.stickynote.has-image::after {
    content: '🖼️';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 13px;
    opacity: 0.75;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

/* --- ZONA DE DROP ACTIVA (drag-and-drop sobre una nota) --- */
.stickynote.image-drop-active {
    outline: 3px dashed var(--color-primary) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.25), 0 6px 20px rgba(0,0,0,0.3) !important;
    transform: scale(1.02) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
/* Pseudo-element de instrucción mientras se arrastra */
.stickynote.image-drop-active::before {
    content: '📸 Suelta aquí';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 122, 255, 0.45);
    backdrop-filter: blur(3px);
    border-radius: inherit;
    z-index: 100;
    pointer-events: none;
}

/* Animación "rebote" para notas nuevas */
@keyframes rebote {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.stickynote.new-note-animation {
    animation: rebote 0.4s ease-out;
}

/* --- NUEVO: Animación para eliminar nota --- */
@keyframes fadeOutAndShrink {
    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

.stickynote.deleting {
    /* forwards mantiene el estado final de la animación */
    animation: fadeOutAndShrink 0.3s ease-out forwards;
    pointer-events: none;
    /* Evita interacciones durante la animación */
}

/* Estilo cuando la nota está siendo arrastrada */
.stickynote.dragging {
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    /* La pone por encima de las demás */
}

.stickynote-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Clave para que el contenido no se salga */
}

.stickynote-content-container {
    flex-grow: 1;
    position: relative;
    /* Para que los textos se superpongan */
}

/* Estilos del área de texto dentro de la nota */
.stickynote-text {
    background-color: transparent;
    border: none;
    resize: none;
    font-family: 'Kalam', cursive;
    font-size: 18px;
    /* El cursor personalizado se aplica globalmente arriba */
    outline: none;
    /* Sin borde al hacer foco */
    padding: 5px;
    margin: -5px;
    /* Compensa el padding para alinear con el borde */
    /* Para la animación de pestañas */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    overflow-y: auto;
}

.stickynote-text.active {
    opacity: 1;
    pointer-events: auto;
}

/* Estilo para el placeholder del contenteditable */
.stickynote-text:empty:before,
.stickynote-title:empty:before {
    content: attr(data-placeholder);
    color: #888;
    cursor: text;
    pointer-events: none;
}

/* --- MEJORA DE CONTRASTE: Tema oscuro para notas con fondo oscuro --- */
.stickynote.dark-theme {
    color: #f0f0f0;
    /* Color de texto principal claro */
    border-color: rgba(255, 255, 255, 0.7);
}

.stickynote.dark-theme .stickynote-title {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.stickynote.dark-theme .stickynote-text {
    color: #f0f0f0;
}

.stickynote.dark-theme .stickynote-text:empty:before,
.stickynote.dark-theme .stickynote-title:empty:before {
    color: #bbb;
    /* Placeholder más claro para mejor contraste */
}

.stickynote.dark-theme .stickynote-tabs {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.stickynote.dark-theme .stickynote-tab {
    border-color: rgba(255, 255, 255, 0.25);
}

/* --- NUEVO: Contraste para las partes de la pestaña inteligente --- */
.stickynote.dark-theme .stickynote-tab-part {
    color: #fff;
    /* Texto blanco */
}

.stickynote.dark-theme .stickynote-tab-part.filled {
    background-color: rgba(255, 255, 255, 0.4);
    /* Fondo claro semitransparente */
}

.stickynote.dark-theme .stickynote-tabs:hover .stickynote-tab:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- NUEVO: Animación para limpiar pestaña --- */
@keyframes fadeOutContent {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.stickynote-text.clearing-out {
    animation: fadeOutContent 0.3s ease-out forwards;
}

.stickynote-tabs {
    display: flex;
    flex-shrink: 0;
    /* Evita que se encoja */
    margin-top: 10px;
    /* Ajustado para el nuevo tamaño del icono */
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-top: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    padding-top: 8px;
    cursor: default;
    /* --- MEJORA UX: Espacio para la animación de expansión --- */
    padding-bottom: 5px;
    min-height: 28px;
    /* Altura mínima para contener las pestañas expandidas */
    align-items: flex-end;
    /* Alinea las pestañas en la parte inferior */
}

.stickynote-tab {
    flex: 1;
    position: relative;
    /* Necesario para el pseudo-elemento ::after */
    display: flex;
    /* ¡NUEVO! Para contener las dos partes */
    height: 6px;
    /* --- MEJORA UX: Estilo de contorno para pestañas vacías --- */
    background-color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.15);
    margin: 0 2px;
    border-radius: 3px;
    padding: 0;
    /* Resetear padding */
    /* --- MEJORA UX: Transición más elástica --- */
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, border-color 0.3s ease;
}

/* --- RE-DISEÑO: Pestañas inteligentes con texto --- */
.stickynote-tab-part {
    flex: 1;
    height: 100%;
    transition: all 0.3s ease;
    background-color: transparent;
    /* Por defecto, son transparentes */
    color: rgba(0, 0, 0, 0.4);
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #000;
    overflow: hidden;
    /* Oculta el texto que se desborda */
    white-space: nowrap;
}

.stickynote-tab-part[data-part="title"] {
    margin-right: 2px;
    /* Espacio en lugar de línea */
}

/* Cuando la parte está vacía, el texto tiene menos opacidad */
.stickynote-tab-part span {
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.stickynote-tab-part.empty {
    opacity: 0.4;
}

/* Cuando está llena, le damos un fondo */
.stickynote-tab-part.filled {
    background-color: rgba(0, 0, 0, 0.4);
}

/* --- MEJORA UX: Efecto "Lupa" al pasar el ratón --- */
/* 1. Al pasar por el contenedor, todas las pestañas crecen un poco */
.stickynote-tabs:hover .stickynote-tab {
    height: 10px;
}

/* 2. La pestaña específica bajo el cursor crece mucho más */
.stickynote-tabs:hover .stickynote-tab:hover {
    height: 16px;
    border-color: rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.05);
}

/* 3. La pestaña activa siempre es más grande */
.stickynote-tab.active {
    border-color: var(--color-primary);
    height: 12px;
    overflow: visible;
    /* Permite que el texto se vea completo */
}

/* Cuando la pestaña está activa, ambas partes se pintan del color activo */
.stickynote-tab.active .stickynote-tab-part {
    background-color: var(--color-primary) !important;
}

/* --- Contenedor para los botones de conexión --- */
.connection-buttons-container {
    position: absolute;
    top: -12px;
    right: -12px;
    display: flex;
    gap: 6px;
    opacity: 0;
    /* Oculto por defecto */
    transition: opacity 0.2s ease;
    z-index: 10;
}

.connect-btn {
    position: relative;
    /* Cambiado para que funcione dentro del flex container */
    width: 28px;
    height: 28px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    border: 2px solid var(--surface-light);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.stickynote:hover .connection-buttons-container {
    opacity: 1;
}

.connect-btn:hover {
    transform: scale(1.2);
    background-color: var(--color-accent);
}

.stickynote.connection-start {
    box-shadow: 0 0 20px 8px var(--color-primary);
}

/* Estilos del manejador para redimensionar la nota */
.resizer {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    cursor: var(--cursor-se_resize, se-resize) !important;
    transition: background 0.2s ease;
    background:
        linear-gradient(135deg, transparent 60%, rgba(0, 0, 0, 0.4) 61%, rgba(0, 0, 0, 0.4) 65%, transparent 66%),
        linear-gradient(135deg, transparent 70%, rgba(0, 0, 0, 0.4) 71%, rgba(0, 0, 0, 0.4) 75%, transparent 76%),
        linear-gradient(135deg, transparent 80%, rgba(0, 0, 0, 0.4) 81%, rgba(0, 0, 0, 0.4) 85%, transparent 86%);
}

.dark-theme .resizer {
    background:
        linear-gradient(135deg, transparent 60%, rgba(255, 255, 255, 0.5) 61%, rgba(255, 255, 255, 0.5) 65%, transparent 66%),
        linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.5) 71%, rgba(255, 255, 255, 0.5) 75%, transparent 76%),
        linear-gradient(135deg, transparent 80%, rgba(255, 255, 255, 0.5) 81%, rgba(255, 255, 255, 0.5) 85%, transparent 86%);
}

/* Estilos de la papelera */
#trash-can {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 2px dashed #BDBDBD;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    /* Oculta por defecto */
    pointer-events: none;
    /* No interactuable cuando está oculta */
    backdrop-filter: blur(5px);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0) scale(1.1);
    }

    25% {
        transform: translateX(-4px) scale(1.1);
    }

    75% {
        transform: translateX(4px) scale(1.1);
    }
}

/* Estilos para la imagen SVG dentro de la papelera */
#trash-can img {
    width: 45px;
    height: 45px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Estilo cuando una nota se arrastra sobre la papelera */
#trash-can.active {
    background-color: #FFEBEE;
    border-color: #E57373;
    border-style: solid;
    animation: shake 0.4s ease-in-out;
}

#trash-can.active img {
    opacity: 1;
}

/* Estilo para hacer visible la papelera */
#trash-can.visible {
    opacity: 0.9;
    pointer-events: all;
    transform: scale(1.1);
}

/* Mensaje de bienvenida en el tablero vacío */
.welcome-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    color: #B0BEC5;
    font-size: 1.8em;
    text-align: center;
    pointer-events: none;
    /* Para que no interfiera con los clics */
    user-select: none;
    cursor: url('cursors/cursor.svg') 10 2, default;
    /* Evita que se muestre el cursor de "grab" */
}

/* --- Estilos para Leader-Line --- */
.leader-line {
    z-index: 10;
    /* Asegura que las líneas sean visibles sobre el fondo */
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.leader-line:hover {
    opacity: 0.8;
}

/* Permitir que los trazos invisibles (como el hitbox ampliado) reciban eventos del mouse */
.leader-line path {
    pointer-events: stroke !important;
}

/* --- MENÚ CONTEXTUAL --- */
#context-menu,
#tab-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--surface-light);
    /* Usamos el gradiente */
    border-radius: 12px;
    /* Aumentamos el redondeo para un look más suave */
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    min-width: 170px;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    /* --- NUEVO: Animación de aparición --- */
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    /* La animación se origina desde donde se hace clic */
    transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

#context-menu.hidden,
#tab-context-menu.hidden {
    /* Reemplazamos display:none para permitir la animación de salida */
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    /* Evita que el menú oculto sea clickeable */
}

#context-menu ul,
#tab-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#context-menu li,
#tab-context-menu li {
    padding: 10px 20px;
    /* --- MEJORA: Transición más pulida para el efecto hover --- */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ctx-icon {
    display: inline-block;
    width: 20px;
    /* Ancho fijo para alinear el texto */
    text-align: center;
}

/* --- MEJORA: Efecto hover más notorio --- */
#context-menu li:hover,
#tab-context-menu li:hover {
    background: var(--gradient-primary);
    /* Usamos el gradiente principal */
    color: var(--text-light);
    /* Cambiamos el color del texto a claro para que contraste */
    transform: translateX(5px);
    /* Desplazamiento sutil */
    box-shadow: var(--shadow-sm);
    /* Añadimos una sombra suave */
}

/* --- NUEVO: Estilo especial para la opción de eliminar --- */
#context-menu #ctx-delete {
    color: #c0392b;
    /* Un tono de rojo no tan agresivo */
    font-weight: bold;
}

#context-menu #ctx-delete:hover {
    background: #c0392b;
    /* Fondo rojo al pasar el ratón */
    color: var(--text-light);
    /* Texto blanco para contraste */
}

#context-menu li.separator {
    height: 1px;
    background-color: var(--border-color);
    padding: 0;
    margin: 5px 0;
}

/* --- MENÚ CONTEXTUAL DE LÍNEAS (Minimalista) --- */
#line-context-menu {
    position: fixed;
    z-index: 2000;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    padding: 4px 0;
    min-width: 120px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    backdrop-filter: blur(10px);
}

#line-context-menu.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

#line-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#line-context-menu li {
    padding: 8px 16px;
    color: var(--text-light);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

#line-context-menu li:hover {
    background: rgba(255, 255, 255, 0.1);
}

#line-context-menu .ctx-icon {
    font-size: 1.1em;
    opacity: 0.7;
}

#line-context-menu #ctx-line-delete {
    color: #ff6b6b;
}

#line-context-menu #ctx-line-delete .ctx-icon {
    opacity: 1;
}

#line-context-menu #ctx-line-delete:hover {
    background: rgba(255, 107, 107, 0.15);
}

/* Nuevos elementos compactos en el menú de línea */
#line-context-menu .ctx-slider-item {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 10px;
}

#line-context-menu .ctx-slider-item input[type="range"] {
    flex: 1;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
}

#line-context-menu .ctx-slider-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
}

#line-context-menu .ctx-visual-item {
    padding: 4px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#line-context-menu .visual-select-container.mini {
    padding: 2px;
    gap: 2px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
}

#line-context-menu .visual-select-container.mini .visual-select-btn {
    padding: 4px;
    border-radius: 4px;
}

#line-context-menu .visual-select-container.mini svg {
    height: 14px;
}

/* Evitar que hover de .ctx-slider-item o .ctx-visual-item pongan fondo si no son botones */
#line-context-menu li.ctx-slider-item:hover,
#line-context-menu li.ctx-visual-item:hover {
    background: transparent;
    cursor: default;
}

/* --- PESTAÑA DE PAPELERA --- */
#trash-list-container {
    margin-top: 15px;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trash-section-title {
    font-weight: bold;
    color: var(--text-light);
    opacity: 0.9;
    margin: 20px 0 10px 0;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    padding-bottom: 5px;
}

.trash-section-title:first-child {
    margin-top: 0;
}

.empty-trash-message {
    opacity: 0.7;
    text-align: center;
}

.trash-item {
    background: var(--surface-dark);
    /* Usamos el gradiente */
    padding: 12px;
    border-radius: 6px;
    border-left: 4px solid var(--color-accent);
}

.trash-item-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.trash-item-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
    margin-bottom: 10px;
    font-size: 0.85em;
}

.trash-item-actions {
    display: flex;
    gap: 8px;
}

.trash-item-actions button {
    padding: 6px 10px;
    font-size: 0.8em;
    margin-top: 0;
    /* Anular el margen de .tab-content button */
    flex: 1;
    background: var(--surface-dark);
    /* Usamos el gradiente */
}

.trash-item-actions button.restore {
    background-color: var(--color-success);
}

#empty-trash-btn {
    background-color: var(--color-accent);
}

/* --- POPOVER DE PALETA DE COLORES --- */
#color-picker-popover {
    position: fixed;
    z-index: 2001;
    /* Encima del menú contextual */
    background: var(--surface-light);
    /* Usamos el gradiente */
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    width: 280px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#color-picker-popover.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
}

.popover-header h4 {
    margin: 0;
    font-size: 1em;
    color: var(--text-primary);
}

#close-popover-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #888;
    padding: 0 5px;
}

#close-popover-btn:hover {
    color: var(--text-primary);
}

#popover-color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    gap: 10px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
}

/* El borde activo ahora se adapta al color de fondo */
.color-swatch.active.light-bg {
    border-color: var(--text-primary);
}

.color-swatch.active.dark-bg {
    border-color: var(--text-light);
}

/* --- NOTIFICACIONES (TOASTS) --- */
#toast-container {
    position: fixed;
    bottom: 90px; /* Movido hacia arriba para no tapar los controles de zoom/deshacer */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast {
    background: var(--surface-dark);
    /* Usamos el gradiente */
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: var(--shadow-lg);
    animation: toast-fade-in-out 4s ease-in-out forwards;
    backdrop-filter: blur(5px);
}

/* --- PESTAÑA DE CURSOR --- */
/* Contenedor principal de la pestaña para permitir scroll si es necesario */
#tab-content-cursor {
    overflow-y: auto;
}

.cursor-settings-card {
    background: var(--surface-dark);
    border-radius: 12px;
    /* Bordes más redondeados */
    padding: 15px;
    display: grid;
    /* Usamos grid para un layout más robusto */
    grid-template-columns: 1fr;
    gap: 15px;
    border: 1px solid transparent;
    /* Para la transición */
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.cursor-settings-card>.style-option {
    margin-bottom: 0;
    /* Reseteamos el margen de los style-option hijos */
}

/* El contenedor del color principal ocupa toda la primera fila */
.color-option {
    display: flex;
    flex-direction: column;
    /* Label arriba, input abajo */
    gap: 10px;
}

.color-input-wrapper {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px;
    transition: border-color 0.3s ease;
    display: flex;
    /* Para centrar el input de color */
    justify-content: center;
    align-items: center;
}

.color-input-wrapper:hover {
    border-color: var(--color-primary);
}

.color-input-wrapper input[type="color"] {
    width: 100%;
    height: 45px;
    /* Más grande y fácil de clickear */
    border: none;
    padding: 0;
    background: none;
}

.style-option#rainbow-mode-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 15px;
}

.toggle-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-option label {
    margin-bottom: 0;
    font-weight: bold;
}

/* Estilos para el interruptor (toggle switch) - Se mantienen igual */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4a4a4c;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--color-primary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--color-primary);
}

input:checked+.slider:before {
    transform: translateX(22px);
}

.slider.round {
    border-radius: 28px;
}

.slider.round:before {
    border-radius: 50%;
}

#rainbow-speed-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
}

#rainbow-speed-container.visible {
    max-height: 100px;
    /* Suficiente para contener el slider */
    opacity: 1;
    margin-top: 15px;
    /* Espacio cuando es visible */
}

#rainbow-speed-container .style-option-slider {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

/* Estilos cuando el modo arcoíris está activo */
.color-input-wrapper.disabled {
    border-color: var(--surface-dark) !important;
    opacity: 0.5;
}

.color-input-wrapper.disabled input[type="color"] {
    cursor: not-allowed !important;
}

/* Botón de Restablecer Cursores - Ahora es #reset-cursor-btn */
#reset-cursor-btn {
    margin-top: 0;
    /* Ya no necesita margen superior */
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#reset-cursor-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--bg-dark);
}

/* Área de previsualización del cursor */
.preview-title {
    margin-top: 20px;
    /* Espacio entre el botón y la previsualización */
    font-size: 1em;
    font-weight: bold;
    color: var(--text-light);
    opacity: 0.9;
    margin-bottom: 15px;
    text-align: center;
}

#cursor-preview-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
}

.cursor-preview-item {
    background: var(--surface-dark);
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cursor-preview-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.cursor-preview-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cursor-preview-icon svg {
    width: 100%;
    height: 100%;
    /* Eliminamos el filtro de sombra para la previsualización */
    filter: none !important;
}

.cursor-preview-label {
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
}

.share-card {
    background: var(--surface-dark);
    border-radius: 8px;
    padding: 15px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon name"
        "icon desc";
    gap: 0 12px;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: var(--cursor-pointer, pointer) !important;
}

.share-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-secondary);
    background: var(--gradient-primary);
}

.share-card-icon {
    grid-area: icon;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-card-name {
    grid-area: name;
    font-weight: bold;
    font-size: 1.1em;
}

.share-card-desc {
    grid-area: desc;
    font-size: 0.85em;
    opacity: 0.7;
    line-height: 1.4;
}

#share-link-output {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--surface-dark);
    background: var(--surface-dark);
    color: var(--text-light);
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
    resize: none;
    height: 80px;
    display: none;
    /* Oculto por defecto */
}

/* --- MODAL GENÉRICO --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    opacity: 1;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: var(--surface-light);
    /* Usamos el gradiente */
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    position: relative;
    /* --- MEJORA: Animación de desvanecimiento y deslizamiento --- */
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    color: var(--text-primary);
}

.modal-overlay.hidden .modal-content {
    /* --- MEJORA: Estado inicial de la animación --- */
    transform: translateY(20px);
    opacity: 0;
}

/* --- NUEVO: Animación para el ícono de alerta --- */
@keyframes pulse-alert {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7);
        /* --color-accent con opacidad */
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(255, 149, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 149, 0, 0);
    }
}

/* --- NUEVO: Estilos para el Modal de Confirmación --- */
.confirmation-modal-content {
    padding: 25px 30px;
    text-align: center;
    max-width: 420px;
}

.confirmation-modal-content .modal-header {
    padding: 0;
    border-bottom: none;
    margin-bottom: 15px;
}

.confirmation-modal-content .modal-icon-container {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    background-color: #fff0e8;
    /* Naranja muy claro */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-alert 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

.confirmation-modal-content .modal-icon-text {
    font-size: 36px;
    font-weight: bold;
    color: var(--color-accent);
    line-height: 1;
}

.confirmation-modal-content .modal-title {
    font-size: 1.3em;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: bold;
}

.confirmation-modal-content .modal-body p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.confirmation-modal-content .modal-footer {
    padding: 0;
    margin-top: 25px;
    background: none;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dont-ask-again-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

.dont-ask-again-container label {
    font-size: 0.9em;
    color: var(--text-secondary);
    cursor: pointer;
}

.confirmation-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* --- NUEVO: Estilos mejorados para los botones del modal de confirmación --- */
.modal-btn.secondary {
    background-color: #f0f0f0;
    color: var(--text-secondary);
    border: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.modal-btn.secondary:hover {
    background-color: #e5e5e5;
}

.modal-btn.danger {
    background-color: var(--color-accent);
    color: white;
    border: none;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* --- ESTILOS DEL MODAL "SOBRE MÍ" --- */
#about-modal .modal-content {
    background: var(--surface-light);
    /* Usamos el gradiente */
    padding: 0;
    /* Quitamos el padding para un control total */
    border-radius: 16px;
    width: 90%;
    /* Asegura que no se desborde en pantallas pequeñas */
    max-width: 420px;
    /* --- MEJORA: Adaptabilidad vertical --- */
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    /* Límite para que no ocupe toda la pantalla */
    /* --- FIN MEJORA --- */
    text-align: center;
    overflow: hidden;
    /* Para que los bordes redondeados afecten a los hijos */
    font-family: 'Nunito', sans-serif;
    /* Usamos una fuente más suave */
    margin: 20px;
    /* Añade un margen para que no se pegue a los bordes */
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.95) translateY(15px);
    opacity: 0;
}

.modal-header {
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    background: var(--bg-light);
    /* Usamos el gradiente */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    padding: 20px 20px 15px 20px;
    /* Reducimos padding vertical */
}

.modal-body {
    padding: 20px 35px;
    /* Reducimos padding vertical */
    flex-grow: 1;
    /* Permite que esta área crezca si hay espacio */
    overflow-y: auto;
    /* Añadido como fallback por si el contenido es demasiado grande */
}

.modal-footer {
    padding: 20px 35px;
    /* Ajustado para el nuevo tamaño del icono */
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    background: var(--bg-light);
    /* Usamos el gradiente */
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    font-size: 0.9em;
}

.modal-footer p {
    margin: 0 0 8px 0;
    color: #777;
}

.github-link {
    display: inline-block;
    background: var(--bg-dark);
    /* Usamos el gradiente */
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.github-link:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.about-image-container {
    /* Ahora es el contenedor del canvas y la imagen */
    position: relative;
    width: 140px;
    /* Reducido para ahorrar espacio */
    height: 140px;
    margin: 0 auto 15px auto;
    /* Reducido margen inferior */
}

.about-modal-img {
    width: 120px;
    /* Reducido para un look más fino */
    height: 120px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    box-shadow: var(--shadow-md);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* --- NUEVO: Visualizador de audio con Canvas --- */
#audio-visualizer {
    /* Ahora es un canvas */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.modal-title {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--color-accent);
    font-family: 'Roboto Slab', serif;
    font-size: 1.8em;
}

.modal-subtitle {
    margin: 0;
    font-size: 1.1em;
    color: #666;
    font-weight: normal;
}

.modal-body p {
    color: #555;
    line-height: 1.6;
}

.skills-container {
    margin-top: 20px;
    /* Reducido */
}

.skills-container h3 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.1em;
    color: var(--text-primary);
    margin-bottom: 15px;
    /* Ajustado para el nuevo tamaño del icono */
    /* Para bordes con gradiente, se usa border-image. Si no, fallback a color sólido. */
    border-bottom: 1px solid rgba(60, 60, 67, 0.2);
    border-image: var(--border-color) 1;
    /* Aplicar el gradiente como borde */
    border-image-slice: 1;
    padding-bottom: 8px;
}

.skills-list {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(15px);
    /* La animación se aplicará con JS */
}

.modal-overlay:not(.hidden) .skill-item {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Animación escalonada para los items de habilidad */
.modal-overlay:not(.hidden) .skill-item:nth-child(1) {
    animation-delay: 0.3s;
}

.modal-overlay:not(.hidden) .skill-item:nth-child(2) {
    animation-delay: 0.4s;
}

.modal-overlay:not(.hidden) .skill-item:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.skill-item img {
    width: 48px;
    height: 48px;
    filter: grayscale(30%);
    transition: all 0.3s ease;
}

.skill-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.skill-item span {
    font-size: 0.9em;
    font-weight: bold;
    color: #666;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    font-weight: bold;
    color: #bbb;
    transition: color 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

/* --- Media Query para mejorar la responsividad del modal en pantallas pequeñas --- */
@media (max-width: 480px) {
    .modal-header {
        padding: 25px 15px;
    }

    .modal-title {
        font-size: 1.5em;
        /* Reducimos un poco el título */
    }

    .modal-subtitle {
        font-size: 1em;
        /* Reducimos el subtítulo */
    }

    .skills-list {
        gap: 15px;
        /* Menos espacio entre habilidades */
    }
}

/* Media Query para pantallas de baja altura */
@media (max-height: 700px) {
    #about-modal .modal-content {
        font-size: 14px;
        /* Reducimos la fuente base para que todo quepa */
    }
}


@keyframes toast-fade-in-out {

    0%,
    100% {
        opacity: 0;
        transform: translateY(20px);
    }

    10%,
    90% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- PESTAÑA DE CURSOR --- */
#tab-content-cursor {
    overflow-y: auto;
    /* Habilita el scroll vertical si el contenido se desborda */
}

/* --- RESPONSIVE DESIGN: TABLET & MOBILE --- */

/* TABLET MODO: <= 1024px */
@media (max-width: 1024px) {
    #board-manager {
        width: 320px;
        /* Reducir el ancho del sidebar izquierdo */
    }

    #note-palette {
        width: 70px;
        /* Reducir el panel derecho */
    }
}

/* MOBILE MODO: <= 768px */
@media (max-width: 768px) {

    /* 1. Panel de Gestión (Izquierdo) Flotante / Drawer */
    #board-manager {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 85vw;
        /* Ocupa la mayor parte de la pantalla */
        max-width: 350px;
        z-index: 1000;
        transform: translateX(0);
        /* Visible = 0. Colapsado = gestionado dinamicamente / por clase */
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
    }

    #board-manager.collapsed {
        transform: translateX(-100%);
        margin-left: 0;
        /* Anulamos el margin-left que se usa en desktop */
    }

    #sidebar-expander {
        z-index: 999;
    }

    /* Tabs scrollables horizontalmente si son muchos */
    .tab-nav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
    }

    .tab-btn {
        flex: 0 0 auto;
        min-width: 70px;
    }

    #tab-content-container {
        /* Permitiremos que se scrollee todo el contenido y usamos flex */
        min-height: 400px;
    }

    /* 2. Paleta de Plantillas -> Fijar al lado DERECHO de la pantalla */
    #note-palette {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 90px;
        transform: none;
        z-index: 900;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Paleta colapsada: se desliza fuera de la pantalla por la derecha */
    #note-palette.palette-collapsed {
        transform: translateX(100%);
    }

    /* La paleta no debe desaparecer cuando el sidebar está colapsado */
    #board-manager.collapsed~#note-palette {
        margin-left: 0 !important;
    }

    /* Pestaña para abrir la paleta (visible solo en móvil) */
    #palette-expander {
        display: flex;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%) translateX(0);
        width: 25px;
        height: 60px;
        background: var(--bg-dark);
        color: var(--text-light);
        border-radius: 8px 0 0 8px;
        align-items: center;
        justify-content: center;
        box-shadow: -2px 0px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
        z-index: 901;
        border: none;
    }

    #palette-expander:hover {
        background: var(--gradient-primary);
    }

    #palette-expander img {
        width: 18px;
        height: 18px;
        filter: invert(1);
        opacity: 0.9;
    }

    /* Cuando la paleta está visible, la pestaña se oculta deslizando hacia la derecha */
    #note-palette:not(.palette-collapsed)~* #palette-expander,
    #palette-expander.palette-visible {
        transform: translateY(-50%) translateX(200%);
    }

    /* 3. Controles Flotantes */
    #zoom-controls {
        top: auto;
        left: 50%;
        bottom: 20px;
        right: auto;
        transform: translateX(-50%);
        padding: 5px 8px;
        z-index: 800;
        background: var(--surface-dark);
    }

    #zoom-level-display {
        font-size: 0.85em;
        width: 35px;
    }

    #zoom-controls button {
        width: 25px;
        height: 25px;
        font-size: 1.1em;
    }

    #trash-can {
        right: auto;
        left: 10px;
        bottom: 70px;
        /* Por encima del centro, a la izquierda */
        width: 50px;
        height: 50px;
        z-index: 800;
    }

    #trash-can img {
        width: 25px;
        height: 25px;
    }

    /* 4. Modales y Popovers */
    .modal-content {
        width: 95%;
        padding: 20px;
    }

    #color-picker-popover {
        width: 90%;
        max-width: 300px;
        left: 50% !important;
        /* Se centra en móviles */
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: fixed;
    }

    /* Ocultamos resizer lateral */
    #sidebar-resizer {
        display: none;
    }

}
/* --- LEADERLINE STYLES FOR HOVER AND CLICK --- */
.leader-line:hover { filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8)); opacity: 0.8; z-index: 10000 !important; }
svg.leader-line { pointer-events: none !important; z-index: 5 !important; }
svg.leader-line * { pointer-events: visiblePainted !important; cursor: pointer !important; }
svg.leader-line .leader-line-linePath { pointer-events: stroke !important; cursor: pointer !important; stroke-width: 25px !important; stroke: transparent !important; }