/* ══════════════════════════════════════════════════════════════════
   RELY 2.0 — Sistema de diseño Smart Drilling
   Réplica fiel del sistema de smartdrillingecosystem.com:
   azul técnico (rig) para lo operativo, violeta (ai) EXCLUSIVO para
   IA, semáforo de estados, 3 tipografías con rol, base 17px,
   barras de acento de 4px con glow, y la flecha ↗ en todo lo
   cliqueable. Los valores hex vienen del SISTEMA-DISENO-COMPLETO.md.
   La versión 1 (naranja) quedó respaldada como estilo_v1_naranja.css.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Semánticos (modo oscuro primero, como el original) ── */
  --fondo:        hsl(222 47% 7%);    /* background */
  --superficie:   hsl(222 47% 10%);   /* card */
  --superficie-2: hsl(217 33% 14%);   /* muted */
  --elevado:      hsl(222 47% 13%);
  /* ── Modales: siempre más claros que el fondo, para que se despeguen ── */
  --modal:        hsl(220 34% 18%);   /* cuerpo de la ventana */
  --modal-2:      hsl(220 32% 22%);   /* cabecera y pie */
  --modal-linea:  hsl(217 24% 33%);   /* bordes dentro del modal */
  --modal-campo:  hsl(222 42% 12%);   /* inputs: oscuros sobre modal claro */
  --linea:        hsl(217 33% 17%);   /* border */
  --linea-suave:  hsl(217 33% 13%);

  --texto:        hsl(210 40% 98%);
  --texto-2:      hsl(215 20% 65%);   /* muted-foreground */
  --texto-3:      hsl(215 16% 47%);

  /* ── Marca: azul técnico "rig" = primario. El rojo queda solo de logo. ── */
  --rely:         #3ba2ff;            /* rig-500 */
  --rely-claro:   #59bfff;            /* rig-400 (texto sobre oscuro) */
  --rely-fuerte:  #1e7ff5;            /* rig-600 (botones) */
  --rely-suave:   rgba(59, 162, 255, .10);
  --marca:        #E30613;

  /* ── Violeta IA — SOLO para inteligencia artificial ── */
  --morado:       #8b5cf6;            /* ai-500 */
  --morado-claro: #a78bfa;            /* ai-400 */
  --morado-suave: rgba(139, 92, 246, .10);

  /* ── Semáforo ── */
  --ok:           #10b981;
  --ok-suave:     rgba(16, 185, 129, .12);
  --aviso:        #f59e0b;
  --aviso-suave:  rgba(245, 158, 11, .12);
  --mal:          #ef4444;
  --mal-suave:    rgba(239, 68, 68, .12);
  --info:         #3ba2ff;
  --info-suave:   rgba(59, 162, 255, .12);
  --cian:         #06b6d4;
  --cian-suave:   rgba(6, 182, 212, .12);

  /* ── Tipografía: 3 familias con rol (Inter / Space Grotesk / JetBrains) ── */
  --fuente:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xs:  12px;
  --t-sm:  13.5px;
  --t-md:  15px;
  --t-lg:  17px;
  --t-xl:  23px;
  --t-2xl: 31px;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  --radio:    12px;   /* rounded-xl en cards */
  --radio-sm: 8px;    /* rounded-md en botones */
  --radio-lg: 16px;

  --sombra:    0 1px 2px rgba(0,0,0,.35);
  --sombra-lg: 0 16px 48px rgba(0,0,0,.55);

  --menu: 256px;      /* w-64 */
  --barra: 64px;      /* h-16 */
  --transicion: 150ms cubic-bezier(.4,0,.2,1);
}

/* Modo claro (la variante; el oscuro es el diseño) */
:root[data-tema="claro"] {
  --fondo: hsl(210 40% 98%); --superficie: #FFFFFF; --superficie-2: hsl(210 40% 96%);
  --elevado: #FFFFFF; --linea: hsl(214 32% 91%); --linea-suave: hsl(214 32% 94%);
  --texto: hsl(222 47% 11%); --texto-2: hsl(215 16% 47%); --texto-3: hsl(215 16% 60%);
  --rely-claro: #1665e0; --morado-claro: #6d28d9;
  --sombra: 0 1px 2px rgba(16,20,24,.06);
  --sombra-lg: 0 16px 48px rgba(16,20,24,.14);
}

* { box-sizing: border-box; }

/* El truco del 17px: agranda toda la interfaz ~6% */
html { font-size: 17px; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
}
h1 { letter-spacing: -0.02em; }
h2, h3 { letter-spacing: -0.015em; }

::selection { background: var(--rely-fuerte); color: #fff; }

/* Scrollbar delgada y discreta (6px como el original) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

/* Animación de entrada de cada página */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lienzo > * { animation: fade-up .4s ease-out; }

/* Punto verde pulsante "en vivo" */
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.vivo-punto { position: relative; display: inline-flex; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.vivo-punto::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ok); animation: pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite; }
.vivo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 9999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .8px; color: var(--ok); background: var(--ok-suave);
  border: 1px solid rgba(16,185,129,.25); white-space: nowrap;
}

