/* Variables de color globales (modo claro por defecto).
   Centralizar superficies, texto, acentos, focus y sombras permite que el
   override de @media (prefers-color-scheme: dark) sea quirúrgico y que cualquier
   nuevo componente herede el esquema actual sin tocar más reglas. */
:root {
    --bg: #f6f6f9;
    --surface: #ffffff;
    --surface-alt: #fbfbfd;
    --text: #26272e;
    --heading: #14151a;
    --text-muted: #8a8d99;
    --border-input: #e5e5ec;
    --border-soft: #ededf2;
    --border-light: #f2f2f6;
    --disabled-bg: #ececef;
    --accent: #5b5bd6;
    --accent-hover: #4b4bc4;
    --secondary: #f2f3f7;
    --secondary-hover: #e8e9f0;
    --danger: #d24b54;
    --danger-hover: #c1313c;
    --danger-soft: #fdecee;
    --danger-soft-border: #f4cdd2;
    --warning: #d98324;
    --warning-hover: #c0700f;
    --warning-text: #ffffff;
    --success: #2f9e6e;
    --success-hover: #268a5f;
    --focus-ring: #5b5bd6;
    --focus-ring-soft: rgba(91, 91, 214, 0.30);
    --focus-inner: #eef0f6;
    --shadow-soft: rgba(20, 20, 45, 0.08);
    --shadow-strong: rgba(20, 20, 45, 0.16);
    --shadow-inset: rgba(20, 20, 45, 0.05);
    --toast-bg: rgba(20, 21, 26, 0.94);
    --toast-error-bg: rgba(190, 50, 60, 0.95);
    --toast-text: #ffffff;
    --modal-overlay: rgba(20, 21, 30, 0.45);
    /* Sistema de botones neutros (rediseño Linear) */
    --btn-bg: #f2f3f7;
    --btn-bg-hover: #e8e9f0;
    --btn-text: #34353d;
    --btn-border: #e3e4ec;
    /* Radios un poco mayores (override de Open Props) */
    --radius-2: 8px;
    --radius-3: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e0e11;
        --surface: #17181c;
        --surface-alt: #1b1c21;
        --text: #d7d8de;
        --heading: #f4f4f6;
        --text-muted: #82838e;
        --border-input: #2a2b31;
        --border-soft: #232429;
        --border-light: #1f2025;
        --disabled-bg: #2a2b31;
        --accent: #8b8bf2;
        --accent-hover: #9c9cf7;
        --secondary: #232429;
        --secondary-hover: #2b2c32;
        --danger: #e5707a;
        --danger-hover: #ef8089;
        --danger-soft: #2a1d20;
        --danger-soft-border: #43292d;
        --warning: #d9a405;
        --warning-hover: #b58804;
        --warning-text: #1a1a1a;
        --success: #3fbf7f;
        --success-hover: #4fce8f;
        --focus-ring: #8b8bf2;
        --focus-ring-soft: rgba(139, 139, 242, 0.30);
        --focus-inner: #2a2b31;
        --shadow-soft: rgba(0, 0, 0, 0.5);
        --shadow-strong: rgba(0, 0, 0, 0.7);
        --shadow-inset: rgba(0, 0, 0, 0.4);
        --toast-bg: rgba(28, 29, 34, 0.96);
        --toast-error-bg: rgba(150, 45, 55, 0.96);
        --modal-overlay: rgba(0, 0, 0, 0.6);
        --btn-bg: #232429;
        --btn-bg-hover: #2b2c32;
        --btn-text: #d7d8de;
        --btn-border: #2c2d34;
    }
}

/* General body styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Container for the main application content.
   Uso de tokens de Open Props: --shadow-3 da una sombra más rica y en capas
   que el `0 2px 5px rgba(...)` plano que tenía antes. --radius-3 (16px) le
   da un look más moderno tipo card. */
.container {
    background-color: var(--surface);
    padding: 18px;
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-3);
    width: 98%;
    max-width: 920px;
}

/* SVG icons (Lucide). El SVG hereda color via currentColor, así que cambia
   solo en hover/listening sin necesidad de reglas extra. */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.microphone-button .icon-mic {
    width: 17px;
    height: 17px;
}

