/* =============================================================================
   TSS UI — base visual reutilizable
   Paleta actual: #00a0bd
   Paleta anterior (por si hay que revertir): #4a6fa5 / #3b5c8c / rgba(74, 111, 165, …)
   ============================================================================= */

:root {
    --tss-primary: #00a0bd;
    --tss-primary-dark: #008097;
    --tss-primary-soft: rgba(0, 160, 189, 0.1);
    --tss-primary-soft-strong: rgba(0, 160, 189, 0.18);
    --tss-primary-soft-border: rgba(0, 160, 189, 0.28);
}

.tss-page {
    --tss-primary: #00a0bd;
    --tss-primary-dark: #008097;
    --tss-primary-soft: rgba(0, 160, 189, 0.1);
    --tss-ink: #1c2430;
    --tss-muted: #6b7789;
    --tss-line: #e6ebf2;
    --tss-surface: #ffffff;
    --tss-canvas: #f3f5f8;
    --tss-success: #2f9e6b;
    --tss-danger: #c94b4b;
    --tss-warning: #c98a1a;
    --tss-radius: 16px;
    --tss-shadow: 0 10px 30px rgba(28, 36, 48, 0.06);
    --tss-shadow-sm: 0 2px 8px rgba(28, 36, 48, 0.05);
    background: var(--tss-canvas);
    min-height: calc(100vh - 60px);
    padding: 1.5rem 0 6rem;
    color: var(--tss-ink);
}

.tss-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.tss-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tss-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tss-primary);
    margin-bottom: 0.35rem;
}

.tss-page-header h1 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 700;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.tss-page-header p {
    margin: 0;
    color: var(--tss-muted);
    max-width: 42rem;
    line-height: 1.5;
}

.tss-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--tss-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--tss-surface);
    border: 1px solid var(--tss-line);
}

.tss-back:hover {
    color: var(--tss-primary);
    border-color: var(--tss-primary);
}

.tss-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

.tss-grid > * {
    min-width: 0;
}

.tss-card {
    background: var(--tss-surface);
    border: 1px solid var(--tss-line);
    border-radius: var(--tss-radius);
    box-shadow: var(--tss-shadow-sm);
    min-width: 0;
    overflow: hidden;
}

.tss-card-body {
    padding: 1.25rem 1.35rem 1.4rem;
}

.tss-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.tss-section-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.tss-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tss-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tss-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    min-width: 0;
}

.tss-fields.is-compact-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.tss-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tss-field.is-wide {
    grid-column: 1 / -1;
}

.tss-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tss-ink);
}

.tss-field .hint {
    font-size: 0.75rem;
    color: var(--tss-muted);
}

.tss-field {
    min-width: 0;
}

.tss-field input,
.tss-field select,
.tss-field textarea,
.tss-input,
.tss-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--tss-line);
    border-radius: 10px;
    padding: 0.62rem 0.8rem;
    font-size: 0.95rem;
    background: #fbfcfe;
    color: var(--tss-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tss-field input:focus,
.tss-field select:focus,
.tss-field textarea:focus,
.tss-input:focus,
.tss-select:focus {
    outline: none;
    background: #fff;
    border-color: var(--tss-primary);
    box-shadow: 0 0 0 3px var(--tss-primary-soft);
}

.tss-pay {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.tss-pay.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tss-pay-btn {
    border: 1px solid var(--tss-line);
    background: #fbfcfe;
    border-radius: 12px;
    padding: 0.7rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tss-muted);
    cursor: pointer;
    transition: 0.15s ease;
}

.tss-pay-btn i {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.tss-pay-btn.is-active,
.tss-pay-btn:hover {
    border-color: var(--tss-primary);
    color: var(--tss-primary);
    background: var(--tss-primary-soft);
}

.tss-switch {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px dashed var(--tss-line);
    border-radius: 12px;
    background: #f8fafc;
}

.tss-switch input {
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--tss-primary);
}

.tss-switch strong {
    display: block;
    font-size: 0.9rem;
}

.tss-switch span {
    display: block;
    font-size: 0.78rem;
    color: var(--tss-muted);
    margin-top: 0.15rem;
}

.tss-switch.is-disabled {
    opacity: 0.65;
}

.tss-empty {
    text-align: center;
    padding: 2.2rem 1rem;
    color: var(--tss-muted);
}

.tss-empty i {
    font-size: 2rem;
    color: var(--tss-primary);
    background: var(--tss-primary-soft);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.tss-product-card {
    border: 1px solid var(--tss-line);
    border-radius: 14px;
    padding: 1rem 1rem 1rem 1.15rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.tss-product-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--tss-primary);
}

.tss-product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.7rem;
}

