/* ============================================================
   Proyectos UlterCore — tema visual «Pizarra»
   Marca: rojo #E73235 (escaso: acciones, urgencias y logo) sobre
   una interfaz de azules pizarra y grises acero fríos.
   ============================================================ */

:root {
    --uc-accent: #e73235;
    --uc-accent-dark: #c4272a;
    --uc-accent-darker: #9e1f22;
    --uc-black: #0a0a0a;
    --uc-chrome: #243447;
    --uc-steel: #51637a;
    --uc-steel-dark: #3d4c5c;
    --uc-gradient: linear-gradient(135deg, #e73235, #b22225);
    --uc-bg: #eef1f4;
    --uc-ink: #1c2733;
    --uc-surface: #ffffff;
    --uc-column-bg: #e2e7ec;
    --uc-border: rgba(36, 52, 71, 0.11);
    --uc-radius: 1rem;
    --uc-shadow: 0 1px 2px rgba(28, 39, 51, 0.05), 0 10px 28px -14px rgba(28, 39, 51, 0.18);
}

/* ---- Modo oscuro: la misma pizarra, con el fondo hundido y tinta clara ---- */
[data-bs-theme='dark'] {
    --uc-bg: #14181d;
    --uc-ink: #eef2f6;
    --uc-surface: #1d232a;
    --uc-column-bg: #191f26;
    --uc-border: rgba(223, 228, 234, 0.12);
    --uc-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px -14px rgba(0, 0, 0, 0.5);
}

body {
    /* Se pisan las variables de Bootstrap para que utilidades como
       bg-body-secondary / bg-body-tertiary sigan la paleta pizarra. */
    --bs-secondary-bg: #eef1f4;
    --bs-tertiary-bg: #e2e7ec;
    --bs-body-color: #1c2733;
    background: var(--uc-bg);
    color: var(--uc-ink);
    font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
}

[data-bs-theme='dark'] body {
    --bs-secondary-bg: #14181d;
    --bs-tertiary-bg: #191f26;
    --bs-body-color: #eef2f6;
    /* Texto secundario (text-muted, form-text...) más legible sobre oscuro */
    --bs-secondary-color: #b4c0cc;
    --bs-tertiary-color: #93a1af;
}

/* Los títulos llevan la variante Display, más compacta y con más carácter */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Badges: chips pequeños y rotundos, como en la propuesta */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0.4rem;
    padding: 0.32em 0.6em;
}

/* ---- Navbar ---- */
.uc-navbar {
    background: var(--uc-navbar-bg, var(--uc-chrome));
    box-shadow: 0 2px 16px rgba(16, 26, 36, 0.35);
}

.uc-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.2px;
}

.uc-logo {
    /* Dimensiones fijas (ratio 7.38): sin salto de layout mientras carga */
    height: 22px;
    width: 162px;
    object-fit: contain;
    display: block;
}

.uc-brand {
    line-height: 1;
}

.uc-brand-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin-top: 2px;
}

.uc-logo-lg {
    height: 34px;
    width: 251px;
}

.uc-text-gradient {
    background: var(--uc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.uc-navbar .nav-link {
    border-radius: 0.5rem;
    padding: 0.3rem 0.7rem;
    margin-right: 0.15rem;
    font-size: 0.9375rem;
}

.uc-navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Sección activa resaltada */
.uc-navbar .nav-link.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* ---- Menú lateral (offcanvas) ----
   En móvil es un panel deslizante; en lg+ Bootstrap lo muestra en línea. */
.uc-nav-actions .navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .uc-drawer {
        background: var(--uc-navbar-bg, var(--uc-chrome));
        width: min(320px, 85vw);
    }

    .uc-drawer .nav-link {
        color: rgba(255, 255, 255, 0.85);
        padding: 0.65rem 0.8rem;
        margin-bottom: 0.15rem;
        border-radius: 0.6rem;
        font-size: 1rem;
    }

    .uc-drawer .nav-link:hover,
    .uc-drawer .nav-link.active {
        color: #fff;
    }

    .uc-drawer .nav-link i {
        width: 1.5em;
        text-align: center;
        margin-right: 0.15rem;
    }
}

/* En escritorio el drawer ocupa el hueco central para empujar el buscador
   a la derecha, junto a las acciones. */
@media (min-width: 992px) {
    .uc-drawer,
    .uc-drawer .offcanvas-body {
        flex-grow: 1;
    }
}

.uc-search .input-group-text {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.uc-search .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    min-width: 190px;
}

.uc-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.uc-search .form-control:focus {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
    border-color: rgba(231, 50, 53, 0.75);
    color: #fff;
}

/* ---- Notificaciones (campana) ---- */
.uc-notifications {
    width: min(320px, 92vw);
    max-height: 420px;
    overflow-y: auto;
}

.uc-bell-badge {
    font-size: 0.62rem;
}

/* ---- Superficies ---- */
.card {
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius);
    box-shadow: var(--uc-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--uc-border);
    font-weight: 600;
}

