/* ============================================================================
   Emboxia — lista de campañas, pantallas de estadísticas y las primitivas
   que comparten todas las secciones del menú
   ----------------------------------------------------------------------------
   Va después de emboxia-ui.css. Solo usa las variables --emb-* de
   emboxia-theme.css, que body.mode-dark ya redefine: por eso casi no hay
   reglas duplicadas para el modo oscuro.

   Nació para la lista de campañas (una tarjeta por campaña con 24px de
   padding: 250px por fila, tres por pantalla) y su resumen. La segunda mitad,
   "Primitivas compartidas por todo el panel", lleva las piezas que Acelle
   repite en todas las secciones —pestañas, cajas de recuento, listados en
   tabla, títulos de sección— para que Listas, Envío, Integración y el resto
   se vean como Campañas sin tocar sus 90 y pico vistas una por una.
   ========================================================================== */

/* ---------------------------------------------------------------- lista --- */

/* Sin overflow:hidden: recortaba el menu desplegable de la ultima fila. Las
   esquinas se redondean en la primera y la ultima fila. */
.emb-camp-list {
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius);
  box-shadow: var(--emb-shadow);
}

.emb-camp-row:first-child {
  border-radius: var(--emb-radius) var(--emb-radius) 0 0;
}

.emb-camp-row:last-child {
  border-radius: 0 0 var(--emb-radius) var(--emb-radius);
}

.emb-camp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--emb-line);
  transition: background-color .15s ease;
}

.emb-camp-row:first-child {
  border-top: 0;
}

.emb-camp-row:hover {
  background: var(--emb-surface-2);
}

.emb-camp-check {
  display: flex;
  align-items: center;
  margin: 0;
}

.emb-camp-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

.emb-camp-main {
  min-width: 0;
}

/* El nombre puede ser un correo largo: se recorta, no parte la fila. */
.emb-camp-name {
  display: block;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--emb-fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emb-camp-name:hover {
  color: var(--emb-heading);
  text-decoration: none;
}

.emb-camp-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--emb-muted);
  line-height: 1.4;
}

.emb-camp-sub .material-symbols-rounded {
  font-size: 15px;
  line-height: 1;
  vertical-align: -2px;
}

.emb-camp-sub .emb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--emb-line);
  flex: 0 0 auto;
}

.emb-camp-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--emb-brand-50);
  color: var(--emb-brand-700);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

body.mode-dark .emb-camp-type {
  background: rgb(61 76 245 / .18);
  color: var(--emb-brand-300);
}

/* --------------------------------------------------- métricas de la fila --- */

/* Ancho fijo para que la columna de acciones caiga en el mismo sitio en todas
   las filas, tengan métricas o no. */
.emb-camp-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 270px;
}

/* 78px porque la etiqueta mas larga en español ("Aperturas") tiene que caber
   en una linea a 10px; con 72px "Tasa de apertura" se montaba con la vecina. */
.emb-metric {
  width: 78px;
  text-align: right;
}

/* Sin datos todavia (la cache se recalcula en segundo plano): raya en vez de
   nada, y la barra vacia en vez de a tope. */
.emb-metric-num.is-pending {
  color: var(--emb-muted);
  opacity: .6;
}

.emb-metric-num {
  display: block;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--emb-fg);
  font-variant-numeric: tabular-nums;
}

.emb-metric-num.is-sent   { color: var(--emb-brand-600); }
.emb-metric-num.is-open   { color: var(--emb-accent-500); }
.emb-metric-num.is-click  { color: var(--emb-ok); }

.emb-metric-label {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--emb-muted);
  white-space: nowrap;
}

.emb-metric-bar {
  height: 3px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--emb-line);
  overflow: hidden;
}

.emb-metric-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
}

.emb-metric-bar.is-sent  { color: var(--emb-brand-600); }
.emb-metric-bar.is-open  { color: var(--emb-accent-500); }
.emb-metric-bar.is-click { color: var(--emb-ok); }

/* ------------------------------------------------------ estado y acciones --- */

.emb-camp-status {
  min-width: 104px;
  text-align: right;
}

.emb-camp-status .label {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.emb-camp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.emb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--emb-radius-sm);
  border: 1px solid var(--emb-line);
  background: var(--emb-surface);
  color: var(--emb-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.emb-btn:hover {
  background: var(--emb-surface-2);
  border-color: var(--emb-brand-300);
  color: var(--emb-heading);
  text-decoration: none;
}

.emb-btn .material-symbols-rounded,
.emb-btn i {
  font-size: 16px;
  line-height: 1;
}

.emb-btn-primary {
  background: var(--emb-brand-600);
  border-color: var(--emb-brand-600);
  color: #fff;
}

.emb-btn-primary:hover {
  background: var(--emb-brand-700);
  border-color: var(--emb-brand-700);
  color: #fff;
}

.emb-btn-icon {
  width: 32px;
  padding: 0;
}

/* El caret de Bootstrap dentro de un botón cuadrado queda descentrado. */
.emb-camp-actions .dropdown-toggle::after {
  margin: 0;
}

/* Debajo de 1100px las métricas estorban más de lo que informan. */
@media (max-width: 1100px) {
  .emb-camp-metrics { display: none; }
}

@media (max-width: 760px) {
  .emb-camp-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .emb-camp-status { grid-column: 2; }
  .emb-camp-actions { grid-column: 3; }
}

/* ============================================================================
   Estadísticas de una campaña
   ========================================================================== */

/* ------------------------------------------------------------- pestañas --- */

/* Una sola regla para las dos familias de pestañas del panel: las .emb-tabs
   de campañas y las 25 vistas que siguen con el .nav-tabs.nav-underline de
   Acelle (listas, contactos, cuenta, automatizaciones...). Antes unas iban
   subrayadas en azul y otras en naranja; el naranja se reserva para la accion
   principal de cada pantalla, y las pestañas son navegacion, asi que azul.

   Sin overflow: la primera version llevaba overflow-x:auto para hacer scroll
   en movil y eso recortaba el desplegable de "Datos de envio". Si no caben,
   pasan a una segunda linea.

   El asistente de campaña (.campaign-steps) pinta flechas entre pasos y va
   aparte. */
.emb-tabs,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border: 0;
  border-bottom: 1px solid var(--emb-line);
  background: none;
}

.emb-tabs > li,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li {
  position: relative;
  margin: 0;
}

.emb-tabs > li > a,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 11px 14px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--emb-muted) !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.emb-tabs > li > a:hover,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li > a:hover {
  color: var(--emb-fg) !important;
  text-decoration: none;
}