.tss-product-grid > .tss-field {
    min-width: 0;
}

.tss-product-grid .tss-select,
.tss-product-grid .tss-input,
.tss-product-grid select,
.tss-product-grid input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tss-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--tss-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.tss-qty button {
    width: 36px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--tss-primary);
    font-size: 1.1rem;
    cursor: pointer;
}

.tss-qty input {
    width: 100%;
    border: 0;
    text-align: center;
    padding: 0.4rem 0;
    background: transparent;
    font-weight: 600;
    -moz-appearance: textfield;
}

.tss-qty input::-webkit-outer-spin-button,
.tss-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tss-discount {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 0.45rem;
    min-width: 0;
}

.tss-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--tss-line);
}

.tss-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--tss-muted);
}

.tss-chip.is-ok {
    background: rgba(47, 158, 107, 0.12);
    color: var(--tss-success);
}

.tss-chip.is-bad {
    background: rgba(201, 75, 75, 0.12);
    color: var(--tss-danger);
}

.tss-chip.is-deal {
    background: rgba(201, 138, 26, 0.14);
    color: var(--tss-warning);
}

.tss-line-total {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.95rem;
}

.tss-line-total s {
    color: var(--tss-muted);
    font-weight: 500;
    font-size: 0.8rem;
    margin-right: 0.4rem;
}

.tss-icon-btn {
    border: 0;
    background: transparent;
    color: var(--tss-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
}

.tss-icon-btn:hover {
    background: rgba(201, 75, 75, 0.1);
    color: var(--tss-danger);
}

.tss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 11px;
    font-weight: 650;
    font-size: 0.92rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.tss-btn-primary {
    background: var(--tss-primary);
    color: #fff;
}

.tss-btn-primary:hover {
    background: var(--tss-primary-dark);
    color: #fff;
}

.tss-btn-ghost {
    background: var(--tss-primary-soft);
    color: var(--tss-primary);
}

.tss-btn-ghost:hover {
    background: var(--tss-primary-soft-strong);
    color: var(--tss-primary-dark);
}

.tss-summary {
    position: sticky;
    top: 80px;
}

.tss-summary h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.tss-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
    color: var(--tss-muted);
}

.tss-summary-row.is-deal {
    color: var(--tss-danger);
}

.tss-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--tss-line);
    font-size: 0.9rem;
}

.tss-summary-total strong {
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.tss-note {
    font-size: 0.78rem;
    color: var(--tss-muted);
    background: var(--tss-primary-soft);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    margin: 1rem 0;
    line-height: 1.45;
}

.tss-alert {
    display: none;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.tss-alert.is-visible {
    display: block;
}

.tss-alert.is-ok {
    background: rgba(47, 158, 107, 0.12);
    color: #216b48;
}

.tss-alert.is-bad {
    background: rgba(201, 75, 75, 0.12);
    color: #8d2f2f;
}

.tss-alert.is-warn {
    background: rgba(201, 138, 26, 0.14);
    color: #8a5f12;
}

.tss-success {
    display: none;
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.tss-success.is-visible {
    display: block;
}

.tss-success i {
    font-size: 2.4rem;
    color: var(--tss-success);
}

@media (max-width: 992px) {
    .tss-grid {
        grid-template-columns: 1fr;
    }

    .tss-summary {
        position: static;
    }

    .tss-pay {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tss-fields,
    .tss-product-grid {
        grid-template-columns: 1fr;
    }

    .tss-page-header {
        flex-direction: column;
    }

    .tss-page-header .tss-btn {
        width: 100%;
    }
}

/* =============================================================================
   Listas, filtros, tabla y paginación (Lista de Órdenes y vistas similares)
   ============================================================================= */

.page-content > .tss-page {
    margin: -1.5rem;
    margin-bottom: -80px;
    min-height: calc(100vh - 60px);
}

.tss-wrap.is-wide {
    max-width: 1280px;
}

.tss-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tss-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.3rem;
    background: var(--tss-surface);
    border: 1px solid var(--tss-line);
    border-radius: 14px;
}

.tss-tab i {
    pointer-events: none;
}

.tss-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 11px;
    color: var(--tss-muted);
    text-decoration: none;
    font-weight: 650;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.tss-tab:hover {
    color: var(--tss-primary);
    background: var(--tss-primary-soft);
}

.tss-tab.is-active {
    background: var(--tss-primary);
    color: #fff;
}

.tss-tab.is-active:hover {
    color: #fff;
    background: var(--tss-primary-dark);
}

.tss-tab-count {
    min-width: 1.5rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.75rem;
    text-align: center;
}

.tss-tab:not(.is-active) .tss-tab-count {
    background: var(--tss-primary-soft);
    color: var(--tss-primary);
}

button.tss-tab {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.tss-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tss-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 0.9rem 1rem;
    align-items: end;
}

.tss-filters.is-search {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tss-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tss-btn-sm {
    padding: 0.42rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 9px;
}

.tss-btn-danger {
    background: rgba(201, 75, 75, 0.12);
    color: var(--tss-danger);
}

.tss-btn-danger:hover {
    background: var(--tss-danger);
    color: #fff;
}

.tss-btn:disabled,
.tss-btn-danger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tss-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    background: #eef2f7;
    color: var(--tss-muted);
    border: 1px solid var(--tss-line);
    white-space: nowrap;
}

.tss-badge.is-ok {
    background: rgba(47, 158, 107, 0.12);
    color: #216b48;
    border-color: rgba(47, 158, 107, 0.28);
}

.tss-badge.is-warn {
    background: rgba(201, 138, 26, 0.14);
    color: #8a5f12;
    border-color: rgba(201, 138, 26, 0.3);
}

.tss-badge.is-info {
    background: var(--tss-primary-soft);
    color: var(--tss-primary-dark);
    border-color: var(--tss-primary-soft-border);
}

.tss-badge.is-bad {
    background: rgba(201, 75, 75, 0.12);
    color: #8d2f2f;
    border-color: rgba(201, 75, 75, 0.28);
}

.tss-badge.is-status-gray {
    background: #e8ecf1;
    color: #5b6573;
    border-color: #cfd6df;
}

.tss-badge.is-status-yellow {
    background: rgba(212, 168, 20, 0.18);
    color: #7a5f08;
    border-color: rgba(212, 168, 20, 0.42);
}

.tss-badge.is-status-orange {
    background: rgba(217, 119, 32, 0.16);
    color: #9a4e0d;
    border-color: rgba(217, 119, 32, 0.4);
}

.tss-badge.is-status-blue {
    background: var(--tss-primary-soft);
    color: var(--tss-primary-dark);
    border-color: var(--tss-primary-soft-border);
}

.tss-badge.is-status-green {
    background: rgba(47, 158, 107, 0.12);
    color: #216b48;
    border-color: rgba(47, 158, 107, 0.28);
}

.tss-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tss-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.tss-table th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tss-muted);
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--tss-line);
    background: #f8fafc;
    white-space: nowrap;
}