.btn {
    border-radius: 0.65rem;
}

.btn-primary {
    --bs-btn-bg: var(--uc-accent);
    --bs-btn-border-color: var(--uc-accent);
    --bs-btn-hover-bg: var(--uc-accent-dark);
    --bs-btn-hover-border-color: var(--uc-accent-dark);
    --bs-btn-active-bg: var(--uc-accent-darker);
    --bs-btn-active-border-color: var(--uc-accent-darker);
    --bs-btn-disabled-bg: #f2989a;
    --bs-btn-disabled-border-color: #f2989a;
}

.btn-outline-primary {
    --bs-btn-color: var(--uc-accent-dark);
    --bs-btn-border-color: #f0aeb0;
    --bs-btn-hover-bg: var(--uc-accent);
    --bs-btn-hover-border-color: var(--uc-accent);
    --bs-btn-active-bg: var(--uc-accent-dark);
    --bs-btn-active-border-color: var(--uc-accent-dark);
}

.form-control,
.form-select {
    border-radius: 0.65rem;
}

main .form-control:focus,
main .form-select:focus {
    border-color: #9fb2c4;
    box-shadow: 0 0 0 0.25rem rgba(81, 99, 122, 0.15);
}

.progress-bar.bg-primary {
    background: linear-gradient(135deg, #51637a, #3d4c5c) !important;
}

.breadcrumb {
    font-size: 0.85rem;
}

/* ---- Avatares con iniciales ---- */
.uc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dde5ec;
    color: var(--uc-steel-dark);
    font-size: 0.68rem;
    font-weight: 700;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.uc-avatar + .uc-avatar {
    margin-left: -9px;
}

.uc-avatar-nav {
    background: var(--uc-gradient);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* ---- Listado de proyectos ---- */
.uc-project-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.uc-project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(28, 39, 51, 0.06), 0 18px 38px -14px rgba(28, 39, 51, 0.3);
}

.uc-project-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Variante compacta para la vista de lista */
.uc-project-icon-sm {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.9rem;
}

/* ---- Tablero ---- */
.board {
    min-height: calc(100vh - 260px);
}

.board-column {
    width: 300px;
    min-width: 300px;
}

.board-column.card {
    background: var(--uc-column-bg);
    border: none;
    border-radius: 0.8rem;
    box-shadow: none;
}

/* Cabecera de columna plana, sin línea divisoria (como en la propuesta) */
.board-column > .card-header {
    border-bottom: 0;
    background: transparent;
    padding-bottom: 0.15rem;
    font-size: 0.875rem;
}

.board-card-list {
    min-height: 12px;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.board-card {
    cursor: grab;
    border-radius: 0.55rem;
    border: 1px solid var(--uc-border);
    box-shadow: 0 1px 3px rgba(36, 52, 71, 0.1);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.board-card:hover {
    border-color: rgba(81, 99, 122, 0.45);
    box-shadow: 0 4px 14px -6px rgba(36, 52, 71, 0.35);
}

/* Filete rojo: reservado a lo verdaderamente urgente */
.board-card.uc-card-critical {
    border-left: 3px solid var(--uc-accent);
}

/* El «Sin tarjetas.» de las vistas agrupadas desaparece en cuanto hay alguna */
.board-card-list:has(.board-card) .uc-empty-hint {
    display: none;
}

/* Barras del gráfico de flujo del dashboard */
.uc-flow-bar {
    background: linear-gradient(180deg, #51637a, #3d4c5c);
    min-height: 2px;
    max-width: 46px;
}

/* ---- Vista calendario ---- */
.uc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.uc-cal-head {
    margin-bottom: 0;
}

.uc-cal-day {
    background: var(--uc-column-bg);
    border-radius: 0.45rem;
    min-height: 92px;
    padding: 4px;
    min-width: 0;
}

.uc-cal-out {
    opacity: 0.45;
}

.uc-cal-today {
    box-shadow: inset 0 0 0 2px var(--uc-accent);
}

.uc-cal-daynum {
    color: var(--uc-steel);
    font-weight: 600;
    padding: 0 2px 2px;
}

.uc-cal-list {
    min-height: 40px;
    max-height: none;
    overflow-y: visible;
}

.uc-cal-card {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: 0.35rem;
    padding: 2px 5px;
    margin-bottom: 3px;
    font-size: 0.72rem;
    cursor: grab;
}

.uc-cal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uc-cal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.uc-dot-baja { background: #9fb2c4; }
.uc-dot-media { background: #51637a; }
.uc-dot-alta { background: #c98a2d; }
.uc-dot-critica { background: var(--uc-accent); }

@media (max-width: 767.98px) {
    .uc-cal-day {
        min-height: 64px;
    }

    /* Solo en las celdas del mes: la lista «Sin fecha» mantiene los títulos */
    .uc-cal-day .uc-cal-title {
        display: none;
    }
}

.board-card-ghost {
    opacity: 0.4;
}

.board-column-handle {
    cursor: grab;
    user-select: none;
}

/* ---- Barra de filtros del tablero ---- */
.uc-toolbar {
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: 0.9rem;
    box-shadow: var(--uc-shadow);
}

.uc-toolbar .input-group-text {
    background: transparent;
    border-right: 0;
    color: #6b7a8c;
}

.uc-toolbar .uc-filter-text {
    border-left: 0;
}

.uc-toolbar .form-select {
    max-width: 170px;
}

/* Panel de filtros: plegado en móvil (botón «Filtros»), siempre visible en lg+ */
.uc-filter-panel.show {
    display: flex;
}

@media (min-width: 992px) {
    .uc-filter-panel {
        margin-top: 0 !important;
    }
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    /* El buscador global ocupa todo el ancho dentro del menú desplegado */
    .uc-search {
        width: 100%;
    }

    .uc-search .form-control {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    /* El panel de notificaciones no cabe alineado a la campana (Bootstrap no
       usa Popper dentro del navbar): se fija centrado bajo la barra. */
    .uc-notifications {
        position: fixed !important;
        top: 64px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: min(360px, 94vw);
        max-height: min(420px, calc(100vh - 84px));
    }

    /* Navbar en una sola fila: logo y controles más compactos */
    .uc-logo {
        height: 16px;
        width: 118px;
    }

    .uc-brand-tagline {
        font-size: 0.58rem;
    }

    .uc-navbar .container-fluid {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    .uc-navbar .btn-link.nav-link {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .uc-navbar .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1.1rem;
    }

    .uc-avatar-nav {
        width: 26px;
        height: 26px;
    }

    /* Botonera del tablero: una fila deslizable en lugar de varias filas */
    .uc-board-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .uc-board-actions .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Sin barra de scroll visible en la botonera deslizable */
    .uc-board-actions {
        scrollbar-width: none;
    }

    .uc-board-actions::-webkit-scrollbar {
        display: none;
    }

    /* Una columna del tablero casi a pantalla completa: se navega con swipe */
    .board-column {
        width: 82vw;
        min-width: 82vw;
    }

    .board-card-list {
        max-height: calc(100vh - 300px);
    }

    .uc-toolbar .form-select {
        max-width: none;
        flex: 1 1 40%;
    }
}

@media (max-width: 767.98px) {
    /* Las tablas no estrujan el texto: desplazamiento horizontal dentro
       de su contenedor .table-responsive */
    .table-responsive .table {
        white-space: nowrap;
    }
}

/* ---- Descripciones markdown ---- */
.markdown-body > :last-child {
    margin-bottom: 0;
}

.markdown-body pre {
    background: var(--bs-secondary-bg);
    padding: 0.75rem;
    border-radius: 0.55rem;
}

.markdown-body code {
    color: var(--bs-code-color);
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--uc-border);
}

/* ---- Páginas de acceso (login / recuperar contraseña) ---- */
.uc-auth {
    background:
        radial-gradient(900px 480px at 88% -10%, rgba(231, 50, 53, 0.22), transparent 60%),
        radial-gradient(700px 420px at -8% 108%, rgba(81, 99, 122, 0.4), transparent 55%),
        #16202b;
}

.uc-auth-card {
    width: 100%;
    max-width: 880px;
    border-radius: 1.25rem;
    /* Diseño comprometido en claro (data-bs-theme="light" en la plantilla):
       se re-ancla el color para que el modo oscuro global no lo herede. */
    color: var(--bs-body-color);
}

.uc-auth-card-sm {
    max-width: 460px;
}

.uc-auth-side {
    background:
        linear-gradient(160deg, rgba(231, 50, 53, 0.16), transparent 55%),
        #1b2735;
    min-height: 430px;
}

.uc-auth-logo {
    height: 30px;
    width: 221px;
    object-fit: contain;
    align-self: flex-start;
}

.uc-auth .form-control:focus {
    border-color: var(--uc-accent);
    box-shadow: 0 0 0 0.25rem rgba(231, 50, 53, 0.15);
}

.uc-auth .form-check-input:checked {
    background-color: var(--uc-accent);
    border-color: var(--uc-accent);
}

.uc-auth-link {
    color: var(--uc-accent);
    text-decoration: none;
}

.uc-auth-link:hover {
    color: var(--uc-accent-dark);
    text-decoration: underline;
}

.btn-uc {
    background: var(--uc-gradient);
    border: 0;
    color: #fff;
    font-weight: 600;
}

.btn-uc:hover,
.btn-uc:focus {
    background: linear-gradient(135deg, var(--uc-accent-dark), var(--uc-accent-darker));
    color: #fff;
}

/* ---- Badges de la paleta pizarra ----
   Prioridades y tipos en la familia acero; el rojo queda para lo urgente. */
.uc-badge-prio-baja { background: #e9edf1; color: #51637a; }
.uc-badge-prio-media { background: #d7e0e9; color: #3d4c5c; }
.uc-badge-prio-alta { background: #f7ead3; color: #8c5e14; }
.uc-badge-prio-critica { background: #fbe0e1; color: #b3282b; }

.uc-badge-type-mejora { background: #dbe7f2; color: #2f5e8f; }
.uc-badge-type-bug { background: #fbe0e1; color: #b3282b; }
.uc-badge-type-feature { background: #dcefe5; color: #1f6b45; }
.uc-badge-type-refactor { background: #243447; color: #fff; }

.uc-badge-neutral { background: #e9edf1; color: #51637a; }
.uc-badge-slate { background: #243447; color: #fff; }

/* Badges en modo oscuro: mismos matices, sobre tintas oscuras */
[data-bs-theme='dark'] .uc-badge-prio-baja { background: #2a3440; color: #bcc9d6; }
[data-bs-theme='dark'] .uc-badge-prio-media { background: #33404d; color: #d3dde6; }
[data-bs-theme='dark'] .uc-badge-prio-alta { background: #3f331b; color: #eabf6b; }
[data-bs-theme='dark'] .uc-badge-prio-critica { background: #462426; color: #f5a3a6; }
[data-bs-theme='dark'] .uc-badge-type-mejora { background: #223447; color: #9dc2e8; }
[data-bs-theme='dark'] .uc-badge-type-bug { background: #462426; color: #f5a3a6; }
[data-bs-theme='dark'] .uc-badge-type-feature { background: #1e352a; color: #8fd8b3; }
[data-bs-theme='dark'] .uc-badge-type-refactor { background: #3a4c61; color: #eef2f6; }
[data-bs-theme='dark'] .uc-badge-neutral { background: #2a3440; color: #bcc9d6; }
[data-bs-theme='dark'] .uc-badge-slate { background: #3a4c61; color: #ffffff; }
[data-bs-theme='dark'] .uc-avatar { background: #2a3440; color: #d3dde6; border-color: #1d232a; }
[data-bs-theme='dark'] .uc-cal-daynum { color: #b4c0cc; }
[data-bs-theme='dark'] .uc-toolbar .input-group-text { color: #b4c0cc; }
[data-bs-theme='dark'] .uc-avatar-nav { border-color: rgba(255, 255, 255, 0.25); }
[data-bs-theme='dark'] .board-card:hover { border-color: rgba(159, 178, 196, 0.4); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6); }
[data-bs-theme='dark'] .board-card .badge.text-bg-dark { background-color: #3a4c61 !important; color: #fff; }
[data-bs-theme='dark'] .board-column .btn-light { background: #262d36; border-color: #262d36; color: #b4c0cc; }
[data-bs-theme='dark'] .board-column .btn-light:hover { background: #2e3742; color: #eef2f6; }