.emb-tabs > li.active > a,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li.active > a,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li > a.active {
  color: var(--emb-heading) !important;
  border-bottom-color: var(--emb-brand-600) !important;
}

body.mode-dark .emb-tabs > li.active > a,
body.mode-dark .page-container .nav-tabs.nav-underline:not(.campaign-steps) > li.active > a,
body.mode-dark .page-container .nav-tabs.nav-underline:not(.campaign-steps) > li > a.active {
  color: var(--emb-brand-300) !important;
  border-bottom-color: var(--emb-brand-400) !important;
}

.emb-tabs .material-symbols-rounded,
.page-container .nav-tabs.nav-underline:not(.campaign-steps) > li > a .material-symbols-rounded {
  font-size: 18px;
  margin: 0;
}

/* El desplegable que cuelga de una pestaña no debe heredar el ancho de la
   propia pestaña ni el subrayado. */
.emb-tabs .dropdown-menu,
.page-container .nav-tabs.nav-underline .dropdown-menu {
  min-width: 220px;
}

.emb-tabs .dropdown-menu > li > a,
.page-container .nav-tabs.nav-underline .dropdown-menu > li > a {
  border: 0 !important;
  padding: 8px 14px !important;
}

.emb-tabs .dropdown-menu > li.active > a,
.page-container .nav-tabs.nav-underline .dropdown-menu > li.active > a,
.page-container .nav-tabs.nav-underline .dropdown-menu > li > a.active {
  color: var(--emb-heading) !important;
  background: var(--emb-brand-50) !important;
}

body.mode-dark .emb-tabs .dropdown-menu > li.active > a,
body.mode-dark .page-container .nav-tabs.nav-underline .dropdown-menu > li.active > a {
  background: rgb(61 76 245 / .18) !important;
}

/* ------------------------------------------------------- cabecera resumen --- */

.emb-camp-head {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px 22px;
  margin-bottom: 20px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius);
  box-shadow: var(--emb-shadow);
}

.emb-camp-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 24px;
  border-right: 1px solid var(--emb-line);
}

.emb-camp-total-num {
  font-family: var(--emb-font);
  font-size: 34px;
  font-weight: 750;
  line-height: 1.1;
  color: var(--emb-heading);
  font-variant-numeric: tabular-nums;
}

.emb-camp-total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--emb-muted);
}

/* Pares etiqueta/valor. El original alineaba con width:120px y text-end, que
   se descuadraba en cuanto la etiqueta traducida crecía. */
.emb-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 28px;
  min-width: 0;
}

.emb-meta-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
}

.emb-meta-label {
  flex: 0 0 auto;
  min-width: 96px;
  color: var(--emb-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.emb-meta-value {
  min-width: 0;
  color: var(--emb-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emb-meta-value a {
  color: var(--emb-heading);
  text-decoration: none;
}

.emb-meta-value a:hover {
  text-decoration: underline;
}

.emb-meta-value.is-empty {
  color: var(--emb-muted);
  opacity: .7;
}

@media (max-width: 860px) {
  .emb-camp-head { grid-template-columns: 1fr; }
  .emb-camp-total {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--emb-line);
  }
}

/* --------------------------------------------------------------- tarjetas --- */

.emb-card {
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius);
  box-shadow: var(--emb-shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.emb-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--emb-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--emb-fg);
}

.emb-card-title .material-symbols-rounded {
  font-size: 19px;
  color: var(--emb-brand-600);
}

.emb-card-sub {
  margin: -10px 0 16px;
  font-size: 13px;
  color: var(--emb-muted);
  line-height: 1.5;
}

.emb-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

/* ------------------------------------------------------ cajas de recuento --- */

/* Las cajas de colores planos con la etiqueta en text-muted2 dejaban el texto
   casi invisible sobre el fondo. Ahora el color va en el número y en una barra
   lateral, y la etiqueta se lee sobre la superficie normal. */
.emb-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.emb-stat {
  position: relative;
  padding: 16px 18px;
  background: var(--emb-surface-2);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-sm);
  overflow: hidden;
}

.emb-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--emb-accent-color, var(--emb-brand-600));
}

.emb-stat-num {
  display: block;
  font-family: var(--emb-font);
  font-size: 26px;
  font-weight: 750;
  line-height: 1.15;
  color: var(--emb-accent-color, var(--emb-fg));
  font-variant-numeric: tabular-nums;
}

.emb-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--emb-muted);
}

.emb-stat-label .material-symbols-rounded {
  font-size: 16px;
}

.emb-stat.is-open   { --emb-accent-color: #0d9488; }
.emb-stat.is-click  { --emb-accent-color: #9f1239; }
.emb-stat.is-bounce { --emb-accent-color: var(--emb-warn); }
.emb-stat.is-unsub  { --emb-accent-color: var(--emb-muted); }

/* ------------------------------------------------------ tasas y progreso --- */

.emb-rate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.emb-rate-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--emb-fg);
  margin: 0;
}

.emb-rate-value {
  font-family: var(--emb-font);
  font-size: 22px;
  font-weight: 750;
  line-height: 1;
  color: var(--emb-accent-color, var(--emb-brand-600));
  font-variant-numeric: tabular-nums;
}

.emb-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--emb-line);
  overflow: hidden;
  margin-bottom: 14px;
}

.emb-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--emb-accent-color, var(--emb-brand-600));
  transition: width .4s ease;
}

.emb-rate-open  { --emb-accent-color: #0d9488; }
.emb-rate-click { --emb-accent-color: var(--emb-brand-600); }

.emb-rows {
  display: flex;
  flex-direction: column;
}

.emb-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--emb-line);
  font-size: 13px;
}

.emb-row:first-child {
  border-top: 0;
}

.emb-row-label {
  color: var(--emb-muted);
}

.emb-row-value {
  font-weight: 650;
  color: var(--emb-fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.emb-row-value .emb-row-pct {
  margin-left: 6px;
  font-weight: 600;
  color: var(--emb-muted);
}

.emb-row-value.is-empty {
  font-weight: 500;
  color: var(--emb-muted);
  opacity: .7;
}

.emb-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ---------------------------------------------------------- sin registros --- */

.emb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 20px;
  color: var(--emb-muted);
  text-align: center;
}

.emb-empty .material-symbols-rounded {
  font-size: 30px;
  opacity: .45;
}

.emb-empty-text {
  font-size: 13px;
}

/* ============================================================================
   Primitivas compartidas de las pantallas de estadísticas
   ----------------------------------------------------------------------------
   .stat-table / .stat-row solo se usan en las 14 vistas de estadísticas
   (campañas, automatizaciones y el informe público), así que se pueden
   rehacer aquí sin tocar el resto de la aplicación. Traían borde punteado y
   17px de margen por fila, de una hoja muy anterior a esta línea gráfica.
   ========================================================================== */

.stat-table {
  margin: 0;
}

.stat-table .stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 0;
  border-top: 1px solid var(--emb-line);
  font-size: 13px;
}

