/* ==================================================================
   Homelab Portal — "Atlantis"
   Consola de los Antiguos: azul abisal, luz cian, cristal ámbar.
   Sin imágenes: todo son gradientes, bordes y máscaras.
   ================================================================== */

:root {
    --glow-base: #5fd4ff;
    --accent-base: #e0a84e;
    --glow: var(--glow-base);
    --accent: var(--accent-base);

    --bg: #020a10;
    --bg-2: #051521;
    --panel: color-mix(in srgb, var(--glow) 3%, rgba(4, 18, 28, 0.72));
    --panel-solid: #061824;
    --line: color-mix(in srgb, var(--glow) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--glow) 42%, transparent);
    --glow-soft: color-mix(in srgb, var(--glow) 10%, transparent);

    --text: #cfeaf5;
    --muted: #7aa3b5;
    --dim: #3f6677;

    --ok: #5fe0c8;
    --warn: var(--accent);
    --bad: #ff6a4d;
    --maint: #8aa8ff;

    --heading: #eaf8ff;
    --topbar-bg: linear-gradient(180deg, rgba(2, 10, 16, 0.78), rgba(2, 10, 16, 0.45));
    --input-bg: rgba(2, 10, 16, 0.6);
    --sunken: rgba(0, 0, 0, 0.32);
    --backdrop: rgba(1, 6, 10, 0.75);
    --shadow: rgba(0, 0, 0, 0.7);
    --mono-filter: grayscale(1) brightness(1.7) contrast(0.85);

    --font-ui: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    color-scheme: dark;
}

/* Tema claro: elegido explícitamente o por el sistema */
:root[data-theme='light'] {
    --bg: #123f73;
    --bg-2: #164a86;
    --panel: color-mix(in srgb, var(--glow) 4%, rgba(22, 76, 140, 0.55));
    --panel-solid: #174a84;
    --line: color-mix(in srgb, var(--glow) 20%, transparent);
    --line-strong: color-mix(in srgb, var(--glow) 46%, transparent);
    --glow-soft: color-mix(in srgb, var(--glow) 12%, transparent);
    --text: #e6f4ff;
    --muted: #a9ccf0;
    --dim: #80a8d6;
    --ok: #6ff0d6;
    --bad: #ff8a70;
    --maint: #a6bcff;
    --heading: #f5fcff;
    --topbar-bg: linear-gradient(180deg, rgba(13, 50, 94, 0.8), rgba(13, 50, 94, 0.48));
    --input-bg: rgba(6, 30, 62, 0.5);
    --sunken: rgba(4, 20, 44, 0.28);
    --backdrop: rgba(5, 20, 44, 0.6);
    --shadow: rgba(2, 10, 26, 0.55);
}

@media (prefers-color-scheme: light) {
    :root[data-theme='system'] {
        --bg: #123f73;
        --bg-2: #164a86;
        --panel: color-mix(in srgb, var(--glow) 4%, rgba(22, 76, 140, 0.55));
        --panel-solid: #174a84;
        --line: color-mix(in srgb, var(--glow) 20%, transparent);
        --line-strong: color-mix(in srgb, var(--glow) 46%, transparent);
        --glow-soft: color-mix(in srgb, var(--glow) 12%, transparent);
        --text: #e6f4ff;
        --muted: #a9ccf0;
        --dim: #80a8d6;
        --ok: #6ff0d6;
        --bad: #ff8a70;
        --maint: #a6bcff;
        --heading: #f5fcff;
        --topbar-bg: linear-gradient(180deg, rgba(13, 50, 94, 0.8), rgba(13, 50, 94, 0.48));
        --input-bg: rgba(6, 30, 62, 0.5);
        --sunken: rgba(4, 20, 44, 0.28);
        --backdrop: rgba(5, 20, 44, 0.6);
        --shadow: rgba(2, 10, 26, 0.55);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 90% 55% at 50% -12%, color-mix(in srgb, var(--glow) 13%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 115%, color-mix(in srgb, var(--glow) 6%, transparent), transparent 70%),
        var(--bg);
    color: var(--text);
    font: 500 15px/1.45 var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------
   Fondo: estrellas, anillo inspirado en el Stargate y pistas de circuito.
   Todo en el color de la consola y muy tenue para no molestar.
   ------------------------------------------------------------------ */

.bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    color: var(--glow);
}

/* Estrellas: capas de puntos con tamaños de mosaico "primos" para que no se note la repetición */
.bg-stars {
    position: absolute;
    inset: 0;
    --star: color-mix(in srgb, var(--glow) 55%, #ffffff);
    background-image:
        radial-gradient(1px 1px at 23px 41px, var(--star) 50%, transparent 55%),
        radial-gradient(1px 1px at 121px 173px, var(--star) 50%, transparent 55%),
        radial-gradient(1.4px 1.4px at 57px 229px, var(--star) 50%, transparent 55%),
        radial-gradient(1px 1px at 199px 97px, var(--star) 50%, transparent 55%),
        radial-gradient(1.8px 1.8px at 263px 311px, var(--star) 45%, transparent 55%),
        radial-gradient(1px 1px at 331px 19px, var(--star) 50%, transparent 55%),
        radial-gradient(1.2px 1.2px at 89px 367px, var(--star) 50%, transparent 55%);
    background-size: 211px 197px, 293px 263px, 347px 331px, 419px 389px, 523px 467px, 373px 409px, 457px 433px;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
}

/* Unas pocas estrellas más brillantes que parpadean despacio */
.bg-stars.twinkle {
    background-image:
        radial-gradient(1.6px 1.6px at 71px 53px, var(--star) 45%, transparent 55%),
        radial-gradient(2px 2px at 311px 241px, var(--star) 40%, transparent 55%),
        radial-gradient(1.6px 1.6px at 173px 401px, var(--star) 45%, transparent 55%);
    background-size: 613px 571px, 797px 683px, 709px 887px;
    opacity: 0.5;
    animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle { from { opacity: 0.15; } to { opacity: 0.6; } }

/* Anillo: centrado arriba, difuminado y desvanecido hacia abajo */
.bg-gate {
    position: absolute;
    left: 50%;
    top: 30%;
    width: min(118vmin, 1180px);
    height: min(118vmin, 1180px);
    transform: translate(-50%, -50%);
    opacity: 0.6;
    filter: blur(0.9px);
    /* Solo se desvanece hacia abajo, para fundirse con el contenido */
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
}

.bg-gate .gate-frame { stroke-opacity: 0.3; }
.bg-gate .glyph-band { stroke-opacity: 0.07; }
.bg-gate .glyph-ticks { stroke-opacity: 0.28; }
.bg-gate .gate-ripples { stroke-opacity: 0.12; }
.bg-gate .gate-chevrons { color: var(--accent); fill: color-mix(in srgb, currentColor 10%, transparent); stroke: currentColor; stroke-opacity: 0.38; stroke-width: 1.2; }
.bg-gate .gate-chevrons .chev-core { fill: currentColor; fill-opacity: 0.22; stroke: none; }
.bg-gate .gate-data { font: 500 11px var(--font-mono); letter-spacing: 4px; fill: currentColor; fill-opacity: 0.2; }

/* La banda interior gira como al marcar una dirección; los datos, en sentido contrario */
.bg-gate .gate-inner,
.bg-gate .gate-data,
.bg-gate .gate-ripples { transform-origin: 500px 500px; transform-box: view-box; }
.bg-gate .gate-inner { animation: spin 360s linear infinite; }
.bg-gate .gate-data { animation: spin 600s linear infinite reverse; }
.bg-gate .gate-ripples { animation: ripple 9s ease-in-out infinite alternate; }

@keyframes ripple { from { transform: scale(0.97); opacity: 0.6; } to { transform: scale(1.03); opacity: 1; } }

/* Pistas de circuito impreso en los bordes */
.bg-circuit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.07;
}

.bg-circuit .circuit-text { font: 500 13px var(--font-mono); letter-spacing: 2px; fill: currentColor; }

@media (max-width: 700px) {
    .bg-circuit { opacity: 0.045; }
    .bg-gate { top: 22%; }
}

body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.02em; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--glow) 35%, transparent); }

:focus-visible { outline: 1px solid var(--glow); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Barra superior
   ------------------------------------------------------------------ */

.topbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--line);
    background: var(--topbar-bg);
    backdrop-filter: blur(10px) saturate(1.15);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(420px, 40%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
    opacity: 0.7;
}

.brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

.brand-ring {
    position: relative;
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
}

.brand-ring::before,
.brand-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.brand-ring::before {
    background: repeating-conic-gradient(var(--glow) 0 22deg, transparent 22deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: 0.8;
    animation: spin 40s linear infinite;
}

.brand-ring::after {
    inset: 6px;
    border: 1px solid var(--line-strong);
}

.brand-core {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent), 0 0 2px #fff inset;
    animation: breathe 4s ease-in-out infinite;
}

.brand-ring img { width: 22px; height: 22px; object-fit: contain; position: relative; z-index: 1; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-title {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--heading);
    text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent);
    white-space: nowrap;
}

.brand-sub {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sys-status {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--line);
    font: 0.7rem/1.2 var(--font-mono);
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.2s;
}

