Tul xxx Tul

Viewing: index.php

<?php
// Ocean Board - Trello-inspired replacement for Kanban AI.
require_once __DIR__ . '/../../config/database.php';
require_once __DIR__ . '/ocean_helpers.php';

$db = getDB();
$uid = (int) $_SESSION['user_id'];
$duo = getDuoId();

oceanEnsureSchema($db);
oceanMigrateLegacyBoards($db, $uid, $duo);

$requestedBoardId = isset($_GET['board']) ? (int) $_GET['board'] : 0;
$initialState = oceanBuildState($db, $uid, $duo, $requestedBoardId);
$stateJson = json_encode(
    $initialState,
    JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
);
?>

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

    .ocean-module {
        --ocean-blue: #0079bf;
        --ocean-blue-2: #0c95e8;
        --ocean-blue-3: #0747a6;
        --ocean-cyan: #38bdf8;
        --ocean-ink: #07111f;
        --ocean-panel: #0b1220;
        --ocean-panel-2: #111827;
        --ocean-list: #0c1728;
        --ocean-card: #111f33;
        --ocean-muted: #94a3b8;
        --ocean-line: rgba(148, 163, 184, 0.22);
        --ocean-hard-shadow: 5px 5px 0 rgba(2, 6, 23, 0.34);
        color: #e5edf7;
        font-family: Inter, sans-serif;
        min-height: calc(100vh - 86px);
        padding-bottom: 24px;
    }

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

    .ocean-module *,
    .ocean-modal *,
    .ocean-modal .modal-content,
    .ocean-modal .form-control,
    .ocean-modal .form-select,
    .ocean-modal .btn-close {
        border-radius: 0 !important;
    }

    .ocean-module button,
    .ocean-module input,
    .ocean-module textarea,
    .ocean-module select {
        font-family: inherit;
    }

    .ocean-shell {
        display: grid;
        gap: 12px;
    }

    .ocean-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        background:
            linear-gradient(90deg, rgba(56, 189, 248, 0.1), transparent 48%),
            #06101d;
        border: 1px solid rgba(56, 189, 248, 0.36);
        border-left: 5px solid var(--ocean-cyan);
        box-shadow: var(--ocean-hard-shadow);
    }

    .ocean-title-wrap {
        min-width: 0;
    }

    .ocean-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
        color: #7dd3fc;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .ocean-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.35rem, 1.85vw, 2rem);
        font-weight: 800;
        letter-spacing: 0;
        color: #f8fafc;
    }

    .ocean-subtitle {
        margin: 5px 0 0;
        color: #9fb5cf;
        max-width: 720px;
        line-height: 1.45;
        font-size: 0.94rem;
    }

    .ocean-top-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }

    .ocean-btn,
    .ocean-icon-btn {
        border: 1px solid rgba(125, 211, 252, 0.42);
        background: #0b1627;
        color: #e0f2fe;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 800;
        box-shadow: 3px 3px 0 rgba(56, 189, 248, 0.12);
        transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    }

    .ocean-btn {
        padding: 9px 13px;
    }

    .ocean-icon-btn {
        width: 42px;
        height: 42px;
        padding: 0;
    }

    .ocean-btn:hover,
    .ocean-icon-btn:hover {
        transform: translate(-2px, -2px);
        background: #0c2742;
        border-color: rgba(125, 211, 252, 0.72);
        color: #fff;
        box-shadow: 5px 5px 0 rgba(56, 189, 248, 0.2);
    }

    .ocean-btn-primary {
        background: #0079bf;
        border-color: #7dd3fc;
        color: #fff;
        box-shadow: 4px 4px 0 rgba(2, 132, 199, 0.35);
    }

    .ocean-btn-danger {
        border-color: rgba(248, 113, 113, 0.42);
        color: #fecaca;
        box-shadow: 3px 3px 0 rgba(248, 113, 113, 0.12);
    }

    .ocean-meta-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    .ocean-workspace {
        display: grid;
        grid-template-columns: minmax(230px, 284px) minmax(0, 1fr);
        gap: 12px;
        min-height: 680px;
    }

    .ocean-sidebar {
        background:
            linear-gradient(180deg, rgba(8, 23, 39, 0.98), rgba(3, 10, 20, 0.98));
        border: 1px solid rgba(56, 189, 248, 0.26);
        border-top: 4px solid rgba(56, 189, 248, 0.7);
        padding: 14px;
        min-height: 100%;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.26);
    }

    .ocean-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 12px;
        color: #dbeafe;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .ocean-board-list {
        display: grid;
        gap: 10px;
    }

    .ocean-board-item {
        width: 100%;
        text-align: left;
        border: 1px solid rgba(56, 189, 248, 0.14);
        border-left: 4px solid transparent;
        background: rgba(15, 23, 42, 0.78);
        color: #dbeafe;
        padding: 11px 12px;
        display: grid;
        gap: 4px;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
    }

    .ocean-board-item:hover,
    .ocean-board-item.is-active {
        border-color: rgba(56, 189, 248, 0.58);
        border-left-color: var(--ocean-cyan);
        background: rgba(8, 47, 73, 0.62);
    }

    .ocean-board-item-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        font-weight: 800;
    }

    .ocean-board-item-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ocean-board-item-meta {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        color: #93a4b8;
        font-size: 0.76rem;
    }

    .ocean-board-area {
        min-width: 0;
        background:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(135deg, rgba(0, 121, 191, 0.97), rgba(7, 71, 166, 0.92));
        background-size: 32px 32px, 32px 32px, auto;
        border: 1px solid rgba(125, 211, 252, 0.34);
        border-top: 4px solid rgba(125, 211, 252, 0.78);
        min-height: 680px;
        overflow: hidden;
        position: relative;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 5px 5px 0 rgba(0, 0, 0, 0.24);
    }

    .ocean-empty {
        min-height: 680px;
        display: grid;
        place-items: center;
        padding: 24px;
        text-align: center;
    }

    .ocean-empty-panel {
        width: min(520px, 100%);
        background: rgba(7, 17, 31, 0.9);
        border: 1px solid rgba(125, 211, 252, 0.3);
        border-left: 5px solid var(--ocean-cyan);
        padding: 26px;
        box-shadow: var(--ocean-hard-shadow);
    }

    .ocean-empty-panel i {
        color: #7dd3fc;
        font-size: 2.2rem;
    }

    .ocean-board-shell {
        height: 100%;
        min-height: 680px;
        display: flex;
        flex-direction: column;
    }

    .ocean-board-toolbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 16px;
        background:
            linear-gradient(90deg, rgba(7, 17, 31, 0.76), rgba(8, 47, 73, 0.5));
        border-bottom: 1px solid rgba(226, 232, 240, 0.2);
        backdrop-filter: blur(12px);
    }

    .ocean-board-name {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.35rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .ocean-board-desc {
        margin: 4px 0 0;
        max-width: 760px;
        color: rgba(241, 245, 249, 0.84);
        line-height: 1.45;
    }

    .ocean-board-stats {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .ocean-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        padding: 4px 9px;
        border: 1px solid rgba(226, 232, 240, 0.18);
        background: rgba(7, 17, 31, 0.6);
        color: #e0f2fe;
        font-size: 0.78rem;
        font-weight: 800;
    }

    .ocean-toolbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .ocean-ai-summary {
        display: none;
        margin: 12px 16px 0;
        padding: 11px 12px;
        border: 1px solid rgba(125, 211, 252, 0.34);
        background: rgba(7, 17, 31, 0.58);
        border-left: 4px solid var(--ocean-cyan);
        color: #e0f2fe;
        line-height: 1.45;
    }

    .ocean-ai-summary.is-visible {
        display: flex;
        align-items: flex-start;
        gap: 9px;
    }

    .ocean-lists {
        flex: 1;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(286px, 318px);
        align-items: start;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 16px 16px 20px;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
    }

    .ocean-lists::-webkit-scrollbar {
        height: 12px;
    }

    .ocean-lists::-webkit-scrollbar-track {
        background: rgba(7, 17, 31, 0.34);
    }

    .ocean-lists::-webkit-scrollbar-thumb {
        background: rgba(125, 211, 252, 0.52);
    }

    .ocean-list {
        max-height: calc(100vh - 210px);
        min-height: 154px;
        background: var(--ocean-list);
        color: #dbeafe;
        border: 1px solid rgba(125, 211, 252, 0.26);
        border-top: 4px solid rgba(125, 211, 252, 0.78);
        box-shadow: var(--ocean-hard-shadow);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .ocean-list-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 11px 12px 9px;
        background: linear-gradient(90deg, rgba(14, 165, 233, 0.16), rgba(15, 23, 42, 0));
        border-bottom: 1px solid rgba(125, 211, 252, 0.12);
    }

    .ocean-list-title {
        margin: 0;
        font-size: 0.94rem;
        font-weight: 800;
        color: #f8fafc;
        overflow-wrap: anywhere;
    }

    .ocean-list-actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .ocean-mini-btn {
        width: 30px;
        height: 30px;
        border: 1px solid transparent;
        background: rgba(15, 23, 42, 0.22);
        color: #9cc7e4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ocean-mini-btn:hover {
        border-color: rgba(125, 211, 252, 0.44);
        background: rgba(14, 165, 233, 0.16);
        color: #f8fafc;
    }

    .ocean-card-dropzone {
        min-height: 86px;
        padding: 8px;
        display: grid;
        gap: 8px;
        overflow-y: auto;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 80%);
    }

    .ocean-card-dropzone:empty::after {
        content: "";
        display: block;
        min-height: 48px;
        border: 1px dashed rgba(125, 211, 252, 0.22);
        background: rgba(2, 6, 23, 0.12);
    }

    .ocean-card-dropzone.is-drag-over {
        background: rgba(14, 165, 233, 0.18);
        outline: 2px dashed rgba(125, 211, 252, 0.55);
        outline-offset: -2px;
    }

    .ocean-card {
        border: 1px solid rgba(125, 211, 252, 0.18);
        border-left: 4px solid #38bdf8;
        background: var(--ocean-card);
        color: #dbeafe;
        padding: 10px;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
        cursor: grab;
        display: grid;
        gap: 8px;
        transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    }

    .ocean-card:hover {
        transform: translate(-1px, -1px);
        border-color: rgba(125, 211, 252, 0.46);
        box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.26);
    }

    .ocean-card:active {
        cursor: grabbing;
    }

    .ocean-card.is-dragging {
        opacity: 0.45;
    }

    .ocean-card-title {
        margin: 0;
        color: #f8fafc;
        font-weight: 800;
        font-size: 0.92rem;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }

    .ocean-card-desc {
        color: #9fb5cf;
        font-size: 0.8rem;
        line-height: 1.36;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ocean-card-labels {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .ocean-label {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 2px 7px;
        border: 1px solid rgba(125, 211, 252, 0.22);
        background: rgba(14, 165, 233, 0.16);
        color: #bae6fd;
        font-size: 0.68rem;
        font-weight: 800;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .ocean-label.priority-alta {
        border-color: rgba(248, 113, 113, 0.38);
        background: rgba(127, 29, 29, 0.38);
        color: #fecaca;
    }

    .ocean-label.priority-media {
        border-color: rgba(251, 191, 36, 0.35);
        background: rgba(113, 63, 18, 0.35);
        color: #fde68a;
    }

    .ocean-label.priority-baja {
        border-color: rgba(52, 211, 153, 0.34);
        background: rgba(6, 78, 59, 0.36);
        color: #bbf7d0;
    }

    .ocean-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        color: #8ba4bf;
        font-size: 0.74rem;
        font-weight: 800;
    }

    .ocean-card-meta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }

    .ocean-add-card {
        margin: 0 8px 8px;
        border: 1px dashed rgba(125, 211, 252, 0.22);
        background: rgba(2, 6, 23, 0.14);
        color: #bfd8ef;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        padding: 8px;
        font-weight: 800;
    }

    .ocean-add-card:hover {
        border-color: rgba(125, 211, 252, 0.58);
        background: rgba(14, 165, 233, 0.16);
        color: #ffffff;
    }

    .ocean-activity {
        margin: 0 16px 16px;
        display: grid;
        gap: 6px;
    }

    .ocean-activity-row {
        color: rgba(226, 232, 240, 0.72);
        font-size: 0.78rem;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .ocean-modal .modal-content {
        border: 1px solid rgba(56, 189, 248, 0.28);
        border-top: 4px solid rgba(56, 189, 248, 0.72);
        background: #07111f;
        color: #e2e8f0;
        box-shadow: 8px 8px 0 rgba(2, 6, 23, 0.42), 0 28px 90px rgba(0, 0, 0, 0.5);
    }

    .ocean-modal .modal-header,
    .ocean-modal .modal-footer {
        border-color: rgba(148, 163, 184, 0.15);
    }

    .ocean-modal .form-control,
    .ocean-modal .form-select {
        border-color: rgba(148, 163, 184, 0.22);
        background-color: #0f172a;
        color: #f8fafc;
    }

    .ocean-modal .form-control:focus,
    .ocean-modal .form-select:focus {
        border-color: #38bdf8;
        box-shadow: 0 0 0 0.18rem rgba(56, 189, 248, 0.18);
    }

    .ocean-modal .form-label {
        color: #bfdbfe;
        font-weight: 800;
        font-size: 0.82rem;
    }

    .ocean-loading {
        pointer-events: none;
        opacity: 0.64;
    }

    @media (max-width: 992px) {
        .ocean-workspace {
            grid-template-columns: 1fr;
        }

        .ocean-sidebar {
            min-height: auto;
        }

        .ocean-board-list {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        }
    }

    @media (max-width: 640px) {
        .ocean-topbar,
        .ocean-board-toolbar {
            align-items: stretch;
            flex-direction: column;
        }

        .ocean-top-actions,
        .ocean-toolbar-actions {
            justify-content: flex-start;
        }

        .ocean-lists {
            grid-auto-columns: minmax(86vw, 86vw);
            padding: 12px;
        }
    }
</style>

<div class="ocean-module fade-in-up" id="ocean-board-app">
    <div class="ocean-shell">
        <header class="ocean-topbar">
            <div class="ocean-title-wrap">
                <span class="ocean-kicker"><i class="bi bi-water"></i> Ocean Edition</span>
                <h1 class="ocean-title">Ocean Board</h1>
                <p class="ocean-subtitle">Tableros, listas y tarjetas para ordenar el dia sin perder el ritmo visual de ProgressBros.</p>
            </div>
            <div class="ocean-top-actions">
                <button type="button" class="ocean-icon-btn" data-ocean-action="open-ai" title="Organizar con Llama 3.3">
                    <img class="ocean-meta-icon" src="assets/img/meta-color.svg" alt="Meta">
                </button>
                <button type="button" class="ocean-btn ocean-btn-primary" data-ocean-action="new-board">
                    <i class="bi bi-plus-lg"></i>
                    <span>Tablero</span>
                </button>
            </div>
        </header>

        <div class="ocean-workspace">
            <aside class="ocean-sidebar">
                <div class="ocean-sidebar-head">
                    <span><i class="bi bi-kanban me-1"></i> Tableros</span>
                    <button type="button" class="ocean-mini-btn" data-ocean-action="new-board" title="Nuevo tablero">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="ocean-board-list" id="ocean-boards-list"></div>
            </aside>

            <section class="ocean-board-area">
                <div class="ocean-empty d-none" id="ocean-empty">
                    <div class="ocean-empty-panel">
                        <i class="bi bi-kanban d-block mb-3"></i>
                        <h2 class="h4 fw-bold text-white mb-2">Crea tu primer Ocean Board</h2>
                        <p class="text-light opacity-75 mb-4">Un tablero limpio para capturar ideas, ordenar prioridades y mover tareas hasta hecho.</p>
                        <button type="button" class="ocean-btn ocean-btn-primary mx-auto" data-ocean-action="new-board">
                            <i class="bi bi-plus-lg"></i>
                            <span>Nuevo tablero</span>
                        </button>
                    </div>
                </div>

                <div class="ocean-board-shell d-none" id="ocean-board-shell">
                    <div class="ocean-board-toolbar">
                        <div>
                            <h2 class="ocean-board-name" id="ocean-active-title"></h2>
                            <p class="ocean-board-desc" id="ocean-active-description"></p>
                            <div class="ocean-board-stats" id="ocean-board-stats"></div>
                        </div>
                        <div class="ocean-toolbar-actions">
                            <button type="button" class="ocean-icon-btn" data-ocean-action="edit-board" title="Editar tablero">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button type="button" class="ocean-icon-btn" data-ocean-action="new-list" title="Nueva lista">
                                <i class="bi bi-layout-three-columns"></i>
                            </button>
                            <button type="button" class="ocean-icon-btn" data-ocean-action="open-ai" title="IA">
                                <img class="ocean-meta-icon" src="assets/img/meta-color.svg" alt="Meta">
                            </button>
                            <button type="button" class="ocean-icon-btn ocean-btn-danger" data-ocean-action="delete-board" title="Eliminar tablero">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>

                    <div class="ocean-ai-summary" id="ocean-ai-summary"></div>
                    <div class="ocean-lists" id="ocean-lists"></div>
                    <div class="ocean-activity" id="ocean-activity"></div>
                </div>
            </section>
        </div>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanBoardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" id="ocean-board-form">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="oceanBoardModalTitle">Tablero</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ocean-board-id">
                <div class="mb-3">
                    <label class="form-label" for="ocean-board-title">Nombre</label>
                    <input type="text" class="form-control" id="ocean-board-title" maxlength="180" required>
                </div>
                <div>
                    <label class="form-label" for="ocean-board-description">Descripcion</label>
                    <textarea class="form-control" id="ocean-board-description" rows="4" maxlength="2000"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="ocean-btn" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="ocean-btn ocean-btn-primary"><i class="bi bi-check2"></i> Guardar</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanListModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <form class="modal-content" id="ocean-list-form">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="oceanListModalTitle">Lista</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ocean-list-id">
                <label class="form-label" for="ocean-list-title">Nombre</label>
                <input type="text" class="form-control" id="ocean-list-title" maxlength="140" required>
            </div>
            <div class="modal-footer">
                <button type="button" class="ocean-btn" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="ocean-btn ocean-btn-primary"><i class="bi bi-check2"></i> Guardar</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanCardModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <form class="modal-content" id="ocean-card-form">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="oceanCardModalTitle">Tarjeta</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ocean-card-id">
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label" for="ocean-card-title">Titulo</label>
                        <input type="text" class="form-control" id="ocean-card-title" maxlength="220" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="ocean-card-list">Lista</label>
                        <select class="form-select" id="ocean-card-list"></select>
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="ocean-card-description">Descripcion</label>
                        <textarea class="form-control" id="ocean-card-description" rows="4" maxlength="8000"></textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="ocean-card-priority">Prioridad</label>
                        <select class="form-select" id="ocean-card-priority">
                            <option value="media">Media</option>
                            <option value="alta">Alta</option>
                            <option value="baja">Baja</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="ocean-card-due">Fecha</label>
                        <input type="date" class="form-control" id="ocean-card-due">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="ocean-card-labels">Etiquetas</label>
                        <input type="text" class="form-control" id="ocean-card-labels" maxlength="500">
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="ocean-card-checklist">Checklist</label>
                        <textarea class="form-control" id="ocean-card-checklist" rows="4" maxlength="3000"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="ocean-btn ocean-btn-danger d-none" id="ocean-card-delete-btn">
                    <i class="bi bi-archive"></i> Archivar
                </button>
                <div class="d-flex gap-2 ms-auto">
                    <button type="button" class="ocean-btn" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="ocean-btn ocean-btn-primary"><i class="bi bi-check2"></i> Guardar</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanAIModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title fw-bold d-flex align-items-center gap-2">
                        <img class="ocean-meta-icon" src="assets/img/meta-color.svg" alt="Meta"> Llama 3.3
                    </h5>
                    <div class="text-secondary small">Asistente de organización</div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label" for="ocean-ai-objective">Objetivo</label>
                    <textarea class="form-control" id="ocean-ai-objective" rows="4" maxlength="3000"></textarea>
                </div>
                <div>
                    <label class="form-label" for="ocean-ai-context">Contexto</label>
                    <textarea class="form-control" id="ocean-ai-context" rows="3" maxlength="4000"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="ocean-btn" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="ocean-btn" data-ocean-action="ai-reorganize"><i class="bi bi-stars"></i> Ordenar</button>
                <button type="button" class="ocean-btn ocean-btn-primary" data-ocean-action="ai-plan">
                    <img class="ocean-meta-icon" src="assets/img/meta-color.svg" alt="Meta"> Crear tarjetas
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body p-4 text-center">
                <i class="bi bi-exclamation-diamond fs-1 text-info d-block mb-3"></i>
                <h5 class="fw-bold text-white" id="ocean-confirm-title">Confirmar</h5>
                <p class="text-secondary mb-4" id="ocean-confirm-text"></p>
                <div class="d-flex justify-content-center gap-2">
                    <button type="button" class="ocean-btn" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="ocean-btn ocean-btn-danger" id="ocean-confirm-ok">Confirmar</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade ocean-modal" id="oceanMessageModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="ocean-message-title">Ocean Board</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0" id="ocean-message-text"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="ocean-btn ocean-btn-primary" data-bs-dismiss="modal">Listo</button>
            </div>
        </div>
    </div>
</div>

<script>
    window.__oceanInitialState = <?= $stateJson ?: '{}' ?>;
</script>
<script src="assets/js/kanban.js?v=<?= time() ?>"></script>
User / IP	: 216.73.216.159
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