.stat-table .stat-row:first-child {
  border-top: 0;
}

.stat-table .stat-row p {
  margin: 0;
  min-width: 0;
  font-weight: 500;
  color: var(--emb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-table .stat-row p a {
  color: var(--emb-heading);
  text-decoration: none;
}

.stat-table .stat-row p a:hover {
  text-decoration: underline;
}

.stat-table .stat-row .num {
  margin: 0 0 0 auto;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--emb-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-table .stat-row .num .text-muted2 {
  margin-left: 6px;
  font-weight: 600;
  color: var(--emb-muted);
}

/* Estado vacío de las gráficas. El icono a tamaño completo y sin margen
   dejaba un bloque desangelado en medio de la tarjeta. */
.empty-chart-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 24px;
  background: var(--emb-surface-2);
  border: 1px dashed var(--emb-line);
  border-radius: var(--emb-radius-sm);
}

.empty-chart-pie .empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: var(--emb-muted);
  text-align: center;
}

.empty-chart-pie .empty-list .material-symbols-rounded {
  font-size: 30px;
  opacity: .45;
}

.empty-chart-pie .empty-list .line-1 {
  font-size: 13px;
}

/* Títulos de sección de la pantalla de estadísticas. */
.emb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 14px;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--emb-fg);
}

.emb-section-title .material-symbols-rounded {
  font-size: 20px;
  color: var(--emb-brand-600);
  margin: 0;
}

/* ============================================================================
   Primitivas compartidas por todo el panel
   ----------------------------------------------------------------------------
   Lo que sigue no es de campañas: son las piezas que Acelle repite en todas
   las secciones del menu lateral (listas, contactos, segmentos, envio,
   integracion...) y que hacian que cada pantalla se viera de su padre y de su
   madre. Se arreglan aqui una vez y llegan a todas.
   ========================================================================== */

/* ---------------------------------------------- titulos de seccion viejos --- */

/* 44 vistas abren con <h2 class="text-semibold text-primary"> (logs de una
   campaña, cuenta, contactos...) y otras tantas con <h3 class="mt-5 mb-3"> con
   un icono delante. Todos al mismo tamaño y color que .emb-section-title. */
.page-container h2.text-semibold.text-primary,
.page-container h2.text-primary,
.page-container h3.text-semibold.text-primary,
.page-container h3.mt-5,
.page-container h3.mt-10,
.page-container h3.mt-4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 14px !important;
  padding: 0;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--emb-fg) !important;
}

.page-container h2.text-semibold.text-primary .material-symbols-rounded,
.page-container h2.text-primary .material-symbols-rounded,
.page-container h3.text-semibold.text-primary .material-symbols-rounded,
.page-container h3.mt-5 .material-symbols-rounded,
.page-container h3.mt-10 .material-symbols-rounded,
.page-container h3.mt-4 .material-symbols-rounded {
  font-size: 20px;
  color: var(--emb-brand-600);
  margin: 0 !important;
}

/* El acento teal de los numeros en los titulos ("2 destinatarios", "3 enlaces")
   era de otra paleta. */
.page-container .text-teal {
  color: var(--emb-heading) !important;
}

/* ------------------------------------------------------- botones teal --- */

/* "Registro de apertura", "Registro de clicks", "Obtener la API"... iban en
   un teal solido que no existe en la paleta. Mismo boton que el resto. */
.page-container .btn.bg-teal-600,
.page-container .btn.btn-info.bg-teal-600 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--emb-radius-sm) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-fg) !important;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none !important;
}

.page-container .btn.bg-teal-600:hover,
.page-container .btn.btn-info.bg-teal-600:hover {
  background: var(--emb-surface-2) !important;
  border-color: var(--emb-brand-300) !important;
  color: var(--emb-heading) !important;
}

.page-container .btn.bg-teal-600 .material-symbols-rounded {
  font-size: 16px;
}

/* ------------------------------------------------- cajas de una grafica --- */

.page-container .border.shadow-sm.rounded,
.page-container .border.p-3.shadow-sm.rounded {
  border-color: var(--emb-line) !important;
  border-radius: var(--emb-radius) !important;
  background: var(--emb-surface);
  box-shadow: var(--emb-shadow) !important;
}

/* Mas colores para las tarjetas de recuento. */
.emb-stat.is-ok     { --emb-accent-color: var(--emb-ok); }
.emb-stat.is-danger { --emb-accent-color: var(--emb-danger); }

/* Una tarjeta puede ser un enlace (la de lista negra lleva a su pantalla). */
a.emb-stat {
  display: block;
  text-decoration: none;
  transition: border-color .15s ease;
}

a.emb-stat:hover {
  border-color: var(--emb-brand-300);
  text-decoration: none;
}

/* Etiquetas largas (las de Listas → Vista general son frases): que partan
   linea en vez de recortarse. */
.emb-stat-label > span:not(.material-symbols-rounded) {
  min-width: 0;
  line-height: 1.35;
}

.emb-stat-label .material-symbols-rounded {
  flex: 0 0 auto;
}

/* ---------------------------------------------------- listados en tabla --- */

/* 94 pantallas listan con <table class="table table-box pml-table">, y
   emboxia-ui.css convierte cada fila en una tarjeta flotante: 18px de padding,
   sombra propia, 10px de hueco entre filas y un salto al pasar el raton. Con
   tres lineas por celda (correo, etiquetas, estado) cada contacto ocupaba
   130px. Aqui pasan al mismo formato que la lista de campañas: una sola
   tarjeta con las filas separadas por una linea, 12px de padding. Los
   selectores repiten los de emboxia-ui.css a proposito, para ganarles por
   orden de carga sin subir especificidad. */
.page-container .listing-form table,
.page-container table.table {
  border-spacing: 0;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius);
  box-shadow: var(--emb-shadow);
  /* Nada de overflow:hidden: recortaba el menu desplegable que cuelga de la
     ultima fila (se vio en Sitios web). Las esquinas van en las celdas. */
  overflow: visible;
}