.tss-table td {
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid var(--tss-line);
    vertical-align: middle;
    font-size: 0.92rem;
}

.tss-table tbody tr:last-child td {
    border-bottom: 0;
}

.tss-table tbody tr:hover td {
    background: #fbfcfe;
}

.tss-table .is-id {
    font-weight: 700;
    color: var(--tss-ink);
    white-space: nowrap;
}

.tss-table .is-total {
    font-weight: 700;
    white-space: nowrap;
}

.tss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.tss-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.25rem;
}

.tss-pager .pagination {
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
}

.tss-pager .page-link {
    border-radius: 10px;
    border: 1px solid var(--tss-line);
    color: var(--tss-ink);
    padding: 0.4rem 0.75rem;
    min-width: 2.25rem;
    text-align: center;
}

.tss-pager .page-link:hover {
    background: var(--tss-primary-soft);
    color: var(--tss-primary);
    border-color: var(--tss-primary);
}

.tss-pager .page-item.active .page-link {
    background: var(--tss-primary);
    border-color: var(--tss-primary);
    color: #fff;
}

.tss-pager .page-item.disabled .page-link {
    color: var(--tss-muted);
    background: #f8fafc;
}

.tss-pager-meta {
    font-size: 0.8rem;
    color: var(--tss-muted);
}

.tss-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tss-stat {
    background: #f8fafc;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.tss-stat span {
    display: block;
    font-size: 0.75rem;
    color: var(--tss-muted);
    margin-bottom: 0.2rem;
}

.tss-stat strong {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.tss-stat.is-ok strong {
    color: var(--tss-success);
}

.tss-stat.is-warn strong {
    color: var(--tss-warning);
}

.tss-stat.is-bad strong {
    color: var(--tss-danger);
}

.tss-stats.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-stats.is-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.tss-stat em {
    display: block;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--tss-muted);
    margin-top: 0.2rem;
}

.tss-stat-delta {
    font-size: 0.78rem;
    font-weight: 650;
}

a.tss-stat {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.tss-stat:hover {
    border-color: var(--tss-primary);
    background: var(--tss-primary-soft);
    color: inherit;
}

.modal-content.tss-modal {
    border: 1px solid var(--tss-line);
    border-radius: var(--tss-radius);
    overflow: hidden;
    box-shadow: var(--tss-shadow);
}

.tss-modal .modal-header {
    border-bottom: 1px solid var(--tss-line);
    background: #f8fafc;
    align-items: flex-start;
}

.tss-modal .modal-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.tss-modal .modal-header .tss-kicker {
    margin-bottom: 0.2rem;
}

.tss-modal .modal-header p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tss-muted);
}

