/* Reset del borde por defecto del elemento <dialog> (evita el borde blanco del UA) */
dialog {
    border: none !important;
    outline: none !important;
    padding: 0;
    background: transparent;
}

/* Theme: base dark palette to align with original template */
:root,
[data-bs-theme="dark"] {
    /* Base surface and text */
    --bs-body-bg: #0b1224;
    /* muy oscuro, azul pizarra */
    --bs-body-color: #e2e8f0;
    /* texto claro */
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #94a3b8;
    /* texto muted */

    /* Brand colors aligned with previous accents */
    --bs-primary: #3b82f6;
    /* azul card/default */
    --bs-success: #22c55e;
    /* verde éxito */
    --bs-danger: #dc3545;
    /* rojo bootstrap manteniendo coherencia */
    --bs-warning: #f59e0b;
    /* ámbar */
    --bs-info: #0ea5e9;
    /* cian */

    /* Borders and components */
    --bs-border-color: #334155;
    /* slate-700 */
    --bs-tertiary-bg: #111827;
    /* gris casi negro */
    --bs-secondary-bg: #0b1224;
    /* leve contraste */

    /* Navbar */
    --bs-navbar-color: #e2e8f0;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-bg: var(--bs-primary);
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Sticky footer: empuja el footer al pie incluso con poco contenido */
html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body>header,
body>footer {
    flex: 0 0 auto;
}

body>main {
    flex: 1 0 auto;
}

/* Navbar force primary background to match brand color */
.navbar.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Logo placeholder on navbar (replace with real logo when available) */
/* Logo: deja estilos base por si volvemos al placeholder */
.logo-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
}

header .navbar img[alt="logo"] {
    height: 32px;
    width: auto;
}

@media (max-width: 420px) {
    header .navbar img[alt="logo"] {
        height: 26px;
    }
}

