/**
 * Nexus 2.0 — Estilos principales
 * Atlassian Design System
 * Mobile-first
 */

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--ds-font-family-sans);
    font-size: var(--ds-font-size-body-lg);
    line-height: var(--ds-line-height-body-lg);
    color: var(--ds-text);
    background-color: var(--ds-surface-sunken);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--ds-space-200);
    z-index: calc(var(--ds-z-spotlight) + 1);
    padding: var(--ds-space-100) var(--ds-space-200);
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    border-radius: 0 0 var(--ds-radius-100) var(--ds-radius-100);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    text-decoration: none;
    transition: top var(--ds-duration-normal) var(--ds-ease-out);
}

.skip-to-content:focus {
    top: 0;
}

/* Focus visible global */
:focus-visible {
    outline: var(--ds-border-width-outline) solid var(--ds-border-focused);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--ds-space-100) 0;
    font-family: var(--ds-font-family-sans);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    line-height: 1.2;
}

h1 { font-size: var(--ds-font-size-heading-xxl); line-height: var(--ds-line-height-heading-xxl); }
h2 { font-size: var(--ds-font-size-heading-xl);  line-height: var(--ds-line-height-heading-xl); }
h3 { font-size: var(--ds-font-size-heading-lg);  line-height: var(--ds-line-height-heading-lg); }
h4 { font-size: var(--ds-font-size-heading-md);  line-height: var(--ds-line-height-heading-md); }
h5 { font-size: var(--ds-font-size-heading-sm);  line-height: var(--ds-line-height-heading-sm); }
h6 { font-size: var(--ds-font-size-heading-xs);  line-height: var(--ds-line-height-heading-xs); }

p {
    margin: 0 0 var(--ds-space-150) 0;
    line-height: var(--ds-line-height-body);
}

a {
    color: var(--ds-link);
    text-decoration: none;
    transition: color var(--ds-duration-fast);
}

a:hover {
    color: var(--ds-link-pressed);
    text-decoration: underline;
}

small, .text-sm { font-size: var(--ds-font-size-body-sm); line-height: var(--ds-line-height-body-sm); }
.text-lg { font-size: var(--ds-font-size-body-lg); line-height: var(--ds-line-height-body-lg); }
.text-subtle { color: var(--ds-text-subtle); }
.text-mono { font-family: var(--ds-font-family-mono); }
.text-subtlest { color: var(--ds-text-subtlest); }
.text-disabled { color: var(--ds-text-disabled); }
.text-danger { color: var(--ds-text-danger); }
.text-success { color: var(--ds-text-success); }
.text-warning { color: var(--ds-text-warning); }
.text-brand { color: var(--ds-text-brand); }

code {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-code);
    line-height: var(--ds-line-height-code);
    background: var(--ds-background-neutral);
    padding: var(--ds-space-025) var(--ds-space-050);
    border-radius: var(--ds-radius-050);
    color: var(--ds-text-danger);
}

/* ============================================
   BUTTONS — Atlassian DS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-050);
    padding: var(--ds-space-075) var(--ds-space-150);
    font-family: var(--ds-font-family-sans);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    line-height: var(--ds-line-height-body);
    border: none;
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
    min-height: 32px;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Override de color heredado cuando btn es un <a> */
a.btn,
a.btn:hover {
    text-decoration: none;
}

/* Primary */
.btn-primary {
    background: var(--app-brand);
    color: var(--brand-fg, #fff);
}

.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--app-brand) 85%, black);
    color: var(--brand-fg, #fff);
}

.btn-primary:active:not(:disabled) {
    background: color-mix(in srgb, var(--app-brand) 70%, black);
    color: var(--brand-fg, #fff);
}

/* Default */
.btn-default {
    background: transparent;
    color: var(--app-accent, var(--ds-text));
    border: 1.5px solid var(--app-accent, var(--ds-border));
}

.btn-default:hover:not(:disabled) {
    background: var(--app-accent, var(--ds-border));
    color: var(--accent-fg, #fff);
    border-color: var(--app-accent, var(--ds-border));
}

/* Subtle */
.btn-subtle {
    background: transparent;
    color: var(--ds-text-subtle);
}

.btn-subtle:hover:not(:disabled) {
    background: var(--ds-background-neutral-subtle-hovered);
    color: var(--ds-text);
}

/* Danger subtle */
.btn-danger-subtle {
    color: var(--ds-text-danger);
}

.btn-danger-subtle:hover:not(:disabled) {
    background: var(--ds-background-danger);
    color: var(--ds-text-danger);
}

/* Warning */
.btn-warning {
    background: var(--ds-background-warning-bold);
    color: var(--ds-neutral-1000);
}

.btn-warning:hover:not(:disabled) {
    background: var(--ds-yellow-500);
    color: var(--ds-neutral-1000);
}

/* Danger */
.btn-danger {
    background: var(--ds-background-danger-bold);
    color: var(--ds-text-inverse);
}

.btn-danger:hover:not(:disabled) {
    background: var(--ds-red-700);
    color: var(--ds-text-inverse);
}

/* Success */
.btn-success {
    background: var(--ds-background-success-bold);
    color: var(--ds-text-inverse);
}

.btn-success:hover:not(:disabled) {
    background: var(--ds-green-700);
    color: var(--ds-text-inverse);
}

/* Link button */
.btn-link {
    background: transparent;
    color: var(--ds-link);
    padding: 0;
    min-height: auto;
}

.btn-link:hover:not(:disabled) {
    text-decoration: underline;
    color: var(--ds-link-pressed);
}

/* Icon button (action button from roadmap) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

a.btn-icon,
a.btn-icon:hover {
    text-decoration: none;
}

.btn-icon:hover:not(:disabled) {
    background: var(--ds-background-neutral-hovered);
    color: var(--ds-icon);
    box-shadow: inset 0 0 0 1px var(--ds-border);
}

/* Sizes */
.btn-sm {
    padding: var(--ds-space-025) var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    min-height: 24px;
}

.btn-lg {
    padding: var(--ds-space-100) var(--ds-space-200);
    font-size: var(--ds-font-size-body-lg);
    min-height: 40px;
}

/* Full width */
.btn-block {
    width: 100%;
}

/* ============================================
   FORM CONTROLS — Atlassian DS
   ============================================ */
.form-label {
    display: block;
    margin-bottom: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.form-control {
    width: 100%;
    padding: var(--ds-space-100);
    font-family: var(--ds-font-family-sans);
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-body);
    color: var(--ds-text);
    background: var(--ds-neutral-100);
    border: var(--ds-border-width-indicator) solid transparent;
    border-radius: var(--ds-radius-100);
    transition: background var(--ds-duration-fast), border-color var(--ds-duration-fast);
}

.form-control:hover {
    background: var(--ds-neutral-200);
}

.form-control:focus {
    outline: none;
    background: var(--ds-surface);
    border-color: var(--ds-border-focused);
}

.form-control::placeholder {
    color: var(--ds-text-subtlest);
}

.form-control:disabled {
    background: var(--ds-background-disabled);
    color: var(--ds-text-disabled);
    cursor: not-allowed;
}

.form-control-error {
    border-color: var(--ds-border-danger);
}

.alliance-url-field.is-valid {
    border-color: var(--ds-border-success);
}

.alliance-url-field.is-invalid {
    border-color: var(--ds-border-danger);
}

.alliance-url-field.is-checking {
    border-color: var(--ds-border-information);
    animation: url-checking 1s ease-in-out infinite alternate;
}

@keyframes url-checking {
    from { opacity: 1; }
    to   { opacity: 0.45; }
}

/* Textarea */
textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* Select */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23626F86' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ds-space-100) center;
    padding-right: var(--ds-space-400);
}

/* Checkbox / Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-050) 0;
}

.form-check-input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--ds-brand);
    cursor: pointer;
}

.form-check-label {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    cursor: pointer;
}

/* Helper / Error text */
.form-helper {
    margin-top: var(--ds-space-075);
    margin-bottom: 0;
    font-size: 0.6875rem;
    color: var(--ds-text-subtlest);
    opacity: 0.8;
}

.form-error {
    margin-top: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-danger);
}

.form-hint {
    margin-top: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
}

.form-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-100);
    cursor: pointer;
    user-select: none;
}
.form-toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.form-toggle-track {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: var(--ds-surface-sunken);
    border: 2px solid var(--ds-border);
    border-radius: var(--ds-radius-full);
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.form-toggle-track::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    background: var(--ds-text-subtlest);
    border-radius: 50%;
    transition: transform 0.15s, background 0.15s;
}
.form-toggle-label input:checked ~ .form-toggle-track {
    background: var(--app-brand, var(--ds-blue-700, #0055cc));
    border-color: var(--app-brand, var(--ds-blue-700, #0055cc));
}
.form-toggle-label input:checked ~ .form-toggle-track::after {
    background: #fff;
    transform: translateX(14px);
}
.form-toggle-text {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

/* Form group */
.form-group {
    margin-bottom: var(--ds-space-100);
}

/* ============================================
   BADGES / LOZENGES — Atlassian DS
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--ds-space-025) var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    line-height: 1;
    border-radius: var(--ds-radius-050);
    white-space: nowrap;
}

.lozenge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--ds-space-050);
    font-size: 11px;
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
    border-radius: var(--ds-radius-050);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.lozenge-default    { background: var(--ds-background-neutral);       color: var(--ds-text-subtle); }
.lozenge-info       { background: var(--ds-background-information);   color: var(--ds-text-information); }
.lozenge-success    { background: var(--ds-background-success);       color: var(--ds-text-success); }
.lozenge-warning    { background: var(--ds-background-warning);       color: var(--ds-text-warning); }
.lozenge-danger     { background: var(--ds-background-danger);        color: var(--ds-text-danger); }
.lozenge-discovery  { background: var(--ds-background-discovery);     color: var(--ds-text-discovery); }
.lozenge-bold       { background: var(--ds-background-brand-bold);    color: var(--ds-text-inverse); }

/* ============================================
   ALERTS / BANNERS — Atlassian DS
   ============================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-body);
    animation: fadeIn var(--ds-duration-normal) var(--ds-ease-out);
}

.alert-info       { background: var(--ds-background-information); color: var(--ds-text); border-left: 3px solid var(--ds-border-information); }
.alert-success    { background: var(--ds-background-success);     color: var(--ds-text); border-left: 3px solid var(--ds-border-success); }
.alert-warning    { background: var(--ds-background-warning);     color: var(--ds-text); border-left: 3px solid var(--ds-border-warning); }
.alert-danger     { background: var(--ds-background-danger);      color: var(--ds-text); border-left: 3px solid var(--ds-border-danger); }
.alert-discovery  { background: var(--ds-background-discovery);   color: var(--ds-text); border-left: 3px solid var(--ds-border-discovery); }

.alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.alert-content { flex: 1; }

.alert-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    cursor: pointer;
    padding: var(--ds-space-025);
    border-radius: var(--ds-radius-100);
    line-height: 1;
}

.alert-dismiss:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-icon);
}

/* ============================================
   CARDS — Atlassian DS (elevation.raised)
   ============================================ */
.card {
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
    padding: var(--ds-space-200);
    transition: box-shadow var(--ds-duration-normal);
    overflow: hidden;
    max-width: 100%;
}

.card-interactive:hover {
    box-shadow: var(--ds-shadow-overlay);
    cursor: pointer;
}

.card-header {
    padding-bottom: var(--ds-space-150);
    margin-bottom: var(--ds-space-150);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.card-title {
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
}

.card-subtitle {
    font-size: var(--ds-font-size-small);
    color: var(--ds-text-subtle);
    margin: 2px 0 0;
}

.font-mono {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
    font-size: var(--ds-font-size-small);
}

.card-body {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
}

.card-footer {
    padding-top: var(--ds-space-150);
    margin-top: var(--ds-space-150);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

/* ============================================
   TAGS — Atlassian DS
   ============================================ */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 0 var(--ds-space-100);
    height: 24px;
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-regular);
    color: var(--ds-text);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-050);
    cursor: default;
    transition: background var(--ds-duration-fast);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-interactive {
    cursor: pointer;
}

.tag-interactive:hover {
    background: var(--ds-background-neutral-hovered);
}

.tag-selected {
    background: var(--ds-background-selected-bold);
    color: var(--ds-text-inverse);
    border: var(--ds-border-width-indicator) solid var(--ds-border-selected);
}

.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-round);
    cursor: pointer;
    color: inherit;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}

.tag-remove:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ============================================
   DROPDOWN / MENU — Atlassian DS
   ============================================ */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    z-index: var(--ds-z-layer);
    min-width: 200px;
    padding: var(--ds-space-050) 0;
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    list-style: none;
    margin: var(--ds-space-050) 0 0 0;
    display: none;
}

.dropdown-menu.show {
    display: block;
    animation: fadeIn var(--ds-duration-fast) var(--ds-ease-out);
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    width: 100%;
    padding: var(--ds-space-075) var(--ds-space-200);
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ds-duration-fast);
}

.dropdown-item:hover {
    background: var(--ds-interaction-hovered);
    text-decoration: none;
    color: var(--ds-text);
}

.dropdown-item.active {
    background: var(--ds-background-selected);
    color: var(--ds-text-selected);
}

.dropdown-header {
    padding: var(--ds-space-075) var(--ds-space-200) var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtlest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dropdown-divider {
    margin: var(--ds-space-050) 0;
    border: 0;
    border-top: var(--ds-border-width) solid var(--ds-border);
}

/* ============================================
   TABS — Atlassian DS
   ============================================ */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: var(--ds-border-width-indicator) solid var(--ds-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab {
    padding: var(--ds-space-100) var(--ds-space-200);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    background: transparent;
    border: none;
    border-bottom: var(--ds-border-width-indicator) solid transparent;
    margin-bottom: calc(var(--ds-border-width-indicator) * -1);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ds-duration-fast), border-color var(--ds-duration-fast);
}

.tab:hover {
    color: var(--ds-text);
    border-bottom-color: var(--ds-neutral-400);
}

.tab.active {
    color: var(--ds-text-selected);
    border-bottom-color: var(--ds-border-selected);
    font-weight: var(--ds-font-weight-semibold);
}

/* ============================================
   TABLES — Atlassian DS
   ============================================ */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body);
}

.table th {
    padding: var(--ds-space-100) var(--ds-space-150);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtlest);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: var(--ds-border-width-indicator) solid var(--ds-border);
    white-space: nowrap;
}

.table td {
    padding: var(--ds-space-100) var(--ds-space-150);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    vertical-align: middle;
    color: var(--ds-text);
}

.table tbody tr:hover {
    background: var(--ds-interaction-hovered);
}

.table-compact th,
.table-compact td {
    padding: var(--ds-space-075) var(--ds-space-100);
}

/* ============================================
   PROGRESS BAR — Atlassian DS
   ============================================ */
.progress {
    width: 100%;
    height: 6px;
    background: var(--ds-background-neutral);
    border-radius: var(--ds-radius-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--ds-background-brand-bold);
    border-radius: var(--ds-radius-full);
    transition: width var(--ds-duration-slow) var(--ds-ease-out);
}

.progress-brand   .progress-bar { background: var(--app-brand); }
.progress-success .progress-bar { background: var(--ds-background-success-bold); }
.progress-warning .progress-bar { background: var(--ds-background-warning-bold); }
.progress-danger  .progress-bar { background: var(--ds-background-danger-bold); }

/* ============================================
   SPINNER — Atlassian DS
   ============================================ */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--ds-background-neutral);
    border-top-color: var(--ds-brand);
    border-radius: var(--ds-radius-round);
    animation: spin 0.6s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }

.spin { animation: spin 0.8s linear infinite; }

/* ============================================
   AVATAR — Atlassian DS
   ============================================ */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-round);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    font-weight: var(--ds-font-weight-medium);
}

.avatar img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.avatar-sm  { width: 24px; height: 24px; font-size: 11px; }
.avatar-md  { width: 32px; height: 32px; font-size: var(--ds-font-size-body-sm); }
.avatar-lg  { width: 40px; height: 40px; font-size: var(--ds-font-size-body); }
.avatar-xl  { width: 48px; height: 48px; font-size: var(--ds-font-size-body-lg); }

/* ============================================
   TOOLTIP
   ============================================ */
.tooltip {
    position: absolute;
    z-index: var(--ds-z-tooltip);
    padding: var(--ds-space-025) var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-inverse);
    background: var(--ds-neutral-900);
    border-radius: var(--ds-radius-100);
    white-space: nowrap;
    pointer-events: none;
    animation: fadeIn var(--ds-duration-fast) var(--ds-ease-out);
}

/* ============================================
   TOGGLE / SWITCH
   ============================================ */
.toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--ds-neutral-400);
    border-radius: var(--ds-radius-full);
    cursor: pointer;
    transition: background var(--ds-duration-normal);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background: var(--ds-neutral-0);
    border-radius: var(--ds-radius-round);
    transition: transform var(--ds-duration-normal);
}

.toggle input:checked + .toggle-slider {
    background: var(--app-accent, var(--ds-background-brand-bold));
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle input:focus-visible + .toggle-slider {
    outline: var(--ds-border-width-outline) solid var(--ds-border-focused);
    outline-offset: 2px;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-600) var(--ds-space-200);
    text-align: center;
}

/* Cuando el carrusel horizontal no tiene cards, centrar el empty-state */
.tasks-cards-grid > .empty-state {
    flex: 1 1 100%;
    margin: 0 auto;
}

.empty-state-icon {
    font-size: 48px;
    color: var(--ds-icon-subtle);
    margin-bottom: var(--ds-space-200);
}

.empty-state-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-100);
}

.empty-state-description {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    max-width: 400px;
    margin-bottom: var(--ds-space-300);
}

/* ============================================
   TOAST / FLAG — Atlassian DS
   ============================================ */
.toast-container {
    position: fixed;
    bottom: var(--ds-space-400);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--ds-z-flag);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
    width: calc(100% - var(--ds-space-400));
    max-width: 560px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-200);
    border-left: 4px solid var(--ds-border);
    box-shadow: 0 12px 24px -8px rgba(9, 30, 66, 0.25), 0 4px 8px rgba(9, 30, 66, 0.15);
    pointer-events: auto;
    animation: toastSlideIn var(--ds-duration-slow) var(--ds-ease-out);
    min-width: 280px;
}

.toast-icon { flex-shrink: 0; font-size: 20px; }
.toast-content { flex: 1; min-width: 0; }
.toast-title { font-weight: var(--ds-font-weight-semibold); margin-bottom: var(--ds-space-025); }
.toast-message {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-medium);
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   SECTION PAGE HEADER
   ============================================ */
.page-header {
    padding: var(--ds-space-300) 0 var(--ds-space-200) 0;
}

/* Page header con boton de accion a la derecha */
.page-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
}

.page-header-with-action .page-header-text {
    flex: 1;
    min-width: 220px;
}

.page-header-with-action > .btn {
    flex-shrink: 0;
}

.page-title {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-semibold);
    line-height: 1;
    color: var(--ds-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.page-title-flag {
    font-size: 0.8em;
    line-height: 1;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.page-description {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin: var(--ds-space-050) 0 0 0;
}

/* ============================================
   LAYOUT — TOP BAR
   ============================================ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ds-z-navigation);
    height: var(--ds-topbar-height);
    background: var(--app-brand);
    border-bottom: none;
}

.topbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--ds-space-150);
    gap: var(--ds-space-100);
}

.topbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.85);
    cursor: pointer;
    border-radius: var(--ds-radius-100);
    padding: 0;
    font-size: 20px;
    flex-shrink: 0;
}

.topbar-toggle:hover {
    background: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.15);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-bold);
    color: var(--brand-fg, #fff);
    text-decoration: none;
    flex-shrink: 0;
}

.topbar-brand:hover {
    color: var(--brand-fg, #fff);
    text-decoration: none;
}

.topbar-brand img {
    height: 22px;
    width: auto;
}

.topbar-brand i {
    color: var(--brand-fg, #fff);
}

.topbar-brand-name {
    font-size: var(--ds-font-size-body-lg);
    font-weight: var(--ds-font-weight-bold);
}

.topbar-spacer {
    flex: 1;
}

.topbar-user {
    position: relative;
    flex-shrink: 0;
}

.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-050) var(--ds-space-100);
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    color: var(--brand-fg, #fff);
    transition: background var(--ds-duration-fast);
}

.topbar-user-btn:hover {
    background: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.15);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-round);
    object-fit: cover;
    display: block;
}

.topbar-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-round);
    background: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.25);
    color: var(--brand-fg, #fff);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
}

.topbar-user-name {
    display: none;
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.topbar-chevron {
    font-size: 12px;
    color: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.65);
}

.dropdown-item-danger {
    color: var(--ds-text-danger);
}

/* ============================================
   LAYOUT — SIDEBAR
   ============================================ */
.sidebar {
    position: fixed;
    top: var(--ds-topbar-height);
    left: 0;
    bottom: 0;
    z-index: calc(var(--ds-z-navigation) - 1);
    width: var(--ds-sidebar-width);
    background: var(--ds-surface-sunken);
    border-right: var(--ds-border-width) solid var(--ds-border);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--ds-duration-slow) var(--ds-ease-out),
                width var(--ds-duration-slow) var(--ds-ease-out);
    overflow: hidden;
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ds-space-300) 0 var(--ds-space-100) 0;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.sidebar-item {
    padding: 0 var(--ds-space-100);
}

.sidebar-separator {
    height: 0;
    margin: var(--ds-space-100) var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    width: 100%;
    padding: var(--ds-space-075) var(--ds-space-150);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    text-decoration: none;
    border: none;
    background: transparent;
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
    white-space: nowrap;
    text-align: left;
}

.sidebar-link:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
    text-decoration: none;
}