/* ══════════════ ESTRUCTURA ══════════════ */
.app { display: grid; grid-template-columns: var(--menu) 1fr; height: 100vh; height: 100svh; overflow: hidden; }
.app.menu-oculto { grid-template-columns: 68px 1fr; }

/* ── Sidebar w-64 estilo Smart Drilling ── */
.menu {
  background: var(--fondo); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; overflow: hidden;
}
.menu-cabecera {
  min-height: var(--barra); display: flex; align-items: center; justify-content: center;
  padding: 0 var(--e4); border-bottom: 1px solid var(--linea); flex-shrink: 0;
}
.menu-logo-img { height: 30px; width: auto; display: block; }
.app.menu-oculto .menu-logo-img { height: 18px; }
.menu-logo-icono {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(59,162,255,.25), rgba(139,92,246,.25));
  border: 1px solid rgba(59,162,255,.3);
  display: grid; place-items: center; color: var(--rely-claro); font-size: 15px;
}
.menu-marca {
  font-family: var(--display); font-size: 16.5px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15; color: var(--texto); white-space: nowrap;
}
.menu-marca b { color: var(--rely-claro); font-weight: 700; }
.menu-titulo { font-size: 9.5px; letter-spacing: 2.6px; color: var(--texto-3);
  text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.app.menu-oculto .menu-marca, .app.menu-oculto .menu-titulo,
.app.menu-oculto .menu-grupo-titulo,
.app.menu-oculto .menu-link span, .app.menu-oculto .menu-pie-datos { display: none; }

.menu-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--e3) 0 var(--e6); }
.menu-grupo-titulo {
  font-size: 11px; letter-spacing: 1.7px; color: var(--texto-3);
  text-transform: uppercase; font-weight: 600;
  padding: var(--e5) var(--e4) 10px;
}
.menu-link {
  display: flex; align-items: center; gap: 15px;
  padding: 12px 14px; margin: 2px 10px;
  border-radius: 12px; color: var(--texto-2);
  font-size: 16px; font-weight: 450; cursor: pointer; text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
  white-space: nowrap; position: relative;
}
.menu-link:hover { background: var(--superficie-2); color: var(--texto); }
.menu-link.activo { background: var(--rely-suave); color: var(--rely-claro); font-weight: 600; }
.menu-link.activo::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; background: var(--rely); border-radius: 0 9999px 9999px 0;
}
/* Iconos Lucide de trazo fino, como Smart Drilling */
.menu-link svg { width: 21px; height: 21px; flex-shrink: 0; stroke-width: 1.8;
  color: var(--texto-3); transition: color var(--transicion); }
.menu-link:hover svg { color: var(--texto-2); }
.menu-link.activo svg { color: inherit; }
.menu-link i { width: 21px; text-align: center; font-size: 16px; flex-shrink: 0;
  color: var(--texto-3); transition: color var(--transicion); }
.menu-link:hover i { color: var(--texto-2); }
.menu-link.activo i { color: inherit; }

/* Violeta EXCLUSIVO para las secciones de IA */
.menu-link[data-id="generadorIA"] i, .menu-link[data-id="motorIA"] i,
.menu-link[data-id="automatizacion"] i { color: var(--morado-claro); }
.menu-link[data-id="generadorIA"].activo, .menu-link[data-id="motorIA"].activo,
.menu-link[data-id="automatizacion"].activo {
  background: var(--morado-suave); color: var(--morado-claro); }
.menu-link[data-id="generadorIA"].activo::before, .menu-link[data-id="motorIA"].activo::before,
.menu-link[data-id="automatizacion"].activo::before { background: var(--morado); }

.menu-contador {
  margin-left: auto; background: var(--rely-suave); color: var(--rely-claro);
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9999px;
  min-width: 22px; text-align: center; font-variant-numeric: tabular-nums;
}
.menu-contador.alerta { background: var(--mal-suave); color: var(--mal); }

