/* =============================================================
   PIL7 — Brand Stylesheet (Blazor / MAUI Hybrid)
   Ported from pil7 web v25 Site.css
   ============================================================= */

/* --- Brand Color Palette --- */
:root {
    --pil7-primary:      #1A83BC;
    --pil7-primary-dark: #1568A0;
    --pil7-primary-deep: #1E354F;
    --pil7-accent:       #3285B1;
    --pil7-text:         #1e293b;
    --pil7-text-muted:   #64748b;
    --pil7-bg:           #ffffff;
    --pil7-bg-alt:       #EBF5FC;
    --pil7-border:       #B3D9EF;
    --pil7-link:         #1568A0;
    --pil7-link-hover:   #1E354F;
    --pil7-navbar:       #1568A0;
    --pil7-light-blue:   #D6EAF8;
}

/* --- Base Typography --- */
html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--pil7-text);
    background-color: var(--pil7-bg);
    -webkit-font-smoothing: antialiased;
    /* Android WebView: desactiva el "font boosting"/auto-inflado de texto para
       que el tamaño lo controle SOLO el selector de tamaño de texto de pil7 y no
       se pierda ancho horizontal por texto inflado automáticamente. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--pil7-primary-deep);
    margin-top: 0;
    margin-bottom: 0.65em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.3rem; }

p {
    margin-bottom: 1.1rem;
    color: var(--pil7-text);
}

a, .btn-link {
    color: var(--pil7-link);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--pil7-link-hover);
    text-decoration: underline;
}

h1:focus {
    outline: none;
}

/* --- Buttons --- */
.btn-primary,
.btn-pil7 {
    background-color: var(--pil7-primary);
    border-color: var(--pil7-primary);
    color: #ffffff;
    font-weight: 600;
    padding: 0.55rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: background 0.18s, border-color 0.18s;
}

.btn-primary:hover,
.btn-pil7:hover {
    background-color: var(--pil7-primary-dark);
    border-color: var(--pil7-primary-dark);
    color: #ffffff;
}

.btn-outline-pil7 {
    border: 2px solid var(--pil7-primary);
    color: var(--pil7-primary);
    background: transparent;
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    border-radius: 6px;
    font-size: 1rem;
    display: inline-block;
    transition: background 0.18s, color 0.18s;
}

.btn-outline-pil7:hover {
    background: var(--pil7-primary);
    color: #ffffff;
    text-decoration: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(26, 131, 188, 0.45);
}

/* --- Forms --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
    max-width: 360px;
    font-size: 1rem;
    padding: 0.45rem 0.8rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    color: var(--pil7-text);
    background: #fff;
    transition: border-color 0.18s, box-shadow 0.18s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    border-color: var(--pil7-primary);
    box-shadow: 0 0 0 3px rgba(26, 131, 188, 0.18);
    outline: none;
}

/* --- Content --- */
.content {
    padding-top: 1.1rem;
}

/* --- Feature Cards --- */
.pil7-feature-card {
    background: #ffffff;
    border: 1px solid var(--pil7-border);
    border-radius: 10px;
    padding: 2rem 1.75rem;
    height: 100%;
    box-shadow: 0 2px 14px rgba(26, 131, 188, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}

.pil7-feature-card:hover {
    box-shadow: 0 6px 28px rgba(26, 131, 188, 0.16);
    transform: translateY(-3px);
}

.pil7-feature-card h3 {
    color: var(--pil7-primary-dark);
    font-size: 1.18rem;
}

.pil7-feature-card p {
    color: var(--pil7-text-muted);
    font-size: 0.97rem;
    line-height: 1.75;
}

/* --- Section Styles --- */
.pil7-section-alt {
    background-color: var(--pil7-bg-alt);
    border: 1px solid var(--pil7-border);
    border-radius: 10px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    /* Nombres de medicamentos o referencias largas nunca deben provocar
       scroll horizontal: se parten cuando no caben en la línea. */
    overflow-wrap: break-word;
}

.pil7-section-alt h2 {
    color: var(--pil7-primary-dark);
}

/* --- Grupos visibles solo en entornos de test (nunca en producción) --- */
.pil7-testonly-group {
    background: #fdecea;
    border: 1px dashed #e74c3c;
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.pil7-testonly-group > .pil7-testonly-label {
    display: block;
    margin-bottom: 0.45rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: #f8d7da;
    color: #842029;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.pil7-page-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pil7-page-hero-lead {
    color: var(--pil7-text-muted);
    max-width: 720px;
    margin: 0 auto;
}

.pil7-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity .3s ease;
}

.pil7-progress-overlay.active {
    opacity: 1;
}

.pil7-progress-bar-track {
    width: 320px;
    max-width: 90vw;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.pil7-progress-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#0066CC,#0099FF);
    border-radius: 4px;
    transition: width .4s ease;
}

/* Aviso central con el resultado de una acción; difumina el fondo para centrar la
   atención en el mensaje y un toque en cualquier punto lo cierra al instante. */
.pil7-progress-result-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(248, 251, 255, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}

/* WebViews sin soporte de backdrop-filter: velo más opaco para mantener el foco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pil7-progress-result-overlay {
        background: rgba(248, 251, 255, 0.85);
    }
}

.pil7-progress-result-overlay.active {
    opacity: 1;
}

.pil7-progress-result-box {
    max-width: min(430px, 92vw);
    background: #fff;
    border: 1px solid #cfe2ff;
    border-left: 5px solid #198754;
    border-radius: 14px;
    box-shadow: 0 .75rem 2rem rgba(22, 50, 78, .22);
    padding: .9rem 1.15rem;
}

.pil7-progress-result-error .pil7-progress-result-box {
    border-left-color: #dc3545;
}

.pil7-progress-result-title {
    font-weight: 700;
    color: #198754;
    margin-bottom: .15rem;
}

.pil7-progress-result-error .pil7-progress-result-title {
    color: #b02a37;
}

.pil7-progress-result-text {
    color: #22384f;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Diálogo de confirmación propio (sustituye al confirm() nativo del navegador). */
.pil7-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(34, 56, 79, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pil7-confirm-overlay {
        background: rgba(34, 56, 79, 0.55);
    }
}

.pil7-confirm-overlay.active {
    opacity: 1;
}

.pil7-confirm-box {
    max-width: min(430px, 92vw);
    width: 100%;
    background: #fff;
    border: 1px solid #cfe2ff;
    border-radius: 14px;
    box-shadow: 0 .75rem 2rem rgba(22, 50, 78, .28);
    padding: 1.15rem 1.25rem;
}

.pil7-confirm-title {
    font-weight: 700;
    color: #22384f;
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.pil7-confirm-text {
    color: #22384f;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.pil7-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
}

.pil7-progress-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.pil7-progress-hint {
    font-size: .9rem;
    color: #666;
    max-width: 360px;
    text-align: center;
}

.pil7-progress-elapsed {
    font-size: .85rem;
    color: #999;
}

.pil7-home-summary-title {
    font-weight: 600;
    cursor: pointer;
}

.pil7-home-notification-item {
    padding: 0.85rem 1rem;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.55;
}

.pil7-home-signal-card {
    padding: 1rem;
    border: 1px solid #dbe7f6;
    border-radius: 14px;
    background: #fff;
}

.pil7-home-onboarding-highlight {
    background: #fff8e1;
    border-color: #f6d58a;
}

/* Aviso de resumen incompleto: los bloques están vacíos porque la carga falló,
   no porque el usuario no tenga nada. Comparte el amarillo del bloque destacado
   de onboarding para leerse como «atención», no como error rojo de la app. */
.pil7-home-load-failed {
    background: #fff8e1;
    border-color: #f6d58a;
}

.pil7-home-traffic-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #fbfdff;
}

.pil7-home-traffic-card-title {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #eaf3ff;
    color: var(--pil7-primary-deep);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(26, 131, 188, 0.16);
}

.pil7-home-traffic-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 14px;
}

