/* ============================================================================
   We Ötzi · Cotizaciones del artista (my-quotations / archive / calendar)
   Reescrito sobre el Design System Bauhaus (ds/tokens.css + ds/components.css).
   Regla: cero hex sueltos — todo color sale de var(--token).
   Los selectores conservan los nombres que usan quotations.js / archive.js /
   calendar.js / shared-drawer.js (no renombrar sin actualizar esos JS).
   ========================================================================== */

/* ---------- Base de página ---------- */
body.wo-app {
    margin: 0;
    min-height: 100vh;
    font-size: var(--body-m-size);
    line-height: var(--body-m-lh);
}

.qadmin-main {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--margin-md) var(--space-16);
    box-sizing: border-box;
}

/* ---------- Menú móvil del admin ---------- */
.admin-mobile-menu-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--neutral-500);
    cursor: pointer;
}

.admin-mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--surface-card);
    border-bottom: var(--border-rule-width) solid var(--border-strong);
}

.admin-mobile-menu[hidden] { display: none !important; }

.admin-mobile-menu-link {
    padding: var(--space-4) var(--margin-xs);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--neutral-400);
    text-decoration: none;
    border-bottom: var(--border-hairline) solid var(--border-subtle);
    border-left: var(--border-rule-width) solid transparent;
}

.admin-mobile-menu-link:hover { color: var(--neutral-500); text-decoration: none; background: var(--neutral-100); }
.admin-mobile-menu-link.is-active { color: var(--neutral-500); border-left-color: var(--accent); background: var(--neutral-100); }

/* ---------- Hero del módulo ---------- */
.q-hero {
    padding: var(--space-10) 0 var(--space-8);
}

.q-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-lead-track);
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 var(--space-4);
}

.q-hero-title {
    font-family: var(--font-display);
    font-size: var(--title-xl-size);
    line-height: 1.12;
    letter-spacing: var(--h1-track);
    color: var(--surface-ink);
    margin: 0;
    max-width: 16em;
}

.q-hero-title .wo-highlight { padding: 0 .1em; }

.q-hero-sub {
    font-size: 18px;
    color: var(--text-muted);
    margin: var(--space-4) 0 0;
    max-width: 40em;
}

.q-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.q-hero-main { flex: 1 1 560px; min-width: 0; }

.q-hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

/* Botones del hero (Figma: ink / papel con borde / ghost) */
.q-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-5);
    background: var(--surface-page);
    color: var(--neutral-500);
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-m-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-m-track);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-press) var(--ease-standard), box-shadow var(--duration-press) var(--ease-standard), background var(--duration-press) var(--ease-standard);
}

.q-hero-btn [data-wo-icon] { width: 18px; height: 18px; flex: none; }

.q-hero-btn:hover {
    background: var(--neutral-200);
    text-decoration: none;
    transform: translate(calc(-1 * var(--lift-offset)), calc(-1 * var(--lift-offset)));
    box-shadow: var(--shadow-hard-sm);
}

.q-hero-btn:active { transform: none; box-shadow: none; }

.q-hero-btn--ink {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--action-primary-fg);
}

.q-hero-btn--ink:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }

.q-hero-btn--ghost { background: var(--action-ghost); border-color: transparent; }
.q-hero-btn--ghost:hover { background: var(--action-ghost-hover); box-shadow: none; transform: none; }

/* Bloque derecho del hero: MOSTRAR EN / cotizaciones */
.q-hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 0 1 300px;
    min-width: 260px;
    padding-left: var(--space-8);
    border-left: var(--border-hairline) solid var(--border-subtle);
    box-sizing: border-box;
}

.q-field { display: flex; flex-direction: column; gap: var(--space-2); }

.q-field-label {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.q-field-select {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--control-h-md);
    padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
    background-color: var(--surface-page);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A5449' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--body-m-size);
    color: var(--neutral-500);
    cursor: pointer;
}

.q-field-select:hover { background-color: var(--surface-input-hover); }
.q-field-select:focus { border-color: var(--border-focus); outline: none; }

.artist-meta {
    text-align: right;
    flex: none;
}

.artist-meta p { margin: 0 0 var(--space-1); }

/* ---------- Strip de métricas (Figma: números Archivo 52 + divisores) ------ */
.stats-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    padding: var(--space-6) 0;
    border-top: var(--border-hairline) solid var(--border-strong);
    margin-top: var(--space-2);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-7);
    border-left: var(--border-hairline) solid var(--sand-350);
    min-width: 180px;
    box-sizing: border-box;
}

.stat-card:first-child { padding-left: 0; border-left: 0; }

.stat-value {
    font-family: var(--font-display);
    font-size: var(--title-xl-size);
    line-height: 1;
    color: var(--surface-ink);
}

.stat-card--alert .stat-value { color: var(--red-300); }
.stat-card--money .stat-value { color: var(--system-success); }
.stat-card--accent .stat-value { color: var(--yellow-400); }

/* KPI "de alta prioridad": cuadrado rojo 14×14 antes del número (Figma) */
.stat-card--priority .stat-value {
    display: inline-flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.stat-mark {
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--red-300);
    margin-bottom: 0.12em;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-faint);
    order: 1;
}

/* ---------- Toolbar de la tabla ---------- */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-6) 0 var(--space-4);
    border-top: var(--border-hairline) solid var(--border-strong);
}

.toolbar-search { flex: 1 1 300px; min-width: 240px; }

.search-wrapper { position: relative; display: flex; align-items: center; }

