/* ============================================================
   PeakShot — Sistema de interfaz interna (dirección "Mesa de luz")

   Las primitivas que comparten todas las páginas privadas. El lenguaje
   sale de la landing (Pages/Index.cshtml):
     · esquinas a cero — la landing no tiene un solo border-radius
     · placas pegadas con 2px de mortero, no tarjetas con gutter
     · filete de 2px a la izquierda de cada placa
     · etiquetas de sección con una línea que se extiende
     · numerales condensados a peso 800 con interletrado negativo
     · Instrument Serif cursiva morada como único acento emocional
     · suelo fotográfico oscurecido con grano y viñeta

   Carga después de peakshot-theme.css y antes del CSS de cada página.
   Los tokens de color viven en el tema; acá viven las escalas y las piezas.

   Convención: `ps-` = primitiva compartida. Un prefijo de página
   (`pd-`, `me-`, …) es para lo que solo existe en esa pantalla.
   ============================================================ */

:root {
    /* Mortero: la única separación entre placas */
    --ps-mortar: 2px;

    /* Escala tipográfica — el cuerpo y el apoyo NO encogen en móvil */
    --ps-fs-figure:    clamp(3.5rem, 8vw, 7.375rem);
    --ps-fs-serif:     clamp(1.5625rem, 3vw, 2.375rem);
    --ps-fs-display:   clamp(2.125rem, 4.5vw, 3.625rem);
    --ps-fs-figure-sm: clamp(1.625rem, 2.6vw, 2.125rem);
    --ps-fs-title:     clamp(1.25rem, 2vw, 1.625rem);
    --ps-fs-body:      0.9375rem;
    --ps-fs-support:   0.8125rem;
    --ps-fs-label:     0.6875rem;

    /* Controles: ningún objetivo táctil baja de 44px */
    --ps-h-control: 44px;
    --ps-h-control-sm: 38px;

    /* Márgenes de página: 48 / 24 / 16 */
    --ps-pad-x: 16px;
}
@media (min-width: 768px)  { :root { --ps-pad-x: 28px; } }
@media (min-width: 1200px) { :root { --ps-pad-x: 48px; } }

/* ============================================================
   PÁGINA
   ============================================================ */
.ps-page { padding: 0 var(--ps-pad-x) 56px; }

.ps-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 32px 0 24px;
}
.ps-page__header h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--ps-fs-display);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
}
/* Un título no necesita ilustración */
.ps-page__header h1 i,
.ps-page__header h1 .bi { display: none; }
.ps-page__header h1 em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.8em;
    color: var(--ice);
}

/* ============================================================
   ETIQUETA DE SECCIÓN — el marcador de la landing
   ============================================================ */
.ps-slab {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ice);
}
.ps-slab::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
    max-width: 80px;
}
.ps-slab--accent { color: var(--accent); }
.ps-slab--muted  { color: var(--muted); }

/* ============================================================
   PLACA — suelo fotográfico a sangre
   ============================================================ */
.ps-plate {
    position: relative;
    background: var(--charcoal);
    overflow: hidden;
    /* Rompe el padding del contenedor: la placa va de borde a borde */
    margin: 0 calc(-1 * var(--ps-pad-x));
    padding: 40px var(--ps-pad-x) 32px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.ps-plate::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
/* Viñeta: hunde la portada del evento cuando haya una de fondo, igual que .hero-bg */
.ps-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 80% at 50% 45%, rgba(59, 51, 128, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 95% 85% at 50% 50%, transparent 25%, rgba(10, 10, 15, 0.75) 100%);
}
.ps-plate > * { position: relative; z-index: 2; }

/* ---- Placa con foto de fondo ----
   Tratamiento tomado de .hero-bg de la landing, NO de .banner-divider: el
   divisor no lleva texto encima y usa un velo suave, pero acá van la cifra y
   los cuatro tramos del recorrido. El hero resuelve justo ese caso —
   aclara y desatura la foto, y encima pone un negro al 84%. */