.tss-modal .modal-footer {
    border-top: 1px solid var(--tss-line);
    background: #fbfcfe;
    gap: 0.5rem;
}

.tss-modal .tss-stats {
    margin-bottom: 1rem;
}

.tss-modal.is-danger .modal-header {
    background: rgba(201, 75, 75, 0.1);
    color: var(--tss-danger);
}

.tss-choice {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tss-choice-link {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--tss-ink);
    background: #fbfcfe;
}

.tss-choice-link:hover {
    border-color: var(--tss-primary);
    background: var(--tss-primary-soft);
    color: var(--tss-ink);
}

.tss-choice-link i {
    font-size: 1.35rem;
    color: var(--tss-primary);
    margin-top: 0.1rem;
}

.tss-choice-link strong {
    display: block;
    font-size: 0.95rem;
}

.tss-choice-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--tss-muted);
    margin-top: 0.15rem;
    font-weight: 500;
}

.tss-choice.is-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.tss-choice-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
    color: var(--tss-ink);
    background: #fbfcfe;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
}

.tss-choice-card:hover,
.tss-choice-card.is-selected {
    border-color: var(--tss-primary);
    background: var(--tss-primary-soft);
}

.tss-choice-card i {
    font-size: 1.35rem;
    color: var(--tss-primary);
    margin-top: 0.1rem;
}

.tss-choice-card strong {
    display: block;
    font-size: 0.95rem;
}

.tss-wizard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}

.tss-wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
    background: var(--tss-surface);
    color: var(--tss-muted);
    font-size: 0.8rem;
    font-weight: 650;
}

.tss-wizard-step.is-active {
    border-color: var(--tss-primary);
    color: var(--tss-primary);
    background: var(--tss-primary-soft);
}

.tss-wizard-step.is-done {
    color: var(--tss-success);
    border-color: rgba(47, 158, 107, 0.35);
}

.tss-wizard-panel {
    display: none;
}

.tss-wizard-panel.active {
    display: block;
}

.tss-img-preview {
    max-width: 180px;
    max-height: 180px;
    border-radius: 12px;
    border: 1px solid var(--tss-line);
    object-fit: cover;
    display: none;
    margin-top: 0.65rem;
}

.tss-choice.is-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.tss-choice-link.is-lg {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.1rem;
}

.tss-choice-link.is-lg i {
    font-size: 2.35rem;
    margin: 0 0 0.55rem;
}

.tss-choice-link.is-lg strong {
    font-size: 1.05rem;
}

@media (max-width: 700px) {
    .tss-choice.is-two,
    .tss-choice.is-three,
    .tss-wizard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .tss-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tss-filters.is-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tss-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .tss-table-wrap.is-stack {
        overflow: visible;
        padding: 0.85rem;
    }

    .tss-table-wrap.is-stack .tss-table thead {
        display: none;
    }

    .tss-table-wrap.is-stack .tss-table,
    .tss-table-wrap.is-stack .tss-table tbody {
        display: block;
        width: 100%;
    }

    .tss-table-wrap.is-stack .tss-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.15rem 0.75rem;
        margin-bottom: 0.85rem;
        padding: 0.95rem 1rem;
        border: 1px solid var(--tss-line);
        border-radius: 14px;
        background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
        box-shadow: var(--tss-shadow-sm);
    }

    .tss-table-wrap.is-stack .tss-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .tss-table-wrap.is-stack .tss-table tbody tr:hover td {
        background: transparent;
    }

    .tss-table-wrap.is-stack .tss-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.28rem 0;
        border: 0;
        grid-column: 1 / -1;
    }

    .tss-table-wrap.is-stack .tss-table td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        font-weight: 650;
        color: var(--tss-muted);
        flex-shrink: 0;
    }

    .tss-table-wrap.is-stack .tss-table td.is-id {
        grid-column: 1;
        grid-row: 1;
        font-size: 1.05rem;
        padding-top: 0;
    }

    .tss-table-wrap.is-stack .tss-table td.is-id::before {
        display: none;
    }

    .tss-table-wrap.is-stack .tss-table td.is-total {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        font-size: 1.05rem;
        padding-top: 0;
    }

    .tss-table-wrap.is-stack .tss-table td.is-total::before {
        display: none;
    }

    .tss-table-wrap.is-stack .tss-table td.is-actions {
        justify-content: stretch;
        padding-top: 0.7rem;
        margin-top: 0.35rem;
        border-top: 1px dashed var(--tss-line);
    }

    .tss-table-wrap.is-stack .tss-table td.is-actions::before {
        display: none;
    }

    .tss-table-wrap.is-stack .tss-table td.is-actions .tss-actions {
        width: 100%;
    }

    .tss-table-wrap.is-stack .tss-table td.is-actions .tss-btn {
        flex: 1;
    }

    .tss-table-wrap.is-stack .tss-table tr.is-empty {
        display: block;
        box-shadow: none;
        background: transparent;
        border-style: dashed;
    }

    .tss-table-wrap.is-stack .tss-table tr.is-empty td {
        display: block;
        text-align: center;
        padding: 1.5rem 0.5rem;
    }

    .tss-table-wrap.is-stack .tss-table tr.is-empty td::before {
        display: none;
    }
}

