/* ============================================================
   FinanzApp ERP — Tenants Admin Console (Design System v2 Alignment)
   ============================================================ */

:root,
[data-theme="dark"],
body.dark-theme {
    color-scheme: dark;

    /* Superficies — Slate/Zinc profundo, sin verdes apagados de fondo */
    --bg-body:        #090d16;
    --bg-card:        rgba(17, 24, 39, .72);
    --bg-card-solid:  #111827;
    --bg-card-hover:  rgba(30, 41, 59, .78);
    --bg-sidebar:     #0b0f1a;
    --bg-input:       rgba(15, 23, 42, .65);
    --bg-input-focus: rgba(30, 41, 59, .85);
    --bg-elevated:    #161d2e;

    --text-primary:   #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;

    /* Acento primario esmeralda + secundario cyan para variedad */
    --brand:          #34d399;
    --brand-hover:    #10b981;
    --brand-soft:     rgba(52,211,153,.12);
    --brand-ring:     rgba(52,211,153,.28);
    --brand-glow:     rgba(52,211,153,.35);

    --accent-cyan:      #22d3ee;
    --accent-cyan-soft: rgba(34,211,238,.12);
    --accent-violet:      #a78bfa;
    --accent-violet-soft: rgba(167,139,250,.12);

    --border:         rgba(255,255,255,.08);
    --border-strong:  rgba(255,255,255,.16);

    --danger:         #fb7185;
    --danger-hover:   #f43f5e;
    --danger-soft:    rgba(251,113,133,.12);
    --warning:        #fbbf24;
    --warning-soft:   rgba(251,191,36,.12);
    --info:           #38bdf8;
    --info-hover:     #0ea5e9;
    --info-soft:      rgba(56,189,248,.12);
    --success:        #34d399;
    --success-soft:   rgba(52,211,153,.12);
    --success-hover:  #10b981;

    --surface-body:   radial-gradient(1200px 600px at 12% -10%, rgba(52,211,153,.08), transparent 60%),
                       radial-gradient(1000px 560px at 100% 0%, rgba(34,211,238,.05), transparent 55%),
                       linear-gradient(180deg, #090d16 0%, #0a0e18 40%, #0b0f1a 100%);
    --surface-card:   var(--bg-card);
    --surface-card-soft: var(--bg-card-hover);
    --overlay-backdrop: rgba(4, 7, 13, .82);

    --shadow-sm: 0 3px 10px rgba(0,0,0,.22);
    --shadow-md: 0 12px 28px rgba(0,0,0,.34);
    --shadow-lg: 0 20px 46px rgba(0,0,0,.44);
    --shadow-xl: 0 28px 70px rgba(0,0,0,.55);
    --shadow-glow: 0 0 0 1px var(--brand-ring), 0 8px 24px rgba(52,211,153,.18);

    --r-sm:   7px;
    --r-md:   11px;
    --r-lg:   16px;
    --r-xl:   22px;
    --r-full: 9999px;

    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);

    --font-sans: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

    font-family: var(--font-sans);
}

* { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text-primary);
    background: var(--surface-body);
    background-attachment: fixed;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .6; cursor: not-allowed; }

::selection { background: var(--brand-ring); color: var(--text-primary); }

/* Scrollbars premium */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Focus visible ring (accesibilidad premium) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.app-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    min-height: 100vh;
}

/* SIDEBAR RAIL */
.rail {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 20px;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 20;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow: 0 2px 10px rgba(34, 197, 94, .25);
    flex-shrink: 0;
}

.brand-text-lockup {
    display: flex;
    flex-direction: column;
}

.brand-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brand-title-row h2 {
    margin: 0;
    color: var(--brand);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.brand-subtitle {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--r-full);
    font-size: 10px;
    font-weight: 800;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
}
.ai-badge svg { width: 12px; height: 12px; }

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 20px 0;
    flex: 1;
}

.rail-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 11px 14px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: all .18s var(--ease-out);
}

.rail-nav a:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    transform: translateX(2px);
}

.rail-nav a.active {
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
}

.rail-nav a.active::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: var(--r-full);
    background: var(--brand);
    box-shadow: 0 0 10px var(--brand);
}

.tab-icon {
    width: 18px;
    height: 18px;
}

.rail-note {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
}
.rail-note span { display: block; color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.rail-note strong { display: block; margin-top: 4px; color: var(--text-primary); font-size: 13px; font-weight: 700; }

/* WORKSPACE */
.workspace {
    padding: 24px 30px 48px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.topbar-heading {
    min-width: 0;
    flex: 0 1 auto;
}

.topbar-status-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-divider {
    width: 1px;
    height: 26px;
    background: var(--border-strong);
    flex-shrink: 0;
}

.topbar-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
h3 { margin: 0; font-size: 16px; font-weight: 700; }
p { color: var(--text-secondary); line-height: 1.5; }

.topbar-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 10px 4px 5px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s var(--ease-out);
}
.profile-trigger:hover { border-color: var(--brand); background: var(--bg-card-hover); transform: translateY(-1px); }
.profile-trigger-avatar, .profile-avatar-preview, .tenant-monogram {
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    color: var(--brand);
    background: var(--brand-soft);
    font-weight: 800;
}
.profile-trigger-avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; }
.profile-trigger-avatar img, .profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.env-select:not(.cselect) {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    outline: none;
    cursor: pointer;
}
.env-select:not(.cselect):focus { border-color: var(--brand); }

/* Wrapper cselect del selector de ambiente: mismo look en pill */
.env-select.cselect { width: auto; min-width: 190px; }
.env-select.cselect .cselect-trigger {
    border-radius: var(--r-full);
    background: var(--bg-card);
}

.api-pill, .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text-secondary);
    background: var(--bg-card);
    font-size: 12px;
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease;
}
.api-pill {
    height: 32px;
    padding: 0 10px;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .01em;
}
.api-pill .status-dot { width: 7px; height: 7px; }
.pill { height: auto; padding: 3px 10px; }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.api-pill.ok .status-dot {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
.api-pill.offline .status-dot {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger);
}