.ps-plate > .ps-plate__photo,
.ps-band > .ps-plate__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    filter: brightness(1.05) contrast(1.1) saturate(0.55);
}
.ps-plate--photo { background: var(--black); }
/* ::before sigue siendo solo el grano (opacity .06); subirlo lo volvería ruido
   opaco. El velo plano se apila como última capa de ::after — las capas de
   background se pintan de arriba hacia abajo, así que va debajo de los
   desvanecidos de borde y encima de la foto. */
.ps-plate--photo::after {
    background:
        linear-gradient(to bottom, var(--black) 0%, rgba(10, 10, 15, 0.6) 10%, transparent 30%),
        linear-gradient(to top,    var(--black) 0%, rgba(10, 10, 15, 0.7) 12%, transparent 32%),
        linear-gradient(to right,  rgba(10, 10, 15, 0.5) 0%, transparent 22%),
        linear-gradient(to left,   rgba(10, 10, 15, 0.5) 0%, transparent 22%),
        radial-gradient(ellipse 95% 85% at 50% 50%, transparent 30%, rgba(10, 10, 15, 0.45) 100%),
        linear-gradient(rgba(10, 10, 15, 0.84), rgba(10, 10, 15, 0.84));
}

.ps-plate__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.ps-plate__headline { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ps-plate__figure {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--ps-fs-figure);
    line-height: 0.82;
    letter-spacing: -0.025em;
    color: var(--white);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.ps-plate__figure small {
    font-family: var(--font-display);
    font-size: 0.22em;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-left: 12px;
}
.ps-plate__serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--ps-fs-serif);
    line-height: 1.15;
    color: var(--ice);
    margin: 0;
}
.ps-plate__countdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
    padding-bottom: 10px;
    flex-shrink: 0;
}
.ps-plate__countdown-label {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.ps-plate__countdown-value {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.875rem);
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.ps-plate__alert {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid rgba(250, 173, 20, 0.4);
    background: rgba(250, 173, 20, 0.07);
    color: var(--white);
    font-size: var(--ps-fs-body);
}
.ps-plate__alert > span { flex: 1 1 260px; }

@media (max-width: 767px) {
    .ps-plate { padding: 30px var(--ps-pad-x) 26px; gap: 26px; }
    .ps-plate__head { align-items: flex-start; flex-direction: column; gap: 16px; }
    .ps-plate__countdown {
        text-align: left;
        padding-bottom: 0;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }
    .ps-plate__alert .ps-btn { width: 100%; height: 50px; }
}

/* ============================================================
   EL RECORRIDO DE LA PLATA
   Los cuatro estados que el fotógrafo ve en Panel y en Ingresos:
   En retención → Disponible → En transferencia → Pagado.
   El ancho de cada tramo es su parte del dinero en circulación, así que
   "dónde está mi plata" se lee sin comparar cifras. El flex-grow lo escribe
   el servidor con el monto real (nunca negativo: ver MoneyFlow.PayableNow).
   ============================================================ */
.ps-flow { display: flex; flex-direction: column; gap: 14px; }
.ps-flow__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ps-flow__title {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}
.ps-flow__note { font-size: var(--ps-fs-support); color: var(--muted); }

.ps-flow__stages { display: flex; align-items: stretch; gap: var(--ps-mortar); }
.ps-flow__stage {
    flex-basis: 0;
    min-width: 176px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ps-flow__bar { height: 14px; margin-bottom: 7px; background: var(--border); }
.ps-flow__stage--held    .ps-flow__bar { background: var(--ice-dim); }
.ps-flow__stage--avail   .ps-flow__bar { background: var(--ice); }
.ps-flow__stage--transit .ps-flow__bar { background: var(--ice-bright); }
.ps-flow__stage--paid    .ps-flow__bar { background: var(--accent); }

.ps-flow__label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ice-bright);
}
.ps-flow__stage--paid .ps-flow__label { color: var(--accent); }
.ps-flow__amount {
    font-family: var(--font-display);
    font-size: var(--ps-fs-figure-sm);
    font-weight: 800;
    line-height: 1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.ps-flow__stage--paid .ps-flow__amount { color: var(--accent); }
.ps-flow__stage--debt .ps-flow__bar { background: var(--danger); }
.ps-flow__stage--debt .ps-flow__label,
.ps-flow__stage--debt .ps-flow__amount { color: var(--danger); }
.ps-flow__hint { font-size: var(--ps-fs-support); color: var(--muted); line-height: 1.5; }

/* "Pagado" queda fuera de la proporción — es archivo histórico, no un lugar
   donde la plata espera. En la barra se comería el resto. */
.ps-flow__split { width: 1px; background: var(--border); margin: 0 26px; flex-shrink: 0; }
.ps-flow__stage--paid { flex: 0 0 232px; }

@media (max-width: 1199px) {
    .ps-flow__stages { flex-wrap: wrap; }
    .ps-flow__stage { flex: 1 1 calc(50% - var(--ps-mortar)); min-width: 220px; }
    .ps-flow__stage--paid { flex: 1 1 calc(50% - var(--ps-mortar)); }
    .ps-flow__split { display: none; }
}
@media (max-width: 767px) {
    /* Las estaciones apilan; el filete de color las liga a su tramo */
    .ps-flow__stages { flex-direction: column; gap: var(--ps-mortar); }
    .ps-flow__stage {
        flex: none;
        min-width: 0;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 12px;
        background: rgba(0, 0, 0, .28);
        border-left: 3px solid var(--border);
        padding: 14px 16px;
    }
    .ps-flow__stage--held    { border-left-color: var(--ice-dim); }
    .ps-flow__stage--avail   { border-left-color: var(--ice); }
    .ps-flow__stage--transit { border-left-color: var(--ice-bright); }
    .ps-flow__stage--paid    { border-left-color: var(--accent); }
    .ps-flow__stage--debt    { border-left-color: var(--danger); }
    .ps-flow__bar { display: none; }
    .ps-flow__label { flex: 1 1 auto; }
    .ps-flow__amount { flex: 0 0 auto; }
    .ps-flow__hint { flex: 1 1 100%; margin-top: 4px; }
}

/* ============================================================
   BANDA — el divisor fotográfico de la landing, a escala de app

   Marca el corte entre la mitad de datos y la mitad de trabajo. La landing
   usa 480px porque es una página de scroll; acá 150 alcanza para que respire
   sin robarle sitio a la información. Comparte el tratamiento de .ps-plate.
   ============================================================ */
.ps-band {
    position: relative;
    overflow: hidden;
    background: var(--black);
    min-height: 150px;
    margin: 0 calc(-1 * var(--ps-pad-x)) 20px;
    padding: 24px var(--ps-pad-x);
    display: flex;
    align-items: flex-end;
}
.ps-band__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ps-band .ps-plate__photo { object-position: center 45%; }
.ps-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--black) 0%, rgba(10, 10, 15, 0.55) 14%, transparent 42%),
        linear-gradient(to top,    var(--black) 0%, rgba(10, 10, 15, 0.8) 22%, transparent 62%),
        linear-gradient(to right,  rgba(10, 10, 15, 0.5) 0%, transparent 22%),
        linear-gradient(to left,   rgba(10, 10, 15, 0.5) 0%, transparent 22%),
        linear-gradient(rgba(10, 10, 15, 0.6), rgba(10, 10, 15, 0.6));
}
/* Variante cabecera: la banda hace de encabezado de página, no de divisor,
   así que carga kicker + título + bajada y arranca pegada al navbar. */
