/*
 |--------------------------------------------------------------------------
 | PetVan CRM — capa visual sobre Filament
 |--------------------------------------------------------------------------
 | Paleta EXTRAIDA del sitio real de la marca (https://pets1227.com/):
 |   #FD671C  naranja de marca .... 727 usos + todos los botones/CTA
 |   #103C3B  verde petroleo ...... 399 usos (secundario)
 |   #191919  negro de superficie . 500 usos
 |   #2E526D  azul acero .......... accent del kit de Elementor
 |   #FFBC7D  naranja claro ....... tinte de hover
 |   #EFEFEF / #C4C4C4 / #989898  neutros
 |
 | Se mantiene el estilo dark premium del mockup, pero el acento pasa de
 | verde neon a NARANJA DE MARCA. Los tonos marcados como "derivado" son
 | aclarados de un color oficial: los originales (#103C3B, #2E526D) son
 | demasiado oscuros para leerse como linea de grafico sobre negro.
 |
 | Solo se sobrescriben tokens y clases fi-* de Filament, nunca su markup,
 | asi que esto sobrevive a las actualizaciones del panel.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* ---- Acento de marca: igual en ambos temas ---- */
    --pv-accent: #FD671C;
    --pv-accent-hover: #FF7A35;
    --pv-accent-tint: #FFBC7D;
    --pv-accent-soft: rgba(253, 103, 28, .12);
    --pv-accent-line: rgba(253, 103, 28, .30);
    --pv-accent-glow: rgba(253, 103, 28, .07);

    --pv-petrol: #103C3B;
    --pv-petrol-bright: #1E7C78;
    --pv-steel: #2E526D;
    --pv-steel-bright: #4A7FA6;

    --pv-danger: #FF4D4D;
    --pv-warning: #FFB800;

    /* ---- MODO CLARO (valores por defecto) ---- */
    --pv-bg: #FFFFFF;
    --pv-bg-2: #F7F7F8;
    --pv-surface: #FFFFFF;
    --pv-surface-2: #F2F2F3;

    --pv-text: #101010;
    --pv-text-2: #3F3F46;
    --pv-text-3: #71717A;

    --pv-line: rgba(0, 0, 0, .10);
    --pv-line-strong: rgba(0, 0, 0, .18);
}

/*
 | MODO OSCURO. Solo cambian superficies, texto y bordes: el naranja de marca
 | es el mismo en los dos temas, asi la identidad no se rompe al conmutar.
 */
.dark {
    --pv-bg: #0E0E0E;
    --pv-bg-2: #141414;
    --pv-surface: #191919;
    --pv-surface-2: #1F1F1F;

    --pv-text: #FFFFFF;
    --pv-text-2: #C4C4C4;
    --pv-text-3: #989898;

    --pv-line: rgba(255, 255, 255, .08);
    --pv-line-strong: rgba(255, 255, 255, .16);
}

/* Filament deriva de estos tokens todos los fondos del modo oscuro. */
.dark {
    --gray-950: #0E0E0E;
    --gray-900: #141414;
    --gray-800: #191919;
    --gray-700: #1F1F1F;
}

.dark body,
.dark .fi-body {
    background-color: var(--pv-bg);
    font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

/* ---- Sidebar ---- */
.dark .fi-sidebar,
.dark .fi-topbar > nav {
    background-color: var(--pv-bg-2);
    border-color: var(--pv-line);
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--pv-accent-soft);
    position: relative;
}

/* Barra lateral naranja del item activo (detalle del mockup) */
.dark .fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--pv-accent);
    border-radius: 0 3px 3px 0;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-label,
.dark .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--pv-accent);
    font-weight: 600;
}

.dark .fi-sidebar-item-button:hover {
    background-color: var(--pv-accent-glow);
}

.dark .fi-sidebar-group-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--pv-text-3);
}