/* Card styling over dark surfaces */
.card {
    background: rgba(17, 24, 39, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.card::before {
    background: var(--card-color, var(--bs-primary));
}

/* Buttons override to use our palette while keeping Bootstrap sizing */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #0b0f19;
}

.btn-outline-secondary {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.btn-outline-secondary:hover {
    background: rgba(148, 163, 184, .12);
}

/* Alerts tuned for dark */
.alert-info {
    color: #e0f2fe;
    background-color: rgba(14, 165, 233, .15);
    border-color: rgba(14, 165, 233, .35);
}

.alert-success {
    background-color: rgba(34, 197, 94, .15);
    border-color: rgba(34, 197, 94, .35);
}

.alert-danger {
    background-color: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .35);
}

/* Badges: prefer Bootstrap badges; scope our custom .badge to avoid conflicts */
.kt-badge {
    display: inline-block;
    font-size: .85rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    margin-left: .5rem;
}

.kt-badge.priority {
    background: rgba(79, 70, 229, .15);
    border-color: rgba(79, 70, 229, .35);
}

/* Board headers accent line */
.col-header .status-accent {
    background: var(--accent-color, var(--bs-primary));
}

/* Global larger inputs and selects */
.form-control,
.form-select,
textarea.form-control {
    padding: .75rem 1rem;
    min-height: 3rem;
    font-size: 1rem;
    border-radius: .6rem;
}

/* Slightly larger "sm" variant too to keep consistency */
.form-control.form-control-sm,
.form-select.form-select-sm {
    padding: .6rem .9rem;
    min-height: 2.6rem;
    font-size: .95rem;
    border-radius: .55rem;
}

/* Wider inputs in tables (override inline max-widths) */
.table td .form-control,
.table td .form-select {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 260px;
}

/* Dark tables theme using BS 5 CSS variables */
.table {
    --bs-table-bg: rgba(11, 18, 36, .55);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: rgba(148, 163, 184, .20);
    --bs-table-striped-bg: rgba(255, 255, 255, .04);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(255, 255, 255, .08);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(255, 255, 255, .10);
    --bs-table-active-color: var(--bs-body-color);
}

/* Header row in dark tables, even if using .table-light */
.table thead,
.table thead tr,
.table-light {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

.overdue {
    background: #ffe9e9;
}

article.success {
    border-left: 4px solid #2ea043;
}

article.error {
    border-left: 4px solid #d73a49;
}

/* Ensure form controls use full width and labels behave properly */
form label {
    display: block;
}

form label>input,
form label>select,
form label>textarea {
    width: 100%;
}

/* Compactar inputs de color para que coincidan visualmente con selects/inputs */
/* Inputs de color a ancho completo dentro de formularios */
input[type="color"].form-control,
input[type="color"].form-select,
label .form-control[type="color"] {
    width: 100% !important;
    height: 3rem;
    padding: .25rem;
    border-radius: .6rem;
}

/* Filters layout: responsive inline on wide screens */
form.filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

@media (min-width: 720px) {
    form.filters {
        grid-template-columns: 2fr 1fr auto;
        align-items: end;
    }
}

/* Kanban board styles */

.column h3 {
    margin-bottom: .5rem;
}

/* Column header with accent and add button */
.col-header {
    margin-bottom: .5rem;
}

.col-header .status-label {
    font-size: .75rem;
    color: rgba(255, 255, 255, .6);
}

.col-header .status-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.col-header .status-accent {
    height: 4px;
    background: var(--accent-color, #4f46e5);
    border-radius: 999px;
    margin-top: .25rem;
}

.add-card {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
}

.add-card:hover {
    background: rgba(255, 255, 255, .18);
}

.badge {
    display: inline-block;
    font-size: .85rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    margin-left: .5rem;
}

.badge.priority {
    background: rgba(79, 70, 229, .15);
    border-color: rgba(79, 70, 229, .35);
}

.dropzone {
    background: rgba(255, 255, 255, .08);
    border: 1px dashed rgba(127, 127, 127, .35);
    border-radius: .75rem;
    padding: .75rem;
    min-height: 120px;
}

.dropzone.drag-over {
    border-color: var(--pico-primary, #4f46e5);
    background: rgba(79, 70, 229, .10);
}

.cards {
    display: grid;
    gap: .75rem;
}

.card {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .5rem;
    padding: .6rem .9rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-color, #3b82f6);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.card header .card-meta {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
}

.card header .card-title {
    font-weight: 700;
    margin-top: .15rem;
}

.card header .card-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.card-project {
    font-weight: 700;
    color: var(--card-color, #3b82f6);
    font-size: .9rem;
}

.card .card-desc {
    margin: .4rem 0 .6rem;
}

.card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card footer .left {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.avatar {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    background: var(--avatar-bg, #64748b);
}

.task-id {
    color: rgba(255, 255, 255, .7);
}

.board {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.board .col-12 {
    grid-column: span 12;
}

@media (min-width: 980px) {
    .board .col-6 {
        grid-column: span 6;
    }

    .board .col-6 {
        grid-column: span 6;
    }
}

.card.dragging {
    opacity: .6;
}

.card footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card header strong {
    letter-spacing: .3px;
}

.done-section {
    margin-top: 2rem;
}

/* Timeline for Avances */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid rgba(148, 163, 184, .25);
}

.timeline-item {
    position: relative;
    margin: 0 0 1rem 0;
    padding-left: .5rem;
}

.timeline-item .timeline-dot {
    position: absolute;
    left: -6px;
    top: .3rem;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}

.timeline-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: .6rem;
    padding: .6rem .75rem;
}

.timeline-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-secondary-color);
    font-size: .9rem;
}

.timeline-meta .pill.hours {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(34, 197, 94, .15);
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .85rem;
}

.timeline-desc {
    margin-top: .25rem;
}

/* Separador inferior entre avances (excepto el último) */
.timeline-item:not(:last-child) .timeline-card {
    border-bottom: 1px dashed rgba(148, 163, 184, .35);
    padding-bottom: .75rem;
    margin-bottom: .5rem;
}

/* Variante compacta para timelines dentro de tarjetas */
.timeline.timeline-sm {
    border-left-width: 1px;
    padding-left: .75rem;
}

.timeline.timeline-sm .timeline-item {
    margin-bottom: .5rem;
}

.timeline.timeline-sm .timeline-dot {
    left: -5px;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .2);
}

.timeline.timeline-sm .timeline-card {
    padding: .4rem .55rem;
}

/* Users table actions compact layout */
.table-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Compact button size for both <button> and <a role="button"> */
.btn-sm,
button.btn-sm,
a.btn-sm,
a.btn-sm[role="button"] {
    padding: .35rem .6rem !important;
    font-size: .9rem !important;
    line-height: 1.1 !important;
}

/* Botones grandes consistentes */
.btn-lg,
button.btn-lg,
a.btn-lg,
a.btn-lg[role="button"] {
    padding: .75rem 1.25rem !important;
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
    border-radius: .6rem !important;
}

/* Medium button size */
.btn-md,
button.btn-md,
a.btn-md,
a.btn-md[role="button"] {
    padding: .4rem .75rem !important;
    font-size: .95rem !important;
    line-height: 1.1 !important;
}

.input-sm {
    padding: .3rem .4rem;
    font-size: .85rem;
}

/* Icon-only small buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .08);
    color: #e5e7eb;
    /* neutral icon color */
}

.btn-icon:hover {
    background: rgba(255, 255, 255, .14);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Ensure danger variant keeps same sizing but with danger colors */
.btn-icon.btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-icon.btn-danger:hover {
    filter: brightness(1.05);
}

/* Icon button variants for view/edit */
.btn-icon.btn-primary {
    background: #3b82f6;
    /* blue */
    border-color: #3b82f6;
    color: #fff;
}

.btn-icon.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-icon.btn-warning {
    background: #f59e0b;
    /* amber */
    border-color: #f59e0b;
    color: #0b0f19;
    /* dark text for contrast */
}

.btn-icon.btn-warning:hover {
    filter: brightness(1.05);
}

/* Inline form for project creation */
.form-inline {
    display: flex;
    align-items: center;
    /* vertically center items */
    gap: .5rem;
    flex-wrap: nowrap;
    /* keep all controls on one line */
}

.form-inline .field-inline {
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

.form-inline .field-inline.grow {
    flex: 1 1 480px;
    /* give the name input more space */
    min-width: 320px;
}

.form-inline .field-inline span {
    white-space: nowrap;
    font-size: .85rem;
}

/* Keep submit button compact inside inline form */
.form-inline button,
.form-inline [type="submit"] {
    width: auto;
    align-self: center;
    /* center the button vertically */
    white-space: nowrap;
}

.form-inline .color-compact input[type="color"] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .375rem;
}

/* Form rows layout for task form */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    margin-bottom: .5rem;
}

.form-row.two-cols {
    grid-template-columns: 1fr;
}

.form-row.three-cols {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .form-row.title-row {
        grid-template-columns: 3fr 1fr;
        align-items: start;
        gap: .75rem;
    }

    .form-row.two-cols {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: .75rem;
    }

    .form-row.three-cols {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: .75rem;
    }
}

/* Reveal card action buttons on hover/focus */
.card .right a.btn-sm,
.card .right .btn-icon {
    display: none;
}

.card:hover .right a.btn-sm,
.card:hover .right .btn-icon,
.card .right:focus-within a.btn-sm,
.card .right:focus-within .btn-icon {
    display: inline-flex;
}

/* Equal-width action buttons layout */
.actions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem;
}

.btn-block {
    width: 100%;
}

.btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(1.05);
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: inherit;
}

.btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-success {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.btn-success:hover {
    filter: brightness(1.05);
}

/* Bloquear scroll del fondo cuando haya un modal abierto */
body.modal-open {
    overflow: hidden;
}

/* Asegurar que el contenido del modal pueda desplazarse internamente si es alto */
dialog::backdrop {
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
}

dialog>article {
    max-height: 80vh;
    overflow: auto;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(17, 24, 39, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalFadeIn .18s ease-out;
    padding: .75rem 1rem;
}

/* Modal grande */
dialog.modal-lg>article {
    width: min(960px, 95vw);
}

/* Variante elegante */
dialog.modal-elegant>article .modal-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: .75rem 1rem;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

dialog.modal-elegant>article .modal-footer {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding: .75rem 1rem;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Botones del header/footer integrados visualmente */
dialog.modal-elegant .btn.btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.35);
}

/* Scrollbar sutil dentro del modal */
dialog>article::-webkit-scrollbar {
    width: 10px;
}

dialog>article::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .25);
    border-radius: 8px;
}

dialog>article::-webkit-scrollbar-track {
    background: transparent;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

/* Soporte de variables usadas por JS (fallbacks) */
article.card {
    /* permite cambiar color dinámicamente */
    --card-color: var(--primary, #0ea5e9);
}

.avatar {
    --avatar-bg: var(--card-color);
    background: var(--avatar-bg);
    color: #fff;
}

/* Galería de imágenes */
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}

.image-grid .thumb,
.thumbs-row .thumb {
    display: block;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: .4rem;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
}

.image-grid .thumb.with-actions {
    position: relative;
}

.image-grid .thumb.with-actions .thumb-action {
    position: absolute;
    top: .25rem;
    right: .25rem;
}

.image-grid .thumb.with-actions .thumb-action button {
    padding: .15rem .4rem !important;
    line-height: 1;
}

.thumbs-row .thumb.sm {
    max-width: 96px;
    aspect-ratio: 1/1;
}

.image-grid .thumb img,
.thumbs-row .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive: miniaturas más compactas en pantallas pequeñas */
@media (max-width: 720px) {
    .thumbs-row {
        gap: .35rem !important;
    }

    .thumbs-row .thumb.sm {
        max-width: 72px;
    }
}

/* Navbar elegante con efecto glass y acento */
.navbar-elevated {
    background: linear-gradient(180deg, rgba(11, 18, 36, 0.92), rgba(11, 18, 36, 0.85));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    margin-top: .5rem;
    position: relative;
}

.navbar-elevated::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.navbar-elevated .nav-link {
    color: #e5e7eb !important;
    padding: .5rem .75rem;
    border-radius: .5rem;
    transition: background .15s ease, color .15s ease;
}

.navbar-elevated .nav-link:hover,
.navbar-elevated .nav-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

.navbar-elevated .navbar-text {
    letter-spacing: .3px;
}

.navbar-elevated .brand-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 10px;
    padding: .35rem .6rem;
}

.navbar-elevated .brand-badge img {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.navbar-elevated .container-fluid {
    padding-top: .35rem;
    padding-bottom: .35rem;
}