:root {
    --bg-color: #0b0f19;
    --panel-bg: rgba(22, 28, 45, 0.6);
    --panel-border: rgba(255, 255, 255, 0.08);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.4);
    --glass-blur: 12px;
}

body {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
}

.d-none { display: none !important; }

/* ---------------- Login ---------------- */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--panel-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.login-card .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
}
.login-card .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem var(--accent-glow);
    color: var(--text-main);
}

/* ---------------- App shell ---------------- */
.app-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--panel-bg);
    backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--panel-border);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.logo h1 {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(to right, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.2rem;
}

.logo p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.nav-links li:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.nav-links li.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 0 15px var(--accent-glow);
    font-weight: 600;
}

.content-area {
    flex: 1;
    padding: 2.5rem 3rem;
    overflow-y: auto;
    height: 100vh;
    /* Columna flexible para que la sección del asistente pueda ocupar
       todo el alto que queda bajo la cabecera. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.content-area header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--panel-border);
}

.content-area h2 {
    font-weight: 600;
    font-size: 1.7rem;
}

.date-display {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.content-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 3rem;
    /* Alto natural: si creciera con `flex: 1` sobre base 0, se encogería a la
       altura libre y desbordaría fuera de .content-area, que entonces pierde
       su relleno inferior al calcular el scroll y la última tarjeta queda
       tapada por la barra de navegación. */
    flex: 0 0 auto;
}

/* En la sección del asistente el scroll lo lleva la lista de mensajes,
   no la página: ahí sí ocupa todo el alto disponible y no desborda. */