.search-wrapper .search-icon,
.search-wrapper [data-wo-icon] {
    position: absolute;
    left: var(--space-4);
    width: 18px;
    height: 18px;
    color: var(--text-faint);
    pointer-events: none;
}

.toolbar-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-10);
    background: var(--surface-input);
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--body-m-size);
    color: var(--neutral-500);
}

.toolbar-input::placeholder { color: var(--neutral-300); }
.toolbar-input:hover { background: var(--surface-input-hover); }
.toolbar-input:focus { background: var(--white); border-color: var(--border-focus); outline: none; box-shadow: none; }

.toolbar-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.toolbar-select {
    appearance: none;
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
    background: var(--surface-input);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5449' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--body-s-size);
    color: var(--neutral-500);
    cursor: pointer;
}

.toolbar-select:hover { background-color: var(--surface-input-hover); }
.toolbar-select:focus { border-color: var(--border-focus); outline: none; }

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--action-primary);
    color: var(--action-primary-fg);
    border: var(--border-strong-width) solid var(--action-primary);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--button-s-size);
    cursor: pointer;
}

.toolbar-btn:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }

/* Chips segmentados de filtro rápido (Figma: TODAS · PENDIENTES · ALTA PRIORIDAD · CONFIRMADAS) */
.q-chipbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.q-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    color: var(--neutral-500);
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--duration-press) var(--ease-standard);
}

.q-chip [data-wo-icon] { width: 14px; height: 14px; flex: none; }
.q-chip:hover { background: var(--neutral-200); }

.q-chip.is-active {
    background: var(--action-accent);
    border-color: var(--action-accent);
    color: var(--action-accent-fg);
    font-weight: var(--weight-bold);
}

.q-chip.is-active:hover { background: var(--action-accent-hover); border-color: var(--action-accent-hover); }

.q-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-h-sm);
    min-width: var(--control-h-sm);
    padding: var(--space-2);
    background: var(--surface-page);
    color: var(--neutral-500);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-none);
    cursor: pointer;
}

.q-iconbtn [data-wo-icon] { width: 20px; height: 20px; }
.q-iconbtn:hover { background: var(--neutral-200); }
.q-iconbtn.is-active { border-color: var(--border-strong); background: var(--neutral-200); }

.q-morefilters {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-strong);
}

.q-morefilters[hidden] { display: none; }

.q-morefilters-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 200px;
}

/* Leyenda de estados (Figma: fila ESTADO · dots) */
.table-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-2) 0 var(--space-4);
}

.legend-groups {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.legend-head {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--surface-ink);
}

.table-legend .legend-count {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.legend-keys { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.legend-key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.legend-key strong { color: var(--surface-ink); font-weight: var(--weight-bold); }

.legend-dot { width: 8px; height: 8px; flex: none; }
.legend-dot--pending { background: var(--yellow-300); }
.legend-dot--responded { background: var(--blue-400); }
.legend-dot--confirmed { background: var(--system-success); }
.legend-dot--rejected { background: var(--red-300); }
.legend-dot--expired { background: var(--neutral-300); }
.legend-dot--high { background: var(--red-300); }
.legend-dot--medium { background: var(--yellow-300); border-radius: 999px; }
.legend-dot--low { width: 0; height: 0; background: transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--blue-400); }

/* ============================================================================
   Lista de cotizaciones · tarjetas agrupadas por período
   (Figma flujo-artistas--23-cotizaciones: grupo + filas-tarjeta de 4 bloques)
   ========================================================================== */
.q-list { display: block; }

.q-group { display: block; margin-bottom: var(--space-8); }

.q-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    border-bottom: var(--border-strong-width) solid var(--border-strong);
}

.q-group-title {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--surface-ink);
}

.q-group-sum {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
}

.q-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 176px;
    column-gap: var(--space-6);
    align-items: start;
    padding: var(--space-6) 0;
    border-bottom: var(--border-hairline) solid var(--border-strong);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-fade) var(--ease-standard) var(--q-card-delay, 0s),
                transform var(--duration-fade) var(--ease-standard) var(--q-card-delay, 0s);
}

.q-card.is-in { opacity: 1; transform: translateY(0); }
.q-card:hover { background: var(--neutral-100); }

.q-card-prio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.q-prio-mark { width: 24px; height: 24px; flex: none; }
.q-prio-mark--high { background: var(--red-300); }
.q-prio-mark--medium { background: var(--yellow-300); border-radius: 999px; }
.q-prio-mark--low { width: 0; height: 0; background: transparent; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--blue-400); }