/* Header con título + acciones (configuración y ayuda) alineadas a la derecha.
   z-index explícito sobre el header crea un stacking context que mantiene los
   paneles desplegables (settings/shortcuts/data) por encima del campo de texto
   principal y de las notas (que usan position: relative por la clase .note). */
.app-header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Heading 1 styles */
h1 {
    color: var(--heading);
    text-align: left;
    margin: 0;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Global controls section (now only for spacing, no buttons here) */
.controls {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* General button styles (applied to all buttons unless overridden).
   Easings de Open Props (--ease-out-3) para movimientos más naturales que el
   `ease` por defecto. --radius-2 (5px) preserva la suavidad de los 4px previos. */
button {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-2);
    cursor: pointer;
    font-size: 0.8em;
    line-height: 1.2;
    transition: background-color 200ms var(--ease-out-3), transform 150ms var(--ease-out-3), box-shadow 200ms var(--ease-out-3);
    box-shadow: var(--shadow-1);
    flex-shrink: 0;
    font-weight: var(--font-weight-6, 600);
}

/* Button hover effect: leve elevación con sombra más rica de Open Props. */
button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

/* Button active (click) effect */
button:active {
    transform: translateY(0);
}

/* Visible focus outline for keyboard navigation (a11y) */
button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

[contenteditable="true"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Disabled button styles */
button:disabled {
    background-color: var(--disabled-bg);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Search input over the saved notes list */
#notes-search {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-2);
    font-family: inherit;
    font-size: 0.9em;
    color: var(--text);
    background-color: var(--surface);
    transition: border-color 200ms var(--ease-out-3), box-shadow 200ms var(--ease-out-3);
}

#notes-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

#notes-search:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Notes container styles */
#notes-container {
    margin-top: 10px;
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
}

/* Individual note styles */
.note {
    background-color: var(--surface-alt);
    border: 1px solid var(--border-soft);
    padding: 10px 12px;
    border-radius: var(--radius-3);
    margin-bottom: 10px;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 35px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 200ms var(--ease-out-3), border-color 200ms var(--ease-out-3);
}

.note:hover {
    box-shadow: var(--shadow-1);
    border-color: var(--border-input);
}

/* Cabecera de metadata por nota (Fase 8): título editable + fecha createdAt.
   Layout horizontal con título flexible y fecha compacta a la derecha. */
.note-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.note-title {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent;
    color: var(--heading);
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    padding: 2px 4px;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    transition: border-color 180ms var(--ease-out-3), background-color 180ms var(--ease-out-3);
}

.note-title::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}

.note-title:hover {
    border-color: var(--border-soft);
}

.note-title:focus {
    outline: none;
    background-color: var(--surface);
    border-color: var(--border-input);
}

.note-title:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.note-date {
    flex-shrink: 0;
    font-size: 0.7em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Styles for the main contenteditable container, not the inner div */
.editable-content {
    border: 1px solid var(--border-input);
    padding: 14px 16px;
    border-radius: var(--radius-2);
    min-height: 130px;
    background-color: var(--surface);
    box-shadow: inset 0 1px 2px var(--shadow-inset);
    outline: none;
    transition: border-color 200ms var(--ease-out-3), box-shadow 200ms var(--ease-out-3);
    flex-grow: 1;
}

/* El editor principal recibe foco visual al enfocar el contenteditable interno:
   el borde acento refuerza "aqui es donde escribes/dictas". */
.editable-content:focus-within {
    border-color: var(--accent);
}

/* Specific styles for the inner contenteditable div (current-text-content and note-text) */
#current-text-content, .note-text {
    outline: none;
    border: 1px solid transparent;
    padding: 0;
    margin: 0;
    font-size: 1.15em;
    color: var(--text);
    flex-grow: 1;
    min-height: 100%;
    box-sizing: border-box;
    transition: border-color 200ms var(--ease-out-3), box-shadow 200ms var(--ease-out-3);
}

/* Focus style for the actual contenteditable div */
#current-text-content:focus, .note-text[contenteditable="true"]:focus {
    border-color: var(--focus-inner);
    box-shadow: 0 0 0 1px var(--focus-inner);
}


/* Placeholder for contenteditable */
[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    color: var(--text-muted);
    pointer-events: none;
    display: block;
}