.menu-pie {
  border-top: 1px solid var(--linea); padding: var(--e3);
  display: flex; align-items: center; gap: var(--e3); flex-shrink: 0;
}
.menu-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rely-fuerte), var(--morado));
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-size: var(--t-sm); flex-shrink: 0;
}
.menu-pie-datos { min-width: 0; flex: 1; }
.menu-pie-nombre { font-size: 14px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.menu-pie-rol { font-size: var(--t-xs); color: var(--texto-3); }

/* ── Zona principal ── */
.principal { display: flex; flex-direction: column; overflow: hidden; }
.barra {
  height: var(--barra); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: var(--e4);
  padding: 0 var(--e6); flex-shrink: 0;
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40;
}
.barra h1 { font-family: var(--display); font-size: 21px; font-weight: 700;
  margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.barra h1 .naranja { color: var(--rely-claro); }
.barra-sub { font-size: var(--t-sm); color: var(--texto-3); }
.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }

/* ── PageHeader estilo Smart Drilling: icono 52px en degradado + título display ── */
.cab-pagina {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--e5) var(--e6) 0; flex-shrink: 0;
  animation: fade-up .4s ease-out;
}
.cab-icono {
  width: 52px; height: 52px; border-radius: var(--radio); flex-shrink: 0;
  background: linear-gradient(135deg, rgba(59,162,255,.25), rgba(139,92,246,.25));
  border: 1px solid rgba(59,162,255,.3);
  display: grid; place-items: center; color: var(--rely-claro); font-size: 20px;
}
.cab-icono.ia {
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(59,162,255,.18));
  border-color: rgba(139,92,246,.35); color: var(--morado-claro);
}
.cab-textos { min-width: 0; }
.cab-textos h1 { font-family: var(--display); font-size: 28px; font-weight: 700;
  margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.cab-sub { font-size: 15px; color: var(--texto-2); margin: 4px 0 0; }
@media (max-width: 640px) {
  .cab-pagina { padding: var(--e4) var(--e4) 0; }
  .cab-icono { width: 44px; height: 44px; font-size: 17px; }
  .cab-textos h1 { font-size: 23px; }
  .cab-sub { font-size: 13.5px; }
}

.lienzo { flex: 1; overflow-y: auto; padding: var(--e5) var(--e6) var(--e6); }
.lienzo > * + * { margin-top: var(--e5); }

/* Sparkline y tendencia dentro de los KPI */
.tendencia { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; margin-top: 6px; }
.tendencia.sube { color: var(--ok); }
.tendencia.baja { color: var(--mal); }
.indicador svg.chispa { position: absolute; right: 14px; top: 30px;
  color: var(--acento, var(--rely)); opacity: .8; }
.indicador .tendencia { max-width: calc(100% - 8px); }

/* ══════════════ COMPONENTES ══════════════ */

/* Botones — azul primario, degradado ai para IA */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 9px 16px; border-radius: var(--radio-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all var(--transicion); white-space: nowrap; text-decoration: none;
  background: var(--superficie-2); color: var(--texto); line-height: 1.2;
  min-height: 40px;
}
.btn:hover { background: var(--elevado); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primario { background: var(--rely-fuerte); color: #fff;
  box-shadow: 0 0 0 1px rgba(59,162,255,.15), 0 0 24px -8px rgba(59,162,255,.5); }
.btn-primario:hover { background: var(--rely); }
/* Degradado violeta→azul: EXCLUSIVO de acciones de IA */
.btn-morado { background: linear-gradient(90deg, #7c3aed, #1e7ff5); color: #fff;
  box-shadow: 0 0 0 1px rgba(139,92,246,.15), 0 0 24px -8px rgba(139,92,246,.5); }
.btn-morado:hover { opacity: .9; }
.btn-verde { background: var(--ok); color: #fff; }
.btn-verde:hover { filter: brightness(1.1); }
.btn-azul { background: var(--rely-fuerte); color: #fff; }
.btn-azul:hover { background: var(--rely); }
.btn-fantasma { background: transparent; border-color: var(--linea); color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-icono { padding: 9px; width: 40px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 34px; }

/* Campos — text-base para que iOS no haga zoom */
.campo, input[type=text], input[type=search], input[type=email], input[type=tel],
input[type=number], input[type=date], select, textarea {
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  padding: 9px 12px; font-family: inherit; font-size: 16px; width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
@media (min-width: 640px) {
  .campo, input[type=text], input[type=search], input[type=email], input[type=tel],
  input[type=number], input[type=date], select, textarea { font-size: 14px; }
}
.campo:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--rely); box-shadow: 0 0 0 3px var(--rely-suave);
}
.campo::placeholder, input::placeholder { color: var(--texto-3); }
label { display: block; font-size: var(--t-xs); color: var(--texto-2);
  margin-bottom: var(--e1); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }

/* Buscador (header, abre con Ctrl+K) */
.buscador { position: relative; flex: 1; max-width: 420px; }
.buscador i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); font-size: 13px; pointer-events: none; }
.buscador input { padding-left: 34px; background: var(--superficie); }

/* Tarjetas — rounded-xl, hover sombra */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); transition: box-shadow var(--transicion);
}
.tarjeta:hover { box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.tarjeta-cabecera {
  padding: var(--e5); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
.tarjeta-titulo { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.tarjeta-titulo i { color: var(--rely-claro); margin-right: 7px; }
.tarjeta-cuerpo { padding: var(--e5); }

/* ── KPI Card: la firma del sistema ──
   Barra de 4px arriba + glow del acento + flecha ↗ si es cliqueable */
.indicadores { display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.indicador {
  --acento: var(--rely);
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 5%, transparent) 0%, transparent 60%),
              var(--superficie);
  border: 1px solid color-mix(in srgb, var(--acento) 20%, var(--linea));
  border-radius: var(--radio); padding: var(--e4) var(--e5);
  position: relative; overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.indicador::after {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--acento);
}
.indicador-valor { font-family: var(--display); font-size: 30px; font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: color-mix(in srgb, var(--acento) 75%, var(--texto)); }
.indicador-etiqueta { font-size: var(--t-xs); color: var(--texto-2);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: var(--e1); }
.indicador-nota { font-size: var(--t-xs); color: var(--texto-3); margin-top: var(--e1); }
.indicador.clicable { cursor: pointer; }
.indicador.clicable:hover { transform: scale(1.015); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.indicador.clicable::before {
  content: '\2197'; position: absolute; top: 10px; right: 13px;
  font-size: 14px; color: var(--acento); opacity: .3;
  transition: opacity var(--transicion);
}
.indicador.clicable:hover::before { opacity: 1; }

/* Tablas — mono JetBrains para lo técnico, siempre desplazables */
.tabla-marco { border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: auto; background: var(--superficie); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th {
  position: sticky; top: 0; z-index: 2; background: var(--superficie-2);
  text-align: left; padding: 11px var(--e3); font-size: 11px; font-weight: 600;
  color: var(--texto-2); text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--linea); white-space: nowrap; user-select: none;
}
table.tabla th.ordenable { cursor: pointer; }
table.tabla th.ordenable:hover { color: var(--texto); }
table.tabla td { padding: 11px var(--e3); border-bottom: 1px solid var(--linea-suave);
  vertical-align: middle; }
table.tabla tbody tr { transition: background var(--transicion); }
table.tabla tbody tr:hover { background: var(--superficie-2); }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla .mono { font-family: var(--mono); font-size: 12px; color: var(--texto-2); }

/* Badges — bg al 15%, texto al 100%, nunca saturado */
.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 9999px;
  white-space: nowrap; letter-spacing: .2px; border: 1px solid transparent;
}
.etiqueta.ok    { background: var(--ok-suave);    color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.mal   { background: var(--mal-suave);   color: var(--mal); }
.etiqueta.info  { background: var(--info-suave);  color: var(--rely-claro); }
.etiqueta.morado{ background: var(--morado-suave);color: var(--morado-claro);
  border-color: rgba(167,139,250,.3); }
.etiqueta.neutra{ background: var(--superficie-2);color: var(--texto-2); }
.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Círculo de puntaje de leads */
.score {
  width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  background: var(--mal-suave); color: var(--mal); border: 2px solid var(--mal);
}
.score.frio { background: var(--info-suave); color: var(--rely-claro); border-color: var(--rely); }
.score.tibio { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso); }

/* Barra de progreso */
.progreso { height: 6px; background: var(--linea); border-radius: 9999px; overflow: hidden; min-width: 60px; }
.progreso i { display: block; height: 100%; background: var(--ok); border-radius: 9999px;
  transition: width .4s ease; }

/* Estados de carga y vacío */
.cargando { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--e10) var(--e5); color: var(--texto-3); gap: var(--e3); }
.giro { width: 28px; height: 28px; border: 3px solid var(--linea);
  border-top-color: var(--rely); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.esqueleto { background: linear-gradient(90deg, var(--superficie-2) 25%, var(--elevado) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brilla 1.4s infinite; border-radius: var(--radio-sm); }
@keyframes brilla { to { background-position: -200% 0; } }

.vacio { text-align: center; padding: var(--e10) var(--e5); color: var(--texto-3); }
.vacio i { font-size: 38px; opacity: .3; display: block; margin-bottom: var(--e3); }
.vacio h4 { margin: 0 0 var(--e1); font-size: var(--t-md); color: var(--texto-2); font-weight: 600; }
.vacio p { margin: 0; font-size: var(--t-sm); }

.error-caja { background: var(--mal-suave); border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radio); padding: var(--e4) var(--e5); color: #FCA5A5; font-size: var(--t-sm);
  position: relative; }
.error-caja::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--mal); border-radius: 4px 0 0 4px; }

/* Ventanas — max-h para móvil */
.velo { position: fixed; inset: 0; background: rgba(2,6,16,.80); backdrop-filter: blur(7px);
  z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: var(--e8) var(--e3); overflow-y: auto; animation: aparece .16s ease; }
@keyframes aparece { from { opacity: 0; } }
.ventana { background: var(--modal); border: 1px solid var(--modal-linea);
  border-radius: var(--radio-lg); width: calc(100% - 1.5rem); max-width: 880px;
  max-height: 90svh; overflow-y: auto; box-shadow: 0 28px 80px rgba(0,0,0,.72);
  animation: sube .2s cubic-bezier(.2,.9,.3,1); }
@keyframes sube { from { transform: translateY(14px); opacity: 0; } }
.ventana-cabecera { padding: var(--e5) var(--e6); border-bottom: 1px solid var(--modal-linea);
  background: var(--modal-2); position: sticky; top: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e4); }