.sys-status:hover { color: var(--text); }
.sys-line { display: flex; align-items: center; gap: 0.45rem; }
.sys-line .dot { width: 6px; height: 6px; }
.sys-line b { font-weight: 500; color: var(--c); }

.nav { display: flex; gap: 0.25rem; margin-left: auto; }

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s;
}

.nav-item::after {
    content: '';
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.15rem;
    height: 1px;
    background: var(--glow);
    transform: scaleX(0);
    transition: transform 0.25s;
    box-shadow: 0 0 8px var(--glow);
}

.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--glow); }
.nav-item.active::after { transform: scaleX(1); }

.topbar-right { display: flex; align-items: center; gap: 1rem; }
/* Fecha, hora y tiempo */
.sky { display: flex; align-items: center; }
.sky-part { position: relative; }

.sky-now {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.2rem 0.5rem;
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    transition: background 0.2s;
}

.sky-now::-webkit-details-marker { display: none; }
.sky-now:hover, .sky-part[open] > .sky-now { background: var(--glow-soft); }
.sky-wx:hover .sky-temp,
.sky-wx[open] .sky-temp { text-shadow: 0 0 12px var(--glow); }
.sky-cal:hover .sky-clock,
.sky-cal[open] .sky-clock { color: var(--glow); text-shadow: 0 0 10px color-mix(in srgb, var(--glow) 60%, transparent); }

/* Separador entre tiempo y fecha */
.sky-wx:not([hidden]) + .sky-cal { border-left: 1px solid var(--line); }

.sky-weather { gap: 0.45rem; }
.sky-ico { width: 22px; height: 22px; color: var(--glow); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--glow) 60%, transparent)); }
.sky-temp { font: 500 1.1rem var(--font-mono); color: var(--heading); transition: text-shadow 0.2s; }

/* Fecha y hora apiladas y juntas (sin el gap horizontal de .sky-now) */
.sky-time { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.05; }
.sky-date { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sky-clock { color: var(--text); letter-spacing: 0.1em; font-size: 0.85rem; }

.sky .sky-pop { width: 290px; padding: 1rem; }

.sky-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); }
.sky-big { width: 46px; height: 46px; color: var(--glow); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 60%, transparent)); }
.sky-head-text { display: flex; flex-direction: column; min-width: 0; }
.sky-head-text b { font: 500 1.6rem/1 var(--font-mono); color: var(--heading); }
.sky-head-text span { margin-top: 0.2rem; color: var(--text); font-size: 0.9rem; }
.sky-head-text small { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }

.sky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem 0.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.sky-grid div { display: flex; flex-direction: column; min-width: 0; }
.sky-grid span { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.sky-grid b { font: 500 0.8rem var(--font-mono); color: var(--text); white-space: nowrap; }

.sky-days { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0.8rem; }
.sky-day { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.sky-day + .sky-day { border-left: 1px solid var(--line); }
.sky-day > span:first-child { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.sky-day .mdi { width: 22px; height: 22px; color: var(--glow); }
.sky-day b { font: 500 0.85rem var(--font-mono); color: var(--text); }
.sky-day small { font: 0.7rem var(--font-mono); color: var(--dim); }
.sky-day .sky-rain { color: color-mix(in srgb, var(--glow) 70%, var(--dim)); }

/* Calendario */
.sky .cal-pop { width: 286px; padding: 0.9rem 1rem 0.8rem; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.cal-title { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--glow); }
.cal-title b { font: 500 0.8rem var(--font-mono); letter-spacing: 0.05em; color: var(--muted); margin-left: 0.3rem; }

.cal-nav, .cal-today {
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cal-nav { width: 26px; height: 26px; font: 500 1rem/1 var(--font-mono); }
.cal-nav:hover, .cal-today:hover { color: var(--glow); border-color: var(--glow); box-shadow: 0 0 10px -4px var(--glow); }

.cal-grid { display: grid; grid-template-columns: 1.6rem repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-label { padding-bottom: 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.cal-label.weekend { color: var(--dim); }

.cal-week {
    display: grid;
    place-items: center;
    font: 0.6rem var(--font-mono);
    color: var(--dim);
    border-right: 1px solid var(--line);
    margin-right: 2px;
}

.cal-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font: 0.76rem var(--font-mono);
    color: var(--text);
    border: 1px solid transparent;
}

.cal-day.weekend { color: var(--muted); }
.cal-day.out { color: var(--dim); opacity: 0.45; }

.cal-day.today {
    border-color: var(--glow);
    background: color-mix(in srgb, var(--glow) 16%, transparent);
    color: var(--heading);
    box-shadow: 0 0 12px -4px var(--glow), inset 0 0 8px -4px var(--glow);
    position: relative;
}

/* Cristal ámbar sobre el día de hoy */
.cal-day.today::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 3px;
    height: 3px;
    background: var(--accent);
    transform: rotate(45deg);
    box-shadow: 0 0 5px var(--accent);
}

.cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
    color: var(--dim);
    font-size: 0.7rem;
}

.cal-today { padding: 0.2rem 0.6rem; font: 600 0.62rem var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; }

/* Selector de ubicación (Apariencia) */
.geo-results { display: flex; flex-direction: column; gap: 0.3rem; }
.geo-results button { text-align: left; }
.geo-current { font: 0.75rem var(--font-mono); color: var(--muted); }
.storage-usage { font-size: 0.75rem; color: var(--muted); padding: 0.5rem 0.7rem; border: 1px dashed var(--line); }
.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------
   Estructura
   ------------------------------------------------------------------ */

.shell {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem;
    flex: 1;
}

.footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    color: var(--dim);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.footer-line { flex: 1; height: 1px; background: var(--line); }

.section-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 2.4rem 0 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--glow);
}

.section-title::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}

.section-title .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.section-title .count { color: var(--dim); letter-spacing: 0.1em; }

/* ------------------------------------------------------------------
   Paneles (esquinas HUD)
   ------------------------------------------------------------------ */

.panel {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 1.35rem;
    backdrop-filter: blur(6px);
}

.panel::before,
.panel::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--glow);
    pointer-events: none;
    opacity: 0.75;
}

.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.panel + .panel { margin-top: 1.25rem; }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.panel-head h2 {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--glow);
}

.panel-head .actions { display: flex; gap: 0.5rem; }
.hint { margin: 0 0 1rem; color: var(--muted); font-size: 0.88rem; }
.hint em { color: var(--text); font-style: normal; }

/* ------------------------------------------------------------------
   Controles
   ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    font: 600 0.78rem/1 var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.btn:hover { border-color: var(--glow); box-shadow: 0 0 16px -6px var(--glow); }
.btn:disabled { opacity: 0.5; cursor: wait; }

.btn-primary {
    background: color-mix(in srgb, var(--glow) 16%, transparent);
    border-color: var(--glow);
    color: var(--heading);
}

.btn-primary:hover { background: color-mix(in srgb, var(--glow) 26%, transparent); }
.btn-ghost { border-color: var(--line); color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger:hover { border-color: var(--bad); color: var(--bad); box-shadow: 0 0 14px -6px var(--bad); }
.btn-sm { padding: 0.42rem 0.75rem; font-size: 0.7rem; }
.btn-block { width: 100%; }

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.field > span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

input:not([type='checkbox']):not([type='color']):not([type='file']),
select,
textarea {
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--input-bg);
    color: var(--text);
    font: 500 0.9rem var(--font-mono);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--glow);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent), 0 0 18px -8px var(--glow);
}

input::placeholder, textarea::placeholder { color: var(--dim); }
select option { background: var(--panel-solid); }

input[type='color'] {
    width: 100%;
    height: 40px;
    padding: 3px;
    border: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
}

.check { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--muted); cursor: pointer; font-size: 0.9rem; }

.check input,
.switch input { appearance: none; margin: 0; cursor: pointer; }

.check input {
    width: 14px;
    height: 14px;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    flex: none;
}

.check input::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--glow);
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s;
    box-shadow: 0 0 6px var(--glow);
}

.check input:checked::after { transform: rotate(45deg) scale(1); }

.switch { position: relative; display: inline-block; width: 38px; height: 18px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.switch span {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-strong);
    transition: border-color 0.2s;
}

.switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: var(--dim);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.switch input:checked + span { border-color: var(--glow); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--glow); box-shadow: 0 0 8px var(--glow); }

.row { display: flex; gap: 0.5rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-grid > .panel-head { grid-column: 1 / -1; margin-bottom: 0; }
.form-grid > .panel-head.span-2:not(:first-child) { margin-top: 0.75rem; }
.span-2 { grid-column: 1 / -1; }

.form-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.alert { padding: 0.7rem 0.9rem; border: 1px solid; font-size: 0.9rem; }
.alert-bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }

/* ------------------------------------------------------------------
   Animaciones y loaders
   ------------------------------------------------------------------ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: 0.55; transform: scale(0.85); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.ring-loader {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--glow) 0 16deg, transparent 16deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spin 2.4s linear infinite;
}

.ring-loader.slow { animation-duration: 24s; }

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 0;
    color: var(--muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   Panel principal (dashboard)
   ------------------------------------------------------------------ */

.console-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    border-bottom: 1px solid var(--line-strong);
}

.console-search .prompt { color: var(--accent); font: 500 1.3rem var(--font-mono); padding: 0 0.6rem 0 0.2rem; }

