/* ════════════════════════════════════════════════════════════════════════
   🔆 [f215] MOSTRADOR LEGIBLE
   ------------------------------------------------------------------------
   1. Contraste ≥ 4.5:1 (WCAG 2.1 AA) en los 11 temas, con el mismo look:
      solo se oscurecen los grises y acentos que fallaban.
   2. Botones del mostrador: ≥ 48 px lo principal (quitar del ticket, billetes rápidos,
      ± de la caja, confirmar el cobro) y ≥ 44 px lo demás (pestañas, chips, canal, cerrar).
   3. Letra ≥ 14 px en Vender, Cobro y Caja.
   4. Modo sol (body.modo-sol, lo prende legible.js): negro sobre blanco, bordes marcados,
      contraste ≥ 7:1 y letra grande en toda la app. Va sobre la base del tema Fácil.
   Se carga DESPUÉS de temas-pro.css para ganarle a los temas con la misma especificidad.
   ════════════════════════════════════════════════════════════════════════ */

/* ══════════ 1 · CONTRASTE POR TEMA (≥ 4.5:1) ══════════ */
/* Texto terciario: sobre el fondo «sutil» quedaba en 4.2–4.4:1 */
body:not(.tema-v2) { --pp-texto-3: #66666E; }                 /* Clásico   · #71717A → 5.2:1 sobre #F4F4F5 */
body.tema-v2.tema-belleza { --pp-texto-3: #7A595F; }          /* Belleza   · #87666B → 5.1:1 sobre #F8E8E7 */
body.tema-v2.tema-andes { --pp-texto-3: #6E5A49; }            /* Andes     · #7F6B59 → 5.3:1 sobre #F1E8DB */
/* IA: el texto sobre el acento violeta era blanco (3.3:1); ahora oscuro (6.0:1), como Black y Orquídea */
body.tema-v2.tema-ia { --pp-sobre-acento: #0B0820; }

/* La palabra técnica chica («CRM», «kardex»): sin transparencia */
body .sen-tec { opacity: 1; }

/* Carrito del catálogo (cara A) */
#carrito-body-lista > div[style*="#999"] { color: #6B6B6B !important; }
body:not(.tema-v2) .btn-wsp-checkout { background: #00796B; box-shadow: 0 6px 15px rgba(0, 121, 107, .3); }
body:not(.tema-v2) #carrito-total-ui { color: #00796B; }
body.tema-v2 .btn-wsp-checkout { color: var(--pp-sobre-acento, #fff); }
body.tema-v2 #carrito-total-ui { color: var(--pp-acento-texto, var(--pp-acento)); }

/* ══════════ 2 · BOTONES DEL MOSTRADOR ══════════ */
/* Vender: pestañas del módulo, canal, CÓDIGO · CATEGORÍAS · LIBRE · Cotizar, «En espera» (44 px) */
#mc-pestanas .mc-pill { min-height: 44px; }
#mod-mostrador .pp-pos-pestanas .sub-mostrador { min-height: 44px; }
#mod-mostrador .pp-pos-canal { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
#mod-mostrador #listaCanales { min-height: 44px; padding-top: 0; padding-bottom: 0; }
#mod-mostrador #esp-btn { min-height: 44px; }
#mod-mostrador .pf-verif-x { min-width: 44px; min-height: 44px; }
/* Ticket: foto y precio a 44 px; quitar, a 48 px (lo que más se toca) */
#cuerpo-ticket .pp-tk-fila .pf-tk-foto { width: 44px !important; height: 44px !important; flex-shrink: 0; }
#cuerpo-ticket .pp-tk-fila .pp-tk-precio { min-height: 44px; }
#cuerpo-ticket .pp-tk-fila .pp-tk-quitar { width: 48px !important; height: 48px !important; min-width: 48px; flex-shrink: 0; }
/* Cobro: lo recibido, billetes rápidos y los botones de abajo (48 px) */
#modalPago #cbm-recibido { min-height: 48px; }
#modalPago .cbm-bill { min-height: 48px; }
#modalPago .pp-cobro-pie .pp-btn { min-height: 48px; }
/* Caja: ± y casillas de billete por billete (48 px), cerrar la hoja (44 px) */
#cja-hoja .cja-den-step button { width: 48px; height: 48px; min-width: 48px; }
#cja-hoja .cja-den-step input { min-height: 48px; }
#cja-hoja .pp-modal-x { min-width: 44px; min-height: 44px; }
#cja-hoja .cja-hoja-btns .pp-btn { min-height: 48px; }   /* Cancelar · Cerrar caja (en Black y Ejecutivo medían 40) */
/* Íconos de arriba (tienda online, avisos, menú): 44 px también en Black y Ejecutivo */
#vista-erp .header-erp :is(.hdr-icon-btn, button[onclick^="toggleMenuLateral"]) { min-width: 44px; min-height: 44px; }
/* Campos grandes de f214: el campo ocupa todo el recuadro */
.cja-tot-campo input, .dc-monto input { align-self: stretch; min-height: 56px; }
/* Inicio: la X de «Tu misión» */
#mod-inicio .ms-ini-x { min-width: 44px; min-height: 44px; }

/* ══════════ 3 · LETRA ≥ 14 px EN VENDER, COBRO Y CAJA ══════════ */
/* (la barra de abajo y los números de las campanitas quedan como están) */
#mc-pestanas .mc-pill,
#mod-mostrador :is(.pp-num-mini-rotulo, .sub-mostrador, .pp-comprobante-nota, .pp-comprobante-nota b, #pp-tk-cuenta, .cbm-esp-btn, .pp-tk-meta, .pp-mono:not(input), .pp-pos-rol) { font-size: 14px; }
/* (los campos y el selector de canal no se tocan: en el celular ya van a 16 px desde f211, para que no haga zoom) */
#mod-mostrador #header-usuario-rol.pp-pos-rol { font-size: 14px; }
#modalPago :is(.pp-rotulo, .pp-etiqueta-seccion, .cbm-vuelto span, small) { font-size: 14px; }
#modalPago span:has(> small) > b { font-size: 14px; }   /* «Usar saldo a favor» */
#modalPago .pp-etiqueta-seccion { letter-spacing: .02em; }
#cja-hoja :is(.pp-etiqueta-seccion, .cja-den-lbl, .cja-den-sub, small) { font-size: 14px; }

/* ══════════ 4 · MODO SOL ══════════ */
/* Paleta: negro sobre blanco, acentos oscuros (≥ 7:1). Va sobre el tema Fácil (legible.js lo pone) */
body.modo-sol.modo-sol.tema-v2 {
    --pp-fondo: #FFFFFF;
    --pp-superficie: #FFFFFF;
    --pp-sutil: #F1F3F5;
    --pp-borde: #4B5563;
    --pp-borde-fuerte: #111827;
    --pp-texto: #000000;
    --pp-texto-2: #111827;
    --pp-texto-3: #1F2937;
    --pp-texto-off: #4B5563;
    --pp-acento: #0B3D91;
    --pp-acento-hover: #082E6E;
    --pp-acento-texto: #0B3D91;
    --pp-sobre-acento: #FFFFFF;
    --pp-acento-suave: #DCE6F7;
    --pp-positivo: #005A2B;
    --pp-negativo: #9A0000;
    --pp-aviso: #5C3600;
    --turquesa: #00563D;
    background: #FFFFFF;
    color: #000000;
}
/* Bordes marcados en tarjetas, campos y botones secundarios */
body.modo-sol :is(.pp-tarjeta, .pp-campo, .pp-btn--secundario, .pp-neg-lista, .pp-neg-it, .dc-f-fila, .dc-chip, .cja-den, .i11-sec button, .i11-hoy, .i11-tudia) { border-color: #4B5563 !important; }
body.modo-sol :is(.pp-campo, input, select, textarea) { border-width: 2px; }
/* Sin grises claros ni transparencias en el texto */
body.modo-sol :is(.sen-tec, small, .pp-chip, .pp-rotulo, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .i11-hoy > small, .i11-tres em) { color: var(--pp-texto-2) !important; opacity: 1 !important; }
body.modo-sol ::placeholder { color: #4B5563 !important; opacity: 1; }
body.modo-sol #carrito-body-lista > div[style*="#999"] { color: #333333 !important; }
body.modo-sol #cja-hoja .cja-den-lbl { background: #F1F3F5; color: #000000; }
/* Letra ≥ 16 px en lo del día; el resto, con las letras grandes del tema Fácil */
body.modo-sol :is(#mod-inicio, #mod-mostrador, #modalPago, #cja-hoja, .dc-velo) :is(small, em, .sen-tec, .pp-chip, .pp-rotulo, .pp-etiqueta-seccion, .pp-num-mini-rotulo, .pp-tk-meta, .pp-mono, .cja-den-lbl, .dc-nota, .dc-lbl, .pp-comprobante-nota, .sub-mostrador, #pp-tk-cuenta, .pp-pos-rol, .ms-ini-cab span, .ms-pie span, .i11-tudia small, .i11-urg-t small) { font-size: 16px !important; }
body.modo-sol #mc-pestanas .mc-pill { font-size: 16px; }
body.modo-sol :is(#ini11-acc .i11-sec button span, #sol-btn, .pp-comprobante-nota b, .cbm-esp-btn, .pp-tk-nombre, .pp-tk-signo, .cbm-vuelto span, .dc-volver, .dc-chip, .dc-link) { font-size: 16px !important; }
body.modo-sol #modalPago span:has(> small) > b { font-size: 16px; }
body.modo-sol #cja-hoja :is(.cja-hoja-sub, .cja-total > span, .cja-dif, .cja-plegado > summary, .cja-plegado > summary b, .cja-tot-cambio, .cja-base span, .cja-base small) { font-size: 16px !important; }
body.modo-sol #vista-erp .bottom-nav button span { font-size: 13px; font-weight: 700; }
/* El botón ☀ prendido */
body.modo-sol #sol-btn { background: #000000; color: #FFFFFF; border-color: #000000; }

/* ── El botón ☀ en Vender ── */
#sol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--pp-borde, #E4E4E7); border-radius: 999px; background: var(--pp-superficie, #fff); color: var(--pp-texto, #18181B); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
#sol-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }