/* ============================================================================
   app.css — CAPA ACTIVA DE RENT-WASI
   ============================================================================
   main.css está CONGELADO (20.281 líneas, 4 capas de rediseño superpuestas).
   Todo estilo nuevo o corregido va AQUÍ. Se carga después de main.css, así que
   gana por orden de cascada sin necesitar !important.

   REGLAS DE ESTA CAPA
   1. Un solo :root. Los tokens de aquí son la autoridad.
   2. Cero !important salvo para vencer un !important preexistente de main.css
      (cada caso debe llevar comentario con el número de línea que anula).
   3. Todo token nuevo se declara antes de usarse. Un var() sin declaración
      invalida la propiedad entera en silencio — es el bug que mató el anillo
      de foco del CTA principal.

   Secciones: Tokens → Accesibilidad → Correcciones por superficie
   ============================================================================ */

/* ============================================================================
   1. TOKENS — corrección de contraste WCAG AA
   ============================================================================
   Ratios calculados con la fórmula de luminancia relativa WCAG 2.x contra las
   superficies reales del proyecto (#FFFFFF surface, #F5F0EB bg, #EDE8E2 muted).
   ============================================================================ */
:root {
    /* --- Texto secundario -----------------------------------------------
       Antes #7A7A7A: 4.29:1 sobre surface y 3.79:1 sobre bg → FALLABA AA.
       Ahora #666666: 5.74:1 surface · 5.07:1 bg · 4.71:1 surface-muted. */
    --color-text-muted: #666666;

    /* --- Acento de marca ------------------------------------------------
       Antes #E05A1A: 3.72:1 — fallaba AA en los DOS sentidos a la vez
       (como texto de precio sobre blanco Y como fondo bajo texto blanco),
       y se usa en todos los CTA y todos los precios.
       Ahora #C74A12: 4.75:1 sobre blanco y 4.75:1 con texto blanco encima.
       Sigue siendo terracota: conserva la identidad andina/colonial. */
    --color-accent: #C74A12;
    --color-price: var(--color-accent);

    /* Naranja original preservado SOLO para uso decorativo o texto grande
       (≥24px, o ≥18.66px bold), donde el umbral AA es 3:1 y sí cumple. */
    --color-accent-bright: #E05A1A;

    /* --- Tokens que main.css USA pero NUNCA DECLARA ---------------------
       Sin estas dos líneas, `outline: 3px solid var(--color-accent-deep)`
       en main.css:2386 es inválido en tiempo de cómputo → el outline se
       resetea → el botón "Postular" no tiene foco visible (WCAG 2.4.7).
       Verificado: 0 declaraciones / 1 uso, y 0 declaraciones / 2 usos. */
    --color-accent-deep: #A33A0C;   /* 6.20:1 sobre blanco */
    --color-error-dark:  #96271B;   /* 8.06:1 sobre blanco */

    /* --- Bordes ---------------------------------------------------------
       --color-border (#E8E6E1, 1.25:1) se mantiene para separadores
       DECORATIVOS: WCAG 1.4.11 no exige 3:1 a divisores sin significado.
       Pero el borde de un control de formulario SÍ es información: es lo
       que permite identificar dónde se puede escribir. Token propio: */
    --color-border-control: #8A8A8A;   /* 3.45:1 blanco · 3.05:1 bg */

    /* Altura real de la navbar, para sticky sin JS (ver §3.1). */
    --navbar-h: 56px;
}

body.dark-theme {
    /* En dark mode el accent puede ser más luminoso: sobre #161B22 el
       naranja claro rinde 6.00:1 como texto. Este es el valor que main.css
       pretendía aplicar y que el ciclo var() auto-referencial invalidaba. */
    --color-accent: #E87A40;
    --color-accent-bright: #E87A40;
    --color-accent-deep: #F09A6A;
    --color-border-control: #6E7681;   /* 3.06:1 sobre #161B22 */
}

/* ============================================================================
   2. ACCESIBILIDAD
   ============================================================================ */

/* --- 2.1 Anillo de foco universal -----------------------------------------
   main.css tiene 19 `outline: none`, de los cuales ~7 no reponen ningún
   indicador. Esto restablece un foco visible en todo lo enfocable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent-deep);
    outline-offset: 2px;
    /* SIN border-radius: la versión anterior fijaba 3px aquí para redondear el
       anillo, pero border-radius afecta al ELEMENTO, no al outline, así que los
       controles tipo pill (los selects del buscador) pasaban de redondeados a
       casi cuadrados al enfocarlos. El outline ya sigue la forma del elemento. */
}

/* El CTA principal del inquilino. Sobre fondo verde el anillo terracota no
   contrasta bien: se usa doble anillo (blanco interior + oscuro exterior)
   para que sea visible sobre cualquier fondo. */
.btn-apply:focus-visible,
.btn-cta-primary:focus-visible,
.btn-primary:focus-visible,
.btn-login:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: -1px;
    box-shadow: 0 0 0 6px var(--color-accent-deep);
}

/* Controles de filtro que en main.css (11850, 15203, 15798, 16290, 17486)
   pierden el outline por defecto y solo cambian border-color al enfocar. */
.admin-filter-group select:focus-visible,
.admin-filter-group input[type="text"]:focus-visible,
.filters-bar__search input:focus-visible,
.admin-search-wrap input:focus-visible,
.pl-v2-filterbar__search:focus-visible {
    outline: 3px solid var(--color-accent-deep);
    outline-offset: 1px;
}

/* --- 2.2 Bordes de controles de formulario (WCAG 1.4.11, 3:1) ------------ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="search"], select, textarea,
.form-input, .geocode-input {
    border-color: var(--color-border-control);
}

/* --- 2.3 Modales accesibles ----------------------------------------------
   Los modales Alpine no tenían role/aria-modal/Escape/focus-trap. El markup
   ya se corrigió en los templates; aquí solo se asegura que el overlay
   cubra y que el contenido reciba foco sin salto visual. */
.alpine-modal-overlay:focus { outline: none; }
.alpine-modal:focus-visible { outline: 3px solid var(--color-accent-deep); outline-offset: 4px; }

/* --- 2.4 Movimiento reducido --------------------------------------------
   main.css cubre solo 11 selectores de 20 @keyframes. Faltaban, entre otros,
   la animación infinita del marcador activo del mapa y los rebotes. */
