/* ── Tema ──────────────────────────────────────────────────────────────────────────────
   Colores de Notion. Cada token lleva su valor claro y oscuro con light-dark(): el tema lo decide color-scheme,
   que sigue al sistema salvo que el usuario elija uno (data-theme en <html>, lo pone index.html antes de pintar). */
:root {
    color-scheme: light dark;

    --bg: light-dark(#ffffff, #191919);
    --surface: light-dark(#ffffff, #252525);
    --sidebar: light-dark(#f8f8f7, #202020);
    --column: light-dark(#f7f6f3, #202020);
    --text: light-dark(#37352f, #d4d4d4);
    --muted: light-dark(#787774, #9b9b9b);
    --border: light-dark(#e9e9e7, #2f2f2f);
    --hover: light-dark(rgb(55 53 47 / .06), rgb(255 255 255 / .055));
    --active: light-dark(rgb(55 53 47 / .09), rgb(255 255 255 / .09));
    --shadow: light-dark(0 1px 2px rgb(15 15 15 / .1), 0 1px 2px rgb(0 0 0 / .4));
    --shadow-lg: light-dark(0 0 0 1px rgb(15 15 15 / .05), 0 0 0 1px rgb(255 255 255 / .06)),
                 0 8px 24px light-dark(rgb(15 15 15 / .12), rgb(0 0 0 / .45));
    --accent: #2383e2;
    --accent-hover: #0077d4;
    --on-accent: #ffffff;
    --highlight: var(--c-blue-bg);
    --danger: var(--c-red);

    /* Paleta de Notion para etiquetas, prioridades, estados y proyectos: texto y fondo de cada color. */
    --c-gray: light-dark(#787774, #9b9b9b);
    --c-gray-bg: light-dark(#f1f1ef, #2f2f2f);
    --c-brown: light-dark(#9f6b53, #ba856f);
    --c-brown-bg: light-dark(#f4eeee, #4a3228);
    --c-orange: light-dark(#d9730d, #c77d48);
    --c-orange-bg: light-dark(#fbecdd, #5c3b23);
    --c-yellow: light-dark(#cb912f, #ca9849);
    --c-yellow-bg: light-dark(#fbf3db, #564328);
    --c-green: light-dark(#448361, #529e72);
    --c-green-bg: light-dark(#edf3ec, #243d30);
    --c-blue: light-dark(#337ea9, #379ad3);
    --c-blue-bg: light-dark(#e7f3f8, #143a4e);
    --c-purple: light-dark(#9065b0, #9d68d3);
    --c-purple-bg: light-dark(#f6f3f9, #3c2d49);
    --c-pink: light-dark(#c14c8a, #d15796);
    --c-pink-bg: light-dark(#faf1f5, #4e2c3c);
    --c-red: light-dark(#d44c47, #df5452);
    --c-red-bg: light-dark(#fdebec, #522e2a);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .6rem 1rem;
    background: var(--c-yellow-bg);
    color: var(--text);
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.loading-progress { display: block; width: 6rem; height: 6rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--border); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Cargando"); }

/* Blazor enfoca el h1 al navegar (accesibilidad); sin el recuadro visible. */
h1:focus { outline: none; }

/* Formularios compartidos (entrada, registro, seguridad). */
.form { display: grid; gap: .85rem; }
.form label { display: grid; gap: .3rem; font-size: .9rem; font-weight: 500; }
.form label.check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.form small { color: var(--muted); font-weight: 400; font-size: .8rem; }

.form input:not([type=checkbox]) {
    font: inherit;
    padding: .5rem .65rem;
    border: 1px solid var(--border);
    border-radius: .375rem;
    background: light-dark(rgb(242 241 238 / .6), rgb(255 255 255 / .055));
    color: var(--text);
    box-shadow: inset 0 0 0 1px transparent;
    transition: border-color .12s, box-shadow .12s;
}

.form input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.form input[type=checkbox] { accent-color: var(--accent); }

button.primary, button.secondary, button.danger {
    font: inherit;
    font-weight: 600;
    padding: .55rem .9rem;
    border-radius: .375rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s;
}

button.primary { background: var(--accent); color: var(--on-accent); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow); }
button.secondary:hover:not(:disabled) { background: var(--hover); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
button.link { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; justify-self: start; }
button:disabled { opacity: .6; cursor: default; }

.error { color: var(--danger); font-size: .88rem; margin: 0; }

/* Configuración de la organización (secciones en Pages/Organizations). */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: 1rem 1.1rem 1.1rem;
    margin-bottom: 1rem;
}

.panel h2 { font-size: 1.02rem; margin: 0 0 .65rem; }
.panel > p { margin: 0 0 .75rem; }

.field {
    font: inherit;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: var(--bg);
    color: var(--text);
    min-width: 0;
}

.field:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

input.swatch { width: 2.1rem; height: 2.1rem; padding: .1rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--bg); cursor: pointer; flex: none; }

.row-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row-form .grow { flex: 1 1 12rem; }

button.small { font-size: .85rem; padding: .35rem .65rem; }
button.icon { font: inherit; background: none; border: 1px solid var(--border); color: var(--text); border-radius: .4rem; padding: .2rem .5rem; cursor: pointer; }
button.icon:disabled { opacity: .35; cursor: default; }

.notice { background: var(--highlight); border-radius: .5rem; padding: .55rem .8rem; margin: 0 0 1rem; font-size: .9rem; }
.hint { color: var(--muted); font-size: .82rem; margin: .4rem 0 0; }

/* Prioridad y vencimiento: los usan las tarjetas, las filas de lista y el dashboard. */
.priority { font-weight: 600; padding: 0 .35rem; border-radius: 4px; }
.p-low { color: var(--c-blue); background: var(--c-blue-bg); }
.p-medium { color: var(--c-yellow); background: var(--c-yellow-bg); }
.p-high { color: var(--c-orange); background: var(--c-orange-bg); }
.p-urgent { color: var(--c-red); background: var(--c-red-bg); }

/* Barras de desplazamiento discretas, como en Notion. */
* { scrollbar-width: thin; scrollbar-color: light-dark(#d3d1cb, #474c50) transparent; }