.ventana-titulo { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0;
  letter-spacing: -.015em; }
.ventana-sub { font-size: var(--t-sm); color: var(--texto-3); margin-top: 2px; }
.ventana-cuerpo { padding: var(--e6); }
.ventana-pie { padding: var(--e4) var(--e6); border-top: 1px solid var(--modal-linea);
  background: var(--modal-2);
  display: flex; gap: var(--e2); justify-content: flex-end;
  position: sticky; bottom: 0; z-index: 3; }

/* Rejilla de datos (ficha) */
.datos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dato { background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: var(--e3) var(--e4); }
.dato-k { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600; margin-bottom: 3px; }
.dato-v { font-size: 14.5px; font-weight: 600; word-break: break-word;
  font-variant-numeric: tabular-nums; }

/* Avisos flotantes */
.avisos { position: fixed; left: 50%; transform: translateX(-50%); top: var(--e4);
  z-index: 2000; display: flex; flex-direction: column; gap: var(--e2); align-items: center; }
.aviso-flotante { background: var(--elevado); border: 1px solid var(--linea);
  border-left: 4px solid var(--ok); border-radius: var(--radio); padding: var(--e3) var(--e4);
  box-shadow: var(--sombra-lg); font-size: 14px; min-width: 250px; max-width: 420px;
  animation: entra .22s cubic-bezier(.2,.9,.3,1); }
