/* =====================================================================
   RECETA DE DISEÑO — capa estética (23/10/2026)
   =====================================================================
   [stated] Damián: "publicá estos cambios ... que solamente estemos
   cambiando lo estético, pero que todas las funciones sigan iguales".
   Receta: https://claude.ai/artifact/HipuDH2KpdTyAQDwdhZcEt
   Maqueta aprobada: https://compareya-pruebas.pages.dev

   🔴 ESTE ARCHIVO SOLO TOCA ESTÉTICA. Bordes, esquinas, sombras y fondos.
   Nunca display, visibility, position, tamaños de layout ni nada que
   esconda o mueva un botón. Se carga ÚLTIMO, así gana sin tocar los demás
   .css ni una línea de JS. Para volver atrás alcanza con sacar su <link>
   de index.html (o restaurar copia-restauracion-2026-10-23).

   Lo que aplica, regla por regla:
     1. Profundidad en 3 niveles con sombra suave (opción A de la maqueta).
     2. Pastillas, etiquetas, contadores e iniciales casi rectos (4 px).
     3. Todo bloque gris o celeste lleva borde negro fino (1 px).
     4. Esquinas de 8 px como máximo en cajas y ventanas.
     5. Indicadores con el estilo de la receta (sin encabezado oscuro
        adentro de la pantalla, tarjetas con borde de hoja).
   ===================================================================== */

