Tul xxx Tul

Viewing: index.php

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

    .scrum-ops-shell {
        --scrum-text: #f3f6ff;
        --scrum-muted: #8d97b5;
        --scrum-dim: #62708b;
        --scrum-green: #64ff8c;
        --scrum-alert: #ff5a36;
        position: relative;
    }

    .scrum-ops-shell * {
        position: relative;
        z-index: 1;
    }

    .scrum-ops-shell,
    .scrum-ops-shell .btn,
    .scrum-ops-shell input,
    .scrum-ops-shell textarea,
    .scrum-ops-shell select {
        font-family: 'Space Grotesk', sans-serif !important;
    }

    .scrum-space-font {
        font-family: 'Space Grotesk', sans-serif;
    }

    .btn-emerald {
        background: linear-gradient(135deg, #64ff8c, #20c45e);
        color: #04110b !important;
        font-weight: 800;
        border: none;
        border-radius: 14px;
        padding: 0.95rem 1.15rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        justify-content: center;
    }

    .btn-emerald:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(100, 255, 140, 0.18);
        color: #04110b !important;
    }

    .scrum-module-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.25rem;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .scrum-top-actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 0.45rem;
    }

    .scrum-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.42rem 0.78rem;
        border: 1px solid rgba(100, 255, 140, 0.22);
        background: rgba(11, 18, 33, 0.92);
        color: var(--scrum-green);
        border-radius: 999px;
        font-size: 0.68rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .scrum-module-title {
        margin: 0;
        font-family: 'Space Grotesk' !important;
        background: linear-gradient(135deg, #5EF916 0%, #34d399 50%, #1D8A29 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 800;
        font-size: 1.6rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .scrum-module-title i {
        -webkit-text-fill-color: #5EF916 !important;
        color: #5EF916 !important;
        font-size: 1.4rem;
    }

    .emerald-edition-badge {
        background: rgba(94, 249, 22, 0.1) !important;
        color: #5ef916 !important;
        border: 1px solid rgba(94, 249, 22, 0.3) !important;
        letter-spacing: 2px !important;
        font-size: 11px !important;
        /* Fixed px size */
        padding: 6px 14px !important;
        /* Fixed px padding */
        border-radius: 6px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-shadow: 0 0 15px rgba(94, 249, 22, 0.1);
        font-family: 'Space Grotesk', sans-serif !important;
        line-height: 1 !important;
    }

    .scrum-module-subtitle {
        margin: 0;
        max-width: 680px;
        color: var(--scrum-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .btn-kanban-emerald {
        background: transparent;
        border: 1px solid rgba(94, 249, 22, 0.4);
        color: #5EF916 !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-weight: 700;
        padding: 12px 24px;
        font-size: 0.82rem;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        box-shadow: 3px 3px 0 rgba(94, 249, 22, 0.3);
    }

    .btn-kanban-emerald:hover {
        background: rgba(94, 249, 22, 0.08);
        color: #5EF916 !important;
        border-color: #5EF916;
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0 rgba(94, 249, 22, 0.3);
    }

    .btn-kanban-emerald:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0 rgba(94, 249, 22, 0.3);
    }

    @media (max-width: 576px) {
        .scrum-module-title {
            font-size: 1.2rem !important;
            letter-spacing: 1px;
        }
    }

    .sprint-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
    }

    .sprint-card {
        background: linear-gradient(145deg, rgba(20, 30, 20, 0.9), rgba(10, 15, 10, 0.95));
        border: 1px solid rgba(94, 249, 22, 0.15);
        border-radius: 0;
        padding: 1.25rem;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        /* aspect-ratio: 1; */
        display: flex;
        flex-direction: column;
    }

    .sprint-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #5ef916, #34d399);
        opacity: 0.6;
        transition: opacity 0.25s;
    }

    .create-sprint-card {
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba(12, 19, 35, 0.4);
        border: 2px dashed rgba(100, 255, 140, 0.25);
        color: var(--scrum-green);
    }

    .create-sprint-card:hover {
        background: rgba(100, 255, 140, 0.08);
        border-color: rgba(100, 255, 140, 0.6);
    }

    .create-sprint-card i {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
    }

    .create-sprint-card h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.3rem;
        margin: 0;
        color: var(--scrum-green);
    }

    .sprint-card:hover {
        border-color: rgba(94, 249, 22, 0.5);
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(94, 249, 22, 0.08);
    }

    .sprint-card:hover::before {
        opacity: 1;
    }

    .sprint-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .sprint-card-id {
        color: var(--scrum-dim);
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .card-engine-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 2px 8px;
        /* border-radius: 6px; */
        font-size: 0.7rem;
        font-weight: normal;
        letter-spacing: 0.5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.4);
        color: #dbe4ff;
    }

    .card-engine-badge img {
        width: 14px;
        height: 14px;
    }

    .card-title-text {
        font-size: 1rem;
        font-weight: 700;
        color: #e2e8f0;
        margin: 0.6rem 0 0.3rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-goal {
        font-size: 0.78rem;
        color: #94a3b8;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.75rem;
        flex-grow: 1;
    }

    .card-progress-bar {
        height: 4px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }

    .scrum-progress-track {
        height: 10px;
        border-radius: 0;
        overflow: hidden;
        background: rgba(29, 42, 71, 0.9);
    }

    .card-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #5ef916, #34d399);
        border-radius: 4px;
        transition: width 0.4s ease;
    }

    .scrum-progress-fill {
        height: 100%;
        border-radius: 0;
        background: linear-gradient(90deg, #64ff8c 0%, #22d363 60%, #12b84f 100%);
        box-shadow: none;
        transition: width 0.35s ease;
    }

    .card-footer-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.72rem;
    }

    .card-pct {
        color: #5ef916;
        font-weight: 700;
    }

    .card-tasks-count {
        color: #64748b;
    }

    .card-date {
        color: #475569;
        font-size: 0.68rem;
        margin-top: 0.4rem;
    }

    .scrum-hero-progress-meta,
    .scrum-hero-caption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .detail-back-btn {
        border: 1px solid rgba(100, 255, 140, 0.18);
        background: rgba(10, 17, 30, 0.9);
        color: var(--scrum-green);
        border-radius: 0;
        padding: 0.72rem 1rem;
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    .detail-back-btn:hover {
        background: rgba(100, 255, 140, 0.1);
        border-color: rgba(100, 255, 140, 0.45);
    }

    .scrum-detail-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.65rem;
        flex-wrap: wrap;
    }

    .scrum-hero-panel {
        padding: clamp(0.9rem, 2.2vw, 1.35rem);
        border-radius: 0;
        border: 1px solid rgba(100, 255, 140, 0.16);
        background:
            linear-gradient(180deg, rgba(8, 14, 28, 0.96), rgba(5, 10, 20, 0.98)),
            radial-gradient(circle at top center, rgba(100, 255, 140, 0.12), transparent 26%);
        text-align: center;
        box-shadow: none;
    }

    .scrum-hero-title {
        margin: 0.55rem 0 0.55rem;
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(2rem, 5vw, 3.55rem);
        line-height: 0.94;
        letter-spacing: -0.06em;
        color: var(--scrum-text);
    }

    .scrum-hero-title span {
        display: block;
    }

    .scrum-hero-title .accent {
        color: var(--scrum-green);
    }

    .scrum-hero-goal {
        margin: 0 auto 0.75rem;
        max-width: 760px;
        color: var(--scrum-muted);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .scrum-hero-progress-meta {
        max-width: 720px;
        margin: 0 auto 0.35rem;
        color: var(--scrum-dim);
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .scrum-progress-track {
        max-width: 720px;
        margin: 0 auto;
    }

    .scrum-hero-caption {
        max-width: 720px;
        margin: 0.45rem auto 0;
        color: var(--scrum-muted);
        font-size: 0.78rem;
    }

    .scrum-hero-stats {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
        max-width: 760px;
        margin: 1.35rem auto 0;
    }

    .scrum-stat-card {
        padding: 0.95rem 1rem;
        border-radius: 18px;
        border: 1px solid rgba(100, 255, 140, 0.1);
        background: rgba(8, 13, 23, 0.88);
    }

    .scrum-stat-label {
        color: var(--scrum-dim);
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 0.35rem;
    }

    .scrum-stat-value {
        color: var(--scrum-text);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.2rem;
        letter-spacing: -0.04em;
    }

    .scrum-detail-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr);
        gap: 0.8rem;
        margin-top: 0.8rem;
        align-items: start;
    }

    .scrum-main-panel,
    .scrum-side-panel {
        border-radius: 0;
        background: linear-gradient(180deg, rgba(9, 15, 30, 0.96), rgba(5, 10, 19, 0.98));
        overflow: hidden;
    }

    .scrum-main-panel {
        border-left: 3px solid var(--scrum-green);
        padding: 0.95rem;
        border-top: 1px solid rgba(100, 255, 140, 0.14);
        border-right: 1px solid rgba(100, 255, 140, 0.08);
        border-bottom: 1px solid rgba(100, 255, 140, 0.08);
    }

    .scrum-panel-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.1rem;
    }

    .scrum-panel-title {
        margin: 0;
        color: var(--scrum-text);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.5rem;
        letter-spacing: -0.04em;
    }

    .scrum-panel-eyebrow {
        margin: 0 0 0.25rem;
        color: var(--scrum-dim);
        font-size: 0.7rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .scrum-day-legend {
        color: var(--scrum-muted);
        font-size: 0.84rem;
        text-align: right;
        max-width: 220px;
    }

    .day-pagination {
        display: flex;
        gap: 0.55rem;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        margin-bottom: 0.8rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 255, 140, 0.45) transparent;
    }

    .day-pagination::-webkit-scrollbar {
        height: 6px;
    }

    .day-pagination::-webkit-scrollbar-thumb {
        background: rgba(100, 255, 140, 0.35);
        border-radius: 999px;
    }

    .day-pill {
        min-width: 3.3rem;
        border-radius: 0;
        border: 1px solid rgba(127, 141, 176, 0.28);
        background: rgba(15, 21, 38, 0.86);
        color: #b0bbd6;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.78rem 0.85rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .day-pill:hover {
        border-color: rgba(100, 255, 140, 0.45);
        color: var(--scrum-text);
    }

    .day-pill.active {
        background: #64ff8c;
        border-color: #64ff8c;
        color: #07110a;
        box-shadow: 0 0 0 1px rgba(100, 255, 140, 0.12), 0 10px 24px rgba(100, 255, 140, 0.18);
    }

    .day-pill.completed-day {
        color: var(--scrum-green);
        border-color: rgba(100, 255, 140, 0.35);
    }

    .page-arrow {
        display: none;
    }

    .day-content-card {
        border-radius: 0;
        padding: 0.95rem;
        background: linear-gradient(180deg, rgba(14, 20, 35, 0.96), rgba(10, 15, 27, 0.98));
        border: 1px solid rgba(100, 255, 140, 0.08);
        animation: fadeSlideIn 0.28s ease;
    }

    @keyframes fadeSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .scrum-day-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.1rem;
    }

    .scrum-day-title {
        margin: 0;
        color: var(--scrum-text);
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.5rem, 2vw, 2rem);
        letter-spacing: -0.04em;
    }

    .day-focus-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        padding: 0.5rem 0.85rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--scrum-green);
        background: rgba(100, 255, 140, 0.08);
        border: 1px solid rgba(100, 255, 140, 0.16);
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .scrum-day-copy {
        color: var(--scrum-muted);
        margin: 0.35rem 0 0;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .scrum-day-summary {
        color: var(--scrum-green);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-align: right;
    }

    .tasks-list {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .scrum-task-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding: 0.82rem 0.9rem;
        background: rgba(13, 20, 34, 0.92);
        border: 1px solid rgba(99, 113, 146, 0.14);
        border-radius: 0;
        transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .scrum-task-row.is-active {
        border-color: rgba(100, 255, 140, 0.4);
        background: linear-gradient(90deg, rgba(17, 30, 41, 0.98), rgba(15, 23, 40, 0.96));
        box-shadow: inset 3px 0 0 #64ff8c;
    }

    .scrum-task-row.is-completed {
        border-color: rgba(100, 255, 140, 0.12);
        background: rgba(11, 23, 30, 0.9);
    }

    .scrum-task-copy {
        min-width: 0;
    }

    .scrum-task-title {
        color: var(--scrum-text);
        font-size: 0.94rem;
        line-height: 1.45;
        font-weight: 700;
        margin: 0;
        word-break: break-word;
    }

    .scrum-task-row.is-completed .scrum-task-title {
        color: rgba(243, 246, 255, 0.62);
        text-decoration: line-through;
    }

    .scrum-task-meta {
        margin-top: 0.2rem;
        color: #8391ae;
        font-size: 0.74rem;
        font-style: italic;
    }

    .scrum-task-row.is-active .scrum-task-meta {
        color: #89f5a6;
    }

    .scrum-task-pill {
        padding: 0.38rem 0.58rem;
        border-radius: 0;
        background: rgba(18, 28, 49, 0.92);
        color: #93a6cf;
        font-size: 0.68rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border: 1px solid rgba(99, 113, 146, 0.16);
        font-weight: 700;
        white-space: nowrap;
    }

    .scrum-task-row.is-active .scrum-task-pill.is-status {
        background: rgba(100, 255, 140, 0.14);
        border-color: rgba(100, 255, 140, 0.35);
        color: var(--scrum-green);
    }

    .scrum-task-row.is-completed .scrum-task-pill.is-status {
        background: rgba(32, 196, 94, 0.14);
        border-color: rgba(100, 255, 140, 0.25);
        color: var(--scrum-green);
    }

    .scrum-task-aux {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .task-checkbox {
        -webkit-appearance: none;
        appearance: none;
        background: rgba(100, 255, 140, 0.04);
        margin: 0;
        width: 22px;
        height: 22px;
        border: 1px solid rgba(100, 255, 140, 0.55);
        border-radius: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.18s ease;
        flex-shrink: 0;
    }

    .task-checkbox::before {
        content: "\F26A";
        font-family: "bootstrap-icons";
        font-size: 14px;
        color: #031208;
        transform: scale(0);
        transition: transform 0.18s ease;
    }

    .task-checkbox:hover {
        box-shadow: 0 0 0 3px rgba(100, 255, 140, 0.08);
    }

    .task-checkbox:checked {
        background: #64ff8c;
        border-color: #64ff8c;
        box-shadow: 0 0 18px rgba(100, 255, 140, 0.2);
    }

    .task-checkbox:checked::before {
        transform: scale(1);
    }

    .scrum-commit-btn {
        width: 100%;
        margin-top: 1.05rem;
        padding: 1rem 1.15rem;
        border: none;
        border-radius: 0;
        background: linear-gradient(90deg, #64ff8c, #24cf67);
        color: #06110a;
        font-size: 0.78rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        font-weight: 800;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .scrum-commit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(100, 255, 140, 0.2);
    }

    .scrum-commit-note {
        margin-top: 0.75rem;
        color: var(--scrum-dim);
        text-align: center;
        font-size: 0.76rem;
    }

    .scrum-side-stack {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .scrum-side-panel {
        padding: 0.9rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .scrum-side-panel.is-success {
        background:
            linear-gradient(180deg, rgba(4, 7, 12, 0.98), rgba(2, 4, 9, 0.98)),
            radial-gradient(circle at top left, rgba(100, 255, 140, 0.07), transparent 45%);
        box-shadow: inset 3px 0 0 var(--scrum-green);
    }

    .scrum-side-panel.is-danger {
        background:
            linear-gradient(180deg, rgba(10, 5, 4, 0.98), rgba(8, 4, 3, 0.98)),
            radial-gradient(circle at bottom right, rgba(255, 90, 54, 0.12), transparent 42%);
        box-shadow: inset 3px 0 0 var(--scrum-alert);
    }

    .scrum-side-title {
        margin: 0 0 1rem;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.18rem;
        letter-spacing: -0.03em;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .scrum-side-title.is-success {
        color: var(--scrum-text);
    }

    .scrum-side-title.is-success i {
        color: var(--scrum-green);
    }

    .scrum-side-title.is-danger {
        color: #ff734e;
    }

    .scrum-side-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }

    .scrum-side-item {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        color: #e5ecff;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .scrum-side-item i {
        margin-top: 0.18rem;
        font-size: 0.7rem;
    }

    .scrum-side-item.is-success i {
        color: var(--scrum-green);
    }

    .scrum-side-item.is-danger {
        padding: 0.85rem;
        border: 1px solid rgba(255, 90, 54, 0.18);
        background: rgba(255, 90, 54, 0.06);
    }

    .scrum-side-item.is-danger i {
        color: #ff734e;
    }

    .scrum-side-empty {
        color: var(--scrum-dim);
        font-size: 0.84rem;
        line-height: 1.6;
        border: 1px dashed rgba(255, 255, 255, 0.08);
        padding: 0.9rem;
        background: rgba(255, 255, 255, 0.02);
    }

    .scrum-empty-state {
        text-align: center;
        padding: 4rem 1.5rem;
        border-radius: 28px;
        border: 1px dashed rgba(100, 255, 140, 0.18);
        background: linear-gradient(180deg, rgba(10, 16, 29, 0.9), rgba(6, 10, 20, 0.96));
    }

    .scrum-empty-icon {
        font-size: 3.5rem;
        color: rgba(100, 255, 140, 0.6);
    }

    .scrum-empty-state h4 {
        margin: 1rem 0 0.45rem;
        color: var(--scrum-text);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 2rem;
        letter-spacing: -0.04em;
    }

    .scrum-empty-state p {
        margin: 0 auto 1.3rem;
        max-width: 460px;
        color: var(--scrum-muted);
    }

    .scrum-pulse-target {
        animation: scrumPulse 1.4s ease;
    }

    @keyframes scrumPulse {

        0%,
        100% {
            box-shadow: inset 3px 0 0 #64ff8c, 0 0 0 rgba(100, 255, 140, 0);
        }

        50% {
            box-shadow: inset 3px 0 0 #64ff8c, 0 0 0 6px rgba(100, 255, 140, 0.09);
        }
    }

    @media (max-width: 991.98px) {
        .scrum-module-header {
            flex-direction: column;
        }

        .scrum-create-btn {
            width: 100%;
            justify-content: center;
        }

        .scrum-detail-grid {
            grid-template-columns: 1fr;
        }

        .scrum-side-stack {
            order: -1;
        }

        .scrum-hero-stats {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .scrum-ops-shell {
            padding: 0.75rem;
            border-radius: 0;
        }

        .scrum-hero-panel,
        .scrum-main-panel,
        .scrum-side-panel {
            border-radius: 0;
        }

        .scrum-day-head,
        .scrum-panel-header,
        .scrum-detail-topbar {
            flex-direction: column;
            align-items: stretch;
        }

        .scrum-day-summary,
        .scrum-day-legend {
            text-align: left;
            max-width: none;
        }

        .scrum-task-row {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .scrum-task-aux {
            grid-column: 2 / -1;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .scrum-hero-progress-meta,
        .scrum-hero-caption {
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>

<div class="fade-in-up scrum-ops-shell">
    <div class="scrum-module-header d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
            <!-- <div class="d-flex align-items-center gap-2 mb-2">
                <span class="badge emerald-edition-badge">
                    <i class="bi bi-gem"></i> EMERALD EDITION
                </span>
            </div> -->
            <h1 class="scrum-module-title m-0">
                <i class="bi bi-clock-history"></i> AI_Scrum_Coach
            </h1>
            <p class="scrum-module-subtitle mt-1">Convierte tu ambición en un sprint táctico implacable.</p>
        </div>
        <button class="btn-kanban-emerald align-self-center" data-bs-toggle="modal" data-bs-target="#modalNuevoSprint">
            <i class="bi bi-lightning-charge-fill"></i>
            Crear Nuevo Sprint
        </button>
    </div>

    <div id="sprints-grid-view" class="mt-2 d-none">
        <div id="sprints-grid-container" class="sprint-cards-grid"></div>
    </div>

    <div id="sprint-detail-view" class="mt-2 d-none">
        <div class="scrum-detail-topbar">
            <button class="detail-back-btn" onclick="ScrumModule.volverAlGrid()">
                <i class="bi bi-arrow-left"></i>
                Mis sprints
            </button>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span id="dash-sprint-days" class="card-engine-badge"></span>
                <div id="detail-engine-badge" class="card-engine-badge" style="display:none;"></div>
            </div>
        </div>

        <section class="scrum-hero-panel">
            <span id="dash-sprint-status" class="scrum-kicker">Tactical operation: primed</span>
            <h2 class="scrum-hero-title">
                <span id="dash-sprint-title"></span>
                <span id="dash-sprint-hero-line" class="accent"></span>
            </h2>
            <p id="dash-sprint-goal" class="scrum-hero-goal"></p>

            <div class="scrum-hero-progress-meta">
                <span>Mission progress</span>
                <span id="dash-progress-percent">0% completed</span>
            </div>
            <div class="scrum-progress-track">
                <div id="dash-progress-bar" class="scrum-progress-fill" role="progressbar" style="width: 0%;"></div>
            </div>
            <div class="scrum-hero-caption">
                <span id="dash-progress-text">0 de 0 microtareas auditadas</span>
                <div class="d-flex gap-3 flex-wrap">
                    <button
                        class="btn btn-sm btn-link text-warning text-decoration-none p-0 d-inline-flex align-items-center gap-2"
                        data-bs-toggle="modal" data-bs-target="#modalReplanificar">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        Rescatar sprint
                    </button>
                    <button
                        class="btn btn-sm btn-link text-danger text-decoration-none p-0 d-inline-flex align-items-center gap-2"
                        data-bs-toggle="modal" data-bs-target="#modalAbortar">
                        <i class="bi bi-trash-fill"></i>
                        Abortar misión
                    </button>
                </div>
            </div>

            <div class="scrum-hero-stats">
                <div class="scrum-stat-card">
                    <div class="scrum-stat-label">Contrato</div>
                    <div class="scrum-stat-value" id="dash-stat-days">0 dias</div>
                </div>
                <div class="scrum-stat-card">
                    <div class="scrum-stat-label">Microtareas</div>
                    <div class="scrum-stat-value" id="dash-stat-tasks">0 / 0</div>
                </div>
                <div class="scrum-stat-card">
                    <div class="scrum-stat-label">Carga estimada</div>
                    <div class="scrum-stat-value" id="dash-stat-time">0m</div>
                </div>
            </div>
        </section>

        <div class="scrum-detail-grid">
            <section class="scrum-main-panel">
                <div class="scrum-panel-header">
                    <div>
                        <p class="scrum-panel-eyebrow">Execution board</p>
                        <h3 class="scrum-panel-title">Ejecucion diaria</h3>
                    </div>
                    <div class="scrum-day-legend">
                        Navega por el sprint y marca cada mini tarea solo cuando tengas evidencia lista para auditoria.
                    </div>
                </div>

                <div id="day-pagination-container" class="day-pagination"></div>
                <div id="day-content-container"></div>
            </section>

            <aside class="scrum-side-stack">
                <section class="scrum-side-panel is-success">
                    <h4 class="scrum-side-title is-success">
                        <i class="bi bi-check2-square"></i>
                        Criterio de entrega (DoD)
                    </h4>
                    <div id="dash-dod" class="scrum-side-list"></div>
                </section>

                <section class="scrum-side-panel is-danger">
                    <h4 class="scrum-side-title is-danger">
                        <i class="bi bi-exclamation-octagon"></i>
                        Zona roja (blockers)
                    </h4>
                    <div id="dash-blockers" class="scrum-side-list"></div>
                </section>
            </aside>
        </div>
    </div>

</div>

<!-- =============================================
     PLANIFICADOR NEURAL — MODAL STYLES
     ============================================= -->
<style>
    /* ── Modal Shell ── */
    #modalNuevoSprint .modal-dialog {
        max-width: 700px;
    }

    #modalNuevoSprint .modal-content {
        background: #080f1c;
        border: 1px solid rgba(100, 255, 140, 0.22) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(100, 255, 140, 0.04);
        font-family: 'Space Grotesk', sans-serif;
    }

    /* ── Header ── */
    .pn-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1.1rem 1.4rem 1rem;
        border-bottom: 1px solid rgba(100, 255, 140, 0.10);
        position: relative;
    }

    .pn-icon-chip {
        width: 38px;
        height: 38px;
        background: rgba(100, 255, 140, 0.10);
        border: 1px solid rgba(100, 255, 140, 0.35);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64ff8c;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .pn-header-text {
        flex: 1;
        min-width: 0;
    }

    .pn-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #e8f5ff;
        line-height: 1;
    }

    .pn-subtitle {
        margin: 0.2rem 0 0;
        font-size: 0.6rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #64ff8c;
        opacity: 0.7;
        font-weight: 500;
    }

    .pn-close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.35);
        font-size: 1.1rem;
        padding: 0.25rem;
        line-height: 1;
        transition: color 0.2s;
        flex-shrink: 0;
        margin-left: auto;
    }

    .pn-close-btn:hover {
        color: rgba(255, 255, 255, 0.75);
    }

    /* ── Body ── */
    .pn-body {
        padding: 1.4rem;
    }

    /* ── Field Group ── */
    .pn-field-group {
        margin-bottom: 1.35rem;
    }

    .pn-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.52rem;
    }

    .pn-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #6b7fa5;
    }

    .pn-label-tag {
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #3a4d6a;
        font-weight: 600;
    }

    /* ── Objective Input ── */
    .pn-objetivo-wrap {
        display: flex;
        align-items: center;
        background: #04090f;
        border: 1px solid rgba(100, 255, 140, 0.14);
        transition: border-color 0.2s;
    }

    .pn-objetivo-wrap:focus-within {
        border-color: rgba(100, 255, 140, 0.45);
    }

    .pn-obj-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #64ff8c;
        font-size: 1rem;
        border-right: 1px solid rgba(100, 255, 140, 0.10);
    }

    .pn-obj-input {
        flex: 1;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #c8d8f0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 0.85rem 1rem;
    }

    .pn-obj-input::placeholder {
        color: rgba(255, 255, 255, .3);
        text-transform: uppercase;
        font-size: 0.78rem;
        letter-spacing: 0.06em;
    }

    /* ── Selects Row ── */
    .pn-selects-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.85rem;
        margin-bottom: 1.35rem;
    }

    .pn-select-group {}

    .pn-select-wrap {
        position: relative;
        background: #04090f;
        border: 1px solid rgba(100, 255, 140, 0.12);
        transition: border-color 0.2s;
    }

    .pn-select-wrap:focus-within {
        border-color: rgba(100, 255, 140, 0.4);
    }

    .pn-select {
        width: 100%;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #b8ccec;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.78rem;
        font-weight: 500;
        padding: 0.72rem 2.4rem 0.72rem 0.9rem;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .pn-select option {
        background: #0a1626;
        color: #c8d8f0;
    }

    .pn-select-icon {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #64ff8c;
        font-size: 0.8rem;
        pointer-events: none;
        opacity: 0.7;
    }

    /* ── Textarea ── */
    .pn-textarea-wrap {
        position: relative;
        background: #04090f;
        border: 1px solid rgba(100, 255, 140, 0.12);
        transition: border-color 0.2s;
    }

    .pn-textarea-wrap:focus-within {
        border-color: rgba(100, 255, 140, 0.4);
    }

    .pn-textarea {
        width: 100%;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #8fa8cc;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.8rem;
        padding: 0.9rem 1rem 2rem;
        resize: none;
        min-height: 120px;
    }

    .pn-textarea::placeholder {
        color: rgba(255, 255, 255, .3);
        font-style: italic;
    }

    .pn-char-count {
        position: absolute;
        bottom: 0.55rem;
        right: 0.8rem;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        color: #2a3c58;
        font-weight: 600;
    }

    /* ── Deep Research Button ── */
    .pn-dr-btn {
        background: none;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #64ff8c;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 0.5rem 0;
        margin-top: 0.6rem;
        opacity: 0.85;
        transition: opacity 0.2s;
    }

    .pn-dr-btn:hover {
        opacity: 1;
    }

    .pn-dr-btn i {
        font-size: 0.75rem;
    }

    /* ── Deep Research Loader ── */
    .pn-dr-loader {
        background: rgba(0, 20, 40, 0.7);
        border: 1px solid rgba(13, 202, 240, 0.2);
        padding: 1rem 1.1rem;
        margin-bottom: 1.2rem;
    }

    /* ── System Ready Text ── */
    .pn-system-ready {
        text-align: center;
        font-size: 0.6rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #1e3520;
        font-weight: 700;
        padding: 0.65rem 0 1rem;
    }

    /* ── CTA Button ── */
    .pn-cta-btn {
        width: 100%;
        background: transparent;
        border: 1px solid rgba(100, 255, 140, 0.4);
        border-radius: 0;
        color: #64ff8c !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        padding: 1.05rem 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(100, 255, 140, 0.3);
    }

    .pn-cta-btn:hover {
        background: rgba(100, 255, 140, 0.08);
        border-color: #64ff8c;
        box-shadow: 5px 5px 0 rgba(100, 255, 140, 0.3);
        transform: translate(-2px, -2px);
    }

    .pn-cta-btn:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0 rgba(100, 255, 140, 0.3);
    }

    .pn-cta-btn i {
        font-size: 0.95rem;
    }

    /* ── Deep Research Results ── */
    .pn-dr-results {
        background: rgba(0, 15, 30, 0.8);
        border: 1px solid rgba(13, 202, 240, 0.2);
        margin-bottom: 1.2rem;
    }

    .pn-dr-results-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.55rem 0.9rem;
        border-bottom: 1px solid rgba(13, 202, 240, 0.12);
    }

    .pn-dr-results-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #0dcaf0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .pn-dr-toggle-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: #0dcaf0;
        font-size: 0.65rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-family: 'Space Grotesk', sans-serif;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-weight: 600;
    }

    /* Mobile */
    @media (max-width: 576px) {
        .pn-selects-row {
            grid-template-columns: 1fr;
        }

        .pn-body {
            padding: 1rem;
        }

        #modalNuevoSprint .modal-dialog {
            margin: 0.5rem;
        }
    }
