:root {
    --navy: #0f172a;
    --navy-2: #1e293b;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --cyan: #38bdf8;
    --green: #15803d;
    --green-soft: #dcfce7;
    --amber: #b45309;
    --amber-soft: #fef3c7;
    --red: #b91c1c;
    --red-soft: #fee2e2;
    --text: #111827;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --focus: #60a5fa;
    --shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
    --sidebar-width: 292px;
}



*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 8%, rgba(56, 189, 248, 0.10), transparent 24rem),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
select {
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    transform: translateY(-180%);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: #fff;
    background: var(--navy);
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

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

.break-anywhere {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Portal shell and sidebar */
.portal-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.portal-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 1.1rem;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.985), rgba(30, 41, 59, 0.985)),
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.34), transparent 20rem);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 16px 0 36px rgba(15, 23, 42, 0.08);
}

.sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.35rem 0.25rem 1rem;
}

.sidebar-brand > div:last-of-type,
.user-card-copy {
    min-width: 0;
}

.sidebar-brand strong,
.user-card-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand span,
.user-card-copy span {
    display: block;
    margin-top: 0.15rem;
    color: #aebdd0;
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.brand-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--tenant-brand-primary, var(--blue)), var(--tenant-brand-secondary, var(--cyan)));
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.35);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.sidebar-close-button {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-height: 0;
    margin: 0.15rem -0.15rem 0;
    padding: 0.15rem 0.15rem 0.65rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 46px;
    padding: 0.75rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #cbd5e1;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-link i {
    flex: 0 0 1.2rem;
    text-align: center;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.12);
}

.nav-link:active {
    transform: translateY(1px);
}

html[data-menu-text-size="compact"] .portal-sidebar .nav-link {
    min-height: 41px;
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
    font-size: 0.86rem;
}

html[data-menu-text-size="compact"] .portal-sidebar .nav-group-label {
    margin-top: 0.72rem;
    font-size: 0.62rem;
}

.sidebar-footer {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.user-card-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
}

.avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--blue);
    background: #fff;
    font-weight: 900;
}

.logout-button,
.button,
.mobile-menu-button,
.sidebar-backdrop {
    border: 0;
    font: inherit;
}

.logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(248, 113, 113, 0.28);
    border-radius: 15px;
    color: #fff;
    background: rgba(239, 68, 68, 0.16);
    font-weight: 800;
}

.logout-button:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Compact, persistent language selector */
.language-selector {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.065);
}

.language-selector-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.language-selector-controls {
    display: block;
    min-width: 0;
}

.language-selector-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 2.25rem 0.55rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    color: #334155;
    background-color: rgba(255, 255, 255, 0.96);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.portal-main {
    min-width: 0;
    width: 100%;
    padding: clamp(1.1rem, 2.8vw, 2.5rem);
}

.portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.35rem;
}

.portal-topbar > div:first-child {
    min-width: 0;
}

.portal-topbar h1 {
    margin: 0.2rem 0 0;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.eyebrow {
    display: inline-block;
    color: var(--blue);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.topbar-actions,
.hero-actions,
.card-header,
.form-actions,
.client-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.role-badge,
.secure-chip,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 30px;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    color: #1e40af;
    background: #dbeafe;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.badge.success {
    color: #166534;
    background: var(--green-soft);
}

.badge.warning {
    color: #92400e;
    background: var(--amber-soft);
}

.badge.danger {
    color: #991b1b;
    background: var(--red-soft);
}

.badge.info {
    color: #1e40af;
    background: #dbeafe;
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.alert i {
    margin-top: 0.2rem;
}

.success-alert {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.error-alert {
    color: #991b1b;
    background: var(--red-soft);
    border: 1px solid #fecaca;
}

.warning-alert {
    color: #92400e;
    background: var(--amber-soft);
    border: 1px solid #fde68a;
}

.alert[data-auto-dismiss] {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.alert.is-dismissing {
    opacity: 0;
    transform: translateY(-6px);
}

/* Content and cards */
.content-grid,
.dashboard-grid,
.metrics-row,
.service-admin-grid,
.form-grid,
.detail-grid {
    display: grid;
    min-width: 0;
}

.content-grid {
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-grid.single-column {
    grid-template-columns: minmax(0, 1fr);
}

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

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

.metrics-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.span-2 {
    grid-column: span 2;
}

.card {
    min-width: 0;
    padding: clamp(1.05rem, 2vw, 1.55rem);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.card h2,
.card h3 {
    margin: 0.25rem 0 0;
    line-height: 1.2;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.card h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.card h3 {
    font-size: 1.12rem;
}

.card p {
    margin: 0.65rem 0 0;
    color: var(--muted);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.card-header {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 1.05rem;
}

.card-header > div:first-child {
    flex: 1 1 18rem;
    min-width: 0;
}

.card-header p {
    max-width: 72ch;
}

.card-action-form {
    flex: 0 0 auto;
    margin: 0;
}

.hero-card,
.support-card-large {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    overflow: hidden;
}

.hero-card > *,
.support-card-large > * {
    position: relative;
    z-index: 1;
}

.hero-card::after,
.support-card-large::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    pointer-events: none;
}

.hero-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.status-card,
.renewal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.status-card .badge,
.renewal-card .badge {
    margin-top: auto;
}

.metric-card {
    display: grid;
    align-content: start;
    gap: 0.4rem;
}

.metric-card > span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.metric-card > strong {
    font-size: clamp(1.55rem, 3vw, 2rem);
    letter-spacing: -0.04em;
}

.metric-card p {
    margin: 0;
    font-size: 0.84rem;
}

.icon-metric {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value"
        "detail detail";
    align-items: center;
}

.icon-metric .metric-icon {
    grid-area: icon;
}

.icon-metric > span {
    grid-area: label;
}

.icon-metric > strong {
    grid-area: value;
}

.icon-metric > p {
    grid-area: detail;
}

.metric-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    color: var(--blue);
    background: var(--blue-soft);
}

.detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.detail-grid.single {
    grid-template-columns: minmax(0, 1fr);
}

.detail-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-grid > div {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.detail-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.detail-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.service-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.compact-services {
    grid-template-columns: minmax(0, 1fr);
}

.service-admin-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.service-admin-card > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.75rem;
    border-radius: 14px;
    color: var(--blue);
    background: #dbeafe;
}

.service-admin-card h3 {
    margin-top: 0;
}

.service-admin-card .inline-status-form {
    margin-top: 1rem;
}

.service-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.service-card-heading > div {
    min-width: 0;
}

.status-stack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.status-stack > span:not(.badge) {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.clean-list {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    color: #334155;
    line-height: 1.6;
}

.text-link {
    color: var(--blue-dark);
    font-weight: 800;
    text-underline-offset: 0.18em;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    max-width: 100%;
    padding: 0.72rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 13px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}

.button.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}

.button.primary:hover {
    background: linear-gradient(135deg, var(--blue-dark), #1e40af);
}

.button.secondary {
    color: var(--blue-dark);
    background: #fff;
    border-color: #bfdbfe;
}

.button.secondary:hover {
    background: var(--blue-soft);
}

.button.danger {
    color: #fff;
    background: #b91c1c;
    border-color: #991b1b;
}

.button.danger:hover {
    background: #991b1b;
}

.button.cancel {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
}

.button.cancel:hover {
    color: #fff;
    background: #b91c1c;
    border-color: #991b1b;
}

.button.small {
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
}

/* Botón compartido de acción solo con icono. Varias tablas y calendarios usan .icon-button;
   mantenerlo alineado con el lenguaje visual del portal y evitar el render nativo de <button>. */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: var(--blue-dark);
    background: #fff;
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.icon-button:hover {
    background: var(--blue-soft);
    border-color: #93c5fd;
}

.icon-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.icon-button:active {
    transform: translateY(1px);
}

.icon-button.danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff;
}

.icon-button.danger:hover {
    color: #991b1b;
    border-color: #fca5a5;
    background: #fef2f2;
}

.icon-button:disabled,
.icon-button[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Base visual compartida para select. Cada select nativo del portal autenticado hereda
   el mismo lenguaje de controles; los componentes especializados solo ajustan dimensiones o layout. */
.portal-shell select:not(.language-selector-select) {
    min-width: 0;
    min-height: 44px;
    padding: 0.68rem 2.55rem 0.68rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background-color: var(--control-bg, #fff);
    outline: none;
    line-height: 1.25;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.portal-shell select:not([multiple]):not([size]):not(.language-selector-select) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.78rem center;
    background-size: 1rem;
}

.portal-shell select:not(.language-selector-select):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
}

.portal-shell select:not(.language-selector-select):focus,
.portal-shell select:not(.language-selector-select):focus-visible {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
    outline: none;
}

.portal-shell select:not(.language-selector-select):disabled,
.portal-shell select:not(.language-selector-select)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.68;
    background-color: var(--surface-soft);
}

.portal-shell select[multiple] {
    padding-right: 0.8rem;
}

.portal-shell select option {
    color: var(--text);
    background: var(--control-bg, #fff);
}

/* Forms */
.management-form {
    display: grid;
    gap: 1.1rem;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.form-field {
    display: grid;
    align-content: start;
    gap: 0.42rem;
    min-width: 0;
}

.form-field.span-full,
.span-full {
    grid-column: 1 / -1;
}

.form-field label {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea,
.inline-status-form select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.72rem 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: var(--text);
    background: #fff;
    outline: none;
}

.form-field textarea {
    min-height: 7rem;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.inline-status-form select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: #ef4444;
}

.field-help {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.form-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.validation-summary,
.field-validation,
.field-validation-error {
    color: var(--red);
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.validation-summary:empty,
.field-validation:empty {
    display: none;
}

.validation-summary ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.inline-status-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: min(100%, 250px);
}

.inline-status-form select {
    flex: 1 1 9rem;
    padding: 0.52rem 0.62rem;
}

.client-actions {
    align-items: stretch;
    flex-wrap: wrap;
}

.client-actions form:not(.inline-status-form) {
    display: flex;
}

.uppercase-input {
    text-transform: uppercase;
}

/* Tables */
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-wrap:focus-visible {
    outline-offset: 2px;
}

.portal-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
}

.table-wrap.compact .portal-table {
    min-width: 560px;
}

.portal-table th,
.portal-table td {
    padding: 0.82rem 0.9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.portal-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #475569;
    background: #f8fafc;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

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

.portal-table tbody tr:hover {
    background: #f8fafc;
}

.portal-table td > span:not(.badge) {
    display: block;
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.77rem;
}

.verification-code-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 210px;
}

.verification-code-cell code {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.verification-code-cell small {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 0.72rem;
}

.text-muted {
    color: var(--muted);
    font-size: 0.82rem;
}

/* Progress */
progress {
    width: 100%;
    height: 0.65rem;
    margin-top: 0.5rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e2e8f0;
}

progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

/* Empty, error, and public pages */
.empty-state {
    width: 100%;
    padding: 1.8rem;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    color: var(--muted);
    background: var(--surface-soft);
    text-align: center;
}

.empty-state > i {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--blue);
    font-size: 2.3rem;
}

.error-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 6rem);
    min-height: calc(100dvh - 6rem);
    padding: 1rem;
}

.error-page .empty-state {
    max-width: 560px;
    padding: clamp(1.5rem, 5vw, 3rem);
    border-style: solid;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.error-page .empty-state h1 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.65rem, 5vw, 2.4rem);
    line-height: 1.15;
}

.error-page .empty-state p {
    margin: 0.8rem auto 1.2rem;
    color: var(--muted);
    line-height: 1.65;
}

.status-code {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.public-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.public-language-bar {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 4vw, 2rem) 0;
}

.public-language-bar .language-selector {
    width: min(100%, 300px);
    color: var(--text);
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.public-language-bar .language-selector-label {
    color: #475569;
}

.public-language-bar .language-selector-controls {
    display: block;
    min-width: 0;
}

.language-selector-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 2.25rem 0.55rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    color: #334155;
    background-color: rgba(255, 255, 255, 0.96);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.public-main {
    min-width: 0;
}

.public-form-page {
    min-height: calc(100vh - 5rem);
    min-height: calc(100dvh - 5rem);
    padding: clamp(1rem, 4vw, 3rem);
}

.public-form-card {
    width: min(100%, 1050px);
    margin: 0 auto;
    padding: clamp(1.1rem, 3vw, 2.35rem);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
}

.public-form-card .registration-brand-logo {
    display: block;
    width: 64px;
    height: 64px;
    max-width: 100%;
    margin-bottom: 0.75rem;
    border-radius: 14px;
    object-fit: contain;
}

.public-form-card h1 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    line-height: 1.15;
}

.management-split {
    align-items: start;
}

/* Mobile navigation */
.mobile-menu-button,
.sidebar-backdrop {
    display: none;
}

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

    .metrics-row,
    .admin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 1080px) {
    :root {
        --sidebar-width: 264px;
    }

    .content-grid.two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-card,
    .support-card-large {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-actions {
        width: 100%;
    }
}

@media (max-width: 960px) {
    .language-option,
    .button.small {
        min-height: 44px;
    }

    .portal-shell {
        display: block;
    }

    .portal-main {
        padding-bottom: 5.5rem;
    }

    .portal-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(330px, 90vw);
        height: 100vh;
        height: 100dvh;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
        box-shadow: 22px 0 55px rgba(15, 23, 42, 0.34);
    }

    .portal-sidebar.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.22s ease;
    }

    .sidebar-close-button {
        display: grid;
        place-items: center;
    }

    .mobile-menu-button {
        position: fixed;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 50;
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 17px;
        color: #fff;
        background: var(--blue);
        box-shadow: 0 16px 32px rgba(37, 99, 235, 0.32);
    }

    body.nav-open .mobile-menu-button {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar-backdrop.open {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(15, 23, 42, 0.58);
        backdrop-filter: blur(2px);
    }

    body.nav-open {
        overflow: hidden;
    }

    .service-admin-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .portal-main {
        padding: 1rem 1rem 5.5rem;
    }

    .portal-topbar {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    .topbar-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dashboard-grid,
    .metrics-row,
    .admin-metrics,
    .form-grid,
    .detail-grid,
    .detail-grid.four {
        grid-template-columns: minmax(0, 1fr);
    }

    .span-2 {
        grid-column: auto;
    }

    .form-actions,
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .button,
    .hero-actions .button,
    .card-action-form,
    .card-action-form .button {
        width: 100%;
    }

    .inline-status-form {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    .client-actions,
    .client-actions form,
    .client-actions .button {
        width: 100%;
    }

    .public-language-bar {
        justify-content: stretch;
        padding: 0.75rem 1rem 0;
    }

    .public-language-bar .language-selector {
        width: 100%;
    }

    .public-form-page {
        padding: 1rem;
    }

    .public-form-card {
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .portal-main {
        padding-inline: 0.75rem;
    }

    .card {
        padding: 1rem;
        border-radius: 20px;
    }

    .role-badge,
    .secure-chip {
        flex: 1 1 auto;
        justify-content: center;
    }

    .language-option {
        font-size: 0.72rem;
    }

    .service-card-heading,
    .card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .card-header .button {
        width: 100%;
    }

    .empty-state {
        padding: 1.35rem 1rem;
    }
}

@media (max-width: 960px) and (max-height: 600px) {
    .portal-sidebar {
        padding: 0.5rem;
    }

    .sidebar-brand {
        padding: 0.15rem 0.15rem 0.35rem;
    }

    .sidebar-brand span,
    .user-card-copy span {
        display: none;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .sidebar-nav {
        padding-bottom: 0.35rem;
    }

    .nav-link {
        min-height: 44px;
        padding-block: 0.5rem;
        border-radius: 12px;
        font-size: 0.84rem;
    }

    .sidebar-footer {
        gap: 0.3rem;
        padding-top: 0.3rem;
    }

    .portal-sidebar .language-selector {
        gap: 0.2rem;
        padding: 0.3rem;
    }

    .portal-sidebar .language-selector-label {
        justify-content: center;
        min-height: 16px;
    }

    .portal-sidebar .language-selector-label span {
        display: none;
    }

    .user-card-mini {
        padding: 0.4rem;
    }

    .avatar {
        width: 34px;
        height: 34px;
    }

    .logout-button {
        min-height: 44px;
        padding-block: 0.45rem;
    }
}

@media (max-height: 760px) and (min-width: 961px) {
    .portal-sidebar {
        padding: 0.75rem;
    }

    .sidebar-brand {
        padding-bottom: 0.55rem;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .nav-link {
        min-height: 44px;
        padding-block: 0.52rem;
        border-radius: 12px;
        font-size: 0.88rem;
    }

    .sidebar-footer {
        gap: 0.45rem;
        padding-top: 0.45rem;
    }

    .portal-sidebar .language-selector {
        gap: 0.25rem;
        padding: 0.4rem;
    }

    .portal-sidebar .language-selector-label {
        font-size: 0.67rem;
    }

    .portal-sidebar .language-option {
        min-height: 44px;
        padding-block: 0.3rem;
        font-size: 0.7rem;
    }

    .user-card-mini {
        padding: 0.55rem;
    }

    .avatar {
        width: 34px;
        height: 34px;
    }

    .logout-button {
        min-height: 44px;
        padding-block: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* DataTables integration: mantiene la identidad visual del portal y evita overflow en mobile. */
.datatable-filter-bar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.datatable-status-filter {
    width: min(100%, 220px);
}

.datatable-wrap {
    overflow: visible;
}

.datatable-responsive {
    min-width: 0;
}

.dt-container {
    width: 100%;
    min-width: 0;
    color: var(--text);
}

.dt-container .dt-layout-row {
    gap: 0.75rem;
    margin: 0.85rem 0;
}

.dt-container .dt-layout-row:first-child {
    margin-top: 0;
}

.dt-container .dt-search,
.dt-container .dt-length {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.dt-container .dt-search input,
.dt-container .dt-length select {
    min-height: 42px;
    margin-left: 0.45rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 11px;
    color: var(--text);
    background: #fff;
    outline: none;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dt-container .dt-info {
    color: var(--muted);
    font-size: 0.8rem;
}

.dt-container .dt-paging .dt-paging-button {
    min-width: 40px;
    min-height: 40px;
    margin: 0 0.12rem;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    background: #fff !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover {
    color: #fff !important;
    border-color: var(--blue) !important;
    background: var(--blue) !important;
}

.dt-container table.dataTable.portal-table {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.dt-container table.dataTable.portal-table > tbody > tr.child ul.dtr-details {
    width: 100%;
}

.dt-container table.dataTable.portal-table > tbody > tr.child span.dtr-title {
    min-width: 9rem;
    color: #475569;
    font-weight: 800;
}

.dt-container table.dataTable.portal-table > tbody > tr.child span.dtr-data {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .datatable-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .datatable-status-filter {
        width: 100%;
    }

    .dt-container .dt-layout-row {
        align-items: stretch;
        flex-direction: column;
    }

    .dt-container .dt-layout-cell {
        width: 100%;
    }

    .dt-container .dt-search,
    .dt-container .dt-length {
        display: grid;
        gap: 0.4rem;
        width: 100%;
    }

    .dt-container .dt-search input,
    .dt-container .dt-length select {
        width: 100%;
        margin-left: 0;
    }

    .dt-container .dt-paging {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .dt-container .dt-info {
        text-align: center;
    }
}

/* Shared management dialogs and compact table actions. */
.portal-modal {
    width: min(760px, calc(100vw - 2rem));
    max-width: 100%;
    max-height: min(90vh, 900px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    color: var(--text);
    background: transparent;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
    overflow: visible;
}

.portal-modal::backdrop {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(4px);
}

.portal-modal-card {
    display: grid;
    gap: 0;
    max-height: min(90vh, 900px);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: var(--surface);
}

.portal-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.4rem 1rem;
    border-bottom: 1px solid var(--line);
}

.portal-modal-header h2,
.portal-modal-header p {
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.portal-modal-card > .management-form {
    max-height: calc(90vh - 180px);
    padding: 1.25rem 1.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.portal-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 1rem 1.4rem 1.25rem;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.98);
}

.modal-close-button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.modal-close-button:hover {
    color: #fff;
    border-color: #991b1b;
    background: #b91c1c;
}

/* Los controles booleanos dentro de formularios no heredan la altura de los inputs de texto. */
.portal-modal input[type="checkbox"],
.management-form input[type="checkbox"] {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    min-inline-size: 1.1rem;
    min-block-size: 1.1rem;
    min-height: 0;
    padding: 0;
    accent-color: var(--blue);
}

/* Diagnóstico operativo: tarjetas legibles en una sola fila y tabla sin textos unidos. */
.automatic-process-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.automatic-process-metric {
    min-width: 0;
    padding: 1rem;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.automatic-process-metric.is-healthy .metric-icon { color: #15803d; background: #dcfce7; }
.automatic-process-metric.is-attention .metric-icon { color: #b45309; background: #fef3c7; }
.automatic-process-metric.is-email .metric-icon { color: #0369a1; background: #e0f2fe; }
.automatic-process-metric.is-backlog .metric-icon { color: #6d28d9; background: #ede9fe; }
.automatic-process-table { min-width: 1120px; }
.automatic-process-table th:nth-child(1) { width: 31%; }
.automatic-process-table th:nth-child(2) { width: 10%; }
.automatic-process-table th:nth-child(3),
.automatic-process-table th:nth-child(4) { width: 13%; }
.automatic-process-table th:nth-child(5) { width: 20%; }
.automatic-process-table th:nth-child(6) { width: 13%; }
.automatic-process-name { gap: .35rem; }
.automatic-process-name strong,
.automatic-process-name small { display: block; }
.automatic-process-name small { min-width: 0; line-height: 1.45; }
.table-value-stack { display: grid; gap: .25rem; align-content: start; }
.table-value-stack small { color: var(--muted); }
.automatic-process-counters span { display: block; white-space: nowrap; }
.automatic-process-health-badge,
.automatic-process-date { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.automatic-process-generated { margin: .85rem 0 0; }

.email-failure-metrics {
    grid-template-columns: minmax(180px, .65fr) minmax(180px, .65fr) minmax(420px, 2fr);
}

.email-configuration-card {
    padding: 1rem;
    border-radius: 18px;
}

.email-configuration-card.is-ready { border-color: rgba(22, 163, 74, .35); }
.email-configuration-card.is-error { border-color: rgba(220, 38, 38, .35); }
.email-configuration-heading { display: flex; align-items: center; gap: .75rem; }
.email-configuration-heading > div { display: grid; gap: .15rem; }
.email-configuration-heading strong { font-size: 1.05rem; }
.email-configuration-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0 0;
}
.email-configuration-details div { min-width: 0; }
.email-configuration-details dt { color: var(--muted); font-size: .76rem; font-weight: 700; }
.email-configuration-details dd { margin: .2rem 0 0; font-weight: 700; overflow-wrap: anywhere; }
.email-failures-table { min-width: 1240px; table-layout: fixed; }
.email-failures-table th:nth-child(1) { width: 20%; }
.email-failures-table th:nth-child(2) { width: 13%; }
.email-failures-table th:nth-child(3) { width: 12%; }
.email-failures-table th:nth-child(4) { width: 7%; }
.email-failures-table th:nth-child(5) { width: 16%; }
.email-failures-table th:nth-child(6) { width: 22%; }
.email-failures-table th:nth-child(7) { width: 10%; }
.email-failures-table .badge,
.email-failures-table .button { white-space: nowrap; }
.email-failure-error small { overflow-wrap: anywhere; line-height: 1.45; }
.technical-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.empty-state-cell { padding: 2rem; text-align: center; color: var(--muted); }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: .65rem; margin-top: 1rem; }
.pagination .disabled { pointer-events: none; opacity: .45; }

/* El catálogo conserva palabras y códigos completos; en pantallas estrechas se desplaza la tabla. */
.commercial-plans-table { min-width: 1120px; table-layout: fixed; }
.commercial-plans-table .plan-code-column { width: 145px; }
.commercial-plans-table .plan-name-column { width: auto; }
.commercial-plans-table .plan-status-column { width: 105px; }
.commercial-plans-table .plan-price-column { width: 155px; }
.commercial-plans-table .plan-period-column { width: 125px; }
.commercial-plans-table .plan-count-column { width: 130px; }
.commercial-plans-table .plan-actions-column { width: 145px; }
.commercial-plans-table code,
.commercial-plans-table .badge,
.commercial-plans-table th {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
.commercial-plans-table .table-primary-cell small { min-width: 0; }

@media (max-width: 1100px) {
    .automatic-process-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .email-failure-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .email-configuration-card { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .automatic-process-metrics { grid-template-columns: minmax(0, 1fr); }
    .email-failure-metrics { grid-template-columns: minmax(0, 1fr); }
    .email-configuration-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.table-actions .button.small {
    min-height: 36px;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    font-size: 0.78rem;
}

.table-primary-cell {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.table-primary-cell small {
    color: var(--muted);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.header-actions-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.header-actions-wrap form {
    margin: 0;
}

.datatable-filter-bar-multiple {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.form-field small {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

/* Módulo Tickets: layout centrado en la conversación, utilizable en escritorio y móvil. */
.support-summary-grid {
    align-items: stretch;
}

.ticket-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    align-items: start;
}

.ticket-thread-card,
.ticket-admin-panel {
    min-width: 0;
}

.ticket-thread {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.ticket-message {
    width: min(88%, 760px);
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.ticket-message.admin-message,
.ticket-message.other-user-message {
    justify-self: start;
    border-top-left-radius: 7px;
}

.ticket-message.client-message,
.ticket-message.current-user-message {
    justify-self: end;
    border-color: rgba(37, 99, 235, 0.16);
    border-top-right-radius: 7px;
    background: var(--blue-soft);
}

.ticket-message-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.ticket-message-meta strong {
    color: var(--text);
    font-size: 0.82rem;
}

.ticket-message-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 10px;
    color: var(--blue-dark);
    background: #fff;
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ticket-reply-form {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

.ticket-reply-form textarea {
    width: 100%;
    resize: vertical;
}

.ticket-reply-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ticket-reply-actions input[type="file"] {
    min-width: 0;
    max-width: 100%;
}

.ticket-admin-panel {
    position: sticky;
    top: 1rem;
}

.ticket-metadata {
    margin-top: 1rem;
}

@media (max-width: 960px) {
    .ticket-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ticket-admin-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .portal-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .portal-modal-card {
        max-height: calc(100dvh - 1rem);
        border-radius: 18px;
    }

    .portal-modal-card > .management-form {
        max-height: calc(100dvh - 175px);
        padding: 1rem;
    }

    .portal-modal-header,
    .portal-modal-actions {
        padding-inline: 1rem;
    }

    .header-actions-wrap,
    .ticket-reply-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .header-actions-wrap > *,
    .header-actions-wrap form,
    .header-actions-wrap .button,
    .ticket-reply-actions .button {
        width: 100%;
    }

    .ticket-message {
        width: 96%;
    }

    .ticket-message-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .table-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .table-actions .button,
    .table-actions form {
        width: 100%;
    }
}

/* Modal del editor de clientes: reutiliza el lenguaje visual de diálogos del portal sin alterar el layout de la página. */
.portal-modal-wide {
    width: min(1040px, calc(100vw - 2rem));
}

.portal-modal-form-host {
    min-height: 120px;
}

.portal-modal-form-host > .management-form {
    max-height: calc(90vh - 110px);
    padding: 1.25rem 1.4rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}


@media (max-width: 760px) {
    .portal-modal-form-host > .management-form {
        max-height: calc(100dvh - 105px);
        padding: 1rem 1rem 0;
    }
}

/* Dashboard support queues */
.dashboard-support-section {
    margin-top: 1rem;
}

.dashboard-ticket-list {
    display: grid;
    gap: 0.65rem;
}

.dashboard-ticket-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: inherit;
    background: var(--surface-soft);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.dashboard-ticket-item:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--blue-soft);
}

.dashboard-ticket-item > div:first-child {
    min-width: 0;
}

.dashboard-ticket-item strong,
.dashboard-ticket-item span {
    display: block;
}

.dashboard-ticket-item strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-ticket-item > div:first-child > span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.dashboard-ticket-badges {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
}

/* Ticket image attachments */
.ticket-attachment-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.7rem;
}

.ticket-attachment-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.ticket-attachment-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--surface-soft);
}

.ticket-attachment-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.18s ease;
}

.ticket-attachment-thumbnail:hover img {
    transform: scale(1.03);
}

.ticket-attachment-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
}

.ticket-attachment-caption span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachment-caption a {
    flex: 0 0 auto;
    color: var(--blue);
}

.image-preview-card {
    width: min(94vw, 1040px);
}

.ticket-image-preview-stage {
    display: grid;
    place-items: center;
    min-height: 240px;
    max-height: 78vh;
    padding: 0.75rem;
    overflow: auto;
    background: #0b1220;
    border-radius: 16px;
}

.ticket-image-preview-stage img {
    width: auto;
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.billing-summary-grid .metric-value-small {
    font-size: clamp(1rem, 2vw, 1.35rem);
    overflow-wrap: anywhere;
}

.muted-text {
    color: var(--muted);
}

@media (max-width: 720px) {
    .dashboard-ticket-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-ticket-badges {
        width: 100%;
        flex-wrap: wrap;
    }

    .ticket-attachment-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .ticket-attachment-gallery {
        grid-template-columns: 1fr;
    }
}

/* Diagnósticos comunes de DataTables, con presentación coherente con las alertas del portal. */
.datatable-error-banner {
    margin-bottom: 1rem;
}

.available-service-catalog {
    align-items: stretch;
}

.available-service-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.available-plan-list {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.available-plan-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: .9rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: .8rem;
}

.available-plan-item h4 {
    margin: .15rem 0 .25rem;
}

.available-price-list {
    display: grid;
    gap: .4rem;
    text-align: right;
}

.available-price-item {
    display: grid;
    gap: .1rem;
}

.available-price-item span {
    font-size: .82rem;
    color: var(--muted-text, #6b7280);
}

.compact-empty-state {
    padding: .75rem;
}

@media (max-width: 720px) {
    .available-plan-item {
        grid-template-columns: 1fr;
    }

    .available-price-list {
        text-align: left;
    }
}

/* Snapshots de métodos de pago en solo lectura. La gestión de tarjetas permanece delegada al proveedor de pagos. */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.payment-method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-soft);
}

.payment-method-card > div:first-child {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.payment-method-card strong {
    overflow-wrap: anywhere;
}

.payment-method-card > div:first-child span {
    color: var(--muted);
    font-size: 0.82rem;
}

@media (max-width: 520px) {
    .payment-method-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-method-card .status-stack {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Safe 5 finishing pass: collapsible desktop navigation, settings language picker and footer. */
.sidebar-collapse-button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 13px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-collapse-button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.portal-shell.sidebar-collapsed {
    --sidebar-width: 82px;
}

.portal-shell.sidebar-collapsed .portal-sidebar {
    padding-inline: 0.65rem;
}

.portal-shell.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
}

.portal-shell.sidebar-collapsed .brand-mark,
.portal-shell.sidebar-collapsed .sidebar-brand-copy,
.portal-shell.sidebar-collapsed .nav-label,
.portal-shell.sidebar-collapsed .user-card-copy,
.portal-shell.sidebar-collapsed .logout-label {
    display: none;
}

.portal-shell.sidebar-collapsed .sidebar-collapse-button {
    margin-left: 0;
}

.portal-shell.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-inline: 0.65rem;
}

.portal-shell.sidebar-collapsed .nav-link i {
    flex-basis: auto;
    font-size: 1.05rem;
}

.portal-shell.sidebar-collapsed .user-card-mini {
    justify-content: center;
    padding-inline: 0.4rem;
}

.portal-shell.sidebar-collapsed .logout-button {
    padding-inline: 0.4rem;
}

.portal-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.portal-content {
    flex: 1 0 auto;
    min-width: 0;
}

.portal-footer {
    flex: 0 0 auto;
    margin-top: 2rem;
    padding: 1.25rem 0 0.25rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}


.language-selector-select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 2.25rem 0.55rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    color: #334155;
    background-color: rgba(255, 255, 255, 0.96);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.info-alert {
    color: #1e40af;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.ticket-reopen-notice {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Diálogo de precios de servicios disponibles. La acción de compra permanece deliberadamente
   desconectada de Stripe hasta implementar la fase correspondiente de checkout. */
.available-service-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.pricing-dialog-content {
    display: grid;
    gap: 1rem;
    max-height: calc(90vh - 120px);
    padding: 1.25rem 1.4rem 1.4rem;
    overflow-y: auto;
}

.pricing-plan-grid {
    display: grid;
    gap: 0.9rem;
}

.pricing-plan-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.pricing-plan-card h3,
.pricing-plan-card p {
    margin: 0;
}

.pricing-option-list {
    display: grid;
    gap: 0.55rem;
}

.pricing-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.pricing-option-copy {
    display: grid;
    gap: 0.1rem;
}

.pricing-option-copy span {
    color: var(--muted);
    font-size: 0.78rem;
}

.pricing-checkout-pending {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

@media (max-width: 960px) {
    .sidebar-collapse-button {
        display: none;
    }

    .portal-shell.sidebar-collapsed {
        --sidebar-width: 292px;
    }
}

@media (max-width: 900px) {
    .two-factor-setup-grid {
        grid-template-columns: 1fr;
    }

    .two-factor-setup-grid > .two-factor-step:nth-child(3) {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .pricing-option {
        align-items: stretch;
        flex-direction: column;
    }
}

.pricing-option.selected {
    border-color: rgba(37, 99, 235, 0.55);
    background: var(--blue-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.public-footer {
    padding: 1rem 1rem 1.5rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

/* Los grupos de navegación por dominio mantienen el sidebar fácil de revisar sin introducir menús anidados. */
.nav-group-label {
    display: block;
    margin: 1rem 0.85rem 0.35rem;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.portal-shell.sidebar-collapsed .nav-group-label {
    height: 1px;
    margin: 0.75rem 0.7rem 0.35rem;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.25);
    color: transparent;
}

.settings-preferences-panel { grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.settings-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.settings-notification-switch { padding: .72rem .8rem; gap: .7rem; min-height: 76px; }
.settings-notification-switch .appearance-switch { width: 42px; height: 24px; }
.settings-notification-switch .appearance-switch::after { width: 18px; height: 18px; top: 3px; left: 3px; }
.settings-notification-switch > input:checked + .appearance-switch::after { transform: translateX(18px); }
.settings-notification-switch > span:last-child { min-width: 0; }
.settings-notification-switch strong,
.settings-notification-switch small { overflow-wrap: anywhere; }
.appearance-menu-size-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1rem; }
.appearance-menu-size-setting > div:first-child { display: grid; gap: .3rem; }
.appearance-menu-size-setting small { color: var(--muted); }
@media (max-width: 760px) { .settings-toggle-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .appearance-menu-size-setting { grid-template-columns: 1fr; } }

.communication-history { display: grid; gap: .75rem; }
.branding-color-usage { margin: .25rem 0 1rem; }
.staff-communication-list { display: grid; gap: .8rem; }
.staff-communication-card { overflow: hidden; border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px; background: var(--surface, #fff); }
.staff-communication-card summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 1rem; cursor: pointer; list-style: none; }
.staff-communication-card summary::-webkit-details-marker { display: none; }
.staff-communication-card summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--muted); }
.staff-communication-card[open] summary::after { transform: rotate(180deg); }
.staff-communication-card summary small { color: var(--muted); }
.staff-communication-card .communication-rendered-content { padding: 1rem; border-top: 1px solid var(--border-color, #e5e7eb); }
@media (max-width: 760px) { .staff-communication-card summary { grid-template-columns: auto 1fr; } .staff-communication-card summary small { grid-column: 1 / -1; } }
.communication-history-item { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; }
.communication-history-item > div:first-child { display: grid; gap: .25rem; }
.communication-history-item span { color: var(--muted-text, #64748b); font-size: .88rem; }
@media (max-width: 760px) { .communication-history-item { flex-direction: column; } }

.reports-visual-grid { align-items: stretch; }
.report-chart-card { min-width: 0; }
.report-bar-list { display: grid; gap: .95rem; }
.report-bar-row { display: grid; gap: .4rem; }
.report-bar-row > div:first-child { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.report-bar-track { height: .55rem; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, .18); }
.report-bar-track > span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: currentColor; color: #2563eb; }
.revenue-bars .report-bar-track > span { color: #0f766e; }

.dashboard-attention-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dashboard-attention-item { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; background: var(--card-bg, #fff); color: inherit; text-decoration: none; }
.dashboard-attention-item i { width: 1.5rem; text-align: center; }
.dashboard-attention-item:hover { border-color: currentColor; }
@media (max-width: 760px) { .dashboard-attention-strip { grid-template-columns: 1fr; } }

.topbar-notification-menu { position: relative; }
.notification-bell { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 999px; border: 1px solid var(--border-color, #e5e7eb); color: inherit; background: var(--surface, #fff); font: inherit; text-decoration: none; cursor: pointer; }
.notification-bell:hover,
.notification-bell[aria-expanded="true"] { border-color: var(--tenant-brand-primary, var(--blue)); color: var(--tenant-brand-primary, var(--blue)); background: var(--blue-soft); }
.notification-badge { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; display: inline-grid; place-items: center; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; }
.topbar-notification-dropdown { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 80; width: min(23rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--border-color, #e5e7eb); border-radius: 16px; background: var(--surface, #fff); box-shadow: 0 22px 55px rgba(15, 23, 42, .18); }
.topbar-notification-dropdown[hidden] { display: none; }
.topbar-notification-dropdown-header { padding: .9rem 1rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.topbar-notification-dropdown-header strong { font-size: .92rem; }
.topbar-notification-dropdown-list { display: grid; }
.topbar-notification-item { margin: 0; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.topbar-notification-item-button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; width: 100%; padding: .85rem 1rem; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.topbar-notification-item-button:hover,
.topbar-notification-item-button:focus-visible { background: var(--surface-soft); }
.topbar-notification-item-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 9px; color: var(--tenant-brand-primary, var(--blue)); background: var(--blue-soft); }
.topbar-notification-item-copy { display: grid; min-width: 0; gap: .18rem; }
.topbar-notification-item-copy strong,
.topbar-notification-item-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-notification-item-copy strong { font-size: .86rem; }
.topbar-notification-item-copy > span { color: var(--text-muted); font-size: .79rem; }
.topbar-notification-item-copy time { color: var(--text-muted); font-size: .72rem; }
.topbar-notification-empty { margin: 0; padding: 1.4rem 1rem; color: var(--text-muted); text-align: center; font-size: .86rem; }
.topbar-notification-dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; color: var(--tenant-brand-primary, var(--blue)); font-size: .84rem; font-weight: 800; text-decoration: none; }
.topbar-notification-dropdown-footer:hover { background: var(--blue-soft); }
.notification-list { display: grid; gap: .75rem; }
.notification-item { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; padding: 1rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; }
.notification-item.unread { border-inline-start: 4px solid #2563eb; }
.notification-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 10px; background: rgba(37, 99, 235, .1); }
.notification-copy { display: grid; gap: .25rem; }
.notification-copy p { margin: 0; }
.notification-copy time { color: var(--muted-text, #64748b); font-size: .82rem; }
.communication-body { line-height: 1.7; }
@media (max-width: 640px) { .notification-item { grid-template-columns: auto 1fr; } .notification-actions { grid-column: 1 / -1; } }

/* Closing iteration UX refinements: DataTables spacing, modal consistency, charts and avatars. */
:root {
    --chart-1: var(--green);
    --chart-2: var(--blue);
    --chart-3: var(--amber);
    --chart-4: #94a3b8;
}

/* Mantener los controles de DataTables separados de los bordes de la tarjeta. */
.dt-container > .dt-layout-row:first-child {
    padding: 0 0.75rem;
    margin-bottom: 1rem;
}

.dt-container .dt-search input {
    min-width: min(260px, 34vw);
}

.dt-container .dt-length select {
    min-width: 68px;
    padding-right: 1.9rem;
}

@media (max-width: 760px) {
    .dt-container > .dt-layout-row:first-child {
        padding: 0 0.25rem;
    }

    .dt-container .dt-search input {
        min-width: 0;
    }
}

/* Las acciones de cancelación mantienen coherencia visual entre los diálogos de gestión. */
.portal-modal-actions .modal-cancel-button,
.portal-modal-actions [data-dialog-close].button,
.portal-modal-actions [data-payment-method-close].button {
    color: var(--text);
    border-color: var(--line);
    background: var(--control-bg);
    box-shadow: none;
}

.portal-modal-actions .modal-cancel-button:hover,
.portal-modal-actions [data-dialog-close].button:hover,
.portal-modal-actions [data-payment-method-close].button:hover {
    color: var(--text);
    border-color: var(--blue);
    background: var(--surface-hover);
}

/* Desplazar ligeramente las barras de scroll hacia el interior para evitar recortes en esquinas redondeadas del diálogo. */
.portal-modal-card > .management-form,
.portal-modal-form-host > .management-form {
    scrollbar-gutter: stable;
    margin-right: 0.35rem;
}

.portal-modal-card > .management-form::-webkit-scrollbar,
.portal-modal-form-host > .management-form::-webkit-scrollbar {
    width: 10px;
}

.portal-modal-card > .management-form::-webkit-scrollbar-thumb,
.portal-modal-form-host > .management-form::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #94a3b8;
    background-clip: padding-box;
}

/* Profile/avatar presentation. */
.avatar {
    overflow: hidden;
}

.avatar img,
.profile-avatar-preview img,
.ticket-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-card {
    min-width: 0;
}

.profile-avatar-layout {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.profile-avatar-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--tenant-brand-primary, var(--blue)), var(--tenant-brand-secondary, var(--cyan)));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    font-size: 1.75rem;
    font-weight: 800;
}

.profile-avatar-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.profile-avatar-upload-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 0.6rem 0.75rem;
}

.profile-avatar-upload-form label {
    grid-column: 1 / -1;
    font-weight: 700;
}

.profile-avatar-upload-form input[type="file"] {
    min-width: 0;
    max-width: 100%;
}

.ticket-message-author {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.ticket-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--tenant-brand-primary, var(--blue)), var(--tenant-brand-secondary, var(--cyan)));
    font-size: 0.72rem;
    font-weight: 800;
}

/* Reportes: distintos tipos de gráficos con animaciones ligeras de entrada y sin dependencia adicional de gráficos. */
.report-chart-animated {
    opacity: 1;
    transform: none;
}

.report-chart-animated.is-animated {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.report-chart-animated.is-animated.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.report-bar-fill {
    width: var(--target-width);
}

.report-chart-animated.is-animated .report-bar-fill {
    width: 0;
    transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}

.report-chart-animated.is-animated.is-visible .report-bar-fill {
    width: var(--target-width);
}

.report-bar-fill.chart-2-fill {
    color: var(--chart-2);
}

.report-donut-layout,
.dashboard-proportion-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
}

.report-donut {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 220px);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: conic-gradient(
        var(--chart-1) 0 var(--chart-stop-1),
        var(--chart-2) var(--chart-stop-1) var(--chart-stop-2),
        var(--chart-3) var(--chart-stop-2) var(--chart-stop-3),
        var(--chart-4) var(--chart-stop-3) 100%
    );
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.report-chart-animated.is-animated .report-donut {
    transform: scale(0.86) rotate(-12deg);
    opacity: 0;
    transition: transform 0.75s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
}

.report-chart-animated.is-animated.is-visible .report-donut,
.dashboard-donut {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

.report-donut-hole {
    display: grid;
    place-items: center;
    align-content: center;
    width: 62%;
    aspect-ratio: 1;
    padding: 0.5rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    text-align: center;
}

.report-donut-hole strong {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.report-donut-hole span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.communication-reading-donut .report-donut-hole strong {
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    line-height: 1;
    white-space: nowrap;
}

.report-chart-legend {
    display: grid;
    gap: 0.75rem;
}

.report-chart-legend > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
}

.chart-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.chart-dot.chart-1 { background: var(--chart-1); }
.chart-dot.chart-2 { background: var(--chart-2); }
.chart-dot.chart-3 { background: var(--chart-3); }
.chart-dot.chart-4 { background: var(--chart-4); }

.report-column-chart {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    min-height: 240px;
    padding: 1rem 0.25rem 0;
}

.report-column-item {
    display: grid;
    grid-template-rows: auto 180px auto;
    flex: 1 1 0;
    gap: 0.45rem;
    min-width: 0;
    text-align: center;
}

.report-column-value {
    min-height: 2.2rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.report-column-track {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    height: 180px;
    overflow: hidden;
    border-radius: 12px 12px 5px 5px;
    background: rgba(148, 163, 184, 0.12);
}

.report-column-fill {
    width: min(72%, 54px);
    height: var(--target-height);
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(180deg, var(--cyan), var(--blue));
}

.report-chart-animated.is-animated .report-column-fill {
    height: 0;
    transition: height 0.9s cubic-bezier(.2,.8,.2,1);
}

.report-chart-animated.is-animated.is-visible .report-column-fill {
    height: var(--target-height);
}

.dashboard-proportion-section {
    margin-bottom: 1rem;
}

.dashboard-proportion-card {
    min-width: 0;
}

.dashboard-donut {
    width: min(100%, 190px);
}

@media (max-width: 760px) {
    .profile-avatar-layout,
    .profile-avatar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-avatar-upload-form {
        grid-template-columns: 1fr;
    }

    .profile-avatar-upload-form label {
        grid-column: auto;
    }

    .profile-avatar-actions .button,
    .profile-avatar-actions form {
        width: 100%;
    }

    .report-donut-layout,
    .dashboard-proportion-layout {
        grid-template-columns: 1fr;
    }

    .report-column-chart {
        gap: 0.35rem;
        overflow-x: auto;
    }

    .report-column-item {
        flex: 0 0 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-chart-animated,
    .report-donut,
    .report-bar-fill,
    .report-column-fill {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .report-bar-fill { width: var(--target-width); }
    .report-column-fill { height: var(--target-height); }
}

/* Safe 7: client catalog ownership indicators. */
.pricing-plan-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pricing-option .button[disabled] {
    cursor: not-allowed;
    opacity: 0.72;
}

/* Safe 7 ADMIN closure: integrated DataTables controls. */
.datatable-toolbar-source,
.datatable-integrated-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.datatable-toolbar-source {
    margin: 0.85rem 0;
}

.dt-container .datatable-integrated-toolbar {
    margin: 0;
}

.dt-container .datatable-integrated-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dt-container .datatable-integrated-end .dt-search {
    order: 2;
}

.dt-container .datatable-integrated-toolbar {
    order: 1;
}

.datatable-integrated-toolbar .datatable-status-filter {
    width: min(190px, 100%);
    margin: 0;
}

.datatable-integrated-toolbar .datatable-status-filter label {
    margin-bottom: 0.28rem;
    font-size: 0.76rem;
}

.datatable-integrated-toolbar .datatable-status-filter select,
.datatable-integrated-toolbar .datatable-create-action {
    min-height: 42px;
}

.datatable-integrated-toolbar .datatable-create-action {
    white-space: nowrap;
}

/* Safe 7 ADMIN Dashboard: operational hierarchy and lightweight reveal motion. */
.dashboard-metric-card {
    position: relative;
    padding-right: 3rem;
    color: inherit;
    text-decoration: none;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.dashboard-metric-card:hover,
.dashboard-metric-card:focus-visible {
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
    transform: translateY(-3px);
}

.dashboard-metric-arrow {
    position: absolute;
    right: 1.15rem;
    bottom: 1.1rem;
    color: var(--blue);
    opacity: 0.66;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.dashboard-metric-card:hover .dashboard-metric-arrow,
.dashboard-metric-card:focus-visible .dashboard-metric-arrow {
    opacity: 1;
    transform: translateX(4px);
}

.dashboard-balanced-grid {
    align-items: stretch;
    margin-bottom: 1rem;
}

.dashboard-balanced-grid > .card {
    min-width: 0;
    height: 100%;
}

.dashboard-proportion-compact {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
}

.dashboard-chart-legend > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.dashboard-chart-legend > a:hover,
.dashboard-chart-legend > a:focus-visible {
    color: var(--blue);
}

.dashboard-compact-list,
.dashboard-service-list {
    display: grid;
    gap: 0.65rem;
}

.dashboard-compact-item,
.dashboard-service-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.78rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    color: inherit;
    background: var(--surface-soft);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dashboard-compact-item:hover,
.dashboard-service-item:hover,
.dashboard-compact-item:focus-visible,
.dashboard-service-item:focus-visible {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--surface);
    transform: translateX(3px);
}

.dashboard-item-icon,
.dashboard-service-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--blue);
    background: var(--blue-soft);
}

.dashboard-service-icon {
    color: var(--cyan);
    background: rgba(6, 182, 212, 0.12);
}

.dashboard-item-main {
    display: grid;
    min-width: 0;
    gap: 0.18rem;
}

.dashboard-item-main strong,
.dashboard-item-main small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-item-main small {
    color: var(--muted);
}

.dashboard-support-priority {
    box-shadow: inset 4px 0 0 var(--blue), 0 14px 30px rgba(15, 23, 42, 0.06);
}

.dashboard-priority-border {
    box-shadow: inset 4px 0 0 var(--blue), 0 14px 30px rgba(15, 23, 42, 0.04);
}

.dashboard-reveal-animated {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(14px);
    transition:
        opacity 0.48s ease var(--dashboard-reveal-delay, 0ms),
        filter 0.48s ease var(--dashboard-reveal-delay, 0ms),
        transform 0.48s cubic-bezier(.2,.8,.2,1) var(--dashboard-reveal-delay, 0ms);
}

.dashboard-reveal-animated.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Safe rich communication authoring and recipient rendering. */
.communication-composer-card {
    min-width: 0;
}

.rich-editor-field {
    min-width: 0;
}

.rich-text-editor {
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rich-text-editor:focus-within {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rich-text-editor.is-over-limit {
    border-color: var(--red);
}

.rich-text-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.55rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.rich-text-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 36px;
    min-height: 36px;
    padding: 0.42rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible,
.rich-text-toolbar button.is-active {
    border-color: var(--line);
    color: var(--blue);
    background: var(--surface);
}

.rich-toolbar-text-button {
    min-width: 46px;
    font-weight: 800;
    letter-spacing: .02em;
}

.rich-toolbar-text-button span[aria-hidden="true"] {
    font-size: .84rem;
    line-height: 1;
}

.rich-toolbar-separator {
    width: 1px;
    height: 28px;
    margin-inline: 0.18rem;
    background: var(--line);
}

.rich-toolbar-spacer {
    flex: 1 1 auto;
}

.rich-text-surface,
.rich-source-surface {
    width: 100%;
    min-height: 280px;
    max-height: 520px;
    overflow: auto;
    padding: 1rem 1.1rem;
    border: 0;
    color: var(--text);
    background: var(--surface);
    outline: none;
    resize: vertical;
}

.rich-source-surface {
    display: block;
    border-radius: 0;
    font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rich-source-surface[hidden],
.rich-text-surface[hidden] {
    display: none;
}

.rich-text-surface:empty::before {
    color: var(--muted);
    content: "Write the communication message…";
    pointer-events: none;
}

.rich-text-surface.is-dragging-image {
    box-shadow: inset 0 0 0 3px var(--blue);
    background: var(--blue-soft);
}

.rich-text-editor.is-uploading .rich-text-toolbar {
    opacity: 0.72;
    pointer-events: none;
}

.rich-editor-upload-status {
    padding: 0.55rem 1rem 0;
    color: var(--success);
    font-size: 0.86rem;
    font-weight: 700;
}

.rich-editor-upload-status.is-error {
    color: var(--red);
}

.rich-editor-upload-status:empty,
.rich-editor-upload-status[hidden] {
    display: none;
}

.rich-text-surface [style*="text-align"],
.communication-body [style*="text-align"] {
    max-width: 100%;
}

.rich-text-surface img,
.communication-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 14px;
}

.rich-text-surface blockquote,
.communication-body blockquote {
    margin-inline: 0;
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--blue);
    border-radius: 0 12px 12px 0;
    color: var(--muted);
    background: var(--blue-soft);
}

.rich-editor-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.45rem;
    color: var(--muted);
}

.communication-preview-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.communication-preview-panel summary {
    padding: 0.8rem 1rem;
    font-weight: 800;
    cursor: pointer;
}

.communication-preview {
    max-height: 460px;
    overflow: auto;
    padding: 1rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.communication-body {
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.communication-body h2,
.communication-body h3,
.communication-body h4 {
    margin: 1.35rem 0 0.55rem;
}

.communication-body a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.communication-read-progress {
    width: min(240px, 100%);
    height: 5px;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}


/* Additional Reports visual types. */
.report-priority-donut {
    --chart-1: #22c55e;
    --chart-2: #3b82f6;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
}

.report-composition-group {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.report-composition-group + .report-composition-group {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.report-composition-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.report-composition-heading span {
    color: var(--muted);
    font-size: 0.78rem;
}

.report-segmented-bar {
    display: flex;
    width: 100%;
    height: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
}

.report-segmented-bar .segment {
    width: var(--segment-width);
    min-width: 0;
    transform: scaleX(1);
    transform-origin: left;
    transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}

.report-chart-animated.is-animated .report-segmented-bar .segment {
    width: 0;
}

.report-chart-animated.is-animated.is-visible .report-segmented-bar .segment {
    width: var(--segment-width);
}

.chart-1-bg { background: var(--chart-1); }
.chart-2-bg { background: var(--chart-2); }
.chart-3-bg { background: var(--chart-3); }
.chart-4-bg { background: var(--chart-4); }

.report-inline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.report-inline-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.report-inline-legend .chart-dot {
    display: inline-block;
}

@media (max-width: 960px) {
    .dt-container .datatable-integrated-end {
        width: 100%;
    }

    .dashboard-proportion-compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .datatable-toolbar-source,
    .datatable-integrated-toolbar,
    .dt-container .datatable-integrated-end {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .datatable-integrated-toolbar .datatable-status-filter,
    .datatable-integrated-toolbar .datatable-create-action {
        width: 100%;
    }

    .dashboard-compact-item,
    .dashboard-service-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-compact-item > .badge,
    .dashboard-service-item > .badge {
        grid-column: 2;
        justify-self: start;
    }

    .rich-editor-meta,
    .report-composition-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-reveal-animated,
    .dashboard-reveal-animated.is-visible,
    .dashboard-metric-card,
    .dashboard-compact-item,
    .dashboard-service-item,
    .report-segmented-bar .segment {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}


/* ================================================================
   Safe Version 7 CSP-safe analytical charts
   Los valores dinámicos se emiten como atributos de presentación SVG.
   No view or script needs style="..." or element.style mutations.
   ================================================================ */
.report-donut {
    position: relative;
    width: 148px;
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: 50%;
    background: transparent;
}

.report-donut-svg,
.report-donut-hole {
    grid-area: 1 / 1;
}

.report-donut-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: scale(1);
    transform-origin: center;
    transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.report-donut-track,
.report-donut-segment {
    fill: none;
    stroke-width: 5.2;
}

.report-donut-track {
    stroke: rgba(148, 163, 184, .18);
}

.report-donut-segment {
    transform: rotate(-90deg);
    transform-box: view-box;
    transform-origin: center;
    stroke-linecap: butt;
}

.chart-stroke-1 { stroke: var(--chart-1); }
.chart-stroke-2 { stroke: var(--chart-2); }
.chart-stroke-3 { stroke: var(--chart-3); }
.chart-stroke-4 { stroke: var(--chart-4); }
.chart-fill-1 { fill: var(--chart-1); }
.chart-fill-2 { fill: var(--chart-2); }
.chart-fill-3 { fill: var(--chart-3); }
.chart-fill-4 { fill: var(--chart-4); }

.report-bar-track {
    height: .55rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, .18);
}

.report-bar-svg,
.report-segmented-svg,
.report-column-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.report-bar-fill-svg,
.report-segment,
.report-column-fill-svg {
    transform-box: fill-box;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.report-bar-fill-svg,
.report-segment {
    transform-origin: left center;
}

.report-column-fill-svg {
    transform-origin: center bottom;
}

.report-segmented-bar {
    display: block;
    width: 100%;
    height: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .15);
}

.report-column-track {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px 12px 5px 5px;
    background: transparent;
}

.report-column-svg {
    width: min(72%, 54px);
    margin-inline: auto;
}

.report-column-track-svg {
    fill: rgba(148, 163, 184, .14);
}

.report-chart-animated.is-animated .report-donut-svg {
    opacity: .25;
    transform: scale(.82);
}

.report-chart-animated.is-animated .report-bar-fill-svg,
.report-chart-animated.is-animated .report-segment {
    transform: scaleX(0);
}

.report-chart-animated.is-animated .report-column-fill-svg {
    transform: scaleY(0);
}

.report-chart-animated.is-animated.is-visible .report-donut-svg {
    opacity: 1;
    transform: scale(1);
}

.report-chart-animated.is-animated.is-visible .report-bar-fill-svg,
.report-chart-animated.is-animated.is-visible .report-segment,
.report-chart-animated.is-animated.is-visible .report-column-fill-svg {
    transform: scale(1);
}

/* Animación escalonada sin retardos de transición inline generados por JavaScript. */
.reports-kpi-row > :nth-child(2),
.reports-visual-grid > :nth-child(2) { transition-delay: 70ms; }
.reports-kpi-row > :nth-child(3) { transition-delay: 140ms; }
.reports-kpi-row > :nth-child(4) { transition-delay: 210ms; }
.dashboard-reveal-grid > :nth-child(2),
.dashboard-balanced-grid > :nth-child(2) { transition-delay: 55ms; }
.dashboard-reveal-grid > :nth-child(3) { transition-delay: 110ms; }
.dashboard-reveal-grid > :nth-child(4) { transition-delay: 165ms; }

@media (prefers-reduced-motion: reduce) {
    .report-donut-svg,
    .report-bar-fill-svg,
    .report-segment,
    .report-column-fill-svg {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* Safe Version 8: branded error pages. */
.portal-error-page {
    min-height: min(70vh, 42rem);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.portal-error-card {
    max-width: 46rem;
    text-align: center;
}

.portal-error-code {
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 800;
    line-height: .9;
    color: var(--blue);
    opacity: .14;
}

.portal-error-reference {
    margin: 1.5rem 0;
    padding: 1rem;
    border-radius: .9rem;
    background: var(--surface-soft);
    display: grid;
    gap: .35rem;
}

.portal-error-reference code {
    overflow-wrap: anywhere;
}

/* Segmented communications audience builder. */
.communication-segment-builder {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.communication-segment-builder legend {
    padding: 0 0.35rem;
    font-weight: 800;
}

.communication-segment-builder select[multiple] {
    min-height: 8rem;
}

.communication-audience-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.75rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.communication-audience-preview output {
    color: var(--muted);
    font-weight: 700;
}

.communication-read-progress {
    appearance: none;
    border: 0;
}

.communication-read-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.communication-read-progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.communication-read-progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
}


/* SupportAgent dashboard cards behave as accessible navigation links. */
.metric-card-link {
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.metric-card-link:hover,
.metric-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--blue);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}


/* DASHBOARD CLIENT --------------------------------------------------------
   La información orientada al cliente se agrupa en acciones principales, KPI operativos,
   elementos de atención y detalles de cuenta. Mantener los valores dentro de tarjetas semánticas
   evita que el texto traducido aparezca visualmente separado de su contexto. */
.client-dashboard-hero,
.client-dashboard-kpis,
.client-dashboard-overview,
.client-dashboard-details,
.dashboard-support-section {
    margin-bottom: 1rem;
}

.client-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 150px;
    background:
        radial-gradient(circle at 90% 10%, rgba(37, 99, 235, .16), transparent 34%),
        linear-gradient(135deg, #fff, #f8fbff);
}

.client-dashboard-welcome-copy {
    max-width: 760px;
}

.client-dashboard-welcome-copy h2,
.client-dashboard-welcome-copy p {
    margin-bottom: .4rem;
}

.client-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.client-kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .8rem;
    min-width: 0;
    min-height: 145px;
    padding: 1.15rem;
    color: inherit;
    text-decoration: none;
    animation: client-dashboard-enter .45s ease both;
}

.client-kpi-card:nth-child(2) { animation-delay: .05s; }
.client-kpi-card:nth-child(3) { animation-delay: .1s; }
.client-kpi-card:nth-child(4) { animation-delay: .15s; }
.client-kpi-card:nth-child(5) { animation-delay: .2s; }

.client-kpi-card > .badge {
    grid-column: 1 / -1;
    justify-self: start;
}

.client-kpi-icon,
.client-catalog-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--blue);
    background: var(--blue-soft);
}

.client-kpi-value {
    display: block;
    margin: .25rem 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.1;
}

.client-kpi-card small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.client-kpi-link {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.client-kpi-link:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .1);
}

.client-kpi-arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: var(--blue);
}

.client-kpi-card.needs-attention {
    border-color: rgba(217, 119, 6, .3);
    background: linear-gradient(145deg, #fff, #fffbeb);
}

.client-dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 1rem;
}

.client-pulse-card {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 1.4rem;
}

.client-pulse-chart {
    position: relative;
    display: grid;
    place-items: center;
    width: 160px;
    aspect-ratio: 1;
}

.client-pulse-chart svg {
    width: 100%;
    height: 100%;
}

.client-pulse-track,
.client-pulse-value {
    fill: none;
    stroke-width: 12;
}

.client-pulse-track { stroke: #e2e8f0; }
.client-pulse-value {
    stroke: var(--blue);
    stroke-linecap: round;
    animation: client-pulse-draw .8s ease both;
}

.client-pulse-label {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center;
}

.client-pulse-label strong {
    font-size: 1.8rem;
    line-height: 1;
}

.client-pulse-label span {
    margin-top: .35rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
}

.client-pulse-copy h2,
.client-pulse-copy p {
    margin-bottom: .55rem;
}

.client-attention-card {
    min-width: 0;
}

.compact-card-header {
    margin-bottom: 1rem;
}

.client-attention-list {
    display: grid;
    gap: .7rem;
}

.client-attention-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-soft);
}

.client-attention-list a:hover {
    border-color: rgba(37, 99, 235, .35);
}

.client-attention-list i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--blue);
    background: var(--blue-soft);
}

.client-attention-list span,
.client-attention-list small {
    display: block;
}

.client-attention-list small {
    margin-top: .15rem;
    color: var(--muted);
}

.client-account-detail-grid > div {
    min-width: 0;
}

.client-catalog-preview {
    display: grid;
    gap: .75rem;
}

.client-catalog-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.client-catalog-item h3,
.client-catalog-item p {
    margin: 0;
}

.client-catalog-item p {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .86rem;
}

@keyframes client-dashboard-enter {
    from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes client-pulse-draw {
    from { stroke-dashoffset: 100; opacity: .2; }
    to { stroke-dashoffset: 0; opacity: 1; }
}

@media (max-width: 1280px) {
    .client-dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .client-dashboard-welcome,
    .client-pulse-card {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .client-dashboard-welcome { flex-direction: column; }
    .client-dashboard-overview { grid-template-columns: 1fr; }
    .client-pulse-chart { width: 140px; }
}

@media (max-width: 680px) {
    .client-dashboard-kpis { grid-template-columns: 1fr; }
    .client-kpi-card { min-height: 0; }
    .client-catalog-item { grid-template-columns: auto minmax(0, 1fr); }
    .client-catalog-item > .badge { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .client-kpi-card,
    .client-pulse-value { animation: none; }
}


/* Secciones comunes de registro: misma jerarquía en los flujos público y de creación ADMIN. */
.client-form-section {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #f8fafc;
}

.client-form-section + .client-form-section {
    margin-top: 1rem;
}

.client-form-section-credentials {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.client-form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #dbe4f0;
}

.client-form-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #1d4ed8;
    background: #dbeafe;
}

.client-form-section-header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.3;
}

.client-form-section-header p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.45;
}

.registration-credentials-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    color: #1e3a8a;
    background: rgba(219, 234, 254, 0.8);
    font-size: 0.82rem;
    line-height: 1.45;
}

.registration-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 180px;
    min-height: 48px;
}

@media (max-width: 720px) {
    .client-form-section {
        padding: 0.85rem;
    }

    .registration-action-button {
        width: 100%;
        min-width: 0;
    }
}


/* DataTable de clientes ADMIN: datos principales compactos sin una fila secundaria de detalles. */
#clients-table {
    table-layout: fixed;
}

#clients-table th:nth-child(1),
#clients-table td:nth-child(1) {
    width: 28%;
}

#clients-table th:nth-child(2),
#clients-table td:nth-child(2) {
    width: 16%;
}

#clients-table th:nth-child(3),
#clients-table td:nth-child(3) {
    width: 11%;
}

#clients-table th:nth-child(4),
#clients-table td:nth-child(4) {
    width: 10%;
}

#clients-table th:nth-child(5),
#clients-table td:nth-child(5) {
    width: 10%;
}

#clients-table th:nth-child(6),
#clients-table td:nth-child(6) {
    width: 25%;
}

#clients-table td {
    vertical-align: middle;
}

.client-primary-cell {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.client-primary-heading {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.client-primary-heading strong {
    min-width: 0;
    overflow: hidden;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-code {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.client-email,
.client-owner-cell,
.client-country-cell {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-email {
    color: var(--muted);
    font-size: 0.74rem;
}

.client-primary-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 26px;
}

.client-verification-badge {
    min-height: 24px;
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
}

.client-verification-code {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.client-verification-code code {
    max-width: 8rem;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-copy-code-button {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: var(--blue-dark);
    background: #fff;
}

.client-copy-code-button:hover {
    background: var(--blue-soft);
}

.client-created-cell {
    white-space: nowrap;
}

#clients-table .client-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: end;
    gap: 0.35rem;
    min-width: max-content;
}

#clients-table .client-actions form {
    display: contents;
}

#clients-table .client-actions .button.small {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
}

@media (max-width: 1180px) {
    #clients-table {
        min-width: 1080px;
    }

    .datatable-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 860px) {
    #clients-table {
        min-width: 1080px;
    }

    .datatable-wrap {
        overflow-x: auto;
    }
}

/* Account settings: balanced profile/security cards and segmented forms. */
.settings-profile-grid {
    align-items: stretch;
}

.settings-profile-grid > .card {
    height: 100%;
}

.profile-password-card,
.profile-avatar-card {
    min-width: 0;
}

.password-settings-form {
    display: grid;
    gap: 1rem;
}

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

.compact-actions {
    margin-top: 0;
}

.settings-sections-form {
    display: grid;
    gap: 0;
}

.settings-form-section {
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.settings-form-section:first-of-type {
    padding-top: 0.5rem;
    border-top: 0;
}

.settings-section-heading {
    margin-bottom: 1rem;
}

.settings-section-heading h3 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.15rem;
}

.settings-section-heading p {
    margin: 0;
    color: var(--muted-text, #64748b);
}

.settings-sticky-actions {
    justify-content: flex-end;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.settings-overview-grid .span-full {
    grid-column: 1 / -1;
}

.settings-security-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-detail-list > div {
    min-width: 0;
}

@media (max-width: 980px) {
    .settings-security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .password-settings-grid,
    .settings-security-grid {
        grid-template-columns: 1fr;
    }
}

/* Configuración de cuenta: resúmenes de solo lectura y flujos de actualización aislados. */
.settings-card-header-actions { align-items: flex-start; gap: 1rem; }
.settings-data-sections { display: grid; gap: 1.25rem; }
.settings-data-sections > section { padding-top: 1.25rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.settings-data-sections > section:first-child { padding-top: 0; border-top: 0; }
.settings-data-sections h3 { margin: 0 0 .75rem; font-size: 1rem; }
.settings-isolated-section { margin-top: 1rem; }
.notification-preferences-form .form-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color, #e5e7eb); }
.settings-inline-action { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
@media (max-width: 760px) { .settings-card-header-actions { flex-direction: column; } .settings-card-header-actions .button { width: 100%; } }

/* Resúmenes compactos de perfil en solo lectura: informativos, sin apariencia de campos editables. */
.settings-data-card .card-header {
    margin-bottom: .25rem;
}

.settings-data-sections {
    gap: 0;
}

.settings-data-sections > section {
    padding: 1rem 0;
}

.settings-data-sections h3 {
    margin: 0 0 .65rem;
    font-size: .95rem;
}

.settings-compact-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: .75rem;
}

.settings-compact-list-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
}

.settings-compact-list > div {
    display: grid;
    grid-template-columns: minmax(8.5rem, .42fr) minmax(0, 1fr);
    align-items: baseline;
    gap: .75rem;
    min-width: 0;
    padding: .52rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, #dbe3ef) 72%, transparent);
}

.settings-compact-list > div:nth-last-child(-n + 2) {
    border-bottom-color: transparent;
}

.settings-compact-list:not(.settings-compact-list-two) > div:last-child {
    border-bottom-color: transparent;
}

.settings-compact-list span {
    color: var(--muted-text, #64748b);
    font-size: .82rem;
    font-weight: 600;
}

.settings-compact-list strong {
    min-width: 0;
    color: var(--text-color, #0f172a);
    font-size: .94rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.settings-compact-span-full {
    grid-column: 1 / -1;
}

.form-readonly-value {
    min-height: 3rem;
    display: flex;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--surface-muted, #f8fafc) 78%, transparent);
    color: var(--muted-text, #64748b);
    font-weight: 600;
}

@media (max-width: 760px) {
    .settings-compact-list-two {
        grid-template-columns: 1fr;
    }

    .settings-compact-list > div,
    .settings-compact-list-two > div {
        grid-template-columns: 1fr;
        gap: .2rem;
        padding: .65rem 0;
        border-bottom-color: color-mix(in srgb, var(--border-color, #dbe3ef) 72%, transparent);
    }

    .settings-compact-list > div:last-child,
    .settings-compact-list-two > div:last-child {
        border-bottom-color: transparent;
    }
}

/* Acordeón de navegación Safe 10: grupos compactos coherentes por rol con modo colapsado solo con iconos. */
.nav-accordion {
    display: grid;
    min-width: 0;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 38px;
    margin-top: 0.55rem;
    padding: 0.45rem 0.85rem 0.3rem;
    border: 0;
    color: #94a3b8;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.nav-group-toggle:hover,
.nav-group-toggle:focus-visible {
    color: #e2e8f0;
}

.nav-group-toggle .nav-group-label {
    margin: 0;
}

.nav-group-indicator {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.nav-group-indicator::before,
.nav-group-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-group-indicator::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.nav-accordion.is-open .nav-group-indicator::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.nav-group-items {
    display: grid;
    gap: 0.25rem;
}

.nav-accordion:not(.is-open) .nav-group-items {
    display: none;
}

.portal-shell.sidebar-collapsed .nav-group-toggle {
    display: none;
}

.portal-shell.sidebar-collapsed .nav-accordion {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    margin-top: 0.55rem;
    padding-top: 0.55rem;
}

.portal-shell.sidebar-collapsed .nav-accordion .nav-group-items {
    display: grid;
}

.portal-shell.sidebar-collapsed .language-selector {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-inline: auto;
    padding: 0;
    overflow: hidden;
}

.portal-shell.sidebar-collapsed .language-selector-label {
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.portal-shell.sidebar-collapsed .language-selector-label span {
    display: none;
}

.portal-shell.sidebar-collapsed .language-selector-controls {
    position: absolute;
    inset: 0;
}

.portal-shell.sidebar-collapsed .language-selector-select {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}


/* Evitar envíos duplicados de escritura manteniendo feedback accesible. */
form[aria-busy="true"] button[type="submit"],
form[aria-busy="true"] input[type="submit"] {
    cursor: wait;
    opacity: 0.72;
}

/* Per-user interface personalization ------------------------------------------------------ */
:root {
    --page-radial: rgba(56, 189, 248, 0.10);
    --page-bg-start: #f8fafc;
    --page-bg-end: #eef2ff;
    --surface-elevated: rgba(255, 255, 255, 0.94);
    --surface-elevated-solid: #ffffff;
    --control-bg: #ffffff;
    --table-header-bg: #f8fafc;
    --surface-hover: #f8fafc;
    --modal-action-bg: rgba(255, 255, 255, 0.98);
    --inverse-text: #ffffff;
    --border-color: var(--line);
    --card-bg: var(--surface-elevated);
    --muted-text: var(--muted);
    --text-color: var(--text);
    --surface-muted: var(--surface-soft);
    --ink: var(--text);
    color-scheme: light;
}

html[data-accent-color="blue"] {
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --focus: #60a5fa;
}

html[data-accent-color="indigo"] {
    --blue: #4f46e5;
    --blue-dark: #4338ca;
    --blue-soft: #eef2ff;
    --focus: #818cf8;
}

html[data-accent-color="teal"] {
    --blue: #0f766e;
    --blue-dark: #115e59;
    --blue-soft: #f0fdfa;
    --focus: #2dd4bf;
}

html[data-accent-color="emerald"] {
    --blue: #047857;
    --blue-dark: #065f46;
    --blue-soft: #ecfdf5;
    --focus: #34d399;
}

html[data-accent-color="violet"] {
    --blue: #7c3aed;
    --blue-dark: #6d28d9;
    --blue-soft: #f5f3ff;
    --focus: #a78bfa;
}

html[data-accent-color="rose"] {
    --blue: #be123c;
    --blue-dark: #9f1239;
    --blue-soft: #fff1f2;
    --focus: #fb7185;
}

html[data-background-tone="neutral"] {
    --page-radial: rgba(148, 163, 184, 0.08);
    --page-bg-start: #f8fafc;
    --page-bg-end: #f1f5f9;
}

html[data-background-tone="cool"] {
    --page-radial: rgba(56, 189, 248, 0.10);
    --page-bg-start: #f8fafc;
    --page-bg-end: #eef2ff;
}

html[data-background-tone="warm"] {
    --page-radial: rgba(251, 146, 60, 0.08);
    --page-bg-start: #fffaf5;
    --page-bg-end: #fef3e8;
}

html[data-theme-mode="dark"] {
    --text: #f8fafc;
    --muted: #a8b4c7;
    --line: #334155;
    --surface: #111827;
    --surface-soft: #172033;
    --surface-elevated: rgba(17, 24, 39, 0.96);
    --surface-elevated-solid: #111827;
    --control-bg: #0f172a;
    --table-header-bg: #172033;
    --surface-hover: #1e293b;
    --modal-action-bg: rgba(17, 24, 39, 0.98);
    --blue-soft: color-mix(in srgb, var(--blue) 18%, #111827);
    --green-soft: #123423;
    --amber-soft: #3f2b0d;
    --red-soft: #411b22;
    --page-radial: rgba(56, 189, 248, 0.08);
    --page-bg-start: #080d18;
    --page-bg-end: #111827;
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.30);
    color-scheme: dark;
}

html[data-theme-mode="dark"][data-background-tone="neutral"] {
    --page-radial: rgba(148, 163, 184, 0.05);
    --page-bg-start: #090d14;
    --page-bg-end: #121821;
}

html[data-theme-mode="dark"][data-background-tone="cool"] {
    --page-radial: rgba(56, 189, 248, 0.08);
    --page-bg-start: #080d18;
    --page-bg-end: #111827;
}

html[data-theme-mode="dark"][data-background-tone="warm"] {
    --page-radial: rgba(251, 146, 60, 0.06);
    --page-bg-start: #120e0b;
    --page-bg-end: #1c1713;
}

@media (prefers-color-scheme: dark) {
    html[data-theme-mode="system"] {
        --text: #f8fafc;
        --muted: #a8b4c7;
        --line: #334155;
        --surface: #111827;
        --surface-soft: #172033;
        --surface-elevated: rgba(17, 24, 39, 0.96);
        --surface-elevated-solid: #111827;
        --control-bg: #0f172a;
        --table-header-bg: #172033;
        --surface-hover: #1e293b;
        --modal-action-bg: rgba(17, 24, 39, 0.98);
        --blue-soft: color-mix(in srgb, var(--blue) 18%, #111827);
        --green-soft: #123423;
        --amber-soft: #3f2b0d;
        --red-soft: #411b22;
        --page-radial: rgba(56, 189, 248, 0.08);
        --page-bg-start: #080d18;
        --page-bg-end: #111827;
        --shadow: 0 22px 60px rgba(0, 0, 0, 0.30);
        color-scheme: dark;
    }

    html[data-theme-mode="system"][data-background-tone="neutral"] {
        --page-radial: rgba(148, 163, 184, 0.05);
        --page-bg-start: #090d14;
        --page-bg-end: #121821;
    }

    html[data-theme-mode="system"][data-background-tone="warm"] {
        --page-radial: rgba(251, 146, 60, 0.06);
        --page-bg-start: #120e0b;
        --page-bg-end: #1c1713;
    }
}

body.portal-shell {
    background:
        radial-gradient(circle at 12% 8%, var(--page-radial), transparent 24rem),
        linear-gradient(135deg, var(--page-bg-start) 0%, var(--page-bg-end) 100%);
}

.card,
.table-wrap,
.portal-modal-card,
.ticket-attachment-card {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-elevated);
}

.form-field label,
.clean-list,
.portal-table th,
.dt-container table.dataTable.portal-table > tbody > tr.child span.dtr-title,
.modal-close-button,
.language-selector-select {
    color: var(--text);
}

.form-field input,
.form-field select,
.form-field textarea,
.inline-status-form select,
.dt-container .dt-search input,
.dt-container .dt-length select,
.language-selector-select,
.modal-close-button,
.button.secondary,
.attachment-chip,
.pricing-option,
.client-copy-code-button {
    color: var(--text);
    border-color: var(--line);
    background: var(--control-bg);
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.dt-container .dt-search input::placeholder {
    color: var(--muted);
    opacity: 0.82;
}

.portal-table th {
    background: var(--table-header-bg);
}

.portal-table tbody tr:hover,
.button.secondary:hover,
.modal-close-button:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.dt-container .dt-paging .dt-paging-button {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: var(--control-bg) !important;
}

.portal-modal-actions {
    background: var(--modal-action-bg);
}

.error-page .empty-state,
.public-language-bar .language-selector,
.public-form-card {
    background: var(--surface-elevated);
}

html[data-theme-mode="dark"] .role-badge,
html[data-theme-mode="dark"] .badge.info,
html[data-theme-mode="dark"] .info-alert,
html[data-theme-mode="dark"] .service-admin-card > i,
html[data-theme-mode="dark"] .client-form-section-icon,
html[data-theme-mode="dark"] .registration-credentials-notice,
html[data-theme-mode="dark"] .metric-icon,
html[data-theme-mode="dark"] .notification-bell,
html[data-theme-mode="dark"] .settings-toggle,
html[data-theme-mode="dark"] .detail-grid > div,
html[data-theme-mode="dark"] .client-form-section,
html[data-theme-mode="dark"] .client-form-section-credentials {
    border-color: var(--line);
    background: var(--surface-soft);
}

html[data-theme-mode="dark"] .role-badge,
html[data-theme-mode="dark"] .badge.info,
html[data-theme-mode="dark"] .info-alert,
html[data-theme-mode="dark"] .registration-credentials-notice {
    color: #bfdbfe;
}

html[data-theme-mode="dark"] .badge.success,
html[data-theme-mode="dark"] .success-alert { color: #86efac; }
html[data-theme-mode="dark"] .badge.warning,
html[data-theme-mode="dark"] .warning-alert { color: #fde68a; }
html[data-theme-mode="dark"] .badge.danger,
html[data-theme-mode="dark"] .error-alert { color: #fca5a5; }

@media (prefers-color-scheme: dark) {
    html[data-theme-mode="system"] .role-badge,
    html[data-theme-mode="system"] .badge.info,
    html[data-theme-mode="system"] .info-alert,
    html[data-theme-mode="system"] .service-admin-card > i,
    html[data-theme-mode="system"] .client-form-section-icon,
    html[data-theme-mode="system"] .registration-credentials-notice,
    html[data-theme-mode="system"] .metric-icon,
    html[data-theme-mode="system"] .notification-bell,
    html[data-theme-mode="system"] .settings-toggle,
    html[data-theme-mode="system"] .detail-grid > div,
    html[data-theme-mode="system"] .client-form-section,
    html[data-theme-mode="system"] .client-form-section-credentials {
        border-color: var(--line);
        background: var(--surface-soft);
    }

    html[data-theme-mode="system"] .role-badge,
    html[data-theme-mode="system"] .badge.info,
    html[data-theme-mode="system"] .info-alert,
    html[data-theme-mode="system"] .registration-credentials-notice { color: #bfdbfe; }
    html[data-theme-mode="system"] .badge.success,
    html[data-theme-mode="system"] .success-alert { color: #86efac; }
    html[data-theme-mode="system"] .badge.warning,
    html[data-theme-mode="system"] .warning-alert { color: #fde68a; }
    html[data-theme-mode="system"] .badge.danger,
    html[data-theme-mode="system"] .error-alert { color: #fca5a5; }
}

html[data-contrast-mode="high"] {
    --line: #94a3b8;
}

html[data-contrast-mode="high"] .card,
html[data-contrast-mode="high"] .table-wrap,
html[data-contrast-mode="high"] .form-field input,
html[data-contrast-mode="high"] .form-field select,
html[data-contrast-mode="high"] .form-field textarea,
html[data-contrast-mode="high"] .settings-toggle,
html[data-contrast-mode="high"] .appearance-choice-card,
html[data-contrast-mode="high"] .appearance-switch-row {
    border-width: 2px;
}

/* Personalization screen */
.appearance-settings-page {
    max-width: 1120px;
    margin-inline: auto;
}

.appearance-settings-card {
    padding: clamp(1.1rem, 2.5vw, 2rem);
}

.appearance-preferences-form {
    gap: 0;
}

.appearance-setting-section {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.5fr);
    gap: clamp(1rem, 3vw, 2.4rem);
    align-items: start;
    padding: 1.35rem 0;
    border-top: 1px solid var(--line);
}

.appearance-setting-copy h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.appearance-setting-copy p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.appearance-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.appearance-choice-card {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.appearance-choice-card:hover {
    transform: translateY(-1px);
    border-color: var(--blue);
}

.appearance-choice-card:has(input:checked) {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.appearance-choice-card input,
.appearance-color-option input,
.appearance-segmented-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.appearance-choice-card strong {
    font-size: 0.9rem;
}

.appearance-choice-card small {
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.4;
}

.appearance-preview {
    position: relative;
    display: block;
    height: 74px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.appearance-preview::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: #172033;
}

.appearance-preview i {
    position: absolute;
    left: 38%;
    right: 10%;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
}

.appearance-preview i:first-child { top: 22px; }
.appearance-preview i:last-child { top: 43px; width: 34%; }
.appearance-preview-dark { background: #111827; }
.appearance-preview-dark i { background: #475569; }
.appearance-preview-dark::before { background: #080d18; }
.appearance-preview-system { background: linear-gradient(115deg, #f8fafc 0 50%, #111827 50% 100%); }
.appearance-preview-system i:first-child { background: linear-gradient(90deg, #cbd5e1 0 35%, #475569 35%); }
.appearance-preview-system i:last-child { background: linear-gradient(90deg, #cbd5e1 0 35%, #475569 35%); }

.appearance-segmented-control {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px, 1fr);
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.appearance-segmented-control label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.appearance-segmented-control span {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.appearance-segmented-control input:checked + span {
    color: var(--text);
    background: var(--control-bg);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.10);
}

.appearance-color-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: 0.65rem;
}

.appearance-color-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.7rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
    cursor: pointer;
}

.appearance-color-option:has(input:checked) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
}

.appearance-color-swatch {
    display: block;
    width: 34px;
    height: 34px;
    border: 4px solid var(--surface-elevated-solid);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line);
}

[data-accent-swatch="blue"] .appearance-color-swatch { background: #2563eb; }
[data-accent-swatch="indigo"] .appearance-color-swatch { background: #4f46e5; }
[data-accent-swatch="teal"] .appearance-color-swatch { background: #0f766e; }
[data-accent-swatch="emerald"] .appearance-color-swatch { background: #047857; }
[data-accent-swatch="violet"] .appearance-color-swatch { background: #7c3aed; }
[data-accent-swatch="rose"] .appearance-color-swatch { background: #be123c; }

.appearance-switch-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "switch copy";
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
    cursor: pointer;
}

.appearance-switch-row > input {
    position: absolute;
    opacity: 0;
}

.appearance-switch {
    grid-area: switch;
    position: relative;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #94a3b8;
    transition: background 0.16s ease;
}

.appearance-switch::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.24);
    transition: transform 0.16s ease;
}

.appearance-switch-row > input:checked + .appearance-switch {
    background: var(--blue);
}

.appearance-switch-row > input:checked + .appearance-switch::after {
    transform: translateX(20px);
}

.appearance-switch-row > span:last-child {
    grid-area: copy;
    display: grid;
    gap: 0.15rem;
}

.appearance-switch-row strong { font-size: 0.88rem; }
.appearance-switch-row small { color: var(--muted); font-size: 0.76rem; line-height: 1.45; }

.appearance-form-actions {
    justify-content: space-between;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .appearance-setting-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .appearance-color-grid {
        grid-template-columns: repeat(3, minmax(80px, 1fr));
    }
}

@media (max-width: 620px) {
    .appearance-choice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .appearance-segmented-control {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 100%;
    }

    .appearance-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .appearance-form-actions .button {
        width: 100%;
    }
}

/* Los componentes dependientes del acento y el feedback semántico usan de forma coherente la paleta seleccionada. */
.role-badge,
.secure-chip,
.badge.info {
    color: var(--blue-dark);
    background: var(--blue-soft);
}

.button.primary:hover {
    background: linear-gradient(135deg, var(--blue-dark), color-mix(in srgb, var(--blue-dark) 78%, #000));
}

.success-alert {
    background: var(--green-soft);
    border-color: color-mix(in srgb, var(--green) 32%, transparent);
}

.error-alert {
    background: var(--red-soft);
    border-color: color-mix(in srgb, var(--red) 32%, transparent);
}

.warning-alert {
    background: var(--amber-soft);
    border-color: color-mix(in srgb, var(--amber) 32%, transparent);
}

html[data-accent-color="blue"] { --cyan: #38bdf8; }
html[data-accent-color="indigo"] { --cyan: #a78bfa; }
html[data-accent-color="teal"] { --cyan: #2dd4bf; }
html[data-accent-color="emerald"] { --cyan: #34d399; }
html[data-accent-color="violet"] { --cyan: #c084fc; }
html[data-accent-color="rose"] { --cyan: #fb7185; }

/* Sustituciones compatibles con el tema para el panel y las superficies comunes de registro. */
.client-dashboard-welcome {
    background:
        radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 34%),
        linear-gradient(135deg, var(--surface-elevated-solid), var(--surface-soft));
}

.client-kpi-card.needs-attention {
    border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
    background: linear-gradient(145deg, var(--surface-elevated-solid), color-mix(in srgb, var(--amber-soft) 58%, var(--surface-elevated-solid)));
}

.client-pulse-track {
    stroke: var(--line);
}

.client-form-section {
    border-color: var(--line);
    background: var(--surface-soft);
}

.client-form-section-credentials {
    border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
    background: var(--blue-soft);
}

.client-form-section-header {
    border-bottom-color: var(--line);
}

.client-form-section-header h3 {
    color: var(--text);
}

.client-form-section-header p {
    color: var(--muted);
}

.client-form-section-icon,
.service-admin-card > i,
.notification-icon {
    color: var(--blue);
    background: var(--blue-soft);
}

.notification-item.unread {
    border-inline-start-color: var(--blue);
}

.report-bar-track > span {
    color: var(--blue);
}

.appearance-choice-card:has(input:focus-visible),
.appearance-color-option:has(input:focus-visible),
.appearance-segmented-control label:has(input:focus-visible),
.appearance-switch-row:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* UI consistency: full-width client editor and aligned DataTables controls. */
.portal-modal-wide .portal-modal-card,
.portal-modal-wide .portal-modal-form-host,
.portal-modal-wide .portal-modal-form-host > form.management-form {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.portal-modal-wide .portal-modal-form-host > form.management-form {
    margin-right: 0;
}

.portal-modal-wide .portal-modal-form-host > form.management-form > .portal-modal-actions {
    width: calc(100% + 2.8rem);
    margin-right: -1.4rem;
    margin-left: -1.4rem;
    box-sizing: border-box;
}

.dt-container > .dt-layout-row:first-child,
.dt-container > .dt-layout-row:first-child > .dt-layout-cell,
.dt-container .datatable-integrated-end,
.dt-container .datatable-integrated-toolbar {
    align-items: center;
}

.dt-container .datatable-integrated-end {
    min-height: 44px;
}

.datatable-integrated-toolbar .datatable-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: auto;
}

.datatable-integrated-toolbar .datatable-status-filter label {
    flex: 0 0 auto;
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.datatable-integrated-toolbar .datatable-status-filter select {
    width: 190px;
    min-height: 42px;
    margin: 0;
    padding: 0.55rem 1.9rem 0.55rem 0.7rem;
}

.datatable-integrated-toolbar.support-ticket-filters .datatable-status-filter { flex: 0 0 auto; }
.datatable-integrated-toolbar.support-ticket-filters .ticket-request-type-filter select { width: 230px; min-width: 230px; }

@media (max-width: 1400px) {
    #admin-tickets-table_wrapper > .dt-layout-row:first-child { align-items: stretch; flex-direction: column; }
    #admin-tickets-table_wrapper .dt-layout-start,
    #admin-tickets-table_wrapper .dt-layout-end,
    #admin-tickets-table_wrapper .datatable-integrated-toolbar,
    #admin-tickets-table_wrapper .datatable-integrated-end { width: 100%; }
    #admin-tickets-table_wrapper .datatable-integrated-toolbar.support-ticket-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #admin-tickets-table_wrapper .datatable-integrated-toolbar.support-ticket-filters .datatable-status-filter { display: grid; gap: .35rem; width: 100%; }
    #admin-tickets-table_wrapper .datatable-integrated-toolbar.support-ticket-filters .datatable-status-filter select,
    #admin-tickets-table_wrapper .datatable-integrated-toolbar.support-ticket-filters .ticket-request-type-filter select { width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
    #admin-tickets-table_wrapper .datatable-integrated-toolbar.support-ticket-filters { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .portal-modal-wide .portal-modal-form-host > form.management-form > .portal-modal-actions {
        width: calc(100% + 2rem);
        margin-right: -1rem;
        margin-left: -1rem;
    }

    .datatable-integrated-toolbar .datatable-status-filter {
        display: grid;
        gap: 0.4rem;
        width: 100%;
    }

    .datatable-integrated-toolbar .datatable-status-filter select {
        width: 100%;
    }
}


/* Compact directory and ticket rows */
.client-primary-cell.compact,
.table-primary-cell.compact {
    gap: .18rem;
}

.table-inline-metrics {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
}

.table-inline-metrics > span {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    color: var(--muted-text);
}

.ticket-primary-cell {
    display: grid;
    gap: .22rem;
    min-width: 18rem;
}

.ticket-primary-heading {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.ticket-primary-heading strong,
.ticket-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-subject {
    color: var(--muted-text);
    font-size: .88rem;
    max-width: 34rem;
}

.communication-editor-dialog .portal-modal-card {
    width: min(1120px, calc(100vw - 2rem));
}

.communication-editor-dialog .portal-modal-scroll {
    max-height: min(76vh, 860px);
    overflow: auto;
    padding: 0 1.5rem 1.5rem;
}

.communication-editor-dialog [data-communication-form] {
    margin: 0;
}

.communication-read-cell {
    display: grid;
    gap: .28rem;
    min-width: 8.5rem;
}

.communication-read-cell > span {
    font-weight: 700;
    font-size: .88rem;
}

#communications-table .communication-read-progress {
    width: 100%;
    min-width: 7rem;
}

@media (max-width: 760px) {
    .ticket-primary-cell {
        min-width: 0;
    }

    .communication-editor-dialog .portal-modal-scroll {
        padding-inline: 1rem;
    }
}


/* Shared compact SupportAgent KPI cards and communication management surfaces. */
.support-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.communication-metric-trigger {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.communication-metric-trigger small { color: var(--muted); font-weight: 700; }
.communication-metric-trigger:hover strong,
.communication-metric-trigger:focus-visible strong { color: var(--blue); }
.communication-insight-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.communication-insight-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 76px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}
.communication-insight-card i { color: var(--blue); }
.communication-insight-card strong { display: block; font-size: 1.35rem; }
.communication-insight-card small { display: block; margin-top: 0.15rem; color: var(--muted); font-weight: 700; }
.communication-recipient-table-wrap { max-height: 55vh; overflow: auto; }
.contents-wrapper { display: contents; }

.communication-body img,
.communication-preview img {
    display: inline-block;
    width: auto;
    max-width: min(220px, 100%);
    max-height: 160px;
    margin: 0.65rem 0.45rem 0.65rem 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
    cursor: zoom-in;
}
.communication-image-lightbox { max-width: min(94vw, 1200px); padding: 0; border: 0; background: transparent; }
.communication-image-lightbox::backdrop { background: rgba(2, 6, 23, 0.82); }
.communication-image-lightbox-card { position: relative; display: grid; place-items: center; min-width: min(90vw, 900px); min-height: 50vh; }
.communication-image-lightbox-card img { max-width: 90vw; max-height: 88vh; border-radius: 14px; object-fit: contain; }
.communication-image-lightbox-card .modal-close-button { position: fixed; top: 1.2rem; right: 1.2rem; color: #fff; border-color: rgba(255,255,255,.35); background: rgba(15,23,42,.72); }

@media (max-width: 1050px) {
    .support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .support-metrics,
    .communication-insight-metrics { grid-template-columns: 1fr; }
}


.client-dashboard-priority-grid,
.client-dashboard-details {
    align-items: stretch;
}

.client-dashboard-priority-grid > .card,
.client-dashboard-details > .card {
    min-width: 0;
    height: 100%;
}

.client-profile-summary-card .settings-data-sections {
    gap: 0;
}

.client-profile-summary-card .settings-data-sections > section {
    padding: 1rem 0;
}

.client-services-summary-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.client-services-summary-card .card-header p {
    margin-top: .35rem;
}

.client-services-summary-intro {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.client-services-summary-intro .client-pulse-chart {
    width: 136px;
}

.client-services-summary-intro .client-pulse-copy h3,
.client-services-summary-intro .client-pulse-copy p {
    margin-bottom: .45rem;
}

.client-services-summary-card .client-catalog-preview {
    margin-top: .15rem;
}

@media (max-width: 900px) {
    .client-dashboard-priority-grid,
    .client-dashboard-details {
        grid-template-columns: 1fr;
    }

    .client-services-summary-intro {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .client-services-summary-intro .client-pulse-chart {
        width: 128px;
    }
}


/* Client catalog: denser service grid and comparison-oriented pricing dialog. */
.available-services-intro {
    display: grid;
    gap: .3rem;
    max-width: 72ch;
    margin-top: .65rem;
}

.available-services-intro p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.available-services-intro p:first-child {
    color: var(--text);
    font-weight: 600;
}

.available-service-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.available-service-card {
    min-height: 245px;
    padding: 1rem;
}

.available-service-card > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.available-service-actions {
    margin-top: auto;
}

.available-service-actions .button {
    width: 100%;
    justify-content: center;
}

.pricing-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
}

.pricing-plan-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.15rem;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.pricing-plan-card.is-current {
    border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
    box-shadow: inset 0 3px 0 var(--blue), 0 14px 32px rgba(37, 99, 235, .09);
}

.pricing-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.pricing-plan-header h3 {
    margin: .25rem 0 0;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.pricing-plan-description {
    min-height: 3.2em;
    color: var(--muted);
    line-height: 1.55;
}

.pricing-option-list {
    display: grid;
    gap: .8rem;
    margin-top: auto;
}

.pricing-option {
    display: grid;
    gap: .85rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pricing-option + .pricing-option {
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.pricing-option-copy {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    flex-wrap: wrap;
}

.pricing-option-copy strong {
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    line-height: 1;
    letter-spacing: -.035em;
}

.pricing-option-copy span {
    font-size: .82rem;
    font-weight: 650;
}

.pricing-plan-action {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

.pricing-plan-empty {
    margin-top: auto;
    padding: 1rem;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1180px) {
    .available-service-catalog,
    .pricing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .available-service-catalog,
    .pricing-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .available-service-card {
        min-height: 0;
    }
}


/* Espaciado global de DataTables: separa controles y resumen de resultados de los bordes del contenedor. */
.dt-container > .dt-layout-row:first-child {
    box-sizing: border-box;
    padding: 5px 5px 0;
}

.dt-container > .dt-layout-row:last-child {
    box-sizing: border-box;
    padding: 0 5px 5px;
}

.dt-container > .dt-layout-row:last-child .dt-info {
    padding-left: 0;
}

.datatable-toolbar-source.datatable-filter-bar-multiple,
.datatable-integrated-toolbar.datatable-filter-bar-multiple {
    margin: 0;
}


/* Ajuste visual Safe 10: un estado de carga acotado para DataTables y peticiones de modales. */
div.dt-container > div.dt-processing {
    z-index: 25;
    display: grid !important;
    place-items: center;
    gap: .65rem;
    width: auto;
    min-width: 9.5rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
    border-radius: 1rem;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-elevated-solid, var(--surface)) 92%, transparent);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .22), 0 0 0 1px rgba(255, 255, 255, .06) inset;
    backdrop-filter: blur(14px);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
}

div.dt-container > div.dt-processing::before {
    content: "";
    width: 2.15rem;
    height: 2.15rem;
    border: 3px solid color-mix(in srgb, var(--blue) 22%, transparent);
    border-top-color: var(--blue);
    border-right-color: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 1rem color-mix(in srgb, var(--blue) 28%, transparent);
    animation: portal-loading-spin .8s linear infinite;
}

div.dt-container > div.dt-processing > div {
    display: none;
}


@keyframes portal-loading-spin {
    to { transform: rotate(360deg); }
}

/* Los CTA del dashboard CLIENT usan el mismo lenguaje explícito de botones que el resto del portal. */
.client-dashboard-cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

.client-pulse-copy .client-dashboard-cta {
    width: max-content;
    margin-top: .15rem;
}

/* Las filas de dirección a ancho completo mantienen una columna de etiqueta acotada en lugar de ocupar el 42% de la tarjeta. */
.client-profile-summary-card .settings-compact-span-full {
    grid-template-columns: minmax(8.5rem, 10rem) minmax(0, 1fr);
}

/* Diálogo de precios: las tarjetas comparativas permanecen centradas cuando hay menos de tres planes disponibles. */
.pricing-plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 20rem));
    justify-content: center;
}

.pricing-plan-card {
    width: 100%;
    text-align: center;
}

.pricing-plan-header {
    display: grid;
    justify-items: center;
    justify-content: stretch;
}

.pricing-plan-description {
    width: min(100%, 34ch);
    margin-right: auto;
    margin-left: auto;
}

.pricing-option-copy {
    justify-content: center;
    width: 100%;
}

/* Power BI-inspired reports canvas: varied spans, clear hierarchy and CSP-safe SVG visuals. */
:root {
    --chart-5: #64748b;
}

.chart-fill-5 { fill: var(--chart-5); }
.chart-stroke-5 { stroke: var(--chart-5); }
.chart-5 { background: var(--chart-5); }

.reports-kpi-modern {
    margin-bottom: 1rem;
}

.report-kpi-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}

.report-kpi-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -2.5rem;
    bottom: -3.5rem;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .08;
}

.report-kpi-card > div:nth-child(2) {
    min-width: 0;
}

.report-kpi-card span,
.report-kpi-card p {
    color: var(--muted);
}

.report-kpi-card strong {
    display: block;
    margin-top: .15rem;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    line-height: 1;
}

.report-kpi-card p {
    margin: .45rem 0 0;
    font-size: .78rem;
}

.report-kpi-rate {
    display: inline-grid;
    place-items: center;
    min-width: 3.1rem;
    min-height: 2rem;
    padding: .35rem .55rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, var(--line));
    border-radius: 999px;
    color: currentColor !important;
    background: color-mix(in srgb, currentColor 9%, transparent);
    font-size: .75rem;
    font-weight: 900;
}

.report-kpi-blue { color: var(--blue); }
.report-kpi-cyan { color: var(--cyan); }
.report-kpi-violet { color: #7c3aed; }
.report-kpi-amber { color: var(--amber); }
.report-kpi-rose { color: #e11d48; }
.report-kpi-card > div:nth-child(2) strong { color: var(--text); }

.reports-bi-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.report-bi-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated-solid, var(--surface)) 96%, var(--blue) 4%), var(--surface-elevated-solid, var(--surface)));
}

.report-bi-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 1.25rem;
    left: 1.25rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 72%, var(--cyan)), transparent);
    opacity: .75;
}

.report-span-12 { grid-column: span 12; }
.report-span-8 { grid-column: span 8; }
.report-span-7 { grid-column: span 7; }
.report-span-5 { grid-column: span 5; }
.report-span-4 { grid-column: span 4; }

.report-bi-header {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.report-bi-header h2 {
    margin-top: .2rem;
}

.report-feature-card {
    min-height: 25rem;
}

.report-area-chart {
    display: grid;
    gap: .75rem;
    min-height: 18rem;
}

.report-area-svg {
    width: 100%;
    height: 15rem;
    overflow: visible;
}

.report-grid-line {
    stroke: color-mix(in srgb, var(--line) 78%, transparent);
    stroke-width: .35;
    stroke-dasharray: 2 2;
}

.report-area-fill {
    fill: color-mix(in srgb, var(--blue) 18%, transparent);
}

.report-area-line {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.report-area-point {
    fill: var(--surface-elevated-solid, var(--surface));
    stroke: var(--blue);
    stroke-width: .7;
    vector-effect: non-scaling-stroke;
}

.report-area-labels {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.report-area-labels span {
    display: grid;
    gap: .1rem;
    min-width: 0;
    text-align: center;
}

.report-area-labels strong {
    font-size: .78rem;
    text-transform: uppercase;
}

.report-area-labels small {
    color: var(--muted);
    font-size: .68rem;
    overflow-wrap: anywhere;
}

.report-card-footnote {
    margin-top: .75rem;
}

.report-donut-layout-stacked {
    grid-template-columns: 1fr;
    justify-items: center;
}

.report-donut-large {
    width: min(13rem, 72vw);
}

.report-legend-compact {
    width: 100%;
}

.report-bar-list-spacious {
    gap: 1.05rem;
}

.report-insight-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: .9rem;
    background: color-mix(in srgb, var(--blue-soft) 48%, transparent);
}

.report-insight-strip span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
}

.report-insight-strip i {
    color: var(--blue);
}

.report-header-scores {
    display: flex;
    align-items: stretch;
    gap: .55rem;
}

.report-header-scores span {
    display: grid;
    gap: .08rem;
    min-width: 6.5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    color: var(--muted);
    background: var(--surface-soft);
    font-size: .7rem;
}

.report-header-scores strong {
    color: var(--text);
    font-size: 1.15rem;
}

.report-billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.report-billing-grid .report-composition-group {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

.report-billing-grid .report-composition-group + .report-composition-group {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.report-inline-legend strong {
    color: var(--text);
}

.report-service-ranking {
    gap: .9rem;
}

.report-ranking-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
}

.report-ranking-position {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: .7rem;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 11%, transparent);
    font-size: .78rem;
    font-weight: 900;
}

.report-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.report-health-grid > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .15rem .65rem;
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--surface-soft);
}

.report-health-grid i {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.report-health-grid span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
}

.report-health-grid strong {
    min-width: 0;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.report-chart-animated.is-animated .report-area-line,
.report-chart-animated.is-animated .report-area-fill,
.report-chart-animated.is-animated .report-area-point {
    opacity: 0;
}

.report-chart-animated.is-animated.is-visible .report-area-line,
.report-chart-animated.is-animated.is-visible .report-area-fill,
.report-chart-animated.is-animated.is-visible .report-area-point {
    opacity: 1;
    transition: opacity .55s ease .12s;
}

@media (max-width: 1180px) {
    .report-span-8,
    .report-span-7,
    .report-span-5,
    .report-span-4 {
        grid-column: span 6;
    }

    .report-feature-card {
        grid-column: span 12;
    }
}

@media (max-width: 820px) {
    .reports-bi-grid {
        grid-template-columns: 1fr;
    }

    .report-span-12,
    .report-span-8,
    .report-span-7,
    .report-span-5,
    .report-span-4,
    .report-feature-card {
        grid-column: 1;
    }

    .report-billing-grid,
    .report-health-grid {
        grid-template-columns: 1fr;
    }

    .report-bi-header,
    .report-header-scores,
    .report-insight-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-header-scores {
        width: 100%;
    }

    .report-header-scores span {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .report-kpi-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .report-kpi-rate {
        grid-column: 2;
        justify-self: start;
    }

    .report-area-svg {
        height: 11rem;
    }

    .report-area-labels small {
        display: none;
    }

    .client-pulse-copy .client-dashboard-cta {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    div.dt-container > div.dt-processing::before {
        animation: none;
        border-color: var(--blue);
    }
}


/* Capa de recuperación responsive: restaura el último comportamiento validado y protege ambos temas. */
.portal-main,
.portal-content,
.content-grid,
.card,
.dt-container,
.portal-modal-card {
    min-width: 0;
}

/* Contención del modal en el viewport: los formularios largos siguen siendo utilizables sin salir de la pantalla. */
dialog.portal-modal {
    max-width: none;
    max-height: none;
    padding: 0;
}

.portal-modal .portal-modal-card {
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.portal-modal .portal-modal-header {
    flex: 0 0 auto;
}

.portal-modal .portal-modal-card > form,
.portal-modal .portal-modal-scroll,
.portal-modal .modal-body,
.portal-modal [data-modal-scroll] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.portal-modal .portal-modal-actions,
.portal-modal .form-actions.portal-modal-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

/* DataTables: readable toolbar, safe horizontal alternativa controlada and stable footer spacing. */
.dt-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.dt-container > .dt-layout-row:first-child,
.dt-container > .dt-layout-row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
    box-sizing: border-box;
    width: 100%;
}

.dt-container > .dt-layout-row:first-child {
    padding: 5px 5px .55rem;
}

.dt-container > .dt-layout-row:last-child {
    padding: .7rem 5px 5px;
}

.dt-container .dt-layout-cell {
    min-width: 0;
}

.dt-container .dt-info {
    padding-left: 5px !important;
}

.dt-container .dt-paging {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
}

.dt-container .dt-paging .dt-paging-button,
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button:disabled {
    color: var(--text) !important;
    border-color: var(--line) !important;
    background: var(--control-bg, var(--surface)) !important;
    opacity: 1;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(:disabled),
.dt-container .dt-paging .dt-paging-button:focus-visible {
    color: #fff !important;
    border-color: var(--blue) !important;
    background: var(--blue) !important;
}

html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button,
html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button.disabled,
html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button:disabled {
    color: #f8fafc !important;
    border-color: color-mix(in srgb, var(--line) 84%, #fff 16%) !important;
    background: color-mix(in srgb, var(--control-bg, var(--surface)) 88%, #fff 12%) !important;
}

html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button.current,
html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(:disabled),
html[data-theme-mode="dark"] .dt-container .dt-paging .dt-paging-button:focus-visible {
    color: #fff !important;
    background: var(--blue) !important;
}

.portal-table tbody tr:hover,
.portal-table tbody tr:hover td,
.portal-table tbody tr:hover th {
    color: var(--text);
    background: var(--surface-hover);
}

.portal-table tbody tr:hover a:not(.button),
.portal-table tbody tr:hover strong,
.portal-table tbody tr:hover .ticket-subject,
.portal-table tbody tr:hover small,
.portal-table tbody tr:hover span:not(.badge) {
    color: inherit;
}

html[data-theme-mode="dark"] .portal-table tbody tr:hover,
html[data-theme-mode="dark"] .portal-table tbody tr:hover td,
html[data-theme-mode="dark"] .portal-table tbody tr:hover th {
    color: #f8fafc;
    background: color-mix(in srgb, var(--surface-hover) 84%, var(--blue) 16%);
}

/* Los controles secundarios deben conservar legibilidad durante hover en ambos temas. */
.button.secondary:hover,
.button.secondary:focus-visible,
.modal-close-button:hover,
.modal-close-button:focus-visible {
    color: #fff;
    border-color: var(--blue);
    background: var(--blue);
}

html[data-theme-mode="dark"] .button.secondary,
html[data-theme-mode="dark"] .modal-close-button {
    color: #f8fafc;
}

/* Reflow de escritorio a móvil sin ocultar contenido funcional. */
@media (max-width: 1180px) {
    .content-grid.two-columns,
    .dashboard-balanced-grid,
    .client-dashboard-priority-grid,
    .client-dashboard-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .available-service-catalog,
    .pricing-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .portal-shell,
    .portal-shell.sidebar-collapsed {
        display: block;
        grid-template-columns: none;
    }

    .portal-main {
        width: 100%;
        margin-left: 0;
    }

    .dt-container .dt-layout-table,
    .dt-container .dt-scroll,
    .dt-container .dt-scroll-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.dataTable.portal-table {
        width: 100% !important;
    }

    .datatable-integrated-toolbar,
    .datatable-integrated-end,
    .datatable-filter-bar-multiple {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .portal-modal .portal-modal-card,
    .portal-modal-wide .portal-modal-card,
    .communication-editor-dialog .portal-modal-card {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 18px;
    }

    .portal-modal .portal-modal-header {
        padding: 1rem;
    }

    .portal-modal .portal-modal-card > form,
    .portal-modal .portal-modal-scroll,
    .communication-editor-dialog .portal-modal-scroll {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .portal-modal .form-grid,
    .portal-modal .form-grid.two-columns,
    .portal-modal .detail-grid,
    .portal-modal .client-form-grid,
    .portal-modal .client-form-section-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .portal-modal .span-2,
    .portal-modal .settings-compact-span-full {
        grid-column: auto;
    }

    .portal-modal .portal-modal-actions,
    .portal-modal .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: .85rem 1rem max(.85rem, env(safe-area-inset-bottom));
    }

    .portal-modal .portal-modal-actions .button,
    .portal-modal .form-actions .button {
        width: 100%;
    }

    .dt-container > .dt-layout-row:first-child,
    .dt-container > .dt-layout-row:last-child {
        align-items: stretch;
        flex-direction: column;
    }

    .dt-container .dt-layout-start,
    .dt-container .dt-layout-end,
    .dt-container .dt-search,
    .dt-container .dt-length,
    .dt-container .datatable-integrated-toolbar,
    .dt-container .datatable-integrated-end {
        width: 100%;
    }

    .dt-container .dt-search,
    .dt-container .dt-length {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .dt-container .dt-search input {
        min-width: 0;
        width: 100%;
        margin-left: 0;
    }

    .dt-container .dt-paging {
        justify-content: center;
        width: 100%;
    }

    .dt-container .dt-info {
        width: 100%;
        padding-left: 0 !important;
        text-align: center;
    }

    .portal-table th,
    .portal-table td {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .available-service-catalog,
    .pricing-plan-grid,
    .support-metrics,
    .communication-insight-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .portal-main {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .card,
    .public-form-card {
        max-width: 100%;
    }

    .portal-topbar h1 {
        font-size: clamp(1.7rem, 10vw, 2.35rem);
    }

    .dashboard-ticket-item,
    .dashboard-compact-item,
    .dashboard-service-item,
    .client-catalog-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashboard-ticket-badges,
    .dashboard-compact-item > .badge,
    .dashboard-service-item > .badge,
    .client-catalog-item > .badge {
        grid-column: 2;
        justify-self: start;
    }
}

/* Account security, SupportAgent administration and client analytics. */
.business-profile-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.business-profile-grid .business-span-2 { grid-column: span 2; }
.business-profile-grid .business-span-3 { grid-column: span 3; }
.business-profile-grid .business-span-4 { grid-column: span 4; }
.business-profile-grid .business-span-5 { grid-column: span 5; }
.business-profile-grid .business-span-6 { grid-column: span 6; }
.business-profile-grid .business-span-8 { grid-column: span 8; }

@media (max-width: 900px) {
    .business-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .business-profile-grid > [class*="business-span-"] { grid-column: auto; }
    .business-profile-grid > .business-span-6,
    .business-profile-grid > .business-span-8 { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .business-profile-grid { grid-template-columns: minmax(0, 1fr); }
    .business-profile-grid > [class*="business-span-"] { grid-column: auto; }
}

.security-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.security-settings-grid > .card {
    height: 100%;
}

.security-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.security-settings-grid.security-settings-overview {
    grid-template-columns: minmax(0, 1fr);
}

.security-settings-overview .security-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.portal-modal .security-password-modal {
    width: min(46rem, calc(100vw - 2rem));
}

.portal-modal .modal-close-button.danger-close {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}

.portal-modal .modal-close-button.danger-close:hover,
.portal-modal .modal-close-button.danger-close:focus-visible {
    color: #fff;
    border-color: #991b1b;
    background: #b91c1c;
}

.security-password-modal > .password-settings-form {
    padding: 1.25rem;
}

@media (max-width: 1180px) {
    .security-settings-grid { grid-template-columns: minmax(0, 1fr); }
}

.security-overview-card,
.two-factor-setup-card,
.recovery-codes-card {
    min-width: 0;
}

.security-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0 1.25rem;
}

.security-status-grid > div {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.security-status-grid span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.security-status-grid strong {
    font-size: 1rem;
}

.security-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--blue-soft) 62%, var(--surface));
}

.security-callout > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--blue);
    background: var(--surface);
}

.security-callout p,
.security-action-card p {
    margin: .25rem 0 0;
    color: var(--muted);
}

.security-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.security-action-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .8rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.security-action-card > i {
    color: var(--blue);
    font-size: 1.25rem;
}

.security-action-card h3 {
    margin: 0;
    font-size: 1rem;
}

.security-action-card .button {
    width: 100%;
}

.danger-zone-card {
    border-color: color-mix(in srgb, var(--red) 35%, var(--line));
}

.security-forget-browser-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.two-factor-setup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
}

.two-factor-setup-grid > .two-factor-step:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 48rem);
}

.two-factor-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.two-factor-step-number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-weight: 900;
}

.two-factor-step h3 {
    margin: 0 0 .35rem;
}

.two-factor-step p {
    margin: 0 0 .8rem;
    color: var(--muted);
}

.two-factor-qr {
    display: block;
    width: min(230px, 100%);
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.two-factor-shared-key {
    display: inline-block;
    max-width: 100%;
    padding: .75rem 1rem;
    border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--line));
    border-radius: 12px;
    color: var(--text);
    background: var(--surface);
    font-size: 1rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.two-factor-confirmation form {
    max-width: 34rem;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: 1rem 0;
}

.recovery-code-grid code {
    display: block;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background: var(--surface-soft);
    text-align: center;
    user-select: all;
}

.table-status-stack {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.report-kpi-green { color: var(--green); }
.report-kpi-red { color: var(--red); }

.report-line-chart {
    min-height: 13rem;
    padding: .75rem 0;
}

.report-line-chart svg {
    width: 100%;
    height: 13rem;
    overflow: visible;
}

.report-line-grid {
    fill: none;
    stroke: color-mix(in srgb, var(--line) 82%, transparent);
    stroke-width: .35;
    stroke-dasharray: 2 2;
}

.report-line-path {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.report-trend-labels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .6rem;
}

.report-trend-labels span {
    display: grid;
    gap: .2rem;
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.report-trend-labels small {
    color: var(--muted);
}

.report-horizontal-bars {
    display: grid;
    gap: .85rem;
}

.report-horizontal-bar {
    display: grid;
    gap: .4rem;
}

.report-bar-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.report-horizontal-bar svg {
    width: 100%;
    height: .7rem;
}

.report-bar-track {
    fill: color-mix(in srgb, var(--line) 78%, transparent);
}

.report-bar-fill {
    fill: var(--blue);
}

.client-ticket-trend-table {
    display: grid;
    border-top: 1px solid var(--line);
}

.client-ticket-trend-table > div {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) repeat(2, minmax(7rem, auto));
    align-items: center;
    gap: .75rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}

.client-ticket-trend-table > div > span:not(:first-child) {
    color: var(--muted);
    text-align: right;
}

.client-ticket-trend-table strong {
    color: var(--text);
}

@media (max-width: 900px) {
    .security-status-grid,
    .security-action-grid {
        grid-template-columns: 1fr;
    }

    .security-callout {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .security-callout .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .recovery-code-grid {
        grid-template-columns: 1fr;
    }

    .two-factor-step {
        grid-template-columns: 1fr;
    }

    .client-ticket-trend-table > div {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .client-ticket-trend-table > div > span:not(:first-child) {
        text-align: left;
    }
}


/* Configuración 2FA: centra el contenido del paso conservando el número y la alineación del encabezado. */
.two-factor-step > div {
    min-width: 0;
}

.two-factor-step > div > p {
    text-align: center;
}

.two-factor-step > div > .two-factor-qr,
.two-factor-step > div > .two-factor-shared-key {
    margin-inline: auto;
}

.two-factor-confirmation > p {
    text-align: center;
}

.two-factor-confirmation form {
    width: min(100%, 34rem);
    margin-inline: auto;
}

.two-factor-confirmation .form-actions {
    justify-content: center;
}

/* Paginación DataTables: la página activa debe mantener siempre el texto en blanco. */
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover,
.dt-container .dt-paging .dt-paging-button[aria-current="page"],
.dt-container .dt-paging .dt-paging-button[aria-current="page"]:hover,
.dt-container .dt-paging .dt-paging-button.current *,
.dt-container .dt-paging .dt-paging-button[aria-current="page"] * {
    color: #fff !important;
}


/* Las estadísticas CLIENT reutilizan el sistema visual de Reports ADMIN con métricas accionables y no duplicadas. */
.client-reports-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-reports-bi-grid {
    margin-top: 1rem;
}

.client-reports-bi-grid .report-bi-card {
    min-height: 0;
}

.client-reports-bi-grid .report-health-grid {
    margin-top: .25rem;
}

@media (max-width: 1280px) {
    .client-reports-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .client-reports-bi-grid .report-span-7,
    .client-reports-bi-grid .report-span-5 {
        grid-column: span 6;
    }
}

@media (max-width: 820px) {
    .client-reports-kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .client-reports-bi-grid .report-span-7,
    .client-reports-bi-grid .report-span-5 {
        grid-column: 1 / -1;
    }
}

/* Herramientas ADMIN de mantenimiento del sistema disponibles solo en Development. */
.system-maintenance-card {
    border-color: color-mix(in srgb, var(--warning, #d97706) 28%, var(--line));
}

.system-maintenance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.system-maintenance-action {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.system-maintenance-action-danger {
    border-color: color-mix(in srgb, var(--danger, #b91c1c) 35%, var(--line));
}

.system-maintenance-action h3,
.system-maintenance-action p {
    margin: 0;
}

.system-maintenance-action small {
    display: block;
    margin-top: .45rem;
    color: var(--muted);
    line-height: 1.45;
}

.system-maintenance-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--blue);
    background: var(--blue-soft);
}

.system-maintenance-action-danger .system-maintenance-icon {
    color: var(--danger, #b91c1c);
    background: color-mix(in srgb, var(--danger, #b91c1c) 12%, transparent);
}

.maintenance-confirmation-dialog {
    width: min(620px, calc(100vw - 2rem));
}

.system-maintenance-confirmation-form {
    padding: 1.15rem;
}

.system-maintenance-phrase {
    display: grid;
    gap: .4rem;
    margin: .85rem 0 1rem;
    padding: .85rem;
    border: 1px dashed color-mix(in srgb, var(--blue) 55%, var(--line));
    border-radius: 12px;
    background: var(--surface-soft);
}

.system-maintenance-phrase span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.system-maintenance-phrase code {
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 800;
}

@media (max-width: 1023px) {
    .system-maintenance-grid {
        grid-template-columns: 1fr;
    }
}

/* Cupones: las superficies compactas de validación y canje reutilizan el lenguaje visual común de formularios. */
.coupon-preview-form {
    display: grid;
    gap: .65rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border-color, #dbe3ef);
}

.coupon-preview-controls {
    display: flex;
    align-items: stretch;
    gap: .65rem;
}

.coupon-preview-controls input {
    min-width: 0;
    flex: 1 1 auto;
}

.coupon-preview-controls .button {
    flex: 0 0 auto;
}

#coupon-dialog .portal-modal-card,
#client-coupon-redemption-dialog .portal-modal-card {
    max-height: min(90dvh, 58rem);
}

@media (max-width: 620px) {
    .coupon-preview-controls {
        flex-direction: column;
    }

    .coupon-preview-controls .button {
        width: 100%;
    }
}

/* Stripe checkout marketplace: explicit plan selection, persistent CTA and embedded Payment Element. */
.client-service-marketplace .marketplace-shell {
    overflow: visible;
}

.marketplace-header {
    align-items: flex-start;
}

.available-service-card {
    position: relative;
    overflow: hidden;
    gap: .9rem;
    border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.available-service-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
    box-shadow: 0 18px 38px rgba(15, 23, 42, .1);
}

.marketplace-service-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 11%, var(--surface));
    font-size: 1.15rem;
}

.marketplace-starting-price {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: .15rem .55rem;
    margin-top: auto;
    padding-top: .5rem;
}

.marketplace-starting-price > span,
.marketplace-starting-price > small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.marketplace-starting-price > strong {
    font-size: 1.4rem;
    line-height: 1;
}

.marketplace-starting-price > small {
    grid-column: 2;
}

.pricing-marketplace-card {
    max-width: min(1180px, calc(100vw - 2rem));
}

.pricing-marketplace-header {
    flex: 0 0 auto;
}

.pricing-dialog-content {
    position: relative;
    padding-bottom: 1.5rem;
}

.pricing-selection-guidance {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 1rem;
    padding: .65rem .9rem;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--blue) 5%, var(--surface));
    font-size: .83rem;
    font-weight: 700;
}

.pricing-selection-guidance i {
    color: var(--blue);
}

.pricing-plan-card {
    border: 1px solid var(--line);
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pricing-plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
}

.pricing-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.pricing-option + .pricing-option {
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.pricing-option:hover:not(.is-provisioned) {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
}

.pricing-option.is-selected {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.pricing-option.is-provisioned {
    opacity: .78;
}

.pricing-option-copy {
    display: grid;
    gap: .2rem;
}

.pricing-option-copy strong {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.pricing-option-copy span {
    color: var(--muted);
}

.pricing-plan-action {
    grid-column: 1 / -1;
}

.pending-checkout-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.pending-checkout-card[hidden] { display: none; }
.pending-checkout-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.pending-checkout-copy { display: grid; gap: .18rem; min-width: 0; }
.pending-checkout-copy > strong { font-size: 1rem; }
.pending-checkout-copy > span:not(.eyebrow),
.pending-checkout-copy > small { color: var(--muted); }
.pending-checkout-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
@media (max-width: 900px) {
    .pending-checkout-card { grid-template-columns: auto minmax(0, 1fr); }
    .pending-checkout-actions { grid-column: 1 / -1; justify-content: stretch; }
    .pending-checkout-actions .button { flex: 1 1 180px; }
}

.pricing-selection-dock {
    position: sticky;
    z-index: 15;
    bottom: .35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.4rem auto 0;
    width: min(760px, calc(100% - 1rem));
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .2);
    backdrop-filter: blur(16px);
}

.pricing-selection-dock[hidden] {
    display: none;
}

.pricing-selection-dock.is-entering {
    animation: pricing-dock-enter .28s ease-out both;
}

.pricing-selection-summary {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.pricing-selection-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pricing-checkout-action {
    flex: 0 0 auto;
    min-width: 13rem;
    justify-content: center;
}

@keyframes pricing-dock-enter {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.stripe-checkout-card {
    max-width: min(1040px, calc(100vw - 2rem));
}

.stripe-checkout-layout {
    display: grid;
    grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr);
    min-height: 430px;
}

.stripe-order-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.stripe-order-summary-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.stripe-order-summary dl {
    display: grid;
    gap: .75rem;
    margin: 0;
}

.stripe-order-summary dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--line);
}

.stripe-order-summary dt {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.stripe-order-summary dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.stripe-order-summary .stripe-order-total {
    align-items: baseline;
    border-bottom: 0;
    padding-top: .3rem;
}

.stripe-order-summary .stripe-order-total dd {
    color: var(--blue);
    font-size: 1.35rem;
}

.stripe-secure-hint {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: auto 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.45;
}

.stripe-secure-hint i {
    margin-top: .15rem;
    color: var(--green);
}

.stripe-payment-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.5rem;
}

.stripe-plan-change-dialog .stripe-payment-panel {
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
        var(--surface);
}

.plan-change-summary {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
}

.plan-change-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: .75rem;
}

.plan-change-route-plan {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.plan-change-route-plan i {
    color: var(--muted);
}

.plan-change-route-plan strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-change-route-plan.is-target {
    color: var(--blue-strong, var(--blue));
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.plan-change-route-plan.is-target i {
    color: var(--blue);
}

.plan-change-route-arrow {
    display: grid;
    place-items: center;
    color: var(--blue);
}

.plan-change-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.plan-change-facts > div {
    display: grid;
    gap: .35rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.plan-change-facts dt {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.plan-change-facts dt i {
    color: var(--blue);
}

.plan-change-facts dd {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 850;
}

@media (max-width: 620px) {
    .plan-change-route,
    .plan-change-facts {
        grid-template-columns: 1fr;
    }

    .plan-change-route-arrow {
        transform: rotate(90deg);
    }
}

.stripe-payment-heading h3 {
    margin: .15rem 0 0;
}

.stripe-payment-element {
    min-height: 155px;
}

.stripe-checkout-loading {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.25rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.stripe-checkout-loading[hidden] {
    display: none;
}

.portal-inline-spinner {
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid color-mix(in srgb, var(--blue) 20%, transparent);
    border-top-color: var(--blue);
    border-radius: 999px;
    animation: portal-loading-spin .75s linear infinite;
}

.stripe-checkout-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: auto;
    padding-top: .5rem;
}

.stripe-billing-return {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
}

@media (max-width: 780px) {
    .pricing-selection-dock {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        bottom: .15rem;
    }

    .pricing-selection-summary strong {
        white-space: normal;
    }

    .pricing-checkout-action {
        width: 100%;
        min-width: 0;
    }

    .stripe-checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .stripe-order-summary {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stripe-checkout-actions {
        flex-direction: column-reverse;
    }

    .stripe-checkout-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* Billing payment-method management via Stripe SetupIntent + Payment Element. */
.billing-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}

.billing-payment-methods-section .payment-method-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 380px));
}

.payment-method-card {
    display: grid;
    align-content: start;
    gap: .85rem;
    min-width: 0;
    min-height: 0;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.payment-method-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
}

.payment-method-card.is-default {
    border-color: color-mix(in srgb, var(--green) 38%, var(--line));
    box-shadow: inset 3px 0 0 var(--green);
}

.payment-method-card > div.payment-method-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    min-width: 0;
}

.payment-method-main {
    display: flex !important;
    align-items: center;
    gap: .75rem !important;
    min-width: 0;
}

.payment-method-main > div:last-child {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.payment-method-main strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-method-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .85rem;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.payment-method-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    width: 100%;
}

.payment-method-actions .button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.billing-payment-empty {
    display: grid;
    place-items: center;
    gap: .45rem;
    min-height: 150px;
    text-align: center;
}

.billing-payment-empty > i {
    color: var(--blue);
    font-size: 1.65rem;
}

.billing-payment-empty > span {
    color: var(--muted);
    max-width: 50ch;
}

.billing-checkout-status {
    margin-top: 1rem;
}

.billing-payment-method-dialog-card {
    max-width: min(760px, calc(100vw - 2rem));
}

.billing-payment-method-body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.billing-payment-security {
    margin: 0;
}

@media (max-width: 720px) {
    .billing-header-actions,
    .payment-method-actions {
        width: 100%;
    }

    .billing-header-actions .button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .payment-method-card > div.payment-method-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .payment-method-header .status-stack {
        justify-content: flex-start;
    }
}

/* Stripe catalog/billing reconciliation status -------------------------------- */
.stripe-sync-ok {
    border-color: color-mix(in srgb, var(--success-color, #1f9d55) 45%, transparent);
}

.stripe-sync-pending {
    border-style: dashed;
}

.billing-stripe-sync-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-elevated-solid, var(--surface));
}

.billing-stripe-sync-bar > div {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.billing-stripe-sync-bar .fa-stripe {
    font-size: 1.9rem;
    flex: 0 0 auto;
}

.billing-stripe-sync-bar strong,
.billing-stripe-sync-bar span {
    display: block;
}

.billing-stripe-sync-bar span {
    color: var(--muted-text);
    font-size: .86rem;
    margin-top: .12rem;
}

@media (max-width: 720px) {
    .billing-stripe-sync-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-stripe-sync-bar .button {
        width: 100%;
    }
}

.catalog-name-with-sync {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.stripe-sync-summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 1.45rem;
    padding: .12rem .42rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Checkout selection flow: plan -> review/coupon -> provider payment. */
.checkout-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:0 0 1.25rem}.checkout-stepper>span{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:var(--surface-soft);font-size:.78rem;font-weight:750}.checkout-stepper b{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,var(--surface));color:var(--muted)}.checkout-stepper>span.is-active{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));color:var(--text);background:color-mix(in srgb,var(--blue) 7%,var(--surface))}.checkout-stepper>span.is-active b,.checkout-stepper>span.is-complete b{background:var(--blue);color:#fff}.pricing-step-panel[hidden],.pricing-review-panel[hidden]{display:none}.pricing-review-panel{display:grid;gap:1.1rem;animation:pricing-dock-enter .22s ease-out both}.pricing-review-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.05rem 1.1rem;border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--blue) 5%,var(--surface))}.pricing-review-heading h3{margin:.2rem 0 .2rem;font-size:1.25rem}.pricing-review-heading p{margin:0;color:var(--muted)}.pricing-review-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:1rem}.pricing-review-order,.pricing-coupon-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:1.15rem}.pricing-review-order{display:grid;gap:0}.review-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line)}.review-line span{color:var(--muted);font-size:.82rem;font-weight:700}.review-line strong{text-align:right}.review-line.review-discount strong{color:var(--green)}.review-line.review-total{border-bottom:0;padding-top:1rem}.review-line.review-total strong{color:var(--blue);font-size:1.45rem}.pricing-change-hint{display:block;margin-top:.8rem;padding:.75rem;border-radius:12px;background:var(--surface-soft);color:var(--muted);font-size:.82rem}.pricing-coupon-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:.75rem .8rem;background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 7%,var(--surface)),var(--surface))}.coupon-card-icon{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:.9rem;background:color-mix(in srgb,var(--blue) 13%,var(--surface));color:var(--blue)}.coupon-card-copy{display:grid;gap:.2rem}.coupon-card-copy span{color:var(--muted);font-size:.78rem;line-height:1.4}.coupon-card-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem}.coupon-card-controls input{min-width:0;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.coupon-result{grid-column:1/-1;padding:.65rem .75rem;border-radius:10px;font-size:.78rem;font-weight:700}.coupon-result.is-success{color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface))}.coupon-result.is-error{color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--surface))}.pricing-review-actions{display:flex;justify-content:space-between;gap:.75rem;padding-top:.2rem}.pricing-review-actions .pricing-checkout-action{min-width:14rem}.product-price-summary{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}.product-price-list{display:grid;gap:.55rem;margin-top:1rem}.product-price-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.75rem;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.product-price-row>div{display:grid;gap:.12rem}.product-price-row small{color:var(--muted);font-family:var(--font-mono,monospace)}
@media(max-width:820px){.checkout-stepper{grid-template-columns:1fr}.pricing-review-grid{grid-template-columns:1fr}.pricing-review-heading{display:grid}.pricing-review-heading>.button{justify-self:start}.pricing-review-actions{flex-direction:column-reverse}.pricing-review-actions .button{width:100%;justify-content:center}.coupon-card-controls{grid-template-columns:1fr}.product-price-row{grid-template-columns:1fr auto}.product-price-row form{grid-column:1/-1}}

/* Dashboard Invoicing: mantener seis KPI financieros equilibrados en dos filas de tres en pantallas amplias. */
.metrics-row.invoicing-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1280px) {
    .metrics-row.invoicing-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .metrics-row.invoicing-dashboard-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dashboard Invoicing: mantener la fila de comandos operativos alineada con el flujo financiero. */
.invoicing-dashboard-actions {
    justify-content: flex-start;
}

/* Editor de factura puntual: diseño de documento tipo factura compartido por ADMIN e Invoicing. */
.invoice-editor-card {
    overflow: hidden;
}

.invoice-editor-header {
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.invoice-editor-mark {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--blue) 12%, var(--surface));
    color: var(--blue);
    font-size: 1.35rem;
}

.invoice-editor-form {
    gap: 0;
}

.invoice-editor-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}

.invoice-editor-section-title {
    margin-bottom: .9rem;
}

.invoice-editor-section-title h3 {
    margin: .15rem 0 0;
}

.invoice-editor-meta-grid + .invoice-editor-meta-grid {
    margin-top: .8rem;
}

.invoice-lines-table {
    /* Los lookups remotos de producto deben flotar fuera de la primera fila. Recortar la tabla
       ocultaba el panel de opciones hasta que nuevas filas dinámicas aumentaban la altura del contenedor. */
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.invoice-line-head,
.invoice-line-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1.5fr) 90px 130px 130px 48px;
    gap: .65rem;
    align-items: center;
}

.invoice-line-head {
    padding: .65rem .8rem;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.invoice-line-row {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--line);
}

.invoice-line-row:last-child {
    border-bottom: 0;
}

.invoice-line-cell {
    min-width: 0;
}

.invoice-line-cell input,
.invoice-line-cell select {
    width: 100%;
    min-width: 0;
}

.invoice-line-unit-price,
.invoice-line-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.invoice-line-total {
    color: var(--text);
}

.invoice-line-remove {
    display: flex;
    justify-content: flex-end;
}

.invoice-editor-totals {
    width: min(360px, 100%);
    margin: 1rem 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-soft);
}

.invoice-editor-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem .9rem;
}

.invoice-editor-totals > div + div {
    border-top: 1px solid var(--line);
}

.invoice-editor-totals span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.invoice-editor-totals strong {
    font-variant-numeric: tabular-nums;
}

.invoice-editor-grand-total {
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.invoice-editor-grand-total strong {
    color: var(--blue);
    font-size: 1.12rem;
}

.invoice-editor-note {
    margin-top: 1rem;
}

.invoice-editor-actions {
    padding-top: 1rem;
}

/* Editor de facturas consciente del proveedor de facturación. El proveedor se configura por cliente y nunca se selecciona por factura. */
.invoice-editor-client-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 1rem;
    align-items: end;
}

.invoice-editor-client-field {
    min-width: 0;
}

.invoice-provider-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .8rem;
    align-items: center;
    min-height: 76px;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.invoice-provider-card[data-mode="Stripe"] {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.invoice-provider-card[data-mode="Local"] {
    border-color: color-mix(in srgb, var(--success) 42%, var(--line));
    background: color-mix(in srgb, var(--success) 7%, var(--surface));
}

.invoice-provider-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--blue);
    border: 1px solid var(--line);
}

.invoice-provider-card[data-mode="Local"] .invoice-provider-icon {
    color: var(--success);
}

.invoice-provider-content select {
    width: 100%;
    min-height: 40px;
    margin-top: .2rem;
}

.invoice-provider-label {
    display: block;
    margin-bottom: .15rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.invoice-provider-card strong {
    display: block;
    color: var(--text);
}

.invoice-provider-card p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}

.invoice-provider-policy-note {
    margin: .9rem 0 0;
}

.invoice-local-fields {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--success) 4%, var(--surface));
}

.invoice-local-fields-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.invoice-local-fields-header h3 {
    margin: .15rem 0 0;
}

.invoice-editor-local-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.invoice-editor-payment-instructions {
    margin-top: .8rem;
}

.invoice-editor-payment-instructions textarea {
    width: 100%;
    resize: vertical;
}

.invoice-editor-payment-instructions small {
    display: block;
    margin-top: .35rem;
    color: var(--muted);
}

.invoice-editor-notes-grid {
    margin-top: 1rem;
}

/* Local invoice document viewer ------------------------------------------------ */
.invoice-document-viewer {
    display: grid;
    gap: 1rem;
}

.invoice-document-viewer__heading {
    align-items: flex-end;
}

.invoice-document-viewer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.invoice-document-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem;
    padding: .85rem;
    border: 1px solid var(--portal-border-color, rgba(148, 163, 184, .24));
    border-radius: 1rem;
    background: var(--portal-surface, rgba(15, 23, 42, .52));
}

.invoice-document-summary > div {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.invoice-document-summary span {
    color: var(--portal-text-muted, #94a3b8);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.invoice-document-summary strong {
    overflow-wrap: anywhere;
}

.invoice-document-viewer__frame-shell {
    min-height: 720px;
    overflow: hidden;
    border: 1px solid var(--portal-border-color, rgba(148, 163, 184, .24));
    border-radius: 1rem;
    background: #fff;
}

.invoice-document-viewer__frame {
    display: block;
    width: 100%;
    min-height: 720px;
    border: 0;
    background: #fff;
}

.invoice-document-viewer .invoice-document-summary {
    margin: 1rem 1rem 0;
}

.invoice-document-viewer .invoice-document-viewer__frame-shell {
    margin: 1rem;
}

/* Multi-context identity switcher. Tenant data isolation remains en servidor. */
.portal-context-switcher{display:grid;gap:5px}.portal-context-switcher label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.7}.portal-context-switcher select{width:100%;min-width:0}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* Server-paged high-cardinality selector: searchable, acotada al Tenant and infinite-scroll capable. */
.remote-lookup-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.remote-lookup{position:relative;min-width:0}.remote-lookup-input{width:100%}.remote-lookup-panel{position:absolute;z-index:80;top:calc(100% + 5px);left:0;right:0;max-height:280px;overflow:auto;border:1px solid var(--border-color,#33415c);border-radius:10px;background:var(--surface,#fff);color:var(--text,#111827);box-shadow:0 16px 34px rgb(0 0 0 / 24%)}.remote-lookup-option{display:grid;gap:2px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid rgb(127 146 177 / 18%);background:transparent;color:inherit;text-align:left;cursor:pointer}.remote-lookup-option:hover,.remote-lookup-option:focus-visible{background:rgb(59 130 246 / 16%);outline:0}.remote-lookup-option small{opacity:.7}.remote-lookup-empty{padding:14px;opacity:.72}.remote-lookup.is-loading .remote-lookup-input{background-image:linear-gradient(90deg,transparent,rgb(59 130 246 / 12%),transparent);background-size:200% 100%;animation:remote-lookup-loading 1.1s linear infinite}@keyframes remote-lookup-loading{to{background-position:-200% 0}}

/* Configuración del Tenant: separa los controles de registro de la configuración comercial de facturación. */
.tenant-invoice-mode-form {
    margin-top: 0;
}

.settings-billing-preferences-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.125rem;
}

.settings-billing-preferences-grid .management-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .75rem;
    margin: 0;
}

.settings-billing-preferences-grid .form-actions,
.invoice-numbering-actions-row .form-actions {
    margin: 0;
}

.settings-billing-preferences-grid .button,
.invoice-numbering-actions-row .button {
    white-space: nowrap;
}

.invoice-numbering-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.invoice-numbering-actions-row {
    display: grid;
    grid-template-columns: minmax(360px, 1.5fr) minmax(220px, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.invoice-numbering-actions-row .muted-text {
    margin: 0;
}

@media (max-width: 1100px) {
    .settings-billing-preferences-grid,
    .invoice-numbering-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-numbering-actions-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .invoice-numbering-actions-row .settings-toggle {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .settings-billing-preferences-grid,
    .settings-billing-preferences-grid .management-form,
    .invoice-numbering-grid,
    .invoice-numbering-actions-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-numbering-actions-row .settings-toggle {
        grid-column: auto;
    }
}

.settings-section-divider {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 1.5rem 0;
}

.tenant-registration-header {
    margin-bottom: 1rem;
}

/* Remote entity picker: en servidor search + keyset pagination/infinite scroll. */
.remote-lookup-control{position:relative;min-width:0}.remote-lookup.has-selection .remote-lookup-input{padding-right:2.5rem}.remote-lookup-clear{position:absolute;top:50%;right:.55rem;transform:translateY(-50%);display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:1.35rem;line-height:1;cursor:pointer;opacity:.72}.remote-lookup-clear:hover,.remote-lookup-clear:focus-visible{background:rgb(127 146 177 / 14%);opacity:1;outline:2px solid rgb(59 130 246 / 35%);outline-offset:1px}.remote-lookup-clear[hidden]{display:none}

/* Communication Studio: composición segura basada en presets con vista previa en vivo del portal del Tenant. */
.communication-template-studio {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, var(--surface)), var(--surface));
}

.communication-template-studio-heading h3,
.communication-template-studio-heading p {
    margin: .15rem 0 0;
}

.communication-template-studio-heading p {
    color: var(--muted);
    font-size: .88rem;
}

.communication-template-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .65rem;
}

.communication-template-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    background: var(--surface);
    text-align: left;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.communication-template-card > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.communication-template-card span,
.communication-template-card strong,
.communication-template-card small {
    display: block;
    min-width: 0;
}

.communication-template-card small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.3;
}

.communication-template-card:hover,
.communication-template-card:focus-visible,
.communication-template-card.is-selected {
    border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
    background: color-mix(in srgb, var(--blue) 5%, var(--surface));
    transform: translateY(-1px);
}

.communication-studio-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 1rem;
    align-items: start;
}

.communication-studio-editor,
.communication-studio-preview {
    min-width: 0;
}

.communication-studio-preview {
    position: sticky;
    top: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
}

.communication-preview-heading {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
}

.communication-preview-heading strong,
.communication-preview-heading small {
    display: block;
}

.communication-preview-heading small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .76rem;
}

.communication-studio-preview .communication-preview {
    min-height: 260px;
    max-height: 540px;
    border-top: 0;
}

.communication-detail-shell {
    max-width: 1040px;
    margin-inline: auto;
}

.communication-detail-card {
    overflow: hidden;
    padding: 0;
}

.communication-detail-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: clamp(1.25rem, 2vw, 2rem);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, var(--surface)), var(--surface));
}

.communication-detail-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: var(--blue);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.communication-detail-heading h1 {
    margin: .2rem 0 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.12;
}

.communication-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: .45rem;
    color: var(--muted);
    font-size: .78rem;
}

.communication-detail-content {
    padding: clamp(1.35rem, 3vw, 2.4rem);
    background: var(--surface);
}

.communication-detail-content .communication-body {
    max-width: 780px;
    margin-inline: auto;
    font-size: 1rem;
}

.communication-type-maintenance .communication-detail-icon { color: var(--amber); }
.communication-type-billing .communication-detail-icon { color: #7c3aed; }
.communication-type-support .communication-detail-icon { color: #0891b2; }
.communication-type-service .communication-detail-icon { color: #15803d; }

/* Estado borrador de factura puntual. Los borradores se persisten en el Tenant y solo se finalizan mediante submit explícito. */
.invoice-draft-state {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .45rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.invoice-draft-state::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 999px;
    background: currentColor;
}

.invoice-draft-state[data-state="saving"] { color: var(--amber); }
.invoice-draft-state[data-state="saved"] { color: #15803d; }
.invoice-draft-state[data-state="error"] { color: var(--red); }

.invoice-provider-help-button {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: .35rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: .72rem;
    font-weight: 800;
}

.invoice-provider-help-button:hover,
.invoice-provider-help-button:focus-visible {
    color: var(--blue);
    border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}

.invoice-line-needs-stripe-sync {
    background: color-mix(in srgb, var(--amber-soft) 48%, transparent);
}

@media (max-width: 1120px) {
    .communication-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .communication-studio-workspace { grid-template-columns: 1fr; }
    .communication-studio-preview { position: static; }
}

@media (max-width: 720px) {
    .communication-template-grid { grid-template-columns: 1fr; }
    .communication-detail-hero { grid-template-columns: auto minmax(0, 1fr); }
    .communication-detail-back { grid-column: 1 / -1; justify-self: start; }
}

.communication-preview-document > h2 {
    margin: 0;
    padding: 1rem 1rem .85rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    font-size: 1.25rem;
    line-height: 1.25;
}

.invoice-provider-admin-hint {
    display: block;
    margin: .45rem 0 .15rem;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
    border-radius: 10px;
    color: var(--muted);
    background: color-mix(in srgb, var(--blue) 4%, var(--surface));
    font-size: .74rem;
    line-height: 1.4;
}

/* Ticket conversation attachments and chat-style composer */
.ticket-document-attachment {
    display: flex;
    grid-column: span 2;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    background: var(--control-bg);
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.ticket-document-attachment:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.ticket-document-icon {
    display: grid;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: 11px;
    color: var(--blue);
    background: var(--blue-soft);
    font-size: 1.3rem;
}

.ticket-document-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.12rem;
}

.ticket-document-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-document-type {
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 750;
    letter-spacing: 0.05em;
}

.ticket-document-download {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 9px;
    color: var(--blue);
    background: var(--surface-soft);
}

.ticket-chat-composer {
    gap: 0.55rem;
}

.ticket-reply-label {
    font-weight: 750;
}

.ticket-chat-composer-shell {
    position: relative;
    display: grid;
    gap: 0.45rem;
    padding: 0.45rem 0.5rem 0.5rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--control-bg);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ticket-chat-composer-shell:focus-within {
    border-color: rgba(37, 99, 235, 0.52);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 12px 30px rgba(15, 23, 42, 0.08);
}

.ticket-chat-composer-shell textarea {
    min-height: 104px;
    padding: 0.65rem 0.7rem 0.3rem;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    box-shadow: none;
}

.ticket-chat-composer-shell textarea:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.ticket-chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.1rem 0.15rem;
}

.ticket-composer-attachment-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.ticket-attach-button,
.ticket-send-icon-button {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 2.45rem;
    place-items: center;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.ticket-attach-button {
    border: 1px solid var(--line);
    color: var(--text);
    background: var(--surface-soft);
}

.ticket-attach-button:hover {
    border-color: rgba(37, 99, 235, 0.32);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.ticket-send-icon-button {
    border: 1px solid var(--blue);
    color: #fff;
    background: var(--blue);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.ticket-send-icon-button:hover {
    transform: translateY(-1px);
}

.ticket-drop-placeholder {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-attachment-help {
    color: var(--muted);
    text-align: center;
}

.ticket-selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.1rem 0.15rem 0.15rem;
}

.ticket-selected-files[hidden] {
    display: none;
}

.ticket-selected-file {
    display: inline-flex;
    min-width: 0;
    max-width: min(100%, 300px);
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    font-size: 0.72rem;
}

.ticket-selected-file > i {
    flex: 0 0 auto;
    color: var(--blue);
}

.ticket-selected-file-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-selected-file small {
    flex: 0 0 auto;
    color: var(--muted);
    white-space: nowrap;
}

.ticket-selected-file-remove {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.ticket-selected-file-remove:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.ticket-attachment-feedback {
    min-height: 0;
    padding: 0 0.2rem;
    color: var(--danger, #b91c1c);
    font-size: 0.75rem;
    font-weight: 700;
}

.ticket-create-attachment-field {
    gap: 0.5rem;
}

.ticket-file-drop-surface {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 82px;
    padding: 0.75rem;
    overflow: hidden;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.ticket-create-drop-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.ticket-create-drop-copy strong {
    font-size: 0.84rem;
}

.ticket-create-drop-copy small {
    color: var(--muted);
}

[data-ticket-drop-zone].is-attachment-dragover {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 8%, var(--control-bg));
}

[data-ticket-drop-zone].is-attachment-dragover::after {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    padding: 1rem;
    content: attr(data-drop-message);
    color: var(--blue);
    background: color-mix(in srgb, var(--control-bg) 90%, var(--blue) 10%);
    font-size: 0.9rem;
    font-weight: 850;
    text-align: center;
    pointer-events: none;
}

.has-attachment-error [data-ticket-drop-zone] {
    border-color: var(--danger, #b91c1c);
}

@media (max-width: 560px) {
    .ticket-document-attachment {
        grid-column: span 1;
    }

    .ticket-drop-placeholder {
        max-width: 54vw;
    }

    .ticket-selected-file {
        max-width: 100%;
        width: 100%;
    }
}


/* ===== Platform SuperAdmin workspace ===== */
.tenant-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(28rem, 38vw);
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.tenant-context-badge i {
    color: var(--blue);
    flex: 0 0 auto;
}

.tenant-context-badge span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-overview-card {
    min-width: 0;
}

.platform-scope-note {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface-soft);
    color: var(--muted);
}

.platform-scope-note i {
    flex: 0 0 auto;
    margin-top: 0.12rem;
    color: var(--blue);
}

.platform-provisioning-form .platform-scope-note {
    margin-top: 1rem;
}

.platform-provisioning-form > .form-actions {
    margin-top: 1.25rem;
    padding-top: .25rem;
}

.platform-quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.platform-quick-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.platform-quick-link:hover {
    border-color: var(--blue);
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.10);
    transform: translateY(-1px);
}

.platform-quick-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.8rem;
    background: var(--blue-soft);
    color: var(--blue);
}

.platform-quick-link-copy {
    min-width: 0;
}

.platform-quick-link-copy strong,
.platform-quick-link-copy span {
    display: block;
}

.platform-quick-link-copy strong {
    color: var(--text);
}

.platform-quick-link-copy span {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.platform-quick-link > .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    flex: 0 0 auto;
}

.platform-directory-toolbar,
.platform-audit-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-directory-toolbar,
.platform-audit-toolbar {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.platform-directory-toolbar .form-field,
.platform-audit-toolbar .form-field {
    margin: 0;
}

.platform-directory-toolbar input,
.platform-directory-toolbar select,
.platform-audit-toolbar input,
.platform-audit-toolbar select {
    min-width: 15rem;
}

.platform-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
}

.platform-table-wrap .portal-table {
    min-width: 52rem;
    margin: 0;
}

.platform-directory-table td,
.platform-directory-table th {
    vertical-align: middle;
}

/* SuperAdmin/workspaces: una fila compacta, datos truncados con tooltip y acciones estables. */
.platform-tenants-table{width:100%;min-width:1260px;table-layout:fixed}
.platform-tenants-table th,.platform-tenants-table td{padding:.72rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.platform-tenants-table th:nth-child(1){width:16%}.platform-tenants-table th:nth-child(2){width:6%}.platform-tenants-table th:nth-child(3){width:17%}.platform-tenants-table th:nth-child(4){width:10%}.platform-tenants-table th:nth-child(5){width:9%}.platform-tenants-table th:nth-child(6){width:10%}.platform-tenants-table th:nth-child(7){width:11%}.platform-tenants-table th:nth-child(8){width:128px}.platform-tenants-table th:nth-child(9){width:190px}
.platform-tenant-primary,.platform-admin-inline{display:flex;align-items:center;min-width:0;gap:.42rem;overflow:hidden}.platform-tenant-primary strong,.platform-admin-inline strong,.platform-admin-inline span,.platform-cell-ellipsis{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.platform-tenant-primary code{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}.platform-tenant-primary .badge{flex:0 0 auto;padding:.24rem .4rem;font-size:.68rem}.platform-admin-inline span{color:var(--text-muted);font-size:.78rem}
.platform-tenant-actions-cell{overflow:hidden!important}.platform-tenant-actions{justify-content:flex-end;gap:.38rem;min-width:0!important;width:100%}.platform-tenant-actions form{display:inline-flex;margin:0}.platform-tenant-actions .button.small{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;min-height:36px;padding:0}.platform-tenant-actions .button.small i{margin:0}

.platform-empty-cell {
    padding: 2rem !important;
    text-align: center;
    color: var(--muted);
}

.platform-context-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 800;
}

.platform-context-count.is-multiple {
    background: var(--blue-soft);
    color: var(--blue);
}

.platform-identity-delete-impact {
    display: block;
    max-width: 18rem;
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.platform-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.platform-pagination-summary {
    color: var(--muted);
    font-size: 0.86rem;
}

.platform-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.platform-pagination-page {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.platform-pagination .is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

@media (max-width: 860px) {
    .platform-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-directory-toolbar,
    .platform-audit-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-directory-toolbar,
    .platform-audit-toolbar {
        align-items: stretch;
    }

    .platform-directory-toolbar .form-field,
    .platform-audit-toolbar .form-field,
    .platform-directory-toolbar input,
    .platform-directory-toolbar select,
    .platform-audit-toolbar input,
    .platform-audit-toolbar select {
        width: 100%;
        min-width: 0;
    }

    .tenant-context-badge {
        max-width: 45vw;
    }
}

@media (max-width: 560px) {
    .platform-metrics,
    .platform-quick-links {
        grid-template-columns: 1fr;
    }

    .platform-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-pagination-controls {
        justify-content: space-between;
    }

    .tenant-context-badge {
        max-width: 58vw;
        padding-inline: 0.65rem;
    }
}

/* Safe 12 / Bloque A: simulación diagnóstica explícita de SuperAdmin en solo lectura. */
.simulation-banner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1rem 1.5rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-color, #2563eb) 35%, var(--border-color));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--accent-color, #2563eb) 8%, var(--surface-color));
}
.simulation-banner-icon,
.simulation-start-icon {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--accent-color, #2563eb) 14%, var(--surface-color));
    color: var(--accent-color, #2563eb);
}
.simulation-banner-copy { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.simulation-banner-copy span,
.simulation-banner-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simulation-banner-copy small { opacity: 0.72; }
.simulation-banner-exit { margin-left: auto; }
.simulation-start-card { max-width: 880px; width: 100%; margin-inline: auto; }
.simulation-start-header { align-items: center; }
.simulation-readonly-notice {
    display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 1.25rem; padding: 1rem;
    border: 1px solid var(--border-color); border-radius: 0.85rem; background: var(--surface-soft);
}
.simulation-readonly-notice > i { margin-top: 0.15rem; color: var(--accent-color, #2563eb); }
.simulation-readonly-notice div { display: grid; gap: 0.25rem; }
.simulation-target-summary { margin: 0 0 1.25rem; }
.simulation-target-summary > div { display: grid; grid-template-columns: minmax(120px, 0.35fr) 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border-color); }
.simulation-target-summary dt { font-weight: 700; }
.simulation-target-summary dd { margin: 0; display: grid; gap: 0.15rem; }
.tenant-context-switch-link { text-decoration: none; cursor: pointer; }
.tenant-context-switch-link:hover,
.tenant-context-switch-link:focus-visible { border-color: var(--accent-color, #2563eb); }
.tenant-context-count { min-width: 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: var(--accent-color, #2563eb); color: #fff; }
.tenant-context-switch-icon { font-size: 0.72rem; opacity: 0.72; }

/* Safe 12 / Bbloqueo B: server-authoritative one-off Stripe payment mode selection. */
.invoice-payment-mode-fieldset { margin: 1rem 0 0; padding: 0; border: 0; }
.invoice-payment-mode-fieldset > legend { margin-bottom: 0.65rem; font-weight: 700; }
.invoice-payment-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.invoice-payment-mode-option {
    position: relative; display: grid; grid-template-columns: auto auto 1fr; gap: 0.75rem; align-items: center;
    padding: 0.9rem; border: 1px solid var(--border-color); border-radius: 0.85rem; background: var(--surface-color); cursor: pointer;
}
.invoice-payment-mode-option:has(input:checked) { border-color: var(--accent-color, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #2563eb) 15%, transparent); }
.invoice-payment-mode-option input { margin: 0; }
.invoice-payment-mode-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; background: var(--surface-soft); color: var(--accent-color, #2563eb); }
.invoice-payment-mode-option > span:last-child { display: grid; gap: 0.15rem; min-width: 0; }
.invoice-payment-mode-option small { line-height: 1.35; opacity: 0.72; }
@media (max-width: 720px) {
    .simulation-banner { margin-inline: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
    .simulation-banner-exit { width: 100%; margin-left: 0; }
    .simulation-banner-exit .button { width: 100%; justify-content: center; }
    .invoice-payment-mode-grid { grid-template-columns: 1fr; }
}

/* UX multi-workspace: un único control explícito en la barra superior. La etiqueta permanece fuera
   del control interactivo para evitar que el select nativo parezca un dropdown doble o anidado. */
.topbar-context-control,
.topbar-profile-control {
    display: grid;
    gap: 0.28rem;
    align-items: end;
}
.topbar-control-label {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.topbar-context-switcher {
    display: block;
    margin: 0;
}
.topbar-context-select-shell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 14rem;
    max-width: min(30rem, 42vw);
    min-height: 2.65rem;
    padding: 0.42rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}
.topbar-context-icon { color: var(--blue); flex: 0 0 auto; }
.topbar-context-select-shell select,
.topbar-context-select-shell select:focus,
.topbar-context-select-shell select:hover {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 1.35rem 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--text);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 800;
    cursor: pointer;
}
.topbar-context-static { min-height: 2.65rem; border-radius: 0.9rem; }
.topbar-profile-control .role-badge {
    min-height: 2.65rem;
    padding-inline: 0.82rem;
    justify-content: center;
}
.tenant-context-switch-copy { display: grid; gap: 0.1rem; min-width: 0; }
.tenant-context-switch-copy strong,
.tenant-context-switch-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-context-switch-copy small { color: var(--muted); font-size: 0.67rem; font-weight: 700; }
.tenant-context-switch-many { min-height: 2.65rem; border-radius: 0.9rem; line-height: 1.1; }

/* Creación de cliente ADMIN: reutilización explícita de una identidad global verificada sin exponer otros espacios Tenant. */
.existing-identity-match {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    margin: 0.9rem 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.existing-identity-match[hidden] { display: none; }
.existing-identity-match[data-match-kind="conflict"],
.existing-identity-match[data-match-kind="restricted"],
.existing-identity-match[data-match-kind="already-assigned"] {
    border-color: color-mix(in srgb, #d97706 42%, var(--line));
    background: color-mix(in srgb, #f59e0b 7%, var(--surface));
}
.existing-identity-match-icon {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem;
    background: var(--blue-soft); color: var(--blue);
}
.existing-identity-match-copy { display: grid; gap: 0.15rem; min-width: 0; }
.existing-identity-match-copy span,
.existing-identity-match-copy small { color: var(--muted); overflow-wrap: anywhere; }
.existing-identity-match-actions { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 860px) {
    .topbar-context-select-shell { max-width: 52vw; min-width: 11rem; }
    .existing-identity-match { grid-template-columns: auto minmax(0, 1fr); }
    .existing-identity-match-actions { grid-column: 1 / -1; justify-content: stretch; }
    .existing-identity-match-actions .button { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
    .topbar-context-select-shell { max-width: 58vw; min-width: 0; }
    .topbar-context-select-shell select { font-size: 0.78rem; }
    .topbar-profile-control .topbar-control-label { display: none; }
    .topbar-profile-control .role-badge { min-height: 2.35rem; padding-inline: 0.62rem; }
}


/* Safe 12 / Bbloqueo C closure: shared remote lookup visual contract. */
.remote-lookup-panel {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
    z-index: 160;
}
.remote-lookup-option { color: var(--text); }
.remote-lookup-option strong { color: var(--text); font-weight: 800; }
.remote-lookup-option small { color: var(--muted); opacity: 1; }
.remote-lookup-option:hover,
.remote-lookup-option:focus-visible {
    background: var(--blue-soft);
    color: var(--text);
}
.remote-lookup-option:hover small,
.remote-lookup-option:focus-visible small { color: var(--muted); }

/* Los lookups del editor de facturas son overlays y nunca contenido que deba ampliar la grilla de líneas. */
.invoice-lines-section,
.invoice-lines-table,
.invoice-line-row,
.invoice-line-cell,
.invoice-line-product { overflow: visible; }
.invoice-line-product .remote-lookup { position: relative; z-index: 20; }
.invoice-line-product .remote-lookup.is-open { z-index: 170; }
.invoice-line-product .remote-lookup-panel { min-width: min(34rem, 78vw); }

/* La navegación mensual del calendario sigue el lenguaje visual de acciones redondeadas del portal. */
.calendar-header-actions .icon-button[data-calendar-prev],
.calendar-header-actions .icon-button[data-calendar-next] {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}
.calendar-header-actions .icon-button[data-calendar-prev]:hover,
.calendar-header-actions .icon-button[data-calendar-next]:hover,
.calendar-header-actions .icon-button[data-calendar-prev]:focus-visible,
.calendar-header-actions .icon-button[data-calendar-next]:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
    background: var(--blue-soft);
    color: var(--blue-dark);
}

/* Limpieza de Tenant por SuperAdmin: explícita, acotada y visualmente separada de la administración ordinaria. */
.platform-cleanup-page { max-width: 1180px; }
.tenant-cleanup-target-form { max-width: 640px; margin-top: 1rem; }
.tenant-cleanup-selection-heading {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.4rem 0 .8rem;
}
.tenant-cleanup-selection-heading h3 { margin: .2rem 0; }
.tenant-cleanup-options {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem;
}
.tenant-cleanup-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start;
    padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); cursor: pointer;
}
.tenant-cleanup-option:hover { border-color: color-mix(in srgb, var(--blue) 36%, var(--line)); }
.tenant-cleanup-option > input[type="checkbox"] { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--blue); }
.tenant-cleanup-option > span { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; row-gap: .15rem; min-width: 0; }
.tenant-cleanup-option i { color: var(--blue); margin-top: .1rem; }
.tenant-cleanup-option strong { color: var(--text); }
.tenant-cleanup-option small { grid-column: 1 / -1; color: var(--muted); line-height: 1.35; }
.tenant-cleanup-confirmation { margin-top: 1rem; max-width: 720px; display: grid; gap: .8rem; }
.registration-tenant-context {
    display: inline-flex; align-items: center; gap: .45rem; margin-top: .65rem; padding: .5rem .7rem;
    border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark);
}

@media (max-width: 980px) {
    .tenant-cleanup-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tenant-cleanup-selection-heading { align-items: stretch; flex-direction: column; }
    .tenant-cleanup-options { grid-template-columns: 1fr; }
    .invoice-line-product .remote-lookup-panel { min-width: 100%; }
}

/* Consulta remota de productos: sale del contenedor responsive de factura sin ampliar una tabla de líneas vacía. */
.remote-lookup-panel.remote-lookup-panel-portal {
    position: fixed;
    right: auto;
    z-index: 2200;
    max-height: min(280px, 45vh);
}
.remote-lookup-panel.remote-lookup-panel-wide {
    min-width: 0;
}

.tenant-public-registration-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    margin: .85rem 0 1rem;
    padding: .85rem .95rem;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
    border-radius: 12px;
    background: var(--blue-soft);
}
.tenant-public-registration-link > i { color: var(--blue); margin-top: .2rem; }
.tenant-public-registration-link > div { display: grid; gap: .2rem; min-width: 0; }
.tenant-public-registration-link span { color: var(--muted); }
.tenant-public-registration-link a { overflow-wrap: anywhere; font-weight: 700; }

/* Estabilización ALPHA: los avisos de identidad existente usan el lenguaje de alertas del portal
   y la prueba pública de credenciales permanece agrupada visualmente con la cuenta detectada. */
.existing-identity-match.alert {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
}
.existing-identity-match[data-selected="true"] {
    border-color: color-mix(in srgb, var(--green) 45%, var(--line));
    background: color-mix(in srgb, var(--green-soft) 68%, var(--surface));
}
.existing-identity-proof {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: end;
    padding-top: .3rem;
}
.existing-identity-proof[hidden] { display: none; }
.registration-validation-summary.validation-summary-valid,
.registration-validation-summary:empty { display: none; }

/* DataTables 2 puede aplicar su propio color de enlaces/botones después de las reglas del tema.
   Como la página activa usa fondo de acento, se fuerza texto blanco accesible al final de la cascada. */
html body .dt-container .dt-paging .dt-paging-button.current,
html body .dt-container .dt-paging .dt-paging-button.current:hover,
html body .dt-container .dt-paging .dt-paging-button[aria-current="page"],
html body .dt-container .dt-paging .dt-paging-button[aria-current="page"]:hover,
html body .dt-container .dt-paging .dt-paging-button.current *,
html body .dt-container .dt-paging .dt-paging-button[aria-current="page"] * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (max-width: 640px) {
    .existing-identity-proof { grid-template-columns: 1fr; grid-column: 1 / -1; }
}

/* Cuando una identidad global existente se reutiliza explícitamente, los campos de nueva contraseña dejan de formar parte de la operación. */
[data-client-identity-section="true"].using-existing-identity [data-new-identity-credential] {
    display: none;
}


/* ALPHA-1 Communication brand studio: safe preset-driven visual composition. */
.communication-brand-studio{display:grid;gap:.9rem;padding:1rem;border:1px solid var(--line);border-radius:16px;background:var(--surface-soft)}
.communication-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.communication-brand-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.communication-brand-actions{display:flex;flex-wrap:wrap;gap:.55rem}.communication-body img{display:block;max-width:100%;height:auto}.communication-body figure{margin:1.2rem 0}.communication-body [data-krosfy-communication-shell]{box-sizing:border-box}.communication-body [data-krosfy-communication-content]{box-sizing:border-box}
@media(max-width:900px){.communication-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.communication-brand-grid,.communication-brand-options{grid-template-columns:1fr}}

.rich-toolbar-format-group{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto}.form-field .rich-toolbar-format-group select.rich-toolbar-select{width:auto;min-width:10rem;max-width:13rem;min-height:36px;height:36px;padding:.35rem 2rem .35rem .6rem;border:1px solid var(--line);border-radius:9px;background-color:var(--surface);color:var(--text);font-size:.78rem}.form-field .rich-toolbar-format-group select.rich-toolbar-size{min-width:9.5rem;max-width:11rem}.rich-image-link-icon{position:relative;display:inline-grid;place-items:center;width:1.15rem;height:1rem}.rich-image-link-icon .fa-link{position:absolute;right:-.4rem;bottom:-.28rem;padding:.08rem;border-radius:50%;background:var(--surface-soft);font-size:.55rem}.rich-text-toolbar button:hover .rich-image-link-icon .fa-link,.rich-text-toolbar button:focus-visible .rich-image-link-icon .fa-link{background:var(--surface)}
@media(max-width:620px){.rich-toolbar-format-group{order:-1;flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-field .rich-toolbar-format-group select.rich-toolbar-select,.form-field .rich-toolbar-format-group select.rich-toolbar-size{width:100%;min-width:0;max-width:none}}

/* ALPHA-2 — SuperAdmin tenant module/entitlement console. */
.platform-modules-page { max-width: 1320px; }
.platform-module-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.platform-module-summary > div {
    display: grid;
    gap: .2rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
}
.platform-module-summary span,
.platform-module-summary small { color: var(--muted); }
.tenant-modules-policy-note { margin-bottom: 1.25rem; }
.tenant-module-grid { display: grid; gap: 1rem; }
.tenant-module-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    overflow: hidden;
}

.existing-identity-match:not([hidden]) {
    box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
    outline: 2px solid color-mix(in srgb, var(--primary, #2563eb) 22%, transparent);
    outline-offset: 2px;
}
.tenant-module-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    cursor: pointer;
    list-style: none;
}
.tenant-module-card-header::-webkit-details-marker { display: none; }
.tenant-module-card[open] .tenant-module-card-header { border-bottom: 1px solid var(--border); }
.tenant-module-summary-actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.tenant-module-chevron { color: var(--muted); transition: transform .2s ease; }
.tenant-module-card[open] .tenant-module-chevron { transform: rotate(180deg); }
.tenant-module-card-body { background: var(--surface-soft); }
.tenant-module-card-header h3 { margin: .15rem 0 .3rem; }
.tenant-module-card-header p { margin: 0; color: var(--muted); max-width: 80ch; }
.tenant-module-mandatory {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.2rem;
    color: var(--muted);
}
.tenant-feature-list { display: grid; }
.tenant-feature-row {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(480px, 1.4fr);
    gap: 1rem;
    align-items: end;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
}
.tenant-feature-row:last-child { border-bottom: 0; }
.tenant-feature-copy { display: grid; gap: .35rem; }
.tenant-feature-copy small { color: var(--muted); }
.tenant-feature-title-line { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.tenant-feature-reason { overflow-wrap: anywhere; }
.tenant-feature-controls {
    display: grid;
    grid-template-columns: minmax(160px, .45fr) minmax(240px, 1fr) auto;
    gap: .7rem;
    align-items: end;
}
.tenant-feature-row[data-module-change-row] .tenant-feature-controls {
    grid-template-columns: minmax(180px, .55fr) minmax(260px, 1fr);
}
.tenant-feature-row.is-pending {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-soft));
    box-shadow: inset 3px 0 0 var(--primary);
}
.tenant-feature-reason-field[hidden] { display: none; }
.tenant-module-save-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
    backdrop-filter: blur(10px);
}
.tenant-module-save-bar span { color: var(--muted); font-weight: 700; }
.form-field.compact { gap: .3rem; }
.form-field.compact label { font-size: .78rem; }
.platform-identity-roles { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 120px; }
.platform-subscriptions-table { min-width: 1080px; }
.platform-subscriptions-table th { white-space: nowrap; min-width: 92px; }
.platform-subscriptions-table th:first-child { min-width: 160px; }
.platform-subscriptions-table th:nth-child(2) { min-width: 145px; }
.platform-subscriptions-table th:last-child { min-width: 120px; }
.platform-subscriptions-table td { vertical-align: middle; }
@media (max-width: 1050px) {
    .tenant-feature-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .platform-module-summary { grid-template-columns: 1fr; }
    .tenant-module-card-header { flex-direction: column; }
    .tenant-feature-controls { grid-template-columns: 1fr; }
    .tenant-feature-controls .button { width: 100%; justify-content: center; }
    .tenant-module-save-bar { align-items: stretch; flex-direction: column; }
    .tenant-module-save-bar .button { width: 100%; justify-content: center; }
}

/* BLOCK D — CLIENT billing information architecture ---------------------------------
   Billing overview is a navigation/summary surface. Subscriptions, invoices, payments
   y los métodos de pago del proveedor son flujos independientes y deben permanecer visualmente diferenciados. */
.billing-area-card {
    margin-top: 1rem;
}

.billing-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.billing-hub-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    min-height: 104px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, var(--blue) 8%);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.billing-hub-card:hover,
.billing-hub-card:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--border-color));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 9%, transparent);
    transform: translateY(-1px);
}

.billing-hub-icon,
.billing-concept-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .9rem;
    background: color-mix(in srgb, var(--blue) 10%, var(--surface));
    color: var(--blue);
    flex: 0 0 auto;
}

.billing-hub-copy {
    display: grid;
    gap: .28rem;
    min-width: 0;
}

.billing-hub-copy strong {
    font-size: 1rem;
}

.billing-hub-copy small {
    color: var(--muted);
    line-height: 1.45;
}

.billing-hub-arrow {
    color: var(--muted);
}

.billing-concept-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.billing-concept-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.billing-concept-card h2,
.billing-concept-card h3,
.billing-concept-card p {
    margin-top: 0;
}

.billing-concept-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.billing-domain-note,
.payment-reconciliation-warning {
    margin-bottom: 1rem;
}

.payment-ledger-explainer {
    margin-top: 0;
    margin-bottom: 1rem;
}

.payment-reconciliation-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.payment-reconciliation-warning-copy {
    display: inline-flex;
    align-items: flex-start;
    gap: .75rem;
    font-weight: 600;
}

.payment-sync-dialog {
    max-width: 32rem;
}

.payment-sync-dialog-card {
    max-width: 32rem;
}

.payment-sync-dialog-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem;
}

.payment-sync-dialog-body > i {
    font-size: 1.5rem;
    color: var(--blue);
}

.payment-sync-dialog-body h2,
.payment-sync-dialog-body p {
    margin: 0;
}

.payment-sync-dialog-body p {
    margin-top: .35rem;
    color: var(--muted);
}

@media (max-width: 840px) {
    .billing-hub-grid,
    .billing-concept-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .billing-hub-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .billing-hub-arrow {
        display: none;
    }

    .billing-concept-card {
        flex-direction: column;
    }

    .payment-reconciliation-warning {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Enlaces del pie y ajustes de la barra superior para la navegación multi-contexto. */
.portal-footer-link,
.public-footer-link {
    color: inherit;
    text-decoration: none;
}

.portal-footer-link:hover,
.portal-footer-link:focus-visible,
.public-footer-link:hover,
.public-footer-link:focus-visible {
    color: var(--blue-dark);
    text-decoration: underline;
}

.topbar-notification-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 0.35rem;
}

.notification-bell {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    background: var(--surface, #fff);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.notification-bell:hover,
.notification-bell:focus-visible {
    border-color: rgba(37, 99, 235, .32);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .12);
    transform: translateY(-1px);
}

.topbar-role-control {
    margin-left: 0.3125rem;
}

.topbar-profile-control .role-badge.role-badge-elevated {
    min-height: 2.65rem;
    padding: 0.42rem 0.82rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    color: var(--text);
    justify-content: flex-start;
}

.topbar-profile-control .role-badge.role-badge-elevated .topbar-context-icon {
    color: var(--blue);
}

.topbar-context-select-shell,
.topbar-profile-control .role-badge.role-badge-elevated {
    overflow: hidden;
}

.topbar-context-select-shell select {
    border-radius: 0.75rem !important;
}

.settings-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.settings-section-link.is-active {
    border-color: rgba(37, 99, 235, .32);
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.settings-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.settings-hub-card {
    display: grid;
    gap: 0.55rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.settings-hub-card:hover,
.settings-hub-card:focus-visible {
    border-color: rgba(37, 99, 235, .35);
    transform: translateY(-1px);
}

.settings-hub-card i {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.8rem;
    color: var(--blue-dark);
    background: var(--blue-soft);
}

.settings-hub-card strong {
    font-size: 1rem;
}

.settings-hub-card span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.settings-inline-card-header {
    padding-inline: 0;
}

.tenant-public-registration-link.is-highlighted {
    margin-bottom: 1rem;
    border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--blue) 10%, var(--surface-elevated-solid)),
        color-mix(in srgb, var(--blue) 14%, var(--surface-soft))
    );
    box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 10%, transparent);
}

.tenant-public-registration-link.is-highlighted strong {
    color: var(--text);
}

.tenant-public-registration-link.is-highlighted a {
    color: var(--blue);
    word-break: break-all;
}

.tenant-public-registration-link.is-highlighted a:visited {
    color: var(--blue);
}

.tenant-public-registration-link.is-highlighted a:hover {
    color: var(--blue-dark);
}

.tenant-registration-header p { max-width: none; }
.tenant-public-registration-link-content { min-width: 0; }
.tenant-public-registration-link-row { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.tenant-public-registration-link-row a { min-width: 0; }
.tenant-public-registration-copy { flex: 0 0 2.5rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; }
.tenant-registration-mode-explanations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.tenant-registration-mode-explanations > div { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.tenant-registration-mode-explanations strong { color: var(--text); }
.tenant-registration-mode-explanations p { margin: .3rem 0 0; font-size: .88rem; line-height: 1.45; }
@media (max-width: 760px) {
    .tenant-registration-mode-explanations { grid-template-columns: 1fr; }
    .tenant-public-registration-link-row { align-items: flex-start; }
}

@media (max-width: 760px) {
    .settings-section-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .topbar-notification-group {
        margin-right: 0;
    }
}

/* Combobox personalizado de workspace: los popups nativos de opciones del navegador no pueden estilizarse de forma consistente. */
.topbar-context-combobox {
    position: relative;
    min-width: 0;
}

.topbar-context-combobox-trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.65rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    font: inherit;
    font-weight: 800;
    text-align: left;
}

.topbar-context-combobox-trigger:hover,
.topbar-context-combobox-trigger:focus-visible,
.topbar-context-combobox.is-open .topbar-context-combobox-trigger {
    border-color: rgba(37, 99, 235, .34);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .11);
}

.topbar-context-combobox-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-context-combobox-chevron {
    color: var(--muted);
    font-size: 0.72rem;
    transition: transform .15s ease;
}

.topbar-context-combobox.is-open .topbar-context-combobox-chevron {
    transform: rotate(180deg);
}

.topbar-context-combobox-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.35rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.topbar-context-combobox-menu[hidden] {
    display: none;
}

.topbar-context-combobox-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.58rem 0.7rem;
    border: 0;
    border-radius: 0.72rem;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-align: left;
}

.topbar-context-combobox-option:hover,
.topbar-context-combobox-option:focus-visible {
    background: var(--surface-soft);
    color: var(--blue-dark);
}

.topbar-context-combobox-option.is-selected {
    color: var(--blue-dark);
    background: var(--blue-soft);
}

.settings-registration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Los controles de notificación de la barra superior usan el mismo ritmo vertical etiquetado que los controles de workspace y rol. */
.topbar-notification-control{display:grid;gap:.28rem;align-items:end}.topbar-notification-control .topbar-notification-group{margin-right:.35rem;min-height:2.65rem}
@media(max-width:760px){.topbar-notification-control .topbar-notification-group{margin-right:0}}

/* Configuración de branding del Tenant: cada superficie conserva sus controles y preview en una categoría propia. */
.branding-settings-accordion{display:grid;gap:1rem}.branding-settings-section{overflow:hidden;border:1px solid var(--border-color);border-radius:18px;background:var(--surface)}.branding-settings-section>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85rem;padding:1rem 1.1rem;cursor:pointer;list-style:none;transition:background-color .18s ease}.branding-settings-section>summary::-webkit-details-marker{display:none}.branding-settings-section>summary:hover{background:var(--surface-soft)}.branding-settings-section>summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-size:.82rem;font-weight:900;color:var(--text-muted);transition:transform .18s ease}.branding-settings-section[open]>summary::after{transform:rotate(180deg)}.branding-settings-section>summary>span:nth-child(2){display:grid;gap:.2rem}.branding-settings-section>summary strong{font-size:1rem}.branding-settings-section>summary small{color:var(--text-muted);font-size:.84rem;font-weight:500}.branding-settings-section-icon{display:grid;width:2.4rem;height:2.4rem;place-items:center;border-radius:11px;color:var(--tenant-brand-primary,var(--blue));background:var(--blue-soft)}.branding-settings-section-body{display:grid;gap:1rem;padding:1.1rem;border-top:1px solid var(--border-color);background:var(--surface-soft)}
.branding-identity-grid,.branding-login-color-grid,.branding-core-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-branding-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-branding-asset{display:grid;align-content:start;gap:.75rem;padding:1rem;border:1px solid var(--border-color);border-radius:16px;background:var(--surface)}.settings-branding-asset p{margin:.25rem 0 0;color:var(--text-muted);font-size:.86rem}.settings-branding-preview{display:block;max-width:100%;object-fit:contain;background:#fff;border:1px solid var(--border-color);border-radius:12px}.settings-branding-preview.logo{width:180px;height:90px;padding:.5rem}.settings-branding-preview.favicon{width:64px;height:64px;padding:.35rem}.branding-login-assets{grid-template-columns:minmax(0,1fr)}
@media(max-width:1100px){.branding-identity-grid,.branding-login-color-grid,.branding-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.branding-identity-grid,.branding-login-color-grid,.branding-core-grid,.settings-branding-assets{grid-template-columns:minmax(0,1fr)}.branding-settings-section>summary{padding:.9rem}.branding-settings-section-body{padding:.9rem}}

/* Platform commercial-plan editor. */
.commercial-plan-feature-fieldset{margin:1.25rem 0 0;padding:1rem;border:1px solid var(--border-color);border-radius:16px}.commercial-plan-feature-fieldset legend{padding:0 .4rem;font-weight:800}.commercial-plan-feature-fieldset>p{margin:.15rem 0 1rem;color:var(--text-muted)}.commercial-plan-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.platform-inline-note{display:block;margin-top:.25rem;color:var(--text-muted)}@media(max-width:980px){.commercial-plan-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.commercial-plan-feature-grid{grid-template-columns:1fr}}


.public-registration-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.public-registration-bot-protection {
    margin-top: 1rem;
}
.public-registration-challenge {
    min-height: 65px;
}

/* Composer de Communications V2: mantener escritura y preview como superficie principal y colapsar la configuración secundaria. */
.communication-editor-dialog .portal-modal-card {
    width: min(1280px, calc(100vw - 2rem));
}

.communication-editor-dialog .portal-modal-scroll {
    padding: .9rem 1.1rem 1.1rem;
}

.communication-editor-dialog [data-communication-form] {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
}

.communication-composer-core {
    display: grid;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.communication-composer-core-heading,
.communication-config-drawer-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.communication-composer-core-heading h3,
.communication-composer-core-heading p,
.communication-config-drawer-heading h3 {
    margin: .1rem 0 0;
}

.communication-composer-core-heading p {
    color: var(--muted);
    font-size: .82rem;
}

.communication-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    gap: .65rem;
    align-items: start;
}

.communication-identity-grid .form-field {
    gap: .32rem;
    margin: 0;
}

.communication-studio-workspace {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
    gap: .75rem;
}

.communication-studio-editor > label {
    margin-bottom: .35rem;
}

.communication-studio-editor .rich-text-surface,
.communication-studio-editor .rich-source-surface {
    min-height: 360px;
    max-height: 580px;
}

.communication-studio-preview {
    top: .25rem;
}

.communication-studio-preview .communication-preview {
    min-height: 360px;
    max-height: 580px;
}

.communication-config-drawer {
    display: grid;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.communication-config-drawer-heading {
    padding: .05rem .15rem .2rem;
}

.communication-config-accordion {
    overflow: clip;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
}

.communication-config-accordion > summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .68rem .78rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.communication-config-accordion > summary::-webkit-details-marker {
    display: none;
}

.communication-config-accordion > summary:hover,
.communication-config-accordion > summary:focus-visible {
    background: color-mix(in srgb, var(--blue) 4%, var(--surface));
    outline: none;
}

.communication-config-accordion > summary > span:nth-child(2),
.communication-config-accordion > summary strong,
.communication-config-accordion > summary small {
    display: block;
    min-width: 0;
}

.communication-config-accordion > summary small {
    margin-top: .08rem;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.3;
}

.communication-config-summary-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.communication-config-chevron {
    color: var(--muted);
    transition: transform .16s ease;
}

.communication-config-accordion[open] .communication-config-chevron {
    transform: rotate(180deg);
}

.communication-config-accordion-body {
    padding: .75rem;
    border-top: 1px solid var(--line);
}

.communication-config-accordion .communication-template-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
}

.communication-config-accordion .communication-template-card {
    padding: .6rem;
}

.communication-config-accordion .communication-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.communication-config-accordion .communication-brand-grid .form-field,
.communication-audience-config > .form-field {
    gap: .3rem;
    margin: 0;
}

.communication-config-accordion .communication-brand-options {
    margin-top: .6rem;
    gap: .55rem;
}

.communication-config-accordion .communication-brand-actions {
    margin-top: .6rem;
}

.communication-audience-config {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: start;
}

.communication-audience-config > .span-full,
.communication-audience-config > fieldset,
.communication-audience-config > .communication-audience-preview,
.communication-audience-config > .contents-wrapper {
    grid-column: 1 / -1;
}

.communication-audience-config .communication-segment-builder {
    margin: 0;
    padding: .7rem;
}

.communication-audience-config .communication-segment-builder .form-grid {
    gap: .6rem;
}

.communication-audience-config .communication-audience-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin: 0;
}


.communication-client-picker {
    display: grid;
    gap: .45rem;
    max-height: 260px;
    padding: .65rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.communication-client-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    cursor: pointer;
}

.communication-client-option:hover {
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    background: color-mix(in srgb, var(--blue) 4%, var(--surface));
}

.communication-client-option input[type="checkbox"] {
    margin-top: .18rem;
}

.settings-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    cursor: pointer;
}

.settings-toggle input[type="checkbox"] {
    margin-top: .22rem;
}

.settings-toggle-copy {
    display: grid;
    gap: .16rem;
    min-width: 0;
}

.settings-toggle-copy strong {
    display: block;
    line-height: 1.35;
}

.settings-toggle-copy small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.communication-editor-dialog .form-actions {
    position: sticky;
    bottom: -1.1rem;
    z-index: 5;
    margin: .1rem -1.1rem -1.1rem;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px);
}

.rich-text-toolbar button.is-active {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--line));
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

@media (max-width: 1120px) {
    .communication-studio-workspace {
        grid-template-columns: 1fr;
    }

    .communication-studio-preview {
        position: static;
    }

    .communication-config-accordion .communication-template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .communication-editor-dialog .portal-modal-scroll {
        padding: .75rem;
    }

    .communication-composer-core,
    .communication-config-drawer {
        padding: .65rem;
        border-radius: 13px;
    }

    .communication-identity-grid,
    .communication-audience-config,
    .communication-config-accordion .communication-brand-grid,
    .communication-config-accordion .communication-brand-options {
        grid-template-columns: 1fr;
    }

    .communication-config-accordion .communication-template-grid {
        grid-template-columns: 1fr;
    }

    .communication-editor-dialog .form-actions {
        bottom: -.75rem;
        margin: .1rem -.75rem -.75rem;
        padding: .75rem;
    }
}


/* UX: la actividad del selector de workspace debe explicar el origen del contador; un icono aislado se confundía con una notificación. */
.context-picker-activity-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.context-picker-activity-item > span {
    font-size: .75rem;
    font-weight: 600;
}

/* Las tablas comparten reglas de legibilidad: encabezados, fechas, importes y acciones no se parten a mitad de palabra. */
.portal-table th {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.portal-table td {
    overflow-wrap: break-word;
    word-break: normal;
}

.portal-table time,
.portal-table .badge,
.portal-table .table-actions,
.portal-table td.dt-type-date,
.portal-table td.dt-type-numeric {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.portal-table .table-actions {
    flex-wrap: nowrap;
    min-width: max-content;
}

.table-actions .icon-button,
.table-actions .button.small {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
}

/* Las acciones textuales de suscripciones necesitan conservar la etiqueta completa. */
#client-subscriptions-table {
    min-width: 980px;
}

#client-subscriptions-table th:last-child,
#client-subscriptions-table td:last-child {
    min-width: 175px;
}

#client-subscriptions-table .subscription-action-button {
    width: auto;
    min-width: max-content;
    padding: 0 0.8rem;
    white-space: nowrap;
}

/* La misma operación de Stripe conserva icono, tamaño y estados en todos los catálogos. */
.catalog-sync-button.stripe-sync-ok {
    color: #15803d;
    border-color: #86efac;
    background: #f0fdf4;
}

.catalog-sync-button.stripe-sync-pending {
    color: #a16207;
    border-color: #fde68a;
    background: #fffbeb;
}

.catalog-sync-button[aria-busy="true"] i {
    animation: fa-spin 1s linear infinite;
}

.stripe-sync-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    margin: .75rem 0 1rem;
    padding: .7rem .85rem;
    color: var(--muted);
    font-size: .82rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.stripe-sync-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.stripe-sync-legend-swatch {
    width: .8rem;
    height: .8rem;
    border: 1px solid currentColor;
    border-radius: 4px;
}

.stripe-sync-legend-swatch.stripe-sync-ok { color: #15803d; background: #dcfce7; }
.stripe-sync-legend-swatch.stripe-sync-pending { color: #a16207; background: #fef3c7; }

.dt-container .datatable-integrated-start {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
}

/* Los campos directos de cualquier modal conservan aire respecto al borde de la tarjeta. */
.portal-modal .portal-modal-card > .form-grid,
.portal-modal .portal-modal-card > .form-field,
.portal-modal .portal-modal-card > .management-form,
.portal-modal .portal-modal-card > .muted-text,
.portal-modal .portal-modal-card > .alert:not(.portal-modal-header) {
    margin-right: 1rem;
    margin-left: 1rem;
}

.branding-core-grid {
    margin-top: 1rem;
}

.settings-section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.settings-section-title-row h3,
.settings-section-title-row p {
    margin: 0;
}

.settings-section-title-row p {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .86rem;
}

@media (max-width: 560px) {
    .settings-section-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-section-title-row .button {
        width: 100%;
    }
}

/* Separa la asignación del ticket del formulario de actualización de estado. */
.ticket-ownership-form {
    margin-top: 10px;
}

/* Botón con texto para acciones dentro de tablas. Esta clase separa las acciones
   textuales de los botones solo-icono, que deliberadamente conservan un ancho fijo. */
.portal-table .table-actions .button.table-text-action {
    width: auto;
    min-width: max-content;
    height: 38px;
    min-height: 38px;
    padding-inline: .75rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.platform-identities-table th:last-child,
.platform-identities-table td:last-child {
    width: 1%;
    min-width: 190px;
    white-space: nowrap;
}

/* Importar y exportar son acciones primarias de transferencia y deben reconocerse sin depender del texto. */
.button.data-export-action,
.button.data-import-action {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 9px 20px rgb(15 76 221 / 18%);
}

.button.data-export-action {
    background: linear-gradient(135deg, #0f4cdd, #2563eb);
}

.button.data-import-action {
    background: linear-gradient(135deg, #0f766e, #0d9488);
    box-shadow: 0 9px 20px rgb(13 148 136 / 18%);
}

.button.data-export-action:hover,
.button.data-export-action:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #123fb8, #1d4ed8);
}

.button.data-import-action:hover,
.button.data-import-action:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #115e59, #0f766e);
}

/* Los checkbox nativos de formularios se mantienen proporcionados; los switches conservan su componente propio. */
.checkbox-row > input[type="checkbox"],
.checkbox-field > input[type="checkbox"],
.settings-toggle > input[type="checkbox"],
.tenant-cleanup-option > input[type="checkbox"],
.portal-table input[type="checkbox"],
.portal-modal input[type="checkbox"] {
    width: 1.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    min-height: 1.1rem;
    margin: 0;
    padding: 0;
    flex: 0 0 1.1rem;
    accent-color: var(--blue);
}

.portal-modal [data-payment-method-close].button,
.portal-modal [data-calendar-event-close].button,
.portal-modal [data-refund-request-close].button,
.portal-modal [data-manual-payment-review-close].button,
.portal-modal [data-refund-admin-close].button,
.portal-modal [data-manual-payment-close].button,
.stripe-checkout-actions [data-checkout-cancel].button,
.portal-modal-actions [data-plan-change-close].button {
    color: #fff;
    border-color: #b91c1c;
    background: #b91c1c;
}

.platform-audit-table {
    min-width: 1080px;
}

.platform-audit-detail-row[hidden] {
    display: none;
}

.platform-audit-detail-row > td {
    padding: 0;
    background: var(--surface-soft);
}

.audit-technical-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.1rem;
}

.audit-technical-details > div {
    min-width: 0;
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.audit-technical-details dt {
    margin-bottom: .3rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.audit-technical-details dd {
    margin: 0;
}

.audit-technical-details code {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.import-preview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin: 1.2rem 0;
}

.import-preview-metric {
    min-height: 112px;
    margin: 0;
    padding: 1rem;
}

.import-preview-metric.is-create .metric-icon { color: #15803d; background: #dcfce7; }
.import-preview-metric.is-update .metric-icon { color: #1d4ed8; background: #dbeafe; }
.import-preview-metric.is-skip .metric-icon { color: #6d28d9; background: #ede9fe; }
.import-preview-metric.is-error .metric-icon { color: #b91c1c; background: #fee2e2; }

.invoice-select-column {
    width: 44px;
    min-width: 44px;
    text-align: center !important;
}

.invoice-export-form {
    display: flex;
    align-items: flex-end;
}

.branding-color-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: .55rem;
    align-items: stretch;
}

.branding-color-field input[type="color"] {
    width: 52px;
    height: 100%;
    min-height: 48px;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}

.branding-color-field input[type="color"]::-webkit-color-swatch,
.branding-color-field input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 8px;
}

@media (max-width: 900px) {
    .audit-technical-details,
    .import-preview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .audit-technical-details,
    .import-preview-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Modal review: action bars follow the modal surface in every theme instead of
   introducing a detached white strip at the bottom of the dialog. */
.portal-modal .portal-modal-actions,
.portal-modal .form-actions.portal-modal-actions,
.portal-modal .portal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.4rem 1.25rem;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

/* Native file inputs receive the same control and button treatment as the rest
   of the portal while preserving keyboard and browser accessibility. */
.portal-modal input[type="file"]:not([hidden]) {
    min-height: 48px;
    padding: .32rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background: var(--control-bg);
    cursor: pointer;
}

.portal-modal input[type="file"]:not([hidden])::file-selector-button {
    min-height: 38px;
    margin-right: .75rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #0d9488);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.portal-modal input[type="file"]:not([hidden])::file-selector-button:hover {
    background: linear-gradient(135deg, #115e59, #0f766e);
}

.client-import-grid {
    align-items: start;
}

.client-import-template-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.client-import-template-card p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}

.client-import-template-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #0f766e;
    background: color-mix(in srgb, #0d9488 15%, var(--surface));
    font-size: 1.25rem;
}

.client-import-template-card .button {
    white-space: nowrap;
}

.document-empty-state {
    display: grid;
    justify-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--line);
    background: var(--surface-soft);
    text-align: center;
}

.document-empty-state > i {
    color: var(--blue);
    font-size: 2rem;
}

.document-empty-state > strong,
.document-empty-state > p {
    margin: 0;
}

.document-empty-state > p {
    color: var(--muted);
}

/* SuperAdmin/adopción: comparación compacta entre módulos sin perder el contexto numérico. */
.workspace-adoption-summary .workspace-adoption-leader {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.15rem;
}

.workspace-adoption-header {
    align-items: flex-start;
    gap: 1rem;
}

.workspace-adoption-legend {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.workspace-adoption-legend span {
    padding: .35rem .58rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.workspace-adoption-legend .is-low { background: var(--surface-soft); color: var(--muted); }
.workspace-adoption-legend .is-medium { background: #fff3cd; color: #8a5300; }
.workspace-adoption-legend .is-high { background: #dcfce7; color: #166534; }

.workspace-adoption-method {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 1rem;
}

.workspace-adoption-method div,
.workspace-adoption-method strong,
.workspace-adoption-method span {
    display: block;
}

.workspace-adoption-method span {
    margin-top: .2rem;
}

.workspace-adoption-table {
    width: 100%;
    min-width: 1320px !important;
    table-layout: fixed;
}

.workspace-adoption-table th,
.workspace-adoption-table td {
    padding: .68rem .55rem;
}

.workspace-adoption-table th:nth-child(1) { width: 42px; }
.workspace-adoption-table th:nth-child(2) { width: 220px; }
.workspace-adoption-table th:nth-child(3) { width: 112px; }
.workspace-adoption-table th:nth-child(n+4):nth-child(-n+10) { width: 105px; }
.workspace-adoption-table th:nth-child(11) { width: 140px; }

.workspace-adoption-rank {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.workspace-adoption-tenant {
    min-width: 0;
}

.workspace-adoption-tenant strong,
.workspace-adoption-tenant span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-adoption-tenant span {
    margin-top: .18rem;
    color: var(--muted);
    font-size: .76rem;
}

.workspace-adoption-overall {
    display: flex;
    align-items: baseline;
    gap: .45rem;
}

.workspace-adoption-overall strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.workspace-adoption-overall span {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.2;
}

.workspace-module-score-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
}

.workspace-module-score-line strong { font-size: .9rem; }
.workspace-module-score-line span { color: var(--muted); font-size: .68rem; }

.workspace-module-score-track {
    height: 5px;
    margin-top: .35rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-soft);
}

.workspace-module-score-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--muted);
}

.workspace-module-score.is-medium .workspace-module-score-track span { background: #d18a00; }
.workspace-module-score.is-high .workspace-module-score-track span { background: #16a34a; }
.workspace-adoption-overall.is-medium strong { color: #a16207; }
.workspace-adoption-overall.is-high strong { color: #15803d; }

.workspace-adoption-footnote {
    margin: .85rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}

html[data-theme="dark"] .workspace-adoption-legend .is-medium { background: rgba(217, 119, 6, .2); color: #fbbf24; }
html[data-theme="dark"] .workspace-adoption-legend .is-high { background: rgba(22, 163, 74, .2); color: #86efac; }

@media (max-width: 720px) {
    .workspace-adoption-header { display: block; }
    .workspace-adoption-legend { margin-top: .75rem; }
}

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

.document-workspace {
    position: relative;
    min-height: 560px;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.document-explorer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.document-breadcrumbs,
.document-sort-controls {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .45rem;
}

.document-breadcrumbs form {
    min-width: 0;
}

.document-breadcrumbs button {
    display: block;
    max-width: 220px;
    padding: .4rem .55rem;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.document-breadcrumbs button:hover,
.document-breadcrumbs button:focus-visible {
    color: var(--blue);
    background: var(--blue-soft);
    outline: 0;
}

.document-breadcrumbs > i,
.document-breadcrumb-ellipsis {
    flex: 0 0 auto;
    color: var(--muted);
}

.document-sort-controls label {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    white-space: nowrap;
}

.document-sort-controls select {
    min-width: 150px;
}

.document-workspace.is-dragging {
    border-color: var(--blue);
    background: var(--blue-soft);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 24%, transparent);
}

.document-drop-overlay {
    position: absolute;
    z-index: 8;
    inset: .75rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .75rem;
    border: 2px dashed var(--blue);
    border-radius: 14px;
    color: var(--blue);
    background: color-mix(in srgb, var(--surface) 88%, var(--blue) 12%);
    pointer-events: none;
}

.document-drop-overlay[hidden] {
    display: none;
}

.document-drop-overlay i {
    font-size: 2.4rem;
}

.document-context-menu {
    position: absolute;
    z-index: 12;
    min-width: 190px;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-elevated-solid, var(--surface));
    box-shadow: 0 16px 36px rgb(15 23 42 / 22%);
}

.document-context-menu[hidden] {
    display: none;
}

.document-context-backdrop[hidden],
.document-item-options,
.document-context-name {
    display: none;
}

.document-context-menu button {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .7rem .8rem;
    border: 0;
    border-radius: 9px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.document-context-menu button[hidden] {
    display: none;
}

.document-context-menu button:hover,
.document-context-menu button:focus-visible {
    color: #fff;
    background: var(--blue);
    outline: 0;
}

.document-context-menu button.danger {
    color: var(--red, #b91c1c);
}

.document-context-menu button.danger:hover,
.document-context-menu button.danger:focus-visible {
    color: #fff;
    background: var(--red, #b91c1c);
}

.document-header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.document-item.is-trashed {
    cursor: context-menu;
    opacity: .82;
}

.document-item-form {
    min-width: 0;
    margin: 0;
}

.document-item-form .document-item {
    width: 100%;
    height: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.document-items {
    max-height: 490px;
    padding-right: .25rem;
    overflow: auto;
    align-content: start;
    scrollbar-gutter: stable;
}

.document-folder-dialog-field {
    margin: 1.25rem 1.4rem;
}

.document-upload-panel {
    position: sticky;
    top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.document-upload-panel form,
.document-upload-heading {
    display: grid;
    gap: .85rem;
}

.document-upload-heading {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
}

.document-upload-heading > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--blue);
    background: var(--blue-soft);
}

.document-upload-heading > div {
    display: grid;
    gap: .25rem;
}

.document-upload-heading span,
.document-upload-queue > span {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
}

.document-upload-panel input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.document-file-picker,
.document-upload-panel .button.import {
    justify-content: center;
    width: 100%;
}

.document-upload-queue {
    display: grid;
    gap: .45rem;
    max-height: 220px;
    padding: .75rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.document-upload-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: .78rem;
}

.document-upload-file > span {
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-upload-file small {
    color: var(--muted);
    white-space: nowrap;
}
.document-upload-remove { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 7px; color: var(--red, #b91c1c); background: transparent; cursor: pointer; }
.document-upload-remove:hover,.document-upload-remove:focus-visible { color: #fff; background: var(--red, #b91c1c); outline: 0; }

.document-operation-message {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 750;
}

.document-operation-message.is-success {
    color: #166534;
    border-color: #86efac;
    background: var(--green-soft);
}

.document-operation-message.is-error {
    color: #991b1b;
    border-color: #fca5a5;
    background: var(--red-soft);
}

.document-empty-state small {
    color: var(--muted);
    font-weight: 650;
}

@media (max-width: 900px) {
    .document-drive-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-upload-panel {
        position: static;
        grid-row: 1;
    }

    .document-workspace {
        min-height: 480px;
    }

    .document-explorer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .document-sort-controls {
        flex-wrap: wrap;
    }
}

/* Document drive */
.document-client-selector,.document-drive-toolbar,.document-folder-form,.document-view-switch{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.document-client-selector{margin:1rem 0 1.25rem}.document-client-field{width:min(36rem,100%);gap:.6rem}.document-client-field .remote-lookup{width:100%}.document-client-selector select{min-width:min(32rem,100%)}.document-drive-toolbar{justify-content:space-between;margin:1rem 0}.document-storage-usage{display:grid;gap:.35rem;min-width:min(24rem,100%)}.document-drive-toolbar-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}.document-drive-toolbar progress{width:100%;accent-color:var(--blue)}.document-dropzone{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1rem;border:2px dashed var(--line);border-radius:1rem;background:var(--surface-soft)}.document-dropzone.is-dragging{border-color:var(--blue);background:var(--blue-soft)}.document-dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.document-dropzone label{display:flex;align-items:center;gap:.75rem;cursor:pointer}.document-dropzone label>span{color:var(--muted)}.document-items{margin-top:1rem}.document-items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}.document-item{display:grid;gap:.45rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;color:var(--text);background:var(--surface);text-decoration:none;min-width:0}.document-item>i{font-size:1.75rem;color:var(--blue)}.document-item.folder>i{color:#eab308}.document-item strong,.document-item small{overflow-wrap:anywhere}.document-item small{color:var(--muted)}.document-item span{color:var(--blue);font-weight:700}.document-items-table{display:grid}.document-items-table .document-item{grid-template-columns:2.5rem minmax(0,1fr) auto auto;align-items:center;border-width:0 0 1px;border-radius:0}.document-view-switch .is-active{color:#fff;background:var(--blue)}@media(max-width:700px){.client-import-template-card{grid-template-columns:auto minmax(0,1fr)}.client-import-template-card .button{grid-column:1/-1;width:100%}.document-dropzone{grid-template-columns:1fr}.document-dropzone label{align-items:flex-start}.document-dropzone label>span{display:none}.document-items-table .document-item{grid-template-columns:2.5rem minmax(0,1fr)}.document-items-table .document-item small,.document-items-table .document-item span{grid-column:2}}

/* Document explorer alignment and Drive-style interactions. */
.document-client-row {
    display: flex;
    align-items: end;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}
.document-client-row .document-client-selector { flex: 1 1 36rem; margin: 0; }
.document-client-row .document-client-field { width: 100%; }
.document-trash-form { flex: 0 0 auto; }
.document-drive-layout { grid-template-columns: minmax(0, 1fr); }
.document-upload-panel-top { position: static; margin: 1rem 0; }
.document-upload-panel-top form {
    grid-template-columns: minmax(230px, 1.3fr) minmax(170px, .65fr) minmax(220px, 1fr) auto;
    align-items: center;
}
.document-upload-panel-top .document-file-picker,
.document-upload-panel-top .button.import { width: auto; min-height: 44px; }
.document-upload-panel-top .document-upload-queue { max-height: 92px; min-height: 44px; }

.document-upload-progress {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1900;
    width: min(360px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--portal-border, #dbe3ef);
    border-radius: 16px;
    background: var(--portal-surface, #fff);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .2);
}

.document-upload-progress[hidden] { display: none; }
.document-upload-progress-copy { display: flex; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.document-upload-progress-copy > i { color: var(--portal-primary, #2563eb); font-size: 1.25rem; }
.document-upload-progress-copy div { display: grid; gap: .15rem; min-width: 0; }
.document-upload-progress-copy span { color: var(--portal-text-muted, #64748b); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-upload-progress progress { display: block; width: 100%; height: .55rem; accent-color: var(--portal-primary, #2563eb); }
.document-upload-progress[data-state="complete"] .document-upload-progress-copy > i { color: #15803d; }
.document-upload-progress[data-state="error"] .document-upload-progress-copy > i { color: #b91c1c; }

.phone-composite-input {
    display: grid;
    grid-template-columns: minmax(88px, .32fr) minmax(0, 1fr);
    gap: .55rem;
}

.phone-composite-input select,
.phone-composite-input input { min-width: 0; width: 100%; }

@media (max-width: 1023px) {
    .document-upload-progress {
        right: max(1rem, env(safe-area-inset-right));
        bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}
.document-sort-controls .document-view-switch { flex-wrap: nowrap; margin-left: .2rem; }
.document-item { user-select: none; }
.document-item.is-selected { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent); }
.document-workspace.is-marquee-selecting { cursor: crosshair; }
.document-selection-box {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    border: 1px solid var(--blue);
    border-radius: 3px;
    background: color-mix(in srgb, var(--blue) 16%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
}

/* Document requests */
.document-requests-card { display: grid; gap: 1.25rem; }
.document-requests-header { align-items: start; margin-bottom: 0; }
.document-requests-header .button { flex: 0 0 auto; white-space: nowrap; }
.document-request-modal-body { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(11rem, .45fr); gap: 1rem; padding: 1.25rem 1.4rem; }
.document-request-client-field { min-width: 0; }
.document-request-client-field .remote-lookup { width: 100%; }
.document-request-instructions-field { grid-column: 1 / -1; }
.document-request-empty { min-height: 210px; }
.document-request-list { display: grid; gap: 1rem; }
.document-request-item { display: grid; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.document-request-item.is-pending { border-left: 4px solid #d97706; }
.document-request-item.is-submitted { border-left: 4px solid #16a34a; }
.document-request-item > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.document-request-item > header > div { display: grid; gap: .45rem; }
.document-request-item h3,.document-request-item p { margin: 0; }
.document-request-item header small,.document-request-due { color: var(--muted); }
.document-request-due { display: flex; align-items: center; gap: .45rem; font-size: .88rem; }
.document-request-instructions { white-space: pre-line; }
.document-request-submit-form { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(18rem, 1fr) auto; align-items: end; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.document-request-submit-form .button { min-height: 46px; white-space: nowrap; }
.document-request-file-field { position: relative; }
.document-request-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.document-request-file-picker { justify-content: center; width: 100%; }
.document-request-response-cell { min-width: 18rem; }
.document-request-submit-form { min-width: 17rem; }
.document-request-submit-form textarea { width: 100%; resize: vertical; }
.document-request-actions { flex-wrap: nowrap; }
.document-request-actions form { display: inline-flex; margin: 0; }
.document-request-review-note { color: var(--warning-text, #92400e); display: flex; gap: .4rem; align-items: flex-start; }
.document-requests-card .dataTables_wrapper { width: 100%; }
.document-rename-control { display: flex; align-items: stretch; width: 100%; }
.document-rename-control input { flex: 1 1 auto; min-width: 0; border-radius: 10px; }
.document-rename-control.has-extension input { border-radius: 10px 0 0 10px; }
.document-rename-control span { display: inline-flex; align-items: center; padding: 0 .85rem; border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-muted); color: var(--muted); font-weight: 700; }
.document-request-file-selection { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-height: 42px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft); }
.document-request-file-selection.has-file { color: var(--text); }
.document-request-file-selection > span { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.document-request-file-selection > button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 7px; color: var(--red, #b91c1c); background: transparent; cursor: pointer; }
.document-request-file-selection > button[hidden] { display: none; }
.document-request-file-selection > button:hover,.document-request-file-selection > button:focus-visible { color: #fff; background: var(--red, #b91c1c); outline: 0; }
.document-request-submission { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .9rem; border-radius: 12px; background: var(--surface-soft); }
.document-request-submission > div { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.document-request-submission > div > i { color: #16a34a; font-size: 1.5rem; }
.document-request-submission > div > div { display: grid; min-width: 0; }
.document-request-submission strong,.document-request-submission small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-request-submission small { color: var(--muted); }
.document-request-submission > p { grid-column: 1 / -1; padding-top: .75rem; border-top: 1px solid var(--line); white-space: pre-line; }
.document-requests-table { min-width: 1050px; table-layout: fixed; }
.document-requests-table th:nth-child(1) { width: 18%; }
.document-requests-table th:nth-child(2) { width: 27%; }
.document-requests-table th:nth-child(3) { width: 11%; }
.document-requests-table th:nth-child(4) { width: 12%; }
.document-requests-table th:nth-child(5) { width: 32%; }
.document-requests-table td > strong,.document-requests-table td > small { display: block; }
.document-requests-table td > small { margin-top: .25rem; color: var(--muted); }
.document-request-response { display: grid; gap: .3rem; min-width: 0; }
.document-request-response a { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--blue); font-weight: 750; text-decoration: none; }
.document-request-response a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-request-response p { max-height: 5.5rem; margin: .35rem 0 0; overflow: auto; white-space: pre-line; }
@media (max-width: 900px) {
    .document-request-modal-body { grid-template-columns: minmax(0, 1fr); }
    .document-request-instructions-field { grid-column: auto; }
    .document-request-submit-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .document-requests-header { align-items: stretch; flex-direction: column; }
    .document-requests-header .button { width: 100%; }
    .document-request-item > header { flex-direction: column; }
    .document-request-submission { grid-template-columns: minmax(0, 1fr); }
    .document-request-submission > p { grid-column: auto; }
}
.document-item.is-dragging-item { opacity: .45; }
.document-workspace.is-processing { cursor: progress; }
.document-workspace.is-processing .document-item,
.document-workspace.is-processing .document-explorer-toolbar { pointer-events: none; }
.document-item.is-operation-pending { position: relative; opacity: .58; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent); }
.document-item.is-operation-pending::after { content: ''; position: absolute; top: .7rem; right: .7rem; width: 1rem; height: 1rem; border: 2px solid color-mix(in srgb, var(--blue) 25%, transparent); border-top-color: var(--blue); border-radius: 50%; animation: document-operation-spin .65s linear infinite; }
.document-item.is-operation-complete { opacity: 0; transform: scale(.96); transition: opacity 140ms ease, transform 140ms ease; }
@keyframes document-operation-spin { to { transform: rotate(360deg); } }
.document-item.folder.is-drop-target { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.document-items-grid .document-item.folder {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 62px;
    padding: .75rem .9rem;
}
.document-items-grid .document-item.folder > i { font-size: 1.4rem; }
.document-items-grid .document-item.folder > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.document-items-grid .document-item.file {
    align-content: center;
    justify-items: center;
    min-height: 205px;
    text-align: center;
}
.document-items-grid .document-item.file > i { font-size: 4.25rem; }
.document-items-grid .document-item.file > strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.document-items-grid .document-item.file > small {
    padding: .18rem .5rem;
    border-radius: 999px;
    color: var(--blue);
    background: var(--blue-soft);
    font-weight: 800;
}
.document-items-table .document-item.file > i,
.document-items-table .document-item.folder > i { font-size: 1.55rem; }
.document-organize-field { margin: 1.25rem 1.4rem; }
.document-details-list { display: grid; margin: 0; padding: .6rem 1.4rem 1.25rem; }
.document-details-list > div { display: grid; grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr); gap: 1rem; min-width: 0; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.document-details-list > div:last-child { border-bottom: 0; }
.document-details-list dt { color: var(--text); font-size: .88rem; font-weight: 800; }
.document-details-list dd { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-weight: 500; }
.portal-modal .document-image-preview-card { width: min(1040px, calc(100vw - 2rem)); }
.document-image-preview-stage { display: grid; place-items: center; min-height: 240px; max-height: 78dvh; padding: .75rem; overflow: auto; border-radius: 14px; background: #0b1220; }
.document-image-preview-stage img { display: block; max-width: 100%; max-height: 72dvh; object-fit: contain; }
.document-image-preview-stage img[hidden] { display: none; }
.document-image-preview-stage p { margin: 0; color: #fff; }
.document-image-preview-stage p[hidden] { display: none; }
@media (max-width: 900px) {
    .document-upload-panel-top form { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); }
    .document-upload-panel-top .document-upload-queue { grid-column: 1 / 2; }
}
@media (max-width: 640px) {
    .document-client-row { align-items: stretch; flex-direction: column; }
    .document-trash-form .button { width: 100%; }
    .document-upload-panel-top form { grid-template-columns: minmax(0, 1fr); }
    .document-upload-panel-top .document-upload-queue { grid-column: auto; }
    .document-details-list > div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* Vista previa fiel al contenedor común de los correos transaccionales. */
.branding-email-preview{--email-primary:#2563eb;--email-brand:#2563eb;--email-secondary:#0f172a;--email-action-text:#fff;display:grid;gap:.85rem;margin-top:1.25rem;padding:1rem;border:1px solid var(--border-color);border-radius:16px;background:var(--surface-soft)}
.branding-email-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.branding-email-preview-heading p{margin:.25rem 0 0;color:var(--text-muted);font-size:.86rem}
.branding-email-contrast-warning{justify-self:end}
.branding-email-stage{padding:1.2rem;border-radius:14px;background:#f1f5f9}.branding-email-card{max-width:640px;margin:auto;overflow:hidden;border:1px solid #e2e8f0;border-radius:14px;background:#fff;color:#1f2937;font-family:Arial,Helvetica,sans-serif;box-shadow:0 10px 26px rgba(15,23,42,.08)}
.branding-email-brand{padding:1.3rem 1.6rem;border-top:5px solid var(--email-primary);color:var(--email-brand);font-size:1.15rem;font-weight:800}.branding-email-body{padding:0 1.6rem 1.6rem}.branding-email-body h3{margin:.45rem 0 .8rem;color:var(--email-secondary);font-size:1.35rem}.branding-email-body p{margin:0 0 1.1rem;line-height:1.55}.branding-email-action{display:inline-block;padding:.7rem 1rem;border-radius:9px;background:var(--email-primary);color:var(--email-action-text);font-weight:800}.branding-email-footer{padding:1rem 1.6rem;border-top:1px solid #e2e8f0;background:#f8fafc;color:#64748b;font-size:.75rem}
@media(max-width:640px){.branding-email-preview-heading{display:grid}.branding-email-stage{padding:.65rem}}

.branding-login-color-grid{margin-top:.25rem}
.branding-login-preview{--preview-accent:#2563eb;--preview-button:#2563eb;--preview-panel-start:#0f172a;--preview-panel-end:#1e40af;--preview-panel-text:#fff;--preview-feature:#3b5bb5;--preview-panel-image:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:280px;overflow:hidden;border:1px solid var(--border-color);border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.10)}
.branding-login-preview-form{display:flex;flex-direction:column;justify-content:center;gap:.75rem;padding:clamp(1.25rem,3vw,2.25rem);color:#172033;background:#fff}
.branding-login-preview-kicker{color:var(--preview-accent);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.branding-login-preview-form>strong{font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.05}
.branding-login-preview-input{display:block;height:38px;border:1px solid #d8e0ec;border-radius:11px;background:#f8fafc}
.branding-login-preview-button{display:grid;place-items:center;min-height:42px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--preview-button),color-mix(in srgb,var(--preview-button) 78%,#000));font-weight:800}
.branding-login-preview-panel{display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;padding:clamp(1.25rem,3vw,2.25rem);color:var(--preview-panel-text);background-color:var(--preview-panel-start);background-image:linear-gradient(135deg,var(--preview-panel-start),var(--preview-panel-end));background-position:center;background-size:cover}
.branding-login-preview.has-background-image .branding-login-preview-panel{background-image:var(--preview-panel-image)}
.branding-login-preview-panel>strong{max-width:14ch;font-size:clamp(1.55rem,3vw,2.5rem);line-height:1}
.branding-login-preview-panel>span{color:color-mix(in srgb,var(--preview-panel-text) 78%,transparent);font-size:.86rem}
.branding-login-preview-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.5rem}
.branding-login-preview-features i{display:block;height:38px;border:1px solid color-mix(in srgb,var(--preview-panel-text) 18%,transparent);border-radius:11px;background:color-mix(in srgb,var(--preview-feature) 72%,transparent)}
.settings-branding-preview.login-background{width:220px;height:120px;object-fit:cover;padding:0}
@media(max-width:760px){.branding-login-preview{grid-template-columns:1fr}.branding-login-preview-panel{min-height:230px}.branding-login-color-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.branding-login-color-grid{grid-template-columns:1fr}}

/* Shared confirmations and notifications. Alertify uses the portal palette; the local dialog is
   used only when the external Alertify asset cannot be loaded. */
.alertify .ajs-dialog {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.alertify .ajs-header,
.alertify .ajs-footer {
    border-color: var(--line);
    color: var(--text);
    background: var(--surface);
}
.alertify .ajs-body .ajs-content { color: var(--text); }
.alertify .ajs-footer .ajs-buttons .ajs-button {
    min-width: 96px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 800;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
    border-color: var(--blue);
    color: #fff;
    background: var(--blue);
}
.alertify-notifier .ajs-message {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.portal-dialog-fallback {
    width: min(30rem, calc(100vw - 2rem));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: var(--text);
    background: transparent;
}
.portal-dialog-fallback::backdrop { background: rgba(15, 23, 42, .56); backdrop-filter: blur(3px); }
.portal-dialog-fallback-card {
    display: grid;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.portal-dialog-fallback-card p { margin: 0; font-weight: 700; }
.portal-dialog-fallback-input {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    background: var(--surface-soft);
}
.portal-dialog-fallback-actions { display: flex; justify-content: flex-end; gap: .75rem; }

/* The upper document controls use a 2/3 + 1/3 composition; the explorer below
   remains full width. */
.document-drive-card.has-upload-panel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    grid-template-areas:
        "document-intro document-upload"
        "document-quota document-quota"
        "document-explorer document-explorer";
    align-items: start;
    column-gap: 1.25rem;
}
.document-drive-card.has-upload-panel > .document-drive-intro {
    grid-area: document-intro;
    width: 100%;
}
.document-drive-intro > .card-header { margin-bottom: .55rem; }
.document-drive-intro .card-header p { margin-top: .35rem; }
.document-drive-intro > .document-client-row { margin: 0; }
.document-client-field > label,
.document-storage-usage > strong { color: var(--text); font-family: inherit; font-size: .82rem; font-weight: 800; letter-spacing: 0; }
.document-drive-card.has-upload-panel > .document-upload-panel-top {
    grid-area: document-upload;
    align-self: stretch;
    width: 100%;
    margin: 0;
}
.document-drive-card.has-upload-panel > .document-upload-panel-top form {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    height: 100%;
}
.document-drive-card.has-upload-panel > .document-upload-panel-top .document-file-picker,
.document-drive-card.has-upload-panel > .document-upload-panel-top .button.import {
    width: 100%;
}
.document-drive-card.has-upload-panel > .document-upload-panel-top .document-upload-queue {
    max-height: 132px;
}
.document-drive-card.has-upload-panel > .document-drive-toolbar { grid-area: document-quota; }
.document-drive-card.has-upload-panel > .document-drive-layout { grid-area: document-explorer; }
@media (max-width: 980px) {
    .document-drive-card.has-upload-panel {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "document-intro"
            "document-upload"
            "document-quota"
            "document-explorer";
        row-gap: 1rem;
    }
    .document-drive-card.has-upload-panel > .document-drive-intro,
    .document-drive-card.has-upload-panel > .document-upload-panel-top,
    .document-drive-card.has-upload-panel > .document-drive-toolbar {
        margin: 0;
    }
}

/* Search and richer list presentation for the document explorer. */
.document-breadcrumbs { flex: 1 1 16rem; }
.document-search { position: relative; flex: 0 1 23rem; min-width: 15rem; }
.document-search-control { display: flex; align-items: center; gap: .55rem; min-height: 42px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--control-bg, var(--surface)); }
.document-search-control:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent); }
.document-search-control > i { color: var(--muted); }
.document-search-control input { width: 100%; min-width: 0; padding: 0; border: 0; color: var(--text); background: transparent; outline: 0; }
.document-search-results { position: absolute; z-index: 15; top: calc(100% + .4rem); right: 0; width: min(34rem, 85vw); max-height: 22rem; overflow: auto; padding: .35rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-elevated-solid, var(--surface)); box-shadow: 0 18px 42px rgb(15 23 42 / 20%); }
.document-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center; border-bottom: 1px solid var(--line); }
.document-search-result:last-child { border-bottom: 0; }
.document-search-open,.document-search-locate { border: 0; color: var(--text); background: transparent; cursor: pointer; }
.document-search-open { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .65rem; min-width: 0; padding: .7rem; text-align: left; }
.document-search-open > i { color: var(--blue); font-size: 1.35rem; }
.document-search-open > span { display: grid; gap: .18rem; min-width: 0; }
.document-search-open strong,.document-search-open small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-search-open small { color: var(--muted); font-weight: 500; }
.document-search-locate { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 9px; color: var(--blue); }
.document-search-open:hover,.document-search-open:focus-visible,.document-search-locate:hover,.document-search-locate:focus-visible { background: var(--blue-soft); outline: 0; }
.document-search-message { margin: 0; padding: .85rem; color: var(--muted); text-align: center; }
.document-list-head,.document-list-detail { display: none; }
.document-items-table .document-list-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(6rem, .35fr) minmax(6rem, .3fr) minmax(9rem, .4fr); align-items: center; gap: .75rem; padding: .55rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.document-items-table .document-item { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(6rem, .35fr) minmax(6rem, .3fr) minmax(9rem, .4fr); gap: .75rem; min-height: 58px; }
.document-items-table .document-item > small { display: none; }
.document-items-table .document-list-detail { display: block; overflow: hidden; color: var(--muted); font-size: .8rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1050px) {
    .document-explorer-toolbar { flex-wrap: wrap; }
    .document-search { order: 3; flex-basis: 100%; }
    .document-search-results { right: auto; left: 0; }
}
@media (max-width: 760px) {
    .document-items-table .document-list-head { display: none; }
    .document-items-table .document-item { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .document-items-table .document-list-detail { display: none; }
}

/* Final document controls: compact selectors/actions and a stable workspace height. */
.document-drive-intro { margin-bottom: 10px; }
.document-client-row .document-client-selector {
    flex: 0 1 auto;
    max-width: 100%;
}
.document-client-row .document-client-field,
.document-client-row .document-client-field .remote-lookup,
.document-client-row .document-client-field .remote-lookup-control {
    width: fit-content;
    max-width: 100%;
}
.document-client-row .remote-lookup-input {
    field-sizing: content;
    width: auto;
    min-width: min(18rem, calc(100vw - 5rem));
    max-width: min(52rem, calc(100vw - 5rem));
    padding-inline: 10px 34px;
}
.document-client-row .remote-lookup-panel { min-width: min(34rem, calc(100vw - 5rem)); }
.document-drive-card > .empty-state {
    min-height: 560px;
    margin-top: 0;
}
.document-drive-card.has-upload-panel > .document-upload-panel-top .document-file-picker,
.document-drive-card.has-upload-panel > .document-upload-panel-top .button.import {
    justify-self: start;
    width: max-content;
    max-width: 100%;
}
.document-request-submit-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    padding-top: 0;
    border-top: 0;
}
.document-request-submit-body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
}
.document-request-file-picker,
.document-request-submit-form .portal-modal-actions .button,
.document-request-deliver-button {
    width: max-content;
    max-width: 100%;
}
.document-request-actions .button.small.document-request-deliver-button {
    width: max-content;
    min-width: max-content;
    height: auto;
    min-height: 38px;
    padding-inline: .75rem;
    white-space: nowrap;
}
.document-requests-table[data-client-view="true"] th:last-child,
.document-requests-table[data-client-view="true"] td:last-child {
    min-width: 190px;
}
.document-request-file-picker { justify-content: flex-start; }
.portal-modal.document-request-submit-dialog {
    width: 100vw;
    max-width: none;
    margin: 0;
}
.portal-modal.document-request-submit-dialog .portal-modal-card {
    width: min(34rem, calc(100vw - 2rem));
    max-width: min(34rem, calc(100vw - 2rem));
    margin: auto;
}
.document-request-submit-dialog .portal-modal-header,
.document-request-submit-dialog .document-request-submit-body,
.document-request-submit-dialog .portal-modal-actions { align-self: stretch; box-sizing: border-box; width: 100%; }
.document-request-submit-dialog .document-request-submit-body { overflow-x: hidden; }
.document-request-submit-dialog .alert { margin: 0; }
.document-requests-table th:nth-child(1) { width: 16%; }
.document-requests-table th:nth-child(2) { width: 23%; }
.document-requests-table th:nth-child(3) { width: 11%; }
.document-requests-table th:nth-child(4) { width: 10%; }
.document-requests-table th:nth-child(5) { width: 28%; }
.document-requests-table th:nth-child(6) { width: 12%; }
.document-requests-table[data-client-view="true"] th:nth-child(1) { width: 32%; }
.document-requests-table[data-client-view="true"] th:nth-child(2) { width: 13%; }
.document-requests-table[data-client-view="true"] th:nth-child(3) { width: 11%; }
.document-requests-table[data-client-view="true"] th:nth-child(4) { width: 26%; }
.document-requests-table[data-client-view="true"] th:nth-child(5) { width: 18%; }
.document-requests-table thead th .dt-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    width: 100%;
}
.document-requests-table thead th .dt-column-order {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 12px;
    width: 12px;
    min-width: 12px;
    margin-left: auto;
    align-self: stretch;
}
.document-requests-table .table-actions-column,
.document-requests-table td:last-child { white-space: nowrap; }

@media (max-width: 640px) {
    .document-client-row .document-client-selector,
    .document-client-row .document-client-field,
    .document-client-row .document-client-field .remote-lookup,
    .document-client-row .document-client-field .remote-lookup-control,
    .document-client-row .remote-lookup-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .document-drive-card > .empty-state { min-height: 440px; }
}

/* Carrusel de planes: conserva tres tarjetas visibles y avanza una por interacción. */
.plan-carousel {
    position: relative;
    min-width: 0;
    padding-inline: 2.9rem;
}

.plan-carousel-viewport {
    min-width: 0;
    overflow: hidden;
    padding: 0.3rem;
    margin: -0.3rem;
}

.pricing-plan-grid.plan-carousel-track {
    --plans-per-view: 3;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--plans-per-view) - 1) * 1rem) / var(--plans-per-view));
    grid-template-columns: none;
    justify-content: start;
    align-items: stretch;
    gap: 1rem;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.plan-carousel:not(.has-overflow) .plan-carousel-track {
    justify-content: center;
}

.plan-carousel-control {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--blue);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    transform: translateY(-50%);
    transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

.plan-carousel.has-overflow .plan-carousel-control { display: inline-flex; }
.plan-carousel-control.previous { left: 0; }
.plan-carousel-control.next { right: 0; }
.plan-carousel-control:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); background: var(--blue-soft); }
.plan-carousel-control:disabled { opacity: 0.35; cursor: default; }
.plan-carousel-status { min-height: 1.2rem; margin-top: 0.55rem; color: var(--muted); text-align: center; font-size: 0.8rem; }

.pricing-plan-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.pricing-plan-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.pricing-feature-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.pricing-feature-list li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--muted); }
.pricing-feature-list i { flex: 0 0 auto; margin-top: 0.28rem; color: var(--tenant-brand-primary, var(--blue)); }

/* Las variantes comparten el contenido y toman sus colores del branding del Tenant. */
.plan-card--featured {
    border: 2px solid color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 72%, var(--line));
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 5%, var(--surface)), var(--surface) 35%);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 13%, transparent);
}

.plan-card--featured.is-featured { transform: translateY(-0.18rem); }
.plan-card--featured .pricing-plan-header { text-align: center; }

/* Clásico y Nocturno conservan una lectura editorial alineada a la izquierda. */
.plan-card--classic .pricing-plan-header,
.plan-card--midnight .pricing-plan-header {
    justify-items: start;
    text-align: left;
}

.plan-card--midnight {
    border-color: color-mix(in srgb, var(--tenant-brand-secondary, var(--cyan)) 45%, var(--navy-2));
    color: #f8fafc;
    background: linear-gradient(150deg, var(--navy), var(--navy-2));
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.24);
}

.plan-card--midnight .eyebrow,
.plan-card--midnight .pricing-feature-list i { color: color-mix(in srgb, var(--tenant-brand-secondary, var(--cyan)) 80%, white); }
.plan-card--midnight .pricing-plan-description,
.plan-card--midnight .pricing-feature-list li,
.plan-card--midnight .pricing-option-copy span { color: #cbd5e1; }
.plan-card--midnight .pricing-option { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); }
.plan-card--midnight .pricing-option-copy strong { color: #fff; }
.plan-card--midnight .pricing-plan-action { border-color: rgba(255,255,255,0.25); color: #fff; background: rgba(255,255,255,0.08); }

.plan-card--compact {
    border: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 92%, var(--navy)), color-mix(in srgb, var(--tenant-brand-secondary, var(--cyan)) 68%, var(--navy)));
    color: #fff;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 22%, transparent);
}

.plan-card--compact .eyebrow,
.plan-card--compact .pricing-plan-description,
.plan-card--compact .pricing-feature-list li,
.plan-card--compact .pricing-feature-list i { color: rgba(255,255,255,0.86); }
.plan-card--compact .pricing-option { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.12); }
.plan-card--compact .pricing-option-copy strong,
.plan-card--compact .pricing-option-copy span { color: #fff; }
.plan-card--compact .pricing-plan-action { border-color: transparent; background: #fff; color: var(--navy); }

/* Editor de presentación: selector y vista previa usan las mismas clases que el cliente. */
.plan-presentation-layout,
.plan-editor-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: 1.4rem; align-items: start; }
.plan-editor-layout { max-height: calc(90vh - 180px); padding: 0 10px 10px; overflow-y: auto; box-sizing: border-box; }
.plan-style-modal-card .plan-presentation-layout { max-height: calc(90vh - 180px); padding: 1.25rem 1.4rem; overflow-y: auto; box-sizing: border-box; }
.plan-template-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.plan-template-choice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0.7rem; align-items: center; min-height: 5.5rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); cursor: pointer; }
.plan-template-choice:has(input:checked) { border-color: var(--tenant-brand-primary, var(--blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-brand-primary, var(--blue)) 14%, transparent); }
.plan-template-choice input { position: absolute; opacity: 0; pointer-events: none; }
.plan-template-choice-copy { display: grid; gap: 0.2rem; }
.plan-template-choice-copy small { color: var(--muted); }
.plan-template-miniature { display: grid; gap: 0.3rem; min-height: 3.6rem; padding: 0.55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.plan-template-miniature span { display: block; height: 0.35rem; border-radius: 999px; background: currentColor; opacity: 0.2; }
.plan-template-miniature span:nth-child(2) { width: 75%; }
.plan-template-miniature span:nth-child(3) { width: 52%; margin-top: auto; opacity: 0.5; }
.plan-card--featured.plan-template-miniature { border-width: 2px; }
.plan-live-preview,
.plan-form-preview { position: sticky; top: 1rem; display: grid; gap: 0.55rem; min-width: 0; }
.plan-preview-label { color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-live-preview .pricing-plan-card,
.plan-form-preview .pricing-plan-card { min-height: 24rem; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.plan-feature-rows { display: grid; gap: 0.5rem; }
.plan-feature-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 0.4rem; align-items: center; }
.plan-feature-handle { color: var(--muted); }
.plan-feature-row .icon-button { width: 2.35rem; height: 2.35rem; }

@media (max-width: 1180px) {
    .pricing-plan-grid.plan-carousel-track { --plans-per-view: 2; grid-template-columns: none; }
    .plan-presentation-layout,
    .plan-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .plan-live-preview,
    .plan-form-preview { position: static; }
}

@media (max-width: 720px) {
    .plan-carousel { padding-inline: 2.55rem; }
    .pricing-plan-grid.plan-carousel-track { --plans-per-view: 1; grid-template-columns: none; }
    .plan-template-picker { grid-template-columns: minmax(0, 1fr); }
    .plan-feature-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .plan-feature-row [data-feature-up],
    .plan-feature-row [data-feature-down] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-plan-grid.plan-carousel-track { transition: none; }
}