.pil7-home-traffic-dot.verde { background: #2ecc71; }
.pil7-home-traffic-dot.amarillo { background: #f39c12; }
.pil7-home-traffic-dot.rojo { background: #e74c3c; }
.pil7-home-traffic-dot.gris { background: #6c757d; }

.pil7-notif-alert {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    box-shadow: 0 0.35rem 0.9rem rgba(13, 110, 253, .10);
}

.pil7-notif-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.pil7-notif-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pil7-notif-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #d7e8ff;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.92rem;
    color: #35506d;
}

.pil7-notif-toolbar-meta {
    font-size: 0.9rem;
    color: var(--pil7-text-muted);
}

.pil7-notif-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.pil7-notif-date-input {
    color-scheme: light;
    accent-color: var(--pil7-primary);
    color: var(--pil7-text);
    background-color: #fff;
}

.pil7-notif-filter-actions .btn {
    min-width: 12rem;
    justify-content: center;
}

.pil7-notif-empty-state {
    background: #fff;
    border: 1px dashed #c9def6;
    border-radius: 14px;
    padding: 2rem 1.5rem;
}

.pil7-notif-empty-state h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Aviso de bandeja incompleta: la lista está vacía porque la carga falló, no
   porque el usuario no tenga notificaciones. Se distingue del estado vacío
   normal (azul, discreto) para que no pueda confundirse con «no tienes nada». */
.pil7-notif-load-failed {
    background: #fff8e1;
    border: 1px solid #f6d58a;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.pil7-notif-item {
    background: #fff;
    border: 1px solid #d7e8ff;
    border-radius: 16px;
    box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .08);
    padding: 1.25rem;
}

.pil7-notif-item + .pil7-notif-item {
    margin-top: 1.25rem;
}

.pil7-notif-item-unread {
    border-left-color: #0d6efd;
    box-shadow: 0 .35rem .9rem rgba(13, 110, 253, .12);
}

.pil7-notif-item-read {
    background: #fbfdff;
    border-left-color: #cfe2ff;
}

.pil7-notif-summary-box {
    background: #f8fbff;
    border: 1px solid #cfe2ff;
    border-radius: 12px;
    padding: 1rem;
}

.pil7-notif-group + .pil7-notif-group {
    margin-top: 2rem;
}

.pil7-notif-group-title {
    color: #1F4E79;
    font-weight: 700;
    margin-bottom: .4rem;
}

.pil7-notif-group-copy {
    color: #6c757d;
    margin-bottom: 1rem;
}

.pil7-caregiver-context-box {
    background: #fff8cc;
    border-color: #ffe58f;
    color: #5c4400;
}

.pil7-notif-icon {
    border-radius: 10px;
    object-fit: cover;
}

.pil7-notif-image {
    max-width: 100%;
    border-radius: 12px;
}

.pil7-debug-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--pil7-primary-dark);
}

.pil7-notif-panel-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--pil7-primary-dark);
    list-style: none;
}

.pil7-fcm-debug-log {
    min-height: 26rem;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.pil7-plan-ticket-box {
    background: #f8fbff;
    border: 1px solid #d7e8ff;
    border-radius: 12px;
    padding: 1rem;
}

.pil7-plan-ticket-detail {
    margin-top: 0.75rem;
}

.pil7-plan-reply-box {
    background: #ffffff;
    border: 1px solid #cfe2ff;
    border-radius: 12px;
    padding: 1rem;
}

.pil7-special-caregiver-note {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
}

.pil7-ticket-read-summary .pil7-ticket-read-ok {
    color: #198754;
    font-weight: 700;
}

.pil7-ticket-read-summary .pil7-ticket-read-pending {
    color: #dc3545;
    font-weight: 700;
}

.pil7-ticket-read-ok {
    color: #198754;
    font-weight: 600;
}

.pil7-ticket-read-pending {
    color: #9b4943;
}

@media (max-width: 767.98px) {
    .pil7-notif-alert {
        position: static;
    }

    .pil7-progress-title {
        font-size: 1.1rem;
        padding: 0 1rem;
    }

    .pil7-progress-hint {
        padding: 0 1rem;
    }

    .pil7-plan-ticket-box,
    .pil7-plan-reply-box,
    .pil7-notif-summary-box,
    .pil7-notif-item {
        padding: 1rem;
    }

    .pil7-notif-filter-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .pil7-notif-filter-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .pil7-notif-page .pil7-ticket-thread {
        gap: 0.65rem;
    }

    .pil7-notif-page .pil7-ticket-thread-collapse summary {
        font-size: 0.88em;
    }

    .pil7-notif-page .pil7-ticket-message {
        padding: 0.7rem 0.75rem;
        border-radius: 12px;
    }

    .pil7-notif-page .pil7-ticket-message-body {
        font-size: 1rem;
        line-height: 1.55;
        padding: 0.45rem 0.6rem;
    }

    .pil7-notif-page .pil7-ticket-message-meta {
        margin-top: 0.35rem;
    }

    .pil7-notif-page .pil7-ticket-read-inline {
        gap: 0.15rem;
        margin-top: 0.4rem;
        padding-top: 0.35rem;
    }
}

/* --- Patient Dashboard Shared Cards / History / Semaforos --- */
.pil7-simple-card {
    background: #fff;
    border: 1px solid var(--pil7-border);
    border-radius: 8px;
    padding: 1rem;
}

.pil7-history-panel[open] > summary > .btn {
    background: #f8f9fa;
    color: var(--pil7-primary);
    border-color: var(--pil7-primary);
}

.pil7-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.pil7-history-summary::marker {
    content: "";
}

.pil7-history-card {
    background: #fff;
    border: 1px solid var(--pil7-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.pil7-history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
}

/* ── Tablas de comparación (planes de medicación / tickets de dispensación):
   en móvil cada fila se apila como tarjeta para evitar el scroll horizontal.
   El nombre ocupa la primera línea; el resto de datos se reparte en columnas
   compactas (Inicio / Fin / Cambios…) que fluyen en la misma fila. ── */
@media (max-width: 767.98px) {
    .pil7-compare-table,
    .pil7-compare-table tbody {
        display: block;
        width: 100%;
        border: 0;
    }

    .pil7-compare-table thead {
        display: none;
    }

    .pil7-compare-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem 1.4rem;
        background: #fff;
        border: 1px solid var(--pil7-border);
        border-radius: 10px;
        padding: 0.65rem 0.85rem 0.7rem;
        margin-bottom: 0.7rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .pil7-compare-table td {
        display: block;
        width: auto;
        border: 0;
        padding: 0;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    .pil7-compare-table td:first-child {
        flex: 0 0 100%;
        border-bottom: 1px solid var(--pil7-border);
        padding-bottom: 0.4rem;
        margin-bottom: 0.1rem;
    }

    .pil7-compare-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #6c757d;
        margin-bottom: 0.1rem;
    }

    /* La celda de cambios/tipo puede llevar badge + texto largo: que ocupe
       toda la línea si lo necesita, sin forzar el ancho de la tarjeta. */
    .pil7-compare-table td[data-label="Cambios"] {
        flex: 1 1 100%;
    }

    /* Orden en la tarjeta (igual que la comparación de dispensaciones):
       nombre → vigencias juntas → principio activo → cambios/tipo.
       Solo reordena en móvil; en escritorio manda el orden de columnas. */
    .pil7-compare-table td[data-label="Vigencia inicio"] {
        order: 1;
    }

    .pil7-compare-table td[data-label="Vigencia fin"] {
        order: 2;
    }

    .pil7-compare-table td[data-label="Principio activo"] {
        order: 3;
        flex: 1 1 100%;
    }

    .pil7-compare-table td[data-label="Cambios"],
    .pil7-compare-table td[data-label="Tipo"] {
        order: 4;
    }
}

.pil7-ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pil7-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pil7-ticket-thread-collapse {
    margin-top: 0.25rem;
}

.pil7-ticket-thread-collapse summary {
    cursor: pointer;
    color: #1f4e79;
    font-weight: 600;
    font-size: 0.92em;
}

.pil7-ticket-message {
    border-radius: 14px;
    padding: 0.85rem 1rem;
    border: 1px solid #d6e6f7;
    font-size: 0.95rem;
    background: #f8fbff;
}

.pil7-ticket-message-paciente {
    background: #f6fbf7;
    border-color: #cfe7d4;
}

.pil7-ticket-message-farmacia {
    background: #eef5ff;
    border-color: #bfd8fb;
}

.pil7-ticket-message-sistema {
    background: #fff9ee;
    border-color: #f4dfb7;
}

.pil7-ticket-message-meta {
    color: #5c6b7a;
    font-size: 0.88em;
    margin-top: 0.45rem;
}

.pil7-ticket-message > .fw-semibold {
    color: #5c6b7a;
}

.pil7-ticket-message-body {
    color: #16324e;
    font-size: 1.08rem;
    line-height: 1.6;
    font-weight: 600;
    margin-top: 0.35rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #d6e6f7;
    border-left: 4px solid var(--pil7-primary);
}

.pil7-ticket-message-paciente .pil7-ticket-message-body {
    border-color: #cfe7d4;
    border-left-color: #198754;
}

.pil7-ticket-message-farmacia .pil7-ticket-message-body {
    border-color: #bfd8fb;
    border-left-color: #1A83BC;
}

.pil7-ticket-message-sistema .pil7-ticket-message-body {
    border-color: #ecdcb6;
    border-left-color: #d9a62e;
}

.pil7-ticket-read-inline {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.pil7-ticket-read-inline-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.pil7-ticket-read-inline-ok {
    color: #198754;
    font-weight: 600;
    font-size: 0.86em;
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    display: inline-flex;
    align-items: center;
}

.pil7-ticket-read-inline-pending {
    color: #9b4943;
    font-size: 0.86em;
}

/* --- Notificaciones especiales (vista paciente) --- */
.pil7-notif-especial-head {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.pil7-notif-especial-title {
    font-size: 1em;
    font-weight: 700;
    color: #1F4E79;
    margin: 0;
    line-height: 1.35;
}

.pil7-notif-especial-pharmacy {
    font-size: .86rem;
    color: #294d73;
    margin-bottom: .7rem;
    line-height: 1.5;
}

.pil7-notif-especial-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .75rem;
}

.pil7-semaforo-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: #f8f9fa;
    border-left: 5px solid #ccc;
    flex-wrap: wrap;
}

/* Línea de contexto de fecha (sin caja ni monospace: misma tipografía que el
   resto de la página para mantener una jerarquía profesional). */
.pil7-disp-info-bar {
    color: #64748b;
}

.pil7-disp-trip-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pil7-disp-section-title-wrap {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.pil7-disp-section-ticket-label {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #edf2f7;
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.pil7-disp-trip-card {
    border: 1px solid #dbe4f0;
    border-left: 5px solid #dbe4f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    overflow-wrap: break-word;
}

.pil7-disp-trip-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.pil7-disp-trip-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-top: .35rem;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .08);
}

.pil7-disp-trip-kicker {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .35rem;
}

.pil7-disp-trip-number {
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    color: #52627a;
}

.pil7-disp-trip-chip,
.pil7-disp-med-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
}

.pil7-disp-trip-chip {
    padding: .4rem .75rem;
    background: #edf2f7;
    color: #334155;
}

.pil7-disp-trip-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: .2rem;
}