</style>

<!-- Modal: Generador de Sprint — Planificador Neural -->
<div class="modal fade" id="modalNuevoSprint" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <!-- Header -->
            <div class="pn-header">
                <div class="pn-icon-chip">
                    <i class="bi bi-cpu-fill"></i>
                </div>
                <div class="pn-header-text">
                    <h5 class="pn-title">Planificador Neural</h5>
                    <p class="pn-subtitle">Encrypted Connection // ID: OBJ_<span id="pn-obj-id">0000</span></p>
                </div>
                <button type="button" class="pn-close-btn" data-bs-dismiss="modal" aria-label="Cerrar">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="pn-body">
                <div id="sprint-setup-form">

                    <!-- Objetivo -->
                    <div class="pn-field-group">
                        <div class="pn-label-row">
                            <span class="pn-label">Lo que deseas dominar</span>
                            <!-- <span class="pn-label-tag">System_Input_01</span> -->
                        </div>
                        <div class="pn-objetivo-wrap">
                            <div class="pn-obj-icon">
                                <i class="bi bi-record-circle"></i>
                            </div>
                            <input type="text" id="sprint-objetivo" class="pn-obj-input"
                                placeholder="Ej. Arquitectura de Microservicios con Rust"
                                oninput="document.getElementById('pn-obj-id').textContent = Math.abs(this.value.split('').reduce((a,c)=>((a<<5)-a)+c.charCodeAt(0),0)).toString().slice(0,4).padStart(4,'0')">
                        </div>
                    </div>

                    <!-- Selects Row -->
                    <div class="pn-selects-row">
                        <!-- Duración -->
                        <div class="pn-select-group">
                            <div class="pn-label-row"><span class="pn-label">Duración (Contrato)</span></div>
                            <div class="pn-select-wrap">
                                <select id="sprint-dias" class="pn-select">
                                    <option value="7">Microsprint (7 días)</option>
                                    <!-- <option value="14" selected>Sprints de 2 semanas</option> -->
                                    <option value="21">Consolidación (21 días)</option>
                                    <option value="30">Macro (30 días)</option>
                                </select>
                                <i class="bi bi-chevron-down pn-select-icon"></i>
                            </div>
                        </div>
                        <!-- Tiempo Diario -->
                        <div class="pn-select-group">
                            <div class="pn-label-row"><span class="pn-label">Tiempo Diario</span></div>
                            <div class="pn-select-wrap">
                                <select id="sprint-tiempo" class="pn-select">
                                    <option value="30 mins">30 mins (Mínimo)</option>
                                    <option value="1 hora">1 hora (Tactical)</option>
                                    <option value="2 horas" selected>2 horas (Tactical)</option>
                                    <option value="4 horas">4+ horas (Inmersivo)</option>
                                </select>
                                <i class="bi bi-clock pn-select-icon"></i>
                            </div>
                        </div>
                        <!-- Presión IA -->
                        <div class="pn-select-group">
                            <div class="pn-label-row"><span class="pn-label">Presión de la IA</span></div>
                            <div class="pn-select-wrap">
                                <select id="sprint-presion" class="pn-select">
                                    <option value="Táctico">Standard (Balanced)</option>
                                    <option value="Bootcamp">Bootcamp</option>
                                    <option value="Asimilación Forzada">Asimilación Forzada</option>
                                </select>
                                <i class="bi bi-lightning-charge pn-select-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Fundamentación / Contexto -->
                    <div class="pn-field-group">
                        <div class="pn-label-row">
                            <span class="pn-label">Fundamentación de la asignación</span>
                            <span class="pn-label-tag" id="context-char-count">0</span>
                        </div>
                        <div class="pn-textarea-wrap">
                            <textarea id="sprint-contexto" class="pn-textarea"
                                placeholder="Describa los objetivos estratégicos y el contexto de la misión..."
                                oninput="document.getElementById('context-char-count').textContent = this.value.length"></textarea>
                        </div>
                        <!-- Deep Research Button -->
                        <button type="button" class="pn-dr-btn" onclick="ScrumModule.iniciarDeepResearch()">
                            <img src="assets/img/gemini-color.svg" alt="Gemini 3 Flash"
                                onerror="this.src='assets/svg/github.svg'">
                            Optimizar Contexto con Deep Research Pro
                        </button>
                    </div>

                    <!-- Deep Research: Loader -->
                    <div id="deep-research-loader" class="pn-dr-loader d-none mb-3">
                        <div class="d-flex align-items-center mb-2 gap-2">
                            <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                            <strong class="text-info" style="font-size:0.75rem;letter-spacing:0.12em;">Deep Research
                                Agent Activo (1–5 min)</strong>
                        </div>
                        <div class="progress" style="height:3px;background:rgba(13,202,240,0.15);border-radius:0;">
                            <div id="dr-progress-bar"
                                class="progress-bar bg-info progress-bar-striped progress-bar-animated"
                                style="width:10%"></div>
                        </div>
                        <p id="dr-status-text" class="mt-2 mb-0 text-info"
                            style="font-size:0.7rem;letter-spacing:0.1em;">Iniciando sesión de investigación autónoma...
                        </p>
                    </div>

                    <!-- Deep Research: Results -->
                    <div id="deep-research-results" class="pn-dr-results d-none mb-3">
                        <div class="pn-dr-results-header">
                            <span class="pn-dr-results-label"><i class="bi bi-journal-text"></i> Master Research
                                Report</span>
                            <button type="button" class="pn-dr-toggle-btn"
                                onclick="document.getElementById('dr-full-report-container').classList.toggle('d-none')">
                                <i class="bi bi-eye"></i> Leer completo
                            </button>
                        </div>
                        <div id="dr-full-report-container" class="d-none p-3"
                            style="max-height:200px;overflow-y:auto;font-size:0.72rem;color:#6a8faf;">
                            <div id="dr-full-report-content" style="white-space:pre-wrap;"></div>
                        </div>
                    </div>

                    <!-- System Ready -->
                    <!-- <div class="pn-system-ready">System_Ready_For_Calculation</div> -->

                    <!-- CTA -->
                    <button class="pn-cta-btn" onclick="ScrumModule.generarSprint()">
                        <i class="bi bi-rocket-takeoff-fill"></i>
                        Procesar Sprint Neural
                    </button>

                </div><!-- /sprint-setup-form -->

                <!-- Sprint Loader -->
                <div id="sprint-loader" class="d-none text-center py-5">
                    <div class="spinner-grow text-success mb-3" role="status"
                        style="width:3rem;height:3rem;border-radius:0;"></div>
                    <h5 class="font-monospace" style="color:#64ff8c;letter-spacing:0.12em;font-size:0.9rem;">
                        Estructurando matriz operativa...</h5>
                    <p class="text-secondary small" id="sprint-loader-text">Analizando parámetros y capacidades.</p>
                </div>
            </div><!-- /pn-body -->

        </div>
    </div>
