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

/* El atributo `hidden` tiene que ganar siempre. Las reglas de componente con
   `display: grid` o `flex` lo pisaban, y se veia lo que el HTML y el JS daban por
   oculto: el "Motivo de omision" de cada documento, las etiquetas "Errores: 0", el
   campo de codigo de respaldo de MFA y el aviso de recurrencia de facturas. El JS del
   portal muestra y oculta con `elemento.hidden`, asi que esto solo alinea el estilo
   con lo que el marcado ya decia. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-white);
}

body.has-app-loading {
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

p, li {
    line-height: 1.7;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 var(--space-4);
    color: inherit;
}

h1 {
    font-size: clamp(2.2rem, 4vw, 4.4rem);
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

h3 {
    font-size: 1.2rem;
}

.container {
    width: min(calc(100% - 2rem), var(--container-width));
    margin: 0 auto;
}

.narrow {
    width: min(calc(100% - 2rem), 820px);
    margin: 0 auto;
}

.section {
    padding: var(--space-8) 0;
}

.section-soft {
    background: var(--color-ivory);
}

.section-dark {
    background: var(--color-navy);
    color: var(--color-white);
}

.page-hero {
    padding: 5rem 0 2rem;
}

.eyebrow,
.portal-overline {
    display: inline-block;
    margin-bottom: var(--space-3);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-gold);
    font-weight: 700;
}

.lead {
    font-size: 1.125rem;
    color: var(--color-text-soft);
    max-width: 60ch;
}

.section-dark .lead {
    color: rgba(254, 254, 254, 0.78);
}

.app-loading-overlay[hidden] {
    display: none;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: all;
    transition: opacity 0.16s ease;
}

.app-loading-overlay.is-visible {
    opacity: 1;
}

.app-loading-overlay__scrim {
    position: absolute;
    inset: 0;
    background: rgba(7, 15, 24, 0.78);
    backdrop-filter: blur(10px);
}

.app-loading-overlay__dialog {
    position: relative;
    z-index: 1;
    width: min(360px, calc(100vw - 2rem));
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(200, 153, 72, 0.28);
    border-radius: 8px;
    background: rgba(16, 32, 46, 0.98);
    box-shadow: 0 28px 72px rgba(7, 15, 24, 0.42);
    color: var(--color-white);
    text-align: center;
}

.app-loading-overlay__mark {
    position: relative;
    width: 144px;
    height: 144px;
    display: grid;
    place-items: center;
}

.app-loading-overlay__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(200, 153, 72, 0) 0deg,
        rgba(200, 153, 72, 0.18) 70deg,
        rgba(200, 153, 72, 0.95) 150deg,
        rgba(242, 215, 163, 0.96) 214deg,
        rgba(200, 153, 72, 0) 300deg,
        rgba(200, 153, 72, 0) 360deg
    );
    animation: app-loading-ring-spin 1.05s linear infinite;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}

.app-loading-overlay__mark-core {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(254, 254, 254, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.app-loading-overlay__mark-core img {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.app-loading-overlay__copy {
    display: grid;
    gap: 0.35rem;
}

.app-loading-overlay__eyebrow {
    margin: 0;
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-loading-overlay__copy strong {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    letter-spacing: 0;
}

.app-loading-overlay__copy small {
    max-width: 30ch;
    color: rgba(254, 254, 254, 0.72);
    font-weight: 600;
    line-height: 1.5;
}

.app-loading-overlay__track {
    position: relative;
    width: min(100%, 240px);
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.app-loading-overlay__track span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-gold), #f2d7a3);
    animation: app-loading-track-sweep 1.1s ease-in-out infinite;
}

@keyframes app-loading-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes app-loading-track-sweep {
    0% {
        transform: translateX(-105%);
    }
    100% {
        transform: translateX(245%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-overlay,
    .app-loading-overlay__ring,
    .app-loading-overlay__track span {
        transition: none;
        animation: none;
    }
}

.button-row,
.link-stack {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

.link-stack {
    margin-top: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 46px;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-heading);
    font-weight: 700;
    transition: 0.2s ease;
    cursor: pointer;
}

.button-primary {
    background: var(--color-gold);
    color: #161616;
}

.button-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.button-secondary {
    background: transparent;
    border-color: rgba(28, 46, 65, 0.16);
    color: var(--color-navy);
}

.button-secondary-light {
    color: var(--color-white);
    border-color: rgba(254, 254, 254, 0.36);
    background: rgba(255, 255, 255, 0.05);
}

.button-secondary-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(254, 254, 254, 0.5);
}

.button-small {
    min-height: 38px;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
}

.text-link-button {
    border: 0;
    background: transparent;
    color: var(--color-navy);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.info-card,
.content-card,
.academy-card,
.service-card,
.contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-soft);
}

.content-card.article-body {
    padding: clamp(1.5rem, 2vw, 2.5rem);
}

.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.65rem;
}

.clean-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-gold);
}

.section-heading {
    max-width: 720px;
    margin-bottom: var(--space-6);
}

.value-grid,
.service-grid,
.academy-grid,
.footer-grid,
.portal-login-grid,
.style-grid {
    display: grid;
    gap: var(--space-5);
}

.value-grid,
.service-grid,
.academy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
}

.split-grid,
.portal-grid-two,
.request-detail-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1.4fr 1fr;
}

.stack-side,
.stack-list,
.stack-form,
.contact-side {
    display: grid;
    gap: var(--space-4);
}

.stack-list-item {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    background: rgba(28, 46, 65, 0.04);
    display: grid;
    gap: 0.25rem;
}

.form-group {
    display: grid;
    gap: 0.45rem;
}

label {
    font-weight: 600;
    color: var(--color-navy);
}

/* Las casillas y radios quedan fuera: esta regla esta pensada para campos de
   texto, y aplicada a un checkbox lo convertia en una caja de 48px de alto y
   ancho completo con el glifo centrado, lo que lo desalineaba respecto al texto
   de su fila y lo hacia parecer un control roto. */