@media (max-width: 720px) {
    .tss-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tss-tabs {
        display: flex;
    }

    .tss-tab {
        flex: 1;
        justify-content: center;
    }

    .tss-toolbar-actions .tss-btn {
        width: 100%;
    }

    .tss-filters {
        grid-template-columns: 1fr;
    }

    .tss-filters.is-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tss-fields.is-compact-3 {
        grid-template-columns: 1fr;
    }

    .tss-filter-actions .tss-btn {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    .page-content > .tss-page {
        margin: -1rem;
        margin-bottom: -80px;
    }

    .tss-stats,
    .tss-stats.is-three {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Detalle / confirmación de orden
   ============================================================================= */

.tss-order-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.25rem;
}

.tss-kv {
    margin: 0;
}

.tss-kv dt {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--tss-muted);
    margin-bottom: 0.15rem;
}

.tss-kv dd {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
}

.tss-status-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.tss-status-row label {
    font-size: 0.82rem;
    font-weight: 650;
    margin: 0;
}

.tss-status-row select {
    min-width: 220px;
    border: 1px solid var(--tss-line);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    background: #fbfcfe;
    color: var(--tss-ink);
}

.tss-section-title i {
    color: var(--tss-primary);
}

.tss-info-card .card-body {
    padding: 0;
}

.tss-info-card {
    background: #f8fafc;
    border: 1px solid var(--tss-line);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-bottom: 0.85rem;
    border-left: 4px solid var(--tss-primary);
}

.tss-info-card h3 {
    margin: 0 0 0.75rem;
    font-size: 0.98rem;
    font-weight: 700;
}

.tss-mail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
    gap: 1.1rem;
    align-items: start;
}

.tss-mail-status {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tss-mail-to {
    font-size: 0.95rem;
    word-break: break-all;
}

.tss-mail-hint {
    font-size: 0.8rem;
    color: var(--tss-muted);
    line-height: 1.45;
    margin: 0;
}

.tss-mail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border: 1px dashed var(--tss-line);
    border-radius: 12px;
}

.tss-mail-actions .tss-btn {
    width: 100%;
}