.ps-band--head {
    min-height: 210px;
    padding-top: 40px;
    padding-bottom: 30px;
    margin-bottom: 28px;
}
.ps-band--head .ps-band__inner { align-items: flex-end; }

@media (max-width: 767px) {
    .ps-band { min-height: 120px; padding: 20px var(--ps-pad-x); }
    .ps-band--head { min-height: 170px; padding-top: 28px; padding-bottom: 24px; }
    .ps-band--head .ps-band__inner { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   PASOS — el recorrido de la compra (/Cart → /Cart/Checkout)

   Tres columnas iguales con un filete de 2px arriba que se pinta según el
   estado: la barra de progreso y el rótulo son la misma pieza. Es retícula y
   no flex-wrap a propósito — con etiquetas de largo distinto, envolver deja
   dos arriba y una suelta abajo, y el orden se lee mal justo donde el orden es
   toda la información.

   Los pasos ya cumplidos son enlaces para poder volver; el actual y los que
   faltan, no.
   ============================================================ */
.ps-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ps-mortar);
    margin: 0 0 28px;
    padding: 0;
}
.ps-step { min-width: 0; }
.ps-step__body {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 11px 12px 0 0;
    border-top: 2px solid var(--border);
    text-decoration: none !important;
    /* El filete tiene que llegar al borde de su columna aunque la etiqueta sea
       corta, o el progreso se vería a tramos de largo distinto. */
    width: 100%;
}
.ps-step__num {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.ps-step__label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--muted);
    min-width: 0;
}