.pill.ok { color: var(--success); border-color: var(--brand-ring); background: var(--brand-soft); }
.pill.warn { color: var(--warning); border-color: var(--warning-soft); background: var(--warning-soft); }
.pill.danger { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.pill.info { color: var(--info); border-color: var(--info-soft); background: var(--info-soft); }

/* BOTONES FINANZAPP ERP */
.btn-primary, .btn-secondary, .btn-danger-ghost, .btn-confirm, .btn-cancel, .btn-danger-solid, .btn-nuevo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    transition: transform .12s var(--ease-spring), box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.btn-primary:active:not(:disabled), .btn-confirm:active:not(:disabled),
.btn-secondary:active:not(:disabled), .btn-cancel:active:not(:disabled),
.btn-danger-ghost:active:not(:disabled), .btn-danger-solid:active:not(:disabled), .btn-nuevo:active:not(:disabled) {
    transform: scale(.96);
}

/* Mismo verde que .btn-nuevo (tomado tal cual del ERP original), para que
   todos los botones verdes del panel —"Nuevo X" y los de confirmación/envío
   de los modales— se vean idénticos, no dos tonos de verde distintos. */
.btn-primary, .btn-confirm {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.42), 0 0 6px rgba(0,0,0,.24);
    background: linear-gradient(180deg, #16a34a 0%, #087f5b 52%, #065f46 100%);
    border: 1px solid #059669;
    box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-primary:hover:not(:disabled), .btn-confirm:hover:not(:disabled) {
    background: linear-gradient(180deg, #22c55e 0%, #0f8f66 50%, #047857 100%);
    border-color: #059669;
    box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 12px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.40);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled), .btn-confirm:active:not(:disabled) {
    background: linear-gradient(180deg, #064e3b 0%, #047857 100%);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.34), 0 1px 1px rgba(0,0,0,.16);
}
.btn-primary:focus-visible, .btn-confirm:focus-visible { outline: 2px solid #059669; outline-offset: 3px; }

.btn-secondary, .btn-cancel {
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--brand-ring);
}

.topbar-icon-action {
    display: inline-grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand);
    background: var(--bg-card);
    border: 1px solid var(--brand-ring);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: transform .12s var(--ease-spring), box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.topbar-icon-action svg { width: 17px; height: 17px; }
.topbar-icon-action:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--brand);
    box-shadow: 0 0 12px rgba(52, 211, 153, .15);
    transform: translateY(-1px);
}
.topbar-icon-action:active:not(:disabled) { transform: scale(.94); }
.topbar-icon-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.topbar-icon-action:disabled { cursor: wait; opacity: .72; }
.topbar-icon-action > span:not(.btn-spinner) { display: none; }
.btn-secondary:hover:not(:disabled), .btn-cancel:hover:not(:disabled) {
    background: var(--bg-card-hover);
    border-color: var(--brand);
    box-shadow: 0 0 12px rgba(52, 211, 153, .15);
    transform: translateY(-1px);
}

.btn-xs:has(svg:only-child),
.btn-xs.icon-only {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.btn-secondary.btn-xs {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: var(--r-sm);
    font-weight: 700;
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
}
.btn-secondary.btn-xs:hover:not(:disabled) {
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 10px rgba(52, 211, 153, .22);
}

.btn-secondary.btn-xs:has(svg:only-child),
.btn-secondary.icon-only {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
    color: var(--brand);
}

.btn-confirm.btn-xs:has(svg:only-child),
.btn-primary.btn-xs:has(svg:only-child) {
    background: linear-gradient(180deg, #16a34a 0%, #087f5b 52%, #065f46 100%);
    border: 1px solid #059669;
    color: #ffffff;
}
.btn-confirm.btn-xs:has(svg:only-child) svg,
.btn-primary.btn-xs:has(svg:only-child) svg {
    color: #ffffff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

.btn-danger-ghost {
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid rgba(251,113,133,.25);
}
.btn-danger-ghost:hover:not(:disabled) {
    background: rgba(251, 113, 133, .22);
    border-color: var(--danger);
    box-shadow: 0 0 10px rgba(251, 113, 133, .25);
    transform: translateY(-1px);
}
.btn-danger-ghost.btn-xs:has(svg:only-child) {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.btn-danger-solid {
    color: #ffffff;
    background: linear-gradient(180deg, #f87171, #dc2626);
    box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
}
.btn-danger-solid:hover:not(:disabled) {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    box-shadow: 0 4px 14px rgba(220, 38, 38, .35);
    transform: translateY(-1px);
}

.btn-primary svg, .btn-confirm svg, .btn-secondary svg, .btn-danger-ghost svg, .btn-danger-solid svg, .btn-nuevo svg {
    width: 16px;
    height: 16px;
}
.btn-confirm svg, .btn-confirm.btn-xs svg, .btn-nuevo svg {
    color: #ffffff;
    stroke: currentColor;
    stroke-width: 2.8px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Los iconos dentro de botones ghost/secundarios llevan el tema de color
   del sistema (verde marca / rojo peligro) con un glow sutil "glass" en reposo. */
.btn-secondary svg {
    color: var(--brand);
    filter: drop-shadow(0 0 3px rgba(52,211,153,.4));
}
.btn-danger-ghost svg {
    color: var(--danger);
    filter: drop-shadow(0 0 3px rgba(251,113,133,.4));
}

/* Botón "Nuevo/Nueva X" — píldora verde idéntica al ERP original (public/styles.css,
   .btn-nuevo), con bordes redondeados (border-radius: 9999px) y tipografía en mayúsculas. */
.btn-nuevo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(180deg, #10b981 0%, #059669 55%, #047857 100%);
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 5px rgba(0,0,0,.5);
    border: 1px solid #047857;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, .35),
        0 6px 18px -2px rgba(16, 185, 129, .55),
        0 3px 8px -1px rgba(16, 185, 129, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .18);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .15s ease, opacity .2s ease;
}
.btn-nuevo:hover:not(:disabled) {
    background: linear-gradient(180deg, #6ee7b7 0%, #34d399 45%, #10b981 100%);
    border-color: #34d399;
    box-shadow:
        0 0 0 1px rgba(110, 231, 183, .5),
        0 10px 28px -3px rgba(16, 185, 129, .7),
        0 4px 12px -1px rgba(16, 185, 129, .45),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}
.btn-nuevo:active:not(:disabled) {
    background: linear-gradient(180deg, #047857 0%, #065f46 100%);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.34), 0 1px 1px rgba(0,0,0,.16);
    transform: translateY(1px);
}
.btn-nuevo:focus-visible { outline: 2px solid #059669; outline-offset: 3px; }
.btn-nuevo:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* Los <span> dentro de .btn-nuevo heredan el color del botón (blanco).
   Necesario para tapar `.panel-head span { color: var(--brand); }` cuando
   el botón vive dentro de un .panel-head. */
.btn-nuevo span, .btn-primary span, .btn-confirm span, .btn-danger-solid span { color: inherit !important; }

/* Spinner inline para botones en estado "cargando" */
.btn-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
.btn-secondary .btn-spinner, .btn-cancel .btn-spinner {
    border: 2px solid var(--border-strong);
    border-top-color: var(--text-primary);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CARDS & PANELS — Glassmorphism sutil sobre slate/zinc profundo */
.hero, .panel, .stats-grid article, .plan-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.login-form, .form-grid {
    display: grid;
    gap: 14px;
}

.modal-card > .form-grid {
    padding: 22px 24px 0;
}

.form-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    align-items: start;
}
.form-grid-2col .span-2 { grid-column: 1 / -1; }

input[readonly] {
    opacity: 0.75;
    background-color: rgba(255, 255, 255, 0.04);
    cursor: not-allowed;
}

/* Ocultar spinners nativos de todos los <input type="number"> del panel — feo default del browser. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Campo de descuento porcentual con label visible y sufijo "%". Se aplica envolviendo un <input type="number"> en .discount-field vía JS (enhanceDiscountInputs). */
.discount-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 110px;
    border: 1px dashed rgba(251, 191, 36, .35);
    border-radius: var(--r-md, 8px);
    background: rgba(251, 191, 36, .06);
    padding: 0 8px 0 0;
    transition: border-color .15s ease, background .15s ease;
}
.discount-field:focus-within {
    border-color: rgba(251, 191, 36, .8);
    background: rgba(251, 191, 36, .12);
}
.discount-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fbbf24;
    padding: 0 8px 0 10px;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.discount-field input[type="number"] {
    border: none !important;
    background: transparent !important;
    padding: 8px 4px !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #fbbf24;
    min-width: 0;
    flex: 1;
    width: 100%;
}
.discount-field input[type="number"]:focus { outline: none; }
.discount-field .discount-suffix {
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    padding-left: 2px;
    user-select: none;
}
.discount-field.discount-field-disabled {
    opacity: .45;
    pointer-events: none;
    border-style: solid;
    border-color: var(--border);
    background: transparent;
}
.discount-field.discount-field-disabled .discount-field-label,
.discount-field.discount-field-disabled input,
.discount-field.discount-field-disabled .discount-suffix { color: var(--text-muted); }

/* Botones +/- premium para inputs de cantidad. Se aplican envolviendo el input en .qty-stepper. */
.qty-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md, 8px);
    background: rgba(148, 163, 184, .06);
    overflow: hidden;
    width: 100%;
}
/* Contextos angostos (celdas de tabla, sidebars): permite achicar */
td .qty-stepper,
.qty-stepper.qty-stepper-compact { max-width: 180px; }
.qty-stepper input[type="number"] {
    text-align: center;
    border: none !important;
    background: transparent !important;
    border-radius: 0;
    min-width: 0;
    flex: 1;
    padding: 8px 4px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.qty-stepper input[type="number"]:focus { outline: none; }
.qty-stepper-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
    user-select: none;
}
.qty-stepper-btn:hover:not(:disabled) {
    background: var(--brand-soft, rgba(52, 211, 153, .12));
    color: var(--brand, #34d399);
}
.qty-stepper-btn:active:not(:disabled) {
    background: var(--brand, #34d399);
    color: #0f172a;
}
.qty-stepper-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.qty-stepper.qty-stepper-disabled {
    opacity: .5;
    pointer-events: none;
}

.field-help {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
}

/* El footer vive dentro de .form-grid (padding propio); se "sangra" a los
   bordes del modal para que el border-top ocupe todo el ancho. */
.form-grid .modal-footer {
    margin: 8px -24px 0;
}
.modal-footer.span-2 { margin-top: 8px; }

label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Igual que <label> pero para campos con datepicker custom: el <label> y el
   <input> deben ser HERMANOS (no el input anidado dentro del label), porque
   el navegador reenvía un click sintético al control asociado de cualquier
   click dentro de un <label> — eso reabre y cierra el calendario en el mismo
   click cuando el input vive adentro del label. Ver datepicker.js. */
.form-field {
    display: grid;
    gap: 6px;
}

input, select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 0 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    transition: border-color .18s ease;
}

input:focus, select:focus {
    border-color: var(--brand);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, .15);
}

textarea {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color .18s ease;
}
textarea:focus { border-color: var(--brand); background: var(--bg-input-focus); }

.checkbox-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12.5px;
    color: var(--text-secondary);
    padding-top: 22px;
}
.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}
.checkbox-inline span { cursor: pointer; }

.plan-form-modules-grid, .module-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.module-toggle-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-input);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
}
.module-toggle-chip:hover { border-color: var(--border-strong); }
.module-toggle-input { display: none; }
.module-toggle-input:checked ~ .switch {
    background: var(--brand-soft);
    border-color: var(--brand);
}
.module-toggle-input:checked ~ .switch::after {
    transform: translateX(20px);
    background: var(--brand);
}

/* Secciones tituladas dentro de modales premium (presupuestos/facturas):
   cada bloque de campos relacionados queda agrupado con acento de color y
   un título con ícono, en vez de un formulario plano sin jerarquía. */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-ring);
    border-radius: var(--r-md);
}
.form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand);
    text-shadow: 0 1px 1px rgba(0,0,0,.5), 0 0 10px rgba(52,211,153,.22);
}
.form-section-title svg { width: 15px; height: 15px; flex-shrink: 0; }
.form-section .form-grid-2col { gap: 14px 18px; }

/* Modal de suscripciones: add-ons como plan builder premium.
   Mantiene los ids existentes para la logica comercial y evita que precio,
   descuento, cantidad y concepto compitan por ancho en una sola linea. */
#subscription-modal .modal-card {
    width: min(1040px, 96vw);
}

.subscription-plan-field,
.subscription-plan-discount-field {
    align-self: stretch;
}
.subscription-plan-discount-field .discount-field {
    max-width: none;
    height: 42px;
}
.subscription-next-invoice-field {
    align-self: stretch;
}
.subscription-next-invoice-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid rgba(52,211,153,.22);
    border-radius: var(--r-md);
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(34,211,238,.06));
    color: var(--text-secondary);
}
.subscription-next-invoice-card strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}
.subscription-next-invoice-card span {
    min-width: 0;
    white-space: normal;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.subscription-addons-section {
    position: relative;
    overflow: hidden;
    gap: 14px;
    padding: 18px 18px 16px;
    border-left: 0;
    border-color: rgba(52, 211, 153, .22);
    background:
        linear-gradient(135deg, rgba(52,211,153,.1), transparent 34%),
        linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.7));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.22);
}
.subscription-addons-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--brand), rgba(34,211,238,.45), transparent);
    opacity: .85;
}
.subscription-addons-section .form-section-title {
    position: relative;
    width: max-content;
    margin-left: 4px;
    padding: 0 10px;
    background: var(--bg-card-solid);
    color: var(--brand);
}
.subscription-addons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}
.subscription-addon-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: start;
    min-width: 0;
    max-width: 100%;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(17,24,39,.86), rgba(8,13,24,.74)),
        rgba(8, 13, 24, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.subscription-addon-row.is-active,
.subscription-addon-row:has(.module-toggle-input:checked) {
    border-color: rgba(52, 211, 153, .34);
    background:
        linear-gradient(135deg, rgba(52,211,153,.16), rgba(34,211,238,.06) 38%, rgba(8,13,24,.68)),
        rgba(8, 13, 24, .72);
    box-shadow: 0 0 0 1px rgba(52,211,153,.08), 0 18px 34px rgba(0,0,0,.22);
}
.subscription-addon-row:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.subscription-addon-toggle {
    min-height: 42px;
    margin: 0;
    padding: 10px 11px;
    border-color: rgba(255,255,255,.09);
    border-radius: var(--r-md);
    background: rgba(15, 23, 42, .58);
}
.subscription-addon-toggle span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.subscription-addon-toggle .module-toggle-input:checked ~ .switch {
    box-shadow: 0 0 18px rgba(52,211,153,.24);
}
.subscription-addon-row.is-active .subscription-addon-toggle span:first-child,
.subscription-addon-toggle:has(.module-toggle-input:checked) span:first-child {
    color: var(--text-primary);
}
.subscription-addon-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0 0;
}
.subscription-addon-controls-3 {
    grid-template-columns: minmax(84px, .55fr) minmax(0, 1fr) minmax(98px, .72fr);
}
.subscription-addon-controls-custom {
    grid-template-columns: minmax(0, 1fr) minmax(98px, .55fr);
}
.subscription-addon-controls-custom > select,
.subscription-addon-controls-custom > .cselect,
.subscription-addon-controls-custom > #subscription-addon-otro-nombre {
    grid-column: 1 / -1;
}
.subscription-addon-controls input,
.subscription-addon-controls select,
.subscription-addon-controls .cselect,
.subscription-addon-controls .cselect-trigger {
    height: 42px;
    min-width: 0;
    width: 100%;
    border-radius: var(--r-md);
    background: rgba(9, 14, 26, .72);
    border-color: rgba(255,255,255,.09);
}
.subscription-addon-controls .cselect {
    height: auto;
    background: transparent;
    border: 0;
}
.subscription-addon-controls input[readonly] {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.subscription-addon-controls .qty-stepper,
.subscription-addon-controls .discount-field {
    height: 42px;
    max-width: none;
    min-width: 0;
    background: rgba(9, 14, 26, .72);
}
.subscription-addon-controls .qty-stepper input {
    height: 40px;
    font-size: 15px;
}
.subscription-addon-controls .discount-field {
    border-color: rgba(251, 191, 36, .42);
}
.subscription-addon-controls select:disabled,
.subscription-addon-controls input:disabled,
.subscription-addon-controls .qty-stepper-disabled,
.subscription-addon-controls .discount-field-disabled {
    opacity: .5;
}
.subscription-addon-subtotal {
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: -2px;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 5px 9px;
    border: 1px solid rgba(52,211,153,.16);
    border-radius: var(--r-full);
    background: rgba(52,211,153,.075);
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
.subscription-addon-subtotal strong {
    color: var(--brand);
    font-size: 12px;
    text-shadow: 0 0 12px rgba(52,211,153,.16);
}
#subscription-form-total-estimado {
    flex: 1;
    align-self: center;
    min-width: 250px;
    padding: 9px 13px;
    border: 1px solid rgba(52,211,153,.22);
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--brand-soft), rgba(34,211,238,.06));
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
#subscription-form-total-estimado strong {
    color: var(--brand);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

/* Form de carga de contrato (pestaña Documentación del tenant): nombre +
   archivo agrupados, vigencia desde/hasta debajo, botón al final en su
   propia fila — en vez de todo apretado en una sola línea con wrap. */