</div>

<!-- Modal: Replanificar Sprint (Rescate Groq) — REDESIGNED -->
<style>
    /* ── RESCUE Modal ── */
    #modalReplanificar .modal-dialog {
        max-width: 520px;
    }

    #modalReplanificar .modal-content {
        background: #0f1108;
        border: 1px solid rgba(254, 188, 46, 0.28) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(254, 188, 46, 0.04);
        font-family: 'Space Grotesk', sans-serif;
    }

    .rescue-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1.1rem 1.4rem 1rem;
        border-bottom: 1px solid rgba(254, 188, 46, 0.12);
    }

    .rescue-icon-chip {
        width: 38px;
        height: 38px;
        background: rgba(254, 188, 46, 0.10);
        border: 1px solid rgba(254, 188, 46, 0.40);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #febc2e;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .rescue-header-text {
        flex: 1;
        min-width: 0;
    }

    .rescue-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.0rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f5f0e0;
        line-height: 1;
    }

    .rescue-subtitle-tag {
        margin: 0.2rem 0 0;
        font-size: 0.58rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #febc2e;
        opacity: 0.6;
        font-weight: 600;
    }

    .rescue-close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.3);
        font-size: 1.1rem;
        padding: 0.25rem;
        line-height: 1;
        transition: color 0.2s;
        flex-shrink: 0;
        margin-left: auto;
    }

    .rescue-close-btn:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .rescue-body {
        padding: 1.4rem;
    }

    .rescue-desc {
        font-size: 0.78rem;
        color: #a09878;
        margin-bottom: 1.35rem;
        line-height: 1.55;
        letter-spacing: 0.01em;
        padding: 0.8rem 1rem;
        background: rgba(254, 188, 46, 0.05);
        border-left: 2px solid rgba(254, 188, 46, 0.3);
    }

    .rescue-field-group {
        margin-bottom: 1.2rem;
    }

    .rescue-label {
        display: block;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #febc2e;
        opacity: 0.7;
        margin-bottom: 0.52rem;
    }

    .rescue-input-wrap {
        display: flex;
        align-items: center;
        background: #080a02;
        border: 1px solid rgba(254, 188, 46, 0.16);
        transition: border-color 0.2s;
    }

    .rescue-input-wrap:focus-within {
        border-color: rgba(254, 188, 46, 0.5);
    }

    .rescue-input-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #febc2e;
        font-size: 0.9rem;
        border-right: 1px solid rgba(254, 188, 46, 0.10);
        opacity: 0.7;
    }

    .rescue-input {
        flex: 1;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #e8d89a;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.82rem;
        padding: 0.72rem 1rem;
        letter-spacing: 0.03em;
    }

    .rescue-input::placeholder {
        color: rgba(254, 188, 46, 0.2);
        font-style: italic;
    }

    .rescue-input[type=number] {
        max-width: 100px;
        font-weight: 700;
        font-size: 1rem;
    }

    .rescue-input[type=number]::-webkit-inner-spin-button,
    .rescue-input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .rescue-input[type=number] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .rescue-input[type=number]::-webkit-inner-spin-button,
    .rescue-input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .rescue-input[type=number] {
        -moz-appearance: textfield;
    }

    .rescue-loader-wrap {
        text-align: center;
        padding: 1.2rem 0;
    }

    .rescue-loader-label {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #febc2e;
        margin-top: 0.5rem;
    }

    .rescue-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.4rem;
        border-top: 1px solid rgba(254, 188, 46, 0.08);
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .rescue-footer-tag {
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(254, 188, 46, 0.25);
        font-weight: 600;
        flex: 1 1 100%;
    }

    .rescue-footer-actions {
        display: flex;
        gap: 0.6rem;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
    }

    .rescue-cancel-btn {
        background: transparent;
        border: 1px solid rgba(160, 160, 120, 0.2);
        cursor: pointer;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #8d97b5;
        padding: 0.8rem 1.4rem;
        transition: all 0.2s;
        border-radius: 0;
    }

    .rescue-cancel-btn:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .rescue-cta-btn {
        background: transparent;
        border: 1px solid rgba(254, 188, 46, 0.4);
        border-radius: 0;
        color: #febc2e !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 0.8rem 1.4rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(254, 188, 46, 0.25);
    }

    .rescue-cta-btn:hover {
        background: rgba(254, 188, 46, 0.08);
        border-color: #febc2e;
        box-shadow: 5px 5px 0 rgba(254, 188, 46, 0.25);
        transform: translate(-2px, -2px);
    }

    .rescue-cta-btn:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0 rgba(254, 188, 46, 0.25);
    }

    .rescue-cta-btn i {
        font-size: 0.9rem;
    }

    @media (max-width: 576px) {
        .rescue-body {
            padding: 1rem;
        }

        #modalReplanificar .modal-dialog {
            margin: 0.5rem;
            max-width: calc(100vw - 1rem);
        }

        .rescue-footer {
            padding: 0.75rem 1rem;
        }

        .rescue-footer-tag {
            font-size: 0.52rem;
        }

        .rescue-cta-btn,
        .rescue-cancel-btn {
            flex: 1;
            justify-content: center;
        }

        .rescue-input[type=number] {
            max-width: 80px;
        }
    }