/* Seccion principal activa (Ajustes, Alianzas, etc.) — estilo suave */
.sidebar-link.active {
    color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.14);
    font-weight: var(--ds-font-weight-semibold);
    position: relative;
}

.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 var(--ds-radius-050) var(--ds-radius-050) 0;
    background: var(--app-accent, var(--app-brand));
}

.sidebar-link.active .sidebar-link-icon {
    color: var(--app-brand);
}

/* Sub-opcion activa (pagina actual) — estilo mas prominente para diferenciarse del padre */
.sidebar-sublink.active {
    color: var(--ds-text-inverse);
    background: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

.sidebar-sublink.active:hover {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
}

.sidebar-sublink.active .sidebar-link-icon {
    color: var(--ds-text-inverse);
}


/* Separacion entre el nombre de seccion y sus sub-opciones */
.sidebar-submenu.show {
    padding-top: var(--ds-space-075);
    padding-bottom: var(--ds-space-300);
}

.sidebar-link-icon {
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}


.sidebar-link-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar group (collapsible) */
.sidebar-chevron {
    font-size: 12px;
    margin-left: auto;
    transition: transform var(--ds-duration-normal);
    flex-shrink: 0;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    margin: 0 0 0 var(--ds-space-150);
    padding: 0 0 0 var(--ds-space-150);
    border-left: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ds-duration-slow) var(--ds-ease-out),
                border-color var(--ds-duration-normal);
}

.sidebar-submenu.show {
    max-height: 500px;
    border-left-color: var(--ds-border-subtle);
}

.sidebar-sublink {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) var(--ds-space-100);
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    text-decoration: none;
    border-radius: var(--ds-radius-100);
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
    white-space: nowrap;
}

.sidebar-sublink:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
    text-decoration: none;
}

.sidebar-sublink .sidebar-link-icon {
    font-size: 14px;
    width: 16px;
}

.sidebar-sublink-flag {
    width: 16px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Sidebar footer */
.sidebar-footer {
    padding: var(--ds-space-150) var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
    flex-shrink: 0;
}

.sidebar-footer-text {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
}

/* Global tooltip — fixed positioning via JS, supports data-tooltip on any element */
.app-tooltip {
    position: fixed;
    z-index: var(--ds-z-tooltip);
    padding: var(--ds-space-050) var(--ds-space-100);
    background: var(--ds-neutral-1000);
    color: var(--ds-text-inverse);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    border-radius: var(--ds-radius-100);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ds-duration-fast);
}

.app-tooltip.visible {
    opacity: 1;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    top: var(--ds-topbar-height);
    z-index: calc(var(--ds-z-navigation) - 2);
    background: var(--ds-blanket);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-slow), visibility var(--ds-duration-slow);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   LAYOUT — APP SHELL
   ============================================ */
.app-layout {
    padding-top: var(--ds-topbar-height);
}

.app-shell {
    display: flex;
    min-height: calc(100vh - var(--ds-topbar-height));
}

/* ============================================
   LAYOUT — MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    min-width: 0;
    min-height: calc(100vh - var(--ds-topbar-height));
    padding: var(--ds-space-200);
    width: 100%;
}

/* ============================================
   SLIDE PANEL — Atlassian DS (overlay)
   ============================================ */
.slide-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-blanket);
    background: var(--ds-blanket);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-slow) var(--ds-ease-out),
                visibility var(--ds-duration-slow);
}

.slide-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--ds-z-dialog);
    width: 100%;
    max-width: var(--ds-slide-panel-width);
    height: 100vh;
    height: 100dvh;
    background: var(--ds-surface-overlay);
    box-shadow: var(--ds-shadow-overflow);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--ds-duration-slow) var(--ds-ease-out);
}

.slide-panel.active {
    transform: translateX(0);
}

.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-200) var(--ds-space-300);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    flex-shrink: 0;
}

.slide-panel-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
}

.slide-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    cursor: pointer;
    border-radius: var(--ds-radius-100);
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.slide-panel-close:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-icon);
}

.slide-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-space-300);
}

.slide-panel-footer {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-100);
    padding: var(--ds-space-200) var(--ds-space-300);
    border-top: var(--ds-border-width) solid var(--ds-border);
    flex-shrink: 0;
}

/* Callouts dentro de slide panels y guías */
.callout {
    padding: var(--ds-space-150) var(--ds-space-200);
    border-radius: var(--ds-radius-200);
    border-left: 3px solid currentColor;
}

.callout p { margin: 0; }

.callout-info {
    background: rgba(var(--ds-color-information-rgb, 0, 82, 204), 0.06);
    border-color: var(--ds-color-information, #0052CC);
    color: var(--ds-text);
}

.callout-warning {
    background: rgba(var(--ds-color-warning-rgb, 255, 171, 0), 0.1);
    border-color: var(--ds-color-warning, #FFAB00);
    color: var(--ds-text);
}

.callout-danger {
    background: rgba(var(--ds-color-danger-rgb, 222, 53, 11), 0.06);
    border-color: var(--ds-color-danger, #DE350B);
    color: var(--ds-text);
}

/* Lista de pasos en guías */
.guide-steps {
    margin: var(--ds-space-100) 0 0;
    padding-left: var(--ds-space-250);
    line-height: 1.7;
}

.guide-steps li { margin-bottom: var(--ds-space-075); }

/* Tabla de características en slide panels */
.guide-feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body-sm);
    margin-top: var(--ds-space-100);
}

.guide-feature-table td {
    padding: var(--ds-space-075) var(--ds-space-100);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    vertical-align: top;
}

.guide-feature-table td:first-child {
    color: var(--ds-text-subtle);
    white-space: nowrap;
    width: 40%;
}

.slide-panel-footer.active {
    display: flex;
}

/* ============================================
   ERROR PAGES (standalone, sin layout)
   ============================================ */
.error-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-400) var(--ds-space-200);
    background: var(--ds-surface-sunken);
}

.error-container {
    max-width: 480px;
    width: 100%;
    padding: var(--ds-space-500) var(--ds-space-400);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-300);
    box-shadow: var(--ds-shadow-overlay);
    text-align: center;
}

.error-standalone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ds-space-200) auto;
    border-radius: var(--ds-radius-round);
    font-size: 32px;
}

.error-standalone-icon-info    { background: var(--ds-background-information); color: var(--ds-icon-information); }
.error-standalone-icon-warning { background: var(--ds-background-warning);     color: var(--ds-icon-warning); }
.error-standalone-icon-danger  { background: var(--ds-background-danger);      color: var(--ds-icon-danger); }

.error-standalone-code {
    font-size: var(--ds-font-size-heading-xxl);
    font-weight: var(--ds-font-weight-bold);
    color: var(--app-brand);
    line-height: 1;
    margin-bottom: var(--ds-space-100);
    opacity: 0.25;
    letter-spacing: 0.02em;
}

.error-standalone-title {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-100) 0;
}

.error-standalone-desc {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    line-height: var(--ds-line-height-body-lg);
    margin: 0 auto var(--ds-space-300);
    max-width: 360px;
}

.error-standalone-actions {
    display: flex;
    gap: var(--ds-space-100);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   PAGE LOADER
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ds-z-spotlight) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-surface);
    transition: opacity var(--ds-duration-slow), visibility var(--ds-duration-slow);
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ds-background-neutral);
    border-top-color: var(--app-brand);
    border-radius: var(--ds-radius-round);
    animation: spin 0.7s linear infinite;
}

/* ============================================
   SCROLL TO TOP
   ============================================ */
.btn-scroll-top {
    position: fixed;
    bottom: var(--ds-space-300);
    right: var(--ds-space-300);
    z-index: var(--ds-z-layer);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-brand);
    border: none;
    border-radius: var(--ds-radius-round);
    box-shadow: var(--ds-shadow-raised);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-normal), visibility var(--ds-duration-normal),
                background var(--ds-duration-fast);
}

.btn-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.btn-scroll-top:hover {
    background: var(--app-brand-dark);
    opacity: 0.9;
}

/* ============================================
   TIMER FLOATER
   ============================================ */
.timer-floater {
    position: fixed;
    bottom: var(--ds-space-300);
    left: var(--ds-space-300);
    z-index: var(--ds-z-layer);
    display: none;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-100) var(--ds-space-250);
    background: var(--ds-neutral-900);
    border-radius: var(--ds-radius-full);
    box-shadow: 0 8px 24px rgba(9, 30, 66, 0.35), 0 2px 6px rgba(9, 30, 66, 0.25);
    text-decoration: none;
    color: var(--ds-neutral-100);
    transition: box-shadow var(--ds-duration-fast);
    animation: fadeIn var(--ds-duration-normal) var(--ds-ease-out);
}

.timer-floater.active {
    display: inline-flex;
}

.timer-floater:hover {
    box-shadow: 0 12px 32px rgba(9, 30, 66, 0.45), 0 4px 8px rgba(9, 30, 66, 0.3);
    text-decoration: none;
    color: var(--ds-neutral-0);
}

.floater-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ds-radius-round);
    background: var(--ds-green-400);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.floater-alliance {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-neutral-400);
}

.floater-task {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ds-neutral-100);
}

.floater-time {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-green-300);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }

.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center, .align-items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.gap-025 { gap: var(--ds-space-025); }
.gap-050 { gap: var(--ds-space-050); }
.gap-075 { gap: var(--ds-space-075); }
.gap-100 { gap: var(--ds-space-100); }
.gap-150 { gap: var(--ds-space-150); }
.gap-200 { gap: var(--ds-space-200); }
.gap-300 { gap: var(--ds-space-300); }
.gap-400 { gap: var(--ds-space-400); }

.m-0 { margin: 0; }
.mt-100 { margin-top: var(--ds-space-100); }
.mt-200 { margin-top: var(--ds-space-200); }
.mt-300 { margin-top: var(--ds-space-300); }
.mb-0 { margin-bottom: 0; }
.mb-050 { margin-bottom: var(--ds-space-050); }
.mb-100 { margin-bottom: var(--ds-space-100); }
.mb-200 { margin-bottom: var(--ds-space-200); }
.mb-300 { margin-bottom: var(--ds-space-300); }

.p-0 { padding: 0; }
.p-100 { padding: var(--ds-space-100); }
.p-200 { padding: var(--ds-space-200); }
.p-300 { padding: var(--ds-space-300); }

.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   LOGIN PAGE — Card flotante
   ============================================ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse 700px 700px at 92% -5%,   rgba(var(--brand-fg-rgb, 255, 255, 255), 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 520px 480px at -8% 105%,  rgba(var(--brand-fg-rgb, 255, 255, 255), 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 380px 320px at 55% 115%,  rgba(var(--brand-fg-rgb, 255, 255, 255), 0.09) 0%, transparent 60%),
        linear-gradient(145deg, var(--app-brand) 0%, var(--app-brand-dark) 100%);
    position: relative;
    overflow: hidden;
}

/* Dot grid texture */
.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--brand-fg-rgb, 255, 255, 255), 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Large ring accent — bottom-left */
.login-page::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -120px;
    width: 560px;
    height: 560px;
    border: 60px solid rgba(var(--brand-fg-rgb, 255, 255, 255), 0.05);
    border-radius: 50%;
    pointer-events: none;
}

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: var(--ds-space-150);
    position: relative;
    z-index: 1;
}

/* Branding panel: hidden in card layout */
.login-branding {
    display: none;
}

/* Form area: transparent sizing wrapper */
.login-form-area {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    background: transparent;
    padding: 0;
}

/* Elevated card */
.login-card {
    width: 100%;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-400);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
    padding: var(--ds-space-300);
}

/* Accent bar at top of card */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--app-accent);
}

/* Card header: logo + name + tagline — always visible */
.login-mobile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--ds-space-100);
    padding-bottom: var(--ds-space-300);
    margin-bottom: var(--ds-space-300);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.login-mobile-logo {
    margin-bottom: var(--ds-space-150);
}

.login-mobile-logo img {
    max-height: 48px;
}

.login-mobile-logo .logo-icon {
    font-size: 40px;
    color: var(--app-brand);
}

.login-mobile-brand {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-050);
}

.login-mobile-tagline {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin: 0;
}

/* Form */
.login-form-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-050);
}

.login-form-subtitle {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-300);
}

.login-field .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-field {
    margin-bottom: var(--ds-space-200);
}

.login-field:last-of-type {
    margin-bottom: var(--ds-space-300);
}

.login-remember {
    margin-bottom: var(--ds-space-300);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    cursor: pointer;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--app-brand);
    cursor: pointer;
    flex-shrink: 0;
}

.login-submit {
    width: 100%;
    min-height: 40px;
    font-size: var(--ds-font-size-body-lg);
    font-weight: var(--ds-font-weight-semibold);
}

/* Demo info */
.login-demo {
    margin-top: var(--ds-space-400);
    padding-top: var(--ds-space-300);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.login-demo-title {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtlest);
    margin-bottom: var(--ds-space-100);
}

.login-demo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.login-demo-list li {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
}

.login-demo-list code {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body-sm);
    background: var(--ds-background-neutral);
    padding: 1px var(--ds-space-050);
    border-radius: var(--ds-radius-050);
    color: var(--ds-text-subtle);
}

/* Language switcher on login */
.login-lang {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-300);
}

.login-version {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
}

.login-lang-options {
    display: flex;
    gap: var(--ds-space-100);
}

.login-lang-btn {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--ds-space-025) var(--ds-space-050);
    border-radius: var(--ds-radius-050);
    text-decoration: none;
    transition: color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.login-lang-btn:hover {
    color: var(--ds-text);
    background: var(--ds-interaction-hovered);
    text-decoration: none;
}

.login-lang-btn.active {
    color: var(--ds-text-selected);
    font-weight: var(--ds-font-weight-semibold);
}

/* ============================================
   FILTER BAR (roadmap: fondo gris sutil)
   ============================================ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    margin-bottom: var(--ds-space-200);
}

.filter-bar .form-control,
.filter-bar .btn {
    min-height: 32px;
}

/* ============================================
   DOCUMENTATION
   ============================================ */
.docs-layout {
    display: flex;
    gap: var(--ds-space-300);
    min-height: calc(100vh - var(--ds-topbar-height) - var(--ds-space-400));
}

/* TOC sidebar */
.docs-toc {
    display: none;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--ds-topbar-height) + var(--ds-space-200));
    max-height: calc(100vh - var(--ds-topbar-height) - var(--ds-space-400));
    overflow-y: auto;
}

.docs-toc-header {
    padding-bottom: var(--ds-space-150);
    margin-bottom: var(--ds-space-100);
}

.docs-toc-title {
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
}

.docs-search {
    margin-bottom: var(--ds-space-200);
}

.docs-search .form-control {
    font-size: var(--ds-font-size-body-sm);
    padding: var(--ds-space-075) var(--ds-space-100);
}

.docs-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.docs-toc-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-050) var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    text-decoration: none;
    border-radius: var(--ds-radius-100);
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.docs-toc-link:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
    text-decoration: none;
}

.docs-toc-link.active {
    color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.08);
    font-weight: var(--ds-font-weight-semibold);
}

.docs-toc-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.docs-toc-chevron {
    font-size: 10px;
    margin-left: auto;
    transition: transform var(--ds-duration-normal);
}

.docs-toc-group[aria-expanded="true"] > .docs-toc-parent .docs-toc-chevron {
    transform: rotate(180deg);
}

.docs-toc-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ds-duration-slow);
}

.docs-toc-group[aria-expanded="true"] > .docs-toc-sublist {
    max-height: 500px;
}

.docs-toc-child {
    padding-left: calc(var(--ds-space-100) + 16px + var(--ds-space-075));
}

/* Content area */
.docs-content {
    flex: 1;
    min-width: 0;
    max-width: 800px;
}

.docs-section {
    padding-bottom: var(--ds-space-400);
    margin-bottom: var(--ds-space-400);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.docs-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.docs-section-title {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-050);
}

.docs-section-desc {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-300);
}

.docs-article {
    margin-bottom: var(--ds-space-400);
    scroll-margin-top: calc(var(--ds-topbar-height) + var(--ds-space-200));
}

.docs-article h3 {
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-150);
    padding-bottom: var(--ds-space-075);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.docs-article p {
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-body-lg);
    color: var(--ds-text);
}

/* Feature grid */
.docs-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-200);
}

.docs-feature {
    display: flex;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
}

.docs-feature > i {
    font-size: 20px;
    color: var(--app-brand);
    flex-shrink: 0;
    margin-top: 2px;
}

.docs-feature strong {
    display: block;
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    margin-bottom: var(--ds-space-025);
}

.docs-feature p {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

/* Lists */
.docs-list {
    padding-left: var(--ds-space-250);
    margin: 0 0 var(--ds-space-200) 0;
}

.docs-list li {
    font-size: var(--ds-font-size-body);
    line-height: var(--ds-line-height-body-lg);
    margin-bottom: var(--ds-space-075);
    color: var(--ds-text);
}

.docs-steps li {
    margin-bottom: var(--ds-space-100);
}

/* Code block genérico (slide panels, guías) */
.code-block {
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-100) var(--ds-space-200);
    overflow-x: auto;
    margin: 0;
}

.code-block code {
    background: transparent;
    padding: 0;
    font-size: var(--ds-font-size-code);
    color: var(--ds-text);
}

/* Code blocks */
.docs-code-block {
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    overflow: hidden;
}

.docs-code-label {
    padding: var(--ds-space-075) var(--ds-space-200);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.docs-code-block pre {
    margin: 0;
    padding: var(--ds-space-200);
    overflow-x: auto;
}

.docs-code-block code {
    background: transparent;
    padding: 0;
    font-size: var(--ds-font-size-code);
    line-height: 1.6;
    color: var(--ds-text);
}

/* Responsive */
@media (min-width: 768px) {
    .docs-toc {
        display: flex;
    }

    .docs-feature-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-300);
    min-width: 0;
    max-width: 100%;
}

/* Header */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-greeting {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
}

.dashboard-date {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin: var(--ds-space-025) 0 0 0;
}

/* Stats Cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-150);
}

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--ds-duration-fast);
}

a.stat-card:hover {
    box-shadow: var(--ds-shadow-overlay);
    text-decoration: none;
    color: inherit;
}

.stat-card-alert {
    border-left: 3px solid var(--ds-border-danger);
}

.stat-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-200);
    font-size: 20px;
    flex-shrink: 0;
}

.stat-icon-brand   { background: rgba(var(--app-brand-rgb), 0.08); color: var(--app-brand); }
.stat-icon-info    { background: var(--ds-background-information); color: var(--ds-icon-information); }
.stat-icon-success { background: var(--ds-background-success); color: var(--ds-icon-success); }
.stat-icon-danger  { background: var(--ds-background-danger); color: var(--ds-icon-danger); }

.stat-card-body {
    display: flex;
    flex-direction: column;
}

.stat-card-value {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text);
    line-height: 1;
}

.stat-card-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-025);
}

/* Two-column grid (legacy, kept for compatibility) */
.dashboard-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-300);
}

/* Fila gráfico + próximas tareas */
.dashboard-tasks-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-300);
}

.dashboard-chart-col {
    display: flex;
    flex-direction: column;
}

.dashboard-chart-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--ds-space-200);
    min-height: 260px;
}

.dashboard-chart-body canvas {
    max-width: 100%;
}

/* Fila actividad reciente */
.dashboard-activity-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-300);
}

/* Fila de insights */
.dashboard-insights-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-300);
}

.insight-tags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-150);
}

.insight-tag-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.insight-tag-rank {
    width: 22px;
    flex-shrink: 0;
    text-align: right;
}

.insight-tag-chip {
    flex: 1;
    min-width: 0;
    padding: 2px var(--ds-space-100);
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--app-brand) 35%, transparent) var(--tag-fill, 100%),
        rgba(var(--app-brand-rgb), 0.06) var(--tag-fill, 100%)
    );
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    font-weight: 500;
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-tag-chip.has-tag-color {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--tag-color) 35%, transparent) var(--tag-fill, 100%),
        color-mix(in srgb, var(--tag-color) 8%, transparent) var(--tag-fill, 100%)
    );
}

.insight-pair-sep {
    font-size: var(--ds-font-size-body-sm);
    font-weight: 400;
    opacity: 0.5;
    margin: 0 2px;
}

.insight-tag-count {
    flex-shrink: 0;
    white-space: nowrap;
}

.insight-weekly {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-150);
}

.insight-week-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.insight-week-col-right {
    text-align: left;
}

.insight-week-delta {
    align-self: flex-start;
}

.insight-week-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.insight-week-value {
    font-size: var(--ds-font-size-body-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    line-height: 1.2;
}

.insight-week-avg {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.insight-week-delta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--ds-font-size-body-sm);
    font-weight: 600;
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
}