.pil7-disp-trip-subtitle {
    color: #64748b;
    font-size: .92rem;
}

.pil7-disp-trip-side {
    min-width: 170px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: .45rem;
}

.pil7-disp-trip-countdown {
    font-size: 1rem;
    font-weight: 700;
}

.pil7-disp-trip-side-note {
    color: #64748b;
    font-size: .84rem;
}

.pil7-disp-trip-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    padding: 0 1.25rem 1rem 1.25rem;
}

.pil7-disp-metric {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: .85rem 1rem;
}

.pil7-disp-metric-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.pil7-disp-metric-value {
    display: block;
    font-size: .97rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.pil7-disp-metric-hint {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
    color: #64748b;
}

.pil7-disp-trip-banner {
    margin: 0 1.25rem 1rem 1.25rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #f8fbff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
}

.pil7-disp-trip-banner-title {
    font-size: .92rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .15rem;
}

.pil7-disp-trip-banner-text {
    color: #64748b;
    font-size: .86rem;
    margin: 0;
}

.pil7-disp-trip-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .9rem 1.25rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.pil7-disp-trip-toolbar-text {
    font-size: .9rem;
    color: #475569;
}

.pil7-disp-trip-body {
    padding: 1.1rem 1.25rem 1.25rem 1.25rem;
}

.pil7-disp-meds-section + .pil7-disp-meds-section {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px dashed #dbe4f0;
}

.pil7-disp-meds-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
}

.pil7-disp-meds-section-title {
    font-size: .94rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .15rem;
}

.pil7-disp-meds-section-subtitle {
    font-size: .84rem;
    color: #64748b;
}

.pil7-disp-meds-list {
    display: grid;
    gap: .75rem;
}

.pil7-disp-med-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 1rem;
    /* Como item de grid debe poder encoger por debajo de su min-content
       (nombres de medicamento largos) para no desbordar en pantallas estrechas. */
    min-width: 0;
}

.pil7-disp-med-item-highlight {
    background: #f0f7ff;
    border-color: #bfdbfe;
}

/* Medicamento del ticket que no casa con el plan de medicación (resaltado). */
.pil7-disp-med-item-noplan {
    background: #fff7ed;
    border-color: #fdba74;
}