/* Note actions container (delete/copy/edit buttons for saved notes).
   "Eliminar" se ancla a la izquierda (margin-right:auto); a la derecha quedan
   Copiar · Editar. El orden lo define el DOM (buildNoteElement en notes.js)
   para que coincida con la tabulación por teclado. */
.note-actions {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.note-actions .delete {
    margin-right: auto;
}

/* Styles for action buttons within notes */
.note-actions button {
    background-color: var(--secondary);
    padding: 7px 13px;
    font-size: 0.74em;
    min-height: 32px;
}

/* Delete button specific styles */
.note-actions button.delete {
    background-color: var(--danger);
}

/* Delete button hover effect */
.note-actions button.delete:hover {
    background-color: var(--danger-hover);
}

/* Copy button hover effect */
.note-actions button.copy:hover {
    background-color: var(--secondary-hover);
}

/* Edit button specific styles */
.note-actions button.edit {
    background-color: var(--warning);
    color: var(--warning-text);
}

.note-actions button.edit:hover {
    background-color: var(--warning-hover);
}

/* Save Edit button specific styles */
.note-actions button.save-edit {
    background-color: var(--success);
}

.note-actions button.save-edit:hover {
    background-color: var(--success-hover);
}


/* Status message styles - REMOVED, now handled by #message-area */


/* Styles for the dynamic dictation controls within each note.
   "Limpiar" se ancla a la izquierda (margin-right:auto empuja el resto al borde
   derecho); orden visual L->R: Limpiar  …  Guardar · Copiar · Mic (el micrófono
   queda en el borde derecho). El orden lo define el DOM (index.html / plantilla
   inyectada), no CSS, para que coincida con la tabulación por teclado. */
.dictation-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.dictation-controls .clear-current {
    margin-right: auto;
}

/* Microphone button: usa --radius-round (Open Props = 50%) y --ease-spring-2
   para hover con un rebote sutil. El SVG hereda color del botón via
   currentColor, así no hay que pintar el ícono aparte. */
.dictation-controls .microphone-button {
    width: 38px;
    height: 38px;
    font-size: 0.825em;
    padding: 0;
    border-radius: var(--radius-round);
    background-color: var(--accent);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-2);
    transition: background-color 200ms var(--ease-out-3), transform 250ms var(--ease-spring-2), box-shadow 200ms var(--ease-out-3);
}

.dictation-controls .microphone-button:hover {
    background-color: var(--accent-hover);
    transform: scale(1.08);
    box-shadow: var(--shadow-3);
}

.dictation-controls .microphone-button:active {
    transform: scale(0.94);
    box-shadow: var(--shadow-1);
}

/* Microphone button when listening (recognition active) — sólo color rojo. */
.dictation-controls .microphone-button.listening {
    background-color: var(--danger);
}

.dictation-controls .microphone-button.listening:hover {
    background-color: var(--danger-hover);
}

/* Pulse animation for listening state. Curva de easing más natural y radio
   un poco mayor para que el "halo" sea más visible con el botón a 26px.
   Indicador de actividad de voz (Fase 6): se aplica entre onspeechstart y
   onspeechend. */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
    }
    70% {
        box-shadow: 0 0 0 11px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.dictation-controls .microphone-button.speech-active {
    animation: pulse 1.4s var(--ease-out-3) infinite;
}

/* Adjust general button styles for context within dictation-controls */
.dictation-controls button {
    background-color: var(--secondary);
    padding: 8px 14px;
    font-size: 0.78em;
    min-height: 34px;
    flex-shrink: 0;
}

.dictation-controls button.copy {
    background-color: var(--accent);
}
.dictation-controls button.copy:hover {
    background-color: var(--accent-hover);
}

.dictation-controls button.save-note {
    background-color: var(--success);
}
.dictation-controls button.save-note:hover {
    background-color: var(--success-hover);
}

.dictation-controls button.clear-current {
    background-color: var(--warning);
    color: var(--warning-text);
}
.dictation-controls button.clear-current:hover {
    background-color: var(--warning-hover);
}


/* Responsive styles for smaller screens - NO CHANGES TO BUTTON SIZES HERE */
@media (max-width: 600px) {
    body {
        margin: 5px;
    }
    .container {
        padding: 10px;
    }
    h1 {
        font-size: 1.1em;
    }
    .controls, .dictation-controls, .note-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 5px;
    }

    #current-text-content, .note-text {
        font-size: 1.1em;
    }

    .shortcuts-panel {
        width: min(280px, calc(100vw - 40px));
    }
}