.tss-totals {
    margin-left: auto;
    width: min(100%, 340px);
    background: #f8fafc;
    border: 1px solid var(--tss-line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

.tss-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tss-actions-bar .tss-btn {
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .tss-order-meta,
    .tss-mail {
        grid-template-columns: 1fr;
    }

    .tss-status-row select {
        min-width: 0;
        width: 100%;
    }

    .tss-totals {
        width: 100%;
        margin-left: 0;
    }
}

@media print {
    .no-print,
    #page-topbar,
    .footer,
    .tss-actions-bar,
    .tss-mail,
    .tss-status-row {
        display: none !important;
    }
}

/* =============================================================================
   Inventario (tabla anidada: no convertir a tarjetas; el JS usa display:table-row)
   ============================================================================= */

button.tss-tab {
    background: transparent;
    font-family: inherit;
    line-height: 1.2;
}

.tss-tab.active {
    background: var(--tss-primary);
    color: #fff;
}

.tss-tab.active:hover {
    color: #fff;
    background: var(--tss-primary-dark);
}

.tss-tab.active .tss-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.tss-tabs.is-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.tss-tabs.is-scroll .tss-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tss-stock-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    font-size: 0.75rem;
    color: var(--tss-muted);
    margin: 0.35rem 0 0.85rem;
}

.tss-stock-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tss-stock-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tss-stock-swatch.is-low { background: #c94b4b; }
.tss-stock-swatch.is-mid { background: #ff9800; }
.tss-stock-swatch.is-warn { background: #ffc107; }
.tss-stock-swatch.is-ok { background: #2f9e6b; }

.tss-inv-table .producto-row td {
    background: #f8fafc;
    font-weight: 600;
}

.tss-inv-table .color-row td {
    background: #f3f5f8;
}

.tss-inv-table .talla-row td {
    background: #fff;
}

.tss-inv-table .btn-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tss-primary);
    cursor: pointer;
}

.tss-inv-table .btn-expand .expand-icon {
    transition: transform 0.2s ease;
}

.tss-inv-table .btn-expand[aria-expanded="true"] .expand-icon {
    transform: rotate(90deg);
}

.tss-page .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
}

.tss-page .badge.bg-success {
    background: rgba(47, 158, 107, 0.12) !important;
    color: #216b48 !important;
}

.tss-page .badge.bg-danger {
    background: rgba(201, 75, 75, 0.12) !important;
    color: #8d2f2f !important;
}

.tss-page .badge-stock-orange {
    background: #ff9800 !important;
    color: #fff !important;
}

.tss-page .badge-stock-yellow {
    background: #ffc107 !important;
    color: #5c4300 !important;
}

.tss-export {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.tss-btn-pdf {
    background: rgba(201, 75, 75, 0.12);
    color: var(--tss-danger);
}

.tss-btn-pdf:hover {
    background: var(--tss-danger);
    color: #fff;
}

.tss-btn-excel {
    background: rgba(47, 158, 107, 0.12);
    color: var(--tss-success);
}

.tss-btn-excel:hover {
    background: var(--tss-success);
    color: #fff;
}

.tss-btn-csv {
    background: #eef2f7;
    color: var(--tss-muted);
}

.tss-btn-csv:hover {
    background: var(--tss-ink);
    color: #fff;
}

@media (max-width: 991.98px) {
    .tss-inv-table th:first-child,
    .tss-inv-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 11rem;
        box-shadow: 4px 0 8px rgba(28, 36, 48, 0.04);
    }

    .tss-inv-table thead th:first-child {
        background: #f8fafc;
    }

    .tss-inv-table .producto-row td:first-child { background: #f8fafc; }
    .tss-inv-table .color-row td:first-child { background: #f3f5f8; }
    .tss-inv-table .talla-row td:first-child { background: #fff; }

    .tss-export {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Editar producto — variantes
   ============================================================================= */

.tss-muted {
    color: var(--tss-muted);
    font-weight: 500;
}

.tss-variant-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.tss-variant-card-head h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
}

.tss-variant-media {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.tss-variant-media .tss-field {
    flex: 1;
    min-width: 0;
}

.tss-variant-photo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--tss-line);
    background: #f8fafc;
    flex-shrink: 0;
}

.tss-variant-photo.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tss-muted);
    font-size: 1.6rem;
}

.tss-product-card.tss-variant-new {
    border-style: dashed;
    background: #fbfcfe;
}

.tss-product-card.tss-variant-new::before {
    background: var(--tss-success);
}

.tss-variant-picker {
    display: grid;
    grid-template-columns: minmax(8rem, 0.9fr) minmax(0, 1.6fr) auto;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.tss-variant-picker-select {
    min-width: 0;
}

.tss-variant-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.1rem;
}

.tss-variant-pos {
    min-width: 4.5rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tss-muted);
}

.tss-variant-filter-empty {
    font-size: 0.85rem;
    color: var(--tss-muted);
    margin: 0 0 0.75rem;
}

@media (max-width: 720px) {
    .tss-variant-media {
        flex-direction: column;
    }

    .tss-variant-picker {
        grid-template-columns: 1fr;
    }

    .tss-variant-nav {
        justify-content: space-between;
    }

    .tss-variant-nav .tss-btn {
        flex: 1;
    }
}

/* =============================================================================
   Homepage
   ============================================================================= */

.tss-hero {
    position: relative;
    min-height: 38vh;
    border-radius: var(--tss-radius);
    overflow: hidden;
    background: #1c2430 center/cover no-repeat;
    margin-bottom: 1.5rem;
    box-shadow: var(--tss-shadow-sm);
}

.tss-hero-overlay {
    min-height: 38vh;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(180deg, rgba(28, 36, 48, 0.55) 0%, rgba(28, 36, 48, 0.78) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.tss-hero-overlay h1 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.tss-hero-overlay p {
    margin: 0 0 1.15rem;
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.5;
}

.tss-hero-overlay .tss-btn-primary {
    background: #fff;
    color: var(--tss-primary-dark);
    border-color: #fff;
}

.tss-hero-overlay .tss-btn-primary:hover {
    background: var(--tss-primary-soft);
    color: var(--tss-primary-dark);
}

.tss-hero.is-home {
    min-height: 50vh;
    border-radius: 0;
    margin: -1.5rem 0 1.75rem;
    box-shadow: none;
}

.tss-hero.is-home .tss-hero-overlay {
    min-height: 50vh;
    background: rgba(0, 0, 0, 0.6);
}

.tss-hero.is-home h1 {
    font-size: clamp(1.85rem, 4vw, 2.65rem);
    margin-bottom: 0.5rem;
}

.tss-hero.is-home p {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.92);
}

.tss-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.tss-charts.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tss-chart {
    position: relative;
    height: 220px;
}

.tss-chart canvas {
    max-height: 220px;
    width: 100% !important;
}

.tss-home-stats {
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .tss-charts,
    .tss-charts.is-three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .tss-stats.is-three,
    .tss-stats.is-six {
        grid-template-columns: 1fr;
    }
}

.tss-report-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.25rem;
    align-items: start;
}

.tss-report-split .tss-table-wrap {
    max-height: min(420px, 70vh);
    overflow: auto;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
}

.tss-report-chart {
    background: #fbfcfe;
    border: 1px solid var(--tss-line);
    border-radius: 12px;
    padding: 1.1rem 1.2rem 1.2rem;
    min-width: 0;
}

.tss-report-chart h3 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.tss-report-chart .tss-chart {
    height: 280px;
}

.tss-report-chart .tss-chart.is-tall {
    height: 360px;
}

.tss-report-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--tss-muted);
}

