/* ============================================================================
   theme.css — Tema oscuro + estilos Markdown
   ----------------------------------------------------------------------------
   La app usa Tailwind por CDN, así que en vez de duplicar cada clase con su
   variante `dark:` en las 8 vistas, aquí se reasignan los colores de las
   utilidades que realmente se usan en el proyecto cuando <html> lleva `.dark`.
   `html.dark .bg-white` (0,2,1) gana siempre a `.bg-white` (0,1,0), y las
   variantes :hover llevan una clase más, así que mantienen su prioridad.
   ============================================================================ */

:root {
    /* Superficies y texto en claro (los usa .md-prose y el editor) */
    --srf-0:  #f8fafc;
    --srf-1:  #ffffff;
    --srf-2:  #f1f5f9;
    --srf-3:  #e2e8f0;
    --brd-1:  #f1f5f9;
    --brd-2:  #e2e8f0;
    --brd-3:  #cbd5e1;
    --txt-1:  #1e293b;
    --txt-2:  #334155;
    --txt-3:  #64748b;
    --txt-4:  #94a3b8;
    --accent: #6366f1;
    --accent-soft: #eef2ff;
}

html.dark {
    color-scheme: dark;

    --srf-0:  #0a1020;
    --srf-1:  #131b2b;
    --srf-2:  #1c2537;
    --srf-3:  #2a3448;
    --brd-1:  #1f2a3c;
    --brd-2:  #2c3a52;
    --brd-3:  #3a4a66;
    --txt-1:  #e6ecf5;
    --txt-2:  #cdd8e6;
    --txt-3:  #95a4b8;
    --txt-4:  #7a8899;
    --accent: #818cf8;
    --accent-soft: rgba(99, 102, 241, .16);
}