/* El :not() va envuelto en :where() a proposito: sin eso, cada :not([type=...])
   suma especificidad y esta regla pasaba a (0,2,1), ganandole a
   .portal-body input (0,1,1). El color del tema dejaba de aplicarse y los
   campos quedaban con texto oscuro sobre fondo oscuro en el tema navy.
   :where() aporta cero, asi que el selector sigue pesando lo mismo que `input`. */
input:not(:where([type="checkbox"], [type="radio"])),
textarea,
select {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(28, 46, 65, 0.14);
    padding: 0.9rem 1rem;
    font: inherit;
    background: var(--color-white);
    color: var(--color-text);
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--color-gold);
    cursor: pointer;
}

/* El selector de archivo mostraba el boton nativo del navegador: una caja gris
   con el texto en el idioma del navegador ("Choose File"), ajena al diseno y
   sin contraste sobre los paneles oscuros. */
input[type="file"] {
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(28, 46, 65, 0.2);
    border-radius: 999px;
    background: rgba(200, 153, 72, 0.16);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(200, 153, 72, 0.28);
}

.password-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.6rem;
    align-items: center;
}

.password-control input {
    min-width: 0;
}

.password-control__button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .password-control {
        grid-template-columns: minmax(0, 1fr);
    }

    .password-control__button {
        width: 100%;
    }
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.error-list {
    color: var(--color-danger);
}

.message-stack {
    position: relative;
    z-index: 4;
    width: min(calc(100% - 2rem), 680px);
    margin: 1rem auto 0;
    display: grid;
    gap: 0.5rem;
}

.flash {
    border-radius: 14px;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
    background: var(--color-ivory);
    color: var(--color-navy);
}

.flash-success {
    border-color: rgba(101, 160, 108, 0.35);
}

.flash-error {
    border-color: rgba(196, 90, 90, 0.35);
}

.tag,
.service-category,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
}

.tag,
.service-category {
    background: rgba(200, 153, 72, 0.14);
    color: var(--color-navy);
}