@media (prefers-reduced-motion: reduce) {
    .price-marker.active::before,
    .guide-fab,
    .guide-fab--pulse,
    .skeleton-img,
    .badge-urgent-pulse {
        animation: none !important;   /* anula `animation: … infinite !important` de main.css:20002 */
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   3. CORRECCIONES POR SUPERFICIE
   ============================================================================ */

/* --- 3.1 P0: mapa del home sticky sin JS --------------------------------
   El IIFE de home.html aplicaba `position: fixed` inline sin guarda de
   viewport, así que en móvil el mapa se fijaba ENCIMA del grid de
   propiedades (el inline vence al `position: static` de la media query) y
   dejaba el catálogo inalcanzable. Ahora es CSS puro: sticky en desktop,
   estático en móvil, sin posibilidad de que un inline lo rompa. */
@media (min-width: 901px) {
    .home-workspace__map-col {
        position: sticky;
        top: var(--navbar-h);
        align-self: start;
        max-height: calc(100vh - var(--navbar-h) - 16px);
        overflow: hidden;
    }
}

@media (max-width: 900px) {
    .home-workspace__map-col {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* --- 3.2 Touch targets ≥44×44 (WCAG 2.5.8 / iOS HIG) --------------------
   En 20.281 líneas existía UN solo min-height:44px, y era un input de
   Telegram. Estos son los controles reales que se pulsan con el pulgar. */
.btn-apply,
.btn-cta-primary,
.btn-cta-whatsapp,
.pl-v2-page-btn,
.pv-yape-action-btn,
.sidebar-logout-btn,
.theme-toggle,
.sidebar-toggle,
.map-control-btn,
.pl-v2-view-toggle__btn,
.mobile-menu-btn,
.pw-toggle {
    min-width: 44px;
    min-height: 44px;
}

/* .btn-apply medía ~28px de alto (padding 6px/14px, 0.8rem). */
.btn-apply {
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* El botón de mostrar contraseña vive dentro del input: se le da área
   táctil sin desbordar la caja. */
.pw-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- 3.3 Badge de urgencia (postulaciones por revisar) ------------------
   Reutiliza el lenguaje de urgencia que ya funciona en la cola de pagos.
   Se usa en Fase 2, se declara aquí para que el token exista una sola vez. */
.badge-urgent-pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--color-error);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.badge-urgent-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--color-error);
    animation: badge-urgent-ring 1.8s ease-out infinite;
}

@keyframes badge-urgent-ring {
    0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}

/* ============================================================================
   FASE 2 — PANEL DEL PROPIETARIO
   ============================================================================
   Diagnóstico: 13 secciones apiladas en vertical, sin foco primario, cada una
   como una isla con borde y sombra propios — se leía como módulos separados y
   obligaba a hacer scroll hasta el fondo para conocer el panel.

   Estrategia: una rejilla de trabajo de 2 columnas donde cada columna es UNA
   superficie continua con divisores internos, en vez de N tarjetas flotando.
   ============================================================================ */

/* --- El atributo hidden debe ocultar de verdad ---------------------------
   Cualquier `display` de autor vence la regla [hidden] de la hoja del navegador.
   .owner-welcome-card tiene `display:flex` en main.css:5413 y 6814, así que el
   atributo hidden no la ocultaba y la tarjeta de bienvenida aparecía siempre.
   Esta regla es el remedio estándar y aplica a todo el proyecto. */
[hidden] { display: none !important; }

/* --- Botones dentro de avisos: el texto no debe heredar el color del aviso -
   `.dashboard-alert a { color: var(--color-warning-text) }` (main.css:6811)
   tiene especificidad (0,1,1) y vencía a .btn-primary (0,1,0), dejando el texto
   marrón oscuro sobre fondo naranja (ilegible). */
.owner-urgent .btn-primary,
.dashboard-alert a.btn-primary,
.conversion-banner a.btn-primary {
    color: #FFFFFF;
}
.owner-urgent .btn-secondary,
.dashboard-alert a.btn-secondary {
    color: var(--color-primary);
}

/* --- Tarjeta de bienvenida: layout compacto -----------------------------
   Era un flex en fila que estiraba título, texto, pasos y CTA a lo alto,
   ocupando ~330px de la primera pantalla. */
.owner-welcome-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
    align-items: center;
    padding: 20px 24px;
}
.owner-welcome-card h2 { grid-column: 1; margin: 0; font-size: 1.15rem; }
.owner-welcome-card > p { grid-column: 1; margin: 0; font-size: 0.9rem; }
.owner-welcome-card .owner-welcome-steps {
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 6px;
}
.owner-welcome-card .owner-welcome-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.owner-welcome-card .owner-welcome-cta {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .owner-welcome-card { grid-template-columns: 1fr; }
    .owner-welcome-card .owner-welcome-cta { grid-column: 1; grid-row: auto; }
}

/* --- Utilidad: texto solo para lectores de pantalla (no existía) --------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- 4.1 Cabecera compacta ---------------------------------------------- */
.dashboard-owner .page-header {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}
.dashboard-owner .page-header h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
}
.dashboard-owner .page-header p {
    margin: 2px 0 0;
    font-size: 0.85rem;
}

/* --- 4.2 Zona urgente: todo lo que tiene reloj o espera respuesta -------- */
.owner-urgent {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
}
.owner-urgent--apps { border-left-color: var(--color-error); }
.owner-urgent__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.owner-urgent__body strong { font-size: 0.95rem; line-height: 1.35; }
.owner-urgent__hint { font-size: 0.8rem; color: var(--color-text-muted); }

/* --- 4.3 Franja de KPIs: una sola pieza, no 4 cajas grandes -------------
   Antes: 4 cards de ~120px de alto, centradas, todas con el mismo peso visual.
   Ahora: una franja horizontal con divisores, dato grande y etiqueta pequeña.
   Jerarquía tipográfica real en vez de "todo pesa igual". */
.dashboard-owner .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin-bottom: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}

.dashboard-owner .stats-grid .stat-card {
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 14px 18px;
    text-align: left;
    align-items: flex-start;
    gap: 1px;
    position: relative;
}
.dashboard-owner .stats-grid .stat-card:last-child { border-right: none; }
/* Sin elevación al pasar el ratón: ya no son objetos independientes */
.dashboard-owner .stats-grid .stat-card:hover { transform: none; box-shadow: none; }

/* El icono pasa a ser una marca discreta arriba a la derecha, no un
   protagonista de 22px centrado sobre el número. */
.dashboard-owner .stats-grid .stat-icon {
    position: absolute;
    top: 12px; right: 14px;
    width: 15px; height: 15px;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.dashboard-owner .stats-grid .stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;   /* los números no bailan al actualizarse */
    color: var(--color-text);
}
.dashboard-owner .stats-grid .stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.dashboard-owner .stats-grid .stat-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}
/* El KPI destacado se marca con el acento en el dato, no con un borde grueso */
.dashboard-owner .stats-grid .stat-card.highlight {
    border-top: none;
    background: transparent;
}
.dashboard-owner .stats-grid .stat-card.highlight .stat-number { color: var(--color-accent); }