.delta-up    { color: var(--ds-text-success); background: var(--ds-background-success); }
.delta-down  { color: var(--ds-text-danger);  background: var(--ds-background-danger); }
.delta-equal { color: var(--ds-text-subtle);  background: var(--ds-background-neutral); }

/* Timer widget (inside card) */
.timer-widget {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
    padding: var(--ds-space-100) 0;
}

.timer-widget-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.timer-widget-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ds-radius-round);
    background: var(--ds-green-400);
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.timer-widget-time {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-heading-xl);
    font-weight: var(--ds-font-weight-bold);
    color: var(--app-brand);
}

.timer-widget-info {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.timer-widget-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
}

.timer-widget-alliance {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
}

.timer-widget-actions {
    display: flex;
    gap: var(--ds-space-100);
}

/* Quick links en topbar */
.topbar-quicklinks {
    display: flex;
    align-items: center;
    gap: var(--ds-space-025);
}

.topbar-ql-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-100);
    color: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.85);
    font-size: 18px;
    text-decoration: none;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
    flex-shrink: 0;
}

.topbar-ql-item:hover {
    background: rgba(var(--brand-fg-rgb, 255, 255, 255), 0.15);
    color: var(--brand-fg, #fff);
    text-decoration: none;
}

/* Botón de marcador junto al título de página (solo admin) */
.page-title-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.ql-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    padding: 2px;
    margin-top: 4px;
    border: none;
    background: transparent;
    border-radius: var(--ds-radius-100);
    color: var(--ds-icon-subtle);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
    flex-shrink: 0;
}

.ql-toggle-btn:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-icon);
}

.ql-toggle-btn.is-active {
    color: var(--app-brand);
}

.ql-toggle-btn.is-active:hover {
    background: rgba(var(--app-brand-rgb), 0.08);
}

.ql-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Task list rows */
.task-list {
    display: flex;
    flex-direction: column;
}

.task-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-100) 0;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.task-row:last-child {
    border-bottom: none;
}

.task-row-title {
    flex: 1;
    min-width: 0;
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-row-alliance {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-100);
    background: rgba(var(--app-brand-rgb), 0.08);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    font-weight: 500;
    color: var(--ds-text);
    white-space: nowrap;
}
.task-row-alliance.has-alliance-color {
    background: color-mix(in srgb, var(--alliance-color) 15%, transparent);
}
.task-row-alliance i {
    font-size: 11px;
    opacity: 0.8;
}
.task-row .lozenge {
    text-transform: none;
}

/* Activity list */
.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-100);
    padding: var(--ds-space-100) 0;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.activity-row:last-child {
    border-bottom: none;
}

.activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-round);
    background: var(--ds-background-neutral);
    color: var(--ds-icon-subtle);
    font-size: 14px;
    flex-shrink: 0;
}

.activity-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
}

.activity-user {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.activity-action {
    color: var(--ds-text-subtle);
}

.activity-detail {
    color: var(--ds-text-subtlest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.activity-time {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Progress stages */
.progress-stages {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-100);
}

.progress-stage-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

/* ============================================
   PHASES COLLAPSE (dashboard)
   ============================================ */
.phases-collapse {
    margin-top: var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
    padding-top: var(--ds-space-150);
}

.phases-collapse-summary {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) 0;
    cursor: pointer;
    list-style: none;
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    transition: color var(--ds-duration-fast);
}

.phases-collapse-summary::-webkit-details-marker { display: none; }

.phases-collapse-summary:hover {
    color: var(--ds-text);
}

.phases-collapse-icon {
    font-size: 16px;
    color: var(--ds-icon-subtle);
}

.phases-collapse-chevron {
    margin-left: auto;
    font-size: 12px;
    transition: transform var(--ds-duration-normal);
}

.phases-collapse[open] .phases-collapse-chevron {
    transform: rotate(180deg);
}

.phases-list {
    list-style: none;
    margin: var(--ds-space-150) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-150);
}

.phase-item {
    display: flex;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    border-radius: var(--ds-radius-100);
    background: var(--ds-surface-sunken);
    border-left: 3px solid var(--ds-border);
}

.phase-item-completed   { border-left-color: var(--ds-border-success); }
.phase-item-in-progress { border-left-color: var(--ds-border-information); }
.phase-item-deferred    { border-left-color: var(--ds-border); opacity: 0.7; }

.phase-item-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ds-icon-subtle);
}

.phase-item-completed   .phase-item-icon { color: var(--ds-icon-success); }
.phase-item-in-progress .phase-item-icon { color: var(--ds-icon-information); }

.phase-item-body {
    flex: 1;
    min-width: 0;
}

.phase-item-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-050);
}

.phase-item-number {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-bold);
    color: var(--app-brand);
    font-family: var(--ds-font-family-mono);
}

.phase-item-title {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.phase-item-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    line-height: var(--ds-line-height-body-lg);
    margin: 0;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    margin-bottom: var(--ds-space-200);
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: var(--ds-text-subtle);
    text-decoration: none;
    transition: color var(--ds-duration-fast);
}

.breadcrumb-link:hover {
    color: var(--ds-text);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--ds-icon-subtle);
    font-size: 10px;
}

.breadcrumb-current {
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-medium);
}

/* ============================================
   SETTINGS OVERVIEW
   ============================================ */
.settings-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-150);
}

.settings-overview-card {
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    padding: var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
}

.settings-overview-card:hover {
    border-color: var(--ds-border-bold);
    box-shadow: var(--ds-shadow-raised);
    text-decoration: none;
    color: inherit;
}

.settings-overview-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-200);
    background: rgba(var(--app-brand-rgb), 0.08);
    color: var(--app-brand);
    font-size: 20px;
    flex-shrink: 0;
}

.settings-overview-body {
    flex: 1;
    min-width: 0;
}

.settings-overview-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-025) 0;
}

.settings-overview-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

.settings-overview-chevron {
    color: var(--ds-icon-subtle);
    font-size: 14px;
    flex-shrink: 0;
}

/* ============================================
   USERS STATS (barra compacta)
   ============================================ */
.users-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--ds-space-150) var(--ds-space-300);
    margin-bottom: var(--ds-space-300);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
}

.users-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
    min-width: 0;
}

.users-stat-value {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text);
    line-height: 1;
}

.users-stat-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
    display: flex;
    gap: var(--ds-space-100);
    margin-bottom: var(--ds-space-200);
    flex-wrap: wrap;
    align-items: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.filter-bar-search {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.filter-bar-search-icon {
    position: absolute;
    left: var(--ds-space-100);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-icon-subtle);
    pointer-events: none;
}

.filter-bar-search .form-control {
    padding-left: calc(var(--ds-space-100) + 20px + var(--ds-space-075));
}

.filter-bar-select {
    min-width: 140px;
    max-width: 200px;
}

.view-toggle {
    display: inline-flex;
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    overflow: hidden;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.view-toggle-btn:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
}

.view-toggle-btn.active {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
}

/* ============================================
   DATA TABLE (Users table)
   ============================================ */
.table-card {
    padding: 0;
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: var(--ds-space-100) var(--ds-space-200);
    text-align: left;
}

.data-table thead {
    background: var(--ds-surface-sunken);
}

.data-table tbody tr {
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.data-table tbody tr:hover {
    background: var(--ds-interaction-hovered);
}

.data-table-col-user {
    min-width: 240px;
}

.data-table-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

.data-table-col-actions .btn-icon + .btn-icon {
    margin-left: var(--ds-space-025);
}

.d-none-mobile {
    display: none;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
}

.user-cell-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-cell-name {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
}

.user-cell-meta {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

.btn-icon-danger {
    color: var(--ds-icon-subtle);
}

.btn-icon-danger:hover:not(:disabled) {
    background: var(--ds-background-danger);
    color: var(--ds-icon-danger);
    box-shadow: inset 0 0 0 1px var(--ds-border-danger);
}

/* ============================================
   ALLIANCES GRID (tarjetas)
   ============================================ */
.alliances-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-200);
}

.alliance-card {
    display: flex;
    flex-direction: column;
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-top: 3px solid var(--alliance-color, var(--app-brand));
    border-radius: var(--ds-radius-200);
    overflow: hidden;
    transition: box-shadow var(--ds-duration-fast);
}

.alliance-card:hover {
    box-shadow: var(--ds-shadow-raised);
}

.alliance-card-header {
    padding: var(--ds-space-200);
}

.alliance-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    justify-content: space-between;
    margin-bottom: var(--ds-space-050);
}

.alliance-card-title {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
    min-width: 0;
}

.alliance-flag {
    font-size: 14px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.alliance-card-subtitle {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alliance-card-body {
    padding: 0 var(--ds-space-200) var(--ds-space-150);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-150);
    flex: 1;
}

.alliance-responsible-stack {
    display: flex;
    gap: -4px;
    align-items: center;
}

.alliance-responsible-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-round);
    background: var(--app-brand);
    color: var(--ds-text-inverse);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    border: 2px solid var(--ds-surface-raised);
    margin-left: -8px;
}

.alliance-responsible-avatar:first-child {
    margin-left: 0;
}

.alliance-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-150);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.alliance-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.alliance-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-050);
    padding: var(--ds-space-100) var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

/* Vista tabla (alternativa) */
.alliances-grid-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.alliances-grid-table .alliance-card {
    flex-direction: row;
    align-items: center;
    border-top: var(--ds-border-width) solid var(--ds-border);
    border-left: 3px solid var(--alliance-color, var(--app-brand));
    border-radius: 0;
    padding: var(--ds-space-150) var(--ds-space-200);
    gap: var(--ds-space-200);
}

.alliances-grid-table .alliance-card-header,
.alliances-grid-table .alliance-card-body,
.alliances-grid-table .alliance-card-footer {
    padding: 0;
    background: transparent;
    border: none;
    flex-direction: row;
    align-items: center;
}

.alliances-grid-table .alliance-card-header { flex: 1 1 40%; }
.alliances-grid-table .alliance-card-body { flex: 1 1 40%; flex-direction: row; }
.alliances-grid-table .alliance-card-footer { flex-shrink: 0; }

/* ============================================
   FORM ENHANCEMENTS (Users / Alliances)
   ============================================ */
.form-required {
    color: var(--ds-text-danger);
    margin-left: 2px;
}

.form-section-heading {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: var(--ds-space-300) 0 var(--ds-space-150) 0;
    padding-top: var(--ds-space-150);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.form-section-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-200);
}

.form-fieldset {
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-200);
    margin-bottom: var(--ds-space-200);
}

.form-fieldset-legend {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    padding: 0 var(--ds-space-100);
}

.form-field-tabs {
    display: flex;
    gap: var(--ds-space-025);
    margin-bottom: var(--ds-space-150);
    padding: 2px;
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-100);
}

.form-field-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    background: transparent;
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.form-field-tab:has(input:checked) {
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-raised);
}

.form-field-tab input {
    position: absolute;
    opacity: 0;
}

.form-field-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-200);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    margin-bottom: var(--ds-space-300);
}

.form-field-photo-preview {
    width: 80px;
    height: 80px;
}

/* Contenedor .avatar (div): dimensiones y recorte circular */
.form-field-photo-preview .avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 28px;
    border-radius: var(--ds-radius-round);
}

/* Imagen directa (sin .avatar): ocupa el contenedor y se recorta sin distorsión */
.form-field-photo-preview img {
    width: 80px;
    height: auto;
    border-radius: var(--ds-radius-round);
    object-fit: cover;
    display: block;
}

/* Imagen dentro del .avatar: llena el contenedor sin distorsión */
.form-field-photo-preview .avatar img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.form-field-photo-actions {
    display: flex;
    gap: var(--ds-space-100);
    flex-wrap: wrap;
    justify-content: center;
}

.toggle-field {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    cursor: pointer;
    user-select: none;
}

.toggle-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--app-brand);
    cursor: pointer;
}

.color-field {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.color-field-picker {
    width: 40px;
    height: 40px;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    padding: 0;
    background: transparent;
}

.color-field .form-control {
    flex: 1;
    font-family: var(--ds-font-family-mono);
}

/* Alliance files in form */
.alliance-files-list {
    list-style: none;
    margin: 0 0 var(--ds-space-150) 0;
    padding: 0;
}

.alliance-file-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) 0;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.alliance-file-item:last-child {
    border-bottom: none;
}

.alliance-file-icon {
    font-size: 18px;
    color: var(--ds-icon-subtle);
    flex-shrink: 0;
}

.alliance-file-name {
    flex: 1;
    color: var(--ds-link);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ds-font-size-body-sm);
}

.alliance-file-name:hover {
    text-decoration: underline;
}

.alliance-file-date {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    white-space: nowrap;
}

.alliance-file-upload {
    display: flex;
    gap: var(--ds-space-100);
    align-items: center;
}

/* ============================================
   ALLIANCE — PROCESADOR DE PLANTILLAS
   ============================================ */

/* Ocultar scrollbar en tabs de sección (Inicio / Unidad) y páginas admin */
.alliance-section-tabs,
.integration-tabs,
.manage-tabs {
    scrollbar-width: none;
}
.alliance-section-tabs::-webkit-scrollbar,
.integration-tabs::-webkit-scrollbar,
.manage-tabs::-webkit-scrollbar {
    display: none;
}

/* Placeholder alianza activa sin UI */
.alliance-placeholder {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-300);
}

.alliance-placeholder-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-warning);
    background: var(--ds-background-warning, #fff7d6);
    border: 1px solid var(--ds-border-warning, #f5cd47);
    border-radius: var(--ds-border-radius);
    padding: var(--ds-space-050) var(--ds-space-150);
    align-self: flex-start;
}

.alliance-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ds-space-200);
}

.alliance-placeholder-card {
    height: fit-content;
}

.alliance-placeholder-links {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.alliance-placeholder-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-background-neutral-subtle);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-border-radius);
    color: var(--ds-link);
    text-decoration: none;
    font-size: var(--ds-font-size-body-sm);
    transition: background 0.15s;
}

.alliance-placeholder-link:hover {
    background: var(--ds-background-neutral-subtle-hovered);
    color: var(--ds-link-pressed);
}

.alliance-placeholder-link-ext {
    margin-left: auto;
    opacity: 0.5;
    font-size: 0.8em;
}

.alliance-placeholder-team {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

.alliance-placeholder-person {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.alliance-placeholder-role {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alliance-placeholder-name {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
}

.alliance-placeholder-email {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-link);
    text-decoration: none;
}

.alliance-placeholder-email:hover {
    text-decoration: underline;
}

/* Coming soon */
.alliance-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-500) var(--ds-space-200);
    color: var(--ds-text-subtlest);
    text-align: center;
}

.alliance-coming-soon-icon {
    font-size: 2rem;
    opacity: 0.5;
}

.alliance-coming-soon-text {
    font-size: var(--ds-font-size-body-sm);
    margin: 0;
}

/* LMS selector */
.alliance-lms-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-075) var(--ds-space-150);
    margin-top: var(--ds-space-200);
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
}

.alliance-lms-selector-label {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

.alliance-lms-btns {
    display: flex;
    gap: var(--ds-space-075);
}

.alliance-lms-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-150);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast),
                box-shadow var(--ds-duration-fast);
}

.alliance-lms-btn:hover {
    border-color: rgba(var(--app-brand-rgb), 0.4);
    background: var(--ds-interaction-hovered);
}

.alliance-lms-btn.is-selected {
    border-color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.08);
    color: var(--ds-text-selected);
    font-weight: var(--ds-font-weight-semibold);
    box-shadow: 0 0 0 2px rgba(var(--app-brand-rgb), 0.12);
}

.alliance-lms-hint {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    margin: 0;
    flex-basis: 100%;
}

/* Pending notice */
.alliance-pending-notice:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-200);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-background-warning-subtle, rgba(217,119,6,0.08));
    border: var(--ds-border-width) solid var(--ds-border-warning, #d97706);
    border-radius: var(--ds-radius-100);
    color: var(--ds-text);
    font-size: var(--ds-font-size-body-sm);
}

.alliance-pending-notice p {
    margin: 0;
}

.alliance-pending-icon {
    font-size: 1.25rem;
    color: var(--ds-text-warning, #d97706);
    flex-shrink: 0;
}

/* Section tabs separator */
.alliance-section-tabs {
    margin-top: var(--ds-space-300);
    border-bottom-color: var(--ds-border);
}

/* Section card */
.alliance-section {
    margin-top: var(--ds-space-200);
}

/* Two-column layout for most sections */
.alliance-section-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-150) var(--ds-space-200);
}

/* Primera columna estrecha (select/URL corta), segunda ocupa el resto */
.alliance-section-fields--asymmetric {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--ds-space-150) var(--ds-space-200);
}

/* Campos apilados en columna única (Glosario, Recursos) */
.alliance-section-fields--stacked {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-150);
}

/* Evitar overflow en celdas de grid */
.alliance-section-fields > .form-group,
.alliance-section-fields--asymmetric > .form-group,
.alliance-section-fields--stacked > .form-group {
    min-width: 0;
}

/* Three-column for generalidades */
.alliance-generalidades-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--ds-space-150) var(--ds-space-200);
}

@media (max-width: 900px) {
    .alliance-generalidades-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .alliance-section-fields,
    .alliance-generalidades-fields { grid-template-columns: 1fr; }
}

/* Eval table */
.alliance-eval-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body-sm);
}

.alliance-eval-table th,
.alliance-eval-table td {
    padding: var(--ds-space-075) var(--ds-space-100);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    text-align: left;
    vertical-align: middle;
}

.alliance-eval-table th {
    color: var(--ds-text-subtle);
    font-weight: var(--ds-font-weight-semibold);
    background: var(--ds-surface-sunken);
    text-transform: none;
}

/* Anchos de columna: Unidad fija, Ponderación estrecha, Actividad flexible */
.col-eval-unit     { width: 14%; }
.col-eval-weight   { width: 20%; }
.col-eval-activity { width: auto; }

/* Celda de unidad: ocupa dos filas */
.alliance-eval-unit {
    color: var(--ds-text-subtle);
    font-weight: var(--ds-font-weight-semibold);
    white-space: nowrap;
    vertical-align: middle;
}

/* Separador suave entre las dos actividades de la misma unidad */
.alliance-eval-table .eval-row-first td {
    border-bottom: 1px dashed var(--ds-border);
}

/* Hover por par de filas (manejado desde JS) */
.alliance-eval-table tbody tr:hover {
    background: transparent;
}
.alliance-eval-table tbody tr.eval-unit-hover {
    background: var(--ds-interaction-hovered);
}
.alliance-eval-table tbody tr.eval-unit-hover .form-control {
    background: var(--ds-neutral-0);
}
.alliance-eval-table tbody tr.eval-unit-hover .form-control:hover {
    background: var(--ds-neutral-100);
}

/* Three-column layout (docentes, URLs de generalidades) */
.alliance-section-fields--three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-150) var(--ds-space-200);
}

.alliance-section-fields--three > .form-group {
    min-width: 0;
}

@media (max-width: 900px) {
    .alliance-section-fields--three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .alliance-section-fields--three { grid-template-columns: 1fr; }
}

/* Toggle groups (Conozcámonos / Aprende) */
.alliance-toggle-group {
    display: block;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-border-radius-100);
    overflow: hidden;
}

.alliance-tgroup-item {
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.alliance-tgroup-item:last-child {
    border-bottom: none;
}

.alliance-tgroup-header {
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-surface);
}

.alliance-tgroup-trigger {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    cursor: pointer;
    user-select: none;
}

.alliance-tgroup-label {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
}

.alliance-tgroup-fields {
    padding: var(--ds-space-100) var(--ds-space-150) var(--ds-space-150);
    background: var(--ds-surface-sunken);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.alliance-tgroup-fields .form-control {
    background: var(--ds-surface);
}

/* Variante de 4 columnas (Aprende) */
.alliance-toggle-group--columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}

.alliance-toggle-group--columns .alliance-tgroup-item {
    border-bottom: none;
    border-right: var(--ds-border-width) solid var(--ds-border);
}

.alliance-toggle-group--columns .alliance-tgroup-item:last-child {
    border-right: none;
}

.alliance-toggle-group--columns .alliance-section-fields,
.alliance-toggle-group--columns .alliance-section-fields--three {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .alliance-toggle-group--columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .alliance-toggle-group--columns {
        grid-template-columns: 1fr;
    }
    .alliance-toggle-group--columns .alliance-tgroup-item {
        border-right: none;
        border-bottom: var(--ds-border-width) solid var(--ds-border);
    }
    .alliance-toggle-group--columns .alliance-tgroup-item:last-child {
        border-bottom: none;
    }
}

.alliance-tgroup-fields:not([hidden]) {
    display: block;
}

/* Action bar */
.alliance-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-100);
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-surface-raised);
    border-top: var(--ds-border-width) solid var(--ds-border);
    margin-top: var(--ds-space-200);
}

/* Result panel */
#allianceResultPanel .slide-panel-body {
    display: flex;
    flex-direction: column;
}

#allianceResultGroup {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.alliance-result-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--ds-space-075);
    flex-shrink: 0;
}

.alliance-result-textarea {
    font-family: var(--ds-font-family-monospace, monospace);
    font-size: var(--ds-font-size-body-sm);
    flex: 1;
    min-height: 0;
    resize: none;
}