.console-search input[type='search'] {
    border: 0;
    background: transparent;
    font-size: 1rem;
    padding: 0.75rem 0.25rem;
    letter-spacing: 0.04em;
}

.console-search input[type='search']:focus { box-shadow: none; }
.console-search::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 1px;
    background: var(--glow);
    box-shadow: 0 0 10px var(--glow);
    transition: left 0.3s, right 0.3s;
}
.console-search:focus-within::after { left: 0; right: 0; }

.console-search kbd {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--line);
    color: var(--dim);
}

.apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.app {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;   /* contenido arriba, franja del widget anclada abajo */
    align-items: center;
    column-gap: 1rem;
    min-width: 0;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--line);
    /* Mismo fondo que los paneles de Salud: opaco y con el fondo desenfocado detrás */
    background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 5%, transparent), transparent 60%), var(--panel);
    backdrop-filter: blur(6px);
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
    animation: rise 0.4s both;
}

/* Cristal de control */
.app::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 5px;
    height: 5px;
    background: var(--accent);
    transform: rotate(45deg);
    opacity: 0.22;
    transition: opacity 0.25s, box-shadow 0.25s;
}

.app:hover {
    border-color: var(--line-strong);
    background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 11%, transparent), transparent 70%), var(--panel);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow) 12%, transparent), 0 0 28px -12px var(--glow);
}

.app:hover::after { opacity: 1; box-shadow: 0 0 10px var(--accent); }

.app-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
}

.app-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--glow) 22%, transparent);
    transition: transform 0.6s, border-color 0.3s;
}

.app:hover .app-icon::before { transform: rotate(90deg); border-color: color-mix(in srgb, var(--glow) 55%, transparent); }

.app-icon img { width: 24px; height: 24px; object-fit: contain; transition: filter 0.3s, opacity 0.3s; }

.mono-icons .app-icon img { filter: var(--mono-filter); opacity: 0.75; }
.mono-icons .app:hover .app-icon img,
.mono-icons .link-chip:hover img { filter: none; opacity: 1; }

.glyph {
    font: 500 0.85rem var(--font-mono);
    color: var(--glow);
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px var(--glow);
}

.app-body { display: flex; flex-direction: column; min-width: 0; }

.app-name {
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-desc {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-url {
    margin-top: 0.15rem;
    color: var(--dim);
    font: 0.7rem var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Franja del widget: módulo de lectura bajo la tarjeta */
.app-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.85rem;
    font: 0.7rem/1.35 var(--font-mono);
    color: var(--dim);
}

.app > .app-stats {
    grid-column: 1 / -1;
    align-self: end;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0.85rem -1.1rem -0.95rem;
    padding: 0.5rem 0.4rem 0.45rem;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--glow) 30%, transparent) 0 6px, transparent 6px 9px) top / 100% 1px no-repeat,
        color-mix(in srgb, var(--glow) 3%, var(--sunken));
    transition: background 0.25s;
}

.app:hover > .app-stats {
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--glow) 55%, transparent) 0 6px, transparent 6px 9px) top / 100% 1px no-repeat,
        color-mix(in srgb, var(--glow) 6%, var(--sunken));
}

.app-stats .st {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 0.3rem;
    text-align: center;
}

.app > .app-stats .st + .st { border-left: 1px solid var(--line); }

.app-stats b {
    max-width: 100%;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--glow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-stats small {
    max-width: 100%;
    margin-top: 0.05rem;
    font: 600 0.56rem var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-stats .st.s-warn b { color: var(--warn); }
.app-stats .st.s-down b { color: var(--bad); }
.app-stats.loading b { color: var(--dim); letter-spacing: 0.3em; }

/* Error (solo con sesión): una línea discreta en ámbar */
.app > .app-stats.err { display: block; padding: 0.45rem 1.1rem; color: var(--warn); }
.app-stats.err .st { display: block; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; }

.badge-private {
    margin-left: 0.5rem;
    padding: 0 0.3rem;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
    font: 0.6rem var(--font-mono);
    letter-spacing: 0.1em;
    vertical-align: middle;
}

.links-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    transition: border-color 0.2s, color 0.2s;
}

.link-chip:hover { border-color: var(--line-strong); color: var(--text); }
.link-chip img { width: 14px; height: 14px; object-fit: contain; }
.mono-icons .link-chip img { filter: var(--mono-filter); opacity: 0.7; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem; }
.empty p { margin: 0 0 1rem; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------
   Estados
   ------------------------------------------------------------------ */

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--dim);
}

.s-up { --c: var(--ok); }
.s-warn, .s-pending { --c: var(--warn); }
.s-down { --c: var(--bad); }
.s-maintenance { --c: var(--maint); }
.s-unknown { --c: var(--dim); }

.dot.s-up, .dot.s-warn, .dot.s-pending, .dot.s-down, .dot.s-maintenance {
    background: var(--c);
    box-shadow: 0 0 8px var(--c);
}

.dot.s-down { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 60%, transparent); animation: pulse 1.6s infinite; }

/* ------------------------------------------------------------------
   Salud
   ------------------------------------------------------------------ */

.overview {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
}

.overview-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
}

.overview-ring::before,
.overview-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.overview-ring::before {
    inset: 0;
    background: repeating-conic-gradient(var(--c) 0 26deg, transparent 26deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    filter: drop-shadow(0 0 6px var(--c));
    animation: spin 60s linear infinite;
}

.overview-ring::after {
    inset: 12px;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
}

.overview-state {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c);
    text-shadow: 0 0 10px var(--c);
}

.overview-title {
    margin: 0 0 0.3rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--heading);
}

.overview-issues { margin: 0 0 0.75rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.overview-issues li::before { content: '◇ '; color: var(--accent); }

.overview-stats { display: flex; flex-wrap: wrap; gap: 2rem; }
.stat { display: flex; flex-direction: column; }
.stat b { font: 500 1.35rem var(--font-mono); color: var(--text); }
.stat b small { font-size: 0.7em; color: var(--dim); }
.stat span { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

.overview-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; color: var(--dim); align-self: start; }

/* Resumen de Uptime Kuma */
.kuma-panel { padding: 1rem 1.35rem; }

.kuma-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.kstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    color: var(--dim);
}

.kstat + .kstat { border-left: 1px solid var(--line); }
.kstat span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.kstat b { font: 500 1.6rem/1.1 var(--font-mono); }
.kstat.on b { color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.kstat.s-down.on span { color: var(--bad); }

.kuma-panel .monitor-grid { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.kuma-incident { margin-bottom: 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); color: var(--text); }
.kuma-incident b { color: var(--warn); margin-right: 0.4rem; }
.kuma-incident span { color: var(--muted); }

.node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1.25rem; }
.node-grid .panel + .panel { margin-top: 0; }

.node-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.2rem; }
.node-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--heading); }
.node-head .tag { margin-left: auto; }
.node-sub { color: var(--dim); font: 0.72rem var(--font-mono); margin-bottom: 1.1rem; }
.node-error { color: var(--bad); font-size: 0.9rem; }

.tag {
    padding: 0.1rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--c, var(--dim)) 50%, transparent);
    color: var(--c, var(--muted));
    font: 0.65rem var(--font-mono);
    letter-spacing: 0.1em;
}

.gauges { display: flex; justify-content: space-around; gap: 0.5rem; margin-bottom: 1.2rem; }

.gauge {
    --v: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    aspect-ratio: 1;
}

.gauge::before,
.gauge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}

.gauge::before {
    background: repeating-conic-gradient(from -135deg, color-mix(in srgb, var(--glow) 14%, transparent) 0 7deg, transparent 7deg 9deg);
    clip-path: polygon(50% 50%, 0 100%, 0 0, 100% 0, 100% 100%);
}

.gauge::after {
    background: conic-gradient(from -135deg, var(--c) calc(var(--v) * 2.7deg), transparent 0);
    filter: drop-shadow(0 0 4px var(--c));
}

.gauge-val { font: 500 1.05rem var(--font-mono); color: var(--text); line-height: 1; text-align: center; }
.gauge-val small { display: block; margin-top: 0.3rem; font: 600 0.6rem var(--font-ui); letter-spacing: 0.22em; color: var(--muted); }
.gauge.na::after { display: none; }
.gauge.na .gauge-val { color: var(--dim); }

.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; margin-bottom: 1.1rem; }
.kv div { display: flex; flex-direction: column; min-width: 0; }
.kv span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.kv b { font: 400 0.8rem var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.subhead { margin: 1rem 0 0.5rem; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.bar-row { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 0.75rem; align-items: center; font-size: 0.85rem; margin-bottom: 0.4rem; }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .num { font: 0.72rem var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }

.bar {
    --v: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--glow) 12%, transparent) 0 6px, transparent 6px 8px);
    position: relative;
}

.bar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--v) * 1%);
    background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 8px);
    filter: drop-shadow(0 0 3px var(--c));
}

.vms { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.3rem 0.9rem; }
.vm { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; min-width: 0; }
.vm .mono { color: var(--dim); }
.vm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm.off { color: var(--dim); }

/* ------------------------------------------------------------------
   Login
   ------------------------------------------------------------------ */