/* Styles for the non-invasive message area */
#message-area {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
}

.message-box {
    background-color: var(--toast-bg);
    color: var(--toast-text);
    padding: 11px 16px;
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.85em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 250ms var(--ease-out-3), transform 300ms var(--ease-spring-2);
    pointer-events: auto;
    max-width: 280px;
    text-align: center;
}

.message-box.show {
    opacity: 1;
    transform: translateY(0);
}

.message-box.error {
    background-color: var(--toast-error-bg);
}

/* Toast con acción "Deshacer" para borrado de nota */
.message-box.undo-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 320px;
    text-align: left;
}

.message-box.undo-toast .undo-toast-message {
    flex: 1;
}

.message-box.undo-toast .undo-toast-button {
    background-color: transparent;
    color: var(--focus-ring);
    border: 1px solid var(--focus-ring);
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: var(--radius-2);
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 180ms var(--ease-out-3), color 180ms var(--ease-out-3);
}

.message-box.undo-toast .undo-toast-button:hover {
    background-color: var(--focus-ring);
    color: #333;
    transform: none;
}

.message-box.undo-toast .undo-toast-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Panel desplegable de atajos de teclado en la cabecera.
   Implementado con <details> nativo: el summary es el botón "?" y el panel
   aparece al expandir. Vive dentro de .header-actions, que ya está posicionado
   en absoluto al margen derecho. */
.shortcuts-help {
    position: relative;
}

.shortcuts-help summary {
    list-style: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-round);
    background-color: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 700;
    user-select: none;
    transition: background-color 180ms var(--ease-out-3);
}

.shortcuts-help summary::-webkit-details-marker {
    display: none;
}

.shortcuts-help summary:hover {
    background-color: var(--secondary-hover);
}

.shortcuts-help summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.shortcuts-panel {
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-3);
    padding: 12px 14px;
    box-shadow: var(--shadow-4);
    width: 300px;
    z-index: 1001;
}

.shortcuts-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78em;
}

.shortcuts-panel li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.shortcuts-panel li:last-child {
    margin-bottom: 0;
}

.shortcuts-panel .shortcut-keys {
    flex-shrink: 0;
    min-width: 130px;
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
}

.shortcuts-panel .shortcut-desc {
    color: var(--text);
}

.shortcuts-panel kbd {
    display: inline-block;
    background-color: var(--surface-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-1);
    padding: 1px 5px;
    font-size: 0.95em;
    font-family: inherit;
    color: var(--text);
    line-height: 1.2;
}

/* --- Modal accesible (role="dialog", aria-modal, focus trap) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2000;
    animation: modal-overlay-in 0.15s ease-out;
}

@keyframes modal-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-dialog {
    background-color: var(--surface);
    color: var(--text);
    border-radius: var(--radius-3);
    padding: 20px 22px;
    box-shadow: var(--shadow-5);
    max-width: 420px;
    width: 100%;
    animation: modal-dialog-in 200ms var(--ease-out-3);
}

@keyframes modal-dialog-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-title {
    margin: 0 0 8px 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--heading);
}

.modal-body {
    margin: 0 0 16px 0;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--text);
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-actions button {
    font-size: 0.78em;
    padding: 7px 14px;
}

.modal-actions button.modal-cancel {
    background-color: var(--secondary);
}

.modal-actions button.modal-cancel:hover {
    background-color: var(--secondary-hover);
}

.modal-actions button.modal-confirm {
    background-color: var(--accent);
}

.modal-actions button.modal-confirm:hover {
    background-color: var(--accent-hover);
}

.modal-actions button.modal-confirm--danger {
    background-color: var(--danger);
}

.modal-actions button.modal-confirm--danger:hover {
    background-color: var(--danger-hover);
}

/* --- Panel de configuración de dictado (Fase 6) ---
   Misma mecánica que .shortcuts-help: <details> con summary circular y panel
   absoluto. Idioma, comandos de voz y auto-stop por silencio. */