.q-prio-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.q-card-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.q-card-meta {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.q-card-head {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.q-card-name {
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.12;
    color: var(--surface-ink);
}

.q-card-city {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.q-card-desc {
    margin: 0;
    max-width: 46em;
    font-size: 15px;
    line-height: 1.5;
    color: var(--neutral-500);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.q-card-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.q-chip-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    background: var(--neutral-200);
    color: var(--neutral-500);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.q-card-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    text-align: right;
}

.q-status {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.q-status--pending { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.q-status--responded { background: var(--status-info-bg); color: var(--status-info-fg); }
.q-status--confirmed { background: var(--system-success); color: var(--white); }
.q-status--rejected { background: var(--status-error-bg); color: var(--status-error-fg); }
.q-status--expired { background: var(--neutral-200); color: var(--neutral-500); }

.q-card-price {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    color: var(--surface-ink);
    white-space: nowrap;
}

.q-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-4);
    background: var(--blue-300);
    color: var(--white);
    border: var(--border-hairline) solid var(--blue-300);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--duration-press) var(--ease-standard), box-shadow var(--duration-press) var(--ease-standard), background var(--duration-press) var(--ease-standard);
}

.q-card-cta [data-wo-icon] { width: 14px; height: 14px; }

.q-card-cta:hover {
    background: var(--blue-500);
    border-color: var(--blue-500);
    transform: translate(calc(-1 * var(--lift-offset)), calc(-1 * var(--lift-offset)));
    box-shadow: var(--shadow-hard-sm);
}

.q-card-cta:active { transform: none; box-shadow: none; }

/* Paginación del pie (Figma: CARGAR COTIZACIONES ANTERIORES) */
.q-loadmore {
    display: flex;
    justify-content: center;
    padding: var(--space-8) 0 var(--space-4);
}

.q-loadmore[hidden] { display: none; }

.q-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-5);
    background: transparent;
    color: var(--neutral-500);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-m-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-m-track);
    text-transform: uppercase;
    cursor: pointer;
}

.q-loadmore-btn [data-wo-icon] { width: 18px; height: 18px; }
.q-loadmore-btn:hover { background: var(--neutral-200); }

/* ---------- Tabla CRM (la usa /archive) ---------- */
.table-container {
    --table-columns: 40px 100px 80px 2fr 1.5fr 2fr 1.5fr 100px 140px;
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-strong);
}

.table-header {
    display: grid;
    grid-template-columns: var(--table-columns);
    align-items: center;
    background: var(--neutral-100);
    border-bottom: var(--border-hairline) solid var(--border-strong);
}

.header-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}

.header-cell.dragging { opacity: var(--opacity-disabled); }

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
}

.resize-handle:hover { background: var(--border-subtle); }

.quote-row {
    display: grid;
    grid-template-columns: var(--table-columns);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: var(--border-hairline) solid var(--border-subtle);
    cursor: default;
}

.quote-row > * { padding: 0 var(--space-3); box-sizing: border-box; min-width: 0; }
.quote-row:last-child { border-bottom: 0; }
.quote-row:hover { background: var(--neutral-100); }
.quote-row.selected { background: var(--yellow-100); }

.quote-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 0 0 var(--space-3);
    background: var(--white);
    border: var(--border-strong-width) solid var(--border-strong);
    border-radius: var(--radius-none);
    cursor: pointer;
    display: grid;
    place-content: center;
    flex: none;
}

.quote-checkbox:checked { background: var(--neutral-500); }
.quote-checkbox:checked::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg) translate(1px, -1px);
}

#select-all-quotes { margin-left: 0; }
.table-header .header-cell input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--white);
    border: var(--border-strong-width) solid var(--border-strong);
    cursor: pointer;
    display: grid;
    place-content: center;
}
.table-header .header-cell input[type="checkbox"]:checked { background: var(--neutral-500); }
.table-header .header-cell input[type="checkbox"]:checked::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg) translate(1px, -1px);
}

.quote-date {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.quote-id {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.client-cell { display: flex; flex-direction: column; gap: var(--space-1); }

.client-name {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.15;
    color: var(--surface-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-cell {
    font-family: var(--font-mono);
    font-size: 11px !important;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.tattoo-cell { display: flex; flex-direction: column; gap: var(--space-1); }

.tattoo-idea {
    font-size: 15px;
    color: var(--neutral-500);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tattoo-specs {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-400);
}

.timing-cell { display: flex; }

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-none);
    white-space: nowrap;
}

.status-badge.completed { background: var(--status-success-bg); color: var(--status-success-fg); }

.price-cell {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: var(--weight-bold);
    color: var(--surface-ink);
    white-space: nowrap;
}

.loading-placeholder,
.table-empty {
    padding: var(--space-10);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

/* ---------- Botones de acción (los genera el JS) ---------- */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-card);
    color: var(--neutral-500);
    border: var(--border-strong-width) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--duration-press), box-shadow var(--duration-press), background var(--duration-press);
}

.action-btn:hover { background: var(--neutral-200); }
.action-btn:active { transform: none; box-shadow: none; }
.action-btn:disabled { background: var(--action-disabled-bg); border-color: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; }

.action-btn.detail-btn {
    background: var(--blue-300);
    border-color: var(--blue-300);
    color: var(--white);
    padding: var(--space-2) var(--space-3);
    font-size: 11px;
    gap: var(--space-1);
    white-space: nowrap;
}
.action-btn.detail-btn:hover { background: var(--blue-500); border-color: var(--blue-500); }
.action-btn.detail-btn [data-wo-icon] { width: 14px; height: 14px; }

.action-btn.accept-btn,
.action-btn.save-btn {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--action-primary-fg);
}
.action-btn.accept-btn:hover,
.action-btn.save-btn:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }

.action-btn.danger-btn,
.action-btn.archive-btn.danger,
.bulk-btn.danger {
    background: var(--action-danger);
    border-color: var(--action-danger);
    color: var(--action-danger-fg);
}
.action-btn.danger-btn:hover { background: var(--action-danger-hover); border-color: var(--action-danger-hover); }

.action-btn.small-btn { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: 11px; }

.action-btn [data-wo-icon] { width: 16px; height: 16px; }

/* ---------- Barra de acciones masivas ---------- */
.bulk-action-bar {
    position: fixed;
    left: 50%;
    bottom: var(--space-6);
    transform: translate(-50%, calc(100% + var(--space-8)));
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-inverse);
    color: var(--text-on-dark);
    border: var(--border-strong-width) solid var(--border-strong);
    z-index: 900;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.bulk-action-bar.active { transform: translate(-50%, 0); }