/* Warnings */
.alliance-warnings-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
    margin-bottom: var(--ds-space-150);
}

.alliance-warning-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    padding: var(--ds-space-075) var(--ds-space-100);
    background: var(--ds-background-warning-subtle, rgba(217,119,6,0.08));
    border-left: 3px solid var(--ds-text-warning, #d97706);
    border-radius: var(--ds-border-radius-050);
}

.alliance-warning-item i {
    color: var(--ds-text-warning, #d97706);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================
   CONFIRM MODAL
   ============================================ */
.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal);
    background: var(--ds-blanket);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-normal), visibility var(--ds-duration-normal);
}

.confirm-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    z-index: calc(var(--ds-z-modal) + 1);
    width: calc(100% - var(--ds-space-400));
    max-width: 420px;
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    padding: var(--ds-space-300);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ds-duration-normal), visibility var(--ds-duration-normal), transform var(--ds-duration-normal);
    text-align: center;
}

.confirm-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

.confirm-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--ds-space-200) auto;
    border-radius: var(--ds-radius-round);
    font-size: 24px;
}

.confirm-modal-icon-danger  { background: var(--ds-background-danger);      color: var(--ds-icon-danger); }
.confirm-modal-icon-warning { background: var(--ds-background-warning);     color: var(--ds-icon-warning); }
.confirm-modal-icon-info    { background: var(--ds-background-information); color: var(--ds-icon-information); }
.confirm-modal-icon-success { background: var(--ds-background-success);     color: var(--ds-icon-success); }

.confirm-modal-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-100) 0;
}

.confirm-modal-message {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
    margin: 0 0 var(--ds-space-300) 0;
    line-height: var(--ds-line-height-body-lg);
}

.confirm-modal-actions {
    display: flex;
    gap: var(--ds-space-100);
    justify-content: center;
}

.confirm-modal-actions .btn {
    min-width: 100px;
}

/* ============================================
   TOAST enhancements
   ============================================ */
.toast-close {
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    cursor: pointer;
    padding: var(--ds-space-025);
    border-radius: var(--ds-radius-100);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.toast-close:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-icon);
}

.toast-success { border-left-color: var(--ds-border-success); }
.toast-danger  { border-left-color: var(--ds-border-danger); }
.toast-warning { border-left-color: var(--ds-border-warning); }
.toast-info    { border-left-color: var(--ds-border-information); }

.toast-success .toast-icon { color: var(--ds-icon-success); }
.toast-danger  .toast-icon { color: var(--ds-icon-danger); }
.toast-warning .toast-icon { color: var(--ds-icon-warning); }
.toast-info    .toast-icon { color: var(--ds-icon-information); }

.toast-confirm { cursor: default; }
.toast-confirm-actions {
    display: flex;
    gap: var(--ds-space-075);
    margin-top: var(--ds-space-075);
}

.toast-leaving {
    animation: fadeOut var(--ds-duration-normal) var(--ds-ease-out) forwards;
}

/* ============================================
   TASKS — Tracker hibrido (cronometro inline)
   ============================================ */
.tracker-bar {
    margin-bottom: var(--ds-space-300);
}

/* -------- Fila de entrada (estado vacio) -------- */
.tracker-input-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-100);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-300);
}

.tracker-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.tracker-input-icon {
    position: absolute;
    left: var(--ds-space-150);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-text-subtlest);
    font-size: 20px;
    pointer-events: none;
    transition: color var(--ds-duration-fast);
}

.tracker-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--ds-space-150) 0 calc(var(--ds-space-150) + 28px);
    background: transparent;
    border: var(--ds-border-width) solid transparent;
    border-radius: var(--ds-radius-200);
    color: var(--ds-text);
    font-size: var(--ds-font-size-body-lg);
    font-weight: var(--ds-font-weight-medium);
    transition: background var(--ds-duration-fast), border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
}

.tracker-input::placeholder {
    color: var(--ds-text-subtlest);
    font-weight: var(--ds-font-weight-regular);
}

.tracker-input:hover {
    background: var(--ds-surface-sunken);
}

.tracker-input:focus {
    outline: none;
    background: var(--ds-surface);
    border-color: var(--app-brand);
    box-shadow: 0 0 0 3px rgba(var(--app-brand-rgb), 0.18);
}

.tracker-input:focus + .tracker-input-icon,
.tracker-input-wrapper:focus-within .tracker-input-icon {
    color: var(--app-brand);
}

/* Autocomplete dropdown */
.tracker-autocomplete {
    position: absolute;
    top: calc(100% + var(--ds-space-050));
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--ds-surface-overlay);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    z-index: 40;
    padding: var(--ds-space-050);
}

.tracker-autocomplete .ac-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-100);
    width: 100%;
    padding: var(--ds-space-100) var(--ds-space-150);
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-100);
    color: var(--ds-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--ds-duration-fast);
}

.tracker-autocomplete .ac-item:hover,
.tracker-autocomplete .ac-item:focus-visible {
    background: var(--ds-surface-hovered);
    outline: none;
}

.tracker-autocomplete .ac-icon {
    color: var(--app-brand);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tracker-autocomplete .ac-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.tracker-autocomplete .ac-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tracker-autocomplete .ac-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.tracker-autocomplete .ac-alliance {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

/* Boton play */
.tracker-play-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-brand);
    color: var(--ds-text-inverse);
    border: none;
    border-radius: var(--ds-radius-200);
    font-size: 22px;
    cursor: pointer;
    transition: background var(--ds-duration-fast), transform var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
    box-shadow: var(--ds-shadow-raised);
}

.tracker-play-btn:hover {
    background: var(--app-brand-hover, var(--app-brand));
    filter: brightness(1.08);
    transform: scale(1.04);
}

.tracker-play-btn:active {
    transform: scale(0.96);
}

.tracker-play-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* -------- Meta pre-timer (alianza/etiquetas antes de iniciar) -------- */
.tracker-pretimer-meta {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    flex-shrink: 0;
}

/* -------- Estado activo (compacto, una sola fila) -------- */
.tracker-active {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-left: 3px solid var(--ds-green-400);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
}

.tracker-active-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    flex-wrap: wrap;
}

.tracker-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ds-radius-round);
    background: var(--ds-green-400);
    animation: pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.tracker-task-title {
    flex: 1 1 220px;
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    word-break: break-word;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tracker-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-050);
    align-items: center;
    min-width: 0;
}

.tracker-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-100);
    background: var(--ds-surface-sunken);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    line-height: 1.4;
    white-space: nowrap;
}

.tracker-meta-chip i {
    font-size: 11px;
    opacity: 0.8;
}

.tracker-meta-alliance {
    color: var(--ds-text);
    background: rgba(var(--app-brand-rgb), 0.08);
    border-color: rgba(var(--app-brand-rgb), 0.2);
}

/* Si la alianza tiene color institucional, usarlo tenue */
.tracker-meta-alliance.has-alliance-color {
    background: color-mix(in srgb, var(--alliance-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--alliance-color) 30%, transparent);
}

.tracker-meta-empty {
    border-style: dashed;
    color: var(--ds-text-subtlest);
    background: transparent;
}

/* Chips editables del tracker */
.tracker-meta-editable {
    cursor: pointer;
    transition: background var(--ds-duration-fast), border-color var(--ds-duration-fast);
}

.tracker-meta-editable:hover {
    background: var(--ds-surface-hovered);
    border-color: var(--ds-border-bold);
}

.tracker-chip-chevron {
    font-size: 9px !important;
    opacity: 0.5;
    margin-left: 2px;
}

/* Dropdown inline del tracker */
.tracker-inline-dropdown {
    position: fixed;
    z-index: 1200;
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    min-width: 220px;
    max-width: 280px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tracker-dropdown-search-wrap {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.tracker-dropdown-search-icon {
    font-size: 12px;
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.tracker-dropdown-search {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text);
    width: 100%;
    padding: 0;
}

.tracker-dropdown-list {
    overflow-y: auto;
    flex: 1;
    padding: var(--ds-space-050) 0;
}

.tracker-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-050) var(--ds-space-150);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.tracker-dropdown-item:hover {
    background: var(--ds-surface-hovered);
}

.tracker-dropdown-item.is-selected {
    color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

.tracker-dropdown-item input[type=checkbox] {
    flex-shrink: 0;
    accent-color: var(--app-brand);
}

.tracker-dropdown-empty {
    padding: var(--ds-space-100) var(--ds-space-150);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-subtlest);
    text-align: center;
}

/* Prioridad */
.tracker-priority-low {
    color: var(--ds-text-subtle);
    background: var(--ds-surface-sunken);
}
.tracker-priority-high {
    color: var(--ds-orange-700, #974f0c);
    background: rgba(217, 128, 0, 0.1);
    border-color: rgba(217, 128, 0, 0.3);
}
.tracker-priority-urgent {
    color: var(--ds-red-700, #ae2a19);
    background: rgba(222, 53, 11, 0.1);
    border-color: rgba(222, 53, 11, 0.3);
}

/* Cronometro compacto - alto contraste */
.tracker-time {
    font-family: var(--ds-font-family-mono);
    font-size: 1.125rem;
    font-weight: var(--ds-font-weight-bold);
    color: var(--ds-text-inverse);
    line-height: 1;
    letter-spacing: 0.04em;
    padding: var(--ds-space-075) var(--ds-space-150);
    background: var(--app-brand);
    border-radius: var(--ds-radius-100);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Acciones en iconos */
.tracker-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.tracker-actions .btn-icon {
    width: 32px;
    height: 32px;
}

/* Variantes hover para iconos de accion */
.btn-icon-success:hover:not(:disabled) {
    background: var(--ds-background-success, rgba(34, 164, 119, 0.1));
    color: var(--ds-icon-success, #1f845a);
    box-shadow: inset 0 0 0 1px var(--ds-border-success);
}
.btn-icon-warning:hover:not(:disabled) {
    background: var(--ds-background-warning, rgba(217, 128, 0, 0.1));
    color: var(--ds-icon-warning, #b38600);
    box-shadow: inset 0 0 0 1px var(--ds-border-warning);
}

/* Alerta inline de datos incompletos (compacta) */
.tracker-incomplete {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-050) var(--ds-space-100);
    margin: 0;
    background: rgba(217, 128, 0, 0.08);
    border: var(--ds-border-width) solid rgba(217, 128, 0, 0.25);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-orange-700, #974f0c);
    flex-wrap: wrap;
    align-self: flex-start;
}

.tracker-incomplete-label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ds-space-075);
    flex: 1 1 auto;
    min-width: 0;
}

.tracker-incomplete-label i {
    font-size: 14px;
    flex-shrink: 0;
    align-self: center;
}

.tracker-incomplete-cta {
    background: none;
    border: none;
    padding: 0;
    color: var(--ds-orange-700, #974f0c);
    font-weight: var(--ds-font-weight-semibold);
    font-size: var(--ds-font-size-body-sm);
    text-decoration: underline;
    cursor: pointer;
}

.tracker-incomplete-cta:hover {
    text-decoration: none;
}

/* -------- Tag chips en slide panel (estilo limpio y compacto) -------- */
.task-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-050);
    padding: var(--ds-space-075);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    min-height: 44px;
}

.task-tag-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-100);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    line-height: 1.5;
    color: var(--ds-text);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast), border-color var(--ds-duration-fast);
    user-select: none;
}

.task-tag-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.task-tag-chip:hover:not(.is-selected) {
    border-color: var(--app-brand);
    color: var(--app-brand);
}

.task-tag-chip.is-selected {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
    border-color: var(--app-brand);
}

.task-tag-create {
    display: flex;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-100);
}

.task-tag-create .form-control {
    flex: 1;
}

/* -------- Campo estatico readonly en formularios -------- */
.form-static {
    padding: var(--ds-space-100);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    min-height: 36px;
    display: flex;
    align-items: center;
}

.form-static-mono {
    font-family: var(--ds-font-family-mono);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--app-brand);
}

/* Form grid de 3 columnas (se apila en mobile) */
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-100);
}

@media (min-width: 600px) {
    .form-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -------- Multiselect de etiquetas en formulario -------- */
.tags-multiselect {
    position: relative;
}

.tags-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-075);
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.tags-multiselect-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.tags-multiselect-chevron {
    font-size: 11px;
    color: var(--ds-text-subtle);
    transition: transform var(--ds-duration-fast);
    flex-shrink: 0;
}

.tags-multiselect-trigger[aria-expanded="true"] .tags-multiselect-chevron {
    transform: rotate(180deg);
}

.tags-multiselect-dropdown {
    position: absolute;
    top: calc(100% + var(--ds-space-050));
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--ds-surface-overlay);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    overflow: hidden;
}

.tags-multiselect-options {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--ds-space-050);
}

.tags-multiselect-option {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    transition: background var(--ds-duration-fast);
    user-select: none;
}

.tags-multiselect-option:hover {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.04));
}

.tags-multiselect-option input {
    margin: 0;
    accent-color: var(--app-brand);
}

.tags-multiselect-empty {
    padding: var(--ds-space-100);
    margin: 0;
    text-align: center;
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-style: italic;
}

.tags-multiselect-create {
    display: flex;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075);
    background: var(--ds-surface-sunken);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.tags-multiselect-create .form-control {
    flex: 1;
}

/* -------- Lista de registros editables dentro del slide panel -------- */
.task-entries-form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
}

.task-entries-loading {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-100);
}

.task-entries-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.task-entry-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-100);
}

.task-entry-date {
    white-space: nowrap;
    min-width: 86px;
}

.task-entry-input {
    font-family: var(--ds-font-family-mono);
    min-width: 0;
}

.task-entry-sep {
    color: var(--ds-text-subtle);
    font-size: 12px;
}

.task-entry-duration {
    min-width: 56px;
    text-align: right;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--app-brand);
    font-size: var(--ds-font-size-body-sm);
}

.task-entry-actions {
    display: flex;
    gap: 2px;
}

.task-entry-actions .btn-icon {
    width: 28px;
    height: 28px;
}

@media (max-width: 600px) {
    .task-entry-row {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "date date date"
            "start sep end"
            "duration duration actions";
        gap: var(--ds-space-075);
    }
    .task-entry-date     { grid-area: date; }
    .task-entry-input[data-field="start"] { grid-area: start; }
    .task-entry-sep      { grid-area: sep; }
    .task-entry-input[data-field="end"]   { grid-area: end; }
    .task-entry-duration { grid-area: duration; text-align: left; }
    .task-entry-actions  { grid-area: actions; justify-self: end; }
}

/* ============================================
   TASKS — Listado (sub-fase 4.2, secciones apiladas)
   ============================================ */
.tasks-list-section {
    background: transparent;
}

/* ---- Barra de filtros compacta ---- */
.tasks-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-075);
    align-items: center;
    padding: var(--ds-space-100) var(--ds-space-150);
    margin-bottom: var(--ds-space-300);
    background: rgba(var(--app-brand-rgb), 0.10);
    border: 1px solid rgba(var(--app-brand-rgb), 0.18);
    border-radius: var(--ds-radius-200);
}

.tasks-filter-bar .filter-bar-search {
    flex: 1 1 200px;
    max-width: 280px;
    min-width: 160px;
    position: relative;
}

.tasks-filter-bar .filter-bar-search .form-control {
    padding-left: calc(var(--ds-space-100) + 18px);
}

.tasks-filter-bar .filter-bar-search-icon {
    font-size: 14px;
}

.filter-bar-dates {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.filter-bar-dash {
    color: var(--ds-text-subtlest);
    font-size: 12px;
}

.filter-bar-date {
    width: 120px;
    min-width: 0;
}

.tasks-filter-bar .filter-bar-select {
    min-width: 130px;
    max-width: 170px;
}

/* Multi-select custom (etiquetas): boton trigger + dropdown con checkboxes */
.filter-multiselect {
    position: relative;
    min-width: 150px;
    max-width: 200px;
}

.filter-multiselect-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-075);
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.filter-multiselect-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.filter-multiselect-chevron {
    font-size: 11px;
    color: var(--ds-text-subtle);
    transition: transform var(--ds-duration-fast);
    flex-shrink: 0;
}

.filter-multiselect-trigger[aria-expanded="true"] .filter-multiselect-chevron {
    transform: rotate(180deg);
}

.filter-multiselect-trigger.has-selection {
    border-color: var(--app-brand);
    color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

.filter-multiselect-dropdown {
    position: absolute;
    top: calc(100% + var(--ds-space-050));
    left: 0;
    right: 0;
    min-width: 200px;
    max-height: 240px;
    overflow-y: auto;
    padding: var(--ds-space-050);
    background: var(--ds-surface-overlay);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-overlay);
    z-index: 30;
}

.filter-multiselect-option {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    user-select: none;
    transition: background var(--ds-duration-fast);
}

.filter-multiselect-option:hover {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.04));
}

.filter-multiselect-option input {
    margin: 0;
    accent-color: var(--app-brand);
}

.filter-multiselect-empty {
    padding: var(--ds-space-100);
    margin: 0;
    text-align: center;
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-style: italic;
}

.form-control-sm {
    padding: var(--ds-space-050) var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    min-height: 30px;
    height: 30px;
}

.tasks-filter-bar .btn-icon {
    width: 30px;
    height: 30px;
}

/* Contador de resultados del filtro: pegado a la derecha, antes del clear */
.filter-results-count {
    margin-left: auto;
    padding: 0 var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    white-space: nowrap;
    line-height: 30px;
}

.filter-results-count.is-filtered {
    color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

/* ---- Seccion ---- */
.tasks-section {
    margin-bottom: var(--ds-space-400);
}

.tasks-section:last-child {
    margin-bottom: 0;
}

.tasks-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ds-space-075);
    padding: 0 var(--ds-space-050);
}

.tasks-section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-100);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
    letter-spacing: 0.03em;
}

.tasks-section-title i {
    color: var(--app-brand);
    font-size: 14px;
}

.tasks-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 var(--ds-space-075);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-full);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    line-height: 1;
    letter-spacing: 0;
}

.tasks-section-time {
    font-weight: 500;
}

.tasks-section-right {
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.tasks-day-goal {
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-subtle);
    font-weight: 500;
}

.tasks-day-goal--met {
    color: var(--ds-color-green-600, #1f7a3b);
}

.tasks-day-goal-remaining {
    color: var(--ds-color-red-600, #c9372c);
    font-weight: 500;
}

/* ---- Sección iLovePDF por usuario ---- */
.user-api-section {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    margin-top: var(--ds-space-300);
}

.user-api-summary {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150) var(--ds-space-200);
    cursor: pointer;
    font-weight: var(--ds-font-weight-medium);
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    list-style: none;
    user-select: none;
}

.user-api-summary::-webkit-details-marker { display: none; }
.user-api-summary::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ds-text-subtle);
    margin-left: auto;
    transition: transform var(--ds-duration-fast);
}
.user-api-section[open] .user-api-summary::after { transform: rotate(180deg); }

.user-api-body {
    padding: var(--ds-space-200);
    border-top: 1px solid var(--ds-border);
}

.user-api-result {
    margin: var(--ds-space-150) 0 0;
}

.user-api-actions {
    display: flex;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-200);
    flex-wrap: wrap;
}

.user-api-key-status {
    vertical-align: middle;
    margin-left: var(--ds-space-100);
}

/* ---- Jornada laboral (formulario de usuario) ---- */
.user-schedule {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
    margin-top: var(--ds-space-100);
}

.schedule-day {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
}

.schedule-day-label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    min-width: 6.5rem;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.schedule-day-name {
    font-weight: 500;
    font-size: var(--ds-font-size-sm);
}

.schedule-day-times {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.schedule-block {
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.schedule-sep {
    color: var(--ds-text-subtlest);
    font-size: var(--ds-font-size-sm);
    flex-shrink: 0;
}

.schedule-day-times .form-control {
    width: 6rem;
    padding: var(--ds-space-050) var(--ds-space-075);
    font-size: var(--ds-font-size-sm);
    min-width: 0;
}

.schedule-day--off .schedule-day-times {
    opacity: 0.35;
    pointer-events: none;
}

.schedule-day--off .schedule-day-name {
    color: var(--ds-text-subtlest);
}

.tasks-panel-content {
    display: flex;
    flex-direction: column;
}

/* Contenedor de lista (activas/historial): caja sutil que agrupa sin pesar */
.tasks-panel-content:not(.tasks-cards-grid) {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    padding: var(--ds-space-100);
}

/* ---- Toggle de vista (tarjetas / tabla) en Proximas ---- */
.view-toggle {
    display: flex;
    align-items: center;
    gap: var(--ds-space-025);
}

.view-toggle-btn {
    transition: color var(--ds-duration-fast);
}

.view-toggle-btn.is-active {
    color: var(--app-brand);
}

/* ---- Strip de eventos en modo tabla ---- */
.scheduled-events-strip {
    margin-bottom: var(--ds-space-150);
    max-height: 120px;
}

/* ---- Celda origen (correo / manual) en tabla Proximas ---- */
.cell-origin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-full);
    font-size: 12px;
}

.cell-origin-email {
    background: rgba(0, 82, 204, 0.10);
    color: #0052cc;
}

.cell-origin-manual {
    background: var(--ds-surface-sunken);
    color: var(--ds-text-subtle);
}