.login-wrap { flex: 1; display: grid; place-items: center; padding: 2rem 1rem; }
.login-panel { width: min(400px, 100%); display: flex; flex-direction: column; gap: 1rem; padding: 2rem; }
.login-emblem { display: grid; place-items: center; }
.login-emblem .ring-loader { width: 64px; height: 64px; }
.login-title { margin: 0; text-align: center; font-size: 1.1rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--glow); }
.login-sub { margin: -0.6rem 0 0.4rem; text-align: center; color: var(--dim); }
.login-back { text-align: center; color: var(--dim); font-size: 0.8rem; letter-spacing: 0.1em; }
.login-back:hover { color: var(--text); }

/* ------------------------------------------------------------------
   Administración
   ------------------------------------------------------------------ */

.page-title {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
}

.tab-panel.other-group { display: none !important; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }

.tab {
    position: relative;
    padding: 0.7rem 1rem;
    border: 0;
    background: none;
    color: var(--muted);
    font: 600 0.78rem var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
}

.tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--glow);
    box-shadow: 0 0 8px var(--glow);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--glow); }
.tab.active::after { transform: scaleX(1); }

.tab-panel { display: none; animation: rise 0.3s both; }
.tab-panel.active { display: block; }

.tree { display: flex; flex-direction: column; gap: 0.75rem; }

.tree-section { border: 1px solid var(--line); }
.tree-section.drag-over { border-color: var(--glow); }

.tree-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem;
    min-width: 0;
}

.tree-section > .tree-row {
    background: var(--glow-soft);
    border-bottom: 1px solid var(--line);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--glow);
}

.tree-apps { min-height: 2.4rem; padding: 0.3rem 0; }
.tree-apps .tree-row + .tree-row { border-top: 1px solid color-mix(in srgb, var(--glow) 7%, transparent); }
.tree-apps .empty-drop { padding: 0.6rem 1rem; color: var(--dim); font-size: 0.85rem; }

.tree-row .handle {
    cursor: grab;
    color: var(--dim);
    font-family: var(--font-mono);
    letter-spacing: -0.2em;
    user-select: none;
}

.tree-row .app-icon { width: 30px; height: 30px; }
.tree-row .app-icon::before { display: none; }
.tree-row .app-icon img { width: 16px; height: 16px; }
.tree-row .glyph { font-size: 0.65rem; }
.tree-row .meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tree-row .meta b { font-weight: 600; letter-spacing: 0.06em; }
.tree-row .meta small { color: var(--dim); font: 0.72rem var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tools { display: flex; gap: 0.35rem; margin-left: auto; flex: none; }
.tree-row.dragging { opacity: 0.35; }
.tree-row.hidden-app .meta { opacity: 0.45; }

/* Configuración del widget en el formulario de app */
.widget-box {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--line);
    background: var(--sunken);
}

.widget-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.widget-head span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--glow); }
.widget-head small { color: var(--dim); font-size: 0.8rem; }
.widget-help { margin: 0; font-size: 0.82rem; }
.widget-result { padding-top: 0.6rem; border-top: 1px solid var(--line); }
.widget-result .app-stats { display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 0.5rem 0.4rem; border: 1px solid var(--line); background: var(--sunken); }
.widget-result .app-stats .st + .st { border-left: 1px solid var(--line); }
.widget-result details { margin-top: 0.6rem; }
.widget-result summary { cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.widget-result .test-output { margin-top: 0.5rem; }

.node-forms { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }

.node-form {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 0.9rem;
    min-width: 0;
}

.node-form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.node-form .test-output { grid-column: 1 / -1; }
.grow { flex: 1; }

.test-output {
    margin: 0;
    padding: 0.8rem;
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--line);
    background: var(--sunken);
    color: var(--muted);
    font: 0.72rem/1.5 var(--font-mono);
    white-space: pre-wrap;
    word-break: break-all;
}

.test-output .ok { color: var(--ok); }
.test-output .bad { color: var(--bad); }

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--backdrop);
    backdrop-filter: blur(4px);
}

.modal-panel { width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: var(--panel-solid); animation: rise 0.2s both; }

.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; }

.toast {
    padding: 0.7rem 1rem;
    min-width: 220px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--c, var(--glow));
    background: var(--panel-solid);
    font-size: 0.9rem;
    animation: rise 0.25s both;
}

.toast.bad { --c: var(--bad); }
.toast.ok { --c: var(--ok); }

/* ------------------------------------------------------------------
   Selector de tema
   ------------------------------------------------------------------ */

.theme-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line);
}

.theme-switch button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 26px;
    border: 0;
    background: none;
    color: var(--dim);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.theme-switch button:hover { color: var(--text); }
.theme-switch button.active { color: var(--glow); background: var(--glow-soft); }
.theme-switch button.active .mdi { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--glow) 70%, transparent)); }
.theme-switch .mdi { width: 15px; height: 15px; }

/* ------------------------------------------------------------------
   Menú de usuario (avatar)
   ------------------------------------------------------------------ */

.avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: radial-gradient(circle, var(--glow-soft), transparent 70%);
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.avatar::-webkit-details-marker { display: none; }

.avatar::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--glow) 25%, transparent);
    transition: transform 0.6s, border-color 0.3s;
}

.avatar:hover, .user-menu[open] .avatar, .avatar.active {
    border-color: var(--glow);
    color: var(--glow);
    box-shadow: 0 0 18px -6px var(--glow);
}

.avatar:hover::before, .user-menu[open] .avatar::before { transform: rotate(90deg); border-color: color-mix(in srgb, var(--glow) 55%, transparent); }

.avatar-ini { font: 600 0.78rem var(--font-mono); letter-spacing: 0.04em; color: var(--glow); text-shadow: 0 0 8px var(--glow); }

/* Silueta de usuario dibujada con CSS (sin sesión) */
.avatar-person { position: relative; width: 16px; height: 18px; }
.avatar-person::before,
.avatar-person::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 1.5px solid currentColor; }
.avatar-person::before { top: 0; width: 8px; height: 8px; border-radius: 50%; }
.avatar-person::after { bottom: 0; width: 16px; height: 7px; border-radius: 8px 8px 1px 1px; border-bottom: 0; }

.user-menu { position: relative; }

.menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 30;
    width: 240px;
    padding: 0.5rem 0;
    border: 1px solid var(--line-strong);
    background: var(--panel-solid);
    box-shadow: 0 18px 40px -12px var(--shadow), 0 0 30px -18px var(--glow);
    animation: rise 0.18s both;
}

.menu-pop::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--glow);
    border-left: 1px solid var(--glow);
}

.menu-head { display: flex; flex-direction: column; padding: 0.5rem 1rem 0.75rem; border-bottom: 1px solid var(--line); margin-bottom: 0.4rem; }
.menu-head b { font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--heading); }
.menu-head small { font: 0.68rem var(--font-mono); color: var(--dim); }

.menu-label {
    display: block;
    padding: 0.45rem 1rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--glow);
}

.menu-item {
    display: block;
    width: 100%;
    padding: 0.42rem 1rem 0.42rem 1.6rem;
    border: 0;
    background: none;
    color: var(--muted);
    font: 500 0.9rem var(--font-ui);
    letter-spacing: 0.06em;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 4px;
    height: 4px;
    background: var(--dim);
    transform: translateY(-50%) rotate(45deg);
    transition: background 0.2s;
}

.menu-item:hover { color: var(--text); background: var(--glow-soft); }
.menu-item:hover::before { background: var(--accent); }
.menu-foot { margin: 0.4rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--line); }
.menu-logout:hover { color: var(--bad); }
.menu-logout:hover::before { background: var(--bad); }

/* Foto de avatar */
.avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; }
.avatar.logged:has(.avatar-img) { overflow: visible; }
.menu-head { flex-direction: row; align-items: center; gap: 0.75rem; }
.menu-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); overflow: hidden; }
.menu-avatar .avatar-ini { font-size: 0.7rem; }
.menu-who { display: flex; flex-direction: column; min-width: 0; }

/* ------------------------------------------------------------------
   Perfil
   ------------------------------------------------------------------ */

.profile { max-width: 760px; }

.profile-card { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

.profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: radial-gradient(circle, var(--glow-soft), transparent 70%);
}

.profile-avatar::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--glow) 0 22deg, transparent 22deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: 0.6;
    animation: spin 60s linear infinite;
}

.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar .avatar-ini { font-size: 2rem; }
.profile-info { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.profile-info h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--heading); }
.profile-info p { margin: -0.4rem 0 0.3rem; color: var(--dim); }
.profile-info .hint { margin: 0; font-size: 0.78rem; }

/* Editor de encuadre */
.crop-panel { width: min(420px, 100%); }

.crop-stage {
    position: relative;
    width: min(320px, 100%);
    aspect-ratio: 1;
    margin: 0.25rem auto 0;
    overflow: hidden;
    background: var(--sunken);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.crop-stage.dragging { cursor: grabbing; }
.crop-stage:focus-visible { outline: 1px solid var(--glow); outline-offset: 3px; }

.crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    pointer-events: none;
}

/* Círculo visible; el resto queda oscurecido */
.crop-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--glow);
    box-shadow: 0 0 0 999px rgba(1, 8, 14, 0.62), 0 0 18px -4px var(--glow);
    pointer-events: none;
}

.crop-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--glow) 30%, transparent);
}

.crop-zoom { display: flex; align-items: center; gap: 0.75rem; width: min(320px, 100%); margin: 1rem auto 0; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--glow); }
.crop-hint { text-align: center; margin: 0.6rem 0 0; font-size: 0.8rem; }