.page-container .listing-form table > thead > tr:first-child > th:first-child,
.page-container table.table > thead > tr:first-child > th:first-child,
.page-container .listing-form table > tbody:first-child > tr:first-child > td:first-child,
.page-container table.table > tbody:first-child > tr:first-child > td:first-child,
.page-container table.table.table-head > tbody:first-child > tr:first-child > th:first-child {
  border-top-left-radius: var(--emb-radius);
}

.page-container .listing-form table > thead > tr:first-child > th:last-child,
.page-container table.table > thead > tr:first-child > th:last-child,
.page-container .listing-form table > tbody:first-child > tr:first-child > td:last-child,
.page-container table.table > tbody:first-child > tr:first-child > td:last-child,
.page-container table.table.table-head > tbody:first-child > tr:first-child > th:last-child {
  border-top-right-radius: var(--emb-radius);
}

.page-container .listing-form table > tbody > tr:last-child > td:first-child,
.page-container table.table > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: var(--emb-radius);
}

.page-container .listing-form table > tbody > tr:last-child > td:last-child,
.page-container table.table > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: var(--emb-radius);
}

.page-container .listing-form table > thead > tr > th,
.page-container table.table > thead > tr > th,
.page-container table.table.table-head > tbody > tr:first-child > th,
.page-container table.table.table-head > tr:first-child > th {
  padding: 10px 14px;
  background: var(--emb-surface-2) !important;
  border-bottom: 1px solid var(--emb-line) !important;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--emb-muted);
}

.page-container .listing-form table > tbody > tr,
.page-container table.table > tbody > tr {
  background: transparent !important;
  box-shadow: none;
  transition: background-color .15s ease;
}

.page-container .listing-form table > tbody > tr:hover,
.page-container table.table > tbody > tr:hover {
  background: var(--emb-surface-2) !important;
  box-shadow: none;
  transform: none;
}

.page-container .listing-form table > tbody > tr > td,
.page-container table.table > tbody > tr > td {
  padding: 12px 14px;
  border: 0 !important;
  border-top: 1px solid var(--emb-line) !important;
  border-radius: 0 !important;
  font-size: 13px;
}

.page-container .listing-form table > tbody > tr:first-child > td,
.page-container table.table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

/* Si hay cabecera, la primera fila de datos si lleva linea encima. */
.page-container .listing-form table > thead + tbody > tr:first-child > td,
.page-container table.table > thead + tbody > tr:first-child > td {
  border-top: 1px solid var(--emb-line) !important;
}

.page-container .listing-form table > tbody > tr > td:first-child,
.page-container table.table > tbody > tr > td:first-child {
  padding-left: 18px;
}

.page-container .listing-form table > tbody > tr > td:last-child,
.page-container table.table > tbody > tr > td:last-child {
  padding-right: 18px;
}

/* Titulo de la fila al tamaño de la lista de campañas. */
.page-container tbody h5,
.page-container tbody .list-item-title,
.page-container tbody a.list-title {
  font-family: var(--emb-font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0 0 2px;
}

.page-container tbody .text-muted,
.page-container tbody .text-muted2,
.page-container tbody small {
  font-size: 12px !important;
}

/* Las etiquetas de estado dentro de una fila, al tamaño de las de campañas. */
.page-container tbody .label.label-flat {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* La tabla de carga (esqueleto animado) no lleva marco: es un parpadeo. */
.page-container .listing-form table.pre-list-content,
.page-container table.table.pre-list-content {
  border: 0;
  box-shadow: none;
  background: none;
}

/* ------------------------------------------------- menu del usuario --- */

/* El menu que se abre al pulsar el nombre en la barra lateral. app.css lo
   hacia de 500px con un panel decorativo de 200px a la derecha (.backdrop)
   con una imagen a 131% de ancho; al moverlo al body con position:fixed y
   scroll, la imagen se salia y tapaba media pantalla. Fuera el panel, y el
   menu a 320px, que es lo que mide su contenido. */
.top-user-menus {
  width: 320px !important;
  overflow: hidden;
}

.top-user-menus > li {
  max-width: none !important;
}

.top-user-menus .backdrop {
  display: none !important;
}

.top-user-menus .emb-user-head {
  padding: 16px 16px 12px !important;
  border-bottom: 1px solid var(--emb-line);
}

.top-user-menus .dropdown-item {
  padding: 10px 16px !important;
  font-size: 14px;
}

/* "Suscripcion y creditos" es la accion destacada del menu: fondo de marca y
   texto blanco. El tema pone el color del texto con !important, asi que aqui
   tambien, y con mas especificidad. */
.top-user-menus li a.emb-user-cta-link {
  background: var(--emb-brand-600) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 0 !important;
}

.top-user-menus li a.emb-user-cta-link:hover {
  background: var(--emb-brand-700) !important;
  color: #ffffff !important;
}

/* ---------------------------------- editor de automatizacion: barra --- */

/* La barra superior del editor la pintaba Acelle oscura (bg-dark) y por eso
   su texto es blanco o gris claro. Pero emboxia-theme.css pinta cualquier
   .navbar-main con --emb-nav-bg, que en modo claro es blanco: la barra se
   volvio clara y su texto se quedo blanco sobre blanco. Ahi estaban el
   titulo, "Regresar" y el nombre del cliente, invisibles pero presentes (se
   veian al seleccionar el texto).

   Se arregla por el lado del texto, no del fondo: la barra sigue al tema
   —clara con el panel claro, oscura con el oscuro— y sus textos usan las
   mismas variables --emb-nav-*, que ya se invierten solas en cada modo.

   La altura sigue en 53px: el lienzo y el panel lateral se dimensionan con
   calc(100vh - 53px) en automation.css y cambiarla los descuadraria. */

body.layout-dark .navbar-main .container-fluid {
  padding-left: 20px !important;
  padding-right: 20px !important;
  gap: 20px;
}

body.layout-dark .navbar-main .navbar-brand {
  margin-right: 16px !important;
  flex: 0 0 auto;
}

body.layout-dark .navbar-main .automation-title {
  margin: 0 !important;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--emb-nav-fg-strong) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}

/* El reloj que acompaña al titulo. */
body.layout-dark .navbar-main .automation-title + .material-symbols-rounded {
  font-size: 18px;
  color: var(--emb-nav-fg);
}

/* Las acciones de la derecha llevaban me-4 de distinto valor entre si; se
   igualan con un unico hueco. Ojo: el margen solo se anula en los hijos
   DIRECTOS. Anularlo tambien en los nietos quitaba el me-2 que separa cada
   icono de su texto, y el icono, que va escalado a 1.4, se comia la primera
   letra: se leia "gresar" en vez de "Regresar". */
body.layout-dark .automation-top-actions {
  gap: 22px;
}

body.layout-dark .automation-top-actions > * {
  margin-right: 0 !important;
}

body.layout-dark .automation-top-actions a.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--emb-nav-fg) !important;
  text-decoration: none;
}