/* --- 4.4 Ancho completo -------------------------------------------------
   .page-container.wide topa en 1320px (main.css:7722), así que en un monitor
   de 1920 sobraban ~300px por lado. El panel es una herramienta de trabajo:
   usa el ancho disponible. */
.dashboard-owner.page-container,
.dashboard-owner.page-container.wide {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* --- 4.5 La rejilla de trabajo ------------------------------------------ */
.owner-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

/* --- 4.6 Fila de análisis: las dos secciones lado a lado ----------------
   Inteligencia Competitiva y Calidad de tus Anuncios estaban apiladas en la
   columna lateral de 340px, donde las tablas de precio por distrito no tenían
   aire y había que hacer scroll para compararlas. Ahora comparten una fila a
   ancho completo, cada una en su mitad. */
.owner-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.owner-insights > .dashboard-section {
    margin-bottom: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    padding: 18px 20px;
    box-shadow: none;
}
.owner-insights > .dashboard-section.section-alt { background: var(--color-surface); }

/* Con el doble de ancho, las tarjetas por distrito y los scores caben en
   varias columnas en vez de una sola lista vertical. */
.owner-insights .comp-districts-grid,
.owner-insights .completeness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
}

@media (max-width: 1000px) {
    .owner-insights { grid-template-columns: minmax(0, 1fr); }
}

/* Cada columna es UNA superficie continua. Las secciones de dentro pierden su
   caja propia y se separan con una línea: de "módulos sueltos" a "un panel". */
.owner-grid__main,
.owner-grid__side {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    min-width: 0;
}

.owner-grid__main > .dashboard-section,
.owner-grid__side > .dashboard-section {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 18px 20px;
}
.owner-grid__main > .dashboard-section:last-child,
.owner-grid__side > .dashboard-section:last-child {
    border-bottom: none;
}
/* section-alt ya no necesita fondo distinto: la jerarquía la da la columna */
.owner-grid__side > .dashboard-section.section-alt { background: transparent; }

/* Títulos de sección: escala menor y consistente dentro del panel */
.owner-grid .section-header { margin-bottom: 12px; }
.owner-grid .section-header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.owner-grid__side .section-header h2 { font-size: 0.875rem; }

/* Tablas dentro del panel: sin doble borde y con scroll propio si no caben */
.owner-grid .data-table-container,
.owner-grid .dash-table-wrap {
    overflow-x: auto;
    border: none;
}

/* --- 4.7 Enlaces dentro de frases en estados vacíos ---------------------
   `.empty-state a` (main.css:2546) da display:inline-block + padding 12/24 +
   fondo a CUALQUIER enlace del bloque, así que un enlace en medio de una frase
   se renderizaba como un botón gigante partiendo la oración. Un enlace suelto
   como CTA sí debe seguir pareciendo botón: solo se corrigen los que van dentro
   de un párrafo. */