/* Usuarios (Configuración) */
.user-list { border-top: 1px solid var(--line); margin-bottom: 1rem; }
.user-row { display: grid; grid-template-columns: auto minmax(0, 1.3fr) 9.5rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--line); }
.user-av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); overflow: hidden; }
.user-av img { width: 100%; height: 100%; object-fit: cover; }
.user-av .avatar-ini { font-size: 0.7rem; }
.user-name { display: flex; flex-direction: column; min-width: 0; }
.user-name b { letter-spacing: 0.06em; }
.user-name small { color: var(--dim); font-size: 0.66rem; }
.user-row select, .user-row input { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
.user-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10rem auto; gap: 0.8rem; align-items: end; }
@media (max-width: 900px) { .user-row { grid-template-columns: auto 1fr; } .user-new { grid-template-columns: 1fr 1fr; } }

/* Dispositivos con sesión (Perfil) y acceso desde Internet (Configuración) */
.session-list { border-top: 1px solid var(--line); }
.session-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--line); }
.session-icon { width: 22px; height: 22px; color: var(--glow); }
.session-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.session-info b { letter-spacing: 0.05em; }
.session-info small { color: var(--dim); font-size: 0.7rem; }
.net-detect { padding: 0.5rem 0.7rem; border: 1px dashed var(--line); font-size: 0.78rem; color: var(--muted); }
.net-detect b { color: var(--glow); font-weight: 500; }
.login-remember { font-size: 0.82rem; }

/* Insignia de persona / agente */
.actor { display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle; }
.actor-face { width: 18px; height: 18px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); overflow: hidden; background: var(--glow-soft); font: 600 0.5rem var(--font-mono); color: var(--glow); }
.actor-face img { width: 100%; height: 100%; object-fit: cover; }
.actor.agent .actor-face { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.actor.agent .actor-face .mdi { width: 12px; height: 12px; }
.actor-name { font-size: 0.8rem; color: var(--text); }
.actor.gone { opacity: 0.55; }

/* ------------------------------------------------------------------
   Iconos MDI (máscara coloreada con la luz de la consola)
   ------------------------------------------------------------------ */

.mdi {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--mdi) center / contain no-repeat;
            mask: var(--mdi) center / contain no-repeat;
}

.section-title .sec-ico { width: 18px; height: 18px; color: var(--glow); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--glow) 70%, transparent)); }
.section-title.has-icon::before { display: none; }
.tree-row .sec-ico { width: 18px; height: 18px; color: var(--glow); }
.sec-ico-empty { width: 7px; height: 7px; margin: 0 5px; border: 1px solid var(--accent); transform: rotate(45deg); flex: none; }

/* ------------------------------------------------------------------
   Selector de iconos
   ------------------------------------------------------------------ */

.picker-row { align-items: center; }
.picker-row .app-icon { width: 40px; height: 40px; }
.picker-row .app-icon::before { display: none; }
.picker-row .app-icon .mdi { width: 20px; height: 20px; color: var(--glow); }
.picker-status { min-height: 1em; font: 0.72rem var(--font-mono); color: var(--muted); }
.picker-source { font-size: 0.75rem; color: var(--dim); }
.picker-source a { color: var(--muted); border-bottom: 1px dotted var(--dim); }
.picker-source a:hover { color: var(--glow); }

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 0.35rem;
    max-height: 250px;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--line);
    background: var(--sunken);
}

.pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.55rem 0.3rem 0.45rem;
    border: 1px solid transparent;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pick:hover { border-color: var(--line-strong); background: var(--glow-soft); color: var(--text); }
.pick img { width: 28px; height: 28px; object-fit: contain; }
.pick .mdi { width: 26px; height: 26px; color: var(--glow); }
.pick span:last-child { max-width: 100%; font: 0.62rem var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .glyph { font-size: 0.7rem; }

/* ------------------------------------------------------------------
   Monitores compactos (muchos monitores / modo /metrics)
   ------------------------------------------------------------------ */

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.4rem;
}

.chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    font-size: 0.88rem;
    transition: background 0.2s, border-color 0.2s;
}

.chip:hover { background: var(--glow-soft); border-color: var(--line-strong); }
.chip.s-down { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.chip.s-pending, .chip.s-maintenance { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.03em; }
.chip .num { font: 0.7rem var(--font-mono); color: var(--dim); white-space: nowrap; }

/* ------------------------------------------------------------------
   Espacio de trabajo (Notas y Tareas): barra lateral + panel principal
   ------------------------------------------------------------------ */

.workspace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.workspace .panel + .panel { margin-top: 0; }

/* Notas: más ancho para el texto (árbol + nota + índice) */
.page-notes .shell { max-width: 1680px; }
.page-notes .workspace { grid-template-columns: 280px minmax(0, 1fr); }

.ws-side {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-height: calc(100vh - 120px);
    padding: 1rem;
}

.ws-side-head { display: flex; gap: 0.5rem; }
.ws-side-head .btn { font-size: 1rem; padding: 0.4rem 0.8rem; }
.ws-list { display: flex; flex-direction: column; gap: 0.3rem; overflow-y: auto; margin: 0 -0.3rem; padding: 0 0.3rem; }
.ws-none { padding: 1rem 0.2rem; }

.ws-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    background: none;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ws-item:hover { background: var(--glow-soft); }
.ws-item.active { background: var(--glow-soft); border-color: var(--line); border-left-color: var(--glow); }
.ws-item-title { font-weight: 600; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item-title .pin { color: var(--accent); margin-right: 0.4rem; font-size: 0.7rem; text-shadow: 0 0 6px var(--accent); }
.ws-item-snippet { color: var(--muted); font-size: 0.82rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-item-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; font: 0.66rem var(--font-mono); color: var(--dim); }
.ws-item-meta span { color: color-mix(in srgb, var(--glow) 65%, var(--dim)); }
.ws-item-meta time { margin-left: auto; }

.ws-main { min-height: calc(100vh - 220px); display: flex; flex-direction: column; }
.ws-back { display: none; }

.ws-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--muted);
    text-align: center;
    letter-spacing: 0.08em;
}

.ws-empty .ring-loader { width: 54px; height: 54px; opacity: 0.6; }
.ws-empty.small { padding: 2.5rem 0; flex: none; }
.ws-empty p { margin: 0; }

.tag-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tag-filter:empty { display: none; }

.tag {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font: 0.68rem var(--font-mono);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.tag small { color: var(--dim); }
.tag:hover { color: var(--text); border-color: var(--line-strong); }
.tag.active { color: var(--glow); border-color: var(--glow); background: var(--glow-soft); }

/* ---------- Árbol de colecciones (Notas) ---------- */

.note-tree { gap: 1px; }

.tree-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.7rem 0 0.25rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--dim);
}

.tree-label:first-child { margin-top: 0; }

.tree-add {
    width: 22px;
    height: 22px;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font: 500 0.9rem/1 var(--font-mono);
    cursor: pointer;
}

.tree-add:hover { color: var(--glow); border-color: var(--glow); }

.tree-folder, .tree-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 32px;
    padding: 0.3rem 0.4rem 0.3rem calc(0.4rem + var(--d, 0) * 1rem);
    border: 1px solid transparent;
    background: none;
    color: var(--text);
    font: 500 0.9rem var(--font-ui);
    letter-spacing: 0.03em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.tree-folder:hover, .tree-note:hover { background: var(--glow-soft); }

.tf-chevron {
    width: 0;
    height: 0;
    flex: none;
    margin: 0 0.15rem;
    border-left: 5px solid var(--dim);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s;
}

.tree-folder.open .tf-chevron { transform: rotate(90deg); border-left-color: var(--glow); }
.tf-icon { width: 17px; height: 17px; color: var(--glow); opacity: 0.85; }
.tree-none .tf-icon { color: var(--dim); }
.tf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tf-count { font: 0.66rem var(--font-mono); color: var(--dim); }

.tf-actions { display: none; gap: 2px; }
.tree-folder:hover .tf-actions { display: inline-flex; }
.tree-folder:hover .tf-count { display: none; }

.tf-actions button {
    width: 22px;
    height: 22px;
    border: 0;
    background: none;
    color: var(--muted);
    font: 500 0.9rem/1 var(--font-mono);
    cursor: pointer;
}

.tf-actions button:hover { color: var(--glow); background: var(--glow-soft); }
input.tf-rename { flex: 1; min-width: 0; padding: 0.15rem 0.4rem; font: 600 0.88rem var(--font-ui); }

/* Notas dentro del árbol: flecha si tienen subnotas, punto si no (alineadas con las colecciones) */
.tree-note { color: var(--muted); font-weight: 500; }
.tree-note.open > .tf-chevron { transform: rotate(90deg); border-left-color: var(--glow); }
.tree-note .tf-chevron { cursor: pointer; padding: 0; }
.tn-dot { width: 4px; height: 4px; flex: none; margin: 0 0.35rem 0 0.4rem; background: var(--dim); transform: rotate(45deg); opacity: 0.7; }
.tree-note.active .tn-dot { background: var(--glow); opacity: 1; }
.tree-note:hover .tf-actions { display: inline-flex; }
.tree-note:hover .tf-count { display: none; }
.tree-note .tn-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-note .pin { color: var(--accent); font-size: 0.6rem; text-shadow: 0 0 6px var(--accent); }
.tree-note.active { color: var(--heading); background: var(--glow-soft); border-color: var(--line); box-shadow: inset 2px 0 0 var(--glow); }
.tree-empty { margin: 0; padding: 0.2rem 0.4rem 0.3rem calc(1.3rem + var(--d, 0) * 1rem); font-size: 0.78rem; color: var(--dim); font-style: italic; }
.tree-empty b { color: var(--glow); font-style: normal; }

