/* ================================================================
   TAREAS DIALOGS THEME  ·  Orbis Mentor
   Aplica el tema Materio al contenido de los
   FluentUI dialogs del módulo de Tareas.
   Uso: agregar clase "dlg-tareas" al wrapper <div class="dlg-body">
================================================================ */

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

/* ── Base ── */
.dlg-body.dlg-tareas {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    color: var(--mt-heading-color);
}

/* ── Labels — mono uppercase primary ── */
.dlg-body.dlg-tareas .dlg-label {
    font-family: var(--mt-font);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mt-primary);
}

/* ── Section titles ── */
.dlg-body.dlg-tareas .dlg-section-title {
    font-family: var(--mt-font);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mt-primary);
}

/* ── Inputs, selects, textareas ── */
.dlg-body.dlg-tareas .dlg-input,
.dlg-body.dlg-tareas .dlg-select,
.dlg-body.dlg-tareas .dlg-textarea {
    border-color: var(--mt-gray-300);
    color: var(--mt-heading-color);
    background: var(--mt-gray-25);
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.dlg-body.dlg-tareas .dlg-input:focus,
.dlg-body.dlg-tareas .dlg-select:focus,
.dlg-body.dlg-tareas .dlg-textarea:focus {
    border-color: var(--mt-primary);
    box-shadow: 0 0 0 3px rgba(var(--mt-primary-rgb), .15);
}

/* ── Hint text ── */
.dlg-body.dlg-tareas .dlg-hint {
    color: var(--mt-gray-700);
    font-size: .82rem;
}

/* ── Monospace input (e.g. project code) ── */
.dlg-body.dlg-tareas .dlg-input--mono {
    font-family: var(--mt-font);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ── Plantilla name badge ── */
.dlg-body.dlg-tareas .dlg-plantilla-name {
    background: var(--mt-body-bg);
    border-left: 3px solid var(--mt-primary);
    color: var(--mt-heading-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .875rem;
    font-weight: 600;
}

/* ── Item rows (plantilla) ── */
.dlg-body.dlg-tareas .dlg-item {
    background: var(--mt-gray-50);
    border-color: var(--mt-gray-300);
}

.dlg-body.dlg-tareas .dlg-item__num {
    color: var(--mt-primary);
    font-family: var(--mt-font);
    font-weight: 700;
}

/* ── Vacation list items ── */
.dlg-body.dlg-tareas .dlg-vac-item {
    background: var(--mt-gray-50);
    border-color: var(--mt-gray-300);
}

.dlg-body.dlg-tareas .dlg-vac-item__name {
    color: var(--mt-heading-color);
    font-weight: 600;
}

.dlg-body.dlg-tareas .dlg-vac-item__range,
.dlg-body.dlg-tareas .dlg-vac-item__obs {
    color: var(--mt-gray-700);
}

/* ── Badges ── */
.dlg-body.dlg-tareas .dlg-badge--ok {
    background: var(--mt-success-light);
    color: var(--mt-success);
}

.dlg-body.dlg-tareas .dlg-badge--warn {
    background: var(--mt-warning-light);
    color: var(--mt-warning);
}

/* ── Employee checkbox list ── */
.dlg-body.dlg-tareas .dlg-emp-list {
    background: var(--mt-gray-25);
    border-color: var(--mt-gray-300);
}

.dlg-body.dlg-tareas .dlg-emp-item {
    color: var(--mt-heading-color);
}

.dlg-body.dlg-tareas .dlg-emp-item:hover {
    color: var(--mt-heading-color, #CFD3EC);
}

.dlg-body.dlg-tareas .dlg-emp-item input[type="checkbox"] {
    accent-color: var(--mt-primary);
}

/* ── Loading / empty states ── */
.dlg-body.dlg-tareas .dlg-loading,
.dlg-body.dlg-tareas .dlg-empty {
    color: var(--mt-muted-color);
}

/* ── Items empty message ── */
.dlg-body.dlg-tareas .dlg-items-empty {
    color: var(--mt-muted-color);
}

/* ── Form section divider ── */
.dlg-body.dlg-tareas .dlg-form-section {
    border-bottom-color: var(--mt-border-color);
}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */

/* Primary — accent (consistent with main shell) */
.dlg-body.dlg-tareas .dlg-btn--primary {
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: #fff;
    font-family: var(--mt-font);
    font-weight: 700;
    box-shadow: 0 2px 14px rgba(var(--mt-primary-rgb), .3);
}

.dlg-body.dlg-tareas .dlg-btn--primary:hover:not(:disabled) {
    background: var(--mt-primary-hover);
    border-color: var(--mt-primary-hover);
    box-shadow: 0 4px 20px rgba(var(--mt-primary-rgb), .45);
}

/* Ghost */
.dlg-body.dlg-tareas .dlg-btn--ghost {
    color: var(--mt-heading-color);
    background: var(--mt-body-bg);
    border-color: var(--mt-gray-300);
}

.dlg-body.dlg-tareas .dlg-btn--ghost:hover:not(:disabled) {
    background: var(--mt-gray-200, #3e4258);
    border-color: rgba(var(--mt-primary-rgb), 0.6);
}

/* Add item */
.dlg-body.dlg-tareas .dlg-btn--add {
    color: var(--mt-heading-color, #CFD3EC);
    background: var(--mt-body-bg);
    border-color: rgba(var(--mt-primary-rgb), 0.6);
    font-family: var(--mt-font);
    font-size: .72rem;
}

.dlg-body.dlg-tareas .dlg-btn--add:hover {
    background: var(--mt-gray-200, #3e4258);
    border-color: rgba(var(--mt-primary-rgb), 0.5);
}

/* Danger — keep red but adapt */
.dlg-body.dlg-tareas .dlg-btn--danger {
    color: var(--mt-danger);
    background: var(--mt-danger-subtle);
    border-color: rgba(var(--mt-danger-rgb), 0.4);
}

.dlg-body.dlg-tareas .dlg-btn--danger:hover:not(:disabled) {
    background: rgba(var(--mt-danger-rgb), 0.15);
}

/* Spinner on primary — white tip (on primary bg) */
.dlg-body.dlg-tareas .dlg-btn--primary .dlg-spin {
    border-color: rgba(255, 255, 255, .25);
    border-top-color: #fff;
}

/* ════════════════════════════════════════
   MOBILE / RESPONSIVE
════════════════════════════════════════ */

@media (max-width: 520px) {
    .dlg-body.dlg-tareas {
        gap: 12px;
    }

    /* Stack two-column form rows */
    .dlg-body.dlg-tareas .dlg-frow {
        flex-direction: column;
        gap: 10px;
    }

    /* Release fixed-width small groups on mobile */
    .dlg-body.dlg-tareas .dlg-fgroup--sm {
        flex: 1;
    }

    /* Action buttons: stretch to fill */
    .dlg-body.dlg-tareas .dlg-actions {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .dlg-body.dlg-tareas .dlg-actions .dlg-btn {
        width: 100%;
        justify-content: center;
    }

    /* Label font smaller */
    .dlg-body.dlg-tareas .dlg-label {
        font-size: .58rem;
    }
}

/* ── Sobretiempo confirmation dialog ───────────────────────────── */
.dlg-body.dlg-tareas .dlg-warn-icon {
    display: flex;
    justify-content: center;
    color: var(--mt-warning);
    margin-bottom: 10px;
}
.dlg-body.dlg-tareas .dlg-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mt-heading-color);
    text-align: center;
}
.dlg-body.dlg-tareas .dlg-hint--small {
    font-size: .8rem;
    color: var(--mt-muted-color);
    text-align: center;
}
.dlg-body.dlg-tareas .dlg-btn--warn {
    background: var(--mt-warning);
    color: #fff;
    border: none;
}
.dlg-body.dlg-tareas .dlg-btn--warn:hover { filter: brightness(1.05); }

/* ── Eliminar tarea — confirmation dialog ──────────────────────── */
.dlg-body.dlg-tareas .dlg-elim-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(var(--mt-warning-rgb), .08);
    border: 1px solid rgba(var(--mt-warning-rgb), .35);
    border-radius: var(--mt-radius);
    margin-bottom: 14px;
}
.dlg-body.dlg-tareas .dlg-elim-warn--danger {
    background: rgba(var(--mt-danger-rgb), .08);
    border-color: rgba(var(--mt-danger-rgb), .4);
}
.dlg-body.dlg-tareas .dlg-elim-warn__ico {
    flex-shrink: 0;
    color: var(--mt-warning);
    line-height: 0;
    margin-top: 2px;
}
.dlg-body.dlg-tareas .dlg-elim-warn--danger .dlg-elim-warn__ico {
    color: var(--mt-danger);
}
.dlg-body.dlg-tareas .dlg-elim-warn__text {
    flex: 1;
    min-width: 0;
}
.dlg-body.dlg-tareas .dlg-elim-warn__title {
    margin: 0 0 6px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mt-heading-color);
}
.dlg-body.dlg-tareas .dlg-elim-warn__desc {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--mt-body-color);
}
.dlg-body.dlg-tareas .dlg-elim-warn__desc strong {
    color: var(--mt-heading-color);
    font-weight: 600;
}
.dlg-body.dlg-tareas .dlg-elim-token {
    display: inline-block;
    background: var(--mt-gray-25);
    border: 1px solid var(--mt-border-color);
    color: var(--mt-danger);
    font-family: var(--mt-font-mono);
    font-size: .78rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: .02em;
    user-select: all;
}