/* ---- Lozenge de prioridad en tabla Proximas ---- */
.lozenge-priority-low    { background: rgba(151,160,175,0.20); color: var(--ds-text-subtle); }
.lozenge-priority-medium { background: rgba(0,82,204,0.10);   color: #0052cc; }
.lozenge-priority-high   { background: rgba(255,171,0,0.20);  color: #b38600; }
.lozenge-priority-urgent { background: rgba(255,139,0,0.25);  color: var(--ds-orange-700, #974f0c); }

/* ---- Celda fecha vencimiento en tabla Proximas ---- */
.cell-due {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-sm);
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

.cell-due.is-overdue {
    color: var(--ds-red-700, #ae2a19);
    font-weight: var(--ds-font-weight-semibold);
}

.cell-due-overdue-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ds-space-050);
    background: var(--ds-red-500, #ca3521);
    color: #fff;
    border-radius: var(--ds-radius-full);
    font-size: 10px;
    font-weight: var(--ds-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ---- Tabla con layout grid (activas y ayer) ---- */
.tasks-grid-table {
    display: block;
}

.grid-table-head,
.grid-table-row {
    display: grid;
    /* Ancho de columnas configurado por JS via --grid-columns.
       El fallback aqui es el schema de Activas/Ayer por si falta la var. */
    grid-template-columns: var(--grid-columns, minmax(90px, 0.7fr) minmax(260px, 3fr) 110px 120px 70px 110px);
    gap: var(--ds-space-150);
    align-items: center;
    padding: var(--ds-space-100) var(--ds-space-150);
}

.grid-table-head {
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtlest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: var(--ds-border-width-indicator) solid var(--ds-border);
    padding-top: var(--ds-space-075);
    padding-bottom: var(--ds-space-075);
}

.grid-table-head .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
    border: 0;
}

.grid-table-row {
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    transition: background var(--ds-duration-fast);
    font-size: var(--ds-font-size-body-sm);
}

.grid-table-row:last-child,
.grid-table-row:has(+ .grid-table-detail:last-child) {
    border-bottom: none;
}

.grid-table-row:hover {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.03));
}

.grid-cell {
    min-width: 0;
    overflow: hidden;
}

/* Estado en la tabla: sin mayusculas y siempre a la izquierda */
.cell-status {
    text-align: left;
}

.cell-status .lozenge {
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--ds-font-weight-semibold);
}

.cell-alliance-chip {
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-100);
    background: rgba(var(--app-brand-rgb), 0.08);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    font-weight: 500;
    color: var(--ds-text);
    /* Tamano fijo: ocupa el ancho completo de la celda para que todos los chips
       tengan las mismas dimensiones (con ellipsis si el nombre es muy largo) */
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuando la alianza tiene color institucional, aplicarlo tenue como fondo */
.cell-alliance-chip.has-alliance-color {
    background: color-mix(in srgb, var(--alliance-color) 15%, transparent);
}

.cell-alliance-chip i {
    font-size: 11px;
    opacity: 0.8;
}

.cell-task {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    justify-content: center;
}

.cell-task-body {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    min-width: 0;
}

.cell-task-title {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}


.task-entry-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 var(--ds-space-050);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-full);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    line-height: 1;
    flex-shrink: 0;
}

.cell-task-recurring {
    font-size: 12px;
    color: var(--ds-blue-600, #0c66e4);
    flex-shrink: 0;
}

.cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    overflow: hidden;
}

/* Chips de etiquetas mas compactos dentro de las celdas de la tabla */
.cell-tags .tracker-meta-chip {
    padding: 1px var(--ds-space-075);
    font-size: 11px;
    line-height: 1.4;
}

.cell-tags .tracker-meta-chip i {
    font-size: 10px;
}

.cell-time {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--app-brand);
    white-space: nowrap;
}

.cell-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* Boton chevron para expandir fila */
.btn-icon-expand i {
    transition: transform var(--ds-duration-fast);
}

.grid-table-row.is-expanded .btn-icon-expand i {
    transform: rotate(180deg);
}

.grid-table-row.is-expanded {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.03));
    border-bottom-color: transparent;
}

/* Fila detalle (sibling de la row): fondo sutil + separador inferior suave */
.grid-table-detail {
    padding: var(--ds-space-200) var(--ds-space-150);
    background: var(--ds-surface-sunken);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.task-detail-loading,
.task-detail-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-200);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
}

.task-detail-error {
    color: var(--ds-red-700, #ae2a19);
}

.task-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

/* Primera linea: prioridad + fecha inline (label: dato) */
.task-detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-300);
    padding-bottom: var(--ds-space-150);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.task-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
}

.task-detail-meta-label {
    color: var(--ds-text-subtle);
    font-weight: var(--ds-font-weight-medium);
}

.task-detail-due {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    color: var(--ds-text);
}

.task-detail-due i {
    color: var(--ds-text-subtle);
    font-size: 13px;
}

/* Segunda linea: descripcion + registros */
.task-detail-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-300);
}

@media (min-width: 992px) {
    .task-detail-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

.task-detail-block {
    min-width: 0;
}

.task-detail-label {
    margin: 0 0 var(--ds-space-075) 0;
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
}
.task-detail-session-count {
    font-weight: var(--ds-font-weight-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ds-text-subtlest);
}

.task-detail-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    line-height: 1.5;
    word-break: break-word;
}

/* Pildora de prioridad tintada */
.task-detail-priority {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ds-space-100);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
}
.task-detail-priority-low    { background: rgba(151, 160, 175, 0.20); color: var(--ds-text-subtle); }
.task-detail-priority-medium { background: rgba(0, 82, 204, 0.10);    color: #0052cc; }
.task-detail-priority-high   { background: rgba(255, 171, 0, 0.15);   color: #b38600; }
.task-detail-priority-urgent { background: rgba(255, 139, 0, 0.22);   color: var(--ds-orange-700, #974f0c); }

/* Tabla de registros */
.task-detail-entries {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body-sm);
}

.task-detail-entries th {
    text-align: left;
    padding: var(--ds-space-050) var(--ds-space-100);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.task-detail-entries td {
    padding: var(--ds-space-075) var(--ds-space-100);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    vertical-align: middle;
}

.task-detail-entries tr:last-child td {
    border-bottom: none;
}

.task-detail-entries .text-right {
    text-align: right;
    color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

/* Separador de dia entre grupos de registros */
.task-detail-entries-daysep td {
    padding: var(--ds-space-075) var(--ds-space-100) var(--ds-space-025);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
    border-bottom: none;
    background: transparent;
}

/* Chip de estado de entrega (a tiempo / con retraso) */
.task-detail-meta-badge {
    margin-left: auto;
}

.task-detail-status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-100);
    border-radius: var(--ds-radius-full);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    letter-spacing: 0.02em;
}

.task-detail-status-chip i {
    font-size: 12px;
}

.task-detail-status-chip.is-ontime {
    background: rgba(34, 164, 119, 0.12);
    color: var(--ds-green-700, #1f6e48);
}

.task-detail-status-chip.is-late {
    background: rgba(222, 53, 11, 0.12);
    color: var(--ds-red-700, #ae2a19);
}

/* ---- Cards "Proximas" en carrusel horizontal con scroll ---- */
.tasks-cards-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--ds-space-150);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--ds-space-050) var(--ds-space-025) var(--ds-space-150);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--ds-border) transparent;

    /* Fade solo a la derecha (indica que hay mas). Se apaga al llegar al final.
       >>> AJUSTAR ANCHO DEL DEGRADADO aqui: el valor `32px` define el tamano del fade.
       Cambiarlo en ambas lineas (con y sin -webkit-) y tambien en .at-end si se
       quisiera un fade parcial al final. */
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 32px), transparent 100%);
}

.tasks-cards-grid.at-end {
    -webkit-mask-image: none;
            mask-image: none;
}

.tasks-cards-grid::-webkit-scrollbar {
    height: 8px;
}
.tasks-cards-grid::-webkit-scrollbar-track {
    background: transparent;
}
.tasks-cards-grid::-webkit-scrollbar-thumb {
    background: var(--ds-border);
    border-radius: var(--ds-radius-full);
}
.tasks-cards-grid::-webkit-scrollbar-thumb:hover {
    background: var(--ds-border-bold);
}

.task-card {
    flex: 0 0 280px;
    max-width: 280px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-sunken);
    border: none;
    border-radius: var(--ds-radius-200);
    scroll-snap-align: start;
    transition: transform var(--ds-duration-fast), filter var(--ds-duration-fast);
}

.task-card:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
}

/* Fondo segun prioridad (tintes suaves, sin bordes) */
/* baja -> gris | media -> azul | alta -> amarillo | urgente -> naranja | vencida -> rojo */
.task-card-priority-low    { background: rgba(151, 160, 175, 0.20); }
.task-card-priority-medium { background: rgba(0, 82, 204, 0.10); }
.task-card-priority-high   { background: rgba(255, 171, 0, 0.15); }
.task-card-priority-urgent { background: rgba(255, 139, 0, 0.22); }
.task-card.is-overdue      { background: rgba(222, 53, 11, 0.15); }

/* ---- Card de evento de calendario ---- */
.cal-event-card {
    background: rgba(0, 121, 191, 0.12);
    border-left: 3px solid var(--app-brand, #0052cc);
    min-height: 0;
}
.cal-event-card:hover {
    background: rgba(0, 121, 191, 0.18);
}
.cal-event-label {
    font-size: 10px;
    font-weight: var(--ds-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-brand, #0052cc);
    display: flex;
    align-items: center;
    gap: 4px;
}
.cal-event-time {
    margin-left: auto;
    font-size: 13px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--app-brand, #0052cc);
    font-variant-numeric: tabular-nums;
}
.cal-event-countdown {
    font-size: 12px;
    color: var(--ds-text-subtle);
}

.task-card-top {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
}

.task-card-priority-label {
    font-size: 10px;
    font-weight: var(--ds-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-text-subtle);
}

.task-card-priority-medium .task-card-priority-label { color: #0052cc; }
.task-card-priority-high .task-card-priority-label   { color: #b38600; }
.task-card-priority-urgent .task-card-priority-label { color: var(--ds-orange-700, #974f0c); }
.task-card.is-overdue .task-card-priority-label      { color: var(--ds-red-700, #ae2a19); }

.task-card-overdue-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ds-space-075);
    background: var(--ds-red-500, #ca3521);
    color: #fff;
    border-radius: var(--ds-radius-full);
    font-size: 10px;
    font-weight: var(--ds-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.task-card-recurring-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ds-space-075);
    background: var(--ds-blue-100, #e9f2ff);
    color: var(--ds-blue-700, #0055cc);
    border-radius: var(--ds-radius-full);
    font-size: 11px;
}

.task-card-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-card-alliance {
    margin-left: auto;
    max-width: 55%;
    font-size: 11px;
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cuando la alianza tiene color institucional, renderizar como badge tinte */
.task-card-alliance.has-alliance-color {
    padding: 1px var(--ds-space-075);
    border-radius: var(--ds-radius-full);
    background: color-mix(in srgb, var(--alliance-color) 18%, transparent);
}

.task-card-alliance-empty {
    color: var(--ds-text-subtlest);
    font-style: italic;
    font-weight: var(--ds-font-weight-regular);
}

.task-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-050);
}

.task-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--ds-space-075);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--ds-radius-full);
    font-size: 11px;
    color: var(--ds-text);
    white-space: nowrap;
}

.task-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
    margin-top: auto;
    padding-top: var(--ds-space-075);
}

.task-card-due {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    font-weight: var(--ds-font-weight-medium);
    white-space: nowrap;
}

.task-card-due.is-overdue {
    color: var(--ds-red-700, #ae2a19);
    font-weight: var(--ds-font-weight-semibold);
}

.task-card-due-empty {
    color: var(--ds-text-subtlest);
}

.task-card-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.task-card-actions .btn-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.5);
}

.task-card-actions .btn-icon:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.9);
}

.task-card-actions .btn-icon-success:hover:not(:disabled) {
    background: var(--ds-green-400);
    color: #fff;
}

.task-card-actions .btn-icon-danger:hover:not(:disabled) {
    background: var(--ds-red-500, #ca3521);
    color: #fff;
}

/* ---- Historial agrupado por dia ---- */
.history-day {
    margin-bottom: var(--ds-space-300);
}

.history-day:last-of-type {
    margin-bottom: var(--ds-space-200);
}

.history-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) 0;
    margin-bottom: var(--ds-space-075);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.history-day-date {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    text-transform: none;
}

.history-day-total {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body-sm);
    color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

/* Paginacion de historial (reutiliza .pagination-btn / .pagination-info globales) */
.history-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-200);
    padding: var(--ds-space-100);
    margin: var(--ds-space-100) 0;
    flex-wrap: wrap;
}

/* ---- Responsive ---- */

/* Grid-table: colapsar a layout card en pantallas medianas y pequenas */
@media (max-width: 991px) {
    .grid-table-head {
        display: none;
    }

    .grid-table-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "alliance actions"
            "task     actions"
            "status   status"
            "tags     tags"
            "time     time";
        gap: var(--ds-space-075);
        padding: var(--ds-space-150);
    }

    .cell-alliance { grid-area: alliance; }
    .cell-task     { grid-area: task; }
    .cell-status   { grid-area: status; }
    .cell-tags     { grid-area: tags; }
    .cell-time     { grid-area: time; text-align: left; }
    .cell-actions  { grid-area: actions; align-self: start; }
}

@media (max-width: 767px) {
    .tasks-filter-bar {
        gap: var(--ds-space-050);
        padding: var(--ds-space-075);
    }

    .tasks-filter-bar .filter-bar-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .filter-bar-date {
        width: calc(50% - var(--ds-space-025));
    }

    /* Peek effect: la card no ocupa 100% del viewport, deja ver ~10% de la siguiente.
       >>> AJUSTAR PORCENTAJE DE PEEK aqui: cambiar el `90%` en ambas lineas (flex
       y max-width). Valores tipicos: 85% (peek grande), 90% (peek sutil), 95% (minimo). */
    .task-card {
        flex: 0 0 calc(90% - var(--ds-space-075));
        max-width: calc(90% - var(--ds-space-075));
    }
}

/* -------- Responsive tracker -------- */
@media (max-width: 767px) {
    .tracker-task-title {
        flex: 1 1 100%;
        min-width: 0;
    }

    .tracker-actions {
        margin-left: auto;
    }
}

/* ============================================
   SYSTEM
   ============================================ */
.system-section {
    padding: 0;
    margin-bottom: var(--ds-space-300);
}

.system-section:last-child {
    margin-bottom: 0;
}

.system-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-200);
    padding: var(--ds-space-300) var(--ds-space-300) var(--ds-space-200);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    flex-wrap: wrap;
}

.system-section-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-025) 0;
}

.system-section-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

.system-subsection-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: var(--ds-space-300) var(--ds-space-300) var(--ds-space-100);
    padding-top: var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

/* Summary de diagnostico */
.system-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ds-space-150);
    padding: var(--ds-space-200) var(--ds-space-300);
}

.system-summary-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    border-radius: var(--ds-radius-200);
    border: var(--ds-border-width) solid var(--ds-border);
}

.system-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-200);
    font-size: 20px;
    flex-shrink: 0;
}

.system-summary-ok .system-summary-icon      { background: var(--ds-background-success);     color: var(--ds-icon-success); }
.system-summary-warning .system-summary-icon { background: var(--ds-background-warning);     color: var(--ds-icon-warning); }
.system-summary-error .system-summary-icon   { background: var(--ds-background-danger);      color: var(--ds-icon-danger); }

.system-summary-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.system-summary-value {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-bold);
    line-height: 1;
    color: var(--ds-text);
}

.system-summary-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin-top: var(--ds-space-025);
}

/* Lista de checks */
.system-checks {
    padding: 0 var(--ds-space-300) var(--ds-space-300);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.system-check {
    display: flex;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    border-radius: var(--ds-radius-100);
    border-left: 3px solid var(--ds-border);
    background: var(--ds-surface-sunken);
}

.system-check-error   { border-left-color: var(--ds-border-danger);  background: var(--ds-background-danger); }
.system-check-warning { border-left-color: var(--ds-border-warning); background: var(--ds-background-warning); }
.system-check-info    { border-left-color: var(--ds-border-information); background: var(--ds-background-information); }

.system-check-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.system-check-error .system-check-icon   { color: var(--ds-icon-danger); }
.system-check-warning .system-check-icon { color: var(--ds-icon-warning); }
.system-check-info .system-check-icon    { color: var(--ds-icon-information); }

.system-check-body {
    flex: 1;
    min-width: 0;
}

.system-check-header {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-050);
}

.system-check-name {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.system-check-detail {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-050) 0;
}

.system-check-fix {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
}

.system-check-fix i {
    color: var(--ds-icon-warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.system-all-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-300);
    color: var(--ds-text-success);
    font-weight: var(--ds-font-weight-medium);
}

.system-all-ok i {
    font-size: 20px;
}

/* Dependencias */
.system-deps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-150);
    padding: var(--ds-space-200) var(--ds-space-300);
}

.system-dep {
    display: flex;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    background: var(--ds-surface);
}

.system-dep-ok      { border-left: 3px solid var(--ds-border-success); }
.system-dep-missing { border-left: 3px solid var(--ds-border-warning); }

.system-dep-icon {
    font-size: 24px;
    color: var(--ds-icon-subtle);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.system-dep-body {
    flex: 1;
    min-width: 0;
}

.system-dep-name {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-050);
}

.system-dep-version {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-050);
}

.system-dep-use {
    margin: 0;
}

/* Info PHP */
.system-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ds-space-150);
    padding: var(--ds-space-200) var(--ds-space-300);
}

.system-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-100);
}

.system-info-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.system-info-value {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
}

.system-ext-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ds-space-075);
    padding: 0 var(--ds-space-300) var(--ds-space-300);
}

.system-ext {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body-sm);
}

.system-ext-ok      { background: var(--ds-background-success); color: var(--ds-text); }
.system-ext-missing { background: var(--ds-background-neutral); color: var(--ds-text-subtle); }

.system-ext-ok i      { color: var(--ds-icon-success); }
.system-ext-missing i { color: var(--ds-icon-subtle); }

.system-ext code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Permisos */
.system-perms-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
    padding: var(--ds-space-200) var(--ds-space-300) var(--ds-space-300);
}

.system-perm {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-075) var(--ds-space-150);
    border-radius: var(--ds-radius-100);
    background: var(--ds-surface-sunken);
}

.system-perm code {
    flex: 1;
    background: transparent;
    padding: 0;
    color: var(--ds-text);
    font-size: var(--ds-font-size-body-sm);
}

.system-perm-ok i    { color: var(--ds-icon-success); }
.system-perm-error i { color: var(--ds-icon-danger); }

@media (min-width: 768px) {
    .system-deps-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    /* Nombre + estado + version en la misma linea (2 columnas x fila) */
    .system-dep-body {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name     version"
            "use      use";
        align-items: center;
        column-gap: var(--ds-space-100);
        row-gap: var(--ds-space-050);
    }

    .system-dep-name    { grid-area: name; margin-bottom: 0; }
    .system-dep-version { grid-area: version; margin-bottom: 0; justify-content: flex-end; }
    .system-dep-use     { grid-area: use; }
}

/* Padding interno de secciones que no tienen header */
.system-section > .alert {
    margin: var(--ds-space-200) var(--ds-space-300) var(--ds-space-300);
}

/* ============================================
   SNAPSHOTS (Copias de seguridad)
   ============================================ */

/* Indicador de rotacion */
.snapshots-rotation {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    margin-bottom: var(--ds-space-200);
    font-size: var(--ds-font-size-body-sm);
}

.snapshots-rotation-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    color: var(--ds-text);
}

.snapshots-rotation-item i {
    color: var(--ds-icon-subtle);
    font-size: 14px;
}

.snapshots-rotation-item strong {
    font-family: var(--ds-font-family-mono);
    font-weight: var(--ds-font-weight-semibold);
}

.snapshots-rotation-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-050);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    padding-top: var(--ds-space-075);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.snapshots-rotation-hint i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Chip filter group */
.chip-group {
    display: flex;
    gap: var(--ds-space-050);
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: var(--ds-space-050) var(--ds-space-150);
    background: transparent;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-full);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast), border-color var(--ds-duration-fast);
}

.chip:hover:not(.chip-active) {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
}

.chip.chip-active {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
    border-color: var(--app-brand);
}

.chip.chip-active i {
    color: var(--ds-text-inverse);
}

/* Lista de snapshots */
.snapshots-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-150);
}

.snapshot-card {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas:
        "icon body"
        "note note"
        "meta actions";
    align-items: center;
    gap: var(--ds-space-100) var(--ds-space-150);
    padding: var(--ds-space-150);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    transition: border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
}

.snapshot-card .snapshot-icon { grid-area: icon; }
.snapshot-card .snapshot-body { grid-area: body; }
.snapshot-card .snapshot-note { grid-area: note; }
.snapshot-card .snapshot-meta { grid-area: meta; }
.snapshot-card .snapshot-actions {
    grid-area: actions;
    justify-content: flex-end;
}

.snapshot-card:hover {
    box-shadow: var(--ds-shadow-raised);
}

.snapshot-card.is-favorite {
    border-left: 3px solid var(--ds-yellow-400);
}