.bulk-info {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-accent);
}

.bulk-buttons { display: flex; gap: var(--space-2); }

.bulk-btn {
    padding: var(--space-2) var(--space-4);
    min-height: var(--control-h-sm);
    background: transparent;
    color: var(--white);
    border: var(--border-hairline) solid var(--dark-rule);
    font-family: var(--font-body);
    font-size: var(--button-s-size);
    font-weight: var(--weight-bold);
    letter-spacing: var(--button-s-track);
    text-transform: uppercase;
    cursor: pointer;
}

.bulk-btn:hover { background: var(--dark-hover); }
.bulk-btn.danger:hover { background: var(--action-danger-hover); }

/* ---------- Drawer de detalle ---------- */
.drawer-trigger { display: none; }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 33, 29, var(--opacity-subtle));
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-panel) var(--ease-standard), visibility var(--duration-panel);
}

.drawer-trigger:checked ~ .drawer-backdrop { opacity: 1; visibility: visible; }

.detail-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 410px;
    max-width: 100%;
    height: 100vh;
    background: var(--surface-card);
    border-left: var(--border-rule-width) solid var(--border-strong);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform var(--duration-panel) var(--ease-standard);
    padding: var(--space-10) var(--space-6) var(--space-16);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

/* A 410px el panel es angosto: los grids internos bajan a una columna cómoda */
.detail-drawer .info-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
.detail-drawer .image-grid-4 { grid-template-columns: repeat(3, 1fr); }

.drawer-trigger:checked ~ .detail-drawer { transform: translateX(0); }

.close-drawer {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-md);
    height: var(--control-h-md);
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    color: var(--neutral-500);
    cursor: pointer;
    z-index: 2;
}

.close-drawer:hover { background: var(--neutral-200); }

.drawer-content h2 {
    font-family: var(--font-display);
    font-size: var(--h2-size);
    line-height: var(--h2-lh);
    color: var(--surface-ink);
    margin: 0 0 var(--space-6);
}

/* Marcas Bauhaus decorativas del drawer */
.shape-decor {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.shape-decor::before,
.shape-decor::after {
    content: "";
    width: 14px;
    height: 14px;
}

.shape-decor::before { background: var(--bauhaus-square); }
.shape-decor::after { background: var(--bauhaus-circle); border-radius: var(--radius-circle); }

/* Cabecera del drawer (Figma 26-cotizaciones) */
.drawer-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-right: var(--control-h-md);
}

.drawer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    background: var(--blue-300);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 18px;
}

.drawer-head-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.drawer-ref {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.drawer-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.15;
    color: var(--surface-ink);
    overflow-wrap: anywhere;
}

.drawer-place {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.drawer-place [data-wo-icon] { width: 14px; height: 14px; flex: none; }

.drawer-head-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.drawer-date {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* Título de sección centrado entre dos divisores (Figma) */
.drawer-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-10) 0 var(--space-5);
}

.drawer-section-title::before,
.drawer-section-title::after {
    content: "";
    flex: 1 1 auto;
    border-top: var(--border-hairline) solid var(--border-subtle);
}

.drawer-section-title span {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* RESUMEN DEL TATUAJE */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.summary-cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.summary-label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.summary-value {
    font-size: var(--body-s-size);
    font-weight: var(--weight-bold);
    color: var(--surface-ink);
    overflow-wrap: anywhere;
}

.summary-desc {
    margin: var(--space-5) 0 0;
    font-size: var(--body-s-size);
    line-height: 1.6;
    color: var(--neutral-500);
}

/* RESUMEN ECONÓMICO · 3 tiles ink con cifra amarilla */
.econ-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
}

.econ-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    min-height: 144px;
    padding: var(--space-4) var(--space-2);
    background: var(--surface-inverse);
    text-align: center;
}

.econ-value {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--yellow-300);
    overflow-wrap: anywhere;
}

.econ-label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--text-on-dark);
}

.status-priority-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.status-dropdown,
.priority-dropdown {
    appearance: none;
    min-height: var(--control-h-sm);
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    background-color: var(--surface-input);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5449' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    border: var(--border-strong-width) solid var(--border-strong);
    border-radius: var(--radius-none);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-500);
    cursor: pointer;
}

.priority-dropdown.priority-high { background-color: var(--status-error-bg); color: var(--status-error-fg); border-color: var(--red-300); }
.priority-dropdown.priority-medium { background-color: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--yellow-300); }
.priority-dropdown.priority-low { background-color: var(--surface-input); color: var(--text-muted); }

/* ---------- Timeline de la cotización (drawer) ---------- */
.quote-timeline { margin: var(--space-6) 0; }

.timeline-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) 0;
}

.timeline-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 88px;
    text-align: center;
}

.timeline-connector {
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    border-top: var(--border-rule-width) solid var(--sand-350);
    z-index: 0;
}

.timeline-connector--completed,
.timeline-connector--current { border-top-color: var(--surface-ink); }
.timeline-connector--terminal { border-top-style: dashed; }

.timeline-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--neutral-300);
    color: var(--neutral-300);
    border-radius: var(--radius-circle);
}

.timeline-dot [data-wo-icon] { width: 14px; height: 14px; }

.timeline-dot--completed { background: var(--surface-ink); border-color: var(--surface-ink); color: var(--white); }
.timeline-dot--current { background: var(--yellow-300); border-color: var(--surface-ink); color: var(--surface-ink); }
.timeline-dot--terminal { color: var(--white); border-color: transparent; }