.ps-step.is-done .ps-step__body { border-top-color: var(--accent); }
.ps-step.is-done .ps-step__num { color: var(--accent); }
.ps-step.is-done .ps-step__label { color: var(--text-secondary); }

.ps-step.is-current .ps-step__body { border-top-color: var(--ice); }
.ps-step.is-current .ps-step__num,
.ps-step.is-current .ps-step__label { color: var(--white); }

/* Solo los pasos cumplidos son <a>; el resto son <span> y no reaccionan. */
a.ps-step__body:hover .ps-step__label,
a.ps-step__body:hover .ps-step__num { color: var(--ice-bright); }
a.ps-step__body:hover { border-top-color: var(--ice-bright); }
a.ps-step__body:focus-visible { outline: 2px solid var(--ice-bright); outline-offset: 3px; }

@media (max-width: 767px) {
    /* Se apila número sobre etiqueta: en tres columnas de ~100px, "Descargas
       al instante" al lado del número deja una sola palabra por renglón. */
    .ps-steps { margin-bottom: 22px; }
    .ps-step__body {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        padding: 9px 8px 0 0;
    }
    .ps-step__label { letter-spacing: 0.08em; }
}

/* ============================================================
   ESTADO — la etiqueta de en qué situación está algo

   Sin píldoras redondeadas: filete de 2px a la izquierda, la firma del sistema,
   y el color dice el resto. La comparten Mis órdenes y el detalle de la orden.
   ============================================================ */
/* Sin píldoras redondeadas: un filete de 2px a la izquierda, la firma del
   sistema, y el color hace el resto. */
.ps-state {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-left: 2px solid var(--border);
    background: rgba(0, 0, 0, .3);
    color: var(--muted);
    white-space: nowrap;
}
.ps-state.is-ok      { border-left-color: var(--accent);  color: var(--accent); }
.ps-state.is-waiting { border-left-color: var(--warning); color: var(--warning); }
.ps-state.is-bad     { border-left-color: var(--danger);  color: var(--danger); }
.ps-state.is-muted   { border-left-color: var(--border-light); color: var(--muted); }

/* ============================================================
   MARCAS DE MEDIO DE PAGO

   El logotipo es de un tercero y sus guías de marca mandan: no se recolorea,
   no se deforma y necesita aire alrededor. Por eso se limita la ALTURA y el
   ancho va libre —así la proporción se respeta sea cual sea el archivo que se
   suba, sin que haya que saber sus dimensiones de antemano.
   ============================================================ */
.ps-paymark {
    display: block;
    height: 26px;
    width: auto;
    max-width: 100%;
    /* Aire mínimo alrededor del logotipo, como pide la diagramación. */
    margin: 2px 0;
}
.ps-paymark--sm { height: 18px; }
.ps-paymark--lg { height: 34px; }

.ps-paymark-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ps-paymark-row__label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Plancha clara, por si la variante disponible es la de fondo claro: sobre el
   casi negro del sitio, un logotipo a color pleno puede quedar ilegible.
   Se aplica solo si hace falta — ver el README del directorio. */
.ps-paymark-plate {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    padding: 7px 12px;
}

@media (max-width: 767px) {
    .ps-paymark    { height: 22px; }
    .ps-paymark--lg { height: 28px; }
}