/* Desactivar boton eliminar cuando la copia es favorita */
.snapshot-card.is-favorite .btn-delete {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.snapshot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-200);
    font-size: 20px;
    flex-shrink: 0;
}

.snapshot-icon-data {
    background: var(--ds-background-information);
    color: var(--ds-icon-information);
}

.snapshot-icon-full {
    background: var(--ds-background-discovery);
    color: var(--ds-icon-discovery);
}

.snapshot-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
    align-self: center;
}

.snapshot-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
}

.snapshot-header .lozenge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-025);
}

.snapshot-filename {
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.snapshot-meta {
    display: flex;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    flex-shrink: 0;
}

.snapshot-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.snapshot-note {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    background: var(--ds-surface-sunken);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-100);
    margin: var(--ds-space-050) 0 0 0;
    border-left: 2px solid var(--ds-border);
}

.snapshot-actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-025);
    flex-shrink: 0;
}

.btn-favorite.is-active {
    color: var(--ds-yellow-500);
}

.btn-favorite.is-active:hover {
    color: var(--ds-yellow-600);
    background: var(--ds-background-warning);
}

/* Slide panel: opciones de tipo de backup */
.snapshot-type-options {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.snapshot-type-option {
    display: block;
    cursor: pointer;
    position: relative;
}

.snapshot-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.snapshot-type-option-body {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    background: var(--ds-surface);
    border: var(--ds-border-width-indicator) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.snapshot-type-option:hover .snapshot-type-option-body {
    border-color: var(--ds-border-bold);
}

.snapshot-type-option input:checked ~ .snapshot-type-option-body {
    border-color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.04);
}

.snapshot-type-icon {
    font-size: 24px;
    color: var(--ds-icon-subtle);
    flex-shrink: 0;
}

.snapshot-type-option input:checked ~ .snapshot-type-option-body .snapshot-type-icon {
    color: var(--app-brand);
}

.snapshot-type-option-info {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
    font-size: var(--ds-font-size-body-sm);
}

.snapshot-type-option-info strong {
    color: var(--ds-text);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
}

.snapshot-type-option-info span {
    color: var(--ds-text-subtle);
}

/* ============================================
   CRON LOG
   ============================================ */
.cron-log-list {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.cron-log-entry {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-border-radius);
    font-size: var(--ds-font-size-small);
    background: var(--ds-background-neutral);
    border-left: 3px solid transparent;
}

.cron-log-ok  { border-left-color: var(--ds-icon-success); }
.cron-log-err { border-left-color: var(--ds-icon-danger); }

.cron-log-ts     { color: var(--ds-text-subtle); white-space: nowrap; }
.cron-log-msg    { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cron-log-size   { white-space: nowrap; }
.cron-log-icon   { line-height: 1; }

/* ============================================
   ACTIVITY LOG
   ============================================ */
.activity-filter-bar {
    align-items: center;
    gap: var(--ds-space-075);
}

.activity-filter-group {
    flex: 0 1 auto;
    min-width: 130px;
    max-width: 150px;
}

.activity-filter-group .form-control {
    font-size: var(--ds-font-size-body-sm);
    padding: var(--ds-space-075) var(--ds-space-100);
    min-height: 32px;
}

.activity-filter-bar .filter-bar-select {
    min-width: 120px;
    max-width: 150px;
    font-size: var(--ds-font-size-body-sm);
    padding: var(--ds-space-075) var(--ds-space-300) var(--ds-space-075) var(--ds-space-100);
    min-height: 32px;
}

.activity-results {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    margin-left: auto;
    font-size: var(--ds-font-size-body-sm);
    white-space: nowrap;
}

.activity-results-count {
    color: var(--ds-text-subtle);
    font-weight: var(--ds-font-weight-medium);
}

.activity-results-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: 2px var(--ds-space-075);
    background: rgba(var(--app-brand-rgb), 0.1);
    color: var(--app-brand);
    border-radius: var(--ds-radius-full);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
}

.activity-col-date {
    width: 1%;
    white-space: nowrap;
    min-width: 140px;
}

.activity-col-ip {
    width: 1%;
    white-space: nowrap;
}

.activity-ts-date {
    display: block;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    font-family: var(--ds-font-family-mono);
}

.activity-ts-time {
    display: block;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    font-family: var(--ds-font-family-mono);
}

.activity-user-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-user-name {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    font-size: var(--ds-font-size-body-sm);
}

.activity-user-handle {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    font-family: var(--ds-font-family-mono);
}

.activity-detail {
    font-size: var(--ds-font-size-body-sm);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.activity-ip {
    background: transparent;
    padding: 0;
    color: var(--ds-text-subtlest);
    font-size: var(--ds-font-size-body-sm);
}

/* ── Error log ── */
.error-message-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-050);
}

.error-detail-toggle {
    background: none;
    border: none;
    padding: 0 var(--ds-space-050);
    cursor: pointer;
    color: var(--ds-text-subtlest);
    flex-shrink: 0;
    line-height: 1;
}

.error-detail-toggle:hover {
    color: var(--ds-text);
}

.error-detail-panel {
    margin-top: var(--ds-space-100);
    padding: var(--ds-space-100);
    background: var(--ds-background-neutral);
    border-radius: var(--ds-border-radius);
    border: 1px solid var(--ds-border);
}

.error-detail-meta {
    font-size: var(--ds-font-size-body-sm);
    margin-bottom: var(--ds-space-075);
}

.error-trace {
    font-family: var(--ds-font-family-code, monospace);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
    padding: var(--ds-space-075);
    background: var(--ds-background-input);
    border-radius: var(--ds-border-radius);
}

.activity-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-400);
    color: var(--ds-text-subtle);
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-150) var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
    flex-wrap: wrap;
    gap: var(--ds-space-150);
}

.pagination-info {
    font-size: var(--ds-font-size-body-sm);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--ds-space-025);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--ds-space-100);
    background: transparent;
    border: var(--ds-border-width) solid transparent;
    border-radius: var(--ds-radius-100);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast), border-color var(--ds-duration-fast);
}

.pagination-btn:hover:not(:disabled):not(.pagination-btn-active) {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
}

.pagination-btn:disabled {
    color: var(--ds-text-disabled);
    cursor: not-allowed;
}

.pagination-btn-active {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
    cursor: default;
}

.pagination-btn-active:hover {
    background: var(--app-brand);
    color: var(--ds-text-inverse);
}

.pagination-ellipsis {
    padding: 0 var(--ds-space-050);
    color: var(--ds-text-subtlest);
}

/* ============================================
   INTEGRATIONS
   ============================================ */
.integration-card {
    padding: 0;
}

.integration-tabs {
    margin-bottom: var(--ds-space-300);
}

.integration-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.integration-panel {
    display: block;
}

/* Punto de estado en pestaña (verde = configurada) */
.tab-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: var(--ds-space-050);
    flex-shrink: 0;
}

.tab-status-ok {
    background: var(--ds-icon-success);
}

.integration-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    padding: var(--ds-space-300);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.integration-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-200);
    background: var(--ds-background-danger);
    color: var(--ds-icon-danger);
    font-size: 24px;
    flex-shrink: 0;
}

.integration-header-info {
    flex: 1;
    min-width: 0;
}

.integration-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-025) 0;
}

.integration-description {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

.integration-header-status {
    flex-shrink: 0;
}

.integration-header-status .lozenge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: var(--ds-space-025) var(--ds-space-100);
    font-size: var(--ds-font-size-body-sm);
}

.integration-body {
    padding: var(--ds-space-300);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.integration-section-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: var(--ds-space-200) 0 var(--ds-space-100) 0;
    padding-top: var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.integration-section-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Password field con toggle */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: calc(var(--ds-space-100) + 24px + var(--ds-space-075));
    font-family: var(--ds-font-family-mono);
    font-size: var(--ds-font-size-body-sm);
}

.password-toggle {
    position: absolute;
    right: var(--ds-space-075);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--ds-icon-subtle);
    cursor: pointer;
    border-radius: var(--ds-radius-100);
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.password-toggle:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-icon);
}

.password-toggle:focus-visible {
    outline: var(--ds-border-width-outline) solid var(--ds-border-focused);
    outline-offset: 2px;
}

/* Label con lozenge al lado (status saved) */
.integration-body .form-label .lozenge {
    margin-left: var(--ds-space-075);
    font-size: 10px;
    padding: 2px var(--ds-space-050);
    vertical-align: middle;
}

/* Test result */
.integration-test-result {
    padding: var(--ds-space-200);
    border-radius: var(--ds-radius-200);
    animation: fadeIn var(--ds-duration-normal);
}

.integration-test-result.integration-test-success {
    background: var(--ds-background-success);
    border-left: 3px solid var(--ds-border-success);
}

.integration-test-result.integration-test-success .integration-test-header i {
    color: var(--ds-icon-success);
}

.integration-test-result.integration-test-error {
    background: var(--ds-background-danger);
    border-left: 3px solid var(--ds-border-danger);
}

.integration-test-result.integration-test-error .integration-test-header i {
    color: var(--ds-icon-danger);
}

.integration-test-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
}

.integration-test-header i {
    font-size: 18px;
    flex-shrink: 0;
}

.integration-test-loading {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    color: var(--ds-text-subtle);
}

.integration-test-plan {
    margin-top: var(--ds-space-150);
    padding-top: var(--ds-space-150);
    border-top: var(--ds-border-width) solid rgba(0, 0, 0, 0.08);
}

.integration-test-plan-title {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 var(--ds-space-100) 0;
}

.integration-test-plan-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ds-space-050) var(--ds-space-200);
    margin: 0;
    font-size: var(--ds-font-size-body-sm);
}

.integration-test-plan-list dt {
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    text-transform: capitalize;
}

.integration-test-plan-list dd {
    margin: 0;
    color: var(--ds-text);
    font-family: var(--ds-font-family-mono);
}

/* Acciones */
.integration-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-100);
    padding-top: var(--ds-space-200);
    margin-top: var(--ds-space-100);
    border-top: var(--ds-border-width) solid var(--ds-border);
    flex-wrap: wrap;
}

/* Guia colapsable */
.integration-guide {
    margin: 0 var(--ds-space-300) var(--ds-space-300);
    background: var(--ds-surface-sunken);
    border-radius: var(--ds-radius-200);
    overflow: hidden;
}

.integration-guide-summary {
    padding: var(--ds-space-150) var(--ds-space-200);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    list-style: none;
    transition: background var(--ds-duration-fast);
}

.integration-guide-summary:hover {
    background: var(--ds-interaction-hovered);
}

.integration-guide-summary::-webkit-details-marker {
    display: none;
}

.integration-guide-summary::after {
    content: '';
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ds-icon-subtle);
    transition: transform var(--ds-duration-normal);
}

.integration-guide[open] .integration-guide-summary::after {
    transform: rotate(180deg);
}

.integration-guide-body {
    padding: 0 var(--ds-space-200) var(--ds-space-200);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.integration-guide-body p {
    margin: 0 0 var(--ds-space-150) 0;
}

.integration-guide-steps {
    padding-left: var(--ds-space-300);
    margin: 0 0 var(--ds-space-150) 0;
}

.integration-guide-steps li {
    margin-bottom: var(--ds-space-100);
    color: var(--ds-text);
}

.integration-guide-steps a {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

/* ============================================
   APPLICATION SETTINGS
   ============================================ */
.application-form {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-400);
}

.application-section {
    padding: 0;
    overflow: visible;
    margin-bottom: var(--ds-space-400);
}

.application-section:last-of-type {
    margin-bottom: 0;
}

.application-section-header {
    padding: var(--ds-space-300) var(--ds-space-400) var(--ds-space-300);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.application-section-title {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-050) 0;
}

.application-section-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

.application-section-body {
    padding: var(--ds-space-400);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-300);
}

/* Asset row (logo + favicon en fila compacta) */
.asset-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-100);
}

.asset-row-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-150);
    background: var(--ds-surface-sunken);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
}

.asset-row-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: var(--ds-space-050);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    overflow: hidden;
    flex-shrink: 0;
}

.asset-row-preview-sm {
    width: 40px;
    height: 40px;
}

.asset-row-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.asset-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asset-row-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text);
}

.asset-row-hint {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.asset-row-actions {
    display: flex;
    gap: var(--ds-space-050);
    flex-shrink: 0;
    align-items: center;
}

/* Placeholder compartido */
.asset-upload-placeholder {
    font-size: 22px;
    color: var(--ds-icon-subtle);
}

.asset-row-preview-sm .asset-upload-placeholder {
    font-size: 18px;
}

/* Color row (primario + acento + preview en fila) */
.color-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-150);
    align-items: end;
}

.color-row-field {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
    min-width: 0;
}

.color-row-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.color-row-preview {
    padding: 0;
    background: transparent;
    border: none;
    min-height: 0;
}

/* Mock de preview de colores */
.color-preview-mock {
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    overflow: hidden;
    min-width: 180px;
}

.cpm-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-075) var(--ds-space-100);
    gap: var(--ds-space-075);
}

.cpm-topbar-logo {
    display: flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-bold);
}

.cpm-topbar-icon {
    font-size: 14px;
}

.cpm-body {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-100);
    background: var(--ds-surface);
    flex-wrap: wrap;
}

.cpm-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--ds-radius-100);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    border: 1.5px solid transparent;
    cursor: default;
    white-space: nowrap;
}

.cpm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.cpm-toggle-track {
    width: 28px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 2px;
}

.cpm-toggle-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    margin-left: auto;
}

/* Toggle field large (para switches principales) */
.toggle-field-lg {
    align-items: flex-start;
}

.toggle-field-lg input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.toggle-field-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-field-label strong {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.toggle-field-label .form-helper {
    margin: 0;
}

/* Maintenance box */
.maintenance-box {
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-200);
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.maintenance-box.is-active {
    border-color: var(--ds-border-warning);
    background: rgba(226, 178, 3, 0.04);
}

.maintenance-box-body {
    display: none;
    padding-top: var(--ds-space-200);
    margin-top: var(--ds-space-150);
    border-top: var(--ds-border-width) solid var(--ds-border);
    display: none;
}

.maintenance-box.is-active .maintenance-box-body {
    display: block;
}

/* Barra de acciones sticky */
.application-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150) var(--ds-space-200);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow: var(--ds-shadow-raised);
    margin-top: var(--ds-space-100);
    z-index: 10;
}

/* ============================================
   MAINTENANCE PAGE (standalone)
   ============================================ */
.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-400) var(--ds-space-200);
    background: var(--ds-surface-sunken);
}

.maintenance-container {
    max-width: 480px;
    width: 100%;
    padding: var(--ds-space-400);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-300);
    box-shadow: var(--ds-shadow-overlay);
    text-align: center;
}

.maintenance-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--ds-space-300) auto;
    border-radius: var(--ds-radius-round);
    background: rgba(var(--app-brand-rgb), 0.08);
    color: var(--app-brand);
    font-size: 32px;
}

.maintenance-title {
    font-size: var(--ds-font-size-heading-lg);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin-bottom: var(--ds-space-150);
}

.maintenance-message {
    font-size: var(--ds-font-size-body-lg);
    color: var(--ds-text-subtle);
    line-height: var(--ds-line-height-body-lg);
    margin-bottom: var(--ds-space-300);
}

.maintenance-app {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ds-space-300);
}

.maintenance-login-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
}

/* ============================================
   RESPONSIVE — Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
    body {
        font-size: var(--ds-font-size-body);
        line-height: var(--ds-line-height-body);
    }

    .main-content {
        padding: var(--ds-space-300);
    }

    .slide-panel {
        max-width: var(--ds-slide-panel-width);
    }

    /* Dashboard tablet */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Application: assets + colors en fila */
    .asset-row {
        grid-template-columns: 1fr 1fr;
    }
    .color-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .main-content {
        padding: var(--ds-space-300);
        margin-left: var(--ds-sidebar-width-collapsed);
    }

    /* Login: card layout — branding stays hidden, header always visible */
    .login-branding {
        display: none;
    }

    .login-mobile-header {
        display: flex;
    }

    .login-container {
        padding: var(--ds-space-300);
    }

    .login-card {
        padding: var(--ds-space-400) var(--ds-space-500);
    }

    /* Sidebar: collapsed (icons only) on tablet */
    .sidebar {
        transform: translateX(0);
        width: var(--ds-sidebar-width-collapsed);
    }

    .sidebar .sidebar-link-text,
    .sidebar .sidebar-chevron,
    .sidebar .sidebar-footer-text {
        display: none;
    }

    .sidebar .sidebar-submenu {
        display: none;
    }

    .sidebar .sidebar-link {
        justify-content: center;
        padding: var(--ds-space-075) var(--ds-space-100);
    }

    .sidebar .sidebar-link-icon {
        font-size: 18px;
        width: 20px;
        margin: 0;
    }

    .sidebar .sidebar-item {
        padding: 0 var(--ds-space-100);
    }

    .sidebar .sidebar-footer {
        display: none;
    }

    /* Sidebar expanded on tablet — overlays content */
    .sidebar.open {
        width: var(--ds-sidebar-width);
        box-shadow: var(--ds-shadow-overlay);
    }

    .sidebar.open .sidebar-link-text,
    .sidebar.open .sidebar-chevron,
    .sidebar.open .sidebar-footer-text {
        display: inline;
    }

    .sidebar.open .sidebar-submenu {
        display: flex;
    }

    .sidebar.open .sidebar-submenu:not(.show) {
        max-height: 0;
        overflow: hidden;
    }

    .sidebar.open .sidebar-link {
        justify-content: flex-start;
        padding: var(--ds-space-075) var(--ds-space-150);
    }

    .sidebar.open .sidebar-link-icon {
        font-size: 18px;
        width: 20px;
    }

    .sidebar.open .sidebar-item {
        padding: 0 var(--ds-space-100);
    }

    .sidebar.open .sidebar-footer {
        display: block;
    }

    /* Content offset for collapsed sidebar */
    .main-content {
        margin-left: var(--ds-sidebar-width-collapsed);
    }

    /* Settings */
    .settings-overview-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Users table: mostrar columnas ocultas */
    .d-none-mobile {
        display: table-cell;
    }

    /* Alliances grid: 2 columnas */
    .alliances-grid:not(.alliances-grid-table) {
        grid-template-columns: 1fr 1fr;
    }

    /* Snapshots card: todo en una fila, nota full-width debajo */
    .snapshot-card {
        grid-template-columns: 48px 1fr auto auto;
        grid-template-areas:
            "icon body meta actions"
            "note note note note";
        gap: var(--ds-space-050) var(--ds-space-200);
        padding: var(--ds-space-200);
    }

    .snapshot-card .snapshot-actions {
        align-items: center;
    }

    /* Si no hay nota, no se consume espacio */
    .snapshot-card:not(:has(.snapshot-note)) {
        grid-template-areas: "icon body meta actions";
    }

    .snapshot-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    /* Rotation: items horizontal en tablet+, hint mantiene su linea */
    .snapshots-rotation-items {
        display: flex;
        gap: var(--ds-space-300);
        flex-wrap: wrap;
    }

    /* En viewports grandes, items + hint en la misma linea */
    @media (min-width: 1200px) {
        .snapshots-rotation {
            flex-direction: row;
            align-items: center;
            gap: var(--ds-space-300);
        }
        .snapshots-rotation-hint {
            margin-left: auto;
            padding-top: 0;
            border-top: none;
        }
        .snapshots-rotation-hint i {
            margin-top: 0;
        }
    }
}

/* ============================================
   RESPONSIVE — Desktop (992px+)
   ============================================ */
@media (min-width: 992px) {
    /* Sidebar collapsed by default on desktop */
    .sidebar {
        transform: translateX(0);
        width: var(--ds-sidebar-width-collapsed);
    }

    .sidebar .sidebar-link-text,
    .sidebar .sidebar-chevron,
    .sidebar .sidebar-footer-text {
        display: none;
    }

    .sidebar .sidebar-submenu {
        display: none;
    }

    .sidebar .sidebar-link {
        justify-content: center;
        padding: var(--ds-space-075) var(--ds-space-100);
    }

    .sidebar .sidebar-link-icon {
        font-size: 18px;
        width: 20px;
        margin: 0;
    }

    .sidebar .sidebar-item {
        padding: 0 var(--ds-space-100);
    }

    .sidebar .sidebar-footer {
        display: none;
    }

    /* Sidebar expanded on desktop — overlays content */
    .sidebar.open {
        box-shadow: var(--ds-shadow-overlay);
        width: var(--ds-sidebar-width);
    }

    .sidebar.open .sidebar-link-text,
    .sidebar.open .sidebar-chevron,
    .sidebar.open .sidebar-footer-text {
        display: inline;
    }

    .sidebar.open .sidebar-submenu {
        display: flex;
    }

    .sidebar.open .sidebar-submenu:not(.show) {
        max-height: 0;
        overflow: hidden;
    }

    .sidebar.open .sidebar-link {
        justify-content: flex-start;
        padding: var(--ds-space-075) var(--ds-space-150);
    }

    .sidebar.open .sidebar-link-icon {
        font-size: 18px;
        width: 20px;
    }

    .sidebar.open .sidebar-item {
        padding: 0 var(--ds-space-100);
    }

    .sidebar.open .sidebar-footer {
        display: block;
    }

    /* Content offset */
    .main-content {
        margin-left: var(--ds-sidebar-width-collapsed);
        padding: var(--ds-space-400) var(--ds-space-300);
        max-width: calc(var(--ds-content-max-width) + var(--ds-sidebar-width-collapsed));
    }

    /* Dashboard desktop */
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .dashboard-grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-tasks-row {
        grid-template-columns: 2fr 3fr;
        align-items: stretch;
    }

    .dashboard-activity-row {
        grid-template-columns: 1fr;
    }

    .dashboard-insights-row {
        grid-template-columns: 1fr 1fr;
    }

    .insight-weekly {
        flex-direction: row;
        align-items: center;
    }

    .insight-week-col-right {
        text-align: right;
    }

    .insight-week-delta {
        align-self: center;
    }

    /* Alliances grid: 3 columnas en desktop */
    .alliances-grid:not(.alliances-grid-table) {
        grid-template-columns: repeat(3, 1fr);
    }

    .topbar-user-name {
        display: inline;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   REPORTES (Fase 4.5)
   ============================================ */

.page-header-actions {
    display: flex;
    gap: var(--ds-space-100);
    flex-shrink: 0;
}

.report-filters {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-100) var(--ds-space-200);
    margin-bottom: var(--ds-space-200);
}

/* Barra de filtros: cada grupo con label inline (al lado del campo) */
.report-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ds-space-300);
    flex-wrap: wrap;
}