.aviso-flotante.mal { border-left-color: var(--mal); }
.aviso-flotante.aviso { border-left-color: var(--aviso); }
@keyframes entra { from { transform: translateY(-16px); opacity: 0; } }

/* Pestañas — desplazables, nunca se pierden en móvil */
.pestanas { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: 2px; }
.pestana { padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--texto-2);
  cursor: pointer; white-space: nowrap; border-radius: var(--radio-sm); flex-shrink: 0;
  border: 1px solid var(--linea); background: var(--superficie);
  transition: all var(--transicion); }
.pestana:hover { color: var(--texto); border-color: var(--texto-3); }
.pestana.activa { color: #fff; background: var(--rely-fuerte); border-color: var(--rely-fuerte); }

/* Filtros */
.filtros { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.filtros select, .filtros input { width: auto; min-width: 130px; }

/* Paginación */
.paginacion { display: flex; align-items: center; gap: var(--e2); justify-content: center;
  padding: var(--e4); font-size: var(--t-sm); color: var(--texto-2); }

/* Gráficas CSS de respaldo */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: var(--e3); }
.barras .b { flex: 1; background: var(--rely); border-radius: 3px 3px 0 0; min-height: 2px;
  opacity: .85; transition: opacity var(--transicion); position: relative; }
.barras .b:hover { opacity: 1; }
.barras .b[data-v]:hover::after {
  content: attr(data-v); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--elevado); border: 1px solid var(--linea); padding: 3px 7px;
  border-radius: 5px; font-size: 11px; white-space: nowrap; margin-bottom: 4px; }

/* Gráficas Chart.js */
.grafica-caja { position: relative; height: 260px; padding: var(--e2) 0; }
.grafica-caja.compacta { height: 220px; }

/* Selector de modo del menú: Ventas · Marketing · Todo (los dos paneles de siempre) */
.menu-modos { display: flex; gap: 4px; margin: 10px 12px 2px; padding: 4px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; }
.menu-modo { flex: 1; padding: 7px 4px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--texto-3); font-family: inherit;
  font-size: 12.5px; font-weight: 600; transition: all var(--transicion); }