:root {
  /* Nivel 1: la hoja sobre la mesa · Nivel 2: tarjetas en la hoja ·
     Nivel 3: lo que flota (menú, ventanas, desplegables). */
  --s1: 0 1px 2px rgba(11, 18, 32, .06), 0 3px 10px rgba(11, 18, 32, .07);
  --s2: 0 1px 2px rgba(11, 18, 32, .08), 0 3px 8px rgba(11, 18, 32, .08);
  --s2h: 0 2px 4px rgba(11, 18, 32, .10), 0 8px 18px rgba(11, 18, 32, .14);
  --s3: 0 6px 14px rgba(11, 18, 32, .14), 0 18px 44px rgba(11, 18, 32, .24);
  /* Las sombras que ya usa el sistema pasan a la escala nueva. */
  --shadow-sm: var(--s2);
  --shadow: var(--s2);
  --shadow-lg: var(--s3);
  --borde-fino: 1px solid var(--color-borde-tarjeta, #2c2c2a);
}

/* ---------- 1. PROFUNDIDAD ---------- */
.panel { box-shadow: var(--s1); }
.module-card, .detail-card, .hero-card, .opcion-card, .kanban-column, .lead-card,
.seg-card, .tut-tarjeta, .neg-card, .aviso-card { box-shadow: var(--s2); }
.module-card:hover, .kanban-column:hover, .lead-card:hover, .seg-card:hover,
.opcion-card:hover, .tut-tarjeta:hover { box-shadow: var(--s2h); }
.menu-cuenta-dropdown, .modal-caja, .modal-card, .modal, .ventas-notif-dropdown,
.news-dropdown, .avisos-dropdown { box-shadow: var(--s3); }

/* ---------- 2. PASTILLAS CASI RECTAS ---------- */
.chip, .status-pill, .rol-pill, .act-pill, .act-equipo-tag, .aviso-chip, .broker-chip,
.eq-resumen-cant, .eq-vend, .me-pill, .oport-prepaga, .lead-badge, .leads-lista-estado,
.hist-chip, .prepaga-tag-color, .prepaga-tag, .adjuntos-tag, .lead-tab-badge, .met-total-chip,
.met-comp-chip, .met-comp-badge, .mimes-chip, .objetivo-chip, .objetivo-solapa-n, .mismet-propios-n,
.marca-mock-chip, .neg-rol-n, .neg-item-horas, .neg-var, .plantilla-acordeon-cuenta, .pg-lote-prep,
.precios-tipo-n, .precios-tag, .precios-zona-chip, .precios-nov-n, .precios-tag-nuevo,
.precios-tipo-nuevos, .pg-formato-chip, .rs-solapa-n, .descuento-hasta, .campo-plegable summary small,
.venta-progreso-contador, .seg-col-count, .seg-estado, .seg-ticket-estado, .menu-nav-item .badge,
.seg-stat, .kanban-col-cant, .audit-tab-badge, .seg-card-nuevo, .tareas-filtro, .lead-chip-intencion,
.seg-lista-prepaga, .venta-badge-opcional, .tareas-seccion-num, .acceso-chip, .acceso-select-cuenta,
.seg-tl-duracion, .seg-vigencia-tag, .seg-dni-tag, .seg-chip-vigencia, .cupos-techo-chip,
.mimes-chip-proceso, .aviso-chip-vencido, .aviso-chip-pausado, .venta-secuencia-nro, .leads-cal-cant,
.barra-movil-badge, .tut-tarjeta-icono, .it-pill, .it-tag, .it-eq-al, .it-eq-ok, .it-chip, .cnt {
  border-radius: 4px !important;
}
/* Contadores chiquitos */
.badge, .lead-tab-badge, .audit-tab-badge, .seg-col-count, .kanban-col-cant { border-radius: 3px !important; }
/* Las campanitas del encabezado siguen redondas, como hoy */
#newsBellBtn, #avisosNotifBtn, #ventasNotifBtn { border-radius: 50% !important; }
#newsBellBtn .badge, #avisosNotifBtn .badge, #ventasNotifBtn .badge { border-radius: 999px !important; }
/* Iniciales de personas: cuadradito casi recto */
.hist-vend-avatar, .lead-modal-avatar, .user-chip-avatar, .seg-vendedor-avatar, .acceso-avatar,
.perfil-avatar-grande, .objetivo-vend-pos, .it-av { border-radius: 4px !important; }
/* Barras de avance: puntas casi rectas */
.objetivo-barra, .objetivo-barra-fill, .objetivo-vend-barra, .objetivo-vend-barra-fill, .objetivo-vend-obj-barra,
.objetivo-vend-obj-fill, .objetivo-mini-barra, .borrador-barra, .borrador-relleno, .venta-progreso-barra,
.venta-progreso-relleno, .rs-barra-fondo, .rs-barra-relleno, .imp-barra, .pg-lote-barra,
.video-subir-barra-fondo, .video-subir-barra-relleno, .it-barra, .it-barra > span { border-radius: 3px !important; }
/* Pastillas escritas a mano dentro de las pantallas */
[style*="border-radius:999px"]:not(input):not([role="switch"]),
[style*="border-radius: 999px"]:not(input):not([role="switch"]) { border-radius: 4px !important; }

/* ---------- 3. BLOQUES GRISES CON BORDE FINO ---------- */
.telefono-display, .historial-item, .chatbot-burbuja-bot, .hist-filtros, .mimes-techo, .marca-mock-venta,
.campo-bloqueado, .pg-lote-barra, .seg-accion-ayuda, .oport-nota, .seg-hilo, .av-preex-vista,
.venta-doc-opcional .venta-doc-zona, .venta-campo-bloque, .seg-tl-nota, .modulos-techo-aviso,
.venta-preview-saltar, .bolsa-filtros, .seg-summary, .audit-mas summary, .campo-plegable,
.leads-compartidos-aviso, .tareas-listado, .seg-doc-form, .neg-card-n, .tareas-cat, .bolsa-pastilla {
  border: var(--borde-fino);
}

.bolsa-pastilla { border-radius: 7px !important; }
/* Etiqueta "sin dato": borde fino del mismo tono, como las otras etiquetas */
.canal-chip.canal-otro { border: 1px solid var(--color-border, #8A8A85); }

/* Título de pantalla con su barrita terracota, también en los paneles sin encabezado */
.panel > h2:first-of-type { position: relative; padding-left: 13px; }
.panel > h2:first-of-type::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }

/* ---------- 4. ESQUINAS DE 8 PX COMO MÁXIMO ---------- */
.lead-modal-head-oscuro, .met-comp-total-card, .acceso-masivo-lista { border-radius: 8px; }
.modal-caja, .menu-cuenta-dropdown { border-radius: 8px !important; }
.modo-gestion-campo, .bolsa-filtros, .leads-cal-num, .seg-doc-aviso, .seg-doc-form,
.tareas-cat, .tareas-listado, .seg-doc-recibido, .tut-tarjeta, .btn-tutorial, .modal-video-marco,
.leads-compartidos-aviso { border-radius: 6px; }
.menu-cuenta-dropdown .menu-nav-lista .menu-nav-item:not([hidden]) { border-radius: 4px; }


/* ---------- 6. DISEÑO ESCRITO DENTRO DE LAS PANTALLAS ----------
   Muchas pantallas traen su estilo en el propio elemento (style="...").
   Estas reglas lo alcanzan sin tocar el código: pastillas de 20 px o más
   pasan a casi rectas, cajas de 10 a 14 px a 6 px, y las sombras corridas
   viejas (2-4 px hacia abajo a la derecha) a la sombra suave de la receta.
   Las sombras hacia adentro (inset) NO se tocan: marcan el filtro activo. */
[style*="border-radius:20px"], [style*="border-radius: 20px"],
[style*="border-radius:99px"], [style*="border-radius: 99px"] { border-radius: 4px !important; }
[style*="border-radius:10px"], [style*="border-radius: 10px"],
[style*="border-radius:12px"], [style*="border-radius: 12px"],
[style*="border-radius:14px"], [style*="border-radius: 14px"],
[style*="border-radius:16px"], [style*="border-radius: 16px"] { border-radius: 6px !important; }
[style*="box-shadow:2px 2px 0"], [style*="box-shadow:3px 3px 0"], [style*="box-shadow:4px 4px 0"],
[style*="box-shadow: 2px 2px 0"], [style*="box-shadow: 3px 3px 0"], [style*="box-shadow: 4px 4px 0"],
[style*="box-shadow:0 2px 6px rgba(0,0,0,0.07)"], [style*="box-shadow:0 3px 8px rgba(0,0,0,.20)"] { box-shadow: var(--s2) !important; }
.leads-estado-pill:not(.activo) { box-shadow: var(--s2) !important; }
.leads-estado-pill span { border-radius: 3px !important; }


/* ---------- 7. AVISOS CON SU RECUADRO ----------
   38 avisos del sistema (class="aviso aviso-cuidado", etc.) solo tenían
   estilo dentro de Brokers y Mi Marca: en el resto salían como texto suelto.
   Mismo diseño que ya usan esas dos pantallas. Solo el de peligro lleva borde. */
.aviso { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem 1rem; border-radius: 6px; font-size: .88rem; line-height: 1.5; }
.aviso strong { display: block; margin-bottom: .1rem; }
.aviso p { margin: 0; }
.aviso > .icon-svg, .aviso > svg { flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px; }
.aviso-info { background: var(--aviso-info-fondo); color: var(--aviso-info-texto); }
.aviso-info strong { color: var(--aviso-info-titulo); } .aviso-info .icon-svg { color: var(--aviso-info-icono); }
.aviso-cuidado { background: var(--aviso-cuidado-fondo); color: var(--aviso-cuidado-texto); }
.aviso-cuidado strong { color: var(--aviso-cuidado-titulo); } .aviso-cuidado .icon-svg { color: var(--aviso-cuidado-icono); }
.aviso-peligro { background: var(--aviso-peligro-fondo); color: var(--aviso-peligro-texto); border: 1.5px solid var(--aviso-peligro-borde); }
.aviso-peligro strong { color: var(--aviso-peligro-titulo); } .aviso-peligro .icon-svg { color: var(--aviso-peligro-icono); }
.aviso-ok { background: var(--color-success-soft); color: #1F6B3E; }
.aviso-ok strong { color: var(--color-success); } .aviso-ok .icon-svg { color: var(--color-success); }

/* ---------- 8. GRÁFICOS DE LA RECETA (anillo E y embudo O) ---------- */
.rc-anillo { display: flex; align-items: center; gap: 14px; }
.rc-anillo svg { width: 92px; height: 92px; transform: rotate(-90deg); flex-shrink: 0; }
.rc-anillo strong { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.rc-anillo span { display: block; font-size: .8rem; color: var(--color-text-muted, #57647A); }
.rc-embudo { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; }
.rc-embudo > div { background: var(--color-primary, #1B5A7D); color: #fff; padding: 6px 10px; border-radius: 3px;
  display: flex; justify-content: space-between; gap: 10px; min-width: 170px; box-sizing: border-box; }
.rc-embudo > div.ok { background: var(--color-success, #157F3D); }

/* CRM: el buscador y el mes iguales a los otros campos de la fila */
.leads-panel .filtro-grupo input#leadsBuscador, .leads-panel .filtro-grupo select#leadsFiltroMes { padding: 9px 12px; border: 1px solid var(--color-border, #8A8A85); border-radius: 5px; background: #fff; font-size: .92rem; }


/* ---------- 9. TABLERO DEL CRM COMO LA MAQUETA ----------
   [stated] Damián, comparando su captura con la de la maqueta. Columnas gris
   claro con borde fino, título negro y contador en cuadradito; tarjetas
   blancas de borde fino y sombra suave. El borde izquierdo de color SE QUEDA
   porque dice la intención de compra (rojo muy interesado, ámbar interesado,
   gris poco). "Gestionar" SE QUEDA porque abre los controles del lead:
   pasa a botón secundario, más liviano. */
body .kanban-crm .kanban-column { background: var(--color-surface-alt, #EDEDEB) !important; border: 1px solid var(--color-borde-tarjeta, #2c2c2a) !important;
  border-radius: 6px !important; box-shadow: var(--s2) !important; }
body .kanban-crm .kanban-column:hover { box-shadow: var(--s2) !important; }
body .kanban-crm .kanban-column .kanban-column-header { background: transparent !important; border-bottom: 0 !important; padding: 9px 10px 4px !important; }
body .kanban-crm .kanban-column .kanban-col-titulo { color: var(--color-text, #0B1220) !important; }
body .kanban-crm .kanban-column .kanban-col-cant { background: var(--color-primary-dark, #123F57) !important; color: #fff !important;
  border: 0 !important; border-radius: 3px !important; padding: 1px 7px !important; min-width: 0 !important; }
body .kanban-crm .kanban-column .kanban-column-body { background: transparent !important; }
body .kanban-crm .lead-card { background: #fff !important; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important; border-radius: 5px !important;
  box-shadow: var(--s2) !important; padding: 9px 11px !important; }
body .kanban-crm .lead-card:hover { box-shadow: var(--s2h) !important; transform: translateY(-1px); border-color: var(--color-borde-tarjeta, #2c2c2a) !important; }
body .kanban-crm .lead-card.intencion-muy_interesado { border-left: 4px solid #d92d20 !important; }
body .kanban-crm .lead-card.intencion-interesado { border-left: 4px solid #f79009 !important; }
body .kanban-crm .lead-card.intencion-poco_interesado { border-left: 4px solid #98a2b3 !important; }
body .kanban-crm .lead-card-abierta { border-color: var(--color-primary, #1B5A7D) !important; }
body .kanban-crm .lead-nombre { color: var(--color-text, #0B1220) !important; font-weight: 700 !important; }
body .lead-card-gestionar { background: var(--color-primary-soft, #E8F1F7) !important; color: var(--color-primary, #1B5A7D) !important; border: 1.5px solid var(--color-primary, #1B5A7D) !important; font-weight: 700 !important;
  border-radius: 5px !important; padding: 5px 8px !important; font-size: .8rem !important; margin-top: 8px !important; }
body .lead-card-gestionar:hover { background: var(--color-primary, #1B5A7D) !important; color: #fff !important; filter: none !important; }

/* Tarjeta del CRM más ancha y con la prepaga al costado del nombre (como la maqueta) */
body .kanban-crm .kanban-column { min-width: 268px !important; max-width: 268px !important; }
body .kanban-crm .lead-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
body .kanban-crm .lead-card-cab .lead-nombre { margin: 0; min-width: 0; overflow-wrap: anywhere; }
body .kanban-crm .lead-card-cab .lead-badge-prepaga { flex-shrink: 0; }
body .kanban-crm .lead-card .lead-nombre { margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .kanban-crm .lead-card .lead-badges { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }

/* Indicadores mientras carga ("Calculando…") o con error: el recuadro no tiene
   el encabezado todavía y el texto quedaba pegado al borde. */
body .it-panel:not(:has(.ix-cab)) { padding: 18px 20px !important; display: flex; flex-direction: column; gap: 6px; }
body .it-panel:not(:has(.ix-cab)) > .it-nota { font-size: .92rem; }

/* ---------- 10. INDICADORES · POR VENDEDOR: TARJETAS SEPARADAS ----------
   [stated] Damián: "están uno al lado del otro y parece una masa de datos ...
   me gustaría que sean tarjetas separadas". Cada vendedor pasa a ser su
   propia tarjeta (borde, sombra suave, aire) sobre fondo gris claro, como las
   columnas del CRM. Menos tarjetas por fila para que respire. */
body .it-eq .it-vend-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)) !important; gap: 8px !important;
  padding: 12px !important; background: var(--color-surface-alt, #EDEDEB) !important; border-top: 1px solid var(--color-borde-tarjeta, #2c2c2a) !important; }
body .it-eq .it-vend { background: #fff !important; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important; border-radius: 6px !important;
  box-shadow: var(--s2) !important; padding: 10px 11px !important; gap: 7px !important; }
body .it-eq .it-vend:hover { box-shadow: var(--s2h) !important; transform: translateY(-1px); background: #fff !important; }
body .it-eq .it-vend.al { background: #fff !important; border-color: var(--color-accent, #B5472B) !important; border-width: 2px !important; }
body .it-eq .it-vend.al:hover { background: #FFFBFA !important; }
/* Tarjeta compacta: anillo, textos y barras más chicos */
body .it-eq .it-vend .it-anillo { width: 38px !important; height: 38px !important; }
body .it-eq .it-vend .it-anillo svg { width: 38px !important; height: 38px !important; }
body .it-eq .it-vend .it-anillo span { font-size: .64rem !important; }
body .it-eq .it-vend .it-vend-anillo { gap: 8px !important; }
body .it-eq .it-vend .it-vend-nom { font-size: .8rem !important; }
body .it-eq .it-vend .it-av { width: 22px !important; height: 22px !important; font-size: .58rem !important; }
body .it-eq .it-vend .it-vend-m { gap: 3px !important; }
body .it-eq .it-vend .it-vend-m > div:first-child { font-size: .72rem !important; }
body .it-eq .it-vend .it-vend-m strong { font-size: .84rem !important; }
body .it-eq .it-vend .it-barra { height: 4px !important; }
/* Ventas y facturación una al lado de la otra; sin las iniciales (Damián 23/10) */
/* HORIZONTAL (Damián 23/10): una fila por vendedor: nombre | cierre | ventas | facturación */
body .it-eq .it-vend { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, .95fr); column-gap: 14px !important; align-items: center; padding: 9px 12px !important; }
body .it-eq .it-vend .it-vend-cab { min-width: 0; }
body .it-eq .it-vend .it-vend-anillo > div:last-child { min-width: 0; }
body .it-eq .it-vend .it-vend-anillo .it-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { body .it-eq .it-vend-g { grid-template-columns: minmax(0, 1fr) !important; } body .it-eq .it-vend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px !important; } body .it-eq .it-vend .it-vend-cab, body .it-eq .it-vend .it-vend-anillo { grid-column: 1 / -1; } }
body .it-eq .it-vend .it-av { display: none !important; }
body .it-eq .it-vend .it-vend-m > div:first-child { flex-wrap: wrap; row-gap: 0; }
body .it-eq .it-vend .it-vend-m > div:first-child span { flex: 1 1 100% !important; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }

/* ---------- 11. SOLAPAS CON COLOR ----------
   [stated] Damián 23/10/2026: "las solapas son muy sobrias, podríamos ponerle un
   color del borde distinto a cada solapa para que resalten". Cada solapa toma
   un color de la receta según su lugar (1 petróleo, 2 verde azulado, 3 violeta,
   4 ámbar, 5 terracota, 6 azul) y lo usa en el borde y el ícono. La elegida se
   rellena con su color (botones) o queda blanca con franja gruesa arriba
   (carpetas). Mismos botones: solo cambia el color. */
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+1) { --tc: #1B5A7D; }
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+2) { --tc: #2A8C82; }
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+3) { --tc: #5B5BA8; }
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+4) { --tc: #B8770F; }
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+5) { --tc: #B5472B; }
:is(.bolsa-pestana, .nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):nth-child(6n+6) { --tc: #2F7FB8; }
/* Carpetas (Bolsa de Leads) */
body .bolsa-pestana { border: 1.5px solid var(--tc) !important; border-top: 3px solid var(--tc) !important; border-bottom: 0 !important;
  background: color-mix(in srgb, var(--tc) 7%, #fff) !important; color: #3C4657 !important; border-radius: 6px 6px 0 0 !important; box-shadow: none !important; }
body .bolsa-pestana .icon-svg { color: var(--tc); }
body .bolsa-pestana:hover:not(.on) { background: color-mix(in srgb, var(--tc) 14%, #fff) !important; }
body .bolsa-pestana.on { background: #fff !important; color: var(--tc) !important; border-top-width: 5px !important; font-weight: 700 !important; box-shadow: var(--s2) !important; }
/* Botones (CRM / Mis Métricas / Mi Mes, Usuarios, Registros, Actividad, Indicadores) */
body :is(.nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button) {
  border: 1.5px solid var(--tc) !important; border-bottom-width: 3px !important; border-radius: 6px !important;
  background: color-mix(in srgb, var(--tc) 6%, #fff) !important; color: #3C4657 !important; box-shadow: none !important; transform: none !important; }
body :is(.nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button) .icon-svg { color: var(--tc) !important; }
body :is(.nav-item-simple, .audit-tab, .users-tab, .act-tab, .ix-tabs button):hover { background: color-mix(in srgb, var(--tc) 14%, #fff) !important; }
body :is(.nav-item-simple.active, .audit-tab.activo, .users-tab.activa, .act-tab.act-tab-on, .ix-tabs button.on) {
  background: var(--tc) !important; border-color: var(--tc) !important; color: #fff !important; font-weight: 700 !important; box-shadow: var(--s2) !important; }
body :is(.nav-item-simple.active, .audit-tab.activo, .users-tab.activa, .act-tab.act-tab-on, .ix-tabs button.on) .icon-svg { color: #fff !important; }
body .act-tabs, body .users-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 0 !important; }

/* ---------- 12. MIS TAREAS COMO LA MAQUETA ---------- */
.tr-cats { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.tr-cat { font: inherit; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid var(--tc); border-bottom-width: 3px;
  border-radius: 6px; background: color-mix(in srgb, var(--tc) 6%, #fff); color: #3C4657; cursor: pointer; text-align: left; }
.tr-cat .icon-svg { width: 18px; height: 18px; color: var(--tc); }
.tr-cat span:not(.tr-n) { display: flex; flex-direction: column; line-height: 1.15; }
.tr-cat b { font-size: .9rem; } .tr-cat small { font-size: .7rem; color: var(--color-text-muted, #57647A); }
.tr-n { background: var(--tc); color: #fff; border-radius: 3px; font-weight: 800; font-size: .82rem; padding: 1px 8px; }
.tr-cat.on { background: var(--tc); color: #fff; box-shadow: var(--s2); }
.tr-cat.on .icon-svg, .tr-cat.on small { color: #fff; } .tr-cat.on .tr-n { background: #fff; color: var(--tc); }
.tr-tipos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--color-borde-tarjeta, #2c2c2a);
  border-radius: 6px; background: var(--color-surface-alt, #EDEDEB); margin-bottom: 12px; }
.tr-tipos-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted, #57647A); margin-right: 4px; }
.tr-tipo { font: inherit; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--tc); border-radius: 4px; background: #fff; color: #3C4657; cursor: pointer; }
.tr-tipo .icon-svg { color: var(--tc); } .tr-tipo b { background: var(--tc); color: #fff; border-radius: 3px; padding: 0 5px; font-size: .72rem; }
.tr-tipo.on { background: var(--tc); color: #fff; } .tr-tipo.on .icon-svg { color: #fff; } .tr-tipo.on b { background: #fff; color: var(--tc); }
.tr-tipo[disabled] { opacity: .45; cursor: default; }
.tr-nota { font-size: .76rem; color: var(--color-text-muted, #57647A); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tr-card { background: #fff; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a); border-top: 4px solid var(--tc); border-radius: 6px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--s2); min-width: 0; }
.tr-card-al { border-color: var(--color-accent, #B5472B); }
.tr-card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-pp { color: #fff; font-weight: 700; font-size: .74rem; border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.tr-tiempo { font-size: .74rem; font-weight: 600; border: 1px solid; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.tr-gr { background: #F1F3F5; color: #3C4657; border-color: #D6D6D2; } .tr-cui { background: #FFFAEB; color: #93521B; border-color: #F5D9A8; }
.tr-pel { background: #FEF3F2; color: #B42318; border-color: #FDA29B; }
.tr-tipo-lbl { font-size: .78rem; font-weight: 600; color: var(--tc); }
.tr-cliente { font-size: .98rem; font-weight: 700; color: var(--color-text, #0B1220); overflow-wrap: anywhere; }
.tr-sub { font-size: .78rem; color: var(--color-text-muted, #57647A); }
.tr-acc { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.tr-btn { font: inherit; font-size: .78rem; font-weight: 600; border: 1.5px solid var(--color-border-fuerte, #3A3A37); background: #fff; border-radius: 5px; padding: 5px 9px; cursor: pointer; color: var(--color-text, #0B1220); }
.tr-btn-ok { border-color: #9FD3B2; background: var(--color-success-soft, #ECFDF3); color: var(--color-success, #157F3D); }
.tr-btn-ir { border-color: var(--color-primary, #1B5A7D); background: var(--color-primary-soft, #E8F1F7); color: var(--color-primary, #1B5A7D); margin-left: auto; }
.tr-btn-ir:hover { background: var(--color-primary, #1B5A7D); color: #fff; }

/* ---------- 13. SEGUIMIENTO COMO LA MAQUETA (seguimiento-receta.js) ---------- */
body .seg-receta .seg-header .seg-resumen { display: none; }
.sr-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.sr-kpi { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; background: #fff; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; box-shadow: var(--s1, none); }
.sr-kpi.al { border-color: var(--color-accent, #B5472B); }
.sr-kpi small { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted, #57647A); }
.sr-kpi strong { font-size: 1.4rem; font-weight: 800; color: var(--color-text, #0B1220); }
.sr-kpi span { font-size: .76rem; color: var(--color-text-muted, #57647A); }
.sr-nov { margin: 0 0 10px; }
body .seg-receta .seg-filtros { background: var(--color-surface-alt, #EDEDEB); border: 1px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; padding: 8px 10px; }
body .seg-receta .seg-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
body .seg-receta .seg-filtros :is(.seg-filtro-input, .seg-filtro-select) { height: 34px; min-height: 0; padding: 4px 10px; font-size: .84rem; flex: 1 1 120px; min-width: 110px; width: auto; margin: 0; }
body .seg-receta .seg-filtros .seg-vista-toggle { margin-left: auto; }
.sr-tabla thead th button .seg-orden-flecha { width: 12px; height: 12px; vertical-align: -2px; margin-left: 3px; display: inline; }
.sr-tw { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; overflow: auto; background: #fff; box-shadow: var(--s2, none); }
.sr-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .84rem; }
.sr-tabla thead th { background: var(--color-surface-alt, #EDEDEB); border-bottom: 2px solid var(--color-borde-tarjeta, #2C2C2A); text-align: left; padding: 0; }
.sr-tabla thead th > span, .sr-tabla thead th button { display: block; width: 100%; text-align: inherit; padding: 8px 10px; border: 0; background: transparent; font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #3C4657; cursor: pointer; }
.sr-tabla thead th > span { cursor: default; }
.sr-tabla thead th button.orden-activo { color: var(--color-primary, #1B5A7D); }
.sr-tabla th.n, .sr-tabla td.n { text-align: right; }
.sr-tabla tbody td { padding: 7px 10px; border-top: 1px solid #D6D6D2; vertical-align: middle; }
.sr-tabla tbody tr { cursor: pointer; }
.sr-tabla tbody tr:hover td { background: #F5F8FA; }
.sr-tabla tbody tr.sr-espera td { background: #FBF0ED; }
.sr-cli { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-sub { font-size: .74rem; color: var(--color-text-muted, #57647A); }
.sr-sub.sr-te { color: var(--color-accent, #B5472B); font-weight: 600; }
.sr-pp { display: inline-block; color: #fff; font-weight: 700; font-size: .74rem; border-radius: 4px; padding: 2px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sr-est { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--ec); border: 1px solid var(--ec); background: color-mix(in srgb, var(--ec) 8%, #fff); border-radius: 4px; padding: 1px 7px; }
.sr-est .icon-svg { width: 13px; height: 13px; }
.sr-est.ok { color: #157F3D; border-color: #9FD3B2; background: #ECFDF3; } .sr-est.pel { color: #B42318; border-color: #FDA29B; background: #FEF3F2; }
.sr-vieja { color: var(--color-accent, #B5472B); font-weight: 700; }
.sr-abrir { font: inherit; font-size: .76rem; font-weight: 600; border: 1.5px solid var(--color-primary, #1B5A7D); background: var(--color-primary-soft, #E8F1F7); color: var(--color-primary, #1B5A7D); border-radius: 5px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.sr-abrir:hover { background: var(--color-primary, #1B5A7D); color: #fff; }
@media (max-width: 1000px) { .sr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-tabla { min-width: 640px; } }

/* ---------- 14. CARGAR VENTA COMO LA MAQUETA (pasos numerados) ---------- */
body .ventas-receta .hero-card { padding: 12px 18px; }
body .ventas-receta .hero-card h2 { position: relative; padding-left: 13px; margin: 0; font-size: 1.35rem; }
body .ventas-receta .hero-card h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body .ventas-receta .hero-card p { margin: 3px 0 0; }
body .ventas-receta .hero-card .vr-paso { margin-left: 8px; font-size: .74rem; font-weight: 600; color: #3C4657; border: 1px solid #D6D6D2; background: #F7F9FB; border-radius: 4px; padding: 1px 7px; }
body .ventas-receta .hero-card .vr-sub { font-weight: 600; color: var(--color-primary, #1B5A7D); }
body .venta-carpetas { counter-reset: vpaso; gap: 0; padding: 0; align-items: stretch; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
body .venta-carpetas.venta-carpetas-solo { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); }
body .venta-carpeta, body .venta-carpeta.hecha, body .venta-carpeta.actual, body .venta-carpeta.bloqueada {
  counter-increment: vpaso; flex: 1 1 auto; justify-content: flex-start; text-align: left; gap: 7px; padding: 8px 10px; min-height: 38px; margin: 0;
  border: 0; border-right: 1px solid #D6D6D2; border-radius: 0; box-shadow: none; background: #F7F9FB; color: #8A96A0; font-size: .78rem; font-weight: 600; opacity: 1; transform: none; z-index: auto; }
body .venta-carpeta:last-child { border-right: 0; }
body .venta-carpeta .venta-carpeta-nombre { word-break: normal; overflow-wrap: normal; hyphens: manual; }
body .ventas-receta:has(.vr-sub) .venta-cabecera, body .ventas-receta:has(.vr-sub) .ventas-hero-acciones .prepaga-tag { display: none; }
@media (max-width: 760px) { body .venta-carpetas { flex-wrap: wrap; } body .venta-carpeta, body .venta-carpeta.hecha, body .venta-carpeta.actual, body .venta-carpeta.bloqueada { flex: 1 1 110px; border-bottom: 1px solid #D6D6D2; } }
body .venta-carpeta .icon-svg { display: none; }
body .venta-carpeta::before { content: counter(vpaso); flex: 0 0 20px; width: 20px; height: 20px; border-radius: 3px; background: #E4E4E0; color: #3C4657; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
body .venta-carpeta.hecha { color: var(--color-success, #157F3D); }
body .venta-carpeta.hecha::before { content: '✓'; background: var(--color-success, #157F3D); color: #fff; }
body .venta-carpeta.actual { background: #fff; color: var(--color-text, #0B1220); font-weight: 700; box-shadow: inset 0 -3px 0 var(--color-primary, #1B5A7D); }
body .venta-carpeta.actual::before { background: var(--color-primary, #1B5A7D); color: #fff; }
body .venta-carpeta.bloqueada { color: #A8B0B8; }
body .venta-carpeta-ir:hover { background: #EAF2F7; transform: none; box-shadow: none; }
body .venta-carpeta-ir:focus-visible { outline: 2px solid var(--color-primary, #1B5A7D); outline-offset: -2px; }

/* ---------- 15. PANTALLAS VARIAS (pantallas-receta.js): números y gráficos de la maqueta ---------- */
.pr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.pr-kpi { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; background: #fff; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; box-shadow: var(--s1, none); }
.pr-kpi.al { border-color: var(--color-accent, #B5472B); }
.pr-kpi small { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted, #57647A); }
.pr-kpi strong { font-size: 1.4rem; font-weight: 800; color: var(--color-text, #0B1220); }
.pr-kpi span { font-size: .76rem; color: var(--color-text-muted, #57647A); }
.pr-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pr-graf { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: var(--s2, none); }
.pr-graf h4 { margin: 0; font-size: .92rem; }
.pr-blq { display: flex; gap: 3px; height: 52px; }
.pr-blq > div { border-radius: 4px; color: #fff; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; font-size: .74rem; }
.pr-blq span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-blq b { font-size: 1rem; }
.pr-100 { display: flex; height: 26px; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 4px; overflow: hidden; }
.pr-100 > div { color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.pr-ley { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: #3C4657; }
.pr-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
body .pr-receta .panel-header > .btn { flex: 0 0 auto; width: auto; align-self: flex-start; }
body .pr-precios .precios-card { border-left: 1.5px solid var(--color-borde-tarjeta, #2C2C2A) !important; border-top: 4px solid var(--pc, #1B5A7D) !important; }
body .pr-precios .precios-card-prep { border-radius: 4px; padding: 2px 8px; font-size: .74rem; font-weight: 700; }
body .pr-precios .precios-filtros { background: var(--color-surface-alt, #EDEDEB); border: 1px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; padding: 8px 10px; }
.pr-seg { display: inline-flex; gap: 2px; background: var(--color-surface-alt, #EDEDEB); border: 1px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; padding: 2px; margin: 4px 0 12px; }
.pr-seg button { font: inherit; font-size: .84rem; font-weight: 600; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 5px 12px; cursor: pointer; color: #3C4657; display: inline-flex; gap: 6px; align-items: center; }
.pr-seg button span { background: #0B1220; color: #fff; border-radius: 3px; font-size: .72rem; padding: 0 6px; }
.pr-seg button.on { background: #fff; border-color: var(--color-border-fuerte, #3A3A37); color: var(--color-primary, #1B5A7D); }
body .pr-avisos .avisos-lista { display: flex; flex-direction: column; gap: 8px; }
body .pr-avisos .aviso-card { border: 1px solid #B9D3E4; border-left: 4px solid var(--color-primary, #1B5A7D); background: #F1F7FB; border-radius: 6px; box-shadow: none; padding: 10px 14px; }
body .pr-avisos .aviso-card.aviso-card-nuevo { border-color: #F5D9A8; border-left-color: #B8770F; background: #FFFAEB; }
body .pr-avisos .aviso-card.aviso-card-imp { border-color: #FDA29B; border-left-color: #B42318; background: #FEF3F2; }
body .pr-avisos .aviso-card.aviso-card-off { opacity: .6; }
body .pr-avisos .aviso-card-pie { border-top: 0; padding-top: 0; margin-top: 4px; }
body .pr-avisos .aviso-card-pie:empty { display: none; }
body .pr-avisos .aviso-card-cuerpo { margin: 4px 0 0; font-size: .88rem; }
body .pr-avisos .aviso-card h3 { font-size: .95rem; margin: 0; }
body .cm-titulo { position: relative; padding-left: 13px; }
body .cm-titulo::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body .cm-tarjeta { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; box-shadow: var(--s2, none); overflow: hidden; }
body .cm-aviso { border-radius: 6px; border: 1px solid; border-left-width: 4px; }
body .cm-aviso-mal { border-color: #FDA29B; border-left-color: #B42318; background: #FEF3F2; }
body .cm-aviso-bien { border-color: #9FD3B2; border-left-color: #157F3D; background: #ECFDF3; }
.pr-hbars { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.pr-hb { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: 8px; font-size: .8rem; }
.pr-hb-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pr-hb-b { height: 14px; background: #EDEDEB; border-radius: 3px; overflow: hidden; } .pr-hb-b i { display: block; height: 100%; border-radius: 3px; }
.pr-hb-v { white-space: nowrap; color: var(--color-text-muted, #57647A); font-size: .76rem; } .pr-hb-v b { color: var(--color-text, #0B1220); }
.pr-seg-chico { margin: 0; } .pr-seg-chico button { font-size: .78rem; padding: 3px 10px; }
.pr-nt-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pr-nt-barra-acc { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pr-nt-grupo { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted, #57647A); }
.pr-nt-grupo::after { content: ''; flex: 1; height: 1px; background: #E4E4E0; }
.pr-nt-grupo em { font-style: normal; background: #EDEDEB; border-radius: 3px; padding: 0 6px; color: #3C4657; }
.pr-nt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; margin-bottom: 6px; background: #fff; border: 1px solid #D6D6D2; border-left: 4px solid var(--nc); border-radius: 6px; }
.pr-nt.pend { background: color-mix(in srgb, var(--nc) 5%, #fff); border-color: color-mix(in srgb, var(--nc) 30%, #fff); border-left-color: var(--nc); }
.pr-nt.vista { border-left-color: #C9C9C4; } .pr-nt.vista .pr-nt-txt { opacity: .7; }
.pr-nt-ico { width: 34px; height: 34px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--nc) 14%, #fff); color: var(--nc); }
.pr-nt.vista .pr-nt-ico { background: #EDEDEB; color: #8A96A0; }
.pr-nt-ico .icon-svg { width: 17px; height: 17px; }
.pr-nt-txt { min-width: 0; } .pr-nt-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pr-nt-t b { font-size: .88rem; }
.pr-nt-txt p { margin: 1px 0 0; font-size: .8rem; color: var(--color-text-muted, #57647A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-nt-tag { font-size: .68rem; font-weight: 700; color: var(--nc); border: 1px solid color-mix(in srgb, var(--nc) 45%, #fff); border-radius: 3px; padding: 0 5px; }
.pr-nt-tag.gris { color: #8A96A0; border-color: #D6D6D2; }
.pr-nt-cuando { font-size: .74rem; color: var(--color-text-muted, #57647A); white-space: nowrap; }
.pr-nt-acc { display: flex; gap: 5px; align-items: center; }
.pr-nt-btn { font: inherit; font-size: .76rem; font-weight: 600; border: 1.5px solid #3A3A37; background: #fff; border-radius: 5px; padding: 4px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #0B1220; }
.pr-nt-btn .icon-svg { width: 14px; height: 14px; }
.pr-nt-btn.ir { border-color: var(--color-primary, #1B5A7D); background: var(--color-primary-soft, #E8F1F7); color: var(--color-primary, #1B5A7D); }
.pr-nt-btn.ir:hover { background: var(--color-primary, #1B5A7D); color: #fff; }
.pr-nt-btn.ok { border-color: #9FD3B2; background: #ECFDF3; color: #157F3D; }
.pr-nt-btn.borrar { border-color: #E8B4B4; color: #A32D2D; }
@media (max-width: 760px) { .pr-nt { grid-template-columns: 34px minmax(0, 1fr); } .pr-nt-cuando { grid-column: 2; } .pr-nt-acc { grid-column: 1 / -1; flex-wrap: wrap; } .pr-nt-txt p { white-space: normal; } }
/* Objetivo del Equipo · Resumen del mes */
body .objetivo-solapa-cuerpo.ob-cuerpo { padding: 12px; }
.ob-kpis { margin-top: 0; }
.ob-de { font-size: .9rem; color: var(--color-text-muted, #57647A); font-weight: 600; }
.ob-g3 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 12px; }
.ob-ic { width: 16px; height: 16px; color: var(--color-primary, #1B5A7D); vertical-align: -3px; }
.ob-fila { display: flex; justify-content: space-between; font-size: .84rem; margin-top: 4px; }
.ob-bar { position: relative; height: 16px; background: #EDEDEB; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 4px; overflow: visible; }
.ob-bar i { display: block; height: 100%; border-radius: 2px; }
.ob-bar s, .ob-sem-b s { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--color-accent, #B5472B); }
.ob-marca { display: inline-block; width: 0; height: 10px; border-left: 2px dashed var(--color-accent, #B5472B); margin: 0 4px -1px 0; }
.ob-sem { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #F0F0EE; }
.ob-sem.cur .ob-sem-l b { color: var(--color-primary, #1B5A7D); }
.ob-sem-l { display: flex; flex-direction: column; line-height: 1.15; } .ob-sem-l b { font-size: .82rem; } .ob-sem-l em { font-style: normal; font-size: .7rem; color: var(--color-text-muted, #57647A); }
.ob-sem-b { position: relative; height: 14px; background: #EDEDEB; border-radius: 3px; }
.ob-sem-b i { display: block; height: 100%; border-radius: 3px; }
.ob-sem-v { font-size: .78rem; white-space: nowrap; font-weight: 700; } .ob-sem-v b { color: #0B1220; }
.ob-premio img, .ob-premio video { max-height: 140px; width: auto; border-radius: 6px; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); margin-bottom: 10px; }
@media (max-width: 1100px) { .ob-g3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ob-g3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ob-g3 { grid-template-columns: minmax(0, 1fr); } .ob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ob-kpis strong { font-size: 1.1rem; } .ob-sem { grid-template-columns: 74px minmax(0, 1fr) auto; } }
.pr-nota { margin: 0; font-size: .78rem; color: var(--color-text-muted, #57647A); }
@media (max-width: 760px) { .pr-g2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 16. ENCABEZADO header.panel-head + KPIs y tablas de Actividad / Equipos / Mi equipo ---------- */
body :is(header, div).panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 0; }
body :is(header, div).panel-head > div:first-child { flex: 1; min-width: 220px; }
body :is(header, div).panel-head h2 { position: relative; padding-left: 13px; margin: 0; font-size: 1.35rem; line-height: 1.2; }
body :is(header, div).panel-head h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body :is(header, div).panel-head .panel-sub { margin: 3px 0 0; font-size: .88rem; color: var(--color-text-muted, #57647A); }
body header.panel-head > button, body header.panel-head > .btn-secundario { flex: 0 0 auto; width: auto; }
body :is(.act-panel, .eq-panel, .me-panel, .marca-panel) { padding-top: 18px; }
/* Coeficientes: título y texto apilados (el h2 y el p son hermanos sin envoltorio). IMC: encabezado como los demás. */
body .coef-panel > .panel-header, body .coef-panel .panel-header { flex-direction: column; align-items: flex-start; gap: 3px; }
body .coef-panel .panel-header p { margin: 0; font-size: .88rem; max-width: 900px; }
body .imc-cabecera h2 { position: relative; padding-left: 13px; margin: 0; font-size: 1.35rem; line-height: 1.2; }
body .imc-cabecera h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body .imc-cabecera .imc-sub { max-width: 900px; margin: 3px 0 0; font-size: .88rem; color: var(--color-text-muted, #57647A); }
body .act-dia-btn { padding: 5px 10px; min-height: 0; font-size: .84rem; display: inline-flex; align-items: center; gap: 5px; }
body .act-dia-largo { margin-left: 6px; color: var(--color-primary, #1B5A7D); }
/* Material de Venta: Zonas y Subir documento uno al lado del otro (pedido de Damián 23/10). */
body .precios-panel .panel-header { align-items: flex-start; }
body .precios-head-btns { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; }
@media (min-width: 761px) { body .precios-head-btns { flex: 0 0 auto; } body .precios-head-btns > .btn { width: auto !important; flex: 0 0 auto; margin: 0; } }
@media (max-width: 760px) {
  body .precios-panel .panel-header { flex-direction: column; align-items: stretch; gap: 10px; }
  body .precios-head-btns { width: 100%; }
  body .precios-head-btns > .btn { flex: 1 1 0; width: auto !important; justify-content: center; margin: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}
/* IMC: tarjetas más chicas (pedido 23/10), 3 por fila en el celular. */
body .imc-cab { padding: 6px 10px; font-size: .84rem; }
body .imc-cuerpo { padding: 8px 10px; gap: 6px; }
body .imc-num { font-size: 1.6rem; }
body .imc-rot { font-size: .74rem; }
body .imc-barra { margin: 0 10px 9px; height: 5px; }
@media (max-width: 560px) {
  body .imc-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  body .imc-cab { padding: 5px 7px; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body .imc-cuerpo { padding: 6px 7px; flex-direction: column; align-items: flex-start; gap: 0; }
  body .imc-num { font-size: 1.35rem; } body .imc-rot { font-size: .64rem; }
  body .imc-barra { margin: 0 7px 7px; }
}
/* Actividad en el celular: 'Ahora mismo' en tarjetas de dos renglones; las demás tablas se deslizan de costado. */
@media (max-width: 600px) {
  body .act-panel .act-tabla:not(.act-tabla-ahora) { display: block; overflow-x: auto; white-space: nowrap; }
  body .act-tabla-ahora thead { display: none; }
  body .act-tabla-ahora, body .act-tabla-ahora tbody { display: block; border: 0; background: transparent; }
  body .act-tabla-ahora tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; margin-bottom: 6px; background: #fff; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; }
  body .act-tabla-ahora td { display: block; border: 0 !important; padding: 0 !important; font-size: .78rem; color: var(--color-text-muted, #57647A); }
  body .act-tabla-ahora td:nth-child(1) { font-size: .9rem; color: #0B1220; }
  body .act-tabla-ahora td:nth-child(2) { justify-self: end; }
  body .act-tabla-ahora td:nth-child(3)::before { content: 'Última: '; }
  body .act-tabla-ahora td:nth-child(4) { justify-self: end; } body .act-tabla-ahora td:nth-child(4)::before { content: 'hace '; }
  body .act-tabla-ahora td:nth-child(5) { grid-column: 1 / -1; }
  body .act-pestanas { flex-wrap: nowrap; overflow-x: auto; }
  body .act-pestanas .bolsa-pestana { flex: 0 0 auto; padding: 7px 10px; font-size: .82rem; }
  body .act-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body .act-tarjetas .act-kpi { padding: 7px 8px; } body .act-tarjetas .act-kpi b { font-size: 1.3rem; } body .act-tarjetas .act-kpi span { font-size: .7rem; }
}
/* Objetivo del Equipo en el celular: título arriba, botones debajo, cifras sin desbordar. */
@media (max-width: 700px) {
  body .objetivo-panel > .panel-header { flex-direction: column; align-items: stretch; gap: 10px; }
  body .objetivo-cab-acciones { display: flex; gap: 8px; width: 100%; }
  body .objetivo-cab-acciones .btn { flex: 1 1 0; width: auto; justify-content: center; padding-left: 8px; padding-right: 8px; font-size: .82rem; white-space: nowrap; }
  body .objetivo-principal .objetivo-resumen .objetivo-hero-fila { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .objetivo-hero-fila .objetivo-cifra-meta, body .objetivo-hero-fila .objetivo-cifra-sin { grid-column: 1 / -1; }
  body .objetivo-panel .objetivo-resumen .objetivo-cifra { min-width: 0; padding: 10px 12px; }
  body .objetivo-panel .objetivo-resumen .objetivo-cifra .objetivo-cifra-valor { font-size: clamp(1.05rem, 5vw, 1.5rem) !important; overflow-wrap: anywhere; }
  body .objetivo-panel .objetivo-resumen .objetivo-cifra-label { font-size: .74rem; }
}
body .act-pestanas { margin: 6px 0 14px; }
/* hero-card (Descuentos, Registros, Cargar Venta…): barrita y menos aire, como los demás títulos */
body .hero-card { padding: 12px 18px; }
body .hero-card h2 { position: relative; padding-left: 13px; margin: 0; font-size: 1.35rem; }
body .hero-card h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body .hero-card p { margin: 3px 0 0; }
@media (min-width: 701px) { body .bl-filtros { flex-wrap: nowrap; align-items: flex-end; } body .bl-filtros .bl-btn { width: auto; flex: 0 0 auto; } }
body :is(.me-kpi, .act-kpi) { background: #fff; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-left-width: 4px; border-radius: 6px; box-shadow: var(--s1, none); }
body :is(.me-kpi, .act-kpi).me-kpi-verde, body .act-kpi.act-kpi-verde { border-left-color: #157F3D; }
body .me-kpi.me-kpi-ambar, body .act-kpi.act-kpi-ambar { border-left-color: #B8770F; }
body .me-kpi.me-kpi-rojo, body .act-kpi.act-kpi-rojo { border-left-color: var(--color-accent, #B5472B); }
body :is(.me-tabla, .act-tabla) { border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
body :is(.me-tabla, .act-tabla) th { background: var(--color-surface-alt, #EDEDEB); color: #3C4657; border-bottom: 2px solid var(--color-borde-tarjeta, #2C2C2A); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body :is(.me-tabla, .act-tabla) td { border-bottom: 1px solid #E4E4E0; }
body :is(.me-tabla, .act-tabla) tbody tr:last-child td { border-bottom: 0; }

/* ---------- 5. INDICADORES CON LA RECETA ---------- */
/* El tablero traía encabezado oscuro, tarjetas de 14 px y sombras grandes.
   Pasa a hoja blanca con barrita terracota en el título y tarjetas con
   borde de hoja. Mismo contenido, mismos botones. */
body .it-panel { background: var(--color-surface, #fff) !important; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important;
  border-radius: 8px !important; box-shadow: var(--s1) !important; }
body .it-head { background: var(--color-surface, #fff) !important; color: var(--color-text, #0B1220) !important;
  border-bottom: 1.5px solid var(--color-borde-tarjeta, #2c2c2a); }
body .it-head-pre { color: var(--color-text-muted, #57647A) !important; }
body .it-head-tit { color: var(--color-text, #0B1220) !important; position: relative; padding-left: 13px; }
body .it-head-tit::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: var(--color-accent, #B5472B); }
body .it-head-nota { color: var(--color-text-muted, #57647A) !important; }
body .it-head-sel { color: var(--color-text, #0B1220) !important; background: #fff !important; border: 1px solid var(--color-border, #8A8A85) !important; border-radius: 5px !important; }
body .it-tab { color: #3C4657 !important; }
body .it-tab.on { color: var(--color-primary, #1B5A7D) !important; border-bottom-color: var(--color-accent, #B5472B) !important; }
body .it-seg { background: var(--color-surface-alt, #EDEDEB) !important; border: var(--borde-fino); border-radius: 7px !important; }
body .it-seg button { color: #3C4657 !important; border: 1.5px solid transparent !important; border-radius: 5px !important; }
body .it-seg button.on { background: #fff !important; color: var(--color-primary, #1B5A7D) !important; border-color: var(--color-border-fuerte, #3A3A37) !important; }
body .it-cuerpo { background: var(--color-surface, #fff); }
body .it-card { border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important; border-radius: 6px !important; box-shadow: var(--s2) !important; }
body .it-vend, body .it-eqt-fila, body .it-res-v, body .it-lista-v { border-radius: 0 !important; }
body .it-vend:hover, body .it-eqt-fila:hover, body .it-res-v:hover { box-shadow: none !important; }
body .it-res-k { border-radius: 4px !important; border-top: 1px solid var(--color-borde-tarjeta, #2c2c2a); border-right: 1px solid var(--color-borde-tarjeta, #2c2c2a); border-bottom: 1px solid var(--color-borde-tarjeta, #2c2c2a); }
body .it-btn-met, body .it-btn-sec { border-radius: 6px !important; border: 1.5px solid var(--color-border-fuerte, #3A3A37) !important; background: #fff !important; }
body .it-lista-v.on { border-radius: 4px !important; }

/* --- Brokers compacto (v1130) ------------------------------------------- */
/* [stated] Damián 23/10: "optimicemos el espacio en brokers". 4 por fila a
   1280, números en línea, menos aire. Solo estética: mismos botones y data-*. */
.brokers-panel .broker-lista { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .7rem; margin-top: .8rem; }
.brokers-panel .broker-lista .broker-card { padding: .65rem .75rem; }
.brokers-panel .broker-lista .broker-card-cab { margin-bottom: .5rem; }
.brokers-panel .broker-lista .broker-card h3 { font-size: .95rem; flex-wrap: wrap; gap: .35rem; margin: 0; }
.brokers-panel .broker-lista .broker-meta { font-size: .74rem; }
.brokers-panel .broker-nums { gap: .3rem; margin-bottom: .5rem; }
.brokers-panel .broker-num { padding: .3rem .2rem; display: flex; align-items: baseline; justify-content: center; gap: .3rem; flex-wrap: wrap; }
.brokers-panel .broker-num-val { display: inline; font-size: 1rem; }
.brokers-panel .broker-num-monto { font-size: .85rem; margin-top: 0; }
.brokers-panel .broker-num-lbl { display: inline; margin-top: 0; font-size: .58rem; }
.brokers-panel .broker-lista .broker-gerente { padding: .3rem .5rem; margin-bottom: .5rem; gap: .4rem; }
.brokers-panel .broker-gerente-nombre { font-size: .8rem; }
.brokers-panel .broker-gerente-mail { font-size: .7rem; }
.brokers-panel .broker-modulos-box { margin-bottom: .5rem; }
.brokers-panel .broker-modulos-cab { padding: .35rem .55rem; font-size: .78rem; }
.brokers-panel .broker-lista .broker-acciones { margin-top: auto; }
.brokers-panel .broker-lista .btn-broker { padding: .32rem .5rem; font-size: .8rem; }
.brokers-panel .broker-lista .btn-broker-borrar { flex: 0 0 auto; }

/* --- Tarjeta de lead: ribete del color de la prepaga (v1131) ------------- */
/* [stated] Damián 23/10: "al lado de la tarjeta del lead un pequeño borde del
   color de la prepaga". El borde izquierdo era de la intención de compra:
   la intención pasa al borde derecho, con los mismos colores. */
body .kanban-crm .lead-card.lead-card-pp,
body .kanban-crm .lead-card.lead-card-pp:hover { border-left: 5px solid var(--pp) !important; }
body .kanban-crm .lead-card.lead-card-pp.intencion-muy_interesado { border-right: 4px solid #d92d20 !important; }
body .kanban-crm .lead-card.lead-card-pp.intencion-interesado { border-right: 4px solid #f79009 !important; }
body .kanban-crm .lead-card.lead-card-pp.intencion-poco_interesado { border-right: 4px solid #98a2b3 !important; }

/* --- Tarjetas del CRM y de Seguimiento con el MISMO diseño (v1134) -------- */
/* [stated] Damián 24/10: "las tarjetas en seguimiento de ventas y crm quiero
   que tengan el mismo diseño". Mezcla elegida: encabezado de Seguimiento
   (ícono + título + contador en cuadradito con borde) y tarjeta compacta
   (nombre y días arriba; prepaga como pastilla de su color + texto gris).
   Clases tk-* en las dos pantallas: app.js (renderLeadCardHtml) y
   seguimiento-module.js (renderSegCard). Solo dibujo. */
body .kanban-board .kanban-column .tk-col-cab { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; }
body .kanban-board .tk-col-icono { width: 16px !important; height: 16px !important; color: var(--color-text, #0B1220) !important; flex-shrink: 0; }
body .kanban-board .kanban-column .tk-col-cab .kanban-col-titulo { flex: 1; min-width: 0; font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
body .kanban-board .kanban-column .tk-cant { background: #fff !important; color: var(--color-text, #0B1220) !important; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important;
  border-radius: 3px !important; padding: 1px 7px !important; min-width: 24px !important; text-align: center; font-size: .78rem !important; font-weight: 800 !important; flex-shrink: 0; }

body .kanban-board .lead-card.tk-card { background: #fff !important; border: 1.5px solid var(--color-borde-tarjeta, #2c2c2a) !important; border-left: 4px solid var(--pp, #888780) !important;
  border-radius: 5px !important; padding: 8px 10px !important; box-shadow: var(--s2) !important; }
body .kanban-board .lead-card.tk-card:hover { box-shadow: var(--s2h) !important; border-left-color: var(--pp, #888780) !important; }
body .kanban-board .lead-card.tk-card.lead-card-abierta { border-color: var(--color-primary, #1B5A7D) !important; border-left-color: var(--pp, #888780) !important; }
body .kanban-crm .lead-card.tk-card.intencion-muy_interesado { border-right: 4px solid #d92d20 !important; }
body .kanban-crm .lead-card.tk-card.intencion-interesado { border-right: 4px solid #f79009 !important; }
body .kanban-crm .lead-card.tk-card.intencion-poco_interesado { border-right: 4px solid #98a2b3 !important; }
.tk-toque { cursor: pointer; }
.tk-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
body .kanban-board .tk-card .tk-nombre { margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3; color: var(--color-text, #0B1220) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-dias { font-size: 10.5px; white-space: nowrap; opacity: .6; flex-shrink: 0; }
.tk-dias.tk-vieja { opacity: 1; color: #993C1D; font-weight: 600; }
.tk-dias.tk-toca { opacity: 1; color: #993C1D; font-weight: 700; }
.tk-sub { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10.5px; color: #5F5E5A; min-width: 0; }
.tk-sub > span:not(.tk-pp) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-pp { color: #fff; font-weight: 700; font-size: 10.5px; padding: 1px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
body .kanban-crm .tk-card .lead-card-detalle { margin-top: 8px; }
/* [stated] Damián 24/10: en Seguimiento, tarjetas tan anchas como en el CRM y
   más juntas (la tarjeta traía margin-bottom 12px sumado al gap de 8px). */
body .kanban-board .kanban-column:has(.seg-col-header) { min-width: 268px !important; max-width: 268px !important; width: 268px !important; flex: 0 0 268px !important; }
body .kanban-board .lead-card.tk-card { margin: 0 !important; }
/* [stated] Damián 24/10: el lugar de las tarjetas en Seguimiento igual que en
   el CRM: columna gris lisa con borde fino, encabezado sin fondo ni línea,
   letras negras. Sin franja oscura arriba ni fondo de color en las urgentes. */
body .kanban-board .kanban-column:has(.seg-col-header) { background: var(--color-surface-alt, #EDEDEB) !important; border: 1px solid var(--color-borde-tarjeta, #2c2c2a) !important;
  border-radius: 6px !important; box-shadow: var(--s2) !important; }
body .kanban-board .kanban-column:has(.seg-col-header):hover { box-shadow: var(--s2) !important; }
body .kanban-board .kanban-column .seg-col-header { background: transparent !important; border: 0 !important; height: auto !important; padding: 9px 10px 4px !important; }
body .kanban-board .kanban-column .seg-col-header .seg-col-label { color: var(--color-text, #0B1220) !important; }
body .kanban-board .kanban-column:has(.seg-col-header) .kanban-column-body { background: transparent !important; padding: 8px 10px !important; }

/* ---------------------------------------------- v1142 zonas de material (24/10) --- */
/* [stated] Damián: "la solapa de zonas está fea". Ventana ancha, alta de zona
   en una línea y prepagas en 3 columnas, cada una con su color a la izquierda.
   Chips chicos con la cruz sin caja. Solo estética. */
body .venta-modal.pz-modal { max-width: 1000px !important; width: 94vw !important; }
body .pz-modal .venta-modal-cuerpo { max-height: calc(100vh - 170px); overflow: auto; padding-top: 12px !important; }
body .pz-alta { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 10px; align-items: end;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #E4E4E0; }
body .pz-alta .campo { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
body .pz-alta .btn { height: 38px; white-space: nowrap; margin: 0 !important; }
body .pz-modal .precios-zonas-lista { display: block; column-count: 3; column-gap: 10px; }
body .pz-modal .precios-zonas-grupo { break-inside: avoid; display: block; margin: 0 0 10px !important;
  padding: 8px 10px !important; background: #fff !important; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A) !important;
  border-left: 4px solid var(--pp, #888780) !important; border-radius: 6px !important; }
body .pz-modal .precios-zonas-grupo h4 { margin: 0 0 6px !important; padding: 0 !important; font-size: .74rem !important;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
body .pz-modal .pz-n { font-size: .68rem; font-weight: 700; color: #5F5E5A; border: 1px solid #C9C9C4; border-radius: 4px; padding: 0 5px; }
body .pz-modal .precios-zonas-chips { gap: 4px !important; margin: 0 !important; }
body .pz-modal .precios-zona-chip { padding: 2px 3px 2px 7px !important; gap: 2px !important; font-size: .7rem !important;
  border: 1px solid #C9C9C4 !important; border-radius: 4px !important; background: #F5F5F3 !important; box-shadow: none !important;
  font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3; }
body .pz-modal .precios-zona-chip button { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px; color: #8A8A85; }
body .pz-modal .precios-zona-chip button:hover { background: var(--color-accent, #B5472B); color: #fff; }
body .pz-modal .precios-zona-chip button .icon-svg { width: 11px; height: 11px; }
@media (max-width: 900px) {
  body .pz-modal .precios-zonas-lista { column-count: 1; }
  body .pz-alta { grid-template-columns: 1fr; }
}
body .pz-alta .campo { display: flex !important; flex-direction: column; gap: 3px; }
body .pz-alta .campo > span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3C4657; }
body .pz-alta select, body .pz-alta input { height: 38px; width: 100%; box-sizing: border-box; padding: 0 10px; font: inherit; font-size: .88rem;
  border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 5px; background: #fff; }

/* ------------------------------------------- v1143 aviso en pantalla al entrar (24/10) --- */
/* Hoja blanca con borde casi negro y barra terracota arriba; botón negro con firma. */
.aviso-emerg-fondo { position: fixed; inset: 0; z-index: 99990; background: rgba(11, 18, 32, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.aviso-emerg { width: 100%; max-width: 620px; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-top: 6px solid #0B1220;
  border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); padding: 16px 20px; overflow: hidden; }
.aviso-emerg-imp { border-top-color: var(--color-accent, #B5472B); }
.aviso-emerg-cab { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #3C4657; }
.aviso-emerg-cab .icon-svg { width: 16px; height: 16px; }
.aviso-emerg-n { margin-left: auto; border: 1px solid #C9C9C4; border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.aviso-emerg h3 { margin: 8px 0 10px; font-size: 1.25rem; line-height: 1.25; border-left: 4px solid var(--color-accent, #B5472B); padding-left: 10px; }
.aviso-emerg-img { flex: 0 1 auto; min-height: 0; overflow: auto; margin-bottom: 10px; border: 1px solid #E4E4E0; border-radius: 6px;
  text-align: center; color: #8A8A85; font-size: .8rem; }
.aviso-emerg-img span { display: block; padding: 24px; }
.aviso-emerg-img img { display: block; max-width: 100%; max-height: 260px; margin: 0 auto; object-fit: contain; }
.aviso-emerg-cuerpo { flex: 0 1 auto; min-height: 0; overflow: auto; font-size: .95rem; line-height: 1.5; color: #2C2C2A; margin-bottom: 12px; }
.aviso-emerg-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 12px; border-top: 1px solid #E4E4E0; flex-wrap: wrap; }
.aviso-emerg-pie .btn-primary { min-width: 190px; justify-content: center; }
@media (max-width: 600px) { .aviso-emerg-pie .btn { width: 100%; justify-content: center; } }

/* ------------------------------------------- v1144 historial de material (24/10) --- */
body .venta-modal.ph-modal { max-width: 1180px !important; width: 96vw !important; }
body .ph-modal .venta-modal-cuerpo { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 170px); overflow: hidden; padding-top: 10px !important; }
.ph-filtros { display: grid; grid-template-columns: 130px 130px repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 8px; align-items: end; }
.ph-filtros label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ph-filtros label > span { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #3C4657; }
.ph-filtros input, .ph-filtros select { height: 34px; width: 100%; box-sizing: border-box; padding: 0 8px; font: inherit; font-size: .82rem;
  border: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); border-radius: 5px; background: #fff; min-width: 0; }
.ph-filtros select.filtro-activo { background: #0B1220; color: #fff; }
.ph-resumen { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #3C4657; padding: 8px 0; border-bottom: 1px solid #E4E4E0; }
.ph-resumen strong { font-size: 1rem; color: #0B1220; }
.ph-tabla-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ph-tabla { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ph-tabla th { position: sticky; top: 0; background: #F5F5F3; z-index: 1; text-align: left; font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; color: #3C4657; padding: 6px 8px; border-bottom: 1.5px solid var(--color-borde-tarjeta, #2C2C2A); }
.ph-tabla td { padding: 6px 8px; border-bottom: 1px solid #E4E4E0; vertical-align: top; }
.ph-tabla td small { display: block; color: #5F5E5A; font-size: .7rem; }
.ph-fecha { white-space: nowrap; font-weight: 700; }
.ph-acc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; font-size: .74rem;
  padding: 2px 7px; border-radius: 4px; border: 1px solid #C9C9C4; }
.ph-acc .icon-svg { width: 12px; height: 12px; }
.ph-alta { color: #157F3D; border-color: #157F3D; }
.ph-baja { color: var(--color-accent, #B5472B); border-color: var(--color-accent, #B5472B); }
.ph-edit { color: #3C4657; }
.ph-sobre { max-width: 380px; }
.ph-tit { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: #5F5E5A; font-size: .72rem; margin-top: 2px; }
.ph-tags .tk-pp { color: #fff; font-weight: 700; font-size: .66rem; padding: 1px 6px; border-radius: 3px; }
.ph-arch { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-det { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; }
.ph-det details summary { cursor: pointer; font-weight: 700; font-size: .74rem; color: #0B1220; }
.ph-dato { font-size: .74rem; padding: 2px 0; }
.ph-dato span { display: inline-block; min-width: 90px; color: #5F5E5A; }
.ph-dato s { color: #8A8A85; }
@media (max-width: 900px) {
  .ph-filtros { grid-template-columns: 1fr 1fr; }
  .ph-buscar { grid-column: 1 / -1; }
  .ph-tabla th:nth-child(5), .ph-tabla td:nth-child(5) { display: none; }
}

/* ------------------------------------------- v1144 material de venta en celular (24/10) --- */
/* [stated] Damián: "se ve cortado en material de venta" (versión celular).
   La grilla de tipos se salía por la derecha: las columnas 1fr no achican por
   debajo del contenido. Ahora minmax(0,1fr) y el texto se acomoda adentro. */
@media (max-width: 700px) {
  body .precios-panel { overflow-x: hidden; }
  body .precios-head-btns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  body .precios-head-btns > * { min-width: 0; padding-left: 6px !important; padding-right: 6px !important; }
  body .precios-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .precios-tipo { min-width: 0 !important; justify-content: flex-start !important; gap: 6px !important; padding: 0.45rem 0.5rem !important; }
  body .precios-tipo-lbl { flex: 1 1 auto; min-width: 0; text-align: left; overflow-wrap: anywhere; font-size: .8rem; }
  body .precios-tipo-n, body .precios-tipo-nuevos { flex-shrink: 0; font-size: .68rem !important; padding: 1px 5px !important; }
  body .precios-nov-item { gap: 6px !important; }
  body .precios-nov-titulo { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body .precios-nov-fecha { font-size: .7rem; white-space: nowrap; }
}

/* ------------------------------------------- v1145 filtros de seguimiento en celular (24/10) --- */
/* [stated] Damián: "son muy angostos esos filtros". En celular medían 34px de
   alto: difíciles de tocar. Ahora 44px, letra 16px (menos y el iPhone hace
   zoom). Nombre y DNI de a dos; los desplegables a lo ancho (textos largos). */
@media (max-width: 700px) {
  body .seg-receta .seg-filtros { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  body .seg-receta .seg-filtros :is(.seg-filtro-input, .seg-filtro-select) { height: 44px !important; min-width: 0 !important;
    width: 100% !important; font-size: 16px !important; padding: 6px 10px !important; border-radius: 6px; }
  body .seg-receta .seg-filtros > :not(.seg-filtro-input) { grid-column: 1 / -1; min-height: 44px; }
  body .seg-receta .seg-filtros .seg-vista-toggle { margin-left: 0; }
}

/* ---- Descuentos: cartel "Nuevo" (27/10/2026) — cargados en los últimos 7 días, van primero ---- */
.desc-nuevo {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: var(--color-accent, #B5472B); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
  white-space: nowrap;
}
.desc-nuevos-aviso { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; font-size: .86rem; font-weight: 600; color: #45443F; }