.contract-upload-form .form-field { margin-bottom: 0; }
.contract-upload-form .form-grid-2col { margin-bottom: 14px; }
.contract-upload-submit-row { display: flex; justify-content: flex-end; }

/* Input de archivo nativo restyleado para no desentonar con el resto de
   los inputs del sistema de diseño (el botón nativo del navegador se ve
   crudo al lado de inputs con bordes/radios propios). */
.contract-upload-form input[type="file"] {
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.contract-upload-form input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.contract-upload-form input[type="file"]:hover::file-selector-button {
    background: var(--bg-input);
    border-color: var(--brand-ring);
}

/* Bloque destacado "Generar documentación legal" (pestaña Documentación,
   Contratos): los botones de generación son la accion principal de la
   seccion, asi que llevan el mismo verde que el resto de las acciones
   primarias del panel, en su propia tarjeta con glow sutil. */
.legal-generate-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 4px;
    background: linear-gradient(160deg, rgba(52,211,153,.10), rgba(17,24,39,.4));
    border: 1px solid var(--brand-ring);
    border-radius: var(--r-md);
}
.legal-generate-copy strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.legal-generate-copy p { margin: 0; font-size: 12px; color: var(--text-muted); max-width: 46ch; }
.legal-generate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.legal-generate-actions .btn-confirm { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.legal-generate-actions .btn-confirm svg { width: 16px; height: 16px; }

/* Título de modal con relieve sutil, para presupuestos/facturas premium */
.modal-header-premium h2 {
    text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.4);
}

/* Toggle "Tenant existente / Prospecto nuevo" */
.target-type-toggle-group {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.target-type-toggle {
    flex: 1;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.target-type-toggle:hover:not(.active) { color: var(--text-secondary); }
.target-type-toggle.active {
    background: linear-gradient(180deg, #16a34a 0%, #087f5b 52%, #065f46 100%);
    border: 1px solid #059669;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.42), 0 0 6px rgba(0,0,0,.24);
    box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 6px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
}

/* Total del documento con más presencia visual */
.billing-totals-display b {
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.billing-totals-display div:last-child b {
    color: var(--brand);
    font-size: 17px;
    text-shadow: 0 1px 1px rgba(0,0,0,.45), 0 0 12px rgba(52,211,153,.25);
}

/* Modal "flex": header y footer fijos, solo el cuerpo hace scroll interno.
   Usado por modales altos (ej. Nuevo/Editar Plan) para que nunca se corte
   el header ni el footer con acciones. */
.modal-card-lg { width: min(760px, 96vw); }
.modal-card-flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-card-flex .modal-header { flex-shrink: 0; padding: 16px 24px; }
.modal-form-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-scroll-body .form-grid-2col { gap: 12px 18px; }
.modal-form-flex .modal-footer { flex-shrink: 0; padding: 12px 24px 16px; }

.ticket-reply-box {
    margin-top: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .74));
    border: 1px solid rgba(71, 85, 105, .58);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.18);
}
.ticket-reply-textarea {
    width: 100%;
    min-height: 76px;
    resize: vertical;
    padding: 12px;
    color: var(--text-primary);
    background: rgba(15, 23, 42, .56);
    border: 1px solid rgba(71, 85, 105, .62);
    border-radius: 12px;
    outline: none;
    line-height: 1.45;
}
.ticket-reply-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}
.ticket-reply-toolbar,
.ticket-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ticket-reply-full {
    width: 100%;
    margin-top: 4px;
}
.ticket-reply-full .ticket-reply-textarea {
    min-height: 92px;
}
.ticket-reply-full .ticket-reply-footer {
    justify-content: space-between;
}

.ticket-detail-card {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-height: min(82vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ticket-detail-card .modal-header {
    flex-shrink: 0;
    padding: 14px 24px;
}
.ticket-detail-card .modal-header h2 {
    max-width: 960px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-detail-card .modal-footer {
    flex-shrink: 0;
    padding: 12px 24px;
}
.ticket-detail-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 14px 24px 16px;
    gap: 10px;
}
.ticket-detail-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.ticket-detail-controls {
    margin-bottom: 0 !important;
    gap: 10px 14px;
}
.ticket-detail-controls label {
    gap: 5px;
}
.ticket-detail-description {
    margin-bottom: 10px;
    padding: 12px 14px;
    min-height: 46px;
    max-height: 96px;
    overflow: auto;
    scrollbar-width: none;
    color: var(--text-primary);
    background: rgba(15, 23, 42, .46);
    border: 1px solid rgba(71, 85, 105, .45);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
}
.ticket-detail-description::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.ticket-detail-section-title {
    margin: 2px 0 6px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}
.ticket-comments-list {
    margin-bottom: 10px;
    display: grid;
    gap: 8px;
}
.ticket-comment-card {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .48);
    border: 1px solid rgba(71, 85, 105, .48);
}
.ticket-comment-card.is-internal {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .62);
}
.ticket-comment-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.ticket-comment-text {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.42;
    white-space: pre-wrap;
}
.ticket-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 14px;
    align-items: start;
}
.ticket-detail-main,
.ticket-detail-side {
    min-width: 0;
}
.ticket-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 10px;
}
.ticket-detail-field {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(71, 85, 105, .42);
}
.ticket-detail-field p {
    margin: 5px 0 0;
    color: var(--text-primary);
}
.ticket-detail-field select,
.ticket-detail-field .form-control {
    width: 100%;
    margin-top: 6px;
    background-color: rgba(15, 23, 42, .62);
}
.ticket-detail-field.is-wide {
    grid-column: 1 / -1;
}
.ticket-detail-attachments {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .42);
    border: 1px solid rgba(71, 85, 105, .42);
}
.ticket-detail-attachments strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ticket-detail-attachments > div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ticket-attachments-card[hidden] { display: none; }
@media (max-width: 860px) {
    .ticket-detail-card {
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px);
    }
    .ticket-detail-grid,
    .ticket-detail-summary {
        grid-template-columns: 1fr;
    }
    .ticket-detail-card .modal-header h2 {
        white-space: normal;
    }
}

/* Ticket detail — conversación y propiedades con jerarquía de helpdesk. */
.ticket-detail-card { width: min(1240px, calc(100vw - 40px)) !important; max-height: min(88vh, 900px); border-color: var(--border-strong); background: var(--bg-card-solid); box-shadow: var(--shadow-xl); }
.ticket-detail-card .modal-header { padding: 18px 24px; background: linear-gradient(105deg, rgba(52,211,153,.10), transparent 48%), var(--bg-card-solid); }
.ticket-detail-card .modal-header h2 { font-size: 20px; }
.ticket-detail-card .modal-header > div:first-child { min-width: 0; flex: 1; }
.ticket-header-context { display: grid; gap: 7px; margin-top: 10px; }
.ticket-header-context .ticket-property-badges { margin: 0; padding: 0; border: 0; }
.ticket-header-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ticket-header-facts span { display: inline-flex; align-items: center; gap: 5px; max-width: 290px; color: var(--text-secondary); font-size: 11px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-header-facts span.is-danger { color: var(--danger); }
.ticket-header-facts svg { width: 13px; height: 13px; color: var(--brand); flex: 0 0 auto; }
.ticket-header-facts .is-danger svg { color: var(--danger); }
.ticket-detail-scroll { padding: 18px 24px 20px; background: var(--bg-sidebar); }
.ticket-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); gap: 20px; }
.ticket-detail-main { display: grid; align-content: start; gap: 14px; }
.ticket-description-card { padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card-solid); }
.ticket-section-kicker, .ticket-properties-title { display: block; margin: 0 0 7px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ticket-detail-description { min-height: 0; max-height: 160px; margin: 0; padding: 0; overflow: auto; border: 0; border-radius: 0; background: transparent; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.ticket-detail-section-title { display: flex; align-items: baseline; gap: 6px; margin: 3px 0 0; color: var(--text-primary); font-size: 13px; }
.ticket-detail-section-title span { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
.ticket-comments-list { position: relative; gap: 10px; margin: 0; padding-left: 4px; }
.ticket-comment-card { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 12px; border-color: var(--border); border-radius: var(--r-md); background: var(--bg-card-solid); }
.ticket-comment-card::before { content: ""; position: absolute; left: 18px; top: -10px; bottom: 100%; width: 1px; background: var(--border); }
.ticket-comment-card:first-child::before { display: none; }
.ticket-comment-avatar { display: grid; grid-row: span 2; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-ring); font-size: 10px; font-weight: 800; }
.ticket-comment-meta { grid-column: 2; margin: 0 0 5px; }
.ticket-comment-meta strong { color: var(--text-primary); }
.ticket-comment-text { grid-column: 2; font-size: 13px; line-height: 1.5; }
.ticket-comment-card.is-internal { border-color: color-mix(in srgb, var(--accent-violet) 45%, var(--border)); background: color-mix(in srgb, var(--accent-violet-soft) 58%, var(--bg-card-solid)); }
.ticket-comment-card.is-internal .ticket-comment-avatar { color: var(--accent-violet); border-color: color-mix(in srgb, var(--accent-violet) 45%, transparent); background: var(--accent-violet-soft); }
.ticket-comment-card.is-mine { border-color: color-mix(in srgb, var(--brand) 58%, var(--border)); background: linear-gradient(100deg, color-mix(in srgb, var(--brand-soft) 74%, var(--bg-card-solid)), var(--bg-card-solid)); box-shadow: inset 3px 0 0 var(--brand); }
.ticket-comment-card.is-mine .ticket-comment-avatar { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }
.ticket-own-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 6px; border: 1px solid var(--brand-ring); border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.ticket-event-card { display: block; margin: 2px 0; padding: 8px 12px 8px 28px; border: 0; background: transparent; color: var(--text-muted); }
.ticket-event-card::after { content: "•"; position: absolute; left: 12px; top: 7px; color: var(--brand); font-size: 17px; }
.ticket-event-card .ticket-comment-meta { display: flex; margin: 0; }
.ticket-event-card .ticket-comment-meta strong { color: var(--text-secondary); font-weight: 600; }
.ticket-properties-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card-solid); box-shadow: var(--shadow-sm); }
.ticket-property-badges { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.ticket-property-badges .pill { height: 24px; padding: 0 8px; font-size: 10px; }
.ticket-properties-title { margin-top: 16px; }
.ticket-properties-title:first-of-type { margin-top: 0; }
.ticket-detail-summary { gap: 8px; margin: 0; }
.ticket-detail-field { padding: 9px 10px; border-color: var(--border); border-radius: var(--r-sm); background: var(--bg-elevated); }
.ticket-detail-field .field-help { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ticket-detail-controls.is-locked { opacity: .52; }
.ticket-detail-controls.is-locked .ticket-detail-field { background: color-mix(in srgb, var(--bg-elevated) 76%, transparent); }
.ticket-detail-field p { overflow-wrap: anywhere; font-size: 12px; }
.ticket-detail-field select, .ticket-detail-field .form-control { min-height: 36px; margin-top: 5px; background: var(--bg-input); }
.ticket-detail-info .ticket-detail-field { min-height: 63px; }
.ticket-detail-attachments { margin: 0; border-color: var(--border); background: var(--bg-elevated); }
.ticket-reply-full { position: sticky; bottom: -20px; z-index: 2; margin-top: 18px; padding: 13px; border: 1px solid var(--brand-ring); border-radius: var(--r-md); background: var(--bg-card-solid); box-shadow: 0 -12px 24px rgba(0,0,0,.2); }
.ticket-reply-full .ticket-reply-textarea { min-height: 82px; border-color: var(--border); background: var(--bg-input); }
.ticket-reply-full .ticket-reply-footer { padding-top: 10px; border-top: 1px solid var(--border); }
.ticket-reply-locked { margin-top: 18px; padding: 15px; border: 1px solid var(--warning-soft); border-radius: var(--r-md); background: var(--warning-soft); }
@media (max-width: 860px) { .ticket-detail-scroll { padding: 14px; } .ticket-detail-grid { grid-template-columns: 1fr; } .ticket-detail-side { order: -1; } .ticket-reply-full { bottom: -14px; } .ticket-detail-summary { grid-template-columns: 1fr; } .ticket-header-facts span { max-width: 100%; } }
.ticket-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ticket-upload-btn {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 800;
    background: rgba(15, 23, 42, .62);
    border: 1px solid rgba(71, 85, 105, .68);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ticket-upload-btn:hover {
    background: rgba(30, 41, 59, .82);
    border-color: rgba(34,197,94,.55);
    transform: translateY(-1px);
}
.ticket-upload-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ticket-file-status {
    min-width: 150px;
    color: var(--text-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticket-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.ticket-note-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ticket-toggle-track {
    width: 38px;
    height: 22px;
    position: relative;
    flex: 0 0 auto;
    background: rgba(15, 23, 42, .78);
    border: 1px solid rgba(71, 85, 105, .7);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease;
}
.ticket-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    transition: transform .18s ease, background .18s ease;
}
.ticket-note-toggle input:checked + .ticket-toggle-track {
    background: rgba(245, 158, 11, .18);
    border-color: rgba(245, 158, 11, .72);
}
.ticket-note-toggle input:checked + .ticket-toggle-track::after {
    transform: translateX(16px);
    background: #f59e0b;
}

.plan-inline-toggle { padding: 0 12px; height: 42px; align-self: end; }

.plan-form-modules-section { display: flex; flex-direction: column; gap: 6px; }
.plan-form-modules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.plan-form-modules-head label { margin: 0; }
.plan-modules-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.link-btn:hover { text-decoration: underline; }

/* ============================================================
   LOGIN — Pantalla de acceso (tarjeta centrada, estética ERP)
   ============================================================ */
.login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}

.login-shell {
    width: min(420px, 100%);
    padding: 36px 36px 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    background: rgba(17, 24, 39, .78);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: var(--shadow-xl);
    animation: view-in .32s var(--ease-out);
}

.login-brand-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 28px;
}

.brand-icon-lg { margin-bottom: 6px; }

.login-brand-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.login-brand-title-row h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1;
    color: var(--brand);
}

.login-subtitle {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.login-shell .login-form { gap: 16px; }

.input-control {
    position: relative;
    display: flex;
    align-items: center;
}
.input-control input { padding-right: 42px; }

.input-toggle {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
    transition: all .15s ease;
}
.input-toggle svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 3px rgba(52,211,153,.35));
}
.input-toggle:hover {
    color: var(--brand);
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 8px rgba(52, 211, 153, .25);
}

.login-shell .btn-primary {
    width: 100%;
    height: 44px;
    margin-top: 4px;
}

/* Indicador de estado del entorno — compacto y prolijo */
.login-status-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    margin-top: -4px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.login-status-pill.ok { color: var(--success); border-color: var(--brand-ring); background: var(--brand-soft); }
.login-status-pill.ok .status-dot { background: var(--success); box-shadow: 0 0 8px var(--success); }
.login-status-pill.offline { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.login-status-pill.offline .status-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.login-status-pill .status-dot { flex-shrink: 0; }

/* Mientras no hay sesión: ocultar navegación/topbar para una pantalla de login limpia */
body.is-logged-out .rail,
body.is-logged-out .topbar {
    display: none;
}
body.is-logged-out .app-shell {
    display: block;
}
body.is-logged-out .workspace {
    padding: 0;
}

.dashboard, .tab-view {
    display: grid;
    gap: 20px;
    min-height: 540px;
    contain: layout;
}
.tab-view[hidden], [hidden] { display: none !important; }
.tab-view.active { animation: view-in .32s var(--ease-out); }
@keyframes view-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.stats-grid article {
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease;
}
.stats-grid article::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand), transparent);
    opacity: 0;
    transition: opacity .18s ease;
}
.stats-grid article:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}
.stats-grid article:hover::before { opacity: 1; }
.stats-grid span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.stats-grid strong {
    display: block;
    margin-top: 6px;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* KPI CARDS — icono + valor + micro-indicador */
.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.kpi-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.kpi-icon svg { width: 19px; height: 19px; }
.kpi-icon-slate   { color: var(--text-secondary); background: rgba(148,163,184,.10); }
.kpi-icon-emerald { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-ring); }
.kpi-icon-rose    { color: var(--danger); background: var(--danger-soft); border-color: rgba(251,113,133,.25); }
.kpi-icon-cyan    { color: var(--accent-cyan); background: var(--accent-cyan-soft); border-color: rgba(34,211,238,.25); }
.kpi-icon-warning { color: var(--warning); background: var(--warning-soft); border-color: rgba(251,191,36,.25); }

.kpi-body { flex: 1; min-width: 0; }
.kpi-sub {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.kpi-bar {
    margin-top: 8px;
    width: 100%;
    height: 4px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.06);
    overflow: hidden;
}
.kpi-bar-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand-hover), var(--brand));
    transition: width .5s var(--ease-out);
}
.kpi-bar-fill.danger { background: linear-gradient(90deg, var(--danger-hover), var(--danger)); }

.toolbar, .audit-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar input, .audit-toolbar input, .toolbar select, .audit-toolbar select,
.toolbar .cselect, .audit-toolbar .cselect {
    flex: 1;
    min-width: 160px;
}

/* CAMPO DE BÚSQUEDA — lupa integrada + botón limpiar */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 2;
    min-width: 240px;
}
.search-field input {
    padding-left: 40px;
    padding-right: 36px;
}
.search-icon {
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    color: var(--brand);
    opacity: .75;
    pointer-events: none;
    transition: all .15s ease;
    filter: drop-shadow(0 0 3px rgba(52,211,153,.25));
}
.search-field:focus-within .search-icon {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(52,211,153,.45));
}
.search-clear {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
    transition: all .15s ease;
}
.search-clear svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 3px rgba(52,211,153,.35));
}
.search-clear:hover {
    color: var(--brand);
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 10px rgba(52, 211, 153, .25);
    transform: scale(1.05);
}

/* BOTÓN PRIMARIO DESTACADO — Nuevo tenant */
.btn-new-tenant {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 60%, #0d9488 130%);
    box-shadow: 0 2px 10px rgba(52,211,153,.28), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-new-tenant:hover:not(:disabled) {
    box-shadow: 0 6px 24px rgba(52,211,153,.42), inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(-1px);
}

.toolbar-inline-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Catálogo de API pública */
.client-apis-table .client-api-route,
.client-apis-table .api-method {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
}
.client-apis-table .client-api-route {
    color: var(--text-primary);
    white-space: nowrap;
}
.api-method {
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 4px 6px;
    border: 1px solid var(--brand-ring);
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--brand-soft);
}
.api-method-post {
    color: #60a5fa;
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .3);
}

.filters-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.filters-badge strong { color: var(--brand); font-variant-numeric: tabular-nums; }

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.panel-head span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.panel-head span.panel-head-count,
.panel-head h3 .panel-head-count {
    color: var(--brand);
    font-size: 0.9em;
    font-weight: 700;
    text-transform: none;
    margin-left: 6px;
    display: inline-block;
}

.panel-body { padding: 18px; }

.tenant-list {
    min-height: 200px;
}

/* Compatibilidad para otras vistas que todavía usan tablas de tenants. */
.tenants-table .tenant-row-name { display: flex; flex-direction: column; gap: 2px; }
.tenants-table .tenant-row-name small { color: var(--text-muted); font-size: 11px; }
.tenants-table tr.tenant-row.active { background: rgba(52, 211, 153, .06); }
.tenants-table tr.tenant-row.active td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tenants-table td.mini-stat-overcap { color: var(--danger); font-weight: 700; white-space: nowrap; }
.tenants-table td.mini-stat-overcap svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Grupo de botones de accion al final de una fila de tabla — reutilizado
   por la tabla de tenants, contratos, conceptos, presupuestos y facturas.
   display: inline-flex con flex-wrap: nowrap asegura que los botones
   queden horizontalmente uno al lado del otro, nunca uno encima de otro. */
.row-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap !important;
    min-width: max-content;
}
.row-actions .btn-danger-ghost.btn-xs { opacity: .85; }
.row-actions .btn-danger-ghost.btn-xs:hover { opacity: 1; }

.audit-table td:last-child,
.audit-table th:last-child,
.tenants-table td:last-child,
.tenants-table th:last-child {
    white-space: nowrap !important;
    width: 1%;
    text-align: right;
}

.audit-table td.cell-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tenant-card {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 16px 16px 14px 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: inherit;
    text-align: left;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 48%, transparent), transparent 46%), var(--bg-card-solid);
    overflow: hidden;
    transition: transform .16s var(--ease-out), border-color .16s ease, background .16s ease, box-shadow .16s ease;
    animation: card-in .28s var(--ease-out) backwards;
}
.tenant-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand);
    opacity: .72;
    transition: opacity .16s ease;
}
.tenant-card:hover {
    border-color: var(--border-strong);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 58%, transparent), transparent 46%), var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.tenant-card.active {
    border-color: var(--brand);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 62%, transparent), transparent 46%), var(--bg-card-hover);
    box-shadow: var(--shadow-glow);
}
.tenant-card.active::before { opacity: 1; }
.tenant-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    max-width: 1120px;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* SKELETON LOADING (shimmer) */
.skeleton-card, .skeleton-line {
    position: relative;
    overflow: hidden;
    background: var(--bg-input);
    border-radius: var(--r-sm);
}
.skeleton-card {
    height: 92px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.skeleton-line { height: 12px; }
.skeleton-card::after, .skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.skeleton-stack { padding: 0; }
.tenant-grid .skeleton-card { height: 170px; animation: card-in .28s var(--ease-out) backwards; }

.tenant-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}
.tenant-identity { display: flex; align-items: center; min-width: 0; gap: 10px; }
.tenant-identity > div { min-width: 0; }
.tenant-monogram { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; }
.tenant-monogram-image { padding: 7px; object-fit: contain; }
.tenant-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-pills { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; max-width: 45%; }
.tenant-pills .pill { white-space: nowrap; }
.tenant-card strong { font-size: 14px; color: var(--text-primary); }
.tenant-card small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12px; }

.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.mini-grid div {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-sidebar);
}
.mini-grid span, .metric span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.mini-grid b, .metric b {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.mini-grid b svg { width: 11px; height: 11px; vertical-align: -1px; margin-left: 1px; }

/* ALERTA DE SOBRECUPO — usuarios_count > limite_usuarios */
.mini-stat-overcap {
    border-color: rgba(251,113,133,.35) !important;
    background: var(--danger-soft) !important;
}
.mini-stat-overcap span { color: var(--danger) !important; opacity: .9; }
.mini-stat-overcap b { color: var(--danger) !important; }
.mini-stat-overcap b svg { color: var(--danger); }

.overcap-tag {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--r-full);
    background: var(--danger-soft);
    border: 1px solid rgba(251,113,133,.3);
    color: var(--danger);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.overcap-tag svg { width: 12px; height: 12px; }
.tenant-card .row-actions { padding-top: 2px; border-top: 1px solid var(--border); }

/* Vista dedicada: una URL por tenant, sin tablero, filtros ni contenido ajeno. */
body.tenant-focus .rail { display: none; }
body.tenant-focus .app-shell { grid-template-columns: minmax(0, 1fr); }
body.tenant-focus #view-tenants > .hero,
body.tenant-focus #view-tenants > .stats-grid,
body.tenant-focus #view-tenants > .toolbar,
body.tenant-focus .tenant-list-panel,
body.tenant-focus .prospect-quotes-panel { display: none; }
body.tenant-focus .content-grid { display: block; }
body.tenant-focus .detail-panel {
    max-width: 1600px;
    min-height: 0;
    margin: 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.tenant-focus .detail-body { padding: 0; gap: 22px; }
body.tenant-focus #btn-back-tenants,
body.tenant-focus #btn-refresh,
body.tenant-focus #btn-new-superadmin { display: none !important; }
body.tenant-focus .topbar { margin-bottom: 18px; }
body.tenant-focus .topbar-actions { margin-left: auto; }
.tenant-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.tenant-page-breadcrumb::before { content: "Cuentas"; color: var(--text-secondary); }
.tenant-page-breadcrumb .btn-secondary {
    height: 36px;
    padding: 0 13px;
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.tenant-page-breadcrumb .btn-secondary svg { width: 15px; }
body.tenant-focus .detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, .9fr);
    gap: 28px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(52,211,153,.23);
    border-radius: 20px;
    background:
        radial-gradient(580px 260px at 100% 0%, rgba(52,211,153,.18), transparent 65%),
        linear-gradient(135deg, rgba(15,70,65,.78), rgba(15,23,42,.96) 60%);
    box-shadow: 0 20px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
body.tenant-focus .detail-hero::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(52,211,153,.14);
    border-radius: 50%;
    pointer-events: none;
}
.tenant-page-identity { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.tenant-page-monogram {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border: 1px solid rgba(110,231,183,.42);
    border-radius: 17px;
    color: #d1fae5;
    background: linear-gradient(145deg, rgba(52,211,153,.34), rgba(6,95,70,.4));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.18);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.04em;
}
.tenant-page-copy { min-width: 0; }
.tenant-page-copy .eyebrow { margin: 1px 0 6px; }
.tenant-page-copy h2 { margin-bottom: 7px; font-size: 28px; }
.tenant-page-meta { margin: 0; color: #a7bcc5; font-size: 13px; }
.tenant-page-meta code { color: var(--brand); }
.tenant-page-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.tenant-page-status .pill { background: rgba(4, 28, 30, .42); }
body.tenant-focus .detail-actions { position: relative; z-index: 1; display: grid; align-content: start; gap: 12px; }
.detail-action-primary, .detail-action-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.detail-action-primary .btn-secondary { flex: 1 1 132px; }
.detail-action-primary { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.detail-action-primary .btn-secondary:first-child { color: #052e26; background: var(--brand); border-color: var(--brand); }
.detail-action-primary .btn-secondary:first-child svg { color: #052e26; filter: none; }
.detail-action-controls { align-items: center; }
.detail-action-controls select { min-width: 150px; flex: 1 1 150px; }
body.tenant-focus .detail-tabs {
    width: 100%;
    padding: 5px;
    border-radius: 14px;
    background: rgba(12,18,31,.72);
}
body.tenant-focus .detail-tab { flex: 1 1 0; justify-content: center; padding: 10px 12px; }
body.tenant-focus .detail-tab.active { box-shadow: 0 6px 16px rgba(52,211,153,.22); }
body.tenant-focus .plan-summary-panel { overflow: hidden; border-radius: 16px; box-shadow: none; }
body.tenant-focus .plan-summary-panel .panel-head { padding: 17px 20px; background: linear-gradient(90deg, rgba(52,211,153,.08), transparent 45%); }
body.tenant-focus .plan-summary-panel .detail-body { padding: 18px 20px 20px; }
body.tenant-focus .capacity-row-label { font-size: 13px; margin-bottom: 11px; }
body.tenant-focus .metrics { gap: 12px; }
body.tenant-focus .metric {
    min-height: 94px;
    padding: 16px;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(22,30,48,.96), rgba(14,20,33,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body.tenant-focus .metric b { margin-top: 8px; font-size: 16px; }

/* Documentación: las acciones son botones legibles y las tarjetas vacías no
   fuerzan alturas artificiales ni separan el texto de su acción. */
body.tenant-focus .tenant-docs-overview { border-radius: 16px; box-shadow: none; }
body.tenant-focus .tenant-docs-overview > .panel-head { padding: 18px 20px; }
body.tenant-focus .tenant-docs-overview > .detail-body { padding: 0 20px 20px; gap: 14px; }
body.tenant-focus .tenant-docs-grid { gap: 14px; align-items: stretch; }
body.tenant-focus .commercial-contract-overview .tenant-docs-grid,
body.tenant-focus .tenant-docs-overview:not(.commercial-contract-overview) .tenant-docs-grid:has(.tenant-docs-card:only-child) { grid-template-columns: 1fr; }
body.tenant-focus .tenant-docs-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    border-style: solid !important;
    border-color: rgba(148,163,184,.18);
    background: linear-gradient(145deg, rgba(19,29,48,.82), rgba(13,20,34,.82));
}
body.tenant-focus .tenant-docs-card .panel-head { padding: 15px 16px; }
body.tenant-focus .tenant-docs-card-body {
    display: flex;
    flex: 1;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px !important;
}
body.tenant-focus .tenant-docs-card-body p { margin: 0 !important; max-width: 68ch; }
body.tenant-focus .tenant-docs-card-body .field-help { font-size: 12px; line-height: 1.45; }
body.tenant-focus .tenant-docs-overview .btn-xs,
body.tenant-focus .tenant-docs-overview .doc-inline-action {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content;
    height: 32px;
    padding: 0 11px !important;
    white-space: nowrap;
}
body.tenant-focus .tenant-docs-overview .btn-xs svg { width: 14px; height: 14px; }
body.tenant-focus .tenant-docs-overview .doc-section-actions { justify-content: flex-start; }
body.tenant-focus .commercial-legal-actions {
    justify-content: flex-end;
    min-height: 72px;
    padding: 16px 18px;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(52,211,153,.09), rgba(15,23,42,.78) 52%);
}
body.tenant-focus .commercial-legal-actions .legal-generate-actions { margin-left: auto; }
body.tenant-focus .commercial-contract-overview { overflow: hidden; }
body.tenant-focus .commercial-contract-overview .tenant-docs-card { min-height: 0; }
body.tenant-focus .commercial-contract-overview > .detail-body { gap: 0; }
body.tenant-focus .commercial-contract-overview .commercial-legal-actions {
    min-height: 0;
    margin-top: 14px;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}
body.tenant-focus .billing-quick-actions { padding: 14px 18px; }
body.tenant-focus .billing-quick-actions .legal-generate-actions { gap: 7px; }
body.tenant-focus .billing-quick-actions .btn-nuevo,
body.tenant-focus .billing-quick-actions .btn-secondary.btn-xs {
    height: 34px;
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: .02em;
}
body.tenant-focus .billing-quick-actions .btn-secondary.btn-xs { color: var(--brand); }

@media (max-width: 900px) {
    body.tenant-focus .detail-hero { grid-template-columns: 1fr; }
    .detail-action-primary, .detail-action-controls { justify-content: flex-start; }
}

.profile-modal-card { width: min(700px, 96vw) !important; }
.profile-body { display: grid; gap: 22px; }
.profile-photo-section { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-sidebar); }
.profile-avatar-preview { width: 76px; height: 76px; border-radius: 50%; font-size: 22px; border: 2px solid var(--brand-ring); }
.profile-upload-button { display: inline-flex; margin-top: 5px; cursor: pointer; }
.profile-password-section { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.profile-password-section .eyebrow { margin-bottom: 2px; }
.profile-password-section h3 { font-size: 15px; }

@media (max-width: 620px) {
    .profile-trigger-name { display: none; }
    .profile-trigger { padding-right: 5px; }
    .tenant-grid { grid-template-columns: 1fr; }
    .profile-photo-section { align-items: flex-start; }
}

.detail-panel { min-height: 560px; contain: layout; scroll-margin-top: 20px; }
.detail-panel[hidden] { display: none; }
.tenant-list-panel { contain: layout; }

.empty-state {
    display: grid;
    place-items: center;
    min-height: 440px;
    padding: 24px;
    text-align: center;
}
.empty-icon-svg {
    width: 48px;
    height: 48px;
    color: var(--brand);
    opacity: .8;
}

/* EMPTY STATE PREMIUM — glow ambiental */
.empty-state-premium {
    position: relative;
    gap: 6px;
    overflow: hidden;
}
.empty-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -60%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow), transparent 70%);
    filter: blur(50px);
    opacity: .35;
    pointer-events: none;
}
.empty-icon-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 6px;
    border-radius: var(--r-xl);
    background: linear-gradient(160deg, rgba(52,211,153,.14), rgba(52,211,153,.03));
    border: 1px solid var(--brand-ring);
    box-shadow: 0 0 40px rgba(52,211,153,.15);
}
.empty-icon-wrap svg { width: 32px; height: 32px; color: var(--brand); }
.empty-state-premium h3 { position: relative; font-size: 18px; }
.empty-state-premium p { position: relative; max-width: 320px; }

/* PESTAÑAS DEL PANEL DE DETALLE */
.detail-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: rgba(0,0,0,.18);
    width: fit-content;
}
.detail-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 700;
    transition: all .16s var(--ease-out);
}
.detail-tab:hover { color: var(--text-primary); }
.detail-tab.active {
    color: #06251c;
    background: var(--brand);
    box-shadow: 0 2px 8px rgba(52,211,153,.3);
}
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.12);
    font-size: 10px;
    font-weight: 800;
    font-family: var(--font-mono);
}
.detail-tab.active .tab-count { background: rgba(6,37,28,.18); }

.detail-tab-panel { display: grid; gap: 16px; animation: view-in .22s var(--ease-out); }

.plan-summary-panel .panel-head span { color: var(--brand); background: var(--brand-soft); padding: 3px 10px; border-radius: var(--r-full); border: 1px solid var(--brand-ring); }
.capacity-row-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 6px;
}
.capacity-row-label b { font-family: var(--font-mono); color: var(--text-primary); }
.text-danger { color: var(--danger) !important; }
.capacity-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    border: 1px solid rgba(251,113,133,.3);
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.capacity-warning svg { width: 16px; height: 16px; flex-shrink: 0; }

.detail-body { display: grid; gap: 16px; padding: 18px; }

.detail-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}

.detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.metric {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.module-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}
.module-toggle:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }

.switch {
    width: 44px;
    height: 24px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--bg-input);
    padding: 2px;
}
.switch::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .18s ease, background .18s ease;
}
.switch.on {
    background: var(--brand-soft);
    border-color: var(--brand);
}
.switch.on::after {
    transform: translateX(20px);
    background: var(--brand);
}

.users-list { display: grid; gap: 8px; }
.users-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-card);
}

.user-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-xs {
    height: 28px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: var(--r-sm);
    font-weight: 700;
}

/* VISTA DE PLANES */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card.featured {
    border-color: rgba(52, 211, 153, .45);
    box-shadow: 0 12px 40px rgba(52, 211, 153, .16), inset 0 1px 0 rgba(255,255,255,.04);
}
.plan-card.featured::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 160px;
    background: radial-gradient(closest-side, rgba(52, 211, 153, .30), transparent 70%);
    pointer-events: none;
}
.plan-card-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    padding: 4px 12px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: #052e21;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(52, 211, 153, .35);
}
.plan-card-header h3 { font-size: 19px; font-weight: 800; }
.plan-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.plan-users-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 12px;
    border-radius: var(--r-full);
    border: 1px solid rgba(52, 211, 153, .3);
    background: rgba(52, 211, 153, .08);
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 700;
}
.plan-price { font-size: 26px; font-weight: 800; color: var(--brand); margin-top: 8px; }
.plan-price span { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.plan-features { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 9px; font-size: 13px; position: relative; z-index: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; }
.plan-features li svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }

.plan-tenant-count {
    padding: 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-sidebar);
    text-align: center;
    position: relative;
    z-index: 1;
}
.plan-tenant-count strong { color: var(--brand); font-size: 16px; }