/* ============================================================
   MOSAICO — placas pegadas con mortero de 2px
   ============================================================ */
.ps-mosaic {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ps-mortar);
    margin: var(--ps-mortar) calc(-1 * var(--ps-pad-x)) 0;
}
.ps-mosaic > * { flex: 1 1 220px; min-width: 0; }

/* Una placa suelta del mosaico */
.ps-tile {
    background: var(--panel);
    border-left: 2px solid var(--border);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ps-tile--ice     { border-left-color: var(--ice); }
.ps-tile--accent  { border-left-color: var(--accent); }
.ps-tile--warning { border-left-color: var(--warning); }
.ps-tile--danger  { border-left-color: var(--danger); }

.ps-tile__figure {
    font-family: var(--font-display);
    font-size: var(--ps-fs-figure-sm);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--white);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.ps-tile__label {
    font-family: var(--font-display);
    font-size: var(--ps-fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.ps-tile__hint { font-size: var(--ps-fs-support); color: var(--muted); line-height: 1.5; }

/* ============================================================
   BOTONES
   ============================================================ */
.ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--ps-h-control);
    padding: 0 24px;
    background: var(--ice);
    color: var(--black) !important;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ps-btn:hover { background: var(--ice-bright); }
.ps-btn:focus-visible { outline: 2px solid var(--ice-bright); outline-offset: 2px; }

.ps-btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted) !important;
    letter-spacing: 0.12em;
}
.ps-btn--ghost:hover { background: transparent; border-color: var(--ice); color: var(--white) !important; }

/* ============================================================
   AVISOS — un solo componente para banners de contexto y de alerta
   ============================================================ */
/* El aviso era una caja de borde fino sobre transparente: se leía como un
   control de formulario, no como una superficie del sistema. Ahora es una
   placa con el filete de 2px a la izquierda —la firma del lenguaje— y un
   fondo tintado sólido, no una transparencia. Los tonos son mezclas de
   --panel con cada acento al 14%, así que se ven como superficie propia. */