/* Arrastrar y soltar */
.tree-folder.drop, .tree-root.drop { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 14%, transparent); box-shadow: 0 0 14px -6px var(--glow); }
/* Línea de luz: se soltará antes o después de esta fila */
.tree-folder.drop-before, .tree-note.drop-before { box-shadow: inset 0 2px 0 var(--glow), 0 -2px 8px -4px var(--glow); }
.tree-folder.drop-after, .tree-note.drop-after { box-shadow: inset 0 -2px 0 var(--glow), 0 2px 8px -4px var(--glow); }
.tree-note[draggable='true'], .tree-folder[draggable='true'] { -webkit-user-drag: element; user-select: none; }
.tree-note:focus-visible { outline: 1px solid var(--glow); outline-offset: -1px; }
.dragging { opacity: 0.4; }
.in-folder { color: var(--muted) !important; }
.in-folder::before { content: '▸ '; color: var(--dim); }

/* Menú flotante de colección y selector de icono */
.folder-pop {
    position: absolute;
    z-index: 25;
    width: 240px;
    padding: 0.35rem;
    border: 1px solid var(--line-strong);
    background: var(--panel-solid);
    box-shadow: 0 14px 30px -12px var(--shadow), 0 0 22px -14px var(--glow);
    animation: rise 0.15s both;
}

.folder-pop > button {
    display: block;
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 0;
    background: none;
    color: var(--text);
    font: 500 0.88rem var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.folder-pop > button:hover { background: var(--glow-soft); color: var(--glow); }
.folder-pop > button.danger:hover, .folder-pop > button[data-armed='1'] { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.folder-pop .ip-search { margin-bottom: 0.4rem; font-size: 0.8rem; }
.ip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: 220px; overflow-y: auto; }

.ip-grid button {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    background: none;
    color: var(--glow);
    cursor: pointer;
}

.ip-grid button:hover { border-color: var(--line-strong); background: var(--glow-soft); }
.ip-grid .mdi { width: 20px; height: 20px; }
.ip-grid .hint { grid-column: 1 / -1; font-size: 0.8rem; margin: 0.4rem; }

/* Ruta de la nota (colección / notas padre) */
.note-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: -0.2rem; font-size: 0.78rem; color: var(--dim); }
.note-crumbs a { color: var(--muted); }
.note-crumbs a:hover { color: var(--glow); }
.crumb-folder { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); }
.crumb-folder .mdi { width: 14px; height: 14px; color: var(--glow); }
.crumb-sep { color: var(--dim); }

/* Subnotas de la nota abierta */
.note-children { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.4rem; }
.note-child-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.4rem; }
.note-child-list:empty { display: none; }
.nc-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); background: var(--sunken); color: var(--text); font-size: 0.88rem; transition: border-color 0.15s, background 0.15s; }
.nc-item:hover { border-color: var(--line-strong); background: var(--glow-soft); color: var(--heading); }
.nc-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-icon { width: 17px; height: 17px; color: var(--glow); }
.nc-item small { color: var(--dim); }

/* Colección de la nota en el editor */
.note-meta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.note-meta-row .note-tags { flex: 1; min-width: 160px; }
.note-folder-field { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--glow); }
.note-folder-field .mdi { width: 16px; height: 16px; }
#noteFolder { width: auto; max-width: 220px; padding: 0.3rem 0.5rem; font-size: 0.78rem; }
.note-author { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-left: auto; font-size: 0.72rem; color: var(--dim); }
.note-author .actor-name { font-size: 0.72rem; color: var(--muted); }
.ws-item-meta .actor-face { width: 15px; height: 15px; font-size: 0.42rem; }

/* ---------- Notas ---------- */

.note-form { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
.note-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

input.note-title {
    flex: 1;
    min-width: 180px;
    padding: 0.3rem 0;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font: 700 1.3rem var(--font-ui);
    letter-spacing: 0.1em;
    color: var(--heading);
}

input.note-title:focus { box-shadow: none; border-bottom-color: var(--glow); }
/* Modo vista: título y etiquetas como texto, sin aspecto de campo editable */
.note-form.viewing input.note-title,
.note-form.viewing input.note-tags { cursor: default; border-bottom-color: transparent; }
.note-form.viewing input.note-title:focus,
.note-form.viewing input.note-tags:focus { border-bottom-color: transparent; }
.note-form.viewing input.note-tags:placeholder-shown { visibility: hidden; }
.note-mode { min-width: 5.5rem; }

.icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: none;
    color: var(--dim);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); text-shadow: 0 0 8px var(--accent); }

.seg { display: inline-flex; border: 1px solid var(--line); }

.seg button {
    padding: 0.4rem 0.75rem;
    border: 0;
    background: none;
    color: var(--muted);
    font: 600 0.68rem var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
}

.seg button.active { color: var(--glow); background: var(--glow-soft); }

input.note-tags {
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1px dashed var(--line);
    background: none;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--glow) 70%, var(--text));
}

input.note-tags:focus { box-shadow: none; border-bottom-color: var(--glow); }

textarea.note-body {
    flex: 1;
    margin-top: -0.6rem; /* pegado a la barra de formato */
    min-height: 55vh;
    resize: vertical;
    padding: 1rem;
    line-height: 1.6;
    font-size: 0.88rem;
    tab-size: 4;
}

.note-view { flex: 1; min-height: 55vh; padding: 0.5rem 0.2rem; overflow-wrap: anywhere; cursor: text; }
.note-status { align-self: flex-end; color: var(--dim); font-size: 0.7rem; }

/* Markdown renderizado con el estilo de la consola */
.md { line-height: 1.65; color: var(--text); font-size: 0.97rem; }
.md > :first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.4em 0 0.5em; font-weight: 700; letter-spacing: 0.12em; color: var(--heading); }
.md h1 { font-size: 1.45rem; text-transform: uppercase; letter-spacing: 0.2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); }
.md h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--glow); }
.md h3 { font-size: 1.02rem; }
.md p { margin: 0.6em 0; }
.md a { color: var(--glow); border-bottom: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); }
.md strong { color: var(--heading); }
.md code { padding: 0.1em 0.35em; border: 1px solid var(--line); background: var(--sunken); font: 0.85em var(--font-mono); color: color-mix(in srgb, var(--glow) 60%, var(--text)); }
.md pre { padding: 0.9rem 1rem; border: 1px solid var(--line); border-left: 2px solid var(--glow); background: var(--sunken); overflow-x: auto; }
.md pre code { padding: 0; border: 0; background: none; color: var(--text); }
.md blockquote { margin: 0.8em 0; padding: 0.2em 1em; border-left: 2px solid var(--accent); color: var(--muted); }
.md ul, .md ol { padding-left: 1.4em; }
.md li { margin: 0.2em 0; }
.md li::marker { color: var(--glow); }
.md hr { border: 0; height: 1px; margin: 1.5em 0; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.md table { border-collapse: collapse; margin: 0.8em 0; font-size: 0.9em; }
.md th, .md td { padding: 0.35em 0.7em; border: 1px solid var(--line); }
.md th { color: var(--glow); font-weight: 600; letter-spacing: 0.06em; background: var(--glow-soft); }
.md li:has(> input[type='checkbox']) { list-style: none; margin-left: -1.3em; }

.md input[type='checkbox'] {
    appearance: none;
    width: 13px;
    height: 13px;
    margin: 0 0.5em 0 0;
    vertical-align: -1px;
    border: 1px solid var(--line-strong);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
}

.md input[type='checkbox']::after { content: ''; width: 5px; height: 5px; background: var(--glow); transform: rotate(45deg) scale(0); transition: transform 0.15s; box-shadow: 0 0 5px var(--glow); }
.md input[type='checkbox']:checked::after { transform: rotate(45deg) scale(1); }
.md li:has(> input:checked) { color: var(--dim); text-decoration: line-through; }

/* Imágenes dentro de las notas */
.md img { max-width: 100%; height: auto; margin: 0.4em 0; border: 1px solid var(--line); cursor: zoom-in; }
.md img[alt^='Subiendo'] { display: none; }
textarea.note-body.dropping, .note-view.dropping { outline: 1px dashed var(--glow); outline-offset: -6px; background: color-mix(in srgb, var(--glow) 6%, var(--input-bg)); }

/* Adjuntos de la nota */
.note-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.note-attachments:empty { display: none; }
.na-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); margin-right: 0.3rem; }

.na-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 260px;
    padding: 0.2rem 0.3rem 0.2rem 0.25rem;
    border: 1px solid var(--line);
    background: var(--sunken);
    font-size: 0.78rem;
}