.settings-panel {
    position: relative;
}

.settings-panel summary {
    list-style: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-round);
    background-color: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    user-select: none;
    transition: background-color 180ms var(--ease-out-3);
}

.settings-panel summary::-webkit-details-marker {
    display: none;
}

.settings-panel summary:hover {
    background-color: var(--secondary-hover);
}

.settings-panel summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.settings-content {
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-3);
    padding: 14px 16px;
    box-shadow: var(--shadow-4);
    width: 280px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-content .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82em;
}

.settings-content label {
    color: var(--text);
    font-weight: 600;
    flex-shrink: 0;
}

.settings-content select,
.settings-content input[type="number"] {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-2);
    padding: 4px 6px;
    font-family: inherit;
    font-size: 1em;
}

.settings-content select {
    flex: 1;
    min-width: 0;
}

.settings-content select:focus-visible,
.settings-content input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.settings-content .setting-hint {
    margin: -4px 0 0 0;
    font-size: 0.72em;
    color: var(--text-muted);
    line-height: 1.35;
}

.settings-content .silence-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-content .silence-controls input[type="number"] {
    width: 56px;
    text-align: right;
}

.settings-content .silence-controls input[type="number"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.settings-content .silence-unit {
    color: var(--text-muted);
    font-size: 0.92em;
}

.settings-content .silence-never {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 0.92em;
    color: var(--text);
    cursor: pointer;
}

.settings-content input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

@media (max-width: 600px) {
    .settings-content {
        width: min(280px, calc(100vw - 40px));
    }
}

/* --- Panel "Datos" (Fase 8) ---
   Reutiliza el patrón de <details>+summary circular usado por settings-panel
   y shortcuts-help. Contiene los botones de exportación (JSON/MD/TXT) y el
   trigger del input file de importación. */
.data-panel {
    position: relative;
}

.data-panel summary {
    list-style: none;
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-round);
    background-color: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    user-select: none;
    transition: background-color 180ms var(--ease-out-3);
}

.data-panel summary::-webkit-details-marker {
    display: none;
}

.data-panel summary:hover {
    background-color: var(--secondary-hover);
}

.data-panel summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.data-content {
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-3);
    padding: 14px 16px;
    box-shadow: var(--shadow-4);
    width: 260px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.data-content .data-section-title {
    margin: 0;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--heading);
}

.data-content .data-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.data-content .data-button {
    background-color: var(--accent);
    padding: 5px 10px;
    font-size: 0.7em;
}

.data-content .data-button:hover {
    background-color: var(--accent-hover);
}

.data-content .data-hint {
    margin: 0;
    font-size: 0.7em;
    color: var(--text-muted);
    line-height: 1.4;
}

.data-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    background-color: var(--surface-alt);
    padding: 1px 4px;
    border-radius: var(--radius-1);
}

@media (max-width: 600px) {
    .data-content {
        width: min(260px, calc(100vw - 40px));
    }
}

/* ===================================================================
   REDISEÑO "Linear / Índigo" — capa final.
   Sistema de botones unificado (neutro + 1 acento, sin "arcoíris"),
   botones planos, editor protagonista, micrófono más grande, marca en el
   header, sección de notas con contador, acciones de nota en hover y estado
   vacío. Sobreescribe reglas previas (misma o mayor especificidad + orden).
   =================================================================== */

/* Contenedor y aire general */
.container { border: 1px solid var(--border-soft); box-shadow: 0 1px 2px var(--shadow-inset), 0 16px 42px var(--shadow-soft); padding: 22px; }

/* --- Header: marca con logo + íconos ligeros --- */
.app-header { margin-bottom: 16px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; flex-shrink: 0; }
.brand-mark svg { width: 17px; height: 17px; }
h1 { font-size: 1.18em; letter-spacing: -0.02em; }
.settings-panel summary, .data-panel summary, .shortcuts-help summary { background: var(--btn-bg); color: var(--text-muted); border: 1px solid var(--btn-border); }
.settings-panel summary:hover, .data-panel summary:hover, .shortcuts-help summary:hover { background: var(--btn-bg-hover); color: var(--text); }

/* --- Botones: planos (sin lift ni sombra) --- */
button { box-shadow: none; }
button:hover { box-shadow: none; transform: none; }
button:active { transform: none; }

/* --- Editor protagonista --- */
.editable-content { min-height: 168px; padding: 18px 20px; border-radius: var(--radius-3); }
#current-text-content, .note-text { font-size: 1.18em; line-height: 1.55; }
.editable-content:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring-soft); }

/* --- Toolbar del editor / notas en edición --- */
.dictation-controls { gap: 8px; padding-top: 14px; }
.dictation-controls button, .note-actions button { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); }
.dictation-controls button:hover, .note-actions button:hover { background: var(--btn-bg-hover); color: var(--heading); }
.dictation-controls button.save-note { background: var(--accent); color: #fff; border-color: transparent; }
.dictation-controls button.save-note:hover { background: var(--accent-hover); color: #fff; }
.dictation-controls button.copy { background: var(--btn-bg); color: var(--btn-text); }
.dictation-controls button.copy:hover { background: var(--btn-bg-hover); color: var(--heading); }
.note-actions button.edit { background: var(--btn-bg); color: var(--btn-text); }
.note-actions button.edit:hover { background: var(--btn-bg-hover); color: var(--heading); }
.note-actions button.copy { background: var(--btn-bg); color: var(--btn-text); }
.note-actions button.copy:hover { background: var(--btn-bg-hover); color: var(--heading); }
.note-actions button.save-edit { background: var(--accent); color: #fff; border-color: transparent; }
.note-actions button.save-edit:hover { background: var(--accent-hover); color: #fff; }

/* Destructivos sutiles (texto rojo sobre neutro) */
.dictation-controls button.clear-current, .note-actions button.delete { background: var(--btn-bg); color: var(--danger); border-color: var(--btn-border); }
.dictation-controls button.clear-current:hover, .note-actions button.delete:hover { background: var(--danger-soft); color: var(--danger-hover); border-color: var(--danger-soft-border); }

/* Micrófono más grande y protagonista */
.dictation-controls .microphone-button { width: 44px; height: 44px; background: var(--accent); color: #fff; box-shadow: none; border: none; }
.dictation-controls .microphone-button:hover { background: var(--accent-hover); transform: scale(1.06); }
.dictation-controls .microphone-button .icon-mic { width: 20px; height: 20px; }
.dictation-controls .microphone-button.listening { background: var(--danger); }
.dictation-controls .microphone-button.listening:hover { background: var(--danger-hover); }

/* Botones de exportación (panel Datos) en neutro */
.data-content .data-button { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); }
.data-content .data-button:hover { background: var(--btn-bg-hover); color: var(--heading); }

/* Modal (por si se usa): botón cancelar neutro coherente */
.modal-actions button.modal-cancel { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); }
.modal-actions button.modal-cancel:hover { background: var(--btn-bg-hover); color: var(--heading); }

/* --- Sección "Notas guardadas" con contador + buscador integrado --- */
.notes-section { margin-top: 22px; border-top: 1px solid var(--border-light); padding-top: 16px; }
.notes-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.notes-section-title { font-size: 0.95em; font-weight: 700; color: var(--heading); margin: 0; letter-spacing: -0.01em; }
.notes-count { font-size: 0.74em; font-weight: 600; color: var(--text-muted); background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 999px; padding: 1px 9px; line-height: 1.7; }
#notes-search { margin-top: 0; }
#notes-container { margin-top: 12px; border-top: none; padding-top: 0; }

/* --- Acciones de nota visibles al hover (desktop con puntero fino) --- */
@media (hover: hover) and (pointer: fine) {
    .note-actions { opacity: 0; transition: opacity 140ms var(--ease-out-3, ease); }
    .note:hover .note-actions, .note:focus-within .note-actions { opacity: 1; }
}

/* --- Estado vacío --- */
.empty-state { text-align: center; padding: 32px 16px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state .empty-icon { width: 32px; height: 32px; opacity: 0.5; }
.empty-state .empty-title { margin: 0; font-weight: 600; color: var(--text); font-size: 0.95em; }
.empty-state .empty-hint { margin: 0; font-size: 0.82em; max-width: 38ch; line-height: 1.5; }