.pil7-disp-noplan-chip {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: #ea580c;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

/* Medicamentos del ticket sin fecha de inicio legible (no planificables). */
.pil7-disp-sinfecha-card {
    border: 1px solid #fdba74;
    border-left: 5px solid #ea580c;
    border-radius: 16px;
    background: #fff;
    padding: 1.25rem;
}

.pil7-disp-sinfecha-title {
    font-weight: 700;
    color: #9a3412;
    margin-bottom: .25rem;
}

.pil7-disp-sinfecha-subtitle {
    font-size: .84rem;
    color: #64748b;
    margin-bottom: .85rem;
}

.pil7-disp-med-name {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pil7-disp-med-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

/* Fechas del medicamento como texto plano separado por «·»: las píldoras con
   borde y fondo restaban ancho útil y añadían ruido visual. */
.pil7-disp-date-pill {
    display: inline-flex;
    align-items: center;
    font-size: .84rem;
    color: #475569;
}

.pil7-disp-date-pill + .pil7-disp-date-pill::before {
    content: "·";
    margin-right: .5rem;
    color: #94a3b8;
    font-weight: 700;
}

.pil7-disp-med-chip {
    padding: .4rem .65rem;
    color: #fff;
}

.pil7-disp-med-note {
    margin-top: .55rem;
    font-size: .84rem;
    color: #64748b;
}

.pil7-disp-warning {
    margin: 0 1.25rem 1.25rem 1.25rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    border: 1px solid #ffe69c;
    background: #fff8e1;
    color: #8a6d1d;
    font-size: .88rem;
    font-weight: 600;
}

/* ── Componentes compartidos de páginas de paciente (MisDispensaciones y
   MiPlanMedicacion): tarjeta de contexto, cajas informativas, stepper de
   tickets y leyenda de semáforo. Antes vivían duplicados en los <style> de
   cada página; regla del workspace: selectores compartidos → app.css. ── */
.pil7-disp-context {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
    padding: 1.25rem 1.5rem;
}

.pil7-disp-context-row {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pil7-disp-context-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.pil7-disp-context-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pil7-primary-deep);
    overflow-wrap: break-word;
}

.pil7-disp-box { border-radius: 10px; padding: .85rem 1rem; overflow-wrap: break-word; }
.pil7-disp-box-info { background: #f0f7ff; border-left: 4px solid #0d6efd; }
.pil7-disp-box-warn { background: #fff8e1; border-left: 4px solid #ffc107; }
.pil7-disp-box-soft { background: #f8f9fa; border: 1px dashed #dee2e6; }
.pil7-disp-box-special { background: #fff7e8; border: 1px solid #ffd08a; box-shadow: 0 0 0 1px rgba(243,156,18,.08); padding: 1rem; }

/* Badges de Bootstrap dentro de secciones: las frases largas envuelven en vez
   de provocar scroll horizontal (.badge trae white-space: nowrap). */
.pil7-section-alt .badge {
    white-space: normal;
    text-align: start;
    line-height: 1.35;
}

.pil7-disp-badge-note {
    display: block;
    width: fit-content;
    max-width: 100%;
}

.pil7-disp-login-lead { font-size: 1.2rem; }

.pil7-disp-meds-ul { padding-left: 1.15rem; }

.pil7-disp-summary-title { font-size: 1.15rem; line-height: 1.35; }
.pil7-disp-summary-value { font-size: 1.05rem; }

.pil7-disp-cta-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.pil7-disp-legend-item { display: inline-flex; align-items: baseline; gap: .4rem; }

.pil7-disp-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
}

.pil7-ticket-progress {
    display: flex;
    align-items: stretch;
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.pil7-ticket-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    min-width: 150px;
    max-width: 180px;
    flex: 1 0 150px;
    padding: .75rem;
    border: 1px solid #d7e8ff;
    border-radius: 10px;
    background: #f8fbff;
}

.pil7-ticket-progress-step-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.pil7-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 700;
    font-size: .9em;
    flex-shrink: 0;
}

.pil7-step-done { background: #198754; color: #fff; }
.pil7-step-active { background: #0d6efd; color: #fff; }
.pil7-step-pending { background: #e9ecef; color: #6c757d; }

.pil7-ticket-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .6rem;
    padding: .75rem;
    border-radius: 10px;
    background: #f8f9fa;
}

.pil7-ticket-detail-grid div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.pil7-ticket-detail-grid span {
    color: #6c757d;
    font-weight: 600;
}

.pil7-semaforo-summary-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pil7-semaforo-med-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    flex-wrap: wrap;
}

.pil7-semaforo-med-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pil7-med-card-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 0;
}

.pil7-med-card-orden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pil7-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pil7-med-card-details {
    padding-left: 2.65rem;
}

.pil7-med-label {
    font-weight: 600;
    color: #555;
}

.pil7-trip-card {
    background: #fff;
    border: 1px solid var(--pil7-border);
    border-left: 5px solid #ccc;
    border-radius: 10px;
    padding: 1rem;
}

.pil7-trip-med-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-top: 1px solid #eef1f4;
    flex-wrap: wrap;
}

/* --- Hero --- */
.pil7-hero {
    background: linear-gradient(135deg, var(--pil7-primary-deep) 0%, var(--pil7-primary) 100%);
    color: #ffffff;
    padding: 4rem 2rem 3.5rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    text-align: center;
}

.pil7-hero h1 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.pil7-hero .pil7-hero-lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.15rem;
    max-width: 580px;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

/* --- Validation --- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* --- Blazor Error Boundary --- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.pil7-error-panel {
    text-align: center;
    padding: 3rem 1.5rem;
}

.pil7-error-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.pil7-error-request-id {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--pil7-text-muted);
    font-size: 0.9rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Responsive --- */
@media screen and (max-width: 767px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }

    /* Reduce layout container lateral padding on mobile */
    article.content.container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Edge-to-edge hero: bleed past container padding */
    .pil7-hero {
        padding: 2.5rem 1.25rem;
        border-radius: 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .pil7-hero h1 { font-size: 1.85rem; }
    .pil7-hero .pil7-hero-lead { font-size: 1rem; }

    /* Edge-to-edge sections: bleed past container padding */
    .pil7-section-alt {
        padding: 1.5rem 0.75rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

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

    .pil7-home-signal-card,
    .pil7-home-traffic-card,
    .pil7-home-notification-item {
        border-radius: 0;
    }

    .pil7-error-actions .btn {
        width: 100%;
    }

    .pil7-history-summary {
        align-items: flex-start;
    }

    .pil7-disp-trip-header {
        flex-direction: column;
        padding: .9rem .75rem .65rem .75rem;
    }

    .pil7-disp-trip-side {
        min-width: 0;
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }

    .pil7-disp-trip-toolbar,
    .pil7-disp-meds-section-head {
        flex-direction: column;
    }

    /* ── Compactación móvil de «Mis próximas dispensaciones» ──────────────
       En pantallas estrechas se aplanan las cajas anidadas (métricas, lista de
       medicamentos) a filas separadas por línea fina: todo el ancho queda para
       el texto sin perder la estructura del viaje (borde/punto de semáforo). */
    .pil7-disp-trip-card {
        border-radius: 12px;
    }

    .pil7-disp-trip-card .pil7-disp-trip-dot {
        display: none; /* el color ya lo da el borde izquierdo de la tarjeta */
    }

    .pil7-disp-trip-metrics {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 .75rem .5rem .75rem;
    }

    .pil7-disp-metric {
        border: 0;
        border-top: 1px solid #eef1f5;
        border-radius: 0;
        background: transparent;
        padding: .5rem 0;
    }

    .pil7-disp-metric:first-child {
        border-top: 0;
    }

    .pil7-disp-trip-banner {
        margin: 0 .75rem .75rem .75rem;
        padding: .65rem .7rem;
    }

    .pil7-disp-trip-toolbar {
        padding: .65rem .75rem;
    }

    .pil7-disp-trip-body {
        padding: .75rem .75rem .9rem .75rem;
    }

    .pil7-disp-meds-list {
        gap: 0;
    }

    .pil7-disp-med-item {
        border: 0;
        border-top: 1px solid #e8eef5;
        border-radius: 0;
        background: transparent;
        padding: .6rem 0;
    }

    .pil7-disp-med-item:first-child {
        border-top: 0;
    }

    .pil7-disp-med-item-highlight {
        background: #eef6ff;
        border: 0;
        border-radius: 8px;
        padding: .6rem;
        margin-bottom: .35rem;
    }

    .pil7-disp-med-meta {
        margin-top: .4rem;
    }

    .pil7-disp-warning {
        margin: 0 .75rem .9rem .75rem;
        padding: .65rem .7rem;
    }

    .pil7-disp-meds-section + .pil7-disp-meds-section {
        margin-top: .85rem;
        padding-top: .85rem;
    }

    /* Resumen del semáforo (compartido con Mi plan de medicación) */
    .pil7-semaforo-summary {
        padding: .85rem .75rem;
        gap: .75rem;
    }

    .pil7-semaforo-summary-dot {
        width: 28px;
        height: 28px;
    }

    .pil7-semaforo-summary .text-end {
        text-align: left !important;
    }

    /* Stepper de tickets: filas planas (círculo + texto), sin cajas ni
       conectores, para que todo el ancho quede para el texto. */
    .pil7-ticket-progress {
        flex-direction: column;
        overflow-x: visible;
        gap: .35rem;
    }

    .pil7-ticket-progress-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: start;
        gap: .65rem;
        min-width: 0;
        max-width: none;
        width: 100%;
        flex: 1 1 auto;
        padding: .4rem 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .pil7-step {
        width: 28px;
        height: 28px;
    }

    /* Compactación de tarjetas y cajas informativas compartidas */
    .pil7-section-alt .card .card-body {
        padding: .85rem .75rem;
    }

    .pil7-ticket-detail-grid {
        padding: .6rem .75rem;
    }

    .pil7-disp-box {
        padding: .7rem .75rem;
    }

    .pil7-disp-box-special {
        padding: .85rem .75rem;
    }

    .pil7-disp-cta-actions .btn {
        flex: 1 1 100%;
    }

    .pil7-disp-context {
        padding: .85rem .75rem;
        gap: .6rem 1.5rem;
    }
}

/* --- PIL7 Loading / Splash Screen (Web) --- */
.pil7-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #1E354F 0%, #1A83BC 60%, #3285B1 100%);
    padding: 2rem 1.5rem;
    text-align: center;
    gap: 0.8rem;
}

.pil7-splash-tagline {
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 0;
}

.pil7-splash-logo {
    width: 160px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    /*mix-blend-mode: multiply;*/
}

.pil7-splash-subtitle {
    color: #ffffff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: 0.2rem 0 0.8rem;
}

/* --- Lista de pasos del arranque (Home) ---
   Todo en em y con colores por clase para que escale con el selector «Tamaño de
   texto» y siga la paleta del sistema. Antes usaba estilos en línea con anchos
   fijos en px (20px/16px) y colores a pelo: el texto crecía con el ajuste de
   tamaño pero los iconos se quedaban igual, y la lista se descuadraba. */
.pil7-home-step {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-bottom: 0.5em;
}

.pil7-home-step-icon {
    flex: 0 0 auto;
    width: 1.3em;
    text-align: center;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pil7-home-step-spinner {
    width: 1em;
    height: 1em;
    border-width: 0.15em;
    color: var(--pil7-primary);
}

.pil7-home-step-label {
    line-height: 1.4;
}

.pil7-home-step-pending {
    color: var(--pil7-text-muted, #6c757d);
}

.pil7-home-step-ok {
    color: var(--pil7-success, #2ecc71);
}

.pil7-home-step-failed {
    color: var(--pil7-danger, #e74c3c);
}

/* --- Bloqueo por versión obsoleta (MainLayout) ---
   Tapa la app entera. Solo aparece con "update-required", que exige que el
   interruptor de bloqueo esté encendido en /admin/version-apps de pil7api. */
.pil7-update-gate {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #1f6fb2;
    overflow-y: auto;
}

.pil7-update-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
    max-width: 440px;
    width: 100%;
    padding: 36px 28px;
    text-align: center;
}

.pil7-update-icon {
    font-size: 2.6rem;
    line-height: 1;
    color: #1f6fb2;
    margin-bottom: 14px;
}

.pil7-update-card h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #2b3440;
}

.pil7-update-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #55606e;
    margin: 0 0 20px;
}

.pil7-update-versions {
    font-size: .85rem !important;
    color: #8a94a1 !important;
    margin: 18px 0 0 !important;
}

/* Aviso que app-shell.js inyecta en el splash cuando el arranque se alarga.
   El texto lo decide app-shell.js según la causa real (sesión, carga o
   despliegue), no según el tiempo transcurrido. */
.pil7-splash-aviso {
    color: #ffffff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 22rem;
    margin: 1.2rem auto 0;
    opacity: 0.92;
}

.pil7-splash-info {
    width: min(220px, 55vw);
    height: auto;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.pil7-splash-loader {
    margin-top: 1.2rem;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pil7-spin 0.8s linear infinite;
}

@keyframes pil7-spin {
    to { transform: rotate(360deg); }
}

.pil7-splash-hide {
    animation: pil7-fade-out 0.4s ease-out forwards;
}

@keyframes pil7-fade-out {
    to { opacity: 0; }
}

/* --- Text Size Scaling --- */
.pil7-text-small { font-size: 0.68rem; }
.pil7-text-large { font-size: 1.2rem; }

.pil7-text-small h1 { font-size: 1.48rem; }
.pil7-text-small h2 { font-size: 1.16rem; }
.pil7-text-small h3 { font-size: 0.88rem; }
.pil7-text-small .btn,
.pil7-text-small .btn-pil7,
.pil7-text-small .btn-outline-pil7,
.pil7-text-small button { font-size: 0.68rem; }

.pil7-text-large h1 { font-size: 2.65rem; }
.pil7-text-large h2 { font-size: 2.05rem; }
.pil7-text-large h3 { font-size: 1.5rem; }
.pil7-text-large .btn,
.pil7-text-large .btn-pil7,
.pil7-text-large .btn-outline-pil7,
.pil7-text-large button { font-size: 1.2rem; }

/* Hero overrides (higher specificity than .pil7-hero h1) */
.pil7-text-small .pil7-hero h1 { font-size: 1.7rem; }
.pil7-text-small .pil7-hero .pil7-hero-lead { font-size: 0.78rem; }
.pil7-text-large .pil7-hero h1 { font-size: 3rem; }
.pil7-text-large .pil7-hero .pil7-hero-lead { font-size: 1.38rem; }

/* Feedback page overrides */
.pil7-text-small .pil7-feedback-context p { font-size: 0.65rem; }
.pil7-text-small .pil7-feedback-quick-icon { font-size: 1.36rem; }
.pil7-text-small .pil7-feedback-quick-label { font-size: 0.65rem; }
.pil7-text-small .pil7-feedback-quick-hint { font-size: 0.53rem; }
.pil7-text-small .pil7-star { font-size: 1.7rem; }
.pil7-text-small .pil7-feedback-label { font-size: 0.65rem; }
.pil7-text-small .pil7-feedback-textarea { font-size: 0.66rem; }
.pil7-text-small .pil7-feedback-submit-btn { font-size: 0.75rem; }
.pil7-text-small .pil7-feedback-success-icon { font-size: 2.72rem; }
.pil7-text-small .pil7-feedback-success-msg { font-size: 0.75rem; }
.pil7-text-small .pil7-feedback-ticket-id { font-size: 0.61rem; }
.pil7-text-small .pil7-feedback-section-hint { font-size: 0.65rem; }
.pil7-text-small .pil7-feedback-rating-hint { font-size: 0.61rem; }
.pil7-text-small .pil7-feedback-rating-value { font-size: 0.58rem; }
.pil7-text-small .pil7-feedback-optional-tag { font-size: 0.58rem; }
.pil7-text-small .pil7-feedback-contact-desc { font-size: 0.61rem; }
.pil7-text-small .pil7-feedback-privacy-note { font-size: 0.56rem; }
.pil7-text-small .pil7-feedback-why-text { font-size: 0.66rem; }
.pil7-text-small .pil7-feedback-why-icon { font-size: 3.4rem; }

.pil7-text-large .pil7-feedback-context p { font-size: 1.14rem; }
.pil7-text-large .pil7-feedback-quick-icon { font-size: 2.4rem; }
.pil7-text-large .pil7-feedback-quick-label { font-size: 1.14rem; }
.pil7-text-large .pil7-feedback-quick-hint { font-size: 0.94rem; }
.pil7-text-large .pil7-star { font-size: 3rem; }
.pil7-text-large .pil7-feedback-label { font-size: 1.14rem; }
.pil7-text-large .pil7-feedback-textarea { font-size: 1.16rem; }
.pil7-text-large .pil7-feedback-submit-btn { font-size: 1.32rem; }
.pil7-text-large .pil7-feedback-success-icon { font-size: 4.8rem; }
.pil7-text-large .pil7-feedback-success-msg { font-size: 1.32rem; }
.pil7-text-large .pil7-feedback-ticket-id { font-size: 1.08rem; }
.pil7-text-large .pil7-feedback-section-hint { font-size: 1.14rem; }
.pil7-text-large .pil7-feedback-rating-hint { font-size: 1.08rem; }
.pil7-text-large .pil7-feedback-rating-value { font-size: 1.02rem; }
.pil7-text-large .pil7-feedback-optional-tag { font-size: 1.02rem; }
.pil7-text-large .pil7-feedback-contact-desc { font-size: 1.08rem; }
.pil7-text-large .pil7-feedback-privacy-note { font-size: 0.98rem; }
.pil7-text-large .pil7-feedback-why-text { font-size: 1.16rem; }
.pil7-text-large .pil7-feedback-why-icon { font-size: 6rem; }

/* Home page overrides */
.pil7-text-small .pil7-home-step-text { font-size: 0.68rem; }
.pil7-text-small .pil7-home-slow-msg { font-size: 0.65rem; }
.pil7-text-small .pil7-home-elapsed { font-size: 0.58rem; }
.pil7-text-small .pil7-home-status-text { font-size: 0.68rem; }
.pil7-text-small .pil7-home-email-text { font-size: 0.68rem; }
.pil7-text-small .pil7-home-summary-title { font-size: 0.68rem; }
.pil7-text-small .pil7-home-notification-item { font-size: 0.68rem; }
.pil7-text-small .pil7-home-signal-card h4 { font-size: 0.82rem; }
.pil7-text-small .pil7-home-traffic-card { font-size: 0.68rem; }
.pil7-text-small .pil7-home-traffic-card-title { font-size: 0.61rem; }
.pil7-text-small .pil7-home-diagnostics { font-size: 0.61rem; }

.pil7-text-large .pil7-home-step-text { font-size: 1.2rem; }
.pil7-text-large .pil7-home-slow-msg { font-size: 1.14rem; }
.pil7-text-large .pil7-home-elapsed { font-size: 1.02rem; }
.pil7-text-large .pil7-home-status-text { font-size: 1.2rem; }
.pil7-text-large .pil7-home-email-text { font-size: 1.2rem; }
.pil7-text-large .pil7-home-summary-title { font-size: 1.2rem; }
.pil7-text-large .pil7-home-notification-item { font-size: 1.2rem; }
.pil7-text-large .pil7-home-signal-card h4 { font-size: 1.45rem; }
.pil7-text-large .pil7-home-traffic-card { font-size: 1.2rem; }
.pil7-text-large .pil7-home-traffic-card-title { font-size: 1.08rem; }
.pil7-text-large .pil7-home-diagnostics { font-size: 1.08rem; }

/* Auth pages overrides (Login, Register, ForgotPassword, Logout) */
.pil7-text-small .pil7-auth-icon { font-size: 2.04rem; }
.pil7-text-large .pil7-auth-icon { font-size: 3.6rem; }

/* ManageMobile page overrides */
.pil7-text-small .pil7-mobile-code-input { font-size: 0.95rem; }
.pil7-text-large .pil7-mobile-code-input { font-size: 1.68rem; }

/* Empty state text overrides (MisFarmaciasGestoras, MisPagos) */
.pil7-text-small .pil7-empty-state-text { font-size: 0.75rem; }
.pil7-text-large .pil7-empty-state-text { font-size: 1.32rem; }

/* ── Navbar (header) overrides ──────────────────────────────────────────────
   El header/menú vive dentro de un componente con CSS aislado (NavMenu.razor.css,
   selectores tipo `.pil7-navbar[b-xxxxx] .nav-link`). Sus tamaños DEBEN ceder al
   selector de tamaño de texto. Se usa `!important` (no solo el prefijo `.page`)
   para que el menú desplegable se transforme SIEMPRE en los 3 tamaños, sin
   depender de que el bundle aislado gane o pierda por especificidad/orden. */
.page.pil7-text-small .pil7-navbar .navbar-brand { font-size: 0.95rem !important; }
.page.pil7-text-small .pil7-navbar .nav-link,
.page.pil7-text-small .pil7-navbar .pil7-nav-bell-text { font-size: 0.66rem !important; }
.page.pil7-text-small .pil7-navbar-user { font-size: 0.63rem !important; }
.page.pil7-text-small .pil7-navbar .pil7-nav-bell-badge { font-size: 0.5rem !important; }

.page.pil7-text-large .pil7-navbar .navbar-brand { font-size: 1.68rem !important; }
.page.pil7-text-large .pil7-navbar .nav-link,
.page.pil7-text-large .pil7-navbar .pil7-nav-bell-text { font-size: 1.16rem !important; }
.page.pil7-text-large .pil7-navbar-user { font-size: 1.10rem !important; }
.page.pil7-text-large .pil7-navbar .pil7-nav-bell-badge { font-size: 0.78rem !important; }

/* El botón de menú (hamburguesa) NO debe escalar con el tamaño de texto: se deja
   siempre en su tamaño por defecto (el de "Normal", 1.25rem) en pequeño y grande.
   Sin esto lo deforman dos catch-all: `button` (cambia la fuente del botón) y
   `[class*="icon"]`, que colisiona con la clase Bootstrap `.navbar-toggler-icon`
   (el icono es 1.5em → se inflaba a ~40px en pequeño y ~72px en grande). Fijar la
   fuente a 1.25rem en botón e icono reproduce exactamente el tamaño por defecto. */
.page.pil7-text-small .pil7-navbar .navbar-toggler,
.page.pil7-text-large .pil7-navbar .navbar-toggler,
.page.pil7-text-small .pil7-navbar .navbar-toggler-icon,
.page.pil7-text-large .pil7-navbar .navbar-toggler-icon { font-size: 1.25rem !important; }

/* ── Footer overrides (mismo motivo: MainLayout.razor.css está aislado). El
   `label` del selector se cubre explícitamente para que no lo capture la regla
   genérica de cuerpo `:is(..., label, ...)` y quede a distinto tamaño que el
   resto del pie. ── */
.page.pil7-text-small .pil7-footer-tagline { font-size: 0.63rem !important; }
.page.pil7-text-small .pil7-footer-copy { font-size: 0.59rem !important; }
.page.pil7-text-small .pil7-text-size-picker,
.page.pil7-text-small .pil7-text-size-picker label { font-size: 0.60rem !important; }
.page.pil7-text-small .pil7-text-size-picker select { font-size: 0.60rem !important; }

.page.pil7-text-large .pil7-footer-tagline { font-size: 1.12rem !important; }
.page.pil7-text-large .pil7-footer-copy { font-size: 1.04rem !important; }
.page.pil7-text-large .pil7-text-size-picker,
.page.pil7-text-large .pil7-text-size-picker label { font-size: 1.06rem !important; }
.page.pil7-text-large .pil7-text-size-picker select { font-size: 1.06rem !important; }

/* AdherirFarmacia page overrides */
.pil7-text-small .pil7-adherir-hint { font-size: 0.58rem; }
.pil7-text-small .pil7-adherir-success-text { font-size: 0.75rem; }
.pil7-text-small .pil7-adherir-horario { font-size: 0.58rem; }

.pil7-text-large .pil7-adherir-hint { font-size: 1.02rem; }
.pil7-text-large .pil7-adherir-success-text { font-size: 1.32rem; }
.pil7-text-large .pil7-adherir-horario { font-size: 1.02rem; }


/* Broad page text-size coverage: keeps Pages and Pages/Onboarding tied to the footer selector. */
.pil7-text-small :is(h1, .h1) { font-size: 1.48rem !important; }
.pil7-text-small :is(h2, .h2) { font-size: 1.16rem !important; }
.pil7-text-small :is(h3, .h3) { font-size: 0.88rem !important; }
.pil7-text-small :is(h4, .h4) { font-size: 0.82rem !important; }
.pil7-text-small :is(h5, .h5) { font-size: 0.76rem !important; }
.pil7-text-small :is(h6, .h6) { font-size: 0.72rem !important; }
.pil7-text-small :is(
    p, li, label, summary, legend, dt, dd, td, th,
    .form-label, .form-text, .form-control, .form-select, .form-check-label,
    input, select, textarea, .alert, .card, .list-group-item, .table,
    .lead, .text-muted, .text-body-secondary
) { font-size: 0.68rem !important; }
.pil7-text-small :is(small, .small) { font-size: 0.58rem !important; }
.pil7-text-small :is(.badge, .pil7-notif-badge) { font-size: 0.54rem !important; }
.pil7-text-small :is(.btn, .btn-pil7, .btn-outline-pil7, button) { font-size: 0.68rem !important; }
.pil7-text-small :is(.btn-sm, .btn.btn-sm) { font-size: 0.61rem !important; }
.pil7-text-small :is([class*="hint"], [class*="meta"], [class*="label"], [class*="subtitle"], [class*="copy"], [class*="status"], [class*="summary"], [class*="time"], [class*="note"]) { font-size: 0.61rem !important; }
.pil7-text-small :is([class*="title"]:not([class*="subtitle"]), [class*="heading"], [class*="name"], [class*="value"]) { font-size: 0.82rem !important; }
/* NOTE: NO usar [class*="star"] aquí (colisiona con align-items-start, text-start,
   justify-content-start, .pil7-startup…). Las estrellas usan .pil7-star explícito. */
.pil7-text-small :is([class*="icon"], [class*="emoji"], [class*="price-main"]) { font-size: 1.7rem !important; }

.pil7-text-large :is(h1, .h1) { font-size: 2.65rem !important; }
.pil7-text-large :is(h2, .h2) { font-size: 2.05rem !important; }
.pil7-text-large :is(h3, .h3) { font-size: 1.5rem !important; }
.pil7-text-large :is(h4, .h4) { font-size: 1.45rem !important; }
.pil7-text-large :is(h5, .h5) { font-size: 1.32rem !important; }
.pil7-text-large :is(h6, .h6) { font-size: 1.22rem !important; }
.pil7-text-large :is(
    p, li, label, summary, legend, dt, dd, td, th,
    .form-label, .form-text, .form-control, .form-select, .form-check-label,
    input, select, textarea, .alert, .card, .list-group-item, .table,
    .lead, .text-muted, .text-body-secondary
) { font-size: 1.2rem !important; }
.pil7-text-large :is(small, .small) { font-size: 1.02rem !important; }
.pil7-text-large :is(.badge, .pil7-notif-badge) { font-size: 0.96rem !important; }
.pil7-text-large :is(.btn, .btn-pil7, .btn-outline-pil7, button) { font-size: 1.2rem !important; }
.pil7-text-large :is(.btn-sm, .btn.btn-sm) { font-size: 1.08rem !important; }
.pil7-text-large :is([class*="hint"], [class*="meta"], [class*="label"], [class*="subtitle"], [class*="copy"], [class*="status"], [class*="summary"], [class*="time"], [class*="note"]) { font-size: 1.08rem !important; }
.pil7-text-large :is([class*="title"]:not([class*="subtitle"]), [class*="heading"], [class*="name"], [class*="value"]) { font-size: 1.45rem !important; }
/* NOTE: NO usar [class*="star"] aquí: colisiona con utilidades Bootstrap
   (align-items-start, text-start, justify-content-start, align-self-start…)
   y con .pil7-startup, forzando 3rem en contenedores y heredándolo a todo su
   texto. Las estrellas de valoración se dimensionan explícitamente con .pil7-star. */
.pil7-text-large :is([class*="icon"], [class*="emoji"], [class*="price-main"]) { font-size: 3rem !important; }

/* Correcciones de colisiones: clases de CONTENIDO (texto normal) cuyo nombre
   contiene un token de métrica ("value"/"name") y que, por tanto, se inflaban al
   tamaño de una cifra/título. Se re-anclan al tamaño de cuerpo para no desperdiciar
   ancho ni romper la jerarquía visual. Va DESPUÉS de los catch-all (misma
   especificidad → gana el último). */
.page.pil7-text-small .pil7-comercial-field-value { font-size: 0.68rem !important; }
.page.pil7-text-large .pil7-comercial-field-value { font-size: 1.2rem !important; }

/* .lead: el catch-all de cuerpo lo igualaba al cuerpo (1.2rem en grande), pero
   .lead normal es 1.25rem → en grande ENCOGÍA (20px→19.2px) y perdía su énfasis.
   Se escala proporcional al cuerpo manteniéndose ~1.25× por encima. */
.page.pil7-text-small .lead { font-size: 0.85rem !important; }
.page.pil7-text-large .lead { font-size: 1.5rem !important; }

/* Cifras KPI: usan 1.9em, pero el token [class*="value"] las fijaba a 1.45rem y
   en grande QUEDABAN MÁS PEQUEÑAS que en normal (30.4px→23.2px). Se restaura el
   escalado proporcional 1.9em (mismo comportamiento que .prepare-metric). */
.page.pil7-text-small .pil7-comercial-kpi-value { font-size: 1.9em !important; }
.page.pil7-text-large .pil7-comercial-kpi-value { font-size: 1.9em !important; }

/* MisDispensaciones / MiPlanMedicacion: clases sin token cubierto por los
   catch-all (chip, pill, countdown, number, -text, warning, lead). Van DESPUÉS
   de los catch-all y con .page + !important porque varias viven en elementos
   <p>/<span> capturados por las reglas de cuerpo con !important. */
.page.pil7-text-small .pil7-disp-trip-chip,
.page.pil7-text-small .pil7-disp-med-chip,
.page.pil7-text-small .pil7-disp-trip-number { font-size: 0.53rem !important; }
.page.pil7-text-small .pil7-disp-date-pill { font-size: 0.57rem !important; }
.page.pil7-text-small .pil7-disp-trip-countdown { font-size: 0.68rem !important; }
.page.pil7-text-small .pil7-disp-trip-banner-text { font-size: 0.58rem !important; }
.page.pil7-text-small .pil7-disp-trip-toolbar-text { font-size: 0.61rem !important; }
.page.pil7-text-small .pil7-disp-warning { font-size: 0.6rem !important; }
.page.pil7-text-small .pil7-disp-login-lead { font-size: 0.82rem !important; }

.page.pil7-text-large .pil7-disp-trip-chip,
.page.pil7-text-large .pil7-disp-med-chip,
.page.pil7-text-large .pil7-disp-trip-number { font-size: 0.94rem !important; }
.page.pil7-text-large .pil7-disp-date-pill { font-size: 1.01rem !important; }
.page.pil7-text-large .pil7-disp-trip-countdown { font-size: 1.2rem !important; }
.page.pil7-text-large .pil7-disp-trip-banner-text { font-size: 1.03rem !important; }
.page.pil7-text-large .pil7-disp-trip-toolbar-text { font-size: 1.08rem !important; }
.page.pil7-text-large .pil7-disp-warning { font-size: 1.06rem !important; }
.page.pil7-text-large .pil7-disp-login-lead { font-size: 1.44rem !important; }

/* AppSupport (/ayuda-app) page overrides: clases propias de la página. Van
   DESPUÉS de los catch-all y con .page + !important porque varios nombres
   contienen tokens capturados por los genéricos ("title", "note", "hint"),
   los <li> de las listas están cubiertos por las reglas de cuerpo, y el
   detalle del informe vive en un <pre> que ningún catch-all escala. */
.page.pil7-text-small .pil7-support-panel-title { font-size: 0.71rem !important; }
.page.pil7-text-small .pil7-support-list,
.page.pil7-text-small .pil7-support-list li { font-size: 0.65rem !important; }
.page.pil7-text-small .pil7-support-note { font-size: 0.65rem !important; }
.page.pil7-text-small .pil7-support-hint { font-size: 0.58rem !important; }
.page.pil7-text-small .pil7-report-preview { font-size: 0.63rem !important; }
.page.pil7-text-small .pil7-report-check-badge { font-size: 0.52rem !important; }

.page.pil7-text-large .pil7-support-panel-title { font-size: 1.26rem !important; }
.page.pil7-text-large .pil7-support-list,
.page.pil7-text-large .pil7-support-list li { font-size: 1.14rem !important; }
.page.pil7-text-large .pil7-support-note { font-size: 1.14rem !important; }
.page.pil7-text-large .pil7-support-hint { font-size: 1.02rem !important; }
.page.pil7-text-large .pil7-report-preview { font-size: 1.1rem !important; }
.page.pil7-text-large .pil7-report-check-badge { font-size: 0.91rem !important; }

/* Onboarding (Selector, PacientePago, OnboardingProgressFlow): clases propias
   con font-size de clase (no inline, así que los [style*=…] no aplican) y sin
   token cubierto por los catch-all ("badge" solo coincide como clase exacta
   .badge; "step", "sub" y "arrow" no son tokens). Mismos ratios ×0.68 / ×1.2
   sobre su tamaño normal (.8 / .95 / 1.05 / 1.35rem). */
.page.pil7-text-small .pil7-onb-active-badge { font-size: 0.54rem !important; }
.page.pil7-text-small .pil7-onb-active-step { font-size: 0.65rem !important; }
.page.pil7-text-small .pil7-price-sub { font-size: 0.71rem !important; }
.page.pil7-text-small .pil7-onb-step-arrow { font-size: 0.92rem !important; }

.page.pil7-text-large .pil7-onb-active-badge { font-size: 0.96rem !important; }
.page.pil7-text-large .pil7-onb-active-step { font-size: 1.14rem !important; }
.page.pil7-text-large .pil7-price-sub { font-size: 1.26rem !important; }
.page.pil7-text-large .pil7-onb-step-arrow { font-size: 1.62rem !important; }

.pil7-text-small .pil7-hero h1,
.pil7-text-small .pil7-feedback-hero h1 { font-size: 1.7rem !important; }
.pil7-text-small .pil7-hero .pil7-hero-lead,
.pil7-text-small .pil7-feedback-hero p { font-size: 0.78rem !important; }
.pil7-text-large .pil7-hero h1,
.pil7-text-large .pil7-feedback-hero h1 { font-size: 3rem !important; }
.pil7-text-large .pil7-hero .pil7-hero-lead,
.pil7-text-large .pil7-feedback-hero p { font-size: 1.38rem !important; }

.pil7-text-small [style*="font-size:4rem"] { font-size: 2.72rem !important; }
.pil7-text-small [style*="font-size:3rem"] { font-size: 2.04rem !important; }
.pil7-text-small [style*="font-size:2.5rem"] { font-size: 1.7rem !important; }
.pil7-text-small [style*="font-size:2rem"] { font-size: 1.36rem !important; }
.pil7-text-small [style*="font-size:1.8rem"] { font-size: 1.22rem !important; }
.pil7-text-small [style*="font-size:1.6rem"] { font-size: 1.09rem !important; }
.pil7-text-small [style*="font-size:1.5rem"] { font-size: 1.02rem !important; }
.pil7-text-small [style*="font-size:1.45rem"] { font-size: 0.99rem !important; }
.pil7-text-small [style*="font-size:1.35rem"] { font-size: 0.92rem !important; }
.pil7-text-small [style*="font-size:1.3rem"] { font-size: 0.88rem !important; }
.pil7-text-small [style*="font-size:1.25rem"] { font-size: 0.85rem !important; }
.pil7-text-small [style*="font-size:1.2rem"] { font-size: 0.82rem !important; }
.pil7-text-small [style*="font-size:1.15rem"] { font-size: 0.78rem !important; }
.pil7-text-small [style*="font-size:1.125rem"] { font-size: 0.77rem !important; }
.pil7-text-small [style*="font-size:1.1rem"] { font-size: 0.75rem !important; }
.pil7-text-small [style*="font-size:1.08rem"] { font-size: 0.73rem !important; }
.pil7-text-small [style*="font-size:1.05rem"] { font-size: 0.71rem !important; }
.pil7-text-small [style*="font-size:1rem"] { font-size: 0.68rem !important; }
.pil7-text-small [style*="font-size:0.97rem"],
.pil7-text-small [style*="font-size:.97rem"] { font-size: 0.66rem !important; }
.pil7-text-small [style*="font-size:0.95rem"],
.pil7-text-small [style*="font-size:.95rem"] { font-size: 0.65rem !important; }
.pil7-text-small [style*="font-size:0.92rem"],
.pil7-text-small [style*="font-size:.92rem"] { font-size: 0.63rem !important; }
.pil7-text-small [style*="font-size:0.9rem"],
.pil7-text-small [style*="font-size:.9rem"] { font-size: 0.61rem !important; }
.pil7-text-small [style*="font-size:0.88rem"],
.pil7-text-small [style*="font-size:.88rem"] { font-size: 0.6rem !important; }
.pil7-text-small [style*="font-size:0.85rem"],
.pil7-text-small [style*="font-size:.85rem"] { font-size: 0.58rem !important; }
.pil7-text-small [style*="font-size:0.82rem"],
.pil7-text-small [style*="font-size:.82rem"] { font-size: 0.56rem !important; }
.pil7-text-small [style*="font-size:0.8rem"],
.pil7-text-small [style*="font-size:.8rem"] { font-size: 0.54rem !important; }
.pil7-text-small [style*="font-size:0.78rem"],
.pil7-text-small [style*="font-size:.78rem"] { font-size: 0.53rem !important; }
.pil7-text-small [style*="font-size:0.76rem"],
.pil7-text-small [style*="font-size:.76rem"] { font-size: 0.52rem !important; }
.pil7-text-small [style*="font-size:0.75rem"],
.pil7-text-small [style*="font-size:.75rem"] { font-size: 0.51rem !important; }
.pil7-text-small [style*="font-size:0.74rem"],
.pil7-text-small [style*="font-size:.74rem"] { font-size: 0.5rem !important; }
.pil7-text-small [style*="font-size:0.72rem"],
.pil7-text-small [style*="font-size:.72rem"] { font-size: 0.49rem !important; }
.pil7-text-small [style*="font-size:5rem"] { font-size: 3.4rem !important; }

.pil7-text-large [style*="font-size:4rem"] { font-size: 4.8rem !important; }
.pil7-text-large [style*="font-size:3rem"] { font-size: 3.6rem !important; }
.pil7-text-large [style*="font-size:2.5rem"] { font-size: 3rem !important; }
.pil7-text-large [style*="font-size:2rem"] { font-size: 2.4rem !important; }
.pil7-text-large [style*="font-size:1.8rem"] { font-size: 2.16rem !important; }
.pil7-text-large [style*="font-size:1.6rem"] { font-size: 1.92rem !important; }
.pil7-text-large [style*="font-size:1.5rem"] { font-size: 1.8rem !important; }
.pil7-text-large [style*="font-size:1.45rem"] { font-size: 1.74rem !important; }
.pil7-text-large [style*="font-size:1.35rem"] { font-size: 1.62rem !important; }
.pil7-text-large [style*="font-size:1.3rem"] { font-size: 1.56rem !important; }
.pil7-text-large [style*="font-size:1.25rem"] { font-size: 1.5rem !important; }
.pil7-text-large [style*="font-size:1.2rem"] { font-size: 1.44rem !important; }
.pil7-text-large [style*="font-size:1.15rem"] { font-size: 1.38rem !important; }
.pil7-text-large [style*="font-size:1.125rem"] { font-size: 1.35rem !important; }
.pil7-text-large [style*="font-size:1.1rem"] { font-size: 1.32rem !important; }
.pil7-text-large [style*="font-size:1.08rem"] { font-size: 1.3rem !important; }
.pil7-text-large [style*="font-size:1.05rem"] { font-size: 1.26rem !important; }
.pil7-text-large [style*="font-size:1rem"] { font-size: 1.2rem !important; }
.pil7-text-large [style*="font-size:0.97rem"],
.pil7-text-large [style*="font-size:.97rem"] { font-size: 1.16rem !important; }
.pil7-text-large [style*="font-size:0.95rem"],
.pil7-text-large [style*="font-size:.95rem"] { font-size: 1.14rem !important; }
.pil7-text-large [style*="font-size:0.92rem"],
.pil7-text-large [style*="font-size:.92rem"] { font-size: 1.1rem !important; }
.pil7-text-large [style*="font-size:0.9rem"],
.pil7-text-large [style*="font-size:.9rem"] { font-size: 1.08rem !important; }
.pil7-text-large [style*="font-size:0.88rem"],
.pil7-text-large [style*="font-size:.88rem"] { font-size: 1.06rem !important; }
.pil7-text-large [style*="font-size:0.85rem"],
.pil7-text-large [style*="font-size:.85rem"] { font-size: 1.02rem !important; }
.pil7-text-large [style*="font-size:0.82rem"],
.pil7-text-large [style*="font-size:.82rem"] { font-size: 0.98rem !important; }
.pil7-text-large [style*="font-size:0.8rem"],
.pil7-text-large [style*="font-size:.8rem"] { font-size: 0.96rem !important; }
.pil7-text-large [style*="font-size:0.78rem"],
.pil7-text-large [style*="font-size:.78rem"] { font-size: 0.94rem !important; }
.pil7-text-large [style*="font-size:0.76rem"],
.pil7-text-large [style*="font-size:.76rem"] { font-size: 0.91rem !important; }
.pil7-text-large [style*="font-size:0.75rem"],
.pil7-text-large [style*="font-size:.75rem"] { font-size: 0.9rem !important; }
.pil7-text-large [style*="font-size:0.74rem"],
.pil7-text-large [style*="font-size:.74rem"] { font-size: 0.89rem !important; }
.pil7-text-large [style*="font-size:0.72rem"],
.pil7-text-large [style*="font-size:.72rem"] { font-size: 0.86rem !important; }
.pil7-text-large [style*="font-size:5rem"] { font-size: 6rem !important; }