.report-filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ds-space-100);
    min-width: 0;
}

.report-filter-label {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

.report-user-select {
    min-width: 180px;
    max-width: 240px;
    height: 32px;
}

/* Litepicker flotante (popover). No empuja contenido porque usa position:absolute */
.litepicker {
    font-family: inherit;
    /* Separacion vertical del boton trigger: translate + margin para ganar a
       los inline styles que Litepicker calcula en runtime al abrir el popover */
    transform: translateY(16px) !important;
    /* Sombra mas amplia para que el borde inferior no se confunda con el fondo */
    box-shadow:
        0 12px 28px rgba(9, 30, 66, 0.22),
        0 4px 8px  rgba(9, 30, 66, 0.12),
        0 0 0 1px  rgba(9, 30, 66, 0.08);
    border-radius: var(--ds-radius-200);
}

.litepicker .day-item:hover {
    background-color: rgba(var(--app-brand-rgb), 0.12);
    color: var(--app-brand);
}

.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    background-color: var(--app-brand);
    color: #fff;
}

.litepicker .day-item.is-in-range {
    background-color: rgba(var(--app-brand-rgb), 0.15);
    color: var(--ds-text);
}

.litepicker .day-item.is-today {
    color: var(--app-brand);
    font-weight: bold;
}

/* Panel de presets del plugin `ranges` */
.litepicker .container__predefined-ranges {
    border-right: var(--ds-border-width) solid var(--ds-border);
    background: var(--ds-surface-sunken);
    padding: 0.5rem;
}

.litepicker .container__predefined-ranges > button {
    color: var(--ds-neutral-1100) !important;   /* max contraste: #091E42 */
    font-weight: var(--ds-font-weight-medium);
    padding: var(--ds-space-075) var(--ds-space-150);
    font-size: var(--ds-font-size-body-sm);
    border-radius: var(--ds-radius-100);
}

.litepicker .container__predefined-ranges > button:hover {
    background: var(--ds-background-neutral-hovered) !important;
    color: var(--ds-neutral-1100) !important;
}

/* ---- Grupo de botones (toggle) ---- */
.btn-group {
    display: inline-flex;
    background: var(--ds-surface-sunken);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    overflow: hidden;
}

.btn-group-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    padding: var(--ds-space-075) var(--ds-space-150);
    background: transparent;
    border: none;
    border-right: var(--ds-border-width) solid var(--ds-border);
    color: var(--ds-text-subtle);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast);
}

.btn-group-item:last-child { border-right: none; }

.btn-group-item:hover:not(.active) {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.04));
    color: var(--ds-text);
}

.btn-group-item.active {
    background: var(--app-accent, var(--app-brand));
    color: var(--accent-fg, #fff);
}

/* ---- Barra combinada filtros + exports ---- */
.report-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-200);
    margin-bottom: var(--ds-space-200);
    flex-wrap: wrap;
}

.report-action-filters {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    flex-wrap: wrap;
}

/* ---- Multi-select dropdown ---- */
.report-ms {
    position: relative;
}

.report-ms-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    white-space: nowrap;
    max-width: 220px;
}

.report-ms-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-ms-chevron {
    flex-shrink: 0;
    font-size: 11px;
    transition: transform var(--ds-duration-fast);
}

.report-ms-btn[aria-expanded="true"] .report-ms-chevron {
    transform: rotate(180deg);
}

.report-ms-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    max-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--ds-surface-overlay);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    box-shadow:
        0 8px 16px rgba(9, 30, 66, 0.18),
        0 0 0 1px rgba(9, 30, 66, 0.06);
    z-index: 200;
    padding: var(--ds-space-075);
}

.report-ms-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) var(--ds-space-100);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    user-select: none;
}

.report-ms-item:hover {
    background: var(--ds-background-neutral-hovered);
}

.report-ms-item input[type="checkbox"] {
    accent-color: var(--app-brand);
    flex-shrink: 0;
}

.report-ms-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ds-radius-full);
    flex-shrink: 0;
    background: var(--ds-border);
}

.report-ms-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ds-radius-full);
    background: var(--app-brand);
    color: #fff;
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    flex-shrink: 0;
}

/* ---- Barra de exports ---- */
.report-export-group {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.report-export-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

/* ---- Sección gráfico temporal ---- */
.report-bar-section {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-200) var(--ds-space-300);
    margin-bottom: var(--ds-space-200);
    height: 200px;
}

.report-bar-section canvas {
    width: 100% !important;
    height: 100% !important;
}

.report-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-400);
    color: var(--ds-text-subtle);
}

/* ----- Vista del reporte ----- */
.report-view {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-300);
}

/* Header del reporte: dos columnas (user+fecha izq | total der) */
.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-300);
    padding-bottom: var(--ds-space-300);
    margin-bottom: var(--ds-space-300);
    border-bottom: var(--ds-border-width-indicator) solid var(--ds-border);
    flex-wrap: wrap;
}

.report-header-left {
    min-width: 0;
}

.report-header-right {
    text-align: right;
}

.report-user-name {
    font-size: var(--ds-font-size-heading-md);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    line-height: 1.2;
    margin-bottom: var(--ds-space-050);
}

.report-period {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text-subtle);
}

.report-total-label {
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-050);
}

.report-total-time {
    font-size: 2.75rem;
    font-weight: var(--ds-font-weight-bold);
    color: var(--app-brand);
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--ds-font-family-mono);
}

.report-total-tasks {
    margin-top: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.report-section {
    margin-bottom: var(--ds-space-400);
}

.report-section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-100);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0 0 var(--ds-space-150);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.report-section-title i {
    color: var(--app-brand);
}

/* Grafico + tabla en grid lado a lado */
.report-alliance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-200);
    align-items: start;
}

@media (min-width: 900px) {
    .report-alliance-grid {
        grid-template-columns: minmax(320px, 400px) 1fr;
    }
}

/* Contenedores de grafico: transparentes en pantalla */
.report-chart-row,
.report-chart-col {
    display: block;
}

.report-chart-wrap {
    position: relative;
    height: 320px;
}

/* Elementos exclusivos de impresion: ocultos en pantalla */
.print-doc-header,
.print-page-footer,
.report-print-legend,
.print-chart-info {
    display: none;
}

.report-alliance-table .table,
.report-group-card .table,
.report-section > .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body-sm);
}

.report-alliance-table th,
.report-group-card th,
.report-section > .table th {
    padding: var(--ds-space-075) var(--ds-space-100);
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-text-subtle);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

/* Alineacion de encabezados: coincide con sus celdas */
.report-table th.text-left  { text-align: left; }
.report-table th.text-right { text-align: right; }

.report-alliance-table td,
.report-group-card td,
.report-section > .table td {
    padding: var(--ds-space-075) var(--ds-space-100);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.report-alliance-table tr:last-child td,
.report-group-card tbody tr:last-child td,
.report-section > .table tr:last-child td {
    border-bottom: none;
}

.report-alliance-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.report-alliance-chip .report-alliance-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ds-radius-full);
    background: var(--alliance-color, var(--app-brand));
    flex-shrink: 0;
}

.report-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
}

.report-tag-chip .report-tag-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ds-radius-full);
    background: var(--tag-color, var(--app-brand));
    flex-shrink: 0;
}

/* ----- Grupos de tareas / tags: card con header + tabla adentro ----- */
.report-group-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

.report-group-card {
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
}

.report-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ds-space-150);
    padding: var(--ds-space-100) var(--ds-space-200);
    background: var(--ds-background-selected);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.report-group-chip {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.report-group-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.report-group-meta-item strong {
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-semibold);
}

.report-group-meta-sep {
    color: var(--ds-border);
}

/* Tabla dentro del card: sin margen, padding mas amplio alineado al header */
.report-group-card .report-group-table {
    margin: 0;
    width: 100%;
}

.report-group-card .report-group-table thead th {
    padding: var(--ds-space-050) var(--ds-space-200);
    background: transparent;
}

.report-group-card .report-group-table tbody td {
    padding: var(--ds-space-100) var(--ds-space-200);
}

.report-group-card .report-group-table tbody tr:nth-child(even) td {
    background: var(--ds-background-neutral-subtle);
}

/* ----- PRINT (PDF via window.print) — Formato carta vertical ----- */

@page {
    size: letter portrait;
    margin: 1.4cm 1.5cm 1.6cm 1.5cm;
}

/* Pie de página: izq paginación | centro app+slogan | der fecha generación */
@page {
    @bottom-left {
        content: "Página " counter(page);
        font-size: 7pt;
        color: #888;
        font-family: system-ui, -apple-system, sans-serif;
        vertical-align: top;
    }
    @bottom-center {
        content: "Nexus";
        font-size: 7pt;
        font-weight: 700;
        color: #666;
        font-family: system-ui, -apple-system, sans-serif;
        vertical-align: top;
    }
    @bottom-right {
        content: "";
        font-size: 7pt;
        color: #888;
        font-family: system-ui, -apple-system, sans-serif;
        vertical-align: top;
    }
}

@media print {
    /* ---- Ocultar UI de la aplicacion ---- */
    .sidebar,
    .topbar,
    .page-header,
    .breadcrumb,
    .report-filters,
    .report-action-bar,
    .report-bar-section,
    .report-empty,
    .toast-container,
    .timer-floater,
    .app-tooltip,
    footer { display: none !important; }

    /* Header de pantalla se oculta; se usa print-doc-header */
    .report-header { display: none !important; }

    /* ---- Reset base ---- */
    *,
    *::before,
    *::after { box-shadow: none !important; }

    body, html {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 10pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Neutralizar layout de la app shell */
    main, .main-content, .content-wrapper, .page-content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        left: 0 !important;
        position: static !important;
        overflow: visible !important;
    }

    /* Asegurar que todos los contenedores ocupen el ancho completo de la pagina */
    .report-view,
    .report-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* ---- Cabecera: logo+app izq | tipo+usuario der ---- */
    .print-doc-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.3cm;
        margin-bottom: 0.4cm;
        border-bottom: 2px solid #222;
    }

    .print-doc-branding {
        display: flex;
        align-items: center;
        gap: 0.2cm;
        flex-shrink: 0;
    }

    .print-doc-logo {
        width: 28pt;
        height: 28pt;
        flex-shrink: 0;
    }

    .print-doc-app-name {
        font-size: 17pt;
        font-weight: 700;
        color: #000;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .print-doc-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.05cm;
        text-align: right;
        flex: 1;
        min-width: 0;
        padding-left: 0.4cm;
    }

    .print-doc-report-type {
        font-size: 7.5pt;
        color: #777;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }

    .print-doc-username {
        font-size: 13pt;
        font-weight: 700;
        color: #000;
        line-height: 1.2;
        word-break: break-word;
    }

    /* ---- Seccion de alianzas ---- */
    /* Grafico + leyenda (izq) / Periodo + total (der): flex 2 columnas */
    .report-chart-row {
        display: flex !important;
        align-items: flex-start;
        gap: 0.8cm;
        page-break-inside: avoid;
        margin-top: 0.7cm;
        margin-bottom: 1cm;
    }

    /* Columna izquierda: chart arriba, leyenda abajo */
    .report-chart-col {
        display: flex !important;
        flex-direction: column;
        flex-shrink: 0;
        width: 8cm;
    }

    /* Chart-wrap: 8cm×8cm cuadrado. El canvas es redimensionado a 302×302px via
       chartInstance.resize() en exportPDF() antes de llamar window.print(). */
    .report-chart-wrap {
        width: 8cm !important;
        height: 8cm !important;
        min-height: 0 !important;
        position: relative !important;
        flex-shrink: 0;
        overflow: hidden !important;
    }

    /* Canvas visible en impresion (redimensionado a 302×302 en JS antes de imprimir) */
    .report-chart-wrap canvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Leyenda: oculta en impresion (sin leyenda bajo el grafico por solicitud) */
    .report-print-legend {
        display: none !important;
    }

    .print-legend-item {
        display: flex;
        align-items: center;
        gap: 0.18cm;
        padding: 0.1cm 0;
        font-size: 8.5pt;
        border-bottom: 0.5px solid #eee;
    }

    .print-legend-item:last-child { border-bottom: none; }

    .print-legend-dot {
        width: 9pt;
        height: 9pt;
        border-radius: 50%;
        flex-shrink: 0;
        background: #8795a8;
    }

    .print-legend-name {
        font-weight: 500;
        color: #111;
        word-break: break-word;
    }

    /* Columna derecha: periodo y tiempo total grande */
    .print-chart-info {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        padding-left: 0.7cm;
        border-left: 1px solid #ddd;
        align-self: stretch;
    }

    .print-chart-period {
        font-size: 12pt;
        color: #444;
        margin-bottom: 0.3cm;
        font-weight: 500;
    }

    .print-chart-total {
        font-size: 34pt;
        font-weight: 700;
        color: #000;
        font-family: 'Courier New', Courier, monospace;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .print-chart-tasks {
        font-size: 11pt;
        color: #555;
        margin-top: 0.2cm;
    }

    /* Tabla de alianzas: solo bordes horizontales — el borde derecho cae en el limite
       del margen de impresion de Chrome y se recorta; diseño abierto es mas limpio */
    .report-alliance-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        border: none !important;
        border-top: 1px solid #999 !important;
        border-bottom: 1px solid #999 !important;
    }

    /* ---- Secciones ---- */
    .report-section {
        page-break-inside: avoid;
        margin-bottom: 0.6cm;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .report-section-title {
        color: #000 !important;
        border-bottom: 1.5px solid #444 !important;
        padding-bottom: 0.1cm;
        margin-bottom: 0.2cm;
        font-size: 8pt;
    }

    .report-section-title i,
    .report-meta-strong { color: #000 !important; }

    /* ---- Tablas: borde exterior en wrapper, celdas solo bordes internos ---- */
    .report-alliance-table .table,
    .report-group-card .table,
    .report-section > .table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: none !important;
        font-size: 9pt;
        table-layout: auto;
        box-sizing: border-box !important;
    }

    /* Cabeceras: solo borde inferior (separador header/body) y derecho (separador columnas) */
    .report-alliance-table th,
    .report-group-card th,
    .report-section > .table th {
        background: #efefef !important;
        color: #222 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 1px solid #aaa !important;
        border-bottom: 1px solid #aaa !important;
        padding: 3.5pt 6pt !important;
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Celdas: solo borde inferior (separador filas) y derecho (separador columnas) */
    .report-alliance-table td,
    .report-group-card td,
    .report-section > .table td {
        padding: 3.5pt 6pt !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 1px solid #ccc !important;
        border-bottom: 1px solid #ccc !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Ultima fila: sin borde inferior (el wrapper lo provee con border-bottom) */
    .report-alliance-table tbody tr:last-child td,
    .report-group-card tbody tr:last-child td {
        border-bottom: none !important;
    }


    /* Columna alianza: mas ancha; columnas numericas: centradas */
    .report-alliance-table th:first-child,
    .report-alliance-table td:first-child { width: 52%; }
    .report-alliance-table th:nth-child(2),
    .report-alliance-table td:nth-child(2),
    .report-alliance-table th:nth-child(3),
    .report-alliance-table td:nth-child(3),
    .report-alliance-table th:nth-child(4),
    .report-alliance-table td:nth-child(4) {
        text-align: center !important;
        white-space: nowrap;
    }

    /* Tabla de tareas/etiquetas: columna nombre mucho mas ancha */
    .report-group-table th:first-child,
    .report-group-table td:first-child { width: 70%; }
    .report-group-table th:nth-child(2),
    .report-group-table td:nth-child(2) { width: 13%; text-align: center !important; white-space: nowrap; }
    .report-group-table th:nth-child(3),
    .report-group-table td:nth-child(3) { width: 17%; text-align: center !important; white-space: nowrap; }

    .table, .report-alliance-table table, .report-group-card table {
        page-break-inside: auto;
    }

    .table thead { display: table-header-group; }
    .table tr { page-break-inside: avoid; }

    /* Cards de grupo (informe detallado) */
    .report-group-stack {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .report-group-card {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-top: 1px solid #999 !important;
        border-bottom: 1px solid #999 !important;
        page-break-inside: avoid;
        margin-bottom: 0.35cm;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .report-group-header {
        background: #f0f0f0 !important;
        border-bottom: 1px solid #bbb !important;
    }

    .report-group-card .report-group-table tbody tr:nth-child(even) td {
        background: #f9f9f9 !important;
    }

    /* ---- Footer de pagina ----
       Nexus (@bottom-left), fecha generada (@bottom-center, inyectada dinamicamente
       en exportPDF) y numero de pagina (@bottom-right) gestionados por @page.
       El elemento HTML del footer queda oculto en impresion. */
    .print-page-footer { display: none !important; }
}

/* ============================================
   MANAGE TASKS (Ajustes)
   ============================================ */
.manage-section {
    margin-bottom: var(--ds-space-400);
}

.manage-section:last-child {
    margin-bottom: 0;
}

.manage-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-200);
    margin-bottom: var(--ds-space-200);
    flex-wrap: wrap;
}

.manage-section-title {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-100);
    margin: 0 0 var(--ds-space-050);
    font-size: var(--ds-font-size-heading-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.manage-section-title i {
    color: var(--app-brand);
    font-size: 20px;
}

.manage-section-desc {
    margin: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

/* ---- Tabs de manage-tasks (reutiliza .tabs global con margen) ---- */
.manage-tabs {
    margin-bottom: var(--ds-space-300);
}

.manage-tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.manage-panel {
    display: block;
}

/* ============================================
   IMPORT / EXPORT (panel IO)
   ============================================ */

.io-card {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-250) var(--ds-space-300);
    margin-bottom: var(--ds-space-250);
}

.io-card .manage-section-desc {
    margin-bottom: var(--ds-space-250);
}

.io-export-controls {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

.io-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-space-200);
}

.io-custom-range {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
}

.io-custom-range.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.io-date-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    white-space: nowrap;
}

/* Drop zone */
.io-dropzone {
    border: 2px dashed var(--ds-border-color, #ccc);
    border-radius: var(--ds-radius-200);
    padding: var(--ds-space-200) var(--ds-space-300);
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-top: var(--ds-space-200);
    background: var(--ds-surface-sunken, #f7f8f9);
}

.io-dropzone:hover,
.io-dropzone.is-over {
    border-color: var(--app-brand);
    background: color-mix(in srgb, var(--app-brand) 6%, transparent);
}

.io-dropzone.has-file {
    border-color: var(--ds-color-green-500, #36b37e);
    background: color-mix(in srgb, var(--ds-color-green-500, #36b37e) 6%, transparent);
}

.io-dropzone-icon {
    font-size: 2rem;
    color: var(--ds-text-subtlest);
    flex-shrink: 0;
}

.io-dropzone.has-file .io-dropzone-icon { color: var(--ds-color-green-500, #36b37e); }

.io-dropzone-body {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-025);
}

.io-dropzone-text {
    font-size: var(--ds-font-size-body);
    color: var(--ds-text);
    margin: 0;
}

.io-dropzone-hint {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    margin: 0;
}

.io-dropzone input[type="file"] { display: none; }

/* Stats chips post-parseo */
.io-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-150);
    margin: var(--ds-space-250) 0 var(--ds-space-200) 0;
}

.io-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: var(--ds-space-100) var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
}

.io-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--app-brand);
    line-height: 1;
}

.io-stat-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-025);
}

/* Mapping sections */
.io-mapping-section {
    margin-top: var(--ds-space-250);
    padding: var(--ds-space-200);
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
}

.io-mapping-title {
    font-size: var(--ds-font-size-body);
    font-weight: 600;
    color: var(--ds-text);
    margin: var(--ds-space-250) 0 var(--ds-space-100) 0;
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
}

.io-mapping-title:first-child { margin-top: 0; }

.io-mapping-section .io-mapping-title { margin-top: 0; }

.io-mapping-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0 0 var(--ds-space-150) 0;
}

