/* ═══════════════════════════════════════════════════════════════
   Paquete Empresarial — estilos del armador (ver empresarial.js).
   Copiado IGUAL en www.mexcloud.mx, mexmail.mx y enlacespyme.com.
   Solo usa las variables que comparten las tres hojas de la familia;
   cada una lleva un valor de respaldo por si alguna faltara.
   ═══════════════════════════════════════════════════════════════ */
.emp {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
  text-align: left;
}
.emp > * { min-width: 0; }
.emp-col {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(14, 27, 64, .1));
  border-radius: var(--r-lg, 20px);
  box-shadow: var(--sh-sm, 0 2px 8px rgba(14, 27, 64, .05));
  color: var(--text, #0E1B40);
}
.emp-col h3 {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.5rem 0 .8rem; font-size: 1.05rem; color: var(--text, #0E1B40);
}
.emp-col h3:first-child { margin-top: 0; }
.emp-paso {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent, #0364FF); color: var(--accent-on, #fff);
  font-size: .82rem; font-weight: 800;
}
.emp-fila {
  display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--border, rgba(14, 27, 64, .1)); font-size: .92rem;
}
.emp-col h3 + .emp-fila { border-top: 0; }
.emp-fila b { display: block; color: var(--text, #0E1B40); }
.emp-fila small { display: block; font-size: .78rem; color: var(--text-3, var(--text-2, #5C6884)); }
.emp-pu { font-family: var(--font-mono, ui-monospace, monospace); font-size: .8rem; color: var(--text-3, var(--text-2, #5C6884)); white-space: nowrap; }
.emp-num, .emp-select {
  width: 5.2rem; padding: .5rem .6rem;
  border: 1px solid var(--border-2, rgba(14, 27, 64, .2)); border-radius: var(--r-md, 12px);
  background: var(--bg, #F5F8FE); color: var(--text, #0E1B40);
  font-family: inherit; font-size: .95rem;
}
.emp-select { width: 100%; }
.emp-select option:disabled { color: #9aa3b8; }
.emp-num:focus, .emp-select:focus { outline: none; border-color: var(--accent, #0364FF); box-shadow: 0 0 0 3px var(--accent-soft, rgba(3, 100, 255, .1)); }
.emp p.emp-ayuda { margin: .5rem 0 0; font-size: .8rem; color: var(--text-3, var(--text-2, #5C6884)); }
.emp p.emp-ayuda:empty { display: none; }

.emp-total { position: sticky; top: 96px; border-top: 4px solid var(--accent, #0364FF); }
.emp-total h3 { margin-bottom: .8rem; }
.emp-detalle { margin: 0 0 1rem; }
.emp-detalle div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--border, rgba(14, 27, 64, .1)); font-size: .9rem; }
.emp-detalle div:first-child { border-top: 0; }
.emp-detalle dt { margin: 0; color: var(--text-2, #46516E); }
.emp-detalle dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text, #0E1B40); white-space: nowrap; }
.emp-detalle .emp-desc dt, .emp-detalle .emp-desc dd { color: var(--ok, #15803D); font-weight: 600; }
.emp-gran {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: .9rem; border-top: 2px solid var(--accent, #0364FF);
}
.emp-gran span { font-weight: 700; color: var(--text, #0E1B40); }
.emp-gran output { font-family: var(--font-head, inherit); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; color: var(--accent, #0364FF); }
.emp-gran output small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--text-3, var(--text-2, #5C6884)); margin-left: .25rem; }
.emp-extra { list-style: none; margin: .9rem 0 0; padding: 0; }
.emp-extra li { padding: .35rem 0; font-size: .88rem; color: var(--text-2, #46516E); }
.emp-extra b { color: var(--text, #0E1B40); }
.emp-extra .emp-pista { margin-top: .4rem; padding: .6rem .8rem; border-radius: var(--r-md, 12px); background: var(--accent-soft, rgba(3, 100, 255, .1)); color: var(--text, #0E1B40); }
.emp-btn { margin-top: 1.1rem; width: 100%; justify-content: center; }
.emp p.emp-letra { margin: .8rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-3, var(--text-2, #5C6884)); max-width: none; }

@media (max-width: 980px) { .emp { grid-template-columns: 1fr; } .emp-total { position: static; } }
@media (max-width: 620px) {
  .emp-fila { grid-template-columns: 1fr auto; }
  .emp-fila .emp-num { grid-column: 2; grid-row: 1; }
  .emp-pu { grid-column: 1 / -1; grid-row: 2; }
}

/* Dentro de una sección oscura (spotlight) el texto de las tarjetas no hereda
   el gris pensado para el fondo oscuro: las tarjetas fijan el suyo. */
.emp .emp-col h3, .emp .emp-fila b, .emp .emp-gran span, .emp .emp-extra b { color: var(--text, #0E1B40); }

/* La instalación, como el total del mes: en azul, un paso más chica. */
.emp-gran.emp-gran-inst { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border, rgba(14, 27, 64, .1)); }
.emp-gran.emp-gran-inst[hidden] { display: none; }
.emp-gran-inst span small { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 500; color: var(--text-3, var(--text-2, #5C6884)); }
.emp-gran-inst output { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.emp .emp-fila b.emp-azul { display: inline; color: var(--accent, #0364FF); font-weight: 800; font-size: .9rem; }

/* Lo que incluye el plan: en un recuadro, más grande y con lo importante en negritas */
.emp p.emp-ayuda {
  margin: .7rem 0 0; padding: .75rem .9rem;
  border-radius: var(--r-md, 12px); background: var(--accent-soft, rgba(3, 100, 255, .1));
  font-size: .92rem; line-height: 1.5; color: var(--text-2, #46516E);
}
.emp p.emp-ayuda b { color: var(--text, #0E1B40); font-weight: 700; }
.emp p.emp-ayuda .emp-nota { display: block; margin-top: .35rem; color: var(--accent, #0364FF); font-weight: 600; }

/* El descuento que el plan ya trae: en verde, como ahorro, no como renglón que reste */
.emp-extra .emp-ahorro { padding: .6rem .8rem; border-radius: var(--r-md, 12px); background: color-mix(in srgb, var(--ok, #15803D) 12%, transparent); color: var(--text-2, #46516E); }
.emp .emp-extra .emp-ahorro b { color: var(--ok, #15803D); }