.menu-modo:hover { color: var(--texto); }
.menu-modo.activo { background: var(--rely-fuerte); color: #fff; }

/* Tarjetas de lote — estilo "Activos y Taladros" de Smart Drilling */
.tarjetas-lote { display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarjeta-lote { position: relative; overflow: hidden; cursor: pointer;
  background: var(--superficie); border: 1px solid rgba(16,185,129,.22);
  border-radius: var(--radio); padding: var(--e5);
  transition: transform var(--transicion), box-shadow var(--transicion); }
.tarjeta-lote::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--ok); }
.tarjeta-lote:hover { transform: scale(1.015); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.tarjeta-lote:hover .tl-ir { opacity: 1; }
.tl-num { color: var(--rely-claro); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.tl-ir { color: var(--ok); opacity: .3; font-size: 13px; transition: opacity var(--transicion); }
.tl-titulo { font-family: var(--display); font-size: 19px; font-weight: 700; margin-top: 10px; }
.tl-datos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.tl-datos > div { display: flex; flex-direction: column; gap: 2px; }
.tl-k { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .7px; }
.tl-datos b { font-size: 15px; font-variant-numeric: tabular-nums; }

/* El botón de WhatsApp respira, no va pegado al número */
td a .fa-whatsapp, td .fa-brands.fa-whatsapp { margin-left: 8px; font-size: 15px; vertical-align: -1px; }

/* Persona con avatar de iniciales (columna Cliente en todo el panel) */
.persona { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.persona-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #fff; background: linear-gradient(135deg, #4f7df9, #7c5cf6);
}
.persona-avatar.gris { background: linear-gradient(135deg, #475569, #334155); }
.persona-datos { display: flex; flex-direction: column; min-width: 0; }
.persona-datos b { font-size: 14.5px; line-height: 1.3; }
.persona-sub { font-size: 12px; color: var(--texto-3); }

/* Cebra sutil para leer mejor las tablas largas */
table.tabla tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
table.tabla tbody tr:hover { background: var(--superficie-2); }

/* Tarjetas de gráfica cliqueables */
.tarjeta.clicable-tarjeta { cursor: pointer; }
.tarjeta.clicable-tarjeta:hover { border-color: var(--rely); }

/* Utilidades */
.fila { display: flex; align-items: center; gap: var(--e3); }
.fila-sep { display: flex; align-items: center; gap: var(--e3); justify-content: space-between; }
.crece { flex: 1; }
.oculto { display: none !important; }
.txt-2 { color: var(--texto-2); }
.txt-3 { color: var(--texto-3); }
.sm { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.negrita { font-weight: 700; }
.ok-txt { color: var(--ok); } .mal-txt { color: var(--mal); } .aviso-txt { color: var(--aviso); }
.rely-txt { color: var(--rely-claro); } .info-txt { color: var(--rely-claro); }
.morado-txt { color: var(--morado-claro); }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--e4); }

/* Pantallas chicas */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .menu { position: fixed; inset: 0 auto 0 0; width: var(--menu); z-index: 900;
    transform: translateX(-100%); transition: transform var(--transicion); }
  .app.menu-abierto .menu { transform: none; }
  .lienzo { padding: var(--e4); }
  .barra { padding: 0 var(--e4); }
  .barra .buscador { display: none; }
  .vivo span { display: none; }
  .indicadores { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
}
@media print {
  .menu, .barra-acciones, .btn { display: none !important; }
  .app { grid-template-columns: 1fr; height: auto; }
  body { background: #fff; color: #000; }
}

/* Botones de contacto con su color: WhatsApp verde, llamada amarilla */
.btn-wa { background: #16A34A; color: #fff; }
.btn-wa:hover { background: var(--ok); }
.btn-llamar { background: var(--aviso); color: #1f2937; }
.btn-llamar:hover { filter: brightness(1.1); }
.acciones-fila { display: inline-flex; gap: 8px; justify-content: flex-end; }

/* La X de cerrar: redonda y agradable */
.ventana [data-cerrar] { width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--rely) 55%, var(--linea));
  color: var(--rely); background: color-mix(in srgb, var(--rely) 8%, transparent);
  display: grid; place-items: center; padding: 0; transition: all var(--transicion); }
.ventana [data-cerrar]:hover { background: color-mix(in srgb, var(--rely) 18%, transparent);
  color: var(--rely-claro); border-color: var(--rely); }

/* ══════ Convención de acciones: EDITAR en azul, BORRAR en rojo (regla global) ══════ */
/* Botones cuyo ícono es un lápiz / edición → azul. Solo para botones "neutros"
   (fantasma / sin color propio) — si el botón ya trae su propio color sólido
   (primario, azul, verde, morado, wa, llamar) se deja su color de marca tal cual,
   porque si no el texto queda azul clarito sobre fondo azul y casi no se lee. */
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-pen),
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-pen-to-square),
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-crop-simple),
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-palette),
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-camera) {
  color: var(--rely); border-color: color-mix(in srgb, var(--rely) 40%, var(--linea));
}
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-pen):hover,
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-pen-to-square):hover,
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-crop-simple):hover,
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-palette):hover,
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-camera):hover {
  background: color-mix(in srgb, var(--rely) 14%, transparent); color: var(--rely-claro);
  border-color: var(--rely);
}
/* Botones de borrar → rojo (por si el ícono no trae la clase mal-txt); misma excepción */
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-trash):hover,
.btn:not(.btn-primario, .btn-morado, .btn-verde, .btn-azul, .btn-wa, .btn-llamar):has(.fa-trash-can):hover {
  background: var(--mal-suave); color: var(--mal); border-color: rgba(239,68,68,.4);
}

/* ══════ Selector segmentado (rango de fechas, tabs) ══════ */
.segmento { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--linea);
  border-radius: 10px; padding: 3px; gap: 2px; }