.io-mapping-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    padding: var(--ds-space-075) 0;
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.io-mapping-row:first-child { border-top: none; }

.io-mapping-unknown {
    flex: 0 0 auto;
    min-width: 160px;
    font-size: var(--ds-font-size-body-sm);
    font-weight: 600;
    color: var(--ds-text);
    background: var(--ds-background-neutral-subtle);
    padding: 2px var(--ds-space-075);
    border-radius: var(--ds-radius-100);
}

.io-mapping-arrow {
    color: var(--ds-text-subtlest);
    flex-shrink: 0;
}

.io-mapping-row .form-control { flex: 1; max-width: 280px; }

/* Preview table */
.io-preview-wrap {
    margin-top: var(--ds-space-100);
    overflow-x: auto;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
}

.io-preview-wrap .table { margin: 0; font-size: var(--ds-font-size-body-sm); }

/* Import actions */
.io-import-actions {
    display: flex;
    gap: var(--ds-space-150);
    margin-top: var(--ds-space-250);
}

/* ---- Cleanup panel ---- */
.cleanup-body {
    display: flex;
    gap: var(--ds-space-400);
    margin-bottom: var(--ds-space-250);
}

.cleanup-filters {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-200);
}

.cleanup-filter-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-150);
}

.cleanup-filter-label {
    flex: 0 0 120px;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    padding-top: 6px;
    white-space: nowrap;
}

.cleanup-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-100) var(--ds-space-300);
    padding-top: 4px;
}

.cleanup-date-hint {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtlest);
    padding-top: 6px;
}

.cleanup-sidebar {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-200);
}

.cleanup-counts {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
}

.cleanup-count-item {
    display: flex;
    align-items: baseline;
    gap: var(--ds-space-075);
}

.cleanup-count-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--app-brand);
    line-height: 1;
}

.cleanup-count-label {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.cleanup-dupes-bar {
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    flex-wrap: wrap;
}

.cleanup-dupes-result {
    flex: 1;
    min-width: 0;
}

.cleanup-nuke-card {
    border-color: var(--ds-color-red-200, #ffbdad);
    background: color-mix(in srgb, var(--ds-color-red-50, #fff3f0) 60%, var(--ds-surface-raised));
}

.cleanup-nuke-title {
    color: var(--ds-color-red-700, #de350b);
}

/* ---- Grilla de etiquetas inline-editable ---- */
.tags-grid {
    background: var(--ds-surface-raised);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-200);
    overflow: hidden;
}

.tag-row {
    display: grid;
    grid-template-columns: minmax(200px, 2.5fr) 160px minmax(90px, 1fr) 56px;
    gap: var(--ds-space-150);
    align-items: center;
    padding: var(--ds-space-075) var(--ds-space-150);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    font-size: var(--ds-font-size-body-sm);
    transition: background var(--ds-duration-fast);
}

.tag-row:last-child {
    border-bottom: none;
}

.tag-row:not(.tag-row-head):hover {
    background: var(--ds-surface-hovered, rgba(9, 30, 66, 0.03));
}

.tag-row-head {
    font-size: 11px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtlest);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--ds-surface-sunken);
    border-bottom: var(--ds-border-width-indicator) solid var(--ds-border);
}

.tag-row-new {
    background: rgba(var(--app-brand-rgb), 0.04);
    border-top: var(--ds-border-width-indicator) solid var(--ds-border);
}

/* Grupo combinado: color picker + input hex */
.tag-color-field {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    border: var(--ds-border-width) solid transparent;
    border-radius: var(--ds-radius-100);
    padding: 2px;
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.tag-color-field:hover {
    background: var(--ds-surface-sunken);
}

.tag-color-field:focus-within {
    border-color: var(--app-brand);
    background: var(--ds-surface);
    box-shadow: 0 0 0 2px rgba(var(--app-brand-rgb), 0.18);
}

.tag-swatch-input {
    width: 28px;
    height: 26px;
    padding: 2px;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    background: var(--ds-surface);
    cursor: pointer;
    flex-shrink: 0;
}

.tag-swatch-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.tag-hex-input {
    width: 90px;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 2px var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
}

.tag-hex-input:focus {
    outline: none;
}

/* Input de nombre inline: sin bordes hasta focus */
.tag-name-input {
    border: var(--ds-border-width) solid transparent;
    background: transparent;
    padding: var(--ds-space-050) var(--ds-space-075);
    min-height: 30px;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    transition: background var(--ds-duration-fast), border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
}

.tag-name-input:hover:not(:read-only):not(:focus) {
    background: var(--ds-surface-sunken);
}

.tag-name-input:focus {
    outline: none;
    background: var(--ds-surface);
    border-color: var(--app-brand);
    box-shadow: 0 0 0 2px rgba(var(--app-brand-rgb), 0.18);
}

.tag-name-input:read-only {
    background: transparent;
    cursor: default;
}

.tag-row-new .tag-name-input {
    border-color: var(--ds-border);
    background: var(--ds-surface);
}

.tag-color-code {
    font-size: var(--ds-font-size-body-sm);
}

.tag-usage {
    color: var(--ds-text);
}

.tag-usage.is-unused {
    color: var(--ds-text-subtlest);
    font-style: italic;
}

.tag-actions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.tag-row-empty {
    padding: var(--ds-space-200);
    text-align: center;
    font-size: var(--ds-font-size-body-sm);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

@media (max-width: 700px) {
    .tag-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name actions"
            "color actions"
            "usage actions";
        gap: var(--ds-space-050) var(--ds-space-100);
        padding: var(--ds-space-150);
    }
    .tag-name-input   { grid-area: name; }
    .tag-color-field  { grid-area: color; justify-self: start; }
    .tag-usage        { grid-area: usage; }
    .tag-actions      { grid-area: actions; align-self: center; }
    .tag-row-head { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utilities — Tabs principales
   ═══════════════════════════════════════════════════════════════════════════ */

.utils-tab-bar {
    display: flex;
    gap: var(--ds-space-025);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
    margin-bottom: var(--ds-space-300);
    overflow-x: auto;
    scrollbar-width: none;
}

.utils-tab-bar::-webkit-scrollbar { display: none; }

.utils-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-100) var(--ds-space-200);
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--ds-duration-fast), border-color var(--ds-duration-fast);
    margin-bottom: -1px;
}

.utils-tab:hover {
    color: var(--ds-text);
    background: var(--ds-interaction-hovered);
    border-radius: var(--ds-radius-100) var(--ds-radius-100) 0 0;
}

.utils-tab.active {
    color: var(--ds-text);
    border-bottom-color: var(--app-brand);
    font-weight: var(--ds-font-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utilities — Image Optimizer
   ═══════════════════════════════════════════════════════════════════════════ */

.img-subtab-bar {
    display: flex;
    gap: var(--ds-space-050);
    margin-bottom: var(--ds-space-200);
}

.img-subtab {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-075) var(--ds-space-150);
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-medium);
    color: var(--ds-text-subtle);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast),
                border-color var(--ds-duration-fast);
}

.img-subtab:hover {
    background: var(--ds-interaction-hovered);
    color: var(--ds-text);
}

.img-subtab.active {
    background: rgba(var(--app-brand-rgb), 0.1);
    border-color: rgba(var(--app-brand-rgb), 0.35);
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-semibold);
}

@media (max-width: 767px) {
    .img-subtab i { display: none; }
}

/* Compress — layout dos columnas */

.compress-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-200);
    align-items: stretch;
}

@media (min-width: 768px) {
    .compress-layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1100px) {
    .compress-layout {
        grid-template-columns: 3fr 7fr;
    }
}

.compress-dropside {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.compress-dropside .img-drop-zone {
    flex: 1;
    min-height: 160px;
}

.compress-actions {
    display: flex;
    gap: var(--ds-space-100);
}

.compress-optside {
    display: flex;
    flex-direction: column;
}

.compress-optside .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Method stack (tarjetas compactas en columna) */

.img-method-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
}

.img-method-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-050);
    padding: var(--ds-space-100) var(--ds-space-150);
    padding-bottom: var(--ds-space-300);
    background: var(--ds-surface);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast),
                box-shadow var(--ds-duration-fast);
}

.img-method-card:hover:not(.is-unavailable) {
    border-color: color-mix(in srgb, var(--app-accent, var(--app-brand)) 50%, transparent);
    background: var(--ds-interaction-hovered);
}

.img-method-card.is-selected {
    border-color: var(--app-accent, var(--app-brand));
    background: rgba(var(--app-brand-rgb), 0.06);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent, var(--app-brand)) 20%, transparent);
}

.img-method-card.is-unavailable {
    opacity: 0.6;
    cursor: default;
}

.img-method-card-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    width: 100%;
}

.img-method-name {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
}

.img-method-badge {
    flex-shrink: 0;
    margin-left: auto;
}

.img-method-desc {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
}

.img-method-pros {
    margin: var(--ds-space-075) 0 0;
    padding-left: var(--ds-space-200);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    line-height: 1.6;
}

.img-method-unavailable {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-danger);
    margin: 0;
}

/* Ícono de método */
.img-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-100);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.img-method-icon--imagick {
    background: rgba(109, 40, 217, 0.12);
    color: #6D28D9;
}

.img-method-icon--api {
    background: rgba(234, 88, 12, 0.12);
    color: #EA580C;
}

.img-method-icon--gs {
    background: rgba(37, 99, 235, 0.12);
    color: #2563EB;
}

/* Botón de guía — esquina inferior derecha */
.img-method-guide {
    position: absolute;
    bottom: var(--ds-space-075);
    right: var(--ds-space-075);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85rem;
    color: var(--ds-text-subtlest);
    cursor: pointer;
    border-radius: var(--ds-radius-100);
    transition: color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.img-method-guide:hover {
    color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.08);
}

/* Drop zone */

.img-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-075);
    padding: var(--ds-space-300) var(--ds-space-200);
    border: 2px dashed var(--ds-border);
    border-radius: var(--ds-radius-200);
    background: var(--ds-surface-sunken);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--ds-duration-fast), background var(--ds-duration-fast);
}

.img-drop-zone:hover,
.img-drop-zone.drag-over {
    border-color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.04);
}

.img-drop-zone.has-file {
    border-color: var(--app-brand);
    border-style: solid;
    background: rgba(var(--app-brand-rgb), 0.04);
}

.img-drop-zone.has-file .img-drop-icon {
    color: var(--app-brand);
}

.img-drop-icon {
    font-size: 2rem;
    color: var(--ds-icon-subtle);
    pointer-events: none;
}

.img-drop-title {
    font-size: var(--ds-font-size-body);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text);
    margin: 0;
    pointer-events: none;
    word-break: break-all;
}

.img-drop-subtitle {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin: 0;
    pointer-events: none;
}

.img-drop-help {
    margin: 0;
    pointer-events: none;
}

/* Queue */

.img-queue {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.img-queue-item {
    display: flex;
    align-items: center;
    gap: var(--ds-space-100);
    padding: var(--ds-space-075) var(--ds-space-100);
    background: var(--ds-surface-sunken);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
}

.img-queue-name {
    flex: 1;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle group (mode / format buttons) */

.btn-toggle-group {
    display: inline-flex;
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-radius-100);
    overflow: hidden;
}

.btn-toggle-group .btn {
    border: none;
    border-radius: 0;
    border-right: var(--ds-border-width) solid var(--ds-border);
}

.btn-toggle-group .btn:last-child { border-right: none; }

.btn-toggle-group .btn.active {
    background: rgba(var(--app-brand-rgb), 0.1);
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-semibold);
}


/* Resize */

.resize-mode-panel { margin-top: var(--ds-space-150); }

.img-dims-preview {
    margin-top: var(--ds-space-050);
    color: var(--ds-text-subtle);
}

/* Botón de descarga en tabla de resultados */
.btn-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ds-radius-100);
    border: var(--ds-border-width) solid var(--app-brand);
    background: transparent;
    color: var(--app-brand);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--ds-duration-fast), color var(--ds-duration-fast),
                border-color var(--ds-duration-fast);
}

.btn-dl:hover {
    background: rgba(var(--app-brand-rgb), 0.1);
}

.btn-dl.is-downloaded {
    border-color: var(--ds-border-success, #16a34a);
    color: var(--ds-text-success);
    background: var(--ds-background-success);
    cursor: default;
}

/* ── Resize panel ────────────────────────────────────────────── */
.resize-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-200);
    align-items: stretch;
}

/* Tablet: dropzone arriba ancho completo, preview+opciones debajo */
@media (min-width: 768px) {
    .resize-layout {
        grid-template-columns: 1fr 1fr;
    }
    .resize-layout .resize-col:first-child {
        grid-column: 1 / -1;
    }
    .resize-col .img-drop-zone {
        min-height: 140px;
    }
}

/* Desktop: tres columnas */
@media (min-width: 1100px) {
    .resize-layout {
        grid-template-columns: 2fr 3fr 3fr;
    }
    .resize-layout .resize-col:first-child {
        grid-column: auto;
    }
    .resize-col .img-drop-zone {
        min-height: 220px;
    }
}

.resize-col {
    display: flex;
    flex-direction: column;
}

.resize-col .img-drop-zone {
    flex: 1;
    min-height: 220px;
}

.resize-preview-body,
.resize-options-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.resize-locked-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-075);
    color: var(--ds-text-subtlest);
    font-size: 2rem;
}

.resize-locked-placeholder span {
    font-size: var(--ds-font-size-body-sm);
}

.resize-preview-img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: var(--ds-border-radius-100);
    display: block;
}

.resize-pct-options {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
}

@media (min-width: 1100px) {
    .resize-pct-options {
        flex-direction: row;
    }
}

.resize-pct-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-025);
    flex: 1;
    padding: var(--ds-space-100) var(--ds-space-075);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-border-radius-100);
    background: var(--ds-background-input);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.resize-pct-btn:hover {
    border-color: var(--app-brand);
}

.resize-pct-btn.active {
    border-color: var(--app-brand);
    background: rgba(var(--app-brand-rgb), 0.06);
}

.resize-pct-value {
    font-weight: var(--ds-font-weight-semibold);
    font-size: var(--ds-font-size-body-lg);
}

.resize-pct-dims {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

/* ── Rise Corrector ──────────────────────────────────────────────────────── */

/* Columnas 60/40: info más ancha, dropzone compacto */
@media (min-width: 1100px) {
    .rise-layout {
        grid-template-columns: 6fr 4fr;
    }
}

.rise-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-075);
}

.rise-step {
    display: flex;
    align-items: center;
    gap: var(--ds-space-150);
    font-size: var(--ds-font-size-small, 0.875rem);
    color: var(--ds-text-subtlest, #8993a5);
    transition: color var(--ds-duration-fast, 0.1s);
}

.rise-step-icon {
    width: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rise-step.is-active  { color: var(--ds-text); font-weight: 500; }
.rise-step.is-done    { color: var(--ds-text-success, #216e4e); }
.rise-step.is-error   { color: var(--ds-text-danger, #ae2a19); }
.rise-step.is-skipped { color: var(--ds-text-subtlest, #8993a5); }

.rise-info-section {
    padding-top: var(--ds-space-200);
    border-top: 1px solid var(--ds-border);
}

/* ── Gift / Question Converter ───────────────────────────────────────────── */

/* Columnas 60/40: opciones más anchas, dropzone más compacta */
@media (min-width: 1100px) {
    .gift-layout {
        grid-template-columns: 6fr 4fr;
    }
}

/* En desktop, las tarjetas de formato se muestran en dos columnas */
@media (min-width: 768px) {
    .gift-layout .img-method-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.img-method-icon--gift {
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
}

.img-method-icon--qti {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

/* Descripción de tarjeta sin bullets */
.img-method-desc {
    margin: var(--ds-space-050) 0 0;
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    line-height: 1.5;
}

.gift-template-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ds-space-100);
    flex-wrap: wrap;
}

.gift-template-note {
    flex-shrink: 0;
}

.gift-template-btns {
    display: flex;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
}

.gift-output {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--ds-font-family-mono, 'Courier New', monospace);
    font-size: var(--ds-font-size-body-sm);
    line-height: 1.5;
    padding: var(--ds-space-100);
    background: var(--ds-background-input);
    border: var(--ds-border-width) solid var(--ds-border);
    border-radius: var(--ds-border-radius-100);
    color: var(--ds-text);
    resize: vertical;
    min-height: 200px;
}

.gift-result-actions {
    display: flex;
    gap: var(--ds-space-075);
    flex-wrap: wrap;
}

.gift-report:not([hidden]) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-100) var(--ds-space-200);
    padding: var(--ds-space-100) var(--ds-space-150);
    background: var(--ds-surface-raised);
    border-radius: var(--ds-radius-100);
    border: var(--ds-border-width) solid var(--ds-border);
}

.gift-report-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-075) var(--ds-space-200);
    align-items: center;
    flex: 1;
}

.gift-report-actions {
    display: flex;
    gap: var(--ds-space-075);
    align-items: center;
    flex-shrink: 0;
}

.gift-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-075);
    padding: var(--ds-space-100) var(--ds-space-200);
    border-top: var(--ds-border-width) solid var(--ds-border);
}

.gift-stats-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
}

.gift-stats-item strong {
    color: var(--ds-text);
    font-weight: var(--ds-font-weight-semibold);
}

.gift-stats-item.is-warning strong {
    color: var(--ds-text-warning);
}

.gift-stats-item.is-danger {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-050);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-danger, #dc2626);
    cursor: pointer;
    border-radius: var(--ds-border-radius-050);
    padding: var(--ds-space-025) var(--ds-space-075);
    background: rgba(220, 38, 38, 0.08);
    transition: background 0.15s;
}

.gift-stats-item.is-danger:hover {
    background: rgba(220, 38, 38, 0.15);
}

.gift-stats-item.is-danger strong {
    color: inherit;
    font-weight: var(--ds-font-weight-semibold);
}

.gift-warnings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-100);
}

.gift-warnings-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-075);
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text);
    padding: var(--ds-space-075) var(--ds-space-100);
    background: var(--ds-background-warning-subtle, rgba(217, 119, 6, 0.08));
    border-left: 3px solid var(--ds-text-warning, #d97706);
    border-radius: var(--ds-border-radius-050);
}

.gift-warnings-list li i {
    color: var(--ds-text-warning, #d97706);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Preview slide panel — ancho mayor */
.slide-panel--wide {
    width: min(560px, 92vw);
    max-width: min(560px, 92vw);
}

/* Preview question cards */
.preview-q {
    padding: var(--ds-space-150) 0;
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.preview-q:last-child {
    border-bottom: none;
}

.preview-q-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-075);
    margin-bottom: var(--ds-space-075);
}

.preview-q-num {
    font-size: var(--ds-font-size-body-sm);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
}

.preview-q-body {
    font-size: var(--ds-font-size-body);
    margin-bottom: var(--ds-space-075);
}

.preview-options {
    list-style: none;
    margin: var(--ds-space-100) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-050);
}

.preview-option {
    font-size: var(--ds-font-size-body-sm);
    padding: var(--ds-space-050) var(--ds-space-075);
    border-radius: var(--ds-border-radius-100);
    background: var(--ds-background-neutral-subtle);
}

.preview-option.is-correct {
    background: var(--ds-background-success, rgba(22, 163, 74, 0.08));
    color: var(--ds-text-success, #15803d);
    border-left: 3px solid var(--ds-text-success, #15803d);
    font-weight: var(--ds-font-weight-semibold);
}

.preview-feedback {
    display: block;
    font-size: var(--ds-font-size-body-xs, 0.75rem);
    color: var(--ds-text-subtlest);
    margin-top: var(--ds-space-025);
    font-style: italic;
}

.preview-feedback--fv {
    margin-top: var(--ds-space-075);
    font-style: normal;
    font-size: var(--ds-font-size-body-sm);
}

.preview-feedback-label {
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-text-subtle);
}

.preview-fv-answer {
    font-size: var(--ds-font-size-body-sm);
    color: var(--ds-text-subtle);
    margin-bottom: var(--ds-space-075);
}

.preview-fv-answer strong {
    color: var(--ds-text-success, #15803d);
}

.preview-em-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-font-size-body-sm);
}

.preview-em-table td {
    padding: var(--ds-space-050) var(--ds-space-075);
    border-bottom: var(--ds-border-width) solid var(--ds-border);
}

.preview-em-table tr:last-child td {
    border-bottom: none;
}

.preview-em-table td:nth-child(2) {
    color: var(--ds-text-subtlest);
    width: 1.5rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════ SKELETON */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--ds-background-neutral)         25%,
        var(--ds-background-neutral-hovered, rgba(9,30,66,.07)) 50%,
        var(--ds-background-neutral)         75%
    );
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    border-radius: var(--ds-radius-100);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.skeleton-text  { height: 0.875rem; margin-bottom: var(--ds-space-075); }
.skeleton-title { height: 1.125rem; margin-bottom: var(--ds-space-100); }
.skeleton-row   { height: 3rem;     margin-bottom: var(--ds-space-075); border-radius: var(--ds-radius-100); }
.skeleton-stat  { height: 2rem;     border-radius: var(--ds-radius-100); }
.skeleton-chart { height: 180px;    border-radius: var(--ds-radius-200); }