.tss-report-page .tss-page-header {
    margin-bottom: 2.5rem;
}

.tss-report-page .tss-page-header p {
    margin-top: 0.45rem;
    line-height: 1.65;
    max-width: 46rem;
}

.tss-report-snapshot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 2.75rem;
}

.tss-report-page .tss-report-snapshot .tss-card-body {
    padding: 2rem 2.1rem 2.15rem;
}

.tss-report-snapshot .tss-section-title {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}

.tss-report-snapshot .tss-choice-hint {
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.tss-report-snapshot .tss-stats,
.tss-report-period-kpis {
    gap: 1.25rem;
}

.tss-report-page .tss-stat {
    padding: 1.2rem 1.3rem;
}

.tss-report-page .tss-stat span {
    margin-bottom: 0.45rem;
}

.tss-report-page .tss-stat em {
    margin-top: 0.45rem;
    line-height: 1.4;
}

.tss-report-page .tss-stat strong {
    font-size: 1.35rem;
    line-height: 1.25;
}

.tss-report-analysis {
    border-top: 1px solid var(--tss-line);
    padding-top: 2.75rem;
}

.tss-report-filters-card {
    margin-bottom: 2rem;
}

.tss-report-page .tss-report-filters-card .tss-card-body {
    padding: 2rem 2.1rem 2.15rem;
}

.tss-report-filters-card .tss-section-head {
    margin-bottom: 1.5rem;
}

.tss-report-filters-card .tss-choice-hint {
    margin-top: 0.45rem;
    line-height: 1.5;
}

.tss-report-filters-card > .tss-card-body > .tss-tabs {
    margin-bottom: 1.75rem;
}

.tss-report-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 1.35rem 1.5rem;
    align-items: end;
    margin: 0 0 2rem;
}

.tss-report-range .tss-field {
    min-width: 0;
    gap: 0.55rem;
}

.tss-report-range .tss-field input {
    min-height: 2.75rem;
}

.tss-report-range .tss-btn {
    min-height: 2.75rem;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    white-space: nowrap;
}

.tss-report-period-kpis {
    margin: 0;
}

.tss-report-page .tss-charts {
    gap: 1.75rem;
    margin-bottom: 2rem;
}

.tss-report-trend-card {
    margin-bottom: 2rem;
}

.tss-report-page .tss-toolbar {
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.tss-report-page .tss-tabs {
    gap: 0.7rem;
    padding: 0.45rem;
}

.tss-report-page .tss-tab {
    padding: 0.7rem 1.2rem;
}

.tss-report-page #reportesTabsContent > .tab-pane {
    display: none;
}

.tss-report-page #reportesTabsContent > .tab-pane.is-visible {
    display: block;
}

.tss-table tbody tr[hidden] {
    display: none !important;
}

.tss-report-page .tss-card-body {
    padding: 1.75rem 1.85rem 1.9rem;
}

.tss-report-page .tss-section-head {
    gap: 1.1rem;
    margin-bottom: 1.35rem;
}

.tss-report-page .tss-chart {
    height: 260px;
}

.tss-report-page .tss-chart canvas {
    max-height: 260px;
}

@media (max-width: 900px) {
    .tss-report-snapshot {
        grid-template-columns: 1fr;
    }

    .tss-report-range {
        grid-template-columns: 1fr;
    }

    .tss-report-range .tss-btn {
        width: 100%;
    }
}

.tss-table tbody tr.is-clickable {
    cursor: pointer;
}

.tss-table th.is-arrow,
.tss-table td.is-arrow {
    width: 2rem;
    text-align: center;
    color: var(--tss-muted);
}