/* ---- Tarjetas y secciones ---- */
.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-modal-window {
    background-color: var(--pv-surface);
    border: 1px solid var(--pv-line);
    border-radius: 12px;
    transition: border-color .2s ease;
}

.dark .fi-wi-stats-overview-stat:hover,
.dark .fi-section:hover {
    border-color: var(--pv-accent-line);
}

/* Linea superior degradada de las tarjetas de metrica */
.dark .fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
}

.dark .fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pv-accent-line), transparent);
}

.dark .fi-wi-stats-overview-stat-value {
    font-family: 'Geist Mono', monospace;
    font-weight: 800;
    letter-spacing: -.04em;
}

.dark .fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11.5px;
    color: var(--pv-text-3);
}

/* ---- Tablas ---- */
.dark .fi-ta-header-cell {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pv-text-3);
}

.dark .fi-ta-row:hover {
    background-color: var(--pv-accent-glow);
}

/* ---- Badges y botones ---- */
.dark .fi-badge {
    font-family: 'Geist Mono', monospace;
    font-weight: 600;
}

/* Naranja de marca con texto blanco: #FD671C sobre negro necesita texto
   claro para cumplir contraste (con texto negro bajaba de 4.5:1). */
.dark .fi-btn-color-primary {
    background-color: var(--pv-accent);
    color: #FFFFFF;
    font-weight: 700;
}

.dark .fi-btn-color-primary:hover {
    background-color: var(--pv-accent-hover);
    box-shadow: 0 0 20px rgba(253, 103, 28, .30);
}

/* ---- Inputs ---- */
.dark .fi-input,
.dark .fi-select-input,
.dark .fi-fo-field-wrp-input {
    background-color: var(--pv-bg);
}

.dark .fi-input:focus,
.dark .fi-fo-field-wrp-input:focus-within {
    border-color: var(--pv-accent-line);
}

/* ---- Enlaces y foco ---- */
.dark a:hover { color: var(--pv-accent-tint); }

.dark *:focus-visible {
    outline: 2px solid var(--pv-accent);
    outline-offset: 2px;
}

/* Scrollbar fina */
.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
.dark ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: var(--pv-line-strong); border-radius: 3px; }

/*
 | Filament fija la altura de la cabecera del sidebar, asi que un logo alto
 | quedaba recortado. Se pasa a altura automatica con un minimo, y el logo se
 | ajusta sin deformarse. Es un ajuste puntual a UNA restriccion de Filament,
 | no una sustitucion de su maquetacion.
 */
.fi-sidebar-header {
    height: auto;
    min-height: 4rem;
    padding-block: .75rem;
}

.fi-logo {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/*
 |--------------------------------------------------------------------------
 | Paneles flotantes (desplegables, autocompletar, menus)
 |--------------------------------------------------------------------------
 | Se veian TRANSPARENTES: al abrir un select, sus opciones se encimaban con
 | los campos de atras y no se podia leer nada. Se les da fondo solido, borde
 | y sombra, y se asegura que queden por encima del formulario y del modal.
 */
.dark .fi-dropdown-panel,
.dark .fi-fo-select-option-list,
.dark .fi-fo-select-options,
.dark [role='listbox'],
.dark .fi-ac-panel {
    background-color: var(--pv-surface-2, #1F1F1F);
    border: 1px solid var(--pv-line-strong, rgba(255,255,255,.16));
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}

/* Por encima del contenido y de la ventana modal de Filament. */
.fi-dropdown-panel,
.fi-fo-select-option-list,
.fi-fo-select-options,
[role='listbox'] {
    z-index: 60;
}

/* Las opciones necesitan su propio fondo: si no, se transparentan al pasar. */
.dark .fi-dropdown-list-item,
.dark [role='option'] {
    background-color: transparent;
}

.dark .fi-dropdown-list-item:hover,
.dark [role='option']:hover,
.dark [role='option'][aria-selected='true'] {
    background-color: var(--pv-accent-soft, rgba(253,103,28,.12));
}


/*
 |--------------------------------------------------------------------------
 | MODO CLARO: paneles flotantes
 |--------------------------------------------------------------------------
 | Las reglas de arriba llevan .dark; en claro los desplegables necesitan su
 | propio fondo solido, o vuelven a verse transparentes.
 */
html:not(.dark) .fi-dropdown-panel,
html:not(.dark) .fi-fo-select-option-list,
html:not(.dark) .fi-fo-select-options,
html:not(.dark) [role='listbox'] {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .14);
}

html:not(.dark) [role='option']:hover,
html:not(.dark) [role='option'][aria-selected='true'] {
    background-color: var(--pv-accent-soft);
}

/* Cifras en monoespaciada tambien en claro. */
html:not(.dark) .fi-wi-stats-overview-stat-value {
    font-family: 'Geist Mono', monospace;
    font-weight: 800;
    letter-spacing: -.04em;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: var(--pv-accent-soft);
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--pv-accent);
    font-weight: 600;
}