body.layout-dark .automation-top-actions a.action:hover {
  color: var(--emb-nav-fg-strong) !important;
}

/* El icono dentro del enlace ya se separa con el gap del propio enlace. */
body.layout-dark .automation-top-actions a.action .material-symbols-rounded {
  margin: 0 !important;
  font-size: 18px;
  transform: none;
}

body.layout-dark .automation-top-actions .last_save_time {
  font-size: 12px;
  font-style: italic;
  color: var(--emb-nav-fg) !important;
  white-space: nowrap;
}

body.layout-dark .navbar-main .navbar-right {
  padding-right: 2px;
}

/* El selector para cambiar de automatizacion: su texto tambien iba claro. */
body.layout-dark .switch-automation a.action,
body.layout-dark .navbar-main .top-menu-select + .action {
  color: var(--emb-nav-fg) !important;
}

/* --------------------------------- logo de la barra del editor --- */

/* El logo del panel es un PNG cuadrado de 500x500. En la barra lateral algo
   lo acota, pero en la barra superior del editor no habia ninguna regla de
   tamaño: se pintaba a 500x500 dentro de una barra de 53px, asi que solo se
   veia su esquina superior izquierda. Eso era el "circulo naranja" suelto. */
body.layout-dark .navbar-main .navbar-brand img {
  height: 26px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain;
  display: block;
}

/* Junto al avatar sobra el nombre del cliente: el menu que se abre ya lo
   muestra, con el correo y el estado. */
body.layout-dark .navbar-main #user-menu-dropdown > span[style] {
  display: none !important;
}

/* ------------------------------------------- el pie, siempre abajo --- */

/* .page-container ya mide como minimo la pantalla entera, pero el pie iba
   justo detras del contenido: en una pagina corta quedaba a media altura y
   el hueco sobraba DEBAJO de el. Con la columna flexible, el margen
   automatico del pie se come ese hueco y lo empuja al fondo. El pie trae su
   propia separacion por arriba, asi que los 40px fijos ya no hacen falta. */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0;
}

.page-container > .app-footer {
  margin-top: auto;
  padding-top: 26px;
}

/* -------------------------------------------- origen del contacto --- */

/* De donde llego el lead: alta manual, importacion, formulario, API o
   webhook. Cada uno con su color para distinguirlos de un vistazo, en el
   mismo tono suave que el resto de estados: un bloque de color solido se
   leeria como un boton. */
.emb-origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}

.emb-origin .material-symbols-rounded {
  font-size: 15px;
  line-height: 1;
}

/* Alta manual desde el propio panel. */
.emb-origin-panel {
  background: var(--emb-brand-50);
  border-color: rgb(61 76 245 / .18);
  color: var(--emb-brand-700);
}

/* Importacion de CSV, Excel o Google Sheets. */
.emb-origin-import {
  background: #fff4e6;
  border-color: rgb(250 89 1 / .2);
  color: var(--emb-accent-600);
}

/* Formulario o pagina de suscripcion. */
.emb-origin-form {
  background: #e7f7f0;
  border-color: rgb(22 163 74 / .2);
  color: #15803d;
}

/* API autenticada. */
.emb-origin-api {
  background: #eef2ff;
  border-color: rgb(79 70 229 / .2);
  color: #4338ca;
}

/* Webhook publico: lo empuja un sistema de fuera. */
.emb-origin-webhook {
  background: #f3e8ff;
  border-color: rgb(147 51 234 / .2);
  color: #7e22ce;
}

/* Contactos anteriores a que se registrara el origen. */
.emb-origin-unknown {
  background: var(--emb-surface-2);
  border-color: var(--emb-line);
  color: var(--emb-muted);
}

/* En modo oscuro los fondos claros de arriba se quedan en nada, asi que se
   cambian por un velo del propio color. */
body.mode-dark .emb-origin-panel   { background: rgb(61 76 245 / .16);  color: var(--emb-brand-300); }
body.mode-dark .emb-origin-import  { background: rgb(250 89 1 / .16);   color: var(--emb-accent-300); }
body.mode-dark .emb-origin-form    { background: rgb(22 163 74 / .16);  color: #4ade80; }
body.mode-dark .emb-origin-api     { background: rgb(79 70 229 / .18);  color: #a5b4fc; }
body.mode-dark .emb-origin-webhook { background: rgb(147 51 234 / .18); color: #d8b4fe; }

.subscriber-origin-col {
  width: 1%;
  white-space: nowrap;
}

/* ------------------------------ guia de integracion del webhook --- */

/* La pestaña "Como integrar" del modal de webhook: lo que necesita quien
   programa la integracion, en el orden en que lo necesita. */
.emb-guia {
  margin-top: 22px;
  font-size: 14px;
}

.emb-guia-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-family: var(--emb-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--emb-fg);
}

.emb-guia-paso:first-child {
  margin-top: 0;
}

.emb-guia-paso > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: var(--emb-brand-600);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* Los cuatro datos imprescindibles: metodo, URL, uid y content-type. */
.emb-guia-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 20px;
  padding: 16px 18px;
  background: var(--emb-surface-2);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-sm);
}

.emb-guia-dato {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.emb-guia-etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.emb-guia-valor {
  font-size: 13px;
  color: var(--emb-fg);
  background: none;
  padding: 0;
  word-break: break-all;
}

.emb-guia-nota {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--emb-brand-50);
  border: 1px solid rgb(61 76 245 / .16);
  border-radius: var(--emb-radius-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--emb-fg);
}

body.mode-dark .emb-guia-nota {
  background: rgb(61 76 245 / .12);
}

.emb-guia-nota .material-symbols-rounded {
  font-size: 18px;
  color: var(--emb-brand-600);
  flex: 0 0 auto;
}

.emb-guia-nota a {
  color: var(--emb-heading);
  font-weight: 600;
}

/* Tablas de campos y de respuestas. */
.emb-guia-tabla {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-sm);
  overflow: hidden;
  font-size: 13px;
}

.emb-guia-tabla th {
  padding: 9px 14px;
  background: var(--emb-surface-2);
  border-bottom: 1px solid var(--emb-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--emb-muted);
  text-align: left;
}

.emb-guia-tabla td {
  padding: 10px 14px;
  border-top: 1px solid var(--emb-line);
  vertical-align: top;
  color: var(--emb-fg);
}

.emb-guia-tabla tbody tr:first-child td {
  border-top: 0;
}