.timeline-label { display: flex; flex-direction: column; gap: 2px; }

.timeline-status {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.timeline-step--current .timeline-status,
.timeline-step--completed .timeline-status { color: var(--surface-ink); font-weight: var(--weight-bold); }

.timeline-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
}

/* ---------- Bloques de información del drawer ---------- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-5);
    margin-bottom: var(--space-8);
}

.info-block label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--space-1);
}

.info-block p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.25;
    color: var(--surface-ink);
    overflow-wrap: anywhere;
}

.additional-info-section {
    background: var(--neutral-100);
    border: var(--border-strong-width) dashed var(--border-muted) !important;
}

.additional-info-section .info-block p {
    font-family: var(--font-body);
    font-size: var(--body-s-size);
    font-weight: var(--weight-semibold);
}

.expand-info-btn { width: 100%; }

/* Referencias */
.image-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.ref-thumb {
    aspect-ratio: 1;
    background: var(--surface-media);
    border: var(--border-hairline) solid var(--border-strong);
    overflow: hidden;
    cursor: zoom-in;
}

.ref-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-thumb:hover img { opacity: var(--opacity-subtle); }

.ref-box {
    padding: var(--space-8);
    text-align: center;
    background: var(--surface-media) !important;
    border: var(--border-strong-width) dashed var(--border-muted);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: var(--space-2);
}

/* ---------- Notepad (canvas de notas) ---------- */
.notes-section { margin-top: var(--space-8); }

.notepad-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-strong-width) solid var(--border-strong);
    margin-bottom: var(--space-3);
}

.notepad-title {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-lead-track);
    text-transform: uppercase;
    color: var(--surface-ink);
}

.notepad-actions { display: flex; align-items: center; gap: var(--space-3); }

.notepad-count {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-s-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.notes-empty {
    padding: var(--space-6);
    text-align: center;
    border: var(--border-strong-width) dashed var(--border-muted);
    color: var(--text-faint);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.notes-empty p {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
}

.notes-list { display: flex; flex-direction: column; gap: var(--space-2); }

.note-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-subtle);
    border-left: var(--border-rule-width) solid var(--border-strong);
}

.note-header { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.note-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.note-title {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--body-s-size);
    color: var(--surface-ink);
}

.note-label {
    display: inline-flex;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}

.note-date {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
}

.note-actions { display: flex; gap: var(--space-1); flex: none; }

.note-action-btn {
    padding: var(--space-1) var(--space-2);
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
    cursor: pointer;
}

.note-action-btn:hover { background: var(--neutral-200); }
.note-action-btn.danger { border-color: var(--red-300); color: var(--red-700); }
.note-action-btn.danger:hover { background: var(--status-error-bg); }

/* ---------- Sesiones ---------- */
.sessions-section {
    margin-top: var(--space-8) !important;
    padding: var(--space-5) !important;
    background: var(--neutral-100) !important;
    border: var(--border-strong-width) solid var(--yellow-300) !important;
}

.sessions-section h4 {
    font-family: var(--font-mono) !important;
    font-size: var(--meta-m-size) !important;
    letter-spacing: var(--meta-lead-track);
    text-transform: uppercase;
    color: var(--surface-ink);
}

.session-card {
    background: var(--surface-card) !important;
    border: var(--border-hairline) solid var(--border-subtle) !important;
    border-left-width: 4px !important;
}

/* ---------- Chat del drawer ---------- */
.chat-section label { color: var(--text-muted) !important; }

#drawer-chat-messages {
    background: var(--neutral-100) !important;
    border: var(--border-hairline) solid var(--border-subtle) !important;
    color: var(--neutral-500) !important;
}

#drawer-chat-input {
    background: var(--surface-input);
    border: var(--border-hairline) solid var(--border-strong) !important;
    font-family: var(--font-body);
    color: var(--neutral-500);
}

#drawer-chat-input:focus { background: var(--white); border-color: var(--border-focus) !important; outline: none; }

.chat-unread-badge { border-radius: var(--radius-sm) !important; }

/* ---------- Modales ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(36, 33, 29, var(--opacity-subtle));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: 2000;
    box-sizing: border-box;
}

.modal-container {
    background: var(--surface-card) !important;
    border: var(--border-strong-width) solid var(--border-strong);
    border-radius: var(--radius-none) !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-8);
    box-sizing: border-box;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.modal-header h3 {
    margin: 0;
    font-family: var(--font-display) !important;
    font-size: var(--h3-size);
    color: var(--surface-ink);
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    font-size: 18px;
    line-height: 1;
    color: var(--neutral-500);
    cursor: pointer;
    flex: none;
}

.modal-close:hover { background: var(--neutral-200); }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.form-group { margin-bottom: var(--space-4); }

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size) !important;
    font-weight: var(--weight-regular) !important;
    letter-spacing: var(--meta-m-track);
    text-transform: uppercase;
    color: var(--neutral-500);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--control-h-md);
    background: var(--surface-input);
    border: var(--border-hairline) solid var(--border-subtle) !important;
    border-radius: var(--radius-none) !important;
    padding: var(--field-padding-y) var(--field-padding-x) !important;
    font-family: var(--font-body);
    font-size: var(--body-m-size);
    color: var(--neutral-500);
}

.form-group textarea { min-height: 96px; resize: vertical; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--white);
    border: var(--border-strong-width) solid var(--border-focus) !important;
    outline: none;
}

/* Modal Canvas (Editor.js) */
.canvas-modal-content { max-width: 860px; }
.canvas-header { border-bottom: var(--border-strong-width) solid var(--border-strong); padding-bottom: var(--space-4); }
.canvas-title-section { display: flex; flex-direction: column; gap: var(--space-1); }