.plan-edit-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 30px;
    height: 30px;
}
.plan-modules-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.plan-module-chip {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    background: var(--bg-sidebar);
    color: var(--text-muted);
}
.matrix-yes { color: var(--brand); display: inline-flex; }
.matrix-yes svg { width: 15px; height: 15px; }
.matrix-no { color: var(--text-muted); }

.plans-matrix-table-wrapper { overflow-x: auto; }
.matrix-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.matrix-table th, .matrix-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.matrix-table th { color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }

/* VISTA AUDITORÍA MYSQL */
.audit-table-wrapper {
    overflow-x: auto;
    max-height: calc(100vh - 360px);
}
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}
.audit-table th, .audit-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.audit-table th {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    background: var(--bg-card);
    position: sticky;
    top: 0;
    z-index: 10;
}
.billing-job-status {
    display: grid;
    grid-template-columns: minmax(175px, 1.1fr) repeat(3, minmax(130px, 1fr));
    gap: 1px;
    margin: 4px 4px 16px;
    border: 1px solid rgba(91, 112, 146, .34);
    background: rgba(91, 112, 146, .25);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .14);
}
.billing-job-status-item {
    min-width: 0;
    min-height: 76px;
    padding: 15px 17px 14px;
    background: rgba(15, 25, 44, .78);
}
.billing-job-status-item:first-child {
    background: rgba(24, 80, 74, .34);
    box-shadow: inset 3px 0 0 var(--brand);
}
.billing-job-status-item > span {
    display: block;
    margin-bottom: 8px;
    color: #7e8da8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.billing-job-status-item strong {
    display: block;
    color: #e7edf7;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.billing-job-status-item .pill {
    display: inline-flex;
    width: auto;
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: .035em;
    vertical-align: middle;
}
.billing-job-status-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 17px;
    border-top: 1px solid rgba(91, 112, 146, .22);
    background: rgba(9, 17, 31, .64);
    color: #aab6ca;
    font-size: 12.5px;
    font-weight: 500;
}
.billing-job-status-note.warning { color: #ff7b94; }
.billing-job-loading { padding: 12px 14px; color: var(--text-muted); font-size: 12px; }
@media (max-width: 900px) {
    .billing-job-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .billing-job-status { grid-template-columns: 1fr; }
    .billing-job-status-item { min-height: 0; }
}
.billing-tenant-group-row td {
    padding: 0 !important;
    background: rgba(52, 211, 153, .08);
    border-top: 1px solid rgba(52, 211, 153, .22);
    border-bottom-color: rgba(52, 211, 153, .18);
}
.billing-tenant-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 14px;
    border-left: 4px solid var(--brand);
}
.billing-tenant-group strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
}
.billing-tenant-group span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
}
.audit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-full);
    font-size: 10px;
    font-weight: 800;
}
.audit-badge.success { background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-ring); }
.audit-badge.error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-soft); }
.audit-badge.env { background: var(--info-soft); color: var(--info); border: 1px solid var(--info-soft); }

.detail-json-code {
    display: block;
    max-width: 320px;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-input);
    padding: 6px 8px;
    border-radius: var(--r-sm);
}

/* MODALES OFICIALES ERP */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--overlay-backdrop);
    backdrop-filter: blur(6px);
}
.modal[hidden], [hidden] { display: none !important; }

/* #confirm-modal y #prompt-modal son diálogos "utilitarios" que se disparan
   con frecuencia DESDE otro modal ya abierto (ej. "Enviar Email" en el
   detalle de un presupuesto). Como .modal usa z-index fijo, el que queda
   arriba depende del orden en el DOM, no de cuál se abrió último — eso hacía
   que el diálogo de confirmación/input quedara tapado detrás del modal que
   lo disparó. Se les da un z-index mayor para que siempre queden arriba. */
#confirm-modal, #prompt-modal { z-index: 10001; }

.modal {
    animation: overlay-in .18s ease-out;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
    width: min(720px, 96vw);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    background: rgba(17, 24, 39, .88);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow: var(--shadow-xl);
    animation: modal-in .24s var(--ease-spring);
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card.modal-sm { width: min(440px, 96vw); }
.modal-card.modal-card-lg { width: min(1040px, 95vw); }

.modal-card-flex {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    overflow: hidden;
}
.modal-form-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.modal-card-flex .modal-scroll-body,
.modal-form-flex .modal-scroll-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.modal-card.modal-danger .modal-header { border-bottom-color: var(--danger-soft); }
.modal-card.modal-danger .eyebrow { color: var(--danger); }

/* El ícono y el mensaje van en fila, no apilados — apilados el ícono queda
   flotando solo arriba con un montón de aire vacío al lado (el modal es
   angosto, el ícono chico), en vez de leerse como una sola unidad. */
#confirm-modal .modal-body {
    display: flex;
    align-items: center;
    gap: 14px;
}
#confirm-modal-message { margin: 0; }
.confirm-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-md);
}
.confirm-icon.danger { color: var(--danger); background: var(--danger-soft); }
.confirm-icon.info { color: var(--info); background: var(--info-soft); }
.confirm-icon svg { width: 22px; height: 22px; }

/* VALIDACIÓN DE FORMULARIOS */
input.invalid, select.invalid, .dp-input.invalid {
    border-color: var(--danger) !important;
    animation: field-shake .3s ease;
}
.field-error {
    color: var(--danger);
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 2px;
}
@keyframes field-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-body { padding: 20px 24px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
}

.icon-button {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
    font-size: 20px;
    display: grid;
    place-items: center;
    transition: all .15s ease;
}
.icon-button svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 3px rgba(52,211,153,.35));
}
.icon-button:hover {
    color: var(--brand);
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 12px rgba(52, 211, 153, .25);
    transform: scale(1.05);
}
/* "Editar plan" es una acción con más peso que un simple cerrar */
.plan-edit-btn {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand-ring);
}
.plan-edit-btn:hover {
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 14px rgba(52, 211, 153, .3);
    transform: scale(1.08);
}

/* TOAST CONTAINER OFICIAL ERP */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 340px;
    max-width: 84vw;
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: toast-in .28s var(--ease-spring) forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}
.toast-icon svg { width: 100%; height: 100%; }
.toast-msg { flex: 1; line-height: 1.4; word-break: break-word; }
.toast-close {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    display: grid;
    place-items: center;
}
.toast-close:hover { color: var(--text-primary); }
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: .5;
    transform-origin: left;
    animation: toast-progress linear forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px) scale(.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateX(24px) scale(.94); }
}

@keyframes toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.toast.success, .toast.ok { border-color: var(--brand); background: var(--bg-card); color: var(--brand); }
.toast.error { border-color: var(--danger); background: var(--bg-card); color: var(--danger); }
.toast.info { border-color: var(--info); background: var(--bg-card); color: var(--info); }
.toast .toast-msg { color: var(--text-primary); }

/* COPY BUTTON */
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid var(--brand-ring);
    transition: all .15s ease;
}
.copy-btn svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 0 3px rgba(52,211,153,.35));
}
.copy-btn:hover {
    color: var(--brand);
    background: rgba(52, 211, 153, .22);
    border-color: var(--brand);
    box-shadow: 0 0 10px rgba(52, 211, 153, .25);
    transform: scale(1.06);
}
.copy-btn.copied {
    color: var(--success);
    background: rgba(52, 211, 153, .28);
    border-color: var(--brand);
    box-shadow: 0 0 10px rgba(52, 211, 153, .35);
}
.copy-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   CUSTOM SELECT (cselect) — adaptado de finanzapperp/form-components.css
   ============================================================ */
.cselect { position: relative; display: block; width: 100%; }

.cselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    outline: none;
}
.cselect.is-disabled .cselect-trigger { opacity: .55; cursor: not-allowed; }
.cselect-trigger:hover { border-color: var(--border-strong); background: var(--bg-input-focus); }
.cselect-trigger:focus,
.cselect.open .cselect-trigger {
    border-color: var(--brand);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.cselect-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-value.placeholder { color: var(--text-muted); font-weight: 500; }

.cselect-chevron {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s var(--ease-spring), stroke .15s ease;
    pointer-events: none;
}
.cselect.open .cselect-chevron { transform: rotate(180deg); stroke: var(--brand); }

.cselect-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 5000;
    background: rgba(20,26,40,.9);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: 0 22px 56px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08) inset;
    overflow: hidden;
    padding: 6px;
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .18s var(--ease-out), transform .22s var(--ease-spring);
}
.cselect.open .cselect-panel,
.cselect-panel--open {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cselect-panel[style*="fixed"] { z-index: 10500 !important; }

.cselect-list {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    padding: 0;
}
.cselect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .14s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cselect-item:last-child { margin-bottom: 0; }
.cselect-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.cselect-item.selected {
    background: linear-gradient(90deg, var(--brand-soft), transparent);
    color: var(--brand);
    font-weight: 700;
}
.cselect-item.selected::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border-right: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: rotate(45deg) translateY(-2px);
    margin-left: auto;
    flex-shrink: 0;
}
.cselect-item.hidden { display: none !important; }
.cselect-empty { padding: 16px 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Combos compactos (topbar / toolbar) heredan el mismo trigger con menor altura */
.env-select.cselect .cselect-trigger,
.filter-active.cselect .cselect-trigger,
.sort-tenants.cselect .cselect-trigger { height: 38px; font-size: 12px; }

@media (max-width: 1080px) {
    .app-shell { grid-template-columns: 1fr; }
    .rail { position: relative; height: auto; }
    .content-grid, .plans-grid { grid-template-columns: 1fr; }
    .stats-grid.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-field { flex-basis: 100%; }
    .subscription-addons-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .workspace { padding: 16px; }
    .topbar, .hero, .detail-hero { flex-direction: column; align-items: flex-start; }
    .stats-grid, .toolbar, .audit-toolbar, .metrics, .form-grid { grid-template-columns: 1fr; }
    .detail-actions { width: 100%; justify-content: flex-start; }
    .detail-tabs { width: 100%; overflow-x: auto; }
    .login-shell { padding: 28px 22px; }
    .subscription-addon-row {
        grid-template-columns: 1fr;
    }
    .subscription-addon-controls,
    .subscription-addon-controls-3,
    .subscription-addon-controls-custom {
        grid-template-columns: 1fr;
    }
    #subscription-form-total-estimado {
        flex-basis: 100%;
        width: 100%;
    }
    .subscription-next-invoice-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .subscription-next-invoice-card span {
        text-align: left;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================================
   FACTURACIÓN SAAS "FinanzApp -> Tenant" — módulo de billing
   comercial hacia tenants (separado de la facturación operativa
   que cada tenant usa puertas adentro del ERP).
   ============================================================ */

.billing-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 22px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(148, 163, 184, .06) 0%, rgba(148, 163, 184, .02) 100%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.billing-subtab {
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md, 10px);
    background: rgba(15, 23, 42, .55);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    position: relative;
    transition: all .18s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset;
}
.billing-subtab:hover {
    color: var(--text-primary);
    background: rgba(30, 41, 59, .8);
    border-color: rgba(148, 163, 184, .2);
    transform: translateY(-1px);
}
.billing-subtab.active {
    color: #0f172a;
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    border-color: rgba(52, 211, 153, .6);
    box-shadow:
        0 4px 12px -2px rgba(52, 211, 153, .45),
        0 2px 4px -1px rgba(52, 211, 153, .3),
        inset 0 1px 0 rgba(255, 255, 255, .3);
    font-weight: 700;
}
.billing-subtab.active:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px -2px rgba(52, 211, 153, .55),
        0 2px 6px -1px rgba(52, 211, 153, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35);
}
.billing-subtab:focus-visible {
    outline: 2px solid var(--brand, #34d399);
    outline-offset: 2px;
}

.billing-subview[hidden] { display: none; }
.billing-subview {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 480px;
    contain: layout;
}

.billing-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}
.doc-card-actions,
.doc-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.doc-card-actions { margin-top: 14px; }
.doc-section-actions { margin-top: 16px; }
.doc-card-actions > button,
.doc-section-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* :only-child no cuenta nodos de texto: la regla global de icon-only también
   alcanzaba botones con icono + etiqueta y comprimía su ancho a 28px. */