.emb-guia-tabla code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--emb-surface-2);
  border: 1px solid var(--emb-line);
  font-size: 12px;
  color: var(--emb-heading);
}

.emb-guia-si,
.emb-guia-no {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.emb-guia-si { color: var(--emb-danger); }
.emb-guia-no { color: var(--emb-muted); }

.emb-guia-codigo-http {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.emb-guia-codigo-http.ok {
  background: rgb(22 163 74 / .12);
  color: #15803d;
}

.emb-guia-codigo-http.err {
  background: rgb(220 38 38 / .12);
  color: var(--emb-danger);
}

body.mode-dark .emb-guia-codigo-http.ok  { color: #4ade80; }
body.mode-dark .emb-guia-codigo-http.err { color: #fca5a5; }

/* Selector de lenguaje de los ejemplos. */
.emb-guia-lenguajes {
  display: flex;
  gap: 4px;
  margin: 0 0 -1px;
  padding: 0;
  list-style: none;
}

.emb-guia-lenguajes a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--emb-radius-sm) var(--emb-radius-sm) 0 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--emb-muted);
  text-decoration: none;
}

.emb-guia-lenguajes a:hover {
  color: var(--emb-fg);
}

.emb-guia-lenguajes a.activo {
  background: var(--emb-surface-2);
  border-color: var(--emb-line);
  color: var(--emb-heading);
}

.emb-guia-codigo {
  padding: 14px 16px;
  background: var(--emb-surface-2);
  border: 1px solid var(--emb-line);
  border-radius: 0 var(--emb-radius-sm) var(--emb-radius-sm) var(--emb-radius-sm);
  overflow-x: auto;
}

.emb-guia-codigo pre {
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
}

.emb-guia-codigo code {
  font-size: 12.5px;
  line-height: 1.65;
  background: none;
  padding: 0;
}

.emb-guia-lista {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--emb-fg);
}

.emb-guia-lista li + li {
  margin-top: 6px;
}

/* ============================================================================
   Documentación de la API
   ----------------------------------------------------------------------------
   La misma pantalla sirve dentro del panel y publicada en internet. Lo único
   que cambia es el layout que la envuelve; todo lo de aquí vale para las dos.
   ========================================================================== */

/* ------------------------------------------- cabecera de la pagina publicada --- */

.emb-docs-cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--emb-surface);
  border-bottom: 1px solid var(--emb-line);
  backdrop-filter: saturate(180%) blur(8px);
}

.emb-docs-cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 20px;
}

.emb-docs-marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.emb-docs-logo {
  height: 22px;
  width: auto;
  display: block;
}

/* Dos logos, uno por tema: el claro es para fondo oscuro y al revés. */
body:not(.mode-dark) .emb-docs-logo.logo-claro,
body.mode-dark .emb-docs-logo.logo-oscuro {
  display: none;
}

.emb-docs-marca-seccion {
  padding-left: 12px;
  border-left: 1px solid var(--emb-line);
  font-size: 14px;
  font-weight: 600;
  color: var(--emb-muted);
  white-space: nowrap;
}

.emb-docs-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emb-docs-volver,
.emb-docs-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-sm);
  background: var(--emb-surface);
  color: var(--emb-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.emb-docs-volver:hover,
.emb-docs-tema:hover {
  background: var(--emb-surface-2);
  border-color: var(--emb-brand-300);
  color: var(--emb-heading);
  text-decoration: none;
}

.emb-docs-tema {
  width: 36px;
  padding: 0;
}

.emb-docs-volver .material-symbols-rounded,
.emb-docs-tema .material-symbols-rounded {
  font-size: 18px;
}

/* El icono del interruptor enseña a qué modo vas a cambiar. */
body:not(.mode-dark) .emb-docs-tema .icono-claro,
body.mode-dark .emb-docs-tema .icono-oscuro {
  display: none;
}

.emb-docs-boton {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--emb-radius-sm);
  background: var(--emb-brand-600);
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.emb-docs-boton:hover {
  background: var(--emb-brand-700);
  text-decoration: none;
}

.emb-docs-contenido {
  padding-top: 28px;
}

@media (max-width: 720px) {
  .emb-docs-marca-seccion,
  .emb-docs-volver-texto {
    display: none;
  }

  .emb-docs-volver {
    width: 36px;
    padding: 0;
  }
}

/* --------------------------------------------------------- la portada --- */

.emb-api-intro {
  max-width: 68ch;
  margin-bottom: 30px;
}

.emb-api-titulo {
  margin: 0 0 8px;
  font-family: var(--emb-font-display, var(--emb-font));
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--emb-heading);
}

.emb-api-lema {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--emb-muted);
}

.emb-api-aviso {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: var(--emb-brand-50);
  border: 1px solid rgb(61 76 245 / .16);
  border-radius: var(--emb-radius-sm);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--emb-fg);
}

body.mode-dark .emb-api-aviso {
  background: rgb(61 76 245 / .12);
}

.emb-api-aviso .material-symbols-rounded {
  font-size: 19px;
  color: var(--emb-brand-600);
  flex: 0 0 auto;
}

.emb-api-aviso code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  font-size: 12.5px;
}

/* --------------------------------------------- cuerpo: indice + fichas --- */

.emb-api-cuerpo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.emb-api-indice {
  position: sticky;
  top: 84px;
}

.emb-api-indice-titulo {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.emb-api-indice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--emb-line);
}

.emb-api-indice a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--emb-muted);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.emb-api-indice a:hover {
  color: var(--emb-fg);
  text-decoration: none;
}

.emb-api-indice a.activo {
  color: var(--emb-heading);
  border-left-color: var(--emb-brand-600);
}

.emb-api-indice-cuenta {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--emb-surface-2);
  border: 1px solid var(--emb-line);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  color: var(--emb-muted);
}

.emb-api-seccion {
  margin-bottom: 38px;
  scroll-margin-top: 84px;
}

.emb-api-seccion-titulo {
  margin: 0 0 14px;
  font-family: var(--emb-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.emb-api-lista {
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius);
  box-shadow: var(--emb-shadow);
}

.emb-api-endpoint + .emb-api-endpoint {
  border-top: 1px solid var(--emb-line);
}

/* La cabecera de cada endpoint es un boton: se abre con el raton y con el
   teclado, y anuncia si esta abierta. */
.emb-api-cabecera {
  display: grid;
  grid-template-columns: 74px minmax(150px, auto) minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}

.emb-api-cabecera:hover {
  background: var(--emb-surface-2);
}

.emb-api-endpoint:first-child .emb-api-cabecera {
  border-radius: var(--emb-radius) var(--emb-radius) 0 0;
}

.emb-api-endpoint:last-child:not(.abierto) .emb-api-cabecera {
  border-radius: 0 0 var(--emb-radius) var(--emb-radius);
}

.emb-api-metodo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
}