.content-grid.grid-chat {
    padding-bottom: 0;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------------- Glass card (contenido) ---------------- */
.glass-card {
    background: var(--panel-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.glass-card .table {
    color: var(--text-main);
    margin-bottom: 0;
}
.glass-card .table > :not(caption) > * > * {
    background: transparent;
    color: inherit;
    border-color: var(--panel-border);
}

.tarea-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0;
}

.tarea-row .form-check-input {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.tarea-row.completada .tarea-titulo {
    text-decoration: line-through;
    color: var(--text-muted);
}

.tarea-titulo {
    flex: 1;
}

.tarea-nota {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}

/* Distintivos de seguimiento junto al título de la tarea */
.tarea-marca {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.marca-dev     { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
.marca-curso   { background: rgba(99, 102, 241, 0.22); color: #c7d2fe; }
.marca-parada  { background: rgba(234, 179, 8, 0.18);  color: #fde68a; }
.marca-fecha   { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); }
.marca-urgente { background: rgba(244, 63, 94, 0.18);  color: #ffc9d2; }
.marca-olvidada{ background: transparent; color: var(--text-muted); font-weight: 400; text-transform: none; }

.tarea-row.completada .tarea-marca { display: none; }

.tarea-hijos {
    margin-left: 1.9rem;
    border-left: 1px solid var(--panel-border);
    padding-left: 0.9rem;
}

.tarea-acciones {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tarea-row:hover .tarea-acciones {
    opacity: 1;
}

.habito-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) repeat(7, 44px);
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
}
.habito-grid .dia-header {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.habito-grid .habito-check {
    justify-self: center;
}

.saldo-positivo { color: #10b981; }
.saldo-negativo { color: #f43f5e; }

.badge-estado-activo { background: #6366f1; }
.badge-estado-pendiente { background: #eab308; color: #1e1b0a; }
.badge-estado-cerrado { background: #10b981; }

.form-control, .form-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
}

/* La lista desplegable de un <select> la pinta el sistema, no la página: se
   abre con fondo blanco y hereda el color de texto claro del select, así que
   sin esto las opciones salen casi invisibles. El fondo tiene que ser opaco
   (no rgba sobre transparente) porque ahí no hay panel debajo. */
.form-select option,
.form-select optgroup {
    background-color: #161c2d;
    color: var(--text-main);
}
.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25rem var(--accent-glow);
    color: var(--text-main);
}
.form-control::placeholder { color: var(--text-muted); }

.modal-content {
    background: #131826;
    color: var(--text-main);
    border: 1px solid var(--panel-border);
}
.modal-header, .modal-footer {
    border-color: var(--panel-border);
}

/* ---------------- Asistente (sección de inicio) ---------------- */
.chat-seccion {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #131826;
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    overflow: hidden;
}

.chat-mensajes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* En pantallas anchas, la conversación en una columna centrada: leer líneas
   de lado a lado del monitor es incómodo. Se centra el contenedor, no cada
   burbuja: un margen automático en la burbuja anularía su alineación
   izquierda/derecha. */
.chat-mensajes,
.chat-atajos,
.chat-form {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

.chat-atajos {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-atajos::-webkit-scrollbar { display: none; }

.chat-atajos button {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.chat-atajos button:hover {
    color: var(--text-main);
    border-color: var(--accent);
}

.chat-bubble {
    max-width: 85%;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.chat-bubble-bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    border-bottom-left-radius: 2px;
    /* La respuesta llega ya maquetada (párrafos, listas), así que aquí no
       hacen falta los saltos de línea literales. */
    white-space: normal;
    max-width: 92%;
}

/* ---- Contenido con formato dentro de la respuesta ---- */
.chat-bubble-bot p {
    margin: 0 0 0.5rem;
}
.chat-bubble-bot p:last-child { margin-bottom: 0; }

.chat-bubble-bot .chat-titulo {
    font-weight: 600;
    font-size: 0.95rem;
    color: #c7d2fe;
    margin: 0.75rem 0 0.35rem;
    letter-spacing: 0.01em;
}
.chat-bubble-bot > .chat-titulo:first-child { margin-top: 0; }

.chat-bubble-bot ul,
.chat-bubble-bot ol {
    margin: 0 0 0.5rem;
    padding-left: 1.15rem;
}
.chat-bubble-bot ul:last-child,
.chat-bubble-bot ol:last-child { margin-bottom: 0; }

.chat-bubble-bot li {
    margin-bottom: 0.28rem;
    padding-left: 0.15rem;
}
.chat-bubble-bot li:last-child { margin-bottom: 0; }

.chat-bubble-bot ul { list-style: none; padding-left: 0.2rem; }
.chat-bubble-bot ul li::before {
    content: '•';
    color: var(--accent);
    font-weight: 700;
    display: inline-block;
    width: 0.9rem;
    margin-left: -0.05rem;
}

/* Los datos importantes (cifras, nombres, fechas) resaltados en claro. */
.chat-bubble-bot strong {
    color: #fff;
    font-weight: 600;
}

/* ---- Sugerencia del asistente ---- */
.chat-bubble-bot .chat-sugerencia {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.7rem;
    background: rgba(99, 102, 241, 0.1);
    border-left: 2px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.87rem;
    color: #c7d2fe;
}

.chat-bubble-bot .chat-sugerencia::before {
    content: '💡';
    flex: 0 0 auto;
}

/* ---- Tareas marcables dentro de la respuesta ---- */
.chat-bubble-bot li.chat-tarea {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.15rem 0;
}

.chat-bubble-bot li.chat-tarea::before { content: none; }

.chat-bubble-bot li.chat-tarea input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    cursor: pointer;
}

.chat-bubble-bot li.chat-tarea span {
    transition: opacity 0.15s ease;
}

.chat-bubble-bot li.chat-tarea.completada span {
    text-decoration: line-through;
    text-decoration-color: var(--accent);
    opacity: 0.5;
}

/* Botón para marcar la línea como desarrollo. Apagado hasta que pasas el
   ratón por encima, para que no compita con el texto; encendido y fijo
   cuando la tarea ya está marcada. */
.chat-bubble-bot li.chat-tarea .btn-desarrollo {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: none;
    padding: 0 0.15rem;
    color: var(--text-muted);
    opacity: 0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.chat-bubble-bot li.chat-tarea:hover .btn-desarrollo { opacity: 0.55; }
.chat-bubble-bot li.chat-tarea .btn-desarrollo:hover { opacity: 1; color: #a5b4fc; }

.chat-bubble-bot li.chat-tarea.es-desarrollo .btn-desarrollo {
    opacity: 1;
    color: #818cf8;
}

/* En el móvil no hay "pasar el ratón": el botón se ve siempre. */
@media (hover: none) {
    .chat-bubble-bot li.chat-tarea .btn-desarrollo { opacity: 0.55; }
}

.chat-bubble-bot code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.86em;
    color: #a5b4fc;
}

.chat-bubble-error {
    background: rgba(244, 63, 94, 0.12) !important;
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #ffc9d2 !important;
    font-size: 0.85rem;
}

.chat-bubble-user {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--panel-border);
}

.chat-form .form-control {
    flex: 1;
}

/* ---------------- Responsive: sidebar como barra inferior ---------------- */
@media (max-width: 768px) {
    /* El contenedor necesita un alto DEFINIDO, no "min-height": si queda en
       auto, el `flex: 1` de .content-area (base 0) hace que crezca hasta el
       alto del contenido y se pierde el scroll interno; entonces scrollea la
       página entera y el formulario del chat queda debajo de la barra fija. */
    .app-container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 0.4rem 0.5rem;
        border-right: none;
        border-top: 1px solid var(--panel-border);
        z-index: 1040;
    }

    .sidebar .logo { display: none; }

    .nav-links {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 0.15rem;
        overflow-x: auto;
    }

    .nav-links li {
        margin-bottom: 0;
        padding: 0.4rem 0.35rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        font-size: 0.62rem;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-links li i {
        margin: 0 !important;
        font-size: 1.15rem;
    }

    .sidebar-bottom-actions {
        flex-direction: row !important;
        margin: 0 0 0 0.4rem !important;
        gap: 0.3rem !important;
    }

    .sidebar-action-btn {
        flex-shrink: 0;
        padding: 0.5rem 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.62rem;
        line-height: 1;
        gap: 0.15rem;
    }

    .sidebar-action-btn i { margin: 0 !important; font-size: 1.1rem; }

    /* Ocupa el alto que deja el contenedor (ya limitado a 100dvh) y scrollea
       por dentro: la cabecera queda fija y la barra inferior nunca tapa el
       contenido, gracias al relleno inferior. */
    .content-area {
        padding: 1.25rem 1rem 4.75rem;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .chat-mensajes { padding: 1rem; }
}

@media (max-width: 420px) {
    .nav-links li span.nav-text { display: none; }
    .sidebar-action-btn .nav-text { display: none; }
    .nav-links li { padding: 0.5rem 0.55rem; }
}

/* ---------------- Productos digitales ---------------- */

.productos-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.productos-resumen strong { color: var(--text-main); }

/* Gráfico de avance: el resumen de la cabecera y la barra de cada ficha
   comparten los colores de fase, para que se lean como lo mismo. */

.avance-panel {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.85rem 0;
    margin-bottom: 0.85rem;
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
}

.avance-total { min-width: 5.5rem; }

.avance-cifra {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.avance-pie {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.avance-grupo {
    flex: 1;
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.avance-grupo-titulo {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Una línea sin ningún paso todavía no debe leerse como un 0% preocupante */
.avance-fila.avance-vacia { opacity: 0.4; }

.avance-etiqueta {
    display: flex;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.avance-cuenta { margin-left: auto; }

.avance-barra {
    display: flex;
    gap: 2px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}

.avance-producto {
    margin-top: 0.7rem;
    background: transparent;
}

.avance-tramo {
    flex-basis: 0;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    overflow: hidden;
}

.avance-relleno {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.avance-relleno.fase-desarrollo       { background: #6366f1; }
.avance-relleno.fase-marketing_ventas { background: #ec4899; }
.avance-relleno.fase-postventa        { background: #10b981; }
.avance-relleno.fase-general          { background: #64748b; }

/* Mismos colores que las etiquetas de línea de cada ficha */
.avance-relleno.linea-acuarela      { background: #ec4899; }
.avance-relleno.linea-contabilidad  { background: #10b981; }
.avance-relleno.linea-ia_desarrollo { background: #818cf8; }

.producto-card h3 {
    font-size: 1.02rem;
    line-height: 1.35;
}

.producto-numero {
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 0.25rem;
}

/* Lo publicado deja de competir por la atención, pero sigue a la vista. */
.producto-card.estado-publicado { border-left: 3px solid #10b981; }
.producto-card.estado-en_curso  { border-left: 3px solid var(--accent); }
.producto-card.estado-pausado   { border-left: 3px solid #eab308; }
.producto-card.estado-descartado { opacity: 0.5; }

.producto-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.producto-marca {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.marca-linea-acuarela      { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; }
.marca-linea-contabilidad  { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
.marca-linea-ia_desarrollo { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
.marca-precio              { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }

/* Aviso de que otro producto tiene que estar listo antes que este. */
.producto-bloqueo {
    margin-top: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(234, 179, 8, 0.1);
    color: #fde68a;
    font-size: 0.8rem;
}

.producto-detalle summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    list-style: none;
}

.producto-detalle summary::-webkit-details-marker { display: none; }
.producto-detalle summary::before { content: '\002B'; margin-right: 0.4rem; }
.producto-detalle[open] summary::before { content: '\2212'; }
.producto-detalle[open] summary { margin-bottom: 0.6rem; }
.producto-detalle p { font-size: 0.9rem; }

/* Pasos de cada producto (son tareas normales, con producto_id) */

.marca-pasos { background: rgba(99, 102, 241, 0.22); color: #c7d2fe; }

/* Marca del bloque de esfuerzo: antes era el título que agrupaba la lista,
   ahora que los productos van ordenados por número de pasos vive en la ficha. */
.marca-bloque { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }

/* Tablero: una columna por etapa. En pantalla estrecha, auto-fit las apila
   solas, así que en el móvil se sigue leyendo como una lista de arriba abajo. */
.pasos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.kanban-col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 0.5rem;
    min-width: 0;
}

.kanban-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 2.5rem;
    border-radius: 8px;
    transition: background 0.15s, outline-color 0.15s;
    outline: 2px dashed transparent;
    outline-offset: -2px;
}

/* Columna resaltada mientras arrastras una tarjeta encima */
.kanban-tarjetas.soltar-aqui {
    background: rgba(99, 102, 241, 0.08);
    outline-color: var(--accent);
}

.paso-tarjeta {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    cursor: grab;
}

/* Cajón de realizadas, al pie de cada columna */
.pasos-hechos { margin-top: 0.4rem; }
.pasos-hechos.vacio { display: none; }

.pasos-hechos > summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.2rem 0.1rem;
}

.pasos-hechos > summary::-webkit-details-marker { display: none; }
.pasos-hechos > summary::before { content: '\25B8'; margin-right: 0.35rem; }
.pasos-hechos[open] > summary::before { content: '\25BE'; }
.pasos-hechos > summary:hover { color: var(--text-main); }

.hechos-lista {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

/* Ya está hecho: se ve, pero apagado y sin poder arrastrarse a otra etapa */
.hechos-lista .paso-tarjeta {
    background: transparent;
    cursor: default;
}

.paso-tarjeta.arrastrando { opacity: 0.4; }

.paso-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
}

.paso-row:hover { background: rgba(255, 255, 255, 0.06); }

.paso-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.35;
}

.paso-label .form-check-input { margin-top: 0.15rem; flex: 0 0 auto; }

.paso-acciones {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: 1.6rem;
}

.paso-row.hecho .paso-titulo {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Los controles de la tarjeta no ocupan sitio hasta que hace falta: en una
   columna estrecha, tres controles por tarjeta serían más ruido que pasos. */
.paso-acciones {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.15s, opacity 0.15s;
}

.paso-row:hover .paso-acciones,
.paso-row:focus-within .paso-acciones {
    max-height: 2.5rem;
    opacity: 1;
}

/* En táctil no hay hover, así que se quedan siempre visibles */
@media (hover: none) {
    .paso-acciones { max-height: 2.5rem; opacity: 0.7; }
    .paso-tarjeta { cursor: default; }
}

/* Flechas para subir y bajar un paso dentro de su fase */
.paso-mover {
    display: inline-flex;
    flex-direction: column;
    line-height: 0.75;
}

.paso-mover .btn-mover-paso {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.paso-mover .btn-mover-paso:hover:not(:disabled) { color: var(--text-main); }
.paso-mover .btn-mover-paso:disabled { opacity: 0.25; }

.select-fase-paso {
    width: auto;
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.1rem 1.4rem 0.1rem 0.4rem;
}

/* Fases dentro de un producto: desarrollo, marketing/ventas, postventa */

.fase-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0 0.4rem 0.25rem;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 0.3rem;
}

.fase-avance {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: 0;
}

/* El campo de añadir de cada fase: discreto hasta que lo usas, para que no
   compita con los pasos que ya hay. */
.paso-nuevo {
    margin-top: 0.25rem;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.fase-grupo:hover .paso-nuevo,
.paso-nuevo:focus-within { opacity: 1; }

.paso-nuevo .form-control {
    background: transparent;
    border-color: transparent;
    font-size: 0.85rem;
}

.paso-nuevo .form-control:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
}

.paso-nuevo .btn { border-color: transparent; }
.paso-nuevo:focus-within .btn { border-color: var(--panel-border); }

@media (hover: none) {
    .paso-nuevo { opacity: 1; }
    .paso-nuevo .form-control { border-color: var(--panel-border); }
}

/* ---------------- Cursos ----------------
   Sección de estudio: la lista de cursos/semanas/días a la izquierda y las
   indicaciones del día a la derecha. En móvil las dos mitades se turnan:
   .ver-detalle esconde la lista y muestra el día. */

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

.cursos-lateral {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 11rem);
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    overflow: hidden;
}

.cursos-buscador { margin-bottom: 0.6rem; }
.cursos-buscador .input-group-text {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
}

.cursos-arbol {
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -0.35rem;
    padding-right: 0.35rem;
}

.curso-nodo { margin-bottom: 0.5rem; }

.curso-fila {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.88rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.curso-fila:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-main); }
.curso-fila.activa { background: var(--accent); color: #fff; font-weight: 600; }
.curso-fila .flecha { font-size: 0.6rem; transition: transform 0.15s ease; flex: 0 0 auto; }
.curso-fila.abierta .flecha { transform: rotate(90deg); }

.curso-cabecera { color: var(--text-main); font-weight: 600; font-size: 0.9rem; }
.curso-icono { flex: 0 0 auto; }
.curso-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curso-pct { font-size: 0.72rem; color: var(--text-muted); flex: 0 0 auto; }
.curso-fila.activa .curso-pct { color: rgba(255, 255, 255, 0.8); }

.curso-barra {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 0.55rem 0.35rem;
    overflow: hidden;
}
.curso-barra span { display: block; height: 100%; background: #34d399; border-radius: 2px; }

.curso-semanas,
.curso-dias { display: none; }
.curso-semanas.abierta,
.curso-dias.abierta { display: block; }

.curso-semanas { margin-left: 0.5rem; border-left: 1px solid var(--panel-border); padding-left: 0.3rem; }
.curso-dias { margin-left: 0.6rem; }

.curso-dia-nombre { flex: 0 0 auto; font-size: 0.78rem; opacity: 0.75; }
.curso-dia.hecho .curso-nombre,
.curso-dia.hecho .curso-dia-nombre { text-decoration: line-through; opacity: 0.5; }

.curso-material-titulo {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.5rem 0.55rem 0.15rem;
}

/* ---- panel derecho ---- */
.cursos-miga { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.cursos-enlace {
    background: none; border: 0; padding: 0;
    color: #a5b4fc; font: inherit; cursor: pointer;
}

.cursos-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.cursos-chip {
    font-size: 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    color: var(--text-muted);
}
.cursos-chip.destacado {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.cursos-texto { color: var(--text-main); line-height: 1.65; overflow-wrap: anywhere; }
.cursos-texto h3 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
.cursos-texto h4 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; }
.cursos-texto p { margin-bottom: 0.8rem; }
.cursos-texto ul,
.cursos-texto ol { padding-left: 1.3rem; margin-bottom: 0.8rem; }
.cursos-texto li { margin: 0.2rem 0; }
.cursos-texto code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.86em;
    color: #a5b4fc;
}
.cursos-texto pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 0.8rem;
    overflow-x: auto;
}
.cursos-texto pre code { background: none; color: inherit; padding: 0; }
.cursos-texto blockquote {
    border-left: 3px solid var(--accent);
    background: rgba(99, 102, 241, 0.12);
    border-radius: 0 8px 8px 0;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.8rem;
}
.cursos-texto hr { border-color: var(--panel-border); }
.cursos-texto .tabla { overflow-x: auto; margin-bottom: 0.9rem; }
.cursos-texto table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.cursos-texto th,
.cursos-texto td { border: 1px solid var(--panel-border); padding: 0.4rem 0.6rem; vertical-align: top; }
.cursos-texto th { background: rgba(255, 255, 255, 0.05); text-align: left; }

.cursos-lista { list-style: none; padding: 0; margin: 0; }
.cursos-lista li + li { border-top: 1px solid var(--panel-border); }
.cursos-lista button {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    color: var(--text-main);
    padding: 0.65rem 0.2rem;
    cursor: pointer;
    font-size: 0.92rem;
}
.cursos-lista button:hover { color: #a5b4fc; }

.cursos-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; }
.cursos-tarjeta {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 0.9rem;
    color: var(--text-main);
    cursor: pointer;
}
.cursos-tarjeta:hover { border-color: var(--accent); }
.cursos-tarjeta-titulo { font-weight: 600; margin-bottom: 0.25rem; }
.cursos-tarjeta .curso-barra { margin: 0; }

.cursos-acciones { margin: 1.2rem 0 0.4rem; }
.cursos-navegacion { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.8rem; }
.cursos-volver { display: none; }

@media (max-width: 768px) {
    .cursos-wrap { grid-template-columns: 1fr; gap: 1rem; }
    .cursos-lateral { position: static; max-height: 65vh; }
    .cursos-wrap.ver-detalle .cursos-lateral { display: none; }
    .cursos-wrap:not(.ver-detalle) .cursos-detalle { display: none; }
    .cursos-wrap.ver-detalle .cursos-volver { display: inline-block; }
    .cursos-navegacion button { flex: 1; }
}