/* ==========================================================================
   Gest-proyect · tema sobre Bootstrap 5.3
   Bootstrap resuelve la retícula, los formularios y los componentes básicos.
   Aquí van la identidad visual y lo que Bootstrap no trae: el Gantt, la línea
   de tiempo y la regla de tiempo de las tarjetas.
   ========================================================================== */

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

/* --------------------------------------------------------------------------
   Tokens · el teal es la marca, el coral significa «ahora» y sólo eso
   -------------------------------------------------------------------------- */
:root {
    --gp-ink: #0e1c1b;
    --gp-teal: #0f6b63;
    --gp-teal-bright: #14a08f;
    --gp-amber: #d98a1f;
    --gp-coral: #e2543c;
    --gp-indigo: #6461c8;
    --gp-slate: #5d6f6d;

    --gp-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

    /* Estados: en curso en ámbar (trabajo caliente), terminado en el teal
       de marca, coral reservado a bloqueos y retrasos. */
    --st-todo: #94a3a1;
    --st-in_progress: var(--gp-amber);
    --st-blocked: var(--gp-coral);
    --st-review: var(--gp-indigo);
    --st-done: var(--gp-teal);

    /* Bootstrap: sustituimos el azul por el teal en todo el sistema */
    --bs-primary: #0f6b63;
    --bs-primary-rgb: 15, 107, 99;
    --bs-link-color: #0d5c55;
    --bs-link-color-rgb: 13, 92, 85;
    --bs-link-hover-color: #0a4741;
    --bs-body-bg: #eef2f3;
    --bs-body-color: #1c2b2a;
    --bs-secondary-color: rgba(28, 43, 42, .65);
    --bs-border-color: #d9e1e1;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .35rem;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --gp-surface: #fff;
    --gp-surface-2: #f6f9f9;
    --gp-shadow: 0 1px 2px rgba(14, 28, 27, .06), 0 6px 18px rgba(14, 28, 27, .05);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0c1514;
    --bs-body-color: #dde6e5;
    --bs-border-color: #24322f;
    --bs-link-color: #4bbfae;
    --bs-link-color-rgb: 75, 191, 174;
    --bs-link-hover-color: #6fd0c1;
    --bs-emphasis-color: #f3f8f7;
    --bs-secondary-color: rgba(221, 230, 229, .65);
    --bs-tertiary-bg: #16211f;

    --gp-surface: #131e1d;
    --gp-surface-2: #16211f;
    --gp-ink: #0a1211;
    --gp-slate: #93a5a3;
    --gp-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --st-todo: #6f807e;
}

body {
    background:
        radial-gradient(1200px 400px at 80% -8%, rgba(15, 107, 99, .07), transparent 60%),
        var(--bs-body-bg);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, .display-font, .navbar-brand, .stat-value, .gantt-head-cell {
    font-family: var(--gp-display);
    letter-spacing: -.015em;
}

h1 { font-size: 1.6rem; font-weight: 600; }
h2 { font-size: 1.05rem; font-weight: 600; }
h3 { font-size: .9rem; font-weight: 600; }

.text-num { font-variant-numeric: tabular-nums; }
.eyebrow {
    font-family: var(--gp-display);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--gp-slate);
}

.card {
    --bs-card-bg: var(--gp-surface);
    --bs-card-border-color: var(--bs-border-color);
    box-shadow: var(--gp-shadow);
}
.card-header {
    background: var(--gp-surface-2);
    font-weight: 600;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
}