.metodo-get    { background: rgb(61 76 245 / .12);  color: var(--emb-brand-700); }
.metodo-post   { background: rgb(22 163 74 / .13);  color: #15803d; }
.metodo-patch  { background: rgb(217 119 6 / .14);  color: #b45309; }
.metodo-put    { background: rgb(217 119 6 / .14);  color: #b45309; }
.metodo-delete { background: rgb(220 38 38 / .12);  color: var(--emb-danger); }

body.mode-dark .metodo-get    { color: var(--emb-brand-300); }
body.mode-dark .metodo-post   { color: #4ade80; }
body.mode-dark .metodo-patch,
body.mode-dark .metodo-put    { color: #fbbf24; }
body.mode-dark .metodo-delete { color: #fca5a5; }

.emb-api-ruta {
  font-size: 13px;
  font-weight: 600;
  color: var(--emb-heading);
  background: none;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emb-api-descripcion {
  font-size: 13px;
  color: var(--emb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emb-api-flecha {
  font-size: 20px;
  color: var(--emb-muted);
  transition: transform .18s ease;
}

.emb-api-endpoint.abierto .emb-api-flecha {
  transform: rotate(180deg);
}

.emb-api-detalle {
  border-top: 1px solid var(--emb-line);
  background: var(--emb-surface-2);
}

.emb-api-detalle-interior {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  padding: 20px 18px;
}

.emb-api-columna {
  min-width: 0;
}

.emb-api-subtitulo {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.emb-api-columna .emb-api-subtitulo + * {
  margin-top: 0;
}

.emb-api-columna .emb-api-subtitulo:not(:first-child) {
  margin-top: 20px;
}

.emb-api-parametros {
  margin: 0;
  font-size: 13px;
}

.emb-api-parametros dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 600;
}

.emb-api-parametros dt:first-child {
  margin-top: 0;
}

.emb-api-parametros dt code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  font-size: 12px;
  color: var(--emb-heading);
}

.emb-api-opcional {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.emb-api-parametros dd {
  margin: 3px 0 0;
  padding-left: 2px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--emb-muted);
}

.emb-api-devuelve,
.emb-api-ayuda {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--emb-fg);
}

.emb-api-ayuda {
  margin-top: 14px;
  color: var(--emb-muted);
}

.emb-api-ayuda code {
  display: inline-block;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  font-size: 12px;
  word-break: break-all;
}

.emb-api-ejemplo {
  margin: 0;
  padding: 14px 16px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-sm);
  overflow-x: auto;
}

.emb-api-ejemplo + .emb-api-ejemplo {
  margin-top: 10px;
}

.emb-api-ejemplo code {
  background: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--emb-fg);
  white-space: pre;
}

/* El ejemplo marca en rojo las partes que hay que sustituir. */
.emb-api-ejemplo redbold {
  color: var(--emb-accent-500);
  font-weight: 700;
}

@media (max-width: 980px) {
  .emb-api-cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .emb-api-indice {
    position: static;
  }

  .emb-api-indice ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-left: 0;
  }

  .emb-api-indice a {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--emb-line);
    border-radius: 999px;
  }

  .emb-api-indice a.activo {
    border-color: var(--emb-brand-400);
  }
}

@media (max-width: 720px) {
  .emb-api-cabecera {
    grid-template-columns: 66px minmax(0, 1fr) 20px;
    row-gap: 6px;
  }

  .emb-api-descripcion {
    grid-column: 1 / -1;
    white-space: normal;
  }
}

/* ------------------------------------------- titulo con accion al lado --- */

/* El titulo de la pantalla y su boton principal, en la misma linea y el boton
   pegado al borde derecho. En pantallas estrechas el boton baja debajo en vez
   de encogerse y partir su texto en dos. */
.emb-titulo-accion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 18px;
}

.emb-titulo-accion-texto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--emb-font);
  font-size: 19px;
  font-weight: 700;
  color: var(--emb-fg);
}

.emb-titulo-accion-texto .material-symbols-rounded {
  font-size: 22px;
  color: var(--emb-brand-600);
}

.emb-titulo-accion .emb-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

@media (max-width: 560px) {
  .emb-titulo-accion .emb-btn {
    width: 100%;
  }
}

/* --------------------------------- caja de resumen de la suscripcion --- */

/* La caja «Renovar suscripcion» va con position:sticky escrita en el propio
   atributo style. Un elemento pegajoso sin z-index se queda en el mismo
   nivel que el resto, asi que el bloque del metodo de pago se le montaba
   encima y los dos textos se leian superpuestos.
   
   Y en pantallas estrechas las dos columnas se apilan: ahi no hay nada a lo
   que quedarse pegado, solo estorba, asi que deja de ser pegajosa. */
.order-box {
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .order-box {
    position: static !important;
    top: auto !important;
    margin-top: 20px;
  }
}

/* ==========================================================================
   Planes: pestañas por modalidad y tarjeta

   Estaba todo en un <style> dentro de subscription/selectPlan.blade.php, así
   que el modal de cambio de plan -que es otra vista- no lo recibía y enseñaba
   las mismas tarjetas sin estilo. Ahora vive aquí y lo usan las dos.
   ========================================================================== */

.plans-grouped-container {
    margin-top: 2rem;
}

.plan-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--emb-line, #e3e6f6);
    margin-bottom: 2rem;
}

.plan-tab-btn {
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: .85rem 1.25rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--emb-muted, #6b7194);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
    outline: none;
}