/*
 |--------------------------------------------------------------------------
 | Selectores buscables (Choices.js)
 |--------------------------------------------------------------------------
 | Filament usa Choices.js para los select con busqueda y su lista se genera
 | EN EL NAVEGADOR, por eso no bastaba con estilar .fi-dropdown-panel: aquella
 | regla solo arreglaba los menus renderizados en el servidor.
 |
 | Sin fondo solido, las opciones se transparentaban sobre los campos de atras
 | y el formulario quedaba ilegible. Aplica a TODO el CRM y a ambos temas.
 */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 70;
    border-radius: 10px;
    overflow: hidden;
    /* Claro por defecto */
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}

.dark .choices__list--dropdown,
.dark .choices__list[aria-expanded] {
    background-color: var(--pv-surface-2, #1F1F1F);
    border-color: var(--pv-line-strong, rgba(255, 255, 255, .16));
    box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
}

/* El buscador interno tambien necesita fondo propio. */
.choices__list--dropdown .choices__input {
    background-color: transparent;
}

.dark .choices__list--dropdown .choices__input {
    color: var(--pv-text, #fff);
}

/* Cada opcion: sin fondo propio se ve el formulario a traves. */
.choices__list--dropdown .choices__item {
    background-color: transparent;
    padding: .5rem .75rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover {
    background-color: var(--pv-accent-soft, rgba(253, 103, 28, .12));
    color: var(--pv-accent, #FD671C);
}

/* El contenedor del select, para que la caja cerrada tambien case con el tema. */
.dark .choices__inner {
    background-color: var(--pv-bg, #0E0E0E);
}

/*
 | OJO con el z-index aqui.
 |
 | Poner z-index a CADA select crea un contexto de apilamiento por campo, y eso
 | ATRAPA al desplegable dentro de su propia caja: el campo siguiente (que va
 | despues en el DOM) terminaba pintandose ENCIMA de la lista abierta. Por eso
 | "Tipo de pelo" se mezclaba con las razas.
 |
 | La solucion es no crear ese contexto en reposo y elevar el campo COMPLETO
 | solo mientras su desplegable esta abierto.
 */
.fi-fo-select,
.choices {
    position: relative;
}

.choices.is-open,
.fi-fo-select:has(.choices.is-open),
.fi-fo-field-wrp:has(.choices.is-open),
.fi-fo-component-ctn:has(.choices.is-open) {
    position: relative;
    z-index: 70;
}

/* Los contenedores de rejilla tampoco deben recortar la lista. */
.fi-fo-component-ctn:has(.choices.is-open),
.fi-fo-field-wrp:has(.choices.is-open) {
    overflow: visible;
}

/*
 |--------------------------------------------------------------------------
 | TODOS los paneles flotantes del CRM
 |--------------------------------------------------------------------------
 | Inventario sacado de las vistas de Filament, para no dejar ninguno fuera:
 | selector de fecha/hora, de color, de bloques y el panel de tablas. Todos
 | flotan sobre el formulario y necesitan fondo solido en ambos temas.
 */
.fi-fo-date-time-picker-panel,
.fi-fo-color-picker-panel,
.fi-fo-builder-block-picker-ctn,
.fi-ta-panel {
    z-index: 70;
    border-radius: 10px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}

.dark .fi-fo-date-time-picker-panel,
.dark .fi-fo-color-picker-panel,
.dark .fi-fo-builder-block-picker-ctn,
.dark .fi-ta-panel {
    background-color: var(--pv-surface-2, #1F1F1F);
    border-color: var(--pv-line-strong, rgba(255, 255, 255, .16));
    box-shadow: 0 16px 44px rgba(0, 0, 0, .65);
}

/* El panel generico ya tenia fondo; solo se asegura que quede por encima. */
.fi-dropdown-panel {
    z-index: 70;
}

/* La ventana modal debe quedar por encima de todo lo anterior. */
.fi-modal {
    z-index: 80;
}

/*
 | Choices marca la apertura de DOS formas: 'is-open' en el contenedor y
 | 'is-active' en la lista. Se cubren ambas por si cambia en una version.
 | Verificado: fi-fo-field-wrp, fi-fo-component-ctn y fi-fo-select SI existen
 | en el HTML servido, asi que estas reglas tienen a quien aplicar.
 */
.fi-fo-field-wrp:has(.choices__list--dropdown.is-active),
.fi-fo-component-ctn:has(.choices__list--dropdown.is-active),
.fi-fo-select:has(.choices__list--dropdown.is-active) {
    position: relative;
    z-index: 70;
    overflow: visible;
}

/* Las secciones del formulario tampoco deben recortar un desplegable abierto. */
.fi-section:has(.choices__list--dropdown.is-active),
.fi-section-content:has(.choices__list--dropdown.is-active),
.fi-section:has(.choices.is-open),
.fi-section-content:has(.choices.is-open) {
    overflow: visible;
}

/* ── Miniaturas ─────────────────────────────────────────────────────────
   Imagen pequeña dentro de una tabla o una ficha: el creativo del anuncio
   por el que entro un lead, la foto de una mascota, etc.

   Se apoya en los tokens del tema, asi que el borde sigue al modo claro y
   al oscuro sin necesidad de una regla aparte. */
.pv-thumb {
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
}

/* Variante para la ficha, donde hay sitio para verla en grande. */
.pv-thumb-lg {
    max-height: 160px;
    border-radius: 8px;
}

/* --- Aviso de sesion renovada ---------------------------------------
   Sale abajo a la derecha cuando el CRM recupera solo un token caducado.
   Usa las variables del tema, asi que sigue al modo claro y al oscuro sin
   una regla aparte. */
.pv-aviso-sesion {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 22rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
    color: var(--pv-text);
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
    font-size: 0.875rem;
    line-height: 1.4;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.pv-aviso-sesion--error {
    border-color: var(--pv-danger);
}

.pv-aviso-sesion--saliendo {
    opacity: 0;
    transform: translateY(0.5rem);
}

/* ── Ruta del día ───────────────────────────────────────────────────────
   Mapa de la jornada de una van y su lista de paradas.
   Todo con las variables del tema, así que sigue al modo claro y al oscuro. */
.pv-ruta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pv-ruta-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.pv-ruta-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--pv-text);
}

.pv-ruta-campo > span:first-child {
    opacity: 0.7;
}

.pv-mapa {
    height: 420px;
    border-radius: 10px;
    border: 1px solid var(--pv-line);
    z-index: 0; /* por debajo de los menús de Filament */
}

.pv-ruta-vacio,
.pv-ruta-aviso {
    font-size: 0.875rem;
    color: var(--pv-text);
    opacity: 0.75;
}

.pv-ruta-aviso {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
    opacity: 1;
}

/* La numeración del mapa. Un pin hueco marca una dirección que solo se pudo
   situar por barrio: sobre esa NO se le puede prometer una hora al cliente. */
.pv-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pv-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}

.pv-pin--aprox {
    background: var(--pv-surface);
    color: var(--pv-text);
    border: 2px dashed var(--pv-accent);
}

.pv-paradas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pv-parada {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
}

.pv-parada-num {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pv-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
}

.pv-parada-datos {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--pv-text);
}

.pv-parada-mascota {
    opacity: 0.75;
}

.pv-parada-dir,
.pv-parada-viaje {
    font-size: 0.8125rem;
    opacity: 0.7;
}

.pv-parada-viaje--sin {
    font-style: italic;
}

.pv-parada-estado {
    flex: none;
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* ── Liquidación ────────────────────────────────────────────────────────
   Comisiones por groomer y periodo. Mismas variables que el resto. */
.pv-liq {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pv-liq-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.pv-liq-campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--pv-text);
}

.pv-liq-campo > span:first-child {
    opacity: 0.7;
}

.pv-liq-atajos {
    display: flex;
    gap: 0.375rem;
}

.pv-liq-vacio {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
    font-size: 0.875rem;
    color: var(--pv-text);
}

.pv-liq-totales {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pv-liq-total {
    flex: 1 1 12rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
}

/* Lo que de verdad se va a pagar. Se destaca porque es el número que se
   busca al abrir esta pantalla. */
.pv-liq-total--destacado {
    border-color: var(--pv-accent);
}

.pv-liq-total-etq {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    color: var(--pv-text);
}

.pv-liq-total-num {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--pv-text);
}

.pv-liq-total--destacado .pv-liq-total-num {
    color: var(--pv-accent);
}

/* La tabla se desplaza dentro de su caja: en el móvil, si no, el resto de
   la página se va de lado. */
.pv-liq-tabla-caja {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
}

.pv-liq-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--pv-text);
}

.pv-liq-tabla th,
.pv-liq-tabla td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    white-space: nowrap;
}