.empty-state p a,
.empty-state--sm p a {
    display: inline;
    padding: 0;
    background: none;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.empty-state p a:hover { color: var(--color-accent); }

/* La columna lateral es estrecha (340px): la cabecera de sección apila título y
   contador en vez de pelearse por el ancho y partir ambos en dos líneas. */
.owner-grid__side .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.owner-grid__side .section-header .text-muted { font-size: 0.75rem; }

/* --- 4.8 Responsive ------------------------------------------------------
   Bajo 1100px la lateral pasa debajo; en móvil el panel se aplana para no
   encerrar el contenido en una caja dentro de otra caja. */
@media (max-width: 1100px) {
    .owner-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .owner-grid__main,
    .owner-grid__side {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .dashboard-owner .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-owner .stats-grid .stat-card:nth-child(2n) { border-right: none; }
    .dashboard-owner .stats-grid .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
    .owner-urgent { flex-wrap: wrap; }
}

/* ============================================================================
   FASE 3 — FORMULARIO DE PUBLICAR
   ============================================================================
   Observación del usuario: el formulario es muy delgado; debería aprovechar el
   espacio de trabajo para dar la impresión de un proyecto bien construido.
   ============================================================================ */

/* --- 5.1 Contenedor ancho y secciones en 2 columnas ---------------------
   Antes: un canal estrecho centrado con todos los campos en una sola columna,
   dejando dos tercios de pantalla vacíos y alargando el formulario a varias
   pantallas de scroll. */
.property-form-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 24px 56px;
}

/* El propio <form> también estaba limitado: `.property-form { max-width: 900px }`
   en main.css:8357, además del contenedor a 750px (main.css:2933). Con los dos
   topes, el formulario ocupaba menos de la mitad de una pantalla de 1440px. */
.property-form {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.property-form-container > h1 { font-size: 1.6rem; margin-bottom: 4px; }
.property-form-container .form-subtitle { margin-bottom: 20px; }

/* El stepper pasa a barra horizontal pegajosa: con el formulario más ancho, el
   índice de secciones es útil durante todo el scroll. */
.property-form-container .form-stepper {
    position: sticky;
    top: var(--navbar-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    margin-bottom: 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* Cada sección del formulario reparte sus campos en 2 columnas. Los campos que
   necesitan ancho completo (descripción, mapa, dirección) lo recuperan abajo. */
.property-form .form-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 24px;
    align-items: start;
    padding: 20px 24px;
    margin-bottom: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
}
.property-form .form-section-title {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
}

/* form-row ya agrupa campos: dentro de la rejilla ocupa el ancho completo y
   distribuye sus hijos por su cuenta. */
.property-form .form-section > .form-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 24px;
}

/* Campos que exigen ancho completo. El título de la propiedad también: es el
   dato que más se lee en el listado y dejarlo a media columna generaba un hueco
   vacío en "Datos Básicos", que solo tiene dos campos. */
.property-form .form-section > .form-group:has(textarea),
.property-form .form-section > .form-group:has(#form-map),
.property-form .form-section > .form-group:has(#id_title),
.property-form .form-section > .form-group.addr-field,
.property-form .form-section > .addr-advanced,
.property-form .form-section > .form-group:has([type="checkbox"]) {
    grid-column: 1 / -1;
}

/* El mapa gana altura real ahora que hay ancho para él */
.property-form .form-map-container {
    height: 380px;
    min-height: 380px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .property-form .form-section { grid-template-columns: minmax(0, 1fr); }
    .property-form .form-map-container { height: 280px; min-height: 280px; }
}

/* --- 5.2 Autocompletado de dirección ------------------------------------
   Sustituye a los dos campos que no se hablaban ("Dirección" + "Buscar
   dirección"): ahora el propio campo busca y rellena lat/lng y marcador. */
.addr-field { position: relative; }
.addr-combo { position: relative; display: block; }

.addr-spinner {
    position: absolute;
    right: 12px; top: 50%;
    width: 14px; height: 14px;
    margin-top: -7px;
    border: 2px solid var(--color-border-control);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: addr-spin 0.7s linear infinite;
}
@keyframes addr-spin { to { transform: rotate(360deg); } }

.addr-suggestions {
    position: absolute;
    z-index: 20;
    left: 0; right: 0;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.addr-suggestion {
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
}
.addr-suggestion.is-active,
.addr-suggestion:hover {
    background: var(--color-primary);
    color: #FFFFFF;
}

.addr-help,
.addr-status {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.addr-status:empty { display: none; }

.addr-coords {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 5px 10px;
    border-radius: 9999px;
    background: var(--color-success-bg, #D5F5E3);
    color: var(--color-success-text, #145A32);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Coordenadas manuales: repliegue para quien de verdad las necesite */
.addr-advanced {
    margin-top: 10px;
    padding: 0;
    border-top: 1px dashed var(--color-border);
}
.addr-advanced > summary {
    padding: 10px 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}
.addr-advanced > summary:hover { color: var(--color-primary); }

body.dark-theme .addr-suggestions {
    background: var(--color-surface, #161B22);
    border-color: var(--color-border-control);
}
body.dark-theme .addr-suggestion.is-active,
body.dark-theme .addr-suggestion:hover {
    background: var(--color-primary-light, #2D4A6F);
}

/* ============================================================================
   FASE 4 — MÓDULO DE PAGOS (ADMIN)
   ============================================================================
   Observación del usuario: "cards muy grandes con letras pequeñas".
   La relación estaba invertida: mucha caja y poco dato. Aquí se invierte —
   densidad arriba, tamaño del DATO arriba, tamaño de la caja abajo.
   ============================================================================ */

/* --- 6.1 Tarjetas de estadística compactas ------------------------------ */
.pv-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    margin-bottom: 18px;
}
.pv-stat-card {
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
    padding: 13px 18px;
}
.pv-stat-card:last-child { border-right: none; }
.pv-stat-card-header { margin-bottom: 2px; }
.pv-stat-card-header span,
.pv-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.pv-stat-value {
    font-size: 1.6rem;          /* el dato manda */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.pv-stat-sub, .pv-stat-trend { font-size: 0.75rem; line-height: 1.35; }

/* --- 6.2 Tarjetas de la cola: una fila densa, no un bloque -------------- */
.pv-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head actions"
        "body actions";
    gap: 4px 18px;
    align-items: center;
    padding: 12px 16px 12px 18px;
    margin-bottom: 10px;
    border-radius: var(--radius-md, 10px);
}
.pv-card-header {
    grid-area: head;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
}
.pv-card-body {
    grid-area: body;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
}
.pv-card-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
}

/* La urgencia es el borde izquierdo de la tarjeta: mismo canal de información,
   cero altura consumida. El <div class="pv-urgency-bar"> se eliminó del template,
   así que aquí no hace falta ocultar nada. */
.pv-card { border-left: 4px solid var(--color-border); }
.pv-card--green  { border-left-color: var(--color-success); }
.pv-card--yellow { border-left-color: var(--color-warning, #B8860B); }
.pv-card--red    { border-left-color: var(--color-error); }
.pv-card--expired{ border-left-color: var(--color-text-muted); }

/* Detalles en línea: etiqueta pequeña arriba, dato legible debajo */
.pv-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 0;
}
.pv-detail-item { display: flex; flex-direction: column; gap: 0; }
.pv-detail-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.pv-detail-value { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.pv-amount { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pv-code   { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.02em; }

.pv-owner { font-size: 0.9rem; font-weight: 600; }
.pv-timer { display: flex; align-items: baseline; gap: 6px; margin-left: auto; }
.pv-timer-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.pv-timer-value { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.pv-card-actions .btn { min-height: 36px; padding: 6px 14px; font-size: 0.82rem; white-space: nowrap; }

@media (max-width: 760px) {
    .pv-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "body" "actions";
    }
    .pv-card-actions { flex-direction: row; }
    .pv-card-actions .btn { flex: 1; min-height: 44px; }
    .pv-timer { margin-left: 0; }
}

/* --- 6.3 Aviso de pagos nuevos (reemplaza al reload destructivo) -------- */
.pv-newpay {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface);
}
.pv-newpay-text { flex: 1; font-size: 0.9rem; }

/* --- 6.4 Buscador del historial (antes estaba `disabled`) --------------- */
.pv-detail-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pv-detail-search-input {
    flex: 1;
    min-width: 200px;
    padding: 7px 12px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    font-size: 0.85rem;
}
.pv-detail-clear { font-size: 0.8rem; color: var(--color-text-muted); }

.pv-yape-empty-cell {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* --- 6.5 Paginación real del historial --------------------------------- */
.pv-yape-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
}
.pv-yape-pagination .admin-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pv-page-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.pv-page-btn:hover { background: var(--color-primary); color: #FFFFFF; }
.pv-page-current { font-size: 0.8rem; color: var(--color-text-muted); }

/* --- 6.7 Planes del propietario (owner_plans) ---------------------------
   Mismo criterio en la página que ve el propietario al elegir modalidad: los
   tres planes deben poder compararse sin hacer scroll. */
.plans-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    /* `stretch` (no `start`): con `start` cada tarjeta se ajustaba a su contenido
       y los tres planes quedaban de alturas distintas, que es difícil de comparar. */
    align-items: stretch;
}

.plans-grid-3 .plan-card {
    padding: 16px 18px;
    border-radius: var(--radius-lg, 14px);
    /* Columna con la lista de beneficios elástica: así los CTA de los tres planes
       se alinean al pie aunque un plan tenga una ventaja más que otro. */
    display: flex;
    flex-direction: column;
}
.plans-grid-3 .plan-features { flex: 1 1 auto; }
.plans-grid-3 .plan-card > :last-child { margin-top: auto; }

.plans-grid-3 .plan-price {
    font-size: 2.4rem;                      /* la cifra manda */
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 2px 0 4px;
}
.plans-grid-3 .plan-price-num { font-size: inherit; font-weight: 800; }
.plans-grid-3 .plan-price-per {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.plans-grid-3 .plan-price-note { font-size: 0.78rem; line-height: 1.35; margin: 0 0 10px; }

/* Nombre del plan legible sin competir con la cifra */
.plans-grid-3 .plan-card h2,
.plans-grid-3 .plan-card h3 { font-size: 1.05rem; margin: 0 0 2px; }
.plans-grid-3 .plan-badge-type {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Beneficios más densos: la lista no debe estirar la tarjeta */
.plans-grid-3 .plan-features {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 0.84rem;
    line-height: 1.4;
}
.plans-grid-3 .plan-for { font-size: 0.78rem; line-height: 1.4; }

/* ============================================================================
   9. SISTEMA DE BOTONES — opción C (jerarquía por contorno) + press de B
   ============================================================================
   Decisión del usuario sobre los prediseños. El problema de fondo no era la
   forma sino la JERARQUÍA: el terracota se usaba en tantos sitios que ya no
   señalaba nada.

   Tres niveles:
     .btn-primary  → AZUL. Acción principal cotidiana (navegar, ver, gestionar).
     .btn-accent   → TERRACOTA. Solo lo que mueve dinero o cierra un trato:
                     publicar, suscribirse, aprobar un pago, reactivar visibilidad.
     .btn-secondary→ Contorno. Acción alternativa.
   Y de la opción B se toma el desplazamiento al pulsar, porque en móvil —donde
   está la mayoría de los usuarios— el hover no existe.
   ============================================================================ */

/* --- 9.1 Base compartida ------------------------------------------------ */
.btn {
    /* flex-shrink en el icono: sin esto el SVG se comprime y el conjunto
       icono+texto se desalinea (era el caso de "Publicar Propiedad"). */
    line-height: 1.2;
    min-height: 40px;
}
.btn > svg { flex: 0 0 auto; }

/* Respuesta al pulsar (opción B): funciona en táctil, donde no hay hover. */
.btn:active:not([disabled]):not([aria-disabled="true"]) {
    transform: translateY(1px);
}

/* Deshabilitado explícito: antes era indistinguible de uno activo. */
.btn[disabled],
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

/* --- 9.2 Primario: azul para la acción cotidiana ------------------------ */
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}
.btn-primary:hover:not([disabled]) {
    background: var(--color-primary-light, #2D4A6F);
    border-color: var(--color-primary-light, #2D4A6F);
    color: #FFFFFF;
}

/* --- 9.3 Acento: solo dinero o cierre de trato ------------------------- */
.btn-accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF;
}
.btn-accent:hover:not([disabled]) {
    background: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
    color: #FFFFFF;
}

/* --- 9.4 Secundario: contorno ------------------------------------------ */
.btn-secondary {
    background: transparent;
    border-color: var(--color-border-control);
    color: var(--color-text);
}
.btn-secondary:hover:not([disabled]) {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.05));
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* --- 9.5 Modo oscuro ---------------------------------------------------
   La observación del usuario: "algunos botones y links usan colores oscuros
   que dificultan el uso", en los tres roles. La causa es que varios controles
   heredaban literales sin equivalente oscuro. Aquí se fijan por token. */
body.dark-theme .btn-primary {
    background: var(--color-primary-light, #2D4A6F);
    border-color: var(--color-primary-light, #2D4A6F);
    color: #FFFFFF;
}
body.dark-theme .btn-primary:hover:not([disabled]) {
    background: #3E5F8A;
    border-color: #3E5F8A;
}
body.dark-theme .btn-accent {
    background: var(--color-accent);           /* #E87A40 */
    border-color: var(--color-accent);
    color: #0D1420;                            /* 6.40:1 — el blanco daría 2.88:1 */
}
body.dark-theme .btn-accent:hover:not([disabled]) {
    background: var(--color-accent-deep);      /* #F09A6A */
    border-color: var(--color-accent-deep);
    color: #0D1420;
}
body.dark-theme .btn-secondary {
    color: var(--color-text);
    border-color: var(--color-border-control);
    background: transparent;
}
body.dark-theme .btn-secondary:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary-light, #58A6FF);
}

/* Enlaces sueltos dentro de superficies oscuras */
body.dark-theme a:not(.btn):not(.nav-link):not(.n) {
    color: var(--color-primary-light, #58A6FF);
}

/* --- 9.6 Amenidades del formulario en modo oscuro ----------------------
   `.amenity-checkbox` fija #e2e8f0 y #f0f7ff a mano y no tenía NINGÚN override
   oscuro, así que al elegir una amenidad la ficha se quedaba en blanco. */
body.dark-theme .amenity-checkbox {
    background: var(--color-surface);
    border-color: var(--color-border-control);
    color: var(--color-text);
}
body.dark-theme .amenity-checkbox:hover {
    background: var(--color-surface-elevated, #30363D);
    border-color: var(--color-primary-light, #58A6FF);
}
/* Seleccionada: se marca con el acento, no con un fondo claro */
body.dark-theme .amenity-checkbox:has(input:checked) {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    border-color: var(--color-accent);
}
.amenity-checkbox:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* --- 9.7 El panel del tour, por encima del elemento resaltado ----------
   Ver el comentario en base.html: el panel se sacó del overlay para escapar de
   su contexto de apilamiento. Aquí recibe su z-index en la raíz y su estado
   visible, que antes heredaba por selector descendiente. */
.guide-panel {
    z-index: 9100;
    pointer-events: none;
}
.guide-panel.guide-visible {
    pointer-events: auto;
    animation: guideSlideUp 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.guide-panel:not(.guide-visible) {
    opacity: 0;
    visibility: hidden;
}

/* ============================================================================
   NAVEGACIÓN PRINCIPAL — criterio de rubro inmobiliario
   ============================================================================
   Antes: tres enlaces de solo texto, sin icono ni jerarquía. En este sector el
   cliente busca por ZONA, así que "Buscar en el mapa" se destaca: es lo que un
   tablero de clasificados no puede ofrecer, y es el argumento de venta del
   propio producto.
   ============================================================================ */
.nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    min-height: 38px;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease;
}
.nav-links .nav-link__icon { flex-shrink: 0; opacity: 0.85; }

.nav-links .nav-link:hover { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; }

/* --- Opción N3 -----------------------------------------------------------
   Regla que resuelve el "naranja pegado": el estado ACTUAL y el HOVER nunca
   usan el mismo recurso visual. Antes ambos pintaban relleno acento, así que un
   hover que persistía tras el click era indistinguible de "estás aquí" y el
   botón parecía atascado.
   Ahora: las SECCIONES marcan lo actual con un riel inferior; el hover solo
   aclara el fondo. */
.nav-links .nav-link.active {
    color: #FFFFFF;
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--color-accent);
}
.nav-links .nav-link.active .nav-link__icon { opacity: 1; }

/* El mapa es una ACCIÓN, no una sección: lleva contorno propio y solo se
   rellena de acento mientras el puntero está encima. Al estar ya en el mapa
   marca el contorno en acento SIN rellenarse, así que nunca queda "pegado". */
.nav-links .nav-link--map {
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: none;
}
.nav-links .nav-link--map:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF;
}
.nav-links .nav-link--map.active {
    background: transparent;
    border-color: var(--color-accent);
    color: #FFFFFF;
    box-shadow: none;
}
/* En táctil no hay hover que persista, pero sí un :focus tras el toque: se
   neutraliza el relleno para que no imite al estado activo. */
@media (hover: none) {
    .nav-links .nav-link--map:hover,
    .nav-links .nav-link--map:focus {
        background: transparent;
        border-color: var(--color-accent);
    }
}

/* En móvil el menú se despliega en columna: los enlaces ocupan el ancho y
   mantienen el área táctil de 44px. */
@media (max-width: 900px) {
    .nav-links .nav-link {
        width: 100%;
        min-height: 44px;
        border-radius: var(--radius-md, 10px);
        justify-content: flex-start;
    }
}

/* ============================================================================
   FASE 5 — ANTICRESIS Y SEÑALES DE CONFIANZA
   ============================================================================
   Anticresis es lo que diferencia a Rent-Wasi de un clasificado, y la UI no la
   explicaba en ningún sitio: era un valor de <select>, un badge y un cambio de
   etiqueta de precio. Aquí gana superficie propia.
   Decisión de producto del usuario: Rent-Wasi SOLO PUBLICA, no interviene. El
   lenguaje es explícito en eso y no promete garantías.
   ============================================================================ */

/* --- 7.1 Bloque explicativo de anticresis ------------------------------- */
.anticresis-block {
    margin: 22px 0;
    padding: 20px 22px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-lg, 14px);
}

.anticresis-block__head { margin-bottom: 10px; }
.anticresis-block__tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--color-accent);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.anticresis-block h2 { margin: 0; font-size: 1.12rem; line-height: 1.25; }

.anticresis-block__lead {
    margin: 0 0 16px;
    font-size: 0.94rem;
    line-height: 1.6;
}

/* Los tres hechos del instrumento: qué entregas, qué pagas, qué recuperas */
.anticresis-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
}
.anticresis-fact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 16px;
    border-right: 1px solid var(--color-border);
}
.anticresis-fact:last-child { border-right: none; }
.anticresis-fact__label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.anticresis-fact__value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.anticresis-fact__note { font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.35; }

/* El aviso más importante de la página: Rent-Wasi no es parte del contrato */
.anticresis-warning {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-warning-bg, #FEF9E7);
    color: var(--color-warning-text, #7D6608);
    border: 1px solid var(--color-warning-border, #FDE68A);
    font-size: 0.88rem;
    line-height: 1.5;
}
.anticresis-warning svg { flex-shrink: 0; margin-top: 2px; }

.anticresis-check__title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
}
.anticresis-check {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.anticresis-check li::marker { color: var(--color-accent); }

@media (max-width: 560px) {
    .anticresis-fact { border-right: none; border-bottom: 1px solid var(--color-border); }
    .anticresis-fact:last-child { border-bottom: none; }
}

/* --- 7.2 Tarjeta de confianza del propietario --------------------------- */
.pd-owner-card {
    padding: 15px 0;
    border-top: 1px solid var(--color-border);
}
.pd-owner-card__title {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}
.pd-owner-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}
.pd-owner-card__avatar {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
}
.pd-owner-card__id { display: flex; flex-direction: column; min-width: 0; }
.pd-owner-card__name {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.pd-owner-card__since { font-size: 0.76rem; color: var(--color-text-muted); }

/* Nivel de verificación: User.verification_level ya existía y no se mostraba */
.pd-verify {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 600;
}
.pd-verify--identity { background: var(--color-success-bg, #D5F5E3); color: var(--color-success-text, #145A32); }
.pd-verify--phone    { background: var(--color-info-bg, #D6EAF8);    color: var(--color-info-text, #154360); }
.pd-verify--email    { background: var(--color-surface-muted, #EDE8E2); color: var(--color-text-secondary, #4A4A4A); }
.pd-verify--none     { background: var(--color-warning-bg, #FEF9E7); color: var(--color-warning-text, #7D6608); }

.pd-owner-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 10px;
}
.pd-owner-card__stats dt {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.pd-owner-card__stats dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pd-owner-card__disclaimer {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

body.dark-theme .anticresis-block,
body.dark-theme .pd-owner-card { background: var(--color-surface); }

/* --- 8.1 Barra de progreso por custom property -------------------------
   Reemplaza `style="width: {{ valor }}%"`, que con el locale es-PE
   renderizaba `width: 92,3%` — coma decimal inválida en CSS, así que la
   declaración se descartaba y la barra siempre medía 0. */
.pv-stat-progress-fill,
.progress-fill--data {
    width: var(--fill, 0%);
}


/* ============================================================================
   10. PANEL DE CONFIGURACIÓN (admin)
   ============================================================================
   Un solo sitio para lo que el administrador debe poder cambiar sin tocar código:
   datos de cobro, QR y precios. Antes el número de Yape y la cuenta bancaria
   estaban escritos a mano en el template de pago, el QR no existía, y los precios
   —que sí eran editables— quedaron al pie de la página de pagos, detrás del
   historial, donde no se encontraban.
   ============================================================================ */

.cfg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1000px) {
    .cfg-grid { grid-template-columns: minmax(0, 1fr); }
}

.cfg-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    padding: 20px 22px;
}
.cfg-card__head { margin-bottom: 16px; }
.cfg-card__head h2 { font-size: 1.08rem; margin: 0 0 3px; }
.cfg-card__sub { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.45; }

/* Aviso de "sin datos de cobro": es un estado real, no decoración */
.cfg-alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-warning-bg, #FEF9E7);
    color: var(--color-warning-text, #7D6608);
    border: 1px solid var(--color-warning-border, #FDE68A);
    font-size: 0.88rem;
    line-height: 1.5;
}
.cfg-alert svg { flex-shrink: 0; margin-top: 2px; }

/* --- Formulario ---------------------------------------------------------- */
.cfg-form { display: flex; flex-direction: column; gap: 18px; }

.cfg-fieldset {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cfg-fieldset > legend {
    padding: 0 8px 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.cfg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.cfg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cfg-field--narrow { max-width: 220px; }
.cfg-field > label { font-size: 0.82rem; font-weight: 600; }
.cfg-field input,
.cfg-field textarea { width: 100%; }
.cfg-help { font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.4; }
.cfg-errors {
    padding: 10px 14px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-error-bg, #FADBD8);
    color: var(--color-error-text, #922B21);
    font-size: 0.86rem;
}

/* --- QR de cobro: la vista previa es el dato, no un adorno --------------- */
.cfg-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cfg-qr__preview {
    width: 128px; height: 128px;
    object-fit: contain;
    padding: 8px;
    background: #FFFFFF;                  /* un QR necesita fondo blanco para leerse */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
}
.cfg-qr__empty {
    width: 128px; height: 128px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 1px dashed var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    color: var(--color-text-muted);
    font-size: 0.76rem;
}
.cfg-qr__input { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }

.cfg-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.cfg-meta { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.4; }

/* --- Precios: caja pequeña, cifra grande (criterio de la ronda anterior) - */
.cfg-prices { display: flex; flex-direction: column; gap: 12px; }

.cfg-price {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
}
.cfg-price__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cfg-price__name { font-size: 0.9rem; font-weight: 600; }
.cfg-price__current {
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.cfg-price__edit { display: flex; align-items: center; gap: 8px; position: relative; }
.cfg-price__currency {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.82rem; color: var(--color-text-muted); pointer-events: none;
}
.cfg-price__input {
    flex: 1; min-width: 0;
    padding: 8px 8px 8px 30px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--color-surface);
    color: var(--color-text);
}

/* Enlace desde la página de pagos a su nuevo sitio */
.pv-config-link {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 0;
    padding: 11px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    font-size: 0.86rem;
    color: var(--color-text-muted);
}
.pv-config-link svg { flex-shrink: 0; }
.pv-config-link a { font-weight: 600; }

/* --- 10.1 Pantalla de pago con datos configurables --------------------- */
.payment-unavailable {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--radius-md, 10px);
    background: var(--color-warning-bg, #FEF9E7);
    color: var(--color-warning-text, #7D6608);
    border: 1px solid var(--color-warning-border, #FDE68A);
    font-size: 0.88rem;
    line-height: 1.5;
}
.payment-unavailable svg { flex-shrink: 0; margin-top: 2px; }

/* El QR necesita fondo blanco para que la cámara lo lea, también en oscuro. */
.payment-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
}
.payment-qr img {
    width: 168px; height: 168px;
    object-fit: contain;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
}
.payment-qr__hint { font-size: 0.78rem; color: var(--color-text-muted); }

.payment-cci { font-size: 0.8rem; margin: 6px 0 0; }
.payment-note-admin {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.04));
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Alternativa de copia cuando el portapapeles no está disponible */
.copy-manual { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; }
.copy-manual label { font-size: 0.78rem; font-weight: 600; }
.copy-manual input {
    padding: 8px 10px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    font-family: ui-monospace, Consolas, monospace;
    background: var(--color-surface);
    color: var(--color-text);
}

/* ============================================================================
   11. PANEL DE CONFIGURACIÓN DE COBRO  (accounts/admin_settings.html)
   ============================================================================
   Perspectiva financiera, no "formulario de ajustes": esta pantalla decide por
   dónde entra el dinero del negocio. Se lee como un estado de cuenta —resumen
   arriba, detalle abajo— y todo dato que se compara o se copia (números de
   celular, cuentas, CCI, importes) va en monospace con tabular-nums para que
   los dígitos se alineen en columna y un 1 ocupe lo mismo que un 8.
   ============================================================================ */

:root {
    /* Tinta de estado de cuenta: derivada de --color-primary (#1D4E89),
       oscurecida hasta que el label auxiliar #9FB6CC rinde 6.4:1 encima. */
    --cfg-ink:        #12304F;
    --cfg-ink-line:   rgba(255, 255, 255, 0.14);
    --cfg-ink-label:  #9FB6CC;
    --cfg-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
body.dark-theme {
    --cfg-ink:       #101A26;
    --cfg-ink-line:  rgba(255, 255, 255, 0.10);
    --cfg-ink-label: #8FA6BC;
}
/* En oscuro la tinta queda muy cerca del fondo de página: sin borde la tira de
   resumen deja de leerse como un bloque y se disuelve en el lienzo. */
body.dark-theme .cfg-summary { border: 1px solid var(--color-border); }

/* --- 11.1 Chip de estado en el encabezado ---------------------------------- */
.cfg-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.cfg-state__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cfg-state--on {
    color: var(--color-success);
    border-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
}
.cfg-state--off {
    color: var(--color-error-dark);
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}
body.dark-theme .cfg-state--off { color: #FF9A8F; }

/* --- 11.2 Tira de resumen: el estado de cuenta ----------------------------- */
.cfg-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--cfg-ink);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    margin: 0 0 20px;
}
.cfg-summary__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 20px;
    border-left: 1px solid var(--cfg-ink-line);
    min-width: 0;
}
.cfg-summary__item:first-child { border-left: 0; }
.cfg-summary__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cfg-ink-label);
}
.cfg-summary__value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}
.cfg-summary__value--num {
    font-family: var(--cfg-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.cfg-summary__sub { font-size: 0.76rem; color: var(--cfg-ink-label); }

@media (max-width: 900px) {
    .cfg-summary { grid-template-columns: repeat(2, 1fr); }
    .cfg-summary__item:nth-child(3) { border-left: 0; }
    .cfg-summary__item:nth-child(n + 3) { border-top: 1px solid var(--cfg-ink-line); }
}
@media (max-width: 520px) {
    .cfg-summary { grid-template-columns: 1fr; }
    .cfg-summary__item { border-left: 0; border-top: 1px solid var(--cfg-ink-line); }
    .cfg-summary__item:first-child { border-top: 0; }
}

/* --- 11.3 Aviso de cobro sin configurar ----------------------------------- */
.cfg-alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 16px;
    margin: 0 0 20px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-error);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--color-error) 8%, var(--color-surface));
    color: var(--color-text);
    font-size: 0.88rem;
    line-height: 1.55;
}
.cfg-alert svg { flex: 0 0 auto; margin-top: 2px; color: var(--color-error-dark); }
body.dark-theme .cfg-alert svg { color: #FF9A8F; }

/* --- 11.4 Rejilla y tarjetas ---------------------------------------------- */
.cfg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1040px) { .cfg-grid { grid-template-columns: 1fr; } }

.cfg-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}
.cfg-card__head {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}
.cfg-card__head h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.cfg-card__sub { margin: 4px 0 0; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; }

.cfg-form { padding: 4px 20px 20px; }

/* --- 11.5 Fieldsets como secciones de libro contable ---------------------- */
.cfg-fieldset {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0;
    padding: 18px 0 4px;
}
.cfg-form > .cfg-fieldset:first-of-type { border-top: 0; }
.cfg-fieldset > legend {
    padding: 0 0 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.cfg-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.cfg-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; min-width: 0; }
.cfg-row > .cfg-field { margin-bottom: 0; }
.cfg-row + .cfg-field { margin-top: 14px; }
.cfg-field--narrow { max-width: 210px; }
.cfg-field > label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--color-text);
}
.cfg-field input[type="text"],
.cfg-field input[type="number"],
.cfg-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
    font-family: inherit;
}
/* Los campos que contienen dinero o identificadores van en monospace: se leen
   dígito a dígito y se comparan contra el comprobante del banco. */
.cfg-field input.cfg-input--num {
    font-family: var(--cfg-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.cfg-field textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.cfg-help { font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.45; }
.cfg-help:empty { display: none; }
.cfg-field .error { font-size: 0.78rem; color: var(--color-error-dark); font-weight: 600; }
body.dark-theme .cfg-field .error { color: #FF9A8F; }
.cfg-errors {
    padding: 10px 14px;
    margin: 16px 0 0;
    border-left: 3px solid var(--color-error);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    font-size: 0.85rem;
}
.cfg-errors ul { margin: 0; padding-left: 18px; }

/* Sufijo/prefijo de unidad pegado al campo (min, S/) */
.cfg-unit { position: relative; display: flex; align-items: center; }
.cfg-unit > input { padding-right: 46px; }
.cfg-unit__suffix {
    position: absolute;
    right: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    pointer-events: none;
}
.cfg-unit--lead > input { padding-right: 12px; padding-left: 34px; }
.cfg-unit__prefix {
    position: absolute;
    left: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* --- 11.6 QR de cobro ----------------------------------------------------- */
.cfg-qr { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cfg-qr__preview {
    width: 132px; height: 132px;
    object-fit: contain;
    padding: 8px;
    background: #FFFFFF;              /* el QR necesita blanco tambien en oscuro */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    flex: 0 0 auto;
}
.cfg-qr__empty {
    width: 132px; height: 132px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    color: var(--color-text-muted);
    font-size: 0.76rem;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}
.cfg-qr__side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* --- Selector de archivo (componente COMPARTIDO) --------------------------
   Se usa aquí (QR de cobro) y en la pantalla de pago (captura de Yape). Los dos
   sitios mostraban el widget crudo del navegador —"Seleccionar archivo / Sin
   archivos seleccionados"—, imposible de maquetar y distinto en cada navegador.
   El input[type=file] real va dentro del label y oculto a la vista, pero NO con
   display:none: así conserva foco de teclado y sigue siendo activable.
   El nombre del archivo elegido lo escribe initFilePick() en main.js. */
.file-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 9px 15px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}
/* main.css tiene `.form-group label { display: block }` (0,1,1), que vencía a
   `.file-pick` (0,1,0) y estiraba el botón a todo el ancho del formulario. */
.form-group label.file-pick { display: inline-flex; }
.file-pick:hover { background: var(--color-surface-muted, rgba(0, 0, 0, 0.04)); border-color: var(--color-primary); }
.file-pick:focus-within { outline: 3px solid var(--color-accent-deep); outline-offset: 2px; }
/* Selector con el padre para ganar a los `input[type="file"]` de main.css
   (0,1,1 de especificidad): con `.file-pick__input` a secas el width:100% de
   main.css vencía y el input medía 1910px, desbordando la página en horizontal. */
.file-pick > .file-pick__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.file-pick__name {
    font-family: var(--cfg-mono);
    font-size: 0.76rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}
.file-pick__name:empty { display: none; }

/* align-self es obligatorio: como hijo flex de .cfg-qr__side el inline-flex se
   blockifica a flex y el stretch por defecto lo estiraba a todo el ancho,
   dejando la casilla y su texto separados por medio panel. */
.cfg-check {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    cursor: pointer;
}
/* Igual que arriba: hay que vencer al `input[type="checkbox"]` de main.css. */
.cfg-check > .cfg-check__input {
    flex: 0 0 auto;
    width: 17px; height: 17px;
    margin: 0;
    accent-color: var(--color-error);
    cursor: pointer;
}
.cfg-check > span { flex: 0 0 auto; }

/* --- 11.7 Acciones y rastro de auditoria --------------------------------- */
.cfg-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--color-border);
}
.cfg-trail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.cfg-trail svg { flex: 0 0 auto; }
.cfg-trail--none { font-style: italic; }

/* --- 11.8 Tarifas: filas de libro mayor ---------------------------------- */
.cfg-prices { display: flex; flex-direction: column; }
.cfg-price {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}
.cfg-prices > .cfg-price:first-child { border-top: 0; }
.cfg-price__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cfg-price__name { font-size: 0.9rem; font-weight: 600; }
.cfg-price__amount {
    font-family: var(--cfg-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    white-space: nowrap;
}
.cfg-price__cur { font-size: 0.82rem; font-weight: 600; margin-right: 3px; color: var(--color-text-muted); }
.cfg-price__edit { display: flex; gap: 8px; align-items: stretch; }
.cfg-price__edit .cfg-unit { flex: 1 1 auto; min-width: 0; }
.cfg-price__input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--cfg-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 600;
}
.cfg-price__edit .btn { flex: 0 0 auto; }

/* ============================================================================
   12. PANTALLA DE PAGO — reglas antes de enviar
   ============================================================================ */
.payment-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}
.payment-steps__item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 15px 18px;
    border-left: 1px solid var(--color-border);
    font-size: 0.85rem;
    line-height: 1.5;
}
.payment-steps__item:first-child { border-left: 0; }
.payment-steps__num {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.payment-steps__item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.payment-steps__item strong { font-size: 0.88rem; }
/* Selector de hijo directo a propósito: `.payment-steps__item span` (0,1,1)
   también alcanzaba a .payment-steps__num (0,1,0) y le pisaba el blanco con
   gris, dejando el número ilegible dentro del círculo azul. */
.payment-steps__item > div > span { color: var(--color-text-muted); }
/* El plazo es el unico dato de esta tira que el propietario debe recordar. */
.payment-steps__window { color: var(--color-accent); font-weight: 700; white-space: nowrap; }

@media (max-width: 780px) {
    .payment-steps { grid-template-columns: 1fr; }
    .payment-steps__item { border-left: 0; border-top: 1px solid var(--color-border); }
    .payment-steps__item:first-child { border-top: 0; }
}

/* Iconos de los avisos de pago: antes iban con style="" inline, prohibido. */
.payment-hint__icon { flex: 0 0 auto; margin-top: 2px; }

/* Boton a todo el ancho: reemplaza style="width:100%" inline. */
.btn-block { width: 100%; justify-content: center; }