.doc-card-actions > .btn-secondary.btn-xs,
.doc-card-actions > .btn-confirm.btn-xs,
.doc-card-actions > .btn-danger-ghost.btn-xs,
.doc-section-actions > .btn-secondary.btn-xs,
.doc-section-actions > .btn-confirm.btn-xs,
.doc-section-actions > .btn-danger-ghost.btn-xs {
    display: inline-flex;
    width: auto;
    padding: 0 10px;
}

/* Editor de items dinámicos (presupuestos / facturas) */
.billing-items-editor {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}
.billing-items-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.billing-items-editor-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.billing-items-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    padding-bottom: 4px;
}
.billing-items-head, .billing-item-row {
    display: grid;
    grid-template-columns: minmax(180px, 2.2fr) minmax(160px, 1.8fr) minmax(80px, 0.8fr) minmax(130px, 1.3fr) minmax(80px, 0.8fr) minmax(130px, 1.3fr) 36px;
    gap: 10px;
    align-items: center;
    min-width: 800px;
}
.billing-items-head {
    padding: 0 4px 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.billing-items-head span:nth-child(3),
.billing-items-head span:nth-child(4),
.billing-items-head span:nth-child(5),
.billing-items-head span:nth-child(6) {
    text-align: right;
}
.billing-items-rows { display: flex; flex-direction: column; gap: 10px; }
.billing-item-row input, .billing-item-row select {
    height: 40px;
    padding: 0 12px;
    font-size: 13.5px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-primary);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.billing-item-row input:focus, .billing-item-row select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.billing-item-row input[type="number"],
.billing-item-cantidad,
.billing-item-precio,
.billing-item-descuento {
    text-align: right;
}
.billing-item-subtotal {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    text-align: right;
    padding-right: 6px;
    font-weight: 700;
    white-space: nowrap;
}
.billing-item-remove {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid rgba(251,113,133,.25);
    display: grid;
    place-items: center;
    transition: all .15s ease;
}
.billing-item-remove svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 0 3px rgba(251,113,133,.35));
}
.billing-item-remove:hover {
    color: var(--danger);
    background: rgba(251, 113, 133, .25);
    border-color: var(--danger);
    box-shadow: 0 0 10px rgba(251,113,133,.25);
}

.billing-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.billing-totals-row label { max-width: 260px; }
.billing-totals-display {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.billing-totals-display div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.billing-totals-display span {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.billing-totals-display b {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--text-primary);
}

/* Detalle de factura: superficie de comprobante, con identidad comercial y
   resumen financiero separado de la información operativa. */
#invoice-detail-printable {
    border-color: rgba(94, 117, 153, .5);
    background: #0d1628;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .52);
}
#invoice-detail-printable .modal-header {
    padding: 18px 22px;
    border-bottom-color: rgba(101, 122, 156, .28);
    background: #101b2f;
}
#invoice-detail-printable .modal-header h2 { font-size: 21px; }
#invoice-detail-printable .modal-scroll-body { padding: 18px 22px 22px; gap: 16px; }
.invoice-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(235px, .42fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(95, 118, 154, .34);
    border-radius: 8px;
    background: rgba(95, 118, 154, .25);
    flex: 0 0 auto;
}
.invoice-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(95, 118, 154, .25);
}
.invoice-meta-item {
    display: flex;
    min-width: 0;
    min-height: 78px;
    padding: 14px 16px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: #101a2c;
}
.invoice-meta-item span,
.invoice-total-card > span,
.invoice-section-head span,
.invoice-financial-grid span {
    color: #7f90ab;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.invoice-meta-item strong { color: #e8eef8; font-size: 13px; line-height: 1.35; }
.invoice-meta-item small { color: var(--text-muted); font-size: 11px; }
.invoice-meta-tenant { box-shadow: inset 3px 0 0 var(--brand); }
.invoice-total-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 18px 20px;
    background: #123133;
}
.invoice-total-card strong {
    margin: 8px 0 5px;
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 24px;
    line-height: 1.1;
    text-shadow: 0 0 18px rgba(52, 211, 153, .18);
}
.invoice-total-card small { color: #b2c6ca; font-size: 11px; }
.invoice-section {
    padding: 16px;
    border: 1px solid rgba(95, 118, 154, .28);
    border-radius: 8px;
    background: rgba(16, 27, 47, .7);
    flex: 0 0 auto;
}
.invoice-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}
.invoice-section-head h3 { margin: 3px 0 0; font-size: 15px; }
.invoice-section-head > strong { color: var(--brand); font-size: 11px; }
.invoice-items-table { max-height: none; overflow: visible; }
.invoice-items-table .audit-table th { position: static; background: rgba(8, 16, 30, .45); }
.invoice-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 14px;
    border: 1px solid rgba(95, 118, 154, .28);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(95, 118, 154, .22);
}
.invoice-financial-grid > div { padding: 11px 13px; background: rgba(8, 16, 30, .48); }
.invoice-financial-grid span { display: block; margin-bottom: 5px; }
.invoice-financial-grid b { color: #e6edf7; font-family: var(--font-mono); font-size: 13px; }
.invoice-financial-grid > div:last-child b { color: var(--brand); }
.invoice-note {
    margin: 0;
    padding: 10px 13px;
    border-left: 3px solid var(--brand);
    border-radius: 4px;
    background: rgba(52, 211, 153, .07);
    color: #9daec5;
    font-size: 12px;
    line-height: 1.45;
}
.invoice-note-danger { border-left-color: var(--danger); background: var(--danger-soft); color: #ff9aad; }
.invoice-activity-section {
    flex: 0 0 auto;
    padding: 14px 16px 0;
    border: 1px solid rgba(95, 118, 154, .24);
    border-radius: 8px;
    background: rgba(13, 23, 40, .54);
}
.invoice-activity-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
}
.invoice-activity-head span {
    display: block;
    color: #7f90ab;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.invoice-activity-head h3 { margin: 3px 0 0; font-size: 14px; }
.invoice-activity-head > strong { color: var(--text-muted); font-size: 11px; }
.invoice-activity-table { max-height: none; overflow: visible; }
.invoice-activity-table .audit-table th { position: static; background: rgba(8, 16, 30, .42); }
.invoice-activity-table .audit-table td { padding-top: 11px; padding-bottom: 11px; }
.invoice-activity-table .audit-table tr:last-child td { border-bottom: 0; }
.payment-conversion-note {
    padding: 10px 12px;
    border-left: 3px solid var(--brand);
    border-radius: 4px;
    background: rgba(52, 211, 153, .08);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.payment-conversion-note strong { color: var(--brand); }
.payment-conversion-note.warning { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
#invoice-detail-printable .modal-scroll-body > .panel-head {
    min-height: auto;
    padding: 8px 0 8px !important;
    border-bottom: 1px solid rgba(95, 118, 154, .25);
}
#invoice-detail-actions {
    justify-content: flex-start;
    gap: 6px;
    padding: 11px 18px 14px;
    border-top-color: rgba(95, 118, 154, .3);
    background: #101b2f;
    flex-wrap: wrap;
}
.invoice-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    font-size: 11.5px;
    white-space: nowrap;
}
.invoice-action svg { width: 15px; height: 15px; flex: 0 0 auto; }
.invoice-action-primary { margin-right: 2px; }
@media (max-width: 760px) {
    .invoice-overview { grid-template-columns: 1fr; }
    .invoice-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .invoice-financial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #invoice-detail-actions { align-items: stretch; flex-wrap: wrap; }
    .invoice-action { flex: 1 1 auto; }
    .invoice-action-primary { margin-right: 0; }
}
@media (max-width: 480px) {
    .invoice-meta-grid { grid-template-columns: 1fr; }
    .invoice-total-card strong { font-size: 21px; }
}

@media (max-width: 1080px) {
    .billing-grid-2col { grid-template-columns: 1fr; }
}

/* Impresión: al abrir un detalle de presupuesto/factura y usar "Imprimir",
   solo se imprime el contenido del modal (no la app ni otros overlays). */
@media print {
    body * { visibility: hidden; }
    #quote-detail-modal:not([hidden]) #quote-detail-printable,
    #quote-detail-modal:not([hidden]) #quote-detail-printable *,
    #invoice-detail-modal:not([hidden]) #invoice-detail-printable,
    #invoice-detail-modal:not([hidden]) #invoice-detail-printable * {
        visibility: visible;
    }
    #quote-detail-printable, #invoice-detail-printable {
        position: absolute;
        inset: 0;
        width: 100%;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border: none;
        background: #fff;
        color: #000;
        /* ponytail: el tema oscuro fija casi todo el color de texto via estas
           variables (--text-primary, etc en :root). Sin redefinirlas aca el
           contenido del comprobante hereda el blanco del tema -- texto blanco
           sobre el fondo blanco de impresion, invisible en el papel. */
        --bg-card: #fff;
        --bg-card-solid: #fff;
        --bg-card-hover: #fff;
        --bg-elevated: #fff;
        --bg-input: #fff;
        --text-primary: #000;
        --text-secondary: #333;
        --text-muted: #555;
        --border: #ccc;
        --border-strong: #999;
    }
    #quote-detail-printable .modal-scroll-body,
    #invoice-detail-printable .modal-scroll-body {
        overflow: visible;
        max-height: none;
        flex: none;
    }
    .modal { position: static; background: none; }
    .no-print { display: none !important; }
}

/* ============================================================================
   PREMIUM REFINEMENT PASS  ·  2026-08-06
   Bloque aditivo al final del archivo. Eleva visualmente dos superficies:
   (1) la grilla de tarjetas de tenant y (2) la ficha de detalle del tenant.
   Solo estética: no altera markup, ids ni handlers. Reversible eliminando
   este bloque (backup en styles.css.bak).
   ============================================================================ */

/* ---- 1. GRILLA + TARJETAS DE TENANT ------------------------------------- */

/* Ocupar el ancho disponible y respirar entre tarjetas. */
.tenant-grid { max-width: none; gap: 18px; }

/* Tarjeta: superficie estratificada con brillo superior y sombra real. */
.tenant-card {
    gap: 14px;
    padding: 18px 18px 16px 22px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--brand-soft) 42%, transparent), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.022), transparent 34%),
        var(--bg-card-solid);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow-sm);
}
.tenant-card::before { width: 4px; border-radius: 0 4px 4px 0; box-shadow: 0 0 16px var(--brand-glow); }
.tenant-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
}
.tenant-card.active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--brand-ring), 0 16px 36px rgba(52,211,153,.17);
}

/* Monograma: más presencia, anillo y degradé esmeralda. */
.tenant-card .tenant-monogram {
    width: 46px; height: 46px; border-radius: 14px;
    font-size: 15px; letter-spacing: -.03em; color: #d1fae5;
    background: linear-gradient(145deg, rgba(52,211,153,.34), rgba(6,95,70,.36));
    border: 1px solid rgba(110,231,183,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.26);
}
.tenant-card .tenant-monogram-image { background: var(--bg-elevated); }

/* Jerarquía tipográfica del encabezado. */
.tenant-card strong { font-size: 15px; letter-spacing: -.012em; }
.tenant-card small  { font-size: 11.5px; color: var(--text-muted); }