.btn { font-weight: 550; }
.btn-primary { --bs-btn-bg: var(--gp-teal); --bs-btn-border-color: var(--gp-teal); --bs-btn-hover-bg: #0c5851; --bs-btn-hover-border-color: #0c5851; --bs-btn-active-bg: #0a4741; }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--gp-surface-2); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--bs-border-color); }

.form-label { font-size: .78rem; font-weight: 600; color: var(--gp-slate); margin-bottom: .25rem; }
.form-control, .form-select { background-color: var(--gp-surface); }
.form-control:focus, .form-select:focus { border-color: var(--gp-teal-bright); box-shadow: 0 0 0 .2rem rgba(20, 160, 143, .18); }
.form-check-input:checked { background-color: var(--gp-teal); border-color: var(--gp-teal); }
.form-range::-webkit-slider-thumb { background: var(--gp-teal); }
.form-range::-moz-range-thumb { background: var(--gp-teal); }

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */
.navbar-gp {
    background: var(--gp-ink);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.navbar-gp .navbar-brand { color: #fff; font-weight: 700; display: flex; align-items: center; gap: .55rem; }
.navbar-gp .navbar-brand span { color: var(--gp-teal-bright); }
.navbar-gp .nav-link { color: rgba(255, 255, 255, .72); font-weight: 550; border-radius: .4rem; padding: .35rem .7rem; }
.navbar-gp .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.navbar-gp .nav-link.active { color: #fff; background: rgba(20, 160, 143, .22); }
.navbar-gp .navbar-toggler { border-color: rgba(255, 255, 255, .2); }
.navbar-gp .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.brand-mark {
    width: 26px; height: 26px; border-radius: 7px; flex: none; position: relative;
    background: linear-gradient(140deg, var(--gp-teal-bright), var(--gp-teal) 70%);
}
.brand-mark::after {
    content: ""; position: absolute; left: 5px; top: 7px;
    width: 16px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .95);
    box-shadow: 0 6px 0 rgba(255, 255, 255, .5), 0 -6px 0 rgba(255, 255, 255, .75);
}
.brand-mark-lg { width: 46px; height: 46px; border-radius: 13px; }
.brand-mark-lg::after { left: 9px; top: 13px; width: 28px; height: 4px; box-shadow: 0 10px 0 rgba(255,255,255,.5), 0 -10px 0 rgba(255,255,255,.75); }

/* --------------------------------------------------------------------------
   Avatares y distintivos
   -------------------------------------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--avatar-color, var(--gp-teal)); color: #fff;
    font-family: var(--gp-display); font-size: .72rem; font-weight: 600;
}
.avatar-sm { width: 1.6rem; height: 1.6rem; font-size: .62rem; }
.avatar-xs { width: 1.35rem; height: 1.35rem; font-size: .55rem; }
.avatar-stack .avatar { margin-left: -.4rem; border: 2px solid var(--gp-surface); }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-more { background: var(--bs-border-color); color: var(--gp-slate); }

.status-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; display: inline-block; background: var(--st-todo); }
.status-dot.status-in_progress { background: var(--st-in_progress); }
.status-dot.status-blocked { background: var(--st-blocked); }
.status-dot.status-review { background: var(--st-review); }
.status-dot.status-done { background: var(--st-done); }

.badge-status { font-weight: 600; color: #fff; background: var(--st-todo); }
.badge-status.status-in_progress { background: var(--st-in_progress); }
.badge-status.status-blocked { background: var(--st-blocked); }
.badge-status.status-review { background: var(--st-review); }
.badge-status.status-done { background: var(--st-done); }

.status-select { border-left: .28rem solid var(--st-todo); font-weight: 600; }
.status-select.status-in_progress { border-left-color: var(--st-in_progress); }
.status-select.status-blocked { border-left-color: var(--st-blocked); }
.status-select.status-review { border-left-color: var(--st-review); }
.status-select.status-done { border-left-color: var(--st-done); }

.project-chip::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem;
    border-radius: .15rem; background: var(--chip-color, var(--gp-teal)); margin-right: .35rem;
}

/* --------------------------------------------------------------------------
   Métricas
   -------------------------------------------------------------------------- */
.stat-value { font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .75rem; color: var(--gp-slate); }
.stat-alert .stat-value { color: var(--gp-coral); }

/* --------------------------------------------------------------------------
   Regla de tiempo · el avance real frente al calendario consumido.
   La marca coral dice dónde estamos hoy: si va por delante de la barra,
   el proyecto consume calendario más rápido de lo que avanza.
   -------------------------------------------------------------------------- */
.timeruler { position: relative; height: .5rem; border-radius: .25rem; background: var(--bs-border-color); overflow: visible; }
.timeruler-fill { position: absolute; inset: 0 auto 0 0; border-radius: .25rem; background: var(--gp-teal); }
.timeruler-now {
    position: absolute; top: -.2rem; bottom: -.2rem; width: 2px;
    background: var(--gp-coral); border-radius: 1px;
}
.timeruler-now::after {
    content: ""; position: absolute; top: -.22rem; left: 50%; transform: translateX(-50%);
    width: .38rem; height: .38rem; border-radius: 50%; background: var(--gp-coral);
}
.timeruler-legend { display: flex; justify-content: space-between; font-size: .68rem; color: var(--gp-slate); margin-top: .3rem; }
.timeruler-behind .timeruler-fill { background: var(--gp-amber); }

/* --------------------------------------------------------------------------
   Tarjetas de proyecto
   -------------------------------------------------------------------------- */
.project-card { border-left: 3px solid var(--project-color, var(--gp-teal)); transition: transform .12s ease, box-shadow .12s ease; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14, 28, 27, .12); }
.project-card a.stretched-link { color: inherit; }

/* --------------------------------------------------------------------------
   Diagrama de Gantt
   -------------------------------------------------------------------------- */
.gantt { display: flex; align-items: stretch; --side-width: 17rem; }
.gantt-side { width: var(--side-width); flex: none; border-right: 1px solid var(--bs-border-color); background: var(--gp-surface); z-index: 2; }
.gantt-side-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 3.5rem; padding: 0 .75rem;
    background: var(--gp-surface-2); border-bottom: 1px solid var(--bs-border-color);
}
.gantt-side-rows { list-style: none; margin: 0; padding: 0; }
.gantt-side-row {
    display: flex; align-items: center; gap: .5rem;
    height: var(--row-height, 38px); padding: 0 .75rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.gantt-side-row:hover { background: var(--gp-surface-2); }
.gantt-side-row.is-child { padding-left: 1.75rem; }
.gantt-side-title { flex: 1; min-width: 0; color: var(--bs-body-color); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-side-title:hover { color: var(--gp-teal); }

.gantt-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; }
.gantt-canvas { position: relative; min-width: 100%; }

.gantt-head { background: var(--gp-surface-2); border-bottom: 1px solid var(--bs-border-color); }
.gantt-head-top, .gantt-head-bottom { position: relative; height: 1.75rem; }
.gantt-head-top { border-bottom: 1px solid var(--bs-border-color); }
.gantt-head-cell {
    position: absolute; top: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-left: 1px solid var(--bs-border-color);
    font-size: .7rem; color: var(--gp-slate); overflow: hidden; font-variant-numeric: tabular-nums;
}
.gantt-head-top .gantt-head-cell { align-items: flex-start; padding-left: .5rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.gantt-head-cell small { font-size: .58rem; opacity: .75; line-height: 1; }
.gantt-head-cell.is-weekend { background: rgba(14, 28, 27, .035); }
.gantt-head-cell.is-today { background: var(--gp-coral); color: #fff; font-weight: 700; }
.gantt-head-cell.is-today small { color: rgba(255, 255, 255, .85); }

.gantt-body { position: relative; }
.gantt-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bs-border-color); }
.gantt-rowline { position: absolute; left: 0; right: 0; height: 1px; background: var(--bs-border-color); }
.gantt-weekend { position: absolute; top: 0; bottom: 0; background: rgba(14, 28, 27, .03); }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gp-coral); z-index: 4; }
.gantt-today::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: .45rem; height: .45rem; border-radius: 50%; background: var(--gp-coral);
}