.na-item img { width: 26px; height: 26px; object-fit: cover; border: 1px solid var(--line); }
.na-icon { width: 20px; height: 20px; color: var(--glow); }
.na-item a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.na-item a:hover { color: var(--glow); }
.na-item small { font: 0.64rem var(--font-mono); color: var(--dim); white-space: nowrap; }
.na-item button { border: 0; background: none; color: var(--dim); cursor: pointer; padding: 0 0.2rem; font: 0.75rem var(--font-mono); }
.na-item button:hover { color: var(--glow); }
.na-item button[data-att-del]:hover, .na-item button[data-armed='1'] { color: var(--bad); }

/* Tareas vinculadas a la nota */
.note-tasks { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.4rem; }
.note-tasks-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.note-tasks-head span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--glow); }
.note-tasks-head small { color: var(--dim); }
.nt-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.3rem; border-bottom: 1px solid color-mix(in srgb, var(--glow) 7%, transparent); font-size: 0.9rem; }
.nt-item .task-check { width: 13px; height: 13px; }
.nt-item.done .task-check::after { transform: scale(1); }
.nt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.nt-title:hover { color: var(--glow); }
.nt-item.done .nt-title { color: var(--dim); text-decoration: line-through; }
.nt-item .chip-due, .nt-item .chip-list { font: 0.64rem var(--font-mono); }
.nt-none { margin: 0.3rem 0; font-size: 0.8rem; }
.note-task-add { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.25rem 0.3rem 0.25rem 0.7rem; border: 1px dashed var(--line); }
.note-task-add:focus-within { border-color: var(--line-strong); border-style: solid; }
#noteTaskAdd #ntTitle { flex: 1 1 auto; width: auto; min-width: 0; border: 0; background: none; padding: 0.35rem 0.2rem; font-size: 0.85rem; }
#noteTaskAdd #ntTitle:focus { box-shadow: none; }
#noteTaskAdd select { flex: 0 0 auto; width: 8rem; padding: 0.3rem 0.4rem; font-size: 0.72rem; }

/* ---------- Tareas ---------- */

.side-group { display: flex; flex-direction: column; gap: 0.15rem; }
.side-group + .side-group { padding-top: 0.8rem; border-top: 1px solid var(--line); }
.side-label { padding: 0 0.6rem 0.35rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); }
.side-none { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

.side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-left: 2px solid transparent;
    background: none;
    color: var(--muted);
    font: 500 0.92rem var(--font-ui);
    letter-spacing: 0.05em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.side-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item small { font: 0.7rem var(--font-mono); color: var(--dim); }
.side-item small.alert { color: var(--bad); }
.side-item:hover { background: var(--glow-soft); color: var(--text); }
.side-item.active { color: var(--glow); background: var(--glow-soft); border-left-color: var(--glow); }
/* Lista general: marcada con un pequeño cristal y separada de las listas de proyecto */
.side-item.default span::after { content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 0.5rem; vertical-align: 2px; background: var(--accent); transform: rotate(45deg); opacity: 0.8; }
.side-item.default:not(:only-child) { margin-bottom: 0.35rem; }

.side-add input { margin-top: 0.3rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; border-style: dashed; }

.tasks-main { gap: 1rem; }
.tasks-head { display: flex; align-items: center; gap: 0.75rem; }
.tasks-head h1 { margin: 0; font-size: 1.15rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--heading); }
.tasks-head .count { color: var(--dim); }
.rename-input { font-size: 1rem; padding: 0.3rem 0.5rem; }

.quick-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
    border: 1px solid var(--line);
    background: var(--sunken);
}

.quick-add:focus-within { border-color: var(--line-strong); }
.qa-mark { color: var(--glow); }
/* Con id para ganar a la regla general de inputs (width: 100%): el título se lleva todo el espacio libre */
#quickAdd #qaTitle { flex: 1 1 auto; width: auto; min-width: 0; border: 0; background: none; padding: 0.45rem 0.2rem; font-size: 0.95rem; }
#quickAdd #qaTitle:focus { box-shadow: none; }
#quickAdd select,
#quickAdd input[type='date'] { flex: 0 0 auto; padding: 0.4rem 0.45rem; font-size: 0.75rem; }
#quickAdd select { width: 6.8rem; }
#quickAdd input[type='date'] { width: 8.6rem; }
#quickAdd .btn { flex: 0 0 auto; }

.task-list, .task-done { display: flex; flex-direction: column; }
.task { border-bottom: 1px solid var(--line); transition: background 0.15s, opacity 0.25s; }
.task:hover { background: var(--glow-soft); }
.task.open { background: var(--glow-soft); }
.task-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.5rem; cursor: pointer; }

.task-check {
    position: relative;
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--line-strong);
    background: none;
    transform: rotate(45deg);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.task-check:hover { border-color: var(--glow); box-shadow: 0 0 10px -3px var(--glow); }
.task-check::after { content: ''; position: absolute; inset: 3px; background: var(--glow); transform: scale(0); transition: transform 0.2s; box-shadow: 0 0 8px var(--glow); }
.task.done .task-check::after, .task.checking .task-check::after { transform: scale(1); }
.task.checking { opacity: 0.4; }

.task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.03em; }
.task.done .task-title { color: var(--dim); text-decoration: line-through; }
.task-meta { display: flex; align-items: center; gap: 0.5rem; flex: none; font: 0.68rem var(--font-mono); }

.prio { letter-spacing: -1px; }
.prio.p1 { color: var(--dim); }
.prio.p2 { color: var(--accent); }
.prio.p3 { color: var(--bad); text-shadow: 0 0 6px color-mix(in srgb, var(--bad) 50%, transparent); }

.chip-due, .chip-list { padding: 0.05rem 0.4rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip-due.today { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.chip-due.late { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.chip-list { color: color-mix(in srgb, var(--glow) 65%, var(--dim)); border-style: dashed; }
.chip-notes { color: var(--dim); }
.chip-linked { color: color-mix(in srgb, var(--glow) 70%, var(--dim)); }
.task-meta .actor-face { width: 20px; height: 20px; }

/* Estados: Nuevo (gris) · Trabajando (cian, late) · En pausa (ámbar) · Hecho (verde) */
.st-new { --st: var(--muted); }
.st-doing { --st: var(--glow); }
.st-paused { --st: var(--warn); }
.st-done { --st: var(--ok); }

.status-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--st) 45%, transparent);
    background: color-mix(in srgb, var(--st) 8%, transparent);
}

.status-pick::before {
    content: '';
    position: absolute;
    left: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--st);
    box-shadow: 0 0 6px var(--st);
    pointer-events: none;
}

.status-pick.st-doing::before { animation: breathe 1.6s ease-in-out infinite; }

/* Especificidad alta para ganar a la regla general de campos */
.task-meta .status-pick select[data-status] {
    width: auto;
    padding: 0.05rem 0.45rem 0.05rem 1.05rem;
    border: 0;
    background: none;
    color: var(--st);
    font: 500 0.66rem var(--font-mono);
    letter-spacing: 0.04em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.task-meta .status-pick select[data-status]:focus { box-shadow: none; outline: 1px solid var(--st); }
.task.st-row-doing { box-shadow: inset 2px 0 0 var(--glow); }
.task.st-row-paused .task-title { color: var(--muted); }
.status-label { padding: 0.02rem 0.4rem; border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); color: var(--st); font: 0.62rem var(--font-mono); white-space: nowrap; }
.unassigned { color: var(--dim); }
.task-authors { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.72rem; }
.task-authors .actor-name { font-size: 0.72rem; }

/* Notas vinculadas en el editor de la tarea */
.task-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.tl-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }
.tl-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.2rem 0.15rem 0.5rem; border: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); font-size: 0.8rem; }
.tl-chip a { color: var(--glow); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-chip button { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 0.7rem; }
.tl-chip button:hover { color: var(--bad); }
.task-links .tl-add input[data-link-note] { width: 200px; padding: 0.25rem 0.5rem; font-size: 0.78rem; border-style: dashed; }

.task-edit {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem 1rem;
    padding: 0.4rem 0.5rem 1rem 2.4rem;
    animation: rise 0.2s both;
}

.task-edit .span-2 { grid-column: 1 / -1; }
.task-edit textarea { resize: vertical; font-size: 0.85rem; }
.task-edit-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.task-edit-foot .hint { margin: 0; font-size: 0.7rem; }

.done-toggle {
    margin-top: 1rem;
    padding: 0.4rem 0.2rem;
    border: 0;
    background: none;
    color: var(--muted);
    font: 600 0.72rem var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.done-toggle small { font-family: var(--font-mono); color: var(--dim); margin-left: 0.3rem; }

/* ---------- API keys (Perfil) ---------- */

.mcp-url { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); background: var(--sunken); }
.mcp-url span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.mcp-url code, .key-secret code { flex: 1; min-width: 0; font: 0.82rem var(--font-mono); color: var(--glow); overflow-wrap: anywhere; }

.key-list { border-top: 1px solid var(--line); margin-bottom: 1rem; }
.key-none { padding: 0.8rem 0; margin: 0; }

.key-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.2rem;
    border-bottom: 1px solid var(--line);
}