.canvas-subtitle {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--text-faint);
}

.canvas-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.canvas-meta-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); }

.canvas-editor {
    min-height: 260px;
    background: var(--surface-input);
    border: var(--border-hairline) solid var(--border-subtle);
    padding: var(--space-4);
}

.editor-hint { color: var(--text-faint); text-transform: none; letter-spacing: 0; }

.export-dropdown { position: relative; }

.export-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    background: var(--surface-card);
    border: var(--border-strong-width) solid var(--border-strong);
    display: flex;
    flex-direction: column;
    min-width: 180px;
    z-index: 10;
}

.export-menu button {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border: 0;
    border-bottom: var(--border-hairline) solid var(--border-subtle);
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--body-s-size);
    color: var(--neutral-500);
    cursor: pointer;
}

.export-menu button:last-child { border-bottom: 0; }
.export-menu button:hover { background: var(--neutral-100); }

/* Etiquetas del canvas */
.label-selector { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.label-btn {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-500);
    cursor: pointer;
}

.label-btn:hover { background: var(--neutral-200); }
.label-btn.active { background: var(--neutral-500); color: var(--accent); border-color: var(--neutral-500); }

.add-label-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.add-label-form input {
    flex: 1;
    min-width: 160px;
    min-height: var(--control-h-sm);
    background: var(--surface-input);
    border: var(--border-hairline) solid var(--border-subtle);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--body-s-size);
}

/* Modal de descripción (Quill) */
.description-modal-content { max-width: 720px; }
#description-editor { background: var(--surface-input); min-height: 220px; }
#description-editor .ql-editor { font-family: var(--font-body); font-size: var(--body-m-size); color: var(--neutral-500); }
.char-counter {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    color: var(--text-faint);
    text-align: right;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow { border: var(--border-hairline) solid var(--border-subtle) !important; border-radius: var(--radius-none) !important; }

/* Modal de subida de referencias */
.upload-modal-content { max-width: 640px; }

.upload-tabs { display: flex; gap: 0; border-bottom: var(--border-strong-width) solid var(--border-strong); margin-bottom: var(--space-4); }

.upload-tab {
    padding: var(--space-3) var(--space-5);
    background: transparent;
    border: 0;
    border-bottom: var(--border-rule-width) solid transparent;
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--neutral-400);
    cursor: pointer;
}

.upload-tab:hover { color: var(--neutral-500); }
.upload-tab.active { color: var(--neutral-500); border-bottom-color: var(--accent); }

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8);
    background: var(--surface-input);
    border: var(--border-strong-width) dashed var(--border-muted);
    text-align: center;
    color: var(--text-muted);
    cursor: pointer;
}

.upload-dropzone:hover { background: var(--surface-input-hover); }
.upload-dropzone.dragover { border-color: var(--border-focus); background: var(--white); }
.upload-dropzone p { margin: 0; font-size: var(--body-s-size); }

.upload-preview { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.preview-item {
    position: relative;
    width: 84px;
    height: 84px;
    border: var(--border-hairline) solid var(--border-strong);
    overflow: hidden;
    background: var(--surface-media);
}

.preview-item img { width: 100%; height: 100%; object-fit: cover; }

.preview-remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: var(--neutral-500);
    color: var(--white);
    border: 0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.upload-progress { margin-top: var(--space-4); }
.progress-bar { height: 10px; background: var(--neutral-200); border: var(--border-hairline) solid var(--border-subtle); overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: var(--neutral-500); transition: width var(--duration-fast) var(--ease-standard); }
#upload-status { font-family: var(--font-mono); font-size: var(--meta-s-size); color: var(--text-muted); margin-top: var(--space-2); }
.url-hint { font-size: var(--body-s-size); color: var(--text-muted); }

/* ---------- Lightbox ---------- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 17, 37, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: var(--space-8);
    box-sizing: border-box;
}

.lightbox-overlay.active { display: flex; }

.lightbox-content { max-width: 90vw; max-height: 80vh; }
.lightbox-content img { max-width: 100%; max-height: 80vh; display: block; border: var(--border-strong-width) solid var(--white); }

.lightbox-close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: var(--control-h-md);
    height: var(--control-h-md);
    background: var(--white);
    border: var(--border-strong-width) solid var(--border-strong);
    font-size: 20px;
    color: var(--neutral-500);
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.lightbox-nav-btn {
    width: var(--control-h-md);
    height: var(--control-h-md);
    background: var(--white);
    border: var(--border-strong-width) solid var(--border-strong);
    font-size: 18px;
    color: var(--neutral-500);
    cursor: pointer;
}

.lightbox-nav-btn:hover { background: var(--yellow-300); }

.lightbox-counter {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: var(--meta-m-track);
    color: var(--white);
}

/* ---------- Vista de postulaciones (Job Board) ---------- */
#applications-view h2 {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    color: var(--surface-ink);
    margin: 0;
}

/* ============================================================================
   CALENDARIO — leyenda, filtros y tema de FullCalendar sobre tokens
   ========================================================================== */

.calendar-legend {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-hairline) solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-500);
    background: var(--surface-card);
}