.segmento button { border: 0; background: transparent; color: var(--texto-2); cursor: pointer;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; transition: all .18s ease; }
.segmento button:hover { color: var(--texto); }
.segmento button.activo { background: var(--rely); color: #fff; box-shadow: 0 2px 8px rgba(59,162,255,.35); }

/* ══════ Animaciones estilo Smart Drilling ══════ */
@keyframes relyCrecerBarra { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
.barras .b { transform-origin: bottom; animation: relyCrecerBarra .55s cubic-bezier(.2,.8,.2,1) both; }
.barras .b:hover { filter: brightness(1.25); }
@keyframes relyAparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.indicadores > * { animation: relyAparecer .4s ease both; }
.indicadores > *:nth-child(2) { animation-delay: .05s; }
.indicadores > *:nth-child(3) { animation-delay: .10s; }
.indicadores > *:nth-child(4) { animation-delay: .15s; }
.indicadores > *:nth-child(5) { animation-delay: .20s; }
.progreso i { transition: width .8s cubic-bezier(.2,.8,.2,1); }
/* Barra de progreso animada al aparecer (crece de 0) */
@keyframes relyProgreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ══════════════════ ANIMACIONES SMART DRILLING (capa global) ══════════════════ */
/* Barra superior de KPI con brillo que se desplaza */
.indicador::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acento) 40%, transparent),
    var(--acento) 40%, #fff 50%, var(--acento) 60%,
    color-mix(in srgb, var(--acento) 40%, transparent)) !important;
  background-size: 250% 100% !important;
  animation: relySheen 4.5s linear infinite;
}
@keyframes relySheen { 0% { background-position: 200% 0; } 100% { background-position: -50% 0; } }

/* Glow suave y respirable en las tarjetas KPI */
.indicador { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 0%, transparent); }
.indicador:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--acento) 22%, rgba(0,0,0,.35)); }

/* El número del KPI entra con un leve zoom */
@keyframes relyValor { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
.indicador-valor { animation: relyValor .5s cubic-bezier(.2,.8,.2,1) both; }

/* Tarjetas: elevación e iluminación del borde al pasar el mouse */
.tarjeta { transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion); }
.tarjeta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rely) 35%, var(--linea)); box-shadow: 0 12px 34px rgba(0,0,0,.4); }

/* Filas de tabla: realce sutil al pasar */
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--rely) 7%, transparent); }

/* Botones: micro-rebote al presionar */
.btn { transition: transform .12s ease, background var(--transicion), border-color var(--transicion), box-shadow var(--transicion); }
.btn:active { transform: scale(.96); }
.btn-primario:hover { box-shadow: 0 6px 18px rgba(59,162,255,.35); }

/* Tarjetas de imagen (galería, línea comercial, admin web): zoom suave de la foto */
.tarjeta-img img, .tarjeta img { transition: transform .4s ease; }
.tarjeta-img:hover img { transform: scale(1.05); }

/* Punto EN VIVO pulsante reforzado */
@keyframes relyPulso { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(16,185,129,0); } }
.en-vivo .punto, .pill-vivo .punto { animation: relyPulso 1.8s ease-in-out infinite; }

/* ══════════════════ REFUERZO SMART DRILLING — movimiento continuo ══════════════════ */
/* Barrido de luz diagonal que cruza las tarjetas KPI cada pocos segundos */
.indicador {
  background:
    linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--acento) 15%, transparent) 50%, transparent 60%) 0 0 / 250% 100% no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--acento) 5%, transparent) 0%, transparent 60%) 0 0 / 100% 100% no-repeat,
    var(--superficie);
  animation: relyBarrido 7s ease-in-out infinite;
}
@keyframes relyBarrido {
  0%   { background-position: 170% 0, 0 0, 0 0; }
  55%, 100% { background-position: -70% 0, 0 0, 0 0; }
}
/* Borde de la tarjeta KPI que "respira" con el color de acento */
@keyframes relyBordeVivo {
  0%, 100% { border-color: color-mix(in srgb, var(--acento) 20%, var(--linea)); }
  50%      { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); }
}
.indicador { animation: relyBarrido 7s ease-in-out infinite, relyBordeVivo 5s ease-in-out infinite; }

/* Icono del encabezado con una leve flotación, como los dashboards de Smart Drilling */
@keyframes relyFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cab-icono { animation: relyFlota 4s ease-in-out infinite; }