.gantt-links { position: absolute; inset: 0; pointer-events: none; z-index: 3; color: var(--gp-slate); }
.gantt-link { fill: none; stroke: var(--bs-border-color); stroke-width: 1.4; }
[data-bs-theme="dark"] .gantt-link { stroke: #3c4d4a; }
.gantt-link.is-late { stroke: var(--gp-coral); stroke-dasharray: 4 3; }

.gantt-bar {
    position: absolute; height: 1.6rem;
    background: var(--st-todo); border-radius: .3rem;
    display: flex; align-items: center; overflow: hidden;
    box-shadow: 0 1px 3px rgba(14, 28, 27, .22);
    z-index: 5;
}
.gantt[data-can-edit="1"] .gantt-bar { cursor: grab; }
.gantt-bar.is-dragging { cursor: grabbing; z-index: 20; opacity: .92; box-shadow: 0 8px 22px rgba(14, 28, 27, .3); }
.gantt-bar.status-in_progress { background: var(--st-in_progress); }
.gantt-bar.status-blocked { background: var(--st-blocked); }
.gantt-bar.status-review { background: var(--st-review); }
.gantt-bar.status-done { background: var(--st-done); }
.gantt-bar.is-overdue { box-shadow: 0 0 0 1.5px var(--gp-coral), 0 1px 3px rgba(14, 28, 27, .22); }

.gantt-bar-fill { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .3); pointer-events: none; }
.gantt-bar-label {
    position: relative; padding: 0 .55rem; color: #fff;
    font-size: .74rem; font-weight: 550; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.gantt-bar-label:hover { color: #fff; }

.gantt-handle { position: absolute; top: 0; bottom: 0; width: .45rem; cursor: ew-resize; z-index: 6; }
.gantt-handle-start { left: 0; }
.gantt-handle-end { right: 0; }
.gantt-bar:hover .gantt-handle { background: rgba(255, 255, 255, .35); }

.gantt-milestone {
    position: absolute; width: 1.05rem; height: 1.05rem;
    margin-top: .65rem; margin-left: -.52rem;
    background: var(--gp-amber); transform: rotate(45deg);
    border-radius: .15rem; z-index: 6; box-shadow: 0 1px 3px rgba(14, 28, 27, .3);
}
.gantt-milestone.status-done { background: var(--st-done); }
.gantt-milestone a { display: block; width: 100%; height: 100%; }

.zoom-group .btn.active { background: var(--gp-teal); border-color: var(--gp-teal); color: #fff; }
.legend-swatch { display: inline-block; width: .8rem; height: .5rem; border-radius: .15rem; background: var(--st-todo); }
.legend-swatch.status-in_progress { background: var(--st-in_progress); }
.legend-swatch.status-blocked { background: var(--st-blocked); }
.legend-swatch.status-review { background: var(--st-review); }
.legend-swatch.status-done { background: var(--st-done); }

/* --------------------------------------------------------------------------
   Línea de tiempo · misma regla vertical que el Gantt
   -------------------------------------------------------------------------- */
.timeline-day-label {
    display: inline-block; padding: .15rem .6rem; margin: .75rem 0 .25rem;
    background: var(--bs-border-color); color: var(--gp-slate);
    border-radius: 1rem; font-family: var(--gp-display);
    font-size: .7rem; font-weight: 600; letter-spacing: .03em;
}
.timeline-item { display: flex; gap: .75rem; padding: .6rem 0; position: relative; }
.timeline-item::before {
    content: ""; position: absolute; left: .97rem; top: 2.5rem; bottom: -.6rem;
    width: 2px; background: var(--bs-border-color);
}
.timeline-item:last-child::before { display: none; }
.timeline-item.is-pinned { background: rgba(217, 138, 31, .07); border-radius: .5rem; padding-inline: .5rem; margin-inline: -.5rem; }

.timeline-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; flex: none; border-radius: 50%;
    background: var(--gp-surface-2); border: 1px solid var(--bs-border-color);
    color: var(--gp-slate); font-size: .85rem; z-index: 1;
}
.timeline-icon.event-note { color: var(--gp-slate); }
.timeline-icon.event-call { background: rgba(15, 107, 99, .1); border-color: rgba(15, 107, 99, .25); color: var(--gp-teal); }
.timeline-icon.event-attachment { background: rgba(100, 97, 200, .1); border-color: rgba(100, 97, 200, .25); color: var(--gp-indigo); }
.timeline-icon.event-milestone { background: rgba(217, 138, 31, .12); border-color: rgba(217, 138, 31, .3); color: var(--gp-amber); }
.timeline-icon.event-status { background: var(--gp-surface-2); }

.timeline-content { flex: 1; min-width: 0; }
.timeline-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .75rem; color: var(--gp-slate); }
.timeline-actions { margin-left: auto; opacity: 0; transition: opacity .12s; }
.timeline-item:hover .timeline-actions, .timeline-actions:focus-within { opacity: 1; }
.timeline-body { margin-top: .2rem; overflow-wrap: anywhere; }
.attachment-thumb img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .35rem; border: 1px solid var(--bs-border-color); }

.composer-tab.active { background: var(--gp-teal); border-color: var(--gp-teal); color: #fff; }

/* --------------------------------------------------------------------------
   Acceso
   -------------------------------------------------------------------------- */
.login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(20, 160, 143, .16), transparent 65%),
        var(--bs-body-bg);
}
.login-card { width: 100%; max-width: 25rem; }

/* --------------------------------------------------------------------------
   Detalles finales
   -------------------------------------------------------------------------- */
.hover-row:hover { background: var(--gp-surface-2); }
.table > :not(caption) > * > * { background-color: transparent; }
.toast-container { z-index: 1090; }
.cursor-pointer { cursor: pointer; }

@media (max-width: 767.98px) {
    .gantt { --side-width: 9.5rem; }
    .gantt-side-head { height: 3.5rem; }
    h1 { font-size: 1.3rem; }
    .stat-value { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .project-card:hover { transform: none; }
}

@media print {
    .navbar, .btn, .toast-container, .composer, .nav-tabs, form.filters { display: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .gantt-scroll { overflow: visible; }
}