.legend-color { width: 12px; height: 12px; flex: none; }
.legend-color.pending { background: var(--yellow-300); }
.legend-color.responded { background: var(--blue-400); }
.legend-color.completed { background: var(--system-success); }

.calendar-stats {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    border-top: var(--border-hairline) solid var(--border-strong);
    padding-top: var(--space-5);
}

.calendar-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    border-left: var(--border-hairline) solid var(--sand-350);
}

.calendar-stat-card:first-child { padding-left: 0; border-left: 0; }

.calendar-stat-card .stat-dot { width: 12px; height: 12px; flex: none; }
.calendar-stat-card .stat-dot.pending { background: var(--yellow-300); }
.calendar-stat-card .stat-dot.responded { background: var(--blue-400); }
.calendar-stat-card .stat-dot.completed { background: var(--system-success); }

.calendar-stat-card .stat-count {
    font-family: var(--font-display);
    font-size: var(--title-md-size);
    color: var(--surface-ink);
}

.calendar-stat-card .stat-label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--text-faint);
    display: block;
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-4) 0;
    border-top: var(--border-hairline) solid var(--border-strong);
    border-bottom: var(--border-hairline) solid var(--border-strong);
}

.filter-group,
.date-picker-group,
.sync-group { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.filter-group label,
.date-picker-group label {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-wide-track);
    text-transform: uppercase;
    color: var(--text-muted);
}

.status-filter-btns { display: flex; gap: 0; }

.filter-btn {
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    min-height: var(--control-h-sm);
    border: var(--border-hairline) solid var(--border-strong);
    background: var(--surface-card);
    color: var(--neutral-500);
    cursor: pointer;
    margin-left: -1px;
}

.filter-btn:first-child { margin-left: 0; }
.filter-btn:hover { background: var(--neutral-200); z-index: 1; position: relative; }
.filter-btn.active { background: var(--neutral-500); color: var(--accent); z-index: 2; position: relative; }
.filter-btn.active[data-status="pending"] { background: var(--yellow-300); color: var(--neutral-500); }
.filter-btn.active[data-status="responded"] { background: var(--blue-400); color: var(--white); }
.filter-btn.active[data-status="completed"] { background: var(--system-success); color: var(--white); }

.date-picker-group select {
    appearance: none;
    font-family: var(--font-mono);
    font-size: var(--meta-m-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    min-height: var(--control-h-sm);
    border: var(--border-hairline) solid var(--border-strong);
    border-radius: var(--radius-none);
    background-color: var(--surface-input);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5449' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    color: var(--neutral-500);
    cursor: pointer;
    min-width: 120px;
}

.calendar-container {
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--border-strong);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

/* FullCalendar · tema Bauhaus */
.fc { font-family: var(--font-body); }

.fc .fc-toolbar-title {
    font-family: var(--font-display);
    font-size: var(--h3-size);
    text-transform: none;
    letter-spacing: 0;
    color: var(--surface-ink);
}

.fc .fc-button {
    background: var(--surface-card) !important;
    border: var(--border-hairline) solid var(--border-strong) !important;
    border-radius: var(--radius-none) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--meta-m-size) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--neutral-500) !important;
    padding: var(--space-2) var(--space-4) !important;
    box-shadow: none !important;
}

.fc .fc-button:hover { background: var(--neutral-200) !important; }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: var(--neutral-500) !important;
    color: var(--yellow-300) !important;
    border-color: var(--neutral-500) !important;
}

.fc .fc-button:disabled { opacity: var(--opacity-disabled) !important; }

.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: var(--border-strong) !important; }

.fc .fc-col-header-cell { background: var(--sand-150); }

.fc .fc-col-header-cell-cushion {
    font-family: var(--font-mono);
    font-size: var(--meta-s-size);
    letter-spacing: var(--meta-m-track);
    font-weight: var(--weight-regular);
    text-transform: uppercase;
    color: var(--text-faint);
    text-decoration: none;
    padding: var(--space-2);
}

.fc .fc-daygrid-day-number {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--surface-ink);
    text-decoration: none;
    padding: var(--space-2);
}

.fc .fc-daygrid-day.fc-day-today { background: var(--yellow-100) !important; }
.fc .fc-daygrid-day:hover { background: var(--neutral-100); }
.fc .fc-day-other .fc-daygrid-day-number { opacity: var(--opacity-disabled); }

.fc-event {
    border-radius: var(--radius-none) !important;
    border: none !important;
    padding: 2px 6px !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em;
    cursor: pointer !important;
}

.fc-event:hover { opacity: var(--opacity-subtle); }
.fc-event.status-pending { background: var(--yellow-300) !important; color: var(--neutral-500) !important; }
.fc-event.status-responded { background: var(--blue-400) !important; color: var(--white) !important; }
.fc-event.status-completed { background: var(--system-success) !important; color: var(--white) !important; }
.fc-event.needs-session { background: var(--yellow-300) !important; color: var(--neutral-500) !important; border: var(--border-hairline) dashed var(--yellow-500) !important; }

.fc .fc-daygrid-more-link {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--blue-400);
}

.fc .fc-popover {
    border: var(--border-strong-width) solid var(--border-strong);
    border-radius: var(--radius-none);
    box-shadow: none;
}

.fc .fc-popover-header { background: var(--neutral-100); font-family: var(--font-mono); font-size: var(--meta-s-size); text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .q-hero-title { font-size: var(--title-md-size); }
    .stat-value { font-size: var(--title-md-size); }
    .detail-drawer { width: 410px; }

    .q-hero-aside { flex-basis: 100%; padding-left: 0; border-left: 0; }
    .q-card { grid-template-columns: 72px minmax(0, 1fr) 160px; column-gap: var(--space-4); }
    .q-card-name { font-size: var(--h3-size); }
    .q-card-price { font-size: 20px; }
    .legend-groups { gap: var(--space-5); }
}