/* Mini-stats: baldosas glass en vez de cajas casi negras. */
.tenant-card .mini-grid { gap: 8px; }
.tenant-card .mini-grid > div {
    padding: 10px 12px; border-radius: 11px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    transition: border-color .16s ease, background .16s ease;
}
.tenant-card:hover .mini-grid > div { background: rgba(255,255,255,.045); }
.tenant-card .mini-grid span { font-size: 9.5px; letter-spacing: .06em; }
.tenant-card .mini-grid b { font-size: 13px; margin-top: 3px; }

/* Acciones al pie: separador tenue y alineadas a la derecha. */
.tenant-card .row-actions { margin-top: 2px; padding-top: 12px; justify-content: flex-end; border-top: 1px solid var(--border); }

/* ---- 2. FICHA DE DETALLE DEL TENANT ------------------------------------- */

/* Hero: monograma con un pelo más de profundidad y borde vivo. */
body.tenant-focus .tenant-page-monogram {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 30px rgba(0,0,0,.24), 0 0 0 4px rgba(52,211,153,.06);
}
body.tenant-focus .detail-hero { border-radius: var(--r-xl); }

/* KPI tiles del resumen: acento de color por métrica + número protagonista. */
body.tenant-focus .metrics { gap: 14px; }
body.tenant-focus .metric {
    position: relative;
    min-height: 106px;
    padding: 18px 18px 16px 20px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(140% 100% at 100% 0%, rgba(255,255,255,.032), transparent 52%),
        linear-gradient(160deg, rgba(24,32,50,.96), rgba(13,19,32,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.22);
    overflow: hidden;
}
body.tenant-focus .metric::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--brand); opacity: .55;
}
body.tenant-focus .metric:nth-child(2)::before { background: var(--accent-cyan); }
body.tenant-focus .metric:nth-child(3)::before { background: var(--accent-violet); }
body.tenant-focus .metric:nth-child(4)::before { background: var(--warning); }
body.tenant-focus .metric span { font-size: 10px; letter-spacing: .07em; color: var(--text-muted); }
body.tenant-focus .metric b { margin-top: 10px; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; color: var(--text-primary); }

/* Tabs: reposo con hover sutil y activo con más aire. */
body.tenant-focus .detail-tab:hover:not(.active) { background: rgba(255,255,255,.04); }

/* Panel "Resumen del plan": encabezado con degradé y barra de capacidad viva. */
body.tenant-focus .plan-summary-panel {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
body.tenant-focus .plan-summary-panel .kpi-bar { height: 8px; border-radius: var(--r-full); background: rgba(255,255,255,.06); }
body.tenant-focus .plan-summary-panel .kpi-bar-fill { box-shadow: 0 0 12px var(--brand-glow); }


/* ============================================================================
   COMERCIAL TAB — rediseno  ·  2026-08-06
   Contrato vigente + generar legales agrupados, y "subir version firmada"
   colapsable para que no domine cuando no hay contratos.
   ============================================================================ */
body.tenant-focus .commercial-contract-overview {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, rgba(52,211,153,.05), rgba(15,23,42,.55));
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
body.tenant-focus .commercial-contract-overview > .detail-body { padding: 18px 18px 16px; }
body.tenant-focus .commercial-contract-overview .tenant-docs-card {
    min-height: 0;
    border: 1px dashed var(--border-strong) !important;
    background: rgba(255,255,255,.02);
    border-radius: var(--r-md);
}
body.tenant-focus .commercial-contract-overview .tenant-docs-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px !important;
}

/* Generar contrato / NDA: columna alineada a la izquierda, con rotulo, pegada
   al contrato en lugar de flotar a la derecha con un hueco vacio. */
body.tenant-focus .commercial-contract-overview .commercial-legal-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    background: transparent;
    min-height: 0;
}
body.tenant-focus .commercial-contract-overview .commercial-legal-actions::before {
    content: "Documentacion legal";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
body.tenant-focus .commercial-contract-overview .commercial-legal-actions .legal-generate-actions { margin-left: 0; }

/* Subir version firmada: colapsable y liviano. */
.contract-upload-details { gap: 0 !important; }
.contract-upload-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.contract-upload-details > summary::-webkit-details-marker { display: none; }
.contract-upload-details > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
    transition: transform .18s var(--ease-out);
}
.contract-upload-details[open] > summary::after { transform: rotate(-135deg); }
.contract-upload-details > *:not(summary) { margin-top: 14px; }

/* ============================================================================
   LISTA DE TENANTS — filas premium  ·  2026-08-06
   Reemplaza la grilla de tarjetas por una lista vertical de filas, con accion
   "Ver" para entrar al detalle + editar/suspender.
   ============================================================================ */
.tenant-list-rows { display: flex; flex-direction: column; gap: 10px; }
.tenant-list-rows.skeleton-stack { gap: 10px; padding: 0; }
.skeleton-row {
    height: 74px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    background: var(--bg-input);
    animation: card-in .28s var(--ease-out) backwards;
}
.skeleton-row::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    animation: shimmer 1.4s infinite;
}

.tenant-list-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(210px, auto) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px 14px 22px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 42%), var(--bg-card-solid);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm);
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s var(--ease-out), border-color .16s ease, box-shadow .16s ease, background .16s ease;
    animation: card-in .28s var(--ease-out) backwards;
}
.tenant-list-item::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: var(--brand); opacity: 0; border-radius: 0 4px 4px 0;
    box-shadow: 0 0 16px var(--brand-glow); transition: opacity .16s ease;
}
.tenant-list-item:hover {
    transform: translateY(-1px);
    border-color: var(--border-strong);
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 42%), var(--bg-card-hover);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
}
.tenant-list-item:hover::before { opacity: .7; }
.tenant-list-item.active {
    border-color: var(--brand);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px var(--brand-ring), 0 14px 30px rgba(52,211,153,.14);
}
.tenant-list-item.active::before { opacity: 1; }
.tenant-list-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.tli-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tli-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tli-copy strong { font-size: 15px; letter-spacing: -.012em; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tli-copy small { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tli-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tli-stats { display: flex; gap: 10px; justify-content: flex-start; }
.tli-stat {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: rgba(255,255,255,.03); min-width: 98px;
}
.tli-stat span { display: block; color: var(--text-muted); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tli-stat b { display: block; margin-top: 3px; font-size: 13px; font-family: var(--font-mono); color: var(--text-primary); }
.tli-stat b svg { width: 11px; height: 11px; vertical-align: -1px; }

.tenant-list-item .row-actions { justify-content: flex-end; }

@media (max-width: 1024px) {
    .tenant-list-item { grid-template-columns: 1fr auto; row-gap: 12px; }
    .tli-identity { grid-column: 1; }
    .tli-pills { grid-column: 2; justify-content: flex-end; }
    .tli-stats { grid-column: 1 / -1; }
    .tenant-list-item .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Simbolo de infinito para "sin limite de usuarios". */
.capacity-row-label b { white-space: nowrap; }
.tli-stat b { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.infinity-mark { display: inline-flex; align-items: center; color: inherit; }
.tli-stat b .infinity-mark svg, .capacity-row-label .infinity-mark svg, .infinity-mark svg { width: 28px; height: 18px; vertical-align: -3px; }

/* ============================================================================
   TICKETS — lavada de cara + color por tenant + gating de reabrir  ·  2026-08-06
   ============================================================================ */
/* Acento de color por tenant en cada fila (variable inline --tenant-color). */
.ticket-row td:first-child { box-shadow: inset 3px 0 0 var(--tenant-color, transparent); }
.ticket-row:hover td { background: rgba(255,255,255,.025); }
.ticket-row td { transition: background .14s ease; }

.ticket-tenant-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.ticket-tenant-cell { display: grid; gap: 3px; }
.ticket-assignee-label { color: var(--brand); font-size: 10px; font-weight: 700; }
.ticket-tenant-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--tenant-color, #64748b);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tenant-color, #64748b) 70%, transparent);
}

.ticket-queue-panel { overflow: hidden; }
.ticket-queue-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: linear-gradient(100deg, rgba(52, 211, 153, .10), rgba(15, 23, 42, .18) 48%, transparent);
}
.ticket-queue-tabs {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(7, 13, 25, .72);
}
.ticket-queue-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.ticket-queue-tabs button span {
    min-width: 21px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
}
.ticket-queue-tabs button.active { color: #042f2e; background: var(--brand); box-shadow: 0 4px 14px rgba(52, 211, 153, .28); }
.ticket-queue-tabs button.active span { background: rgba(4, 47, 46, .15); color: #042f2e; }
.ticket-queue-hint { color: var(--text-muted); font-size: 12px; }
.ticket-assignment-control { display: flex; align-items: end; gap: 8px; margin-top: 5px; }
.ticket-assignment-control .form-control, .ticket-assignment-control .cselect { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.ticket-assignment-control .btn-secondary { flex: 0 0 auto; height: 36px; }
@media (max-width: 560px) { .ticket-assignment-control { align-items: stretch; flex-direction: column; } .ticket-assignment-control .btn-secondary { width: 100%; } }
@media (max-width: 720px) { .ticket-queue-switcher { align-items: stretch; flex-direction: column; } .ticket-queue-tabs { width: 100%; } .ticket-queue-tabs button { flex: 1; justify-content: center; } }

/* Respuesta bloqueada cuando el ticket esta finalizado. */
.ticket-reply-locked {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 14px; padding: 16px 18px;
    border: 1px dashed var(--border-strong); border-radius: var(--r-md);
    background: linear-gradient(160deg, rgba(251,191,36,.06), var(--bg-input));
}
.ticket-reply-locked-msg { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.ticket-reply-locked-msg svg { width: 18px; height: 18px; color: var(--warning); flex: 0 0 auto; }
.ticket-reply-locked strong { color: var(--text-primary); }

/* ============================================================================
   TICKETS InVgate — estados de espera, boton grafico, calendario, evolucion
   ============================================================================ */
/* Pills de estados de espera */
.pill.wait-cliente { color: var(--accent-cyan);   border-color: rgba(34,211,238,.3);  background: var(--accent-cyan-soft); }
.pill.wait-fecha   { color: var(--warning);        border-color: rgba(251,191,36,.3);  background: var(--warning-soft); }
.pill.wait-agente  { color: var(--accent-violet);  border-color: rgba(167,139,250,.3); background: var(--accent-violet-soft); }

/* Fila estado + boton grafico */
.ticket-estado-row { display: flex; align-items: center; gap: 8px; }
.ticket-estado-row > .form-control, .ticket-estado-row > .cselect { flex: 1 1 auto; min-width: 0; }
.ticket-chart-btn {
    flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
    border: 1px solid var(--brand-ring); border-radius: var(--r-sm);
    background: var(--brand-soft); color: var(--brand); cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ticket-chart-btn:hover { background: rgba(52,211,153,.2); border-color: var(--brand); transform: translateY(-1px); }
.ticket-chart-btn svg { width: 18px; height: 18px; }

/* Modal grafico de evolucion */
.ticket-chart-backdrop {
    position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 20px;
    background: var(--overlay-backdrop); animation: view-in .18s var(--ease-out);
}
.ticket-chart-panel {
    width: min(720px, 100%); max-height: 90vh; overflow: auto;
    border: 1px solid var(--border-strong); border-radius: var(--r-xl);
    background: linear-gradient(160deg, rgba(22,30,48,.98), rgba(13,19,32,.98));
    box-shadow: var(--shadow-xl); padding: 22px 24px;
}
.ticket-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ticket-chart-head h3 { margin: 0; font-size: 16px; }
.ticket-chart-close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; }
.ticket-chart-close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ticket-chart-close svg { width: 16px; height: 16px; }
.tchart-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tchart-chip { flex: 1 1 110px; min-width: 110px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.tchart-chip span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tchart-chip b { display: block; margin-top: 4px; font-size: 16px; font-family: var(--font-mono); color: var(--text-primary); }
.tchart-svg { border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(0,0,0,.18); padding: 10px 6px; margin-bottom: 14px; }
.tchart-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.tchart-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.tchart-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }