/* Componentes compartidos: avisos, menú, diálogo, hoja lateral, campos. */

/* ---------- Avisos ---------- */
.toasts { position: fixed; right: var(--space-4); bottom: calc(var(--dock-height, 0px) + var(--space-4)); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; pointer-events: none; }
.toast {
	position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
	display: flex; align-items: center; gap: var(--space-3);
	min-width: 240px; max-width: min(420px, calc(100vw - 32px));
	padding: var(--space-3) var(--space-4) calc(var(--space-3) + 2px);
	background: var(--panel-raised); border: 1px solid var(--hairline); border-radius: 24px;
	box-shadow: var(--shadow-float);
	animation: toast-in 180ms var(--ease);
}
.toast.leaving { opacity: 0; transform: translateY(4px); transition: opacity 180ms, transform 180ms; }
.toast-title { margin: 0; flex: 1; font-size: var(--text-sm); }
.toast-action { border-radius: var(--radius-pill); min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; background: transparent; border-color: #3a3e47; }
.toast-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--text-muted); opacity: 0.5; transform-origin: left; transition-property: transform; transition-timing-function: linear; }
.toast-bar.run { transform: scaleX(0); }
.toast.error .toast-bar { background: var(--accent); opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Globo de ayuda (common/tooltip.js) ---------- */
.tooltip { position: fixed; z-index: 80; width: max-content; max-width: 280px; padding: 6px 12px; pointer-events: none; background: #0c0e14; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-float); font-size: var(--text-xs); line-height: 1.45; color: var(--text); white-space: normal; text-wrap: pretty; animation: toast-in 140ms var(--ease); } /* un texto largo salta de línea en vez de cortarse */

/* ---------- Menú ---------- */
.menu {
	position: fixed; z-index: 70; min-width: 196px; padding: 6px;
	background: var(--panel-raised); border: 1px solid var(--hairline); border-radius: 22px;
	box-shadow: var(--shadow-float);
	max-height: min(420px, calc(100dvh - 16px)); overflow-y: auto; scrollbar-width: thin;
}
.menu-item {
	display: flex; width: 100%; align-items: center; min-height: 36px; padding: 0 var(--space-3);
	border: 0; border-radius: var(--radius-pill); background: none; text-align: left; font-size: var(--text-sm);
}
/* La nota de cabecera de un menú no es una opción: ni se resalta ni responde al ratón. */
.menu-item:hover:not([aria-disabled]), .menu-item:focus-visible { background: #2d3139; outline: none; }
.menu-item[aria-disabled] { cursor: default; }
.menu-item.danger { color: #ff8a80; }
/* Una nota en el menú (título y explicación), sin acción: va como ítem desactivado. */
.menu-note { display: grid; gap: 2px; max-width: 240px; padding: 2px 0; white-space: normal; }
.menu-note strong { font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.menu-note span { font-size: 11px; line-height: 1.4; color: var(--text-muted); }
/* Interruptor: en un menú (.menu-switch) o en una barra (.switch-button). Encendido = azul de la marca. */
.switch-track { display: block; position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.16); transition: background 0.2s ease, box-shadow 0.2s ease; }
.switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: 0.8; transition: translate 0.2s var(--ease), opacity 0.2s ease; }
[aria-checked="true"] > .switch-track { background: var(--brand); box-shadow: 0 0 12px rgba(var(--brand-rgb), 0.45); }
[aria-checked="true"] > .switch-track::after { translate: 12px; opacity: 1; }
.menu-switch { justify-content: space-between; gap: var(--space-4); }
.menu-switch-label { padding-left: calc(16px + var(--space-2)); } /* alineado con los textos que llevan marca de elegido */
.menu-check { flex: none; display: inline-grid; place-items: center; width: 16px; margin-right: var(--space-2); color: var(--selection); }
/*
 * Los menús de elegir una opción (.is-choice: idioma, moneda, modo…): la elegida, en una pastilla celeste con el texto
 * en tinta; sin marca de elegido. Vale en los de papel y en los oscuros.
 */
.menu.is-choice .menu-check { display: none; }
.menu.is-choice .menu-item { padding: 0 14px; border-radius: var(--radius-pill); }
.menu.is-choice .menu-item[aria-checked="true"] { font-weight: 700; color: var(--on-brand); background: var(--brand); }
.menu.is-choice .menu-item[aria-checked="true"]:is(:hover, :focus-visible) { color: var(--on-brand); background: var(--brand-hover); }
.menu-separator { height: 1px; margin: var(--space-1) 0; border: 0; background: var(--border); }
.menu-icon { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 12px; color: var(--text-muted); }
.menu-icon .icon { width: 16px; height: 16px; }
/*
 * Papel: el menú en marfil, como el del usuario (es el de todos los menús de la casa; { paper: false } lo deja
 * oscuro). Opciones más altas, con su icono a la izquierda en gris, y el resalte en tinta suave. Dentro, los tokens
 * pasan a tinta sobre marfil: lo que cada menú pinta por su cuenta (el historial de una pantalla, las miniaturas de
 * Recursos, las notas, las teclas) se lee sin reescribirlo.
 */
.menu.paper {
	--text: var(--paper-text); --text-muted: var(--paper-muted); --border: var(--paper-line); --hairline: var(--paper-line);
	--panel-raised: var(--paper-card); --selection: var(--brand-deep); --live: #0f7a4a; --accent: #b3261e;
}
.menu.paper .menu-hint { background: rgba(0, 0, 0, 0.06); border-color: var(--paper-line); }
.menu.paper { min-width: 220px; padding: 8px; color: var(--paper-text); background: var(--paper-bg); border-color: var(--paper-line); border-radius: 18px; box-shadow: var(--paper-shadow); }
.menu.paper .menu-item { min-height: 38px; padding: 0 10px; font-size: 14px; font-weight: 500; color: var(--paper-text); border-radius: 10px; }
.menu.paper .menu-item:hover:not([aria-disabled]), .menu.paper .menu-item:focus-visible { background: var(--paper-hover); }
.menu.paper .menu-item.danger { color: #b3261e; }
.menu.paper .menu-icon, .menu.paper .menu-hint { color: var(--paper-muted); }
.menu.paper .menu-check { color: var(--brand-deep); }
.menu.paper .menu-separator { margin: 5px 6px; background: var(--paper-line); }
.menu.paper .menu-note strong { color: var(--paper-text); }
.menu.paper .menu-note span { color: var(--paper-muted); }
.menu.paper .switch-track { background: rgba(0, 0, 0, 0.18); }
.menu.paper [aria-checked="true"] > .switch-track { background: var(--brand-deep); box-shadow: none; }

/* ---------- Diálogo y hoja lateral ---------- */
dialog { color: var(--text); background: var(--panel); border: 1px solid var(--border); padding: 0; }
dialog::backdrop { background: rgba(8, 9, 11, 0.62); }
.dialog { width: min(440px, calc(100vw - 32px)); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.dialog form { padding: var(--space-5); }
.dialog h2 { margin: 0 0 var(--space-2); font-size: 17px; font-weight: 600; text-wrap: balance; }
.dialog p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
button.destructive { background: #b3261e; border-color: #b3261e; color: #fff; font-weight: 600; }

.sheet {
	/* Panel flotante, como la columna y la franja del lienzo: 10 px de aire y esquinas redondas. */
	position: fixed; inset: 10px 10px 10px auto; margin: 0; height: calc(100dvh - 20px); max-height: none; overflow: hidden;
	width: min(480px, calc(100vw - 20px)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
	animation: sheet-in 220ms var(--ease);
}
.sheet[open] { display: flex; flex-direction: column; }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }

/* ---------- Grupos de botones y botones de icono ---------- */
.segments { display: inline-flex; padding: 4px; gap: 2px; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.segment {
	min-height: 34px; padding: 0 var(--space-3);
	display: inline-flex; align-items: center; gap: var(--space-2);
	border: 0; border-radius: var(--radius-pill); background: none; font-size: var(--text-sm); color: var(--text-muted);
}
.segment:hover { color: var(--text); }
.segment[aria-pressed="true"] { background: var(--panel-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.segment .count { color: var(--text-muted); font-size: var(--text-xs); }
.icon-segment { padding: 0 var(--space-2); }
.icon-button {
	display: inline-grid; place-items: center; min-width: var(--touch); min-height: var(--touch); padding: 0;
	background: none; border: 0; border-radius: 50%; color: var(--text-muted);
}
.icon-button:hover { color: var(--text); background: var(--panel-raised); }


/* ---------- Campos ---------- */
.field { display: grid; gap: var(--space-1); }
.field > span, legend { font-size: var(--text-sm); font-weight: 600; }
/* La explicación bajo un campo es un span más: sin esto se llevaba la negrita del título. */
.field > .hint { font-size: var(--text-xs); font-weight: 400; line-height: 1.45; }
.field input, .field select, input.text {
	min-height: var(--touch); padding: 0 var(--space-3);
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.field input:focus-visible, .field select:focus-visible, input.text:focus-visible { border-color: var(--selection); outline: none; }
/* Un desplegable y un texto largo con la misma piel que los campos: sin el gris del sistema. */
select.text, .field select {
	min-height: var(--touch); padding: 0 calc(var(--space-3) + 20px) 0 var(--space-3); appearance: none; -webkit-appearance: none; cursor: pointer;
	background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a9b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
	border: 1px solid var(--border); border-radius: var(--radius-pill);
}
select.text option, .field select option { background: var(--surface, #16191f); color: var(--text); }
textarea.text {
	min-height: 72px; padding: var(--space-2) var(--space-3); line-height: 1.45;
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
}
textarea.text::placeholder { color: var(--text-muted); }
select.text:focus-visible, textarea.text:focus-visible { border-color: var(--selection); outline: none; }
.hint { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* PROVISIONAL: el aviso de los selectores de propuestas (buscador, tipografías). Se apaga solo. */
.variant-chip { position: fixed; z-index: 80; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: baseline; gap: var(--space-2); padding: 8px var(--space-4); font-size: var(--text-sm); color: #ecedf0; background: rgba(12, 14, 22, 0.94); border: 1px solid rgba(var(--brand-rgb), 0.5); border-radius: var(--radius-pill); box-shadow: 0 0 24px rgba(var(--brand-rgb), 0.25), 0 14px 40px rgba(0, 0, 0, 0.5); pointer-events: none; }
.variant-chip[hidden] { display: none; }
.variant-chip.font-chip { bottom: 64px; }
.variant-chip-count { font-size: var(--text-xs); color: #a6e6f5; font-variant-numeric: tabular-nums; }
.variant-chip-keys { font-size: var(--text-xs); color: #8b92a0; }

/* Un globo con explicación: título y uno o dos párrafos (tooltip(el, () => h('div', { class: 'tooltip-rich' }, …))). */
.tooltip:has(.tooltip-rich) { max-width: 340px; padding: var(--space-4); white-space: normal; text-align: left; border-radius: 18px; }
.tooltip-rich { display: grid; gap: var(--space-2); }
.tooltip-rich strong { font-size: var(--text-sm); color: var(--text); }
.tooltip-rich p { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

.flow-opt-screen { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.flow-opt-used { font-size: var(--text-xs); color: var(--text-muted); }