</style>

<div class="modal fade" id="modalReplanificar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Header -->
            <div class="rescue-header">
                <div class="rescue-icon-chip">
                    <i class="bi bi-lightning-charge-fill"></i>
                </div>
                <div class="rescue-header-text">
                    <h5 class="rescue-title">Rescatar Sprint</h5>
                    <p class="rescue-subtitle-tag">COMPRESIÓN TÁCTICA // LLAMA 4 SCOUT</p>
                </div>
                <button type="button" class="rescue-close-btn" data-bs-dismiss="modal" aria-label="Cerrar">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="rescue-body">
                <div class="rescue-desc">
                    &iquest;Te atrasaste? Llama 4 Scout recalcular&aacute; el backlog pendiente y priorizar&aacute;
                    tareas vitales bas&aacute;ndose en el tiempo que te queda.
                </div>

                <!-- Día estancado -->
                <div class="rescue-field-group">
                    <label class="rescue-label">D&iacute;a en el que te estancaste (Aprox)</label>
                    <div class="rescue-input-wrap">
                        <div class="rescue-input-icon"><i class="bi bi-calendar-event"></i></div>
                        <input type="number" id="rescue-day" class="rescue-input" min="1" value="1">
                    </div>
                </div>

                <!-- Explicar problema -->
                <div class="rescue-field-group" style="margin-bottom:0;">
                    <label class="rescue-label">Explica el problema</label>
                    <div class="rescue-input-wrap" style="align-items:flex-start;">
                        <div class="rescue-input-icon"
                            style="height:auto;min-height:80px;align-content:center; justify-content:center;padding-left:0;">
                            <i class="bi bi-chat-square-text"></i>
                        </div>
                        <textarea id="rescue-excuse" class="rescue-input" rows="3"
                            style="resize:none;min-height:80px;padding-top:0.72rem;"
                            placeholder="Ej: No tuve tiempo el mi&eacute;rcoles, solo hice HTML pero no el CSS."></textarea>
                    </div>
                </div>

                <!-- Loader -->
                <div id="rescue-loader" class="rescue-loader-wrap d-none">
                    <div class="spinner-border mb-2" role="status"
                        style="width:1.8rem;height:1.8rem;color:#febc2e;border-width:2px;"></div>
                    <p class="rescue-loader-label mb-0">Compresi&oacute;n T&aacute;ctica Activa (Llama 4 Scout)</p>
                </div>
            </div>

            <!-- Footer -->
            <div class="rescue-footer">
                <span class="rescue-footer-tag">MOTOR: LLAMA 4 SCOUT // GROQ</span>
                <div class="rescue-footer-actions">
                    <button type="button" class="rescue-cancel-btn" data-bs-dismiss="modal">CANCELAR</button>
                    <button id="btn-fire-rescue" type="button" class="rescue-cta-btn"
                        onclick="ScrumModule.ejecutarReplanificacion()">
                        <i class="bi bi-magic"></i> RECALCULAR AHORA
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal: Abortar Sprint — REDESIGNED -->
<style>
    /* ── ABORT Modal ── */
    #modalAbortar .modal-dialog {
        max-width: 480px;
    }

    #modalAbortar .modal-content {
        background: #120808;
        border: 1px solid rgba(255, 60, 40, 0.28) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 60, 40, 0.04);
        font-family: 'Space Grotesk', sans-serif;
    }

    .abort-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1.1rem 1.4rem 1rem;
        border-bottom: 1px solid rgba(255, 60, 40, 0.14);
    }

    .abort-icon-chip {
        width: 38px;
        height: 38px;
        background: rgba(255, 60, 40, 0.12);
        border: 1px solid rgba(255, 60, 40, 0.45);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff4428;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .abort-header-text {
        flex: 1;
    }

    .abort-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.0rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #f5e0e0;
        line-height: 1;
    }

    .abort-subtitle-tag {
        margin: 0.2rem 0 0;
        font-size: 0.58rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #ff4428;
        opacity: 0.55;
        font-weight: 600;
    }

    .abort-close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.3);
        font-size: 1.1rem;
        padding: 0.25rem;
        line-height: 1;
        transition: color 0.2s;
        flex-shrink: 0;
        margin-left: auto;
    }

    .abort-close-btn:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .abort-body {
        padding: 1.4rem;
    }

    /* Warning box */
    .abort-warning-box {
        border: 1px solid rgba(255, 60, 40, 0.22);
        border-left: 3px solid #ff4428;
        background: rgba(255, 40, 20, 0.07);
        padding: 1rem 1.1rem;
        margin-bottom: 1.4rem;
    }

    .abort-warning-title {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #ff6650;
        margin-bottom: 0.45rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .abort-warning-body {
        font-size: 0.78rem;
        color: #c09090;
        line-height: 1.55;
        margin: 0;
    }

    /* Consequences list */
    .abort-consequences {
        list-style: none;
        padding: 0;
        margin: 0 0 1.4rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .abort-consequence-item {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        font-size: 0.75rem;
        color: #907878;
        line-height: 1.45;
    }

    .abort-consequence-item i {
        color: #ff4428;
        opacity: 0.7;
        font-size: 0.7rem;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    /* Confirm input */
    .abort-confirm-wrap {
        background: #0a0404;
        border: 1px solid rgba(255, 60, 40, 0.18);
        margin-bottom: 0;
        transition: border-color 0.2s;
        display: flex;
        align-items: center;
    }

    .abort-confirm-wrap:focus-within {
        border-color: rgba(255, 60, 40, 0.5);
    }

    .abort-confirm-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #ff4428;
        font-size: 0.9rem;
        border-right: 1px solid rgba(255, 60, 40, 0.10);
        opacity: 0.7;
    }

    .abort-confirm-input {
        flex: 1;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #e89090;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.8rem;
        padding: 0.72rem 1rem;
        letter-spacing: 0.05em;
    }

    .abort-confirm-input::placeholder {
        color: rgba(255, 100, 80, 0.25);
        font-style: italic;
    }

    .abort-confirm-label {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 60, 40, 0.45);
        margin-bottom: 0.5rem;
        display: block;
    }

    /* Footer */
    .abort-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.4rem;
        border-top: 1px solid rgba(255, 60, 40, 0.10);
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .abort-footer-tag {
        font-size: 0.55rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 60, 40, 0.2);
        font-weight: 600;
        flex: 1 1 100%;
    }

    .abort-footer-actions {
        display: flex;
        gap: 0.6rem;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
    }

    .abort-keep-btn {
        background: transparent;
        border: 1px solid rgba(160, 120, 120, 0.2);
        cursor: pointer;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #8d97b5;
        padding: 0.82rem 1.3rem;
        transition: all 0.2s;
        border-radius: 0;
    }

    .abort-keep-btn:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .abort-cta-btn {
        background: transparent;
        border: 1px solid rgba(255, 60, 40, 0.4);
        border-radius: 0;
        color: #ff4428 !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 0.82rem 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(255, 60, 40, 0.25);
        white-space: nowrap;
    }

    .abort-cta-btn:hover {
        background: rgba(255, 40, 20, 0.08);
        border-color: #ff4428;
        box-shadow: 5px 5px 0 rgba(255, 60, 40, 0.25);
        transform: translate(-2px, -2px);
    }

    .abort-cta-btn:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0 rgba(255, 60, 40, 0.25);
    }

    .abort-cta-btn i {
        font-size: 0.9rem;
    }

    @media (max-width: 576px) {
        .abort-body {
            padding: 1rem;
        }

        #modalAbortar .modal-dialog {
            margin: 0.5rem;
            max-width: calc(100vw - 1rem);
        }

        .abort-footer {
            padding: 0.75rem 1rem;
        }

        .abort-footer-tag {
            font-size: 0.5rem;
        }

        .abort-cta-btn,
        .abort-keep-btn {
            flex: 1;
            justify-content: center;
        }

        .abort-consequences {
            gap: 0.4rem;
        }

        .abort-consequence-item {
            font-size: 0.72rem;
        }
    }