.plan-tab-btn:hover {
    color: var(--emb-brand-600, #1c2be3);
    background-color: var(--emb-bg-alt, #f3f5ff);
}

.plan-tab-btn:focus-visible {
    outline: 2px solid var(--emb-brand-600, #1c2be3);
    outline-offset: 2px;
}

.plan-tab-btn.active {
    color: var(--emb-brand-600, #1c2be3);
    border-bottom-color: var(--emb-brand-600, #1c2be3);
    background-color: var(--emb-bg-alt, #f3f5ff);
}

.plan-tab-btn .material-symbols-rounded {
    font-size: 1.2rem;
}

.plan-count-badge {
    min-width: 1.5rem;
    margin-left: .5rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background-color: var(--emb-brand-600, #1c2be3);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}

.plan-tab-content {
    display: none;
}

.plan-tab-content.active {
    display: block;
    animation: embPlanFadeIn .25s ease-in;
}

@keyframes embPlanFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.plan-section-header {
    margin-bottom: 1.5rem;
}

.plan-section-title {
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--emb-heading, #0c1136);
}

.plan-section-title .material-symbols-rounded {
    font-size: 1.4rem;
    color: var(--emb-brand-600, #1c2be3);
}

.plan-section-description {
    margin: 0;
    font-size: .92rem;
    color: var(--emb-muted, #6b7194);
}

/* Rejilla real: así una tarjeta con más características no ensancha a las demás */
.plans-grouped-container .new-price-box .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.plans-grouped-container .plan-card-modern {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    min-height: 460px;
    height: auto;
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: visible;
}

.plans-grouped-container .plan-card-header {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.plans-grouped-container .plan-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 10px;
}

.plans-grouped-container .plan-desc-area {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 10px;
    padding-right: 4px;
}

.plans-grouped-container .plan-name {
    flex-shrink: 0;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.plans-grouped-container .plan-price-section {
    margin-bottom: 6px;
}

.plans-grouped-container .plan-currency-symbol {
    font-size: 22px;
}

.plans-grouped-container .plan-price-amount {
    font-size: 40px;
    line-height: 1.05;
}

.plans-grouped-container .plan-currency-code {
    font-size: 12px;
    opacity: .9;
}

.plans-grouped-container .plan-frequency {
    font-size: 12px;
}

.plans-grouped-container .plan-frequency .material-symbols-rounded {
    font-size: 16px;
}

.plans-grouped-container .plan-divider {
    margin: 10px 0;
    opacity: .35;
}

.plans-grouped-container .plan-description {
    flex: 0 1 auto;
    margin-bottom: 12px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.plans-grouped-container .plan-description-list {
    flex: 0 1 auto;
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
}

.plans-grouped-container .plan-description-list li {
    position: relative;
    margin-bottom: 6px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--emb-fg, #0c1136);
    overflow-wrap: break-word;
}

.plans-grouped-container .plan-description-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #fa5901;
    font-size: 16px;
    font-weight: 700;
}

.plans-grouped-container .plan-description-list li:last-child {
    margin-bottom: 0;
}

.plans-grouped-container .plan-desc-item--hidden {
    display: none;
}

.plans-grouped-container .plan-card-modern.plan-desc-expanded .plan-desc-item--hidden {
    display: list-item;
}

.plans-grouped-container .plan-desc-toggle {
    width: 100%;
    margin: 2px 0 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--emb-line, #e3e6f6);
    border-radius: 10px;
    background: transparent;
    color: var(--emb-brand-600, #1c2be3);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.plans-grouped-container .plan-desc-toggle:hover {
    background: var(--emb-bg-alt, #f3f5ff);
    border-color: var(--emb-brand-300, #9da8ff);
}

.plans-grouped-container .plan-features {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.plans-grouped-container .feature-item {
    font-size: 13px;
    line-height: 1.4;
}

.plans-grouped-container .plan-card-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0;
}

.plans-grouped-container .btn-plan-buy {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.plans-grouped-container .plan-trial-info {
    font-size: 11px;
    opacity: .95;
}

.plans-grouped-container .plan-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 17, 186, .2);
}

/* El plan contratado: se distingue y su boton no lleva a ninguna parte */
.plan-card-modern.plan-card-actual {
    border-color: var(--emb-brand-600, #1c2be3);
    box-shadow: 0 0 0 2px var(--emb-brand-600, #1c2be3) inset;
}

.plan-card-modern.plan-card-actual:hover {
    transform: none;
}

.btn-plan-actual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--emb-bg-alt, #f3f5ff) !important;
    color: var(--emb-brand-600, #1c2be3) !important;
    border: 1px solid var(--emb-brand-300, #9da8ff) !important;
    font-weight: 700;
    cursor: default;
}

.btn-plan-actual .material-symbols-rounded {
    font-size: 18px;
}

@media (max-width: 768px) {
    .plan-tabs {
        flex-direction: column;
        gap: .5rem;
    }

    .plan-tab-btn {
        width: 100%;
        justify-content: center;
        padding: .75rem 1rem;
    }

    .plans-grouped-container .plan-card-modern {
        min-height: 0;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   El plan contratado, en la pagina de Suscripcion
   -------------------------------------------------------------------------- */

.emb-plan-actual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid var(--emb-line, #e3e6f6);
    border-left: 4px solid var(--emb-brand-600, #1c2be3);
    border-radius: 12px;
    background: var(--emb-bg-alt, #f3f5ff);
}

.emb-plan-actual-etiqueta {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--emb-muted, #6b7194);
}

.emb-plan-actual-nombre {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--emb-heading, #0c1136);
}

.emb-plan-actual-datos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.emb-plan-actual-precio {
    font-size: 20px;
    font-weight: 800;
    color: var(--emb-heading, #0c1136);
}

.emb-plan-actual-modalidad {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--emb-muted, #6b7194);
}

.emb-plan-actual-modalidad .material-symbols-rounded {
    font-size: 16px;
}

.emb-plan-actual-nota {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--emb-bg-alt, #f3f5ff);
    font-size: 13px;
    line-height: 1.55;
    color: var(--emb-muted, #6b7194);
}

.emb-plan-actual-nota .material-symbols-rounded {
    font-size: 18px;
    color: var(--emb-brand-600, #1c2be3);
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .emb-plan-actual {
        flex-direction: column;
        align-items: flex-start;
    }

    .emb-plan-actual-datos {
        align-items: flex-start;
        text-align: left;
    }
}

/* La linea que explica cada cifra de creditos en la barra de Suscripcion */
.emb-credito-nota {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    opacity: .85;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .emb-credito-nota {
        white-space: normal;
    }
}

/* --------------------------------------------------------------------------
   Cajas pegajosas: el fondo tiene que ser OPACO

   La caja de la factura y el resumen del pedido se quedan pegados arriba
   mientras el resto de la pagina sigue bajando. En modo oscuro las pintaban
   con rgba(255,255,255,.05), que es translucido: lo que pasaba por debajo se
   leia a traves de la caja, y el aviso de «no tienes metodo de pago» salia
   encima del importe.

   Con un color opaco y un z-index, lo de debajo pasa por debajo.
   -------------------------------------------------------------------------- */

.order-summary-card,
.sidebar-invoice-card {
    background-color: var(--emb-surface);
}

body.mode-dark .order-summary-card,
body.mode-dark .sidebar-invoice-card {
    background-color: var(--emb-surface) !important;
}