.pv-liq-tabla thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.65;
    border-bottom: 1px solid var(--pv-line);
}

.pv-liq-tabla tbody tr + tr td {
    border-top: 1px solid var(--pv-line);
}

.pv-liq-tabla .pv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pv-liq-detalle > summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--pv-text);
    opacity: 0.8;
    padding: 0.5rem 0;
}

.pv-liq-detalle[open] > summary {
    margin-bottom: 0.5rem;
}

/* ── Conectar WhatsApp ───────────────────────────────────────────────────
   Pantalla del registro insertado de Meta. Variables del tema, como el resto. */
.pv-wa { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; }

.pv-wa-tarjeta {
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--pv-line);
    background: var(--pv-surface);
    color: var(--pv-text);
}

.pv-wa-tarjeta--ok { border-color: var(--pv-accent); }

.pv-wa-titulo {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    opacity: 0.7;
}

.pv-wa-numero {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--pv-accent);
}

.pv-wa-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.8125rem;
}

.pv-wa-datos dt { opacity: 0.65; }
.pv-wa-datos dd { margin: 0; font-variant-numeric: tabular-nums; }

.pv-wa-texto { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5; }

.pv-wa-lista {
    margin: 0 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.85;
}

.pv-wa-boton {
    padding: 0.625rem 1.25rem;
    border: 0;
    border-radius: 8px;
    background: var(--pv-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

.pv-wa-boton:hover { background: var(--pv-accent-hover, var(--pv-accent)); }

.pv-wa-nota { margin: 0.625rem 0 0; font-size: 0.8125rem; opacity: 0.75; min-height: 1.2em; }

/* Lo que hay que leer sí o sí: se marca con el color de peligro del tema. */
.pv-wa-alerta {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--pv-danger);
    font-size: 0.875rem;
}