.key-name { display: flex; flex-direction: column; min-width: 0; }
.key-name b { letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-name code { font: 0.7rem var(--font-mono); color: var(--dim); }
.key-scopes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.scope { padding: 0.05rem 0.45rem; border: 1px solid var(--line); font: 0.66rem var(--font-mono); color: var(--muted); }
.scope.write { color: var(--glow); border-color: color-mix(in srgb, var(--glow) 45%, transparent); }
.key-used { font-size: 0.66rem; color: var(--dim); line-height: 1.4; }

.key-new { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.8rem; align-items: end; }

.key-reveal {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.2rem;
    padding: 1rem;
    border: 1px solid var(--glow);
    background: color-mix(in srgb, var(--glow) 6%, var(--sunken));
    box-shadow: 0 0 24px -12px var(--glow);
    animation: rise 0.25s both;
}

.key-warn { margin: 0; color: var(--accent); }
.key-warn b { color: var(--heading); }
.key-secret { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line-strong); background: var(--sunken); }
.snippet { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; align-items: start; }
.snippet span { grid-column: 1 / -1; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.snippet pre { margin: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--line); background: var(--sunken); font: 0.72rem/1.5 var(--font-mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .workspace { grid-template-columns: 1fr; }
    .ws-side { position: static; max-height: none; }
    .workspace.editing .ws-side { display: none; }
    .workspace:not(.editing) .ws-main { display: none; }
    .ws-back { display: inline-flex; }
    .key-row { grid-template-columns: 1fr auto; }
    .key-scopes, .key-used { grid-column: 1 / 2; }
    .key-new { grid-template-columns: 1fr 1fr; }
    .task-edit { grid-template-columns: 1fr 1fr; padding-left: 0.5rem; }
    .quick-add { flex-wrap: wrap; }
    #quickAdd #qaTitle { flex-basis: calc(100% - 2rem); }  /* en móvil, el título ocupa su propia fila */
}

/* ---------- Editor de notas: barra de formato ---------- */

.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: var(--sunken);
}

.md-toolbar button {
    min-width: 30px;
    height: 28px;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    background: none;
    color: var(--muted);
    font: 500 0.78rem var(--font-mono);
    cursor: pointer;
}

.md-toolbar button:hover { color: var(--glow); border-color: var(--line); background: var(--glow-soft); }
.md-sep { width: 1px; height: 18px; margin: 0 0.3rem; background: var(--line); }
.md-hint { margin-left: auto; padding-right: 0.4rem; font-size: 0.66rem; color: var(--dim); }
.md-toolbar:not([hidden]) + textarea.note-body { border-top-color: var(--line); }

/* Menú flotante de "/" y "[[" */
.editor-pop {
    position: fixed;
    z-index: 70;
    width: 290px;
    max-height: 250px;
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid var(--line-strong);
    background: var(--panel-solid);
    box-shadow: 0 14px 30px -12px var(--shadow), 0 0 20px -12px var(--glow);
}

.ep-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 0;
    background: none;
    color: var(--text);
    font: 500 0.88rem var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.ep-item.active, .ep-item:hover { background: var(--glow-soft); color: var(--heading); box-shadow: inset 2px 0 0 var(--glow); }
.ep-item .mdi { width: 16px; height: 16px; color: var(--glow); flex: none; }
.ep-key { min-width: 2.2rem; color: var(--dim); font-size: 0.7rem; }
.ep-item span:not(.ep-key):not(.mdi) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-item small { color: var(--dim); font-size: 0.68rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-empty { padding: 0.5rem; color: var(--dim); font-size: 0.82rem; }

/* Menú ⋯ de la nota */
.note-more { position: relative; }
.note-more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 220px; padding: 0.35rem; border: 1px solid var(--line-strong); background: var(--panel-solid); box-shadow: 0 14px 30px -12px var(--shadow); }
.note-more-pop button { display: block; width: 100%; padding: 0.45rem 0.7rem; border: 0; background: none; color: var(--text); font: 500 0.88rem var(--font-ui); text-align: left; cursor: pointer; }
.note-more-pop button:hover { background: var(--glow-soft); color: var(--glow); }
.note-more-pop button.danger:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* ---------- Vista: índice, enlaces internos, código y diagramas ---------- */

.note-view-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.1rem; align-items: start; }
.note-view-wrap:has(.note-view[hidden]) { display: none; }

.note-toc {
    position: sticky;
    top: 100px;
    width: 180px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 0.2rem 0 0.2rem 0.9rem;
    border-left: 1px solid var(--line);
    font-size: 0.8rem;
}

.toc-label { display: block; margin-bottom: 0.5rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.note-toc a { display: block; padding: 0.2rem 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-toc a:hover { color: var(--glow); }
.note-toc .toc-h2 { padding-left: 0.7rem; }
.note-toc .toc-h3 { padding-left: 1.4rem; font-size: 0.76rem; }

.md a.note-link { border-bottom: 0; padding: 0.02em 0.3em; background: var(--glow-soft); border: 1px solid color-mix(in srgb, var(--glow) 35%, transparent); }
.md a.note-link::before { content: '◇ '; font-size: 0.8em; color: var(--accent); }
.md a.note-link:hover { background: color-mix(in srgb, var(--glow) 18%, transparent); }
.md a.note-link.broken { color: var(--dim); text-decoration: line-through; cursor: not-allowed; background: none; border-style: dashed; }

/* Resaltado de código (highlight.js) con los colores de la consola */
.md pre code.hljs { display: block; background: none; padding: 0; color: var(--text); }
.hljs-comment, .hljs-quote { color: var(--dim); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-literal { color: var(--glow); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--ok); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-attr, .hljs-variable, .hljs-template-variable { color: var(--accent); }
.hljs-title, .hljs-section, .hljs-name, .hljs-type, .hljs-class .hljs-title { color: color-mix(in srgb, var(--glow) 55%, #ffffff); font-weight: 600; }
.hljs-meta, .hljs-deletion { color: var(--bad); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

.mermaid-box { margin: 0.8em 0; padding: 1rem; border: 1px solid var(--line); background: var(--sunken); overflow-x: auto; text-align: center; }
.mermaid-box svg { max-width: 100%; height: auto; }
.mermaid-box.error::before { content: 'Diagrama con errores de sintaxis'; display: block; color: var(--bad); font-size: 0.8rem; margin-bottom: 0.4rem; }
.mermaid-box.error .mermaid { white-space: pre; text-align: left; font: 0.8rem var(--font-mono); color: var(--muted); }

/* "Enlazada desde" */
.note-backlinks { border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.4rem; }
.backlink-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.4rem; }

/* ---------- Papelera ---------- */

.tree-trash {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem 0.5rem;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--dim);
    font: 500 0.85rem var(--font-ui);
    text-align: left;
    cursor: pointer;
}

.tree-trash .mdi { width: 16px; height: 16px; }
.tree-trash:hover { color: var(--text); }
.tree-trash small { margin-left: auto; }
.trash-view { display: flex; flex-direction: column; gap: 0.6rem; }
.trash-list { border-top: 1px solid var(--line); }
.trash-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--line); }
.trash-info { display: flex; flex-direction: column; min-width: 0; }
.trash-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.04em; }
.trash-info small { color: var(--dim); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-meta { display: flex; align-items: center; gap: 0.4rem; color: var(--dim); font-size: 0.72rem; }
.trash-meta .actor-name { font-size: 0.72rem; }

/* ---------- Historial de versiones ---------- */

.history-panel { width: min(1100px, 100%); height: min(760px, calc(100vh - 2rem)); display: flex; flex-direction: column; }
.history-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; }
.history-list { overflow-y: auto; border-right: 1px solid var(--line); padding-right: 0.6rem; display: flex; flex-direction: column; gap: 2px; }

.hist-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-left: 2px solid transparent;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hist-item:hover { background: var(--glow-soft); }
.hist-item.active { background: var(--glow-soft); border-color: var(--line); border-left-color: var(--glow); }
.hist-rev { font-size: 0.72rem; color: var(--glow); }
.hist-meta { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.hist-meta small, .hist-restored { color: var(--dim); font-size: 0.7rem; }
.hist-restored { color: var(--accent); }
.history-preview { min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.history-tools { display: flex; align-items: center; gap: 0.6rem; }
.history-content { flex: 1; min-height: 0; overflow-y: auto; }
.hist-title { margin: 0 0 0.6rem; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--heading); }
pre.diff { margin: 0; padding: 0.8rem; border: 1px solid var(--line); background: var(--sunken); font: 0.8rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
pre.diff .da { display: block; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
pre.diff .dr { display: block; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
pre.diff .de { color: var(--dim); }

@media (max-width: 900px) {
    .note-toc { display: none; }
    .note-view-wrap { grid-template-columns: 1fr; }
    .history-body { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
    .history-list { border-right: 0; border-bottom: 1px solid var(--line); }
    .md-hint { display: none; }
    .trash-item { grid-template-columns: 1fr auto; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
    .topbar { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
    .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
    .topbar-right { margin-left: auto; }
    .sky-date { display: none; }
    .sky-weather { padding-right: 0.6rem; }
    .overview { grid-template-columns: 1fr; justify-items: start; gap: 1.25rem; }
    .overview-meta { align-items: flex-start; }
    .node-grid { grid-template-columns: 1fr; }
    .node-form { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
    .apps { grid-template-columns: 1fr; }
    .brand-sub { display: none; }
    .kv { grid-template-columns: repeat(2, 1fr); }
    .gauge { width: 72px; }
    .panel-head { flex-wrap: wrap; }
}