.status-badge {
    background: rgba(254, 254, 254, 0.06);
    color: var(--color-white);
    border: 1px solid rgba(254, 254, 254, 0.08);
}

.status-requested {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-info {
    background: rgba(109, 119, 131, 0.2);
    color: #cfd6de;
}

.status-draft {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-ready_for_review,
.status-sent {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-sent_for_signature {
    background: rgba(127, 117, 211, 0.18);
    color: #d8d0ff;
}

.status-signed {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.status-uploaded,
.status-under_review {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-payment_review {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-active,
.status-current,
.status-paid,
.status-not_applicable,
.status-validated,
.status-delivered,
.status-closed,
.status-success,
.status-synced {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.status-issued,
.status-system,
.status-ready_for_review,
.status-sent,
.status-uploaded,
.status-under_review,
.status-in_progress {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-overdue,
.status-has_overdue,
.status-past_due,
.status-observed,
.status-waiting_client,
.status-danger {
    background: rgba(196, 90, 90, 0.18);
    color: #ffb8b8;
}

.status-restricted,
.status-manual_staff {
    background: rgba(183, 116, 44, 0.2);
    color: #ffd6a6;
}

.status-payment_proof {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-unpaid,
.status-payments_pending {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-unknown,
.status-no_data,
.status-failed {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-omitted {
    background: rgba(127, 117, 211, 0.18);
    color: #d8d0ff;
}

.status-observed {
    background: rgba(196, 90, 90, 0.18);
    color: #ffb8b8;
}

.status-pending,
.status-warning,
.status-inactive {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-approved {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.status-rejected,
.status-canceled {
    background: rgba(196, 90, 90, 0.18);
    color: #ffb8b8;
}

.tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.tab-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(254, 254, 254, 0.1);
    border-radius: 8px;
    color: var(--color-white);
    text-decoration: none;
    background: rgba(254, 254, 254, 0.04);
}

.tab-link.is-active {
    border-color: rgba(211, 162, 75, 0.45);
    background: rgba(211, 162, 75, 0.14);
}

.reference-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7rem;
    margin-right: 0.35rem;
    padding: 0.32rem 0.5rem;
    border-radius: 8px;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 800;
    border: 1px solid rgba(254, 254, 254, 0.12);
}

.reference-badge--dr {
    background: rgba(72, 145, 200, 0.18);
    color: #b9dcff;
}

.reference-badge--ddr {
    background: rgba(109, 119, 131, 0.2);
    color: #d5dae0;
}

.reference-badge--sr {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.reference-badge--ent {
    background: rgba(127, 117, 211, 0.18);
    color: #d8d0ff;
}

.reference-badge--com {
    background: rgba(183, 116, 44, 0.2);
    color: #ffd6a6;
}

.reference-badge--inv {
    background: rgba(72, 145, 200, 0.18);
    color: #b9dcff;
}

.reference-badge--cmp {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.reference-badge--ed,
.reference-badge--tpl {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-submitted,
.status-assigned {
    background: rgba(211, 162, 75, 0.18);
    color: #f3d08f;
}

.status-in_progress {
    background: rgba(109, 119, 131, 0.18);
    color: #d5dae0;
}

.status-waiting_client {
    background: rgba(196, 90, 90, 0.18);
    color: #ffb8b8;
}

.status-resolved {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.status-applied {
    background: rgba(101, 160, 108, 0.18);
    color: #bfe7c4;
}

.status-rejected {
    background: rgba(127, 117, 211, 0.18);
    color: #d8d0ff;
}

.status-canceled {
    background: rgba(127, 117, 211, 0.18);
    color: #d8d0ff;
}

.panel-context-box {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #496073;
    border-radius: var(--radius-sm);
    background: #1b2d3b;
    color: #f6f8fb;
    box-shadow: inset 0 1px 0 #263b4c;
}

.panel-context-box__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.panel-context-box__head > div:first-child {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.panel-context-box__head-actions {
    justify-content: flex-end;
    gap: 0.45rem;
}

.panel-context-box__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.panel-context-box__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 18rem;
    min-height: 1.75rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid #526a7d;
    border-radius: var(--radius-sm);
    background: #263a49;
    color: #f6f8fb;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.panel-context-box__meta b {
    color: #b7c6d3;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.panel-context-box__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.panel-context-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
}

.panel-context-tabs__level {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.45rem;
}

.panel-context-tabs__level > span {
    flex: 0 0 auto;
    color: #b7c6d3;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.panel-context-tabs__row {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.panel-context-tab,
.panel-context-chip {
    display: inline-flex;
    align-items: center;
    max-width: 18rem;
    min-height: 1.9rem;
    padding: 0.26rem 0.58rem;
    border: 1px solid #51687a;
    border-radius: var(--radius-sm);
    background: #273c4b;
    color: #f6f8fb;
    font-size: 0.82rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.panel-context-tab.is-active,
.panel-context-chip.is-active {
    border-color: #6fd0bc;
    background: #075f65;
    color: #ffffff;
}

.panel-context-chip.is-muted {
    color: #b7c6d3;
}

.panel-context-box__notice,
.panel-context-box__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.panel-context-box__notice {
    padding: 0.55rem 0.7rem;
    border: 1px solid #9f7a3a;
    border-radius: var(--radius-sm);
    background: #3b3122;
    color: #fff2d5;
}

.panel-context-box__notice form,
.panel-context-box__actions form,
.panel-context-box__head form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.panel-context-box__actions input[type="text"],
.panel-context-box__actions select,
.panel-context-box__notice select {
    min-height: 2.25rem;
}

.portal-body .panel-context-box input[type="text"],
.portal-body .panel-context-box select {
    min-height: 2.25rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.panel-context-box__actions input[type="text"] {
    width: clamp(13rem, 22vw, 22rem);
}

.panel-context-box__sources {
    margin: 0;
    color: #b7c6d3;
    font-size: 0.82rem;
}

.panel-context-box .button-small {
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.85rem;
}

.panel-context-groups {
    display: grid;
    gap: 0.65rem;
    margin: -0.15rem 0 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #496073;
    border-radius: var(--radius-sm);
    background: #1b2d3b;
    color: #f6f8fb;
    box-shadow: inset 0 1px 0 #263b4c;
}

.panel-context-groups--primary {
    margin-top: 0.25rem;
    margin-bottom: 0;
    padding: 0.95rem;
    border-color: #9f7a3a;
    background: #192b38;
}

.panel-context-groups__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.panel-context-groups__head > div {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.panel-context-groups__head strong {
    color: #f6f8fb;
}

.panel-context-groups__head p {
    max-width: 32rem;
    margin: 0;
    color: #b7c6d3;
    font-size: 0.84rem;
    text-align: right;
}

.panel-context-groups__rows {
    display: grid;
    gap: 0.45rem;
}

.panel-context-group-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 0.35fr) minmax(12rem, 1.35fr) minmax(18rem, 2fr) minmax(8rem, 0.7fr) minmax(5.5rem, 0.45fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid #50687c;
    border-radius: var(--radius-sm);
    background: #243848;
    color: #f6f8fb;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.panel-context-group-row:hover {
    border-color: #d6a848;
    background: #304452;
    transform: translateY(-1px);
}

.panel-context-group-row__scope,
.panel-context-group-row__action {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
    align-content: center;
    min-height: 3rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid #526a7d;
    border-radius: var(--radius-sm);
    background: #263a49;
    color: #f6f8fb;
}

.panel-context-group-row__scope {
    text-align: center;
}

.panel-context-group-row__scope b,
.panel-context-group-row__action b {
    color: #f6f8fb;
    font-size: 0.92rem;
    line-height: 1.1;
}

.panel-context-group-row__scope small,
.panel-context-group-row__action small {
    color: #b7c6d3;
    font-size: 0.68rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.panel-context-group-row__main,
.panel-context-group-row__foot {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.panel-context-group-row__main strong,
.panel-context-group-row__foot b {
    overflow-wrap: anywhere;
}

.panel-context-group-row__main small,
.panel-context-group-row__foot small {
    color: #b7c6d3;
}

.panel-context-group-row__metrics {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(5rem, 1fr));
    gap: 0.35rem;
}

.panel-context-group-row__metrics span {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    padding: 0.36rem 0.45rem;
    border-radius: var(--radius-sm);
    background: #314656;
    color: #b7c6d3;
    font-size: 0.76rem;
}

.content-panel:has(.panel-context-groups[data-panel-context-replaces-records="true"]) > form.filter-grid,
.content-panel:has(.panel-context-groups[data-panel-context-replaces-records="true"]) > form.filters-inline,
.content-panel:has(.panel-context-groups[data-panel-context-replaces-records="true"]) > form.bulk-action-form,
.content-panel:has(.panel-context-groups[data-panel-context-replaces-records="true"]) > .table-wrap,
.content-panel:has(.panel-context-groups[data-panel-context-replaces-records="true"]) > .pagination-inline {
    display: none;
}

.content-panel.is-panel-context-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.panel-context-group-row__metrics b {
    color: #f6f8fb;
    font-size: 0.98rem;
}

.table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

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

.data-table th,
.data-table td {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.data-table--context-records {
    border-collapse: separate;
    border-spacing: 0 0.45rem;
}

.data-table--context-records th {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-bottom: 0;
    color: #b7c6d3;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table--context-records tbody tr.panel-context-record-row > td {
    background: #243848;
    border-top: 1px solid #50687c;
    border-bottom: 1px solid #50687c;
    box-shadow: inset 0 1px 0 #2c4455;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.data-table--context-records tbody tr.panel-context-record-row > td + td {
    border-left: 1px solid rgba(255, 255, 255, 0.035);
}

.data-table--context-records tbody tr.panel-context-record-row:hover > td {
    background: #2b4050;
    border-color: #6a8193;
    box-shadow: inset 0 1px 0 #385364;
}

.data-table--context-records tbody tr.panel-context-record-row > td:first-child {
    border-left: 3px solid #d6a848;
    border-radius: 8px 0 0 8px;
}

.data-table--context-records tbody tr.panel-context-record-row > td:last-child {
    border-right: 1px solid #50687c;
    border-radius: 0 8px 8px 0;
}

.data-table--context-records tbody tr.panel-context-record-row:hover > td:last-child {
    border-right-color: #6a8193;
}

.data-table--context-records tbody tr.panel-context-record-row strong,
.data-table--context-records tbody tr.panel-context-record-row a:not(.button) {
    color: #f6f8fb;
    font-weight: 800;
}

.data-table--context-records tbody tr.panel-context-record-row .muted {
    color: #c2ced8;
}

.data-table--context-records tbody tr.panel-context-record-row .status-badge {
    border-color: rgba(255, 255, 255, 0.12);
}

:root[data-portal-theme="light"] .data-table--context-records th {
    color: #536170;
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row > td {
    background: #ffffff;
    border-top-color: rgba(28, 46, 65, 0.16);
    border-bottom-color: rgba(28, 46, 65, 0.16);
    box-shadow: inset 0 1px 0 rgba(28, 46, 65, 0.035);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row > td + td {
    border-left-color: rgba(28, 46, 65, 0.055);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row:hover > td {
    background: #f7f5f0;
    border-color: rgba(200, 153, 72, 0.32);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row > td:last-child {
    border-right-color: rgba(28, 46, 65, 0.16);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row:hover > td:last-child {
    border-right-color: rgba(200, 153, 72, 0.32);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row strong,
:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row a:not(.button) {
    color: var(--color-navy);
}

:root[data-portal-theme="light"] .data-table--context-records tbody tr.panel-context-record-row .muted {
    color: #5d6975;
}

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

.section-dark .muted {
    color: rgba(254, 254, 254, 0.68);
}

.timeline {
    display: grid;
    gap: 1rem;
}

.timeline-item {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.timeline.compact .timeline-item {
    padding: 0.9rem 1rem;
}

.narrow-panel {
    max-width: 760px;
}

.empty-state {
    padding: var(--space-7);
    text-align: center;
    display: grid;
    gap: var(--space-4);
}

@media (max-width: 1024px) {
    .value-grid,
    .service-grid,
    .academy-grid,
    .footer-grid,
    .portal-login-grid,
    .split-grid,
    .portal-grid-two,
    .request-detail-grid,
    .style-grid {
        grid-template-columns: 1fr;
    }
}

/* Las filas de contexto piden 48rem de pistas minimas (~900px con el root a
   16px por debajo de 981px), pero solo se apilaban a 720px: en la franja
   intermedia desbordaban y hacian scroll horizontal al documento. */
@media (max-width: 900px) {
    .panel-context-group-row {
        grid-template-columns: 1fr;
    }

    .panel-context-group-row__scope,
    .panel-context-group-row__action {
        min-height: auto;
        text-align: left;
    }

    .panel-context-group-row__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .panel-context-tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .section {
        padding: 3.25rem 0;
    }

    .info-card,
    .content-card,
    .academy-card,
    .service-card,
    .contact-card {
        padding: 1.25rem;
    }

    .button-row,
    .inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-context-box__head {
        align-items: stretch;
        flex-direction: column;
    }

    /* El campo se quedaba anclado a su minimo de 13rem y empujaba el boton
       contiguo a otra linea, dejando la barra en L. */
    .panel-context-box__actions,
    .panel-context-box__notice {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-context-box__actions input[type="text"],
    .panel-context-box__actions select,
    .panel-context-box__notice select,
    .panel-context-box .button-small {
        width: 100%;
    }

    .panel-context-tabs {
        grid-template-columns: 1fr;
    }

    .panel-context-groups__head {
        flex-direction: column;
    }

    .panel-context-groups__head p {
        max-width: none;
        text-align: left;
    }

    .panel-context-group-row {
        grid-template-columns: 1fr;
    }

    .panel-context-group-row__scope,
    .panel-context-group-row__action {
        min-height: auto;
        text-align: left;
    }

    .panel-context-group-row__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Captura que actualiza a una confirmada: nace llena y se marca solo lo que conviene
   revisar (apps/accounts/capturas/actualizacion.py). Rojo = hay que capturarlo;
   ambar = revisar.
   El aviso, la leyenda, las notas de seccion y las pastillas llevan su propio fondo
   (marfil, rojo, ambar) en el sitio publico Y en la consola: son islas de color fijo
   (ver ISLAS en scripts/check_theme_colors.py) y fijan tambien el color del texto. Sin
   eso, en el tema oscuro de la consola heredaban texto claro sobre fondo marfil. */
.revision-aviso {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    background: var(--color-ivory);
    color: var(--color-navy-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    margin: 1rem 0;
}
.revision-aviso a {
    color: var(--color-navy-strong);
    text-decoration: underline;
}
.revision-leyenda {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-soft);
}
.revision-marca {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    color: var(--color-white);
    background: var(--color-slate);
    white-space: nowrap;
}
.revision-marca--nuevo { background: var(--color-danger); }
.revision-marca--portal,
.revision-marca--vigencia { background: var(--color-warning); color: var(--color-navy-strong); }
.revision-cuenta {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-warning);
    color: var(--color-navy-strong);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.revision-nota {
    border-left: 4px solid var(--color-warning);
    background: var(--color-ivory);
    color: var(--color-navy-strong);
    padding: 0.6rem 0.9rem;
    margin: 0.75rem 0;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.925rem;
}
.revision-nota--nuevo { border-left-color: var(--color-danger); }
.campo-revisar {
    border-left: 4px solid var(--color-warning);
    padding-left: 0.75rem;
}
.campo-revisar--nuevo { border-left-color: var(--color-danger); }
/* Va bajo el campo, sobre el fondo de la pagina: en la consola sigue al tema; en el
   sitio publico (que no carga los tokens --portal-*) toma el gris de siempre. */
.revision-detalle {
    font-size: 0.85rem;
    color: var(--portal-muted, var(--color-text-soft));
    margin: 0.15rem 0 0.35rem;
}