/* La franja EN VIVO late suave para dar sensación de tiempo real */
@keyframes relyLatido { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.en-vivo, .pill-vivo { animation: relyLatido 2.4s ease-in-out infinite; }

/* Respeto a quienes prefieren menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  .indicador, .indicador::after, .cab-icono, .barras .b,
  .indicadores > *, .indicador-valor, .en-vivo, .pill-vivo, .lienzo > * {
    animation: none !important;
  }
}

/* Etiquetas pequeñas para servicios de talleres y similares */
.mini-chip { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px;
  background: color-mix(in srgb, var(--rely) 12%, transparent);
  color: var(--rely-claro); border:1px solid color-mix(in srgb, var(--rely) 25%, var(--linea)); white-space:nowrap; }

/* Insignia de número (columna # de Inventario) — estilo similar a los avatares */
.num-badge { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 7px;
  border-radius:8px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  background: color-mix(in srgb, var(--morado) 18%, transparent);
  color: var(--morado-claro); border:1px solid color-mix(in srgb, var(--morado) 30%, var(--linea)); }


/* ══════════════════════════════════════════════════════════════════
   CONTRASTE DENTRO DE LOS MODALES
   Regla general: la ventana es clara, sus campos y tarjetas oscuros.
   Aplica sola a cualquier ventana nueva, no hay que repetir estilos.
   ══════════════════════════════════════════════════════════════════ */
.ventana input, .ventana select, .ventana textarea, .ventana .campo {
  background: var(--modal-campo); border-color: var(--modal-linea); color: var(--texto); }
.ventana input:focus, .ventana select:focus, .ventana textarea:focus {
  border-color: var(--rely); box-shadow: 0 0 0 3px var(--rely-suave); }
.ventana input::placeholder, .ventana textarea::placeholder { color: var(--texto-3); }
.ventana .dato, .ventana .tarjeta, .ventana .indicador {
  background: var(--modal-campo); border-color: var(--modal-linea); }
.ventana .tabla th { background: var(--modal-2); border-color: var(--modal-linea); }
.ventana .tabla td, .ventana .tabla tr { border-color: var(--modal-linea); }
.ventana .btn-fantasma { border-color: var(--modal-linea); }
.ventana .btn-fantasma:hover { background: var(--modal-campo); }
.ventana hr, .ventana .separador { border-color: var(--modal-linea); }


/* ─── El iconito de fecha y hora, visible sobre fondo oscuro ─── */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2.2);
  opacity: .9;
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 3px;
  margin-left: 4px;
  border-radius: 7px;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=month]::-webkit-calendar-picker-indicator:hover,
input[type=week]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(255,255,255,.16);
  transform: scale(1.08);
}
input[type=date], input[type=datetime-local], input[type=time], input[type=month] {
  color-scheme: dark;
}


/* ─── Números con − y + a los lados, en vez de las flechitas ─── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.pm-caja {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--modal-linea, var(--linea));
  border-radius: 10px;
  overflow: hidden;
  background: var(--modal-campo, rgba(0,0,0,.22));
}
.pm-caja > button {
  width: 36px;
  flex: none;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.07);
  color: var(--texto, #e8eaed);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background .13s ease, color .13s ease;
}
.pm-caja > button:hover { background: var(--rely, #2f6fed); color: #fff; }
.pm-caja > button:active { transform: scale(.94); }
.pm-caja > button:disabled { opacity: .3; cursor: not-allowed; background: transparent; }
.pm-caja > input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
  font-weight: 700;
}
.pm-caja > input:focus { outline: none; box-shadow: none !important; }
.pm-caja:focus-within { border-color: var(--rely, #2f6fed); }
.pm-grande > button { width: 46px; font-size: 24px; }
.pm-grande > input { font-size: 22px; font-weight: 800; color: var(--rely-claro, #7aa7ff); }

/* ─── Plan de pagos: filas más aireadas y numeradas ─── */
.cuota-fila {
  display: grid;
  grid-template-columns: 42px 128px 148px 128px 152px minmax(150px, 1fr) 104px;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--modal-linea, var(--linea));
  border-radius: 11px;
  margin-bottom: 8px;
  background: var(--modal-2, rgba(255,255,255,.03));
}
.cuota-fila:hover { border-color: var(--rely, #2f6fed); }
.cuota-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rely, #2f6fed);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.cuota-cab {
  display: grid;
  grid-template-columns: 42px 128px 148px 128px 152px minmax(150px, 1fr) 104px;
  gap: 9px;
  padding: 0 10px 7px;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-3, #8b93a1);
}
@media (max-width: 900px) {
  .cuota-fila, .cuota-cab { grid-template-columns: 40px 1fr 1fr; }
  .cuota-cab { display: none; }
}


/* Botones − / + chiquitos, para que quepan dentro de la fila de la cuota */
.pm-mini > button { width: 28px; font-size: 16px; }
.pm-mini > input { font-size: 13.5px; padding-left: 2px; padding-right: 2px; }
.cuota-fila input[type=date] { font-size: 13px; padding-left: 8px; }
.cuota-fila input[type=text] { font-size: 13px; }
.cuota-fila .btn-sm { padding: 5px 7px; }

/* ── Legibilidad global (2026-08-30): letras mas grandes en tablas y listas ── */
table.tabla td { font-size: 14.5px; }
table.tabla th { font-size: 12px; }
.indicador-etiqueta { font-size: 12.5px; letter-spacing: .05em; }
.indicador-nota { font-size: 12px; }

/* Ajustes de menu (2026-08-30): contador sin desbordar + etiquetas largas + nombres legibles */
.menu-link { min-width: 0; }
.menu-link > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-contador { flex-shrink: 0; margin-left: auto; }
table.tabla td b, table.tabla td strong { font-size: 15px; }