.tss-table tbody tr.is-clickable .js-cliente-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

.tss-table tbody tr.is-clickable.is-open .js-cliente-arrow {
    transform: rotate(90deg);
}

.tss-table tbody tr.is-detail td {
    background: #f8fafc;
    padding: 0.75rem 1rem 1rem;
}

.tss-report-page .tss-section-head.is-clients-filters {
    flex-direction: column;
    align-items: stretch;
}

.tss-report-page .tss-section-head.is-clients-filters .tss-toolbar-actions {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
}

.tss-report-page .tss-section-head.is-clients-filters .tss-toolbar-actions .tss-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.tss-report-page .tab-pane > .tss-tabs {
    margin-bottom: 1.25rem;
}

.tss-report-page .tab-pane > .tss-report-range {
    margin-bottom: 1.5rem;
}

.tss-table tbody tr.is-detail a {
    color: var(--tss-primary);
    font-weight: 650;
    text-decoration: none;
}

.tss-table tbody tr.is-detail a:hover {
    text-decoration: underline;
}

@media (min-width: 1200px) {
    .tss-stats.is-six {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tss-report-split {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Login y recuperación de contraseña
   ============================================================================= */

.tss-page.tss-auth-page {
    display: flex;
    align-items: center;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
}

.tss-auth {
    width: min(980px, calc(100% - 2.5rem));
    margin: 0 auto;
}

.tss-auth-card {
    display: grid;
    grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.08fr);
    background: var(--tss-surface);
    border: 1px solid var(--tss-line);
    border-radius: var(--tss-radius);
    box-shadow: var(--tss-shadow);
    overflow: hidden;
    min-height: 520px;
}

.tss-auth-visual {
    position: relative;
    min-height: 220px;
    background: #1c2430;
}

.tss-auth-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tss-auth-panel {
    padding: 2.35rem 2.4rem 2.15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.tss-auth-panel h1 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.4rem;
}

.tss-auth-panel > p,
.tss-auth-lead {
    margin: 0 0 1.35rem;
    color: var(--tss-muted);
    line-height: 1.5;
}

.tss-auth-panel .tss-fields {
    grid-template-columns: 1fr;
    margin-bottom: 0.35rem;
}

.tss-auth-panel .tss-alert {
    margin-bottom: 1rem;
}

.tss-auth-panel .text-danger,
.tss-auth-panel .field-validation-error {
    font-size: 0.8rem;
}

.tss-auth-panel input[readonly] {
    background: #f3f5f8;
    color: var(--tss-muted);
}

.tss-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.tss-auth-actions .tss-btn {
    width: 100%;
}

.tss-auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1.1rem;
}

.tss-auth-links a {
    color: var(--tss-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.tss-auth-links a:hover {
    color: var(--tss-primary-dark);
    text-decoration: underline;
}

.tss-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--tss-ink);
    margin: 0.15rem 0 0.2rem;
}

.tss-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--tss-primary);
    flex-shrink: 0;
}

.tss-check label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.tss-auth-status {
    text-align: center;
}

.tss-auth-status .tss-auth-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    background: var(--tss-primary-soft);
    color: var(--tss-primary);
}

.tss-auth-status .tss-auth-icon.is-ok {
    background: rgba(47, 158, 107, 0.12);
    color: #216b48;
}

.tss-modal-loading {
    padding: 2.4rem 1.2rem;
    text-align: center;
    color: var(--tss-muted);
}

.tss-toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2000;
    display: none;
    min-width: 260px;
    max-width: 22rem;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    border: 1px solid var(--tss-line, #e6ebf2);
    box-shadow: var(--tss-shadow, 0 10px 30px rgba(28, 36, 48, 0.06));
}

.tss-toast.is-visible {
    display: block;
}

.tss-toast.is-ok {
    background: rgba(47, 158, 107, 0.12);
    color: #216b48;
    border-color: rgba(47, 158, 107, 0.28);
}

.tss-toast.is-bad {
    background: rgba(201, 75, 75, 0.12);
    color: #8d2f2f;
    border-color: rgba(201, 75, 75, 0.28);
}

.tss-price-was {
    margin-right: 0.35rem;
    color: var(--tss-muted);
    text-decoration: line-through;
}

.tss-price-now {
    margin-right: 0.4rem;
    font-weight: 700;
    color: var(--tss-success);
}

.celda-precio-variante .tss-badge {
    vertical-align: middle;
}

@media (max-width: 767.98px) {
    .tss-auth-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .tss-auth-visual {
        min-height: 180px;
    }

    .tss-auth-panel {
        padding: 1.6rem 1.25rem 1.7rem;
    }
}