.ps-notice {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: var(--panel);
    border: 0;
    border-left: 2px solid var(--border);
    /* Arriba también: el mosaico que suele ir encima cierra con margen 0,
       y sin esto los dos bordes quedan pegados formando una línea doble. */
    margin: 24px 0;
    text-decoration: none;
}
.ps-notice--positive { background: #183129; border-left-color: var(--accent); }
.ps-notice--warning  { background: #382D1E; border-left-color: var(--warning); }
.ps-notice--danger   { background: #381F26; border-left-color: var(--danger); }
.ps-notice--info     { background: #26243B; border-left-color: var(--ice); }

.ps-notice__body { flex: 1 1 auto; min-width: 0; }
.ps-notice__text {
    font-size: var(--ps-fs-body);
    color: var(--white);
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.5;
    align-self: center;
}
.ps-notice__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15em;
    font-variant-numeric: tabular-nums;
}
.ps-notice__action {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
a.ps-notice:hover { border-color: var(--border-light); }

/* El ícono va suelto, sin el cuadrito teñido de antes. Los Bootstrap Icons
   traen vertical-align: -.125em, que dentro de un flex centrado desalinea
   el glifo respecto del texto. */
/* El ícono gana su propia columna, separada por un filete: le da anatomía al
   aviso en vez de dejarlo como una fila plana de ícono y texto. */
.ps-notice > i,
.ps-notice > .bi,
.ps-notice__icon {
    flex: 0 0 auto;
    background: transparent;
    color: var(--muted);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    align-self: stretch;
    min-width: 26px;
    padding-right: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.ps-notice > i::before,
.ps-notice > .bi::before,
.ps-notice__icon .bi::before { vertical-align: 0; }

.ps-notice--positive > i, .ps-notice--positive .ps-notice__icon,
.ps-notice--positive .ps-notice__value { color: var(--accent); }
.ps-notice--warning > i, .ps-notice--warning .ps-notice__icon,
.ps-notice--warning .ps-notice__value { color: var(--warning); }
.ps-notice--danger > i, .ps-notice--danger .ps-notice__icon,
.ps-notice--danger .ps-notice__value,
.ps-notice--danger .ps-notice__action { color: var(--danger); }
.ps-notice--info > i, .ps-notice--info .ps-notice__icon { color: var(--ice-bright); }

/* ============================================================
   ESTADO — punto de 6px + texto, nunca una píldora rellena
   ============================================================ */
.ps-dot {
    width: 6px;
    height: 6px;
    background: var(--muted);
    flex-shrink: 0;
    display: inline-block;
}
.ps-dot--ok      { background: var(--accent); }
.ps-dot--warning { background: var(--warning); }
.ps-dot--danger  { background: var(--danger); }

/* ============================================================
   Overrides del tema — dos niveles.

   .ps-app  va en el <main> del layout, así que alcanza a TODA página
            interna. Solo el lenguaje visual: esquinas a cero, superficies
            planas, pestañas subrayadas. Nada que reacomode un layout.
            La landing usa Layout = null, así que no la toca.

   .ps-page se pone en páginas ya convertidas a D por completo, y agrega
            los márgenes y las alturas de control del sistema.

   Cargan después de peakshot-theme.css, así que ganan sin tocarlo (el tema
   sirve también al sitio público, que sí usa radios).
   ============================================================ */

/* ---- Nivel 1: toda página interna ---- */
.ps-app .btn,
.ps-app .card,
.ps-app .form-control,
.ps-app .form-select,
.ps-app .form-check-input,
.ps-app .alert,
.ps-app .badge,
.ps-app .modal-content,
.ps-app .dropdown-menu,
.ps-app .input-group-text,
.ps-app .list-group-item,
.ps-app .table-responsive,
.ps-app .progress { border-radius: 0; }

/* min-height y no height: hay botones de dos líneas y celdas de tabla
   que se romperían con una altura fija. */
.ps-app .btn { min-height: var(--ps-h-control); }
.ps-app .btn-sm { min-height: var(--ps-h-control-sm); }
.ps-app .card { background: var(--panel); border: 0; border-left: 2px solid var(--border); }
.ps-app hr { border-color: var(--border); opacity: 1; }

/* El acento de la izquierda reemplaza a la franja de color de .alert */
.ps-app .alert { border-left-width: 2px; }

/* Un título de página no necesita ilustración */
.ps-app h1 > i.bi:first-child,
.ps-app h1 > .bi:first-child { display: none; }

/* El botón interno del input de archivo ("Examinar…"). Bootstrap lo pinta con
   --bs-tertiary-bg y el texto con --bs-body-color; acá además lo alineamos al
   lenguaje: cuadrado, versalitas condensadas y un filete que lo separa. Los
   márgenes negativos compensan el padding 10/14 que el tema le da al control. */
.ps-app .form-control::file-selector-button {
    background: var(--panel);
    color: var(--white);
    border: 0;
    border-inline-end: 1px solid var(--border);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 16px;
    margin: -10px -14px;
    margin-inline-end: 14px;
    transition: background 0.15s ease;
}
.ps-app .form-control:hover::file-selector-button { background: var(--border); }

/* Pestañas: subrayado, no cápsulas con borde */
.ps-app .nav-tabs { border-bottom: 1px solid var(--border); gap: 26px; margin-bottom: 24px; }
.ps-app .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    padding: 0 0 12px;
    margin-bottom: -1px;
    background: transparent;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted) !important;
}
.ps-app .nav-tabs .nav-link:hover { color: var(--white) !important; }
.ps-app .nav-tabs .nav-link.active {
    color: var(--white) !important;
    border-bottom: 2px solid var(--ice);
    background: transparent;
}

/* Píldoras de Bootstrap: en este sistema el estado es punto + texto */
.ps-app .rounded-pill,
.ps-app .rounded,
.ps-app .rounded-3,
.ps-app .rounded-circle:not(img) { border-radius: 0 !important; }

/* ---- Nivel 2: páginas ya convertidas ---- */
.ps-page .btn { height: var(--ps-h-control); }
.ps-page .btn-sm { height: var(--ps-h-control-sm); }
.ps-page hr { margin: 32px 0; }