</style>

<div class="modal fade" id="modalAbortar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Header -->
            <div class="abort-header">
                <div class="abort-icon-chip">
                    <i class="bi bi-exclamation-octagon-fill"></i>
                </div>
                <div class="abort-header-text">
                    <h5 class="abort-title">Abortar Misi&oacute;n</h5>
                    <p class="abort-subtitle-tag">ACCIÓN IRREVERSIBLE // CICLO REINICIADO</p>
                </div>
                <button type="button" class="abort-close-btn" data-bs-dismiss="modal" aria-label="Cerrar">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="abort-body">

                <!-- Warning box -->
                <div class="abort-warning-box">
                    <div class="abort-warning-title">
                        <i class="bi bi-shield-exclamation"></i> ADVERTENCIA DEL SISTEMA
                    </div>
                    <p class="abort-warning-body">
                        &iquest;Est&aacute;s seguro que deseas abortar este sprint? Perder&aacute;s todo el progreso y
                        se reiniciar&aacute; el ciclo. Esta acci&oacute;n no se puede deshacer.
                    </p>
                </div>

                <!-- Consequences -->
                <ul class="abort-consequences">
                    <li class="abort-consequence-item">
                        <i class="bi bi-x-circle-fill"></i>
                        Todo el progreso del sprint actual ser&aacute; eliminado permanentemente.
                    </li>
                    <li class="abort-consequence-item">
                        <i class="bi bi-x-circle-fill"></i>
                        Las tareas completadas no ser&aacute;n registradas en el historial.
                    </li>
                    <li class="abort-consequence-item">
                        <i class="bi bi-x-circle-fill"></i>
                        El backlog volver&aacute; a su estado inicial. El ciclo se reinicia desde cero.
                    </li>
                </ul>

            </div>

            <!-- Footer -->
            <div class="abort-footer">
                <span class="abort-footer-tag">SPRINT_ID: CURRENT // STATUS: ACTIVE</span>
                <div class="abort-footer-actions">
                    <button type="button" class="abort-keep-btn" data-bs-dismiss="modal">MANTENER PLAN</button>
                    <button id="btn-fire-abort" type="button" class="abort-cta-btn"
                        onclick="ScrumModule.eliminarSprint()">
                        <i class="bi bi-trash-fill"></i> S&Iacute;, ABORTAR
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Modal: Auditoría de Proof of Work — REDESIGNED -->
<style>
    #modalProofOfWork .modal-dialog {
        max-width: 700px;
    }

    #modalProofOfWork .modal-content {
        background: #0e1420;
        border: 1px solid rgba(100, 255, 140, 0.22) !important;
        border-radius: 0 !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(100, 255, 140, 0.04);
        font-family: 'Space Grotesk', sans-serif;
    }

    .pow-header {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1.1rem 1.4rem 1rem;
        border-bottom: 1px solid rgba(100, 255, 140, 0.10);
    }

    .pow-icon-chip {
        width: 38px;
        height: 38px;
        background: rgba(100, 255, 140, 0.10);
        border: 1px solid rgba(100, 255, 140, 0.35);
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64ff8c;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .pow-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #e8f5ff;
        line-height: 1;
    }

    .pow-close-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.35);
        font-size: 1.1rem;
        padding: 0.25rem;
        line-height: 1;
        transition: color 0.2s;
        flex-shrink: 0;
        margin-left: auto;
    }

    .pow-close-btn:hover {
        color: rgba(255, 255, 255, 0.75);
    }

    .pow-body {
        padding: 1.4rem;
    }

    .pow-subtitle {
        font-size: 0.78rem;
        color: #8fa8cc;
        margin-bottom: 1.4rem;
        line-height: 1.5;
        letter-spacing: 0.01em;
    }

    .pow-section-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.55rem;
    }

    .pow-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #64ff8c;
    }

    .pow-label-tag {
        font-size: 0.58rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #3a5a3a;
        font-weight: 600;
    }

    .pow-editor-wrap {
        background: #070d14;
        border: 1px solid rgba(100, 255, 140, 0.14);
        margin-bottom: 1.35rem;
        transition: border-color 0.2s;
    }

    .pow-editor-wrap:focus-within {
        border-color: rgba(100, 255, 140, 0.4);
    }

    .pow-editor-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.45rem 0.85rem;
        border-bottom: 1px solid rgba(100, 255, 140, 0.08);
    }

    .pow-editor-dots {
        display: flex;
        gap: 0.35rem;
        align-items: center;
    }

    .pow-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .pow-dot-red {
        background: #ff5f57;
    }

    .pow-dot-yellow {
        background: #febc2e;
    }

    .pow-dot-green {
        background: #28c840;
    }

    .pow-editor-filename {
        font-size: 0.58rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #4a6080;
        font-weight: 600;
    }

    .pow-editor-lines {
        display: flex;
        min-height: 110px;
    }

    .pow-line-nums {
        padding: 0.75rem 0.7rem;
        border-right: 1px solid rgba(100, 255, 140, 0.06);
        display: flex;
        flex-direction: column;
        min-width: 36px;
        user-select: none;
    }

    .pow-line-num {
        font-size: 0.7rem;
        color: #2a3c58;
        font-family: 'Courier New', monospace;
        line-height: 1.65;
        text-align: right;
    }

    .pow-textarea {
        flex: 1;
        background: transparent;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        color: #b8e08a;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.82rem;
        padding: 0.75rem 1rem;
        resize: none;
        min-height: 110px;
        line-height: 1.65;
    }

    .pow-textarea::placeholder {
        color: rgba(180, 220, 130, 0.25);
        font-style: italic;
    }

    .pow-screenshots-section {
        margin-bottom: 1.35rem;
    }

    .pow-slot-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 0.55rem;
    }

    .pow-slot {
        background: #080f18;
        border: 1px solid rgba(100, 255, 140, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1.6rem 1rem;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
        min-height: 105px;
        position: relative;
        overflow: hidden;
    }

    .pow-slot:hover {
        border-color: rgba(100, 255, 140, 0.35);
        background: rgba(100, 255, 140, 0.04);
    }

    .pow-slot-icon {
        color: #3a5a3a;
        font-size: 1.5rem;
    }

    .pow-slot-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #3a5060;
    }

    .pow-slot-img-preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }

    .pow-slot.has-image .pow-slot-img-preview {
        display: block;
    }

    .pow-slot.has-image .pow-slot-icon,
    .pow-slot.has-image .pow-slot-label {
        display: none;
    }

    .pow-feedback-banner {
        border-left: 3px solid #ff5f40;
        background: rgba(255, 60, 20, 0.08);
        border-top: 1px solid rgba(255, 60, 20, 0.2);
        border-right: 1px solid rgba(255, 60, 20, 0.2);
        border-bottom: 1px solid rgba(255, 60, 20, 0.2);
        padding: 0.9rem 1rem;
        margin-bottom: 1.35rem;
    }

    .pow-feedback-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #ff7050;
        margin-bottom: 0.5rem;
    }

    .pow-feedback-body {
        font-size: 0.77rem;
        color: #c0a898;
        line-height: 1.55;
        margin-bottom: 0;
    }

    .pow-feedback-meta {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        font-size: 0.6rem;
        font-family: 'Courier New', monospace;
        color: #3a5060;
        letter-spacing: 0.1em;
        margin-top: 0.6rem;
    }

    .pow-loader-wrap {
        text-align: center;
        padding: 1.2rem 0;
    }

    .pow-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.4rem;
        border-top: 1px solid rgba(100, 255, 140, 0.08);
        gap: 0.75rem;
    }

    .pow-footer-left {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .pow-stakeholder-icon {
        color: #3a5060;
        font-size: 0.95rem;
    }

    .pow-stakeholder-label {
        font-size: 0.6rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #3a5060;
        font-weight: 600;
    }

    .pow-footer-right {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .pow-abort-btn {
        background: transparent;
        border: 1px solid rgba(160, 160, 120, 0.2);
        cursor: pointer;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #8d97b5;
        padding: 0.8rem 1.4rem;
        transition: all 0.2s;
        border-radius: 0;
    }

    .pow-abort-btn:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .pow-cta-btn {
        background: transparent;
        border: 1px solid rgba(100, 255, 140, 0.4);
        border-radius: 0;
        color: #64ff8c !important;
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.20em;
        text-transform: uppercase;
        padding: 0.82rem 1.3rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        box-shadow: 3px 3px 0 rgba(100, 255, 140, 0.3);
        white-space: nowrap;
    }

    .pow-cta-btn:hover {
        background: rgba(100, 255, 140, 0.08);
        border-color: #64ff8c;
        box-shadow: 5px 5px 0 rgba(100, 255, 140, 0.3);
        transform: translate(-2px, -2px);
    }

    .pow-cta-btn:active {
        transform: translate(0, 0);
        box-shadow: 1px 1px 0 rgba(100, 255, 140, 0.3);
    }

    .pow-cta-btn i {
        font-size: 0.9rem;
    }

    @media (max-width: 576px) {
        .pow-slot-grid {
            grid-template-columns: 1fr;
        }

        .pow-body {
            padding: 1rem;
        }

        .pow-footer {
            flex-wrap: wrap;
        }

        #modalProofOfWork .modal-dialog {
            margin: 0.5rem;
        }
    }
</style>

<div class="modal fade" id="modalProofOfWork" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">

            <!-- Header -->
            <div class="pow-header">
                <div class="pow-icon-chip">
                    <i class="bi bi-shield-fill-check"></i>
                </div>
                <h5 class="pow-title">Auditor&iacute;a Proof of Work</h5>
                <button type="button" class="pow-close-btn" data-bs-dismiss="modal" aria-label="Cerrar">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <!-- Body -->
            <div class="pow-body">
                <p class="pow-subtitle">Pega tu c&oacute;digo, commit, documento o URL que demuestre
                    emp&iacute;ricamente que has completado la tarea.</p>

                <!-- Editor POW -->
                <div class="pow-section-row">
                    <span class="pow-label">Evidencia del Trabajo (POW)</span>
                    <span class="pow-label-tag">SYSTEM INTEGRITY: VERIFIED</span>
                </div>
                <div class="pow-editor-wrap">
                    <div class="pow-editor-bar">
                        <div class="pow-editor-dots">
                            <span class="pow-dot pow-dot-red"></span>
                            <span class="pow-dot pow-dot-yellow"></span>
                            <span class="pow-dot pow-dot-green"></span>
                        </div>
                        <span class="pow-editor-filename" id="pow-filename">POW_V2.PY</span>
                    </div>
                    <div class="pow-editor-lines">
                        <div class="pow-line-nums" id="pow-line-nums">
                            <span class="pow-line-num">1</span>
                            <span class="pow-line-num">2</span>
                            <span class="pow-line-num">3</span>
                        </div>
                        <textarea id="pow-evidencia" class="pow-textarea" rows="5"
                            placeholder="# Pega tu c&oacute;digo, commit, logs o URL al repositorio..."
                            oninput="ScrumModule.updatePowLines ? ScrumModule.updatePowLines(this) : null"></textarea>
                    </div>
                </div>

                <!-- Capturas -->
                <div class="pow-screenshots-section">
                    <div class="pow-section-row">
                        <span class="pow-label">Capturas de Pantalla (Opcional)</span>
                        <span class="pow-label-tag">MAX FILE SIZE: 5MB</span>
                    </div>
                    <div class="pow-slot-grid">
                        <label class="pow-slot" id="pow-slot-1">
                            <input type="file" accept="image/*" class="d-none"
                                onchange="if(ScrumModule.loadPowImage) ScrumModule.loadPowImage(this,1); else { var r=new FileReader(); r.onload=e=>{ document.getElementById('pow-img-1').src=e.target.result; document.getElementById('pow-slot-1').classList.add('has-image'); }; r.readAsDataURL(this.files[0]); }">
                            <i class="bi bi-cloud-arrow-up pow-slot-icon"></i>
                            <span class="pow-slot-label">A&ntilde;adir Imagen</span>
                            <img class="pow-slot-img-preview" id="pow-img-1" alt="Screenshot 1">
                        </label>
                        <label class="pow-slot" id="pow-slot-2">
                            <input type="file" accept="image/*" class="d-none"
                                onchange="if(ScrumModule.loadPowImage) ScrumModule.loadPowImage(this,2); else { var r=new FileReader(); r.onload=e=>{ document.getElementById('pow-img-2').src=e.target.result; document.getElementById('pow-slot-2').classList.add('has-image'); }; r.readAsDataURL(this.files[0]); }">
                            <i class="bi bi-image pow-slot-icon"></i>
                            <span class="pow-slot-label">SLOT: 02/02</span>
                            <img class="pow-slot-img-preview" id="pow-img-2" alt="Screenshot 2">
                        </label>
                    </div>
                </div>

                <!-- Feedback Banner -->
                <div id="auditor-feedback" class="pow-feedback-banner d-none">
                    <div class="pow-feedback-title">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                        AUDITOR&Iacute;A FALLIDA
                    </div>
                    <p class="pow-feedback-body" id="pow-feedback-text"></p>
                    <div class="pow-feedback-meta" id="pow-feedback-meta"></div>
                </div>

                <!-- Loader -->
                <div id="pow-loader" class="pow-loader-wrap d-none">
                    <div class="spinner-grow text-success mb-2" role="status" style="width:1.8rem;height:1.8rem;"></div>
                    <p class="pow-label mt-2 mb-0">El Auditor Despiadado est&aacute; evaluando tu evidencia...</p>
                </div>
            </div>

            <!-- Footer -->
            <div class="pow-footer">
                <div class="pow-footer-left">
                    <i class="bi bi-people-fill pow-stakeholder-icon"></i>
                    <i class="bi bi-chat-dots pow-stakeholder-icon"></i>
                    <span class="pow-stakeholder-label">ACTIVE STAKEHOLDERS: 2</span>
                </div>
                <div class="pow-footer-right">
                    <button type="button" class="pow-abort-btn" data-bs-dismiss="modal">ABORTAR</button>
                    <button id="btn-submit-pow" class="pow-cta-btn" onclick="ScrumModule.enviarAuditoria()">
                        <i class="bi bi-hammer"></i> SOMETER A AUDITOR&Iacute;A
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="assets/js/scrum.js?v=<?= time() ?>"></script>
User / IP	: 216.73.216.183
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64