/* ── Fondos ──────────────────────────────────────────────────────────────── */
html.dark .bg-white         { background-color: var(--srf-1); }
html.dark .bg-slate-50      { background-color: var(--srf-0); }
html.dark .bg-slate-100     { background-color: var(--srf-2); }
html.dark .bg-slate-200     { background-color: var(--srf-3); }
html.dark .bg-slate-200\/60 { background-color: rgba(42, 52, 72, .6); }
html.dark .bg-gray-100      { background-color: var(--srf-2); }
/* Slates oscuros que en claro ya eran "el elemento oscuro": se aclaran */
html.dark .bg-slate-400     { background-color: #64748b; }
html.dark .bg-slate-700     { background-color: #475569; }
html.dark .bg-slate-800     { background-color: #334155; }
html.dark .bg-slate-900     { background-color: #0d1526; }
html.dark .bg-black\/50     { background-color: rgba(0, 0, 0, .72); }

html.dark .hover\:bg-white:hover         { background-color: var(--srf-3); }
html.dark .hover\:bg-slate-50:hover      { background-color: var(--srf-2); }
html.dark .hover\:bg-slate-100:hover     { background-color: var(--srf-2); }
html.dark .hover\:bg-slate-200:hover     { background-color: var(--srf-3); }
html.dark .hover\:bg-slate-300\/50:hover { background-color: rgba(58, 74, 102, .5); }
html.dark .hover\:bg-slate-900:hover     { background-color: #475569; }

/* Gradiente del login (único sitio con degradado) */
html.dark .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #0a1020, #182142);
}

/* ── Bordes ──────────────────────────────────────────────────────────────── */
html.dark .border-slate-100 { border-color: var(--brd-1); }
html.dark .border-slate-200 { border-color: var(--brd-2); }
html.dark .border-slate-300 { border-color: var(--brd-3); }
html.dark .border-slate-700 { border-color: #334155; }
html.dark .border-gray-200  { border-color: var(--brd-2); }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--brd-1); }
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--brd-2); }

/* ── Texto ───────────────────────────────────────────────────────────────── */
html.dark .text-slate-800 { color: var(--txt-1); }
html.dark .text-slate-700 { color: var(--txt-2); }
html.dark .text-slate-600 { color: #b3c0d1; }
html.dark .text-slate-500 { color: var(--txt-3); }
html.dark .text-slate-400 { color: var(--txt-4); }
html.dark .text-slate-300 { color: #5d6b7f; }
html.dark .text-gray-700  { color: var(--txt-2); }

html.dark .hover\:text-slate-700:hover { color: var(--txt-1); }
html.dark .hover\:text-slate-600:hover { color: var(--txt-2); }

html.dark .placeholder\:text-slate-300::placeholder { color: #4a5668; }
html.dark .placeholder\:text-slate-200::placeholder { color: #3d4a5c; }

/* ── Acento índigo ───────────────────────────────────────────────────────── */
html.dark .bg-indigo-50      { background-color: rgba(99, 102, 241, .16); }
html.dark .text-indigo-700,
html.dark .text-indigo-600   { color: #a5b4fc; }
html.dark .text-indigo-500   { color: #818cf8; }
html.dark .border-indigo-100 { border-color: rgba(99, 102, 241, .25); }
html.dark .border-indigo-200 { border-color: rgba(99, 102, 241, .35); }
html.dark .border-indigo-300 { border-color: rgba(99, 102, 241, .45); }
html.dark .hover\:text-indigo-700:hover,
html.dark .hover\:text-indigo-600:hover { color: #c7d2fe; }
html.dark .hover\:text-indigo-400:hover { color: #a5b4fc; }

/* ── Tintes semánticos (badges, avisos) ──────────────────────────────────── */
html.dark .bg-red-50      { background-color: rgba(239, 68, 68, .13); }
html.dark .bg-red-100     { background-color: rgba(239, 68, 68, .20); }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, .35); }
html.dark .text-red-700   { color: #fca5a5; }
html.dark .text-red-600,
html.dark .text-red-500   { color: #f87171; }
html.dark .text-red-400   { color: #ef8a8a; }
html.dark .hover\:bg-red-50:hover  { background-color: rgba(239, 68, 68, .16); }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, .24); }
html.dark .hover\:text-red-700:hover,
html.dark .hover\:text-red-600:hover,
html.dark .hover\:text-red-500:hover,
html.dark .hover\:text-red-400:hover { color: #fca5a5; }

html.dark .bg-green-50      { background-color: rgba(34, 197, 94, .13); }
html.dark .bg-green-100     { background-color: rgba(34, 197, 94, .20); }
html.dark .border-green-200 { border-color: rgba(34, 197, 94, .35); }
html.dark .border-green-300 { border-color: rgba(34, 197, 94, .45); }
html.dark .text-green-900,
html.dark .text-green-800,
html.dark .text-green-700   { color: #86efac; }
html.dark .text-green-600   { color: #4ade80; }
html.dark .text-green-400   { color: #86efac; }

html.dark .bg-amber-50      { background-color: rgba(245, 158, 11, .13); }
html.dark .bg-amber-100     { background-color: rgba(245, 158, 11, .20); }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, .35); }
html.dark .text-amber-700   { color: #fcd34d; }
html.dark .text-amber-600,
html.dark .text-amber-500   { color: #fbbf24; }

html.dark .bg-orange-50      { background-color: rgba(249, 115, 22, .13); }
html.dark .border-orange-200 { border-color: rgba(249, 115, 22, .35); }
html.dark .text-orange-600,
html.dark .text-orange-500   { color: #fb923c; }

html.dark .bg-blue-50      { background-color: rgba(59, 130, 246, .13); }
html.dark .bg-blue-100     { background-color: rgba(59, 130, 246, .20); }
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, .35); }
html.dark .text-blue-700   { color: #93c5fd; }
html.dark .text-blue-600,
html.dark .text-blue-400   { color: #60a5fa; }

html.dark .text-purple-400 { color: #c4b5fd; }
html.dark .text-yellow-400 { color: #fde047; }

/* ── Sombras: en oscuro las sombras claras no se ven, se refuerzan ───────── */
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .35); }
html.dark .shadow    { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .45); }
html.dark .shadow-lg { box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .6); }
html.dark .shadow-xl { box-shadow: 0 18px 36px -10px rgba(0, 0, 0, .7); }
html.dark .hover\:shadow-sm:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .45); }
html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .55); }

/* ── Formularios y scroll ────────────────────────────────────────────────── */
html.dark input[type="color"] { background-color: var(--srf-2); }
html.dark .sortable-ghost { background: #1e2a44 !important; }

html.dark .kanban-col { scrollbar-color: #33415c transparent; }
html.dark .kanban-col::-webkit-scrollbar-thumb { background: #33415c; }
html.dark #task-notes-list { scrollbar-color: #2c3a52 transparent; }
html.dark #task-notes-list::-webkit-scrollbar-thumb { background: #2c3a52; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background: #2c3a52; border-radius: 5px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3a4a66; }


/* ============================================================================
   .md-prose — render de Markdown (notas y descripciones de tarea)
   Funciona en claro y oscuro a través de las variables de arriba.
   ============================================================================ */
.md-prose {
    color: var(--txt-2);
    font-size: .9rem;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.md-prose > :first-child { margin-top: 0 !important; }
.md-prose > :last-child  { margin-bottom: 0 !important; }

.md-prose h1,
.md-prose h2,
.md-prose h3,
.md-prose h4,
.md-prose h5,
.md-prose h6 {
    color: var(--txt-1);
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 .6em;
}
.md-prose h1 { font-size: 1.6em; letter-spacing: -.02em; }
.md-prose h2 {
    font-size: 1.3em;
    letter-spacing: -.01em;
    padding-bottom: .3em;
    border-bottom: 1px solid var(--brd-2);
}
.md-prose h3 { font-size: 1.12em; }
.md-prose h4 { font-size: 1em; }
.md-prose h5,
.md-prose h6 { font-size: .92em; color: var(--txt-3); text-transform: uppercase; letter-spacing: .05em; }

.md-prose p { margin: 0 0 1em; }

.md-prose strong { color: var(--txt-1); font-weight: 700; }
.md-prose em     { font-style: italic; }
.md-prose del    { color: var(--txt-4); }

.md-prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.md-prose ul,
.md-prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.md-prose ul { list-style: disc; }
.md-prose ol { list-style: decimal; }
.md-prose li { margin: .3em 0; }
.md-prose li::marker { color: var(--txt-4); }
.md-prose li > ul,
.md-prose li > ol { margin: .3em 0; }
.md-prose li > p  { margin: 0 0 .4em; }
.md-prose input[type="checkbox"] { margin-right: .5em; accent-color: var(--accent); }

.md-prose code {
    background: var(--srf-2);
    border: 1px solid var(--brd-2);
    color: #db2777;
    padding: .12em .38em;
    border-radius: .3em;
    font-size: .85em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.dark .md-prose code { color: #f9a8d4; }

.md-prose pre {
    background: var(--srf-2);
    border: 1px solid var(--brd-2);
    border-radius: .75rem;
    padding: .9em 1.1em;
    overflow-x: auto;
    margin: 0 0 1em;
    line-height: 1.55;
}
.md-prose pre code {
    background: none;
    border: 0;
    padding: 0;
    color: var(--txt-2);
    font-size: .85em;
}

.md-prose blockquote {
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 .5rem .5rem 0;
    padding: .6em .9em;
    margin: 0 0 1em;
    color: var(--txt-3);
}
.md-prose blockquote p:last-child { margin-bottom: 0; }

.md-prose hr {
    border: 0;
    border-top: 1px solid var(--brd-2);
    margin: 1.8em 0;
}

.md-prose table {
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: .9em;
    display: block;
    overflow-x: auto;
}
.md-prose th,
.md-prose td {
    border: 1px solid var(--brd-2);
    padding: .45em .7em;
    text-align: left;
}
.md-prose th { background: var(--srf-2); color: var(--txt-1); font-weight: 600; }

.md-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: .4em 0 1em;
    border: 1px solid var(--brd-2);
    border-radius: .5rem;
    background: var(--srf-2);
}
/* Imagen suelta dentro de un párrafo: que no arrastre el margen del párrafo */
.md-prose p > img:only-child { margin-bottom: 0; }

/* Variante compacta (tarjetas y panel lateral del kanban) */
.md-prose-sm { font-size: .8rem; line-height: 1.6; }
.md-prose-sm p,
.md-prose-sm ul,
.md-prose-sm ol,
.md-prose-sm pre,
.md-prose-sm blockquote { margin-bottom: .55em; }
.md-prose-sm h1,
.md-prose-sm h2,
.md-prose-sm h3,
.md-prose-sm h4 { margin: .9em 0 .35em; }
.md-prose-sm h2 { border-bottom: 0; padding-bottom: 0; }


/* ============================================================================
   Editor Markdown con resaltado (notas)
   Un <pre> coloreado bajo un <textarea> transparente. El que scrollea es el
   contenedor, no el textarea: así ambas capas comparten ancho exacto (sin
   barra de scroll que desplace el ajuste de línea) y no hay que sincronizar
   nada. El <pre> marca la altura y el textarea se estira encima.
   ============================================================================ */
.md-editor-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.md-editor-stack {
    position: relative;
    min-height: 100%;
}
.md-editor-hl,
.md-editor-ta {
    margin: 0;
    border: 0;
    padding: 1.25rem 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0;
    tab-size: 2;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
}
.md-editor-hl {
    position: relative;
    z-index: 0;
    display: block;
    color: var(--txt-2);
    pointer-events: none;
}
.md-editor-ta {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--accent);
}
.md-editor-ta:focus { outline: none; }

/* Arrastrando una imagen encima del editor */
.md-editor-wrap.md-editor-dropping {
    box-shadow: inset 0 0 0 2px var(--accent);
    background: var(--accent-soft) !important;
}
.md-editor-ta::placeholder { color: var(--txt-4); }
.md-editor-ta::selection { background: rgba(99, 102, 241, .28); }

/* Tokens del resaltado */
.md-editor-hl .tk-head   { color: #4338ca; font-weight: 700; }
.md-editor-hl .tk-mark   { color: #b4bcd0; }
.md-editor-hl .tk-bold   { color: var(--txt-1); font-weight: 700; }
.md-editor-hl .tk-italic { color: var(--txt-2); font-style: italic; }
.md-editor-hl .tk-strike { color: var(--txt-4); text-decoration: line-through; }
.md-editor-hl .tk-code   { color: #db2777; }
.md-editor-hl .tk-quote  { color: var(--txt-3); font-style: italic; }
.md-editor-hl .tk-bullet { color: var(--accent); font-weight: 700; }
.md-editor-hl .tk-link   { color: var(--accent); text-decoration: underline; }
.md-editor-hl .tk-hr     { color: #a5b4fc; }
.md-editor-hl .tk-fence  { color: #db2777; }

html.dark .md-editor-hl .tk-head  { color: #a5b4fc; }
html.dark .md-editor-hl .tk-mark  { color: #55627e; }
html.dark .md-editor-hl .tk-code  { color: #f9a8d4; }
html.dark .md-editor-hl .tk-fence { color: #f9a8d4; }
html.dark .md-editor-hl .tk-hr    { color: #55627e; }