@media (max-width: 768px) {
    .qadmin-main { padding: 0 var(--margin-xs) var(--space-12); }
    .admin-mobile-menu-toggle { display: inline-flex; }
    .admin-mobile-menu:not([hidden]) { display: flex; }

    .q-hero { padding: var(--space-6) 0; }
    .q-hero-title { font-size: var(--title-sm-size); }
    .q-hero-sub { font-size: var(--body-m-size); }
    .q-hero-actions { margin-top: var(--space-6); }
    .q-hero-btn { flex: 1 1 100%; justify-content: center; }

    .stats-strip { padding: var(--space-4) 0; }
    .stat-card { min-width: calc(50% - var(--space-4)); padding: var(--space-2) var(--space-4); }
    .stat-card:nth-child(odd) { padding-left: 0; border-left: 0; }
    .stat-value { font-size: var(--title-sm-size); }

    /* La tarjeta colapsa a dos filas: prioridad + contenido, y luego estado/precio */
    .q-card {
        grid-template-columns: 24px minmax(0, 1fr);
        row-gap: var(--space-4);
        column-gap: var(--space-4);
        padding: var(--space-5) 0;
    }

    .q-card-prio { grid-column: 1; grid-row: 1; align-items: flex-start; padding-top: 0; }
    .q-card-body { grid-column: 2; grid-row: 1; }
    .q-card-side {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-3);
        text-align: left;
    }
    .q-card-cta { flex: 1 1 100%; }
    .q-card-name { font-size: 22px; }

    /* La tabla colapsa a tarjetas: se oculta el header y cada fila fluye */
    .table-header { display: none; }

    .quote-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        padding: var(--space-4) var(--space-3);
        align-items: flex-start;
    }

    .quote-row > * { padding: 0; }
    .client-cell { order: 1; flex: 1 1 60%; }
    .price-cell { order: 2; margin-left: auto; }
    .tattoo-cell { order: 3; flex: 1 1 100%; }
    .timing-cell { order: 4; }
    .quote-date, .quote-id, .location-cell { order: 5; }
    .quote-checkbox { order: 0; }
    .quote-row .detail-btn { order: 6; flex: 1 1 100%; }

    .detail-drawer { width: 100%; border-left: 0; padding: var(--space-8) var(--space-4) var(--space-12); }

    .bulk-action-bar { width: calc(100% - var(--space-8)); flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

    .info-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .image-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .canvas-meta-row { grid-template-columns: 1fr; }

    .calendar-toolbar { flex-direction: column; align-items: stretch; }
    .calendar-stat-card { padding: 0 var(--space-4); }
    .fc .fc-toolbar { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 480px) {
    /* La topbar del panel (marca + menú + Ö + log out) tiene que entrar en 375px */
    .wo-topbar { gap: var(--space-3); }
    .wo-topbar-brand { padding: 0 var(--space-3); }
    .wo-topbar-right { gap: var(--space-2); padding: 0 var(--space-2); }
    .admin-mobile-menu-toggle { padding: var(--space-2); }

    .q-hero-title { font-size: var(--h3-size); }
    .stat-card { min-width: 100%; padding-left: 0; border-left: 0; }
    .image-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .toolbar-filters { width: 100%; }
    .toolbar-select { flex: 1 1 auto; }

    .q-chipbar { width: 100%; }
    .q-chip { flex: 1 1 calc(50% - var(--space-2)); justify-content: center; }
    .q-morefilters-field { min-width: 100%; }
    .q-card-name { font-size: 20px; }
    .q-card-price { font-size: 18px; }
    .q-group-head { gap: var(--space-1); }
    .legend-groups { gap: var(--space-4); }
}

/* Topbar canonica (Figma 33:5758): brand y nav en ink — el generico .wo-app a
   los pintaba de azul en las paginas del panel. */
.wo-topbar a.wo-topbar-brand { color: var(--text-heading); }
.wo-topbar a.wo-topbar-brand:hover { color: var(--text-heading); text-decoration: none; }
.wo-topbar a.wo-topbar-item { color: var(--neutral-400); }
.wo-topbar a.wo-topbar-item:hover { color: var(--neutral-500); text-decoration: none; }
.wo-topbar a.wo-topbar-item.is-active { color: var(--neutral-500); }

/* Acceso al archivo (salio de la topbar segun el mock): link mono junto al contador */
.legend-archive { font-family: var(--font-mono); font-size: var(--meta-s-size); letter-spacing: var(--meta-s-track); text-transform: uppercase; color: var(--neutral-400); text-decoration: none; margin-left: var(--space-4); }
.legend-archive:hover { color: var(--neutral-500); text-decoration: underline; }

/* Los <a> del hero y el link de archivadas heredaban el azul de .wo-app a */
.wo-app a.q-hero-btn { color: var(--neutral-500); }
.wo-app a.q-hero-btn:hover { color: var(--neutral-500); text-decoration: none; }
.wo-app a.q-hero-btn--ink { color: var(--action-primary-fg); }
.wo-app a.q-hero-btn--ink:hover { color: var(--action-primary-fg); }
.wo-app a.legend-archive { color: var(--neutral-400); }
.wo-app a.legend-archive:hover { color: var(--neutral-500); }