/* =============================================================================
   Emboxia — capa visual del panel
   =============================================================================

   emboxia-theme.css define los colores y arregla los contrastes. Este fichero
   es lo otro: la forma. Se carga despues.

   El panel venia de Acelle, y cada pantalla habia ido añadiendo su propio
   <style> con !important. El resultado era que no habia sistema: botones
   cuadrados de 8px junto a pildoras, el naranja de acento repetido en cada fila
   de la tabla compitiendo con la accion principal, y las metricas con la misma
   clase que los titulos, asi que un "0%" pesaba lo mismo que el nombre del
   cliente.

   Aqui se fija un sistema y se aplica a las piezas compartidas, que son las
   mismas en las ~40 pantallas de listado del panel.

   Reglas que sigue todo lo de abajo:

     forma     boton y estado -> pildora (999px), como en la landing
               fila, tarjeta y barra de filtros -> 16px
               campo y desplegable -> 10px

     ritmo     base de 8. Alto de control: 38px. Separacion entre filas: 10px.

     color     el naranja es la accion principal de la pantalla, UNA por
               pantalla. El azul de marca es navegacion y enlaces. Los estados
               van en su color semantico y en tono suave, nunca en bloque
               solido, porque un bloque azul solido se lee como boton.

     peso      el titulo de la fila manda; todo lo demas baja a 13px y gris.

   Las medidas concretas (18px, 999px...) van escritas tal cual y no como
   variables nuevas: son pocas y se leen mejor aqui que a traves de un token.
   ========================================================================== */

:root {
  --emb-row-gap: 10px;
  --emb-control-h: 38px;
  --emb-radius-pill: 999px;
  --emb-radius-card: 16px;
  --emb-radius-field: 10px;
  --emb-lift: 0 1px 2px rgb(12 17 54 / 0.04), 0 10px 24px -14px rgb(12 17 54 / 0.18);
  --emb-lift-hover: 0 2px 4px rgb(12 17 54 / 0.06), 0 16px 32px -14px rgb(12 17 54 / 0.26);
}

body.mode-dark {
  --emb-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 24px -14px rgb(0 0 0 / 0.6);
  --emb-lift-hover: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 32px -14px rgb(0 0 0 / 0.75);
}

/* -----------------------------------------------------------------------------
   1. Cabecera de pagina
   -------------------------------------------------------------------------- */

.page-container .page-title {
  padding-bottom: 4px;
}

.page-container .page-title .breadcrumb {
  padding: 0;
  margin: 0 0 10px;
  background: none;
  font-size: 13px;
}
.page-container .page-title .breadcrumb .breadcrumb-item,
.page-container .page-title .breadcrumb .breadcrumb-item a {
  color: var(--emb-muted) !important;
  font-weight: 500;
}
.page-container .page-title .breadcrumb .breadcrumb-item a:hover {
  color: var(--emb-brand-600) !important;
}

.page-container .page-title h1 {
  font-family: var(--emb-font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--emb-heading);
  margin: 0;
}

/* El icono decorativo que llevan los titulos ("format_list_bulleted" delante de
   "Clientes") no dice nada que el titulo no diga ya, y desequilibra la linea. */
.page-container .page-title h1 .material-symbols-rounded,
.page-container .page-title h1 .material-icons-outlined {
  display: none;
}

/* La descripcion de cada pantalla es el texto largo que venia de Acelle. Baja a
   texto secundario y se le pone medida: a todo el ancho son 200 caracteres por
   linea y no se lee. */
.page-container .page-title + p,
.page-container .page-title ~ .page-description,
.page-container > .text-muted:first-of-type {
  color: var(--emb-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
  margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   2. Botones
   -------------------------------------------------------------------------- */

.page-container .btn,
.page-container a.btn,
.page-container button.btn {
  border-radius: var(--emb-radius-pill) !important;
  height: var(--emb-control-h);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: none;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-color 0.18s, border-color 0.18s, color 0.18s;
}
.page-container .btn:active { transform: scale(0.97); }
.page-container .btn .material-symbols-rounded,
.page-container .btn .material-icons-outlined { font-size: 19px; }

/* Accion principal: naranja, y solo una por pantalla. Son los enlaces de crear
   que Acelle pinta siempre arriba a la derecha del listado. */
.page-container .top-list-controls .btn-secondary,
.page-container a.btn[href*='create'],
.page-container .btn-accent {
  background: var(--emb-accent-500) !important;
  border-color: var(--emb-accent-500) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -6px rgb(250 89 1 / 0.55);
}
.page-container .top-list-controls .btn-secondary:hover,
.page-container a.btn[href*='create']:hover,
.page-container .btn-accent:hover {
  background: var(--emb-accent-600) !important;
  border-color: var(--emb-accent-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgb(250 89 1 / 0.6);
}

.page-container .btn-primary {
  background: var(--emb-brand-700) !important;
  border-color: var(--emb-brand-700) !important;
  color: #ffffff !important;
}
.page-container .btn-primary:hover {
  background: var(--emb-brand-600) !important;
  border-color: var(--emb-brand-600) !important;
  transform: translateY(-1px);
}
body.mode-dark .page-container .btn-primary {
  background: var(--emb-brand-500) !important;
  border-color: var(--emb-brand-500) !important;
}

/* Botones de fila: discretos. Antes cada fila tenia un cuadrado naranja, y con
   quince filas la pantalla entera pedia atencion a la vez. */
.page-container .btn-light,
.page-container .btn-default,
.page-container .btn-ghost {
  background: var(--emb-surface) !important;
  border-color: var(--emb-line) !important;
  color: var(--emb-fg) !important;
}
.page-container .btn-light:hover,
.page-container .btn-default:hover,
.page-container .btn-ghost:hover {
  background: var(--emb-bg-alt) !important;
  border-color: var(--emb-brand-300) !important;
  color: var(--emb-brand-700) !important;
}
body.mode-dark .page-container .btn-light:hover,
body.mode-dark .page-container .btn-default:hover,
body.mode-dark .page-container .btn-ghost:hover {
  color: #ffffff !important;
  border-color: var(--emb-brand-400) !important;
}

/* Boton que es solo un icono: cuadrado con esquinas redondas, no pildora.
   Ojo: en Acelle '.btn-icon' significa 'boton CON icono', no 'solo icono', y
   varios llevan texto al lado. Fijarles el ancho recortaba el texto ('Edita').
   Solo se cuadran los que declaran no tener texto. */
.page-container .btn.btn-square,
.page-container .btn-icon.btn-no-text {
  width: var(--emb-control-h);
  padding: 0;
  border-radius: 12px !important;
}

/* -----------------------------------------------------------------------------
   3. Barra de filtros
   -------------------------------------------------------------------------- */

.page-container .top-list-controls {
  background: var(--emb-surface) !important;
  border: 1px solid var(--emb-line);
  border-radius: var(--emb-radius-card);
  padding: 10px 12px;
  margin-bottom: 14px;
  gap: 10px;
  align-items: center;
  box-shadow: var(--emb-lift);
}

.page-container .filter-box {
  gap: 8px;
  height: auto;
  flex-wrap: wrap;
}
.page-container .filter-box > * { margin: 0 !important; }

.page-container .filter-box .filter-group,
.page-container .top-list-controls label {
  font-size: 13px;
  font-weight: 600;
  color: var(--emb-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Todos los controles a la misma altura y el mismo radio. Antes habia tres
   alturas distintas en la misma linea. */
.page-container .filter-box input.search,
.page-container .filter-box .form-control,
.page-container .top-list-controls .form-control,
.page-container .filter-box .select2-selection--single,
.page-container .top-list-controls .select2-selection--single,
.page-container .filter-box .btn,
.page-container .top-list-controls .btn {
  height: var(--emb-control-h) !important;
  min-height: var(--emb-control-h);
  border-radius: var(--emb-radius-field) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-bg-alt) !important;
  color: var(--emb-fg) !important;
  font-size: 14px;
  box-shadow: none !important;
}
.page-container .filter-box .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--emb-control-h) - 2px) !important;
  padding-left: 12px;
  color: var(--emb-fg) !important;
}
.page-container .filter-box .select2-selection--single .select2-selection__arrow {
  height: calc(var(--emb-control-h) - 2px) !important;
}
.page-container .filter-box input.search {
  width: 240px;
  padding-left: 12px;
}
.page-container .filter-box input.search:focus,
.page-container .top-list-controls .form-control:focus {
  border-color: var(--emb-brand-400) !important;
  background: var(--emb-surface) !important;
  outline: 2px solid rgb(61 76 245 / 0.18);
  outline-offset: -1px;
}

/* La accion principal de la barra no lleva el fondo de campo. */
.page-container .top-list-controls .btn-secondary,
.page-container .top-list-controls a.btn[href*='create'] {
  border-radius: var(--emb-radius-pill) !important;
  background: var(--emb-accent-500) !important;
  border-color: var(--emb-accent-500) !important;
  color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   4. El listado: cada fila es una tarjeta
   -------------------------------------------------------------------------- */

.page-container .listing-form table,
.page-container table.table {
  border-collapse: separate !important;
  border-spacing: 0 var(--emb-row-gap);
  width: 100%;
}

.page-container .listing-form table > thead > tr > th,
.page-container table.table > thead > tr > th {
  border: none !important;
  background: none !important;
  padding: 0 16px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emb-muted);
}

.page-container .listing-form table > tbody > tr,
.page-container table.table > tbody > tr {
  background: var(--emb-surface) !important;
  box-shadow: var(--emb-lift);
  transition: box-shadow 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.page-container .listing-form table > tbody > tr:hover,
.page-container table.table > tbody > tr:hover {
  box-shadow: var(--emb-lift-hover);
  transform: translateY(-1px);
}

.page-container .listing-form table > tbody > tr > td,
.page-container table.table > tbody > tr > td {
  background: transparent !important;
  border-top: 1px solid var(--emb-line) !important;
  border-bottom: 1px solid var(--emb-line) !important;
  border-left: none !important;
  border-right: none !important;
  padding: 18px 12px;
  vertical-align: middle;
}
.page-container .listing-form table > tbody > tr > td:first-child,
.page-container table.table > tbody > tr > td:first-child {
  border-left: 1px solid var(--emb-line) !important;
  border-top-left-radius: var(--emb-radius-card);
  border-bottom-left-radius: var(--emb-radius-card);
  padding-left: 20px;
}
.page-container .listing-form table > tbody > tr > td:last-child,
.page-container table.table > tbody > tr > td:last-child {
  border-right: 1px solid var(--emb-line) !important;
  border-top-right-radius: var(--emb-radius-card);
  border-bottom-right-radius: var(--emb-radius-card);
  padding-right: 20px;
}

/* Titulo de la fila y sus metadatos. El titulo manda; lo demas baja de tamaño
   y de color, que es lo que faltaba: antes el nombre y la tasa de rebotes
   tenian el mismo peso y parecian dos titulos. */
.page-container tbody h5,
.page-container tbody .list-item-title {
  font-family: var(--emb-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 3px;
}
.page-container tbody h5 > a,
.page-container tbody .list-item-title > a {
  color: var(--emb-fg) !important;
  text-decoration: none;
}
.page-container tbody h5 > a:hover,
.page-container tbody .list-item-title > a:hover {
  color: var(--emb-brand-600) !important;
}
body.mode-dark .page-container tbody h5 > a:hover { color: var(--emb-brand-300) !important; }

.page-container tbody .text-muted,
.page-container tbody .text-muted2,
.page-container tbody small {
  font-size: 13px !important;
  font-weight: 500;
  color: var(--emb-muted) !important;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   5. Estados
   -------------------------------------------------------------------------- */

/* Pildora pequeña con punto, en tono suave. Un bloque de color solido del
   tamaño de un boton se lee como boton y la gente intenta pulsarlo. */
.page-container .label,
.page-container .badge,
.page-container .badge-activo,
.page-container .list-status .label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border-radius: var(--emb-radius-pill) !important;
  padding: 4px 11px 4px 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid transparent;
  box-shadow: none !important;
  background: var(--emb-bg-alt) !important;
  color: var(--emb-muted) !important;
}
.page-container .label::before,
.page-container .badge-activo::before,
.page-container .list-status .label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Verde: activo, pagado, terminado. */
.page-container .badge-activo,
.page-container .label.bg-success, .page-container .label.bg-active,
.page-container .label.bg-paid, .page-container .label.bg-PAID,
.page-container .label.bg-done, .page-container .label.bg-sent {
  background: rgb(22 163 74 / 0.12) !important;
  color: #15803d !important;
  border-color: rgb(22 163 74 / 0.22);
}
body.mode-dark .page-container .badge-activo,
body.mode-dark .page-container .label.bg-success,
body.mode-dark .page-container .label.bg-active,
body.mode-dark .page-container .label.bg-paid,
body.mode-dark .page-container .label.bg-PAID,
body.mode-dark .page-container .label.bg-done,
body.mode-dark .page-container .label.bg-sent {
  background: rgb(34 197 94 / 0.16) !important;
  color: #86efac !important;
  border-color: rgb(34 197 94 / 0.28);
}

/* Ambar: pendiente, en curso, nuevo. */
.page-container .label.bg-new, .page-container .label.bg-NEW,
.page-container .label.bg-pending, .page-container .label.bg-warning,
.page-container .label.bg-processing, .page-container .label.bg-queued {
  background: rgb(217 119 6 / 0.12) !important;
  color: #a85b00 !important;
  border-color: rgb(217 119 6 / 0.22);
}
body.mode-dark .page-container .label.bg-new,
body.mode-dark .page-container .label.bg-NEW,
body.mode-dark .page-container .label.bg-pending,
body.mode-dark .page-container .label.bg-warning,
body.mode-dark .page-container .label.bg-processing,
body.mode-dark .page-container .label.bg-queued {
  background: rgb(245 158 11 / 0.16) !important;
  color: #fcd34d !important;
  border-color: rgb(245 158 11 / 0.28);
}

/* Rojo: error, fallido, cancelado. */
.page-container .label.bg-danger, .page-container .label.bg-failed,
.page-container .label.bg-error, .page-container .label.bg-cancelled {
  background: rgb(220 38 38 / 0.12) !important;
  color: #c1121f !important;
  border-color: rgb(220 38 38 / 0.22);
}
body.mode-dark .page-container .label.bg-danger,
body.mode-dark .page-container .label.bg-failed,
body.mode-dark .page-container .label.bg-error,
body.mode-dark .page-container .label.bg-cancelled {
  background: rgb(248 113 113 / 0.16) !important;
  color: #fca5a5 !important;
  border-color: rgb(248 113 113 / 0.28);
}

/* -----------------------------------------------------------------------------
   6. Metricas de la fila
   -------------------------------------------------------------------------- */

/* Antes cada metrica iba dentro de un recuadro con borde, lo que la hacia
   parecer un campo de formulario vacio. Fuera el recuadro: numero, barra fina
   y etiqueta. */
.page-container .single-stat-box {
  margin-right: 28px;
  min-width: 118px;
}
.page-container .single-stat-box .stat-num {
  display: block;
  font-family: var(--emb-font-display);
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--emb-fg) !important;
  line-height: 1.2;
  margin-bottom: 6px;
}
.page-container .progress {
  height: 4px !important;
  border-radius: var(--emb-radius-pill);
  background: var(--emb-line) !important;
  overflow: hidden;
  margin: 0 0 7px !important;
}
.page-container .progress-bar {
  border-radius: var(--emb-radius-pill);
  background: var(--emb-brand-500) !important;
}
.page-container .single-stat-box .text-muted {
  display: block;
  font-size: 12px !important;
  line-height: 1.45;
}
.page-container .single-stat-box .text-muted strong {
  font-weight: 700;
  color: var(--emb-fg);
}

/* -----------------------------------------------------------------------------
   7. Pie del listado y paginacion
   -------------------------------------------------------------------------- */

.page-container .list-bottom,
.page-container .per-page-select-container {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--emb-muted);
  margin-top: 6px;
}
.page-container select[name='per_page'],
.page-container .per-page-select-container select {
  height: 34px !important;
  width: auto !important;
  min-width: 72px;
  border-radius: var(--emb-radius-field) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-fg) !important;
  font-size: 13px;
  padding: 0 10px;
}

.page-container .pagination { gap: 4px; }
.page-container .pagination .page-link {
  border-radius: 10px !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-fg) !important;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.page-container .pagination .page-item.active .page-link {
  background: var(--emb-brand-700) !important;
  border-color: var(--emb-brand-700) !important;
  color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
   8. Pantalla vacia
   -------------------------------------------------------------------------- */

.page-container .empty-list {
  background: var(--emb-surface);
  border: 1px dashed var(--emb-line);
  border-radius: var(--emb-radius-card);
  padding: 56px 24px;
  text-align: center;
}
.page-container .empty-list .material-symbols-rounded {
  font-size: 42px !important;
  opacity: 0.6;
  margin-bottom: 10px;
  display: block;
}
.page-container .empty-list .line-1 {
  display: block;
  font-family: var(--emb-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--emb-fg);
}
.page-container .empty-list .line-2 {
  display: block;
  font-size: 14px;
  color: var(--emb-muted);
  margin-top: 5px;
}

/* -----------------------------------------------------------------------------
   9. Barra lateral
   -------------------------------------------------------------------------- */

/* El submenu abierto iba sobre un bloque azul brillante que pesaba mas que el
   contenido de la pagina. Pasa a un velo translucido, que separa igual sin
   gritar. */
body .navbar-main .nav-item .dropdown-menu,
body.mode-dark .navbar-main .nav-item .dropdown-menu {
  background: var(--emb-nav-veil) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin: 2px 8px 6px !important;
  padding: 4px !important;
}
.navbar-main .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--emb-nav-fg) !important;
}
.navbar-main .dropdown-menu .dropdown-item:hover {
  background: var(--emb-nav-line) !important;
  color: var(--emb-nav-fg-strong) !important;
}
.navbar-main .dropdown-menu .nav-item.active > .dropdown-item,
.navbar-main .dropdown-menu .dropdown-item.active {
  background: var(--emb-nav-veil-strong) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.navbar-main .navbar-nav > .nav-item > .nav-link {
  border-radius: 10px;
  margin: 1px 8px;
  padding: 9px 12px !important;
  font-size: 14.5px;
  font-weight: 500;
}

/* Las dos herramientas de abajo: que se lean como un grupo y no como dos
   botones sueltos flotando. */
.sidebar-tools .sidebar-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
  margin-top: 6px;
  border-top: 1px solid var(--emb-nav-line);
}

/* -----------------------------------------------------------------------------
   10. Formularios
   -------------------------------------------------------------------------- */

.page-container .form-control,
.page-container .form-select,
.page-container textarea.form-control {
  border-radius: var(--emb-radius-field) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-fg) !important;
  font-size: 14px;
  padding: 9px 12px;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.page-container .form-control:focus,
.page-container .form-select:focus {
  border-color: var(--emb-brand-400) !important;
  box-shadow: 0 0 0 3px rgb(61 76 245 / 0.16) !important;
}
.page-container .form-label,
.page-container label.control-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--emb-fg);
  margin-bottom: 6px;
}

/* Tarjetas de contenido que no son listados (paneles de ajustes, fichas). */
.page-container .panel,
.page-container .card:not(.plan-card-modern) {
  border-radius: var(--emb-radius-card) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  box-shadow: var(--emb-lift);
}

/* -----------------------------------------------------------------------------
   11. Pantallas estrechas
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  .page-container .page-title h1 { font-size: 24px; }
  .page-container .top-list-controls { flex-wrap: wrap; }
  .page-container .filter-box input.search { width: 100%; }
  .page-container .listing-form table > tbody > tr > td { padding: 14px 10px; }
}

/* -----------------------------------------------------------------------------
   12. Remates
   -------------------------------------------------------------------------- */

/* "Ver tutorial" iba en azul solido junto al titulo, y competia con el. Es una
   ayuda, no la accion de la pantalla: pasa a boton discreto. */
.page-header-tutorial .tutorial-btn-styled,
body.mode-dark .page-header-tutorial .tutorial-btn-styled {
  background: var(--emb-surface) !important;
  border: 1px solid var(--emb-line) !important;
  color: var(--emb-muted) !important;
  border-radius: var(--emb-radius-pill) !important;
  box-shadow: none !important;
  height: var(--emb-control-h);
  padding: 0 16px;
  font-weight: 600;
}
.page-header-tutorial .tutorial-btn-styled:hover {
  background: var(--emb-bg-alt) !important;
  border-color: var(--emb-brand-300) !important;
  color: var(--emb-brand-700) !important;
  transform: translateY(-1px);
}
body.mode-dark .page-header-tutorial .tutorial-btn-styled:hover {
  color: #ffffff !important;
  border-color: var(--emb-brand-400) !important;
}

/* El numero de filas por pagina lo pinta select2, no el <select>: hay que
   apuntar al control visible, o se queda con el ancho del contenedor. */
.page-container .num_per_page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-container .num_per_page .select2-container { width: auto !important; min-width: 74px; }
.page-container .num_per_page .select2-selection--single {
  height: 34px !important;
  border-radius: var(--emb-radius-field) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
}
.page-container .num_per_page .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  font-size: 13px;
  padding-left: 10px;
  padding-right: 24px;
}
.page-container .num_per_page .select2-selection--single .select2-selection__arrow { height: 32px !important; }

/* El pie del listado: texto de apoyo, no dos frases sueltas del mismo peso. */
.page-container .num_per_page,
.page-container .num_per_page + *,
.page-container .listing-form > .d-flex:last-child {
  font-size: 13px;
  color: var(--emb-muted);
}

/* Las celdas de una fila se alineaban arriba, asi que el nombre quedaba en el
   borde superior y las metricas en el centro. */
.page-container .listing-form table > tbody > tr > td,
.page-container table.table > tbody > tr > td { vertical-align: middle; }

/* El pie de la aplicacion: separado y en tono bajo. */
.page-container .footer,
.page-container ~ .footer,
footer.footer {
  font-size: 12.5px;
  color: var(--emb-muted);
  padding: 22px 0 8px;
  border-top: 1px solid var(--emb-line);
  margin-top: 28px;
}

/* Hueco entre la cabecera y el listado: antes el titulo y la barra de filtros
   se tocaban. */
.page-container .page-header-wrapper { margin-bottom: 18px; }
.page-container .listing-form { margin-top: 2px; }

/* -----------------------------------------------------------------------------
   13. Correcciones tras verlo en pantalla
   -------------------------------------------------------------------------- */

/* La descripcion de la pantalla vive en un <p> dentro de la columna, no justo
   detras del titulo: el selector anterior no la alcanzaba y seguia en blanco a
   todo el peso, compitiendo con el titulo. */
.page-container > .row > [class*='col-'] > p:first-of-type,
.page-container .page-header-wrapper ~ .row > [class*='col-'] > p:first-of-type {
  color: var(--emb-muted) !important;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 76ch;
  margin-bottom: 0;
}

/* Botones dentro de una fila del listado: discretos. El azul solido repetido en
   cada fila tiraba tanto como el naranja que se quito antes. */
.page-container tbody .btn-secondary,
.page-container tbody .btn-info,
.page-container tbody .btn-icon,
.page-container tbody .btn-light {
  background: var(--emb-bg-alt) !important;
  border-color: var(--emb-line) !important;
  color: var(--emb-fg) !important;
  box-shadow: none !important;
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}
.page-container tbody .btn-secondary:hover,
.page-container tbody .btn-info:hover,
.page-container tbody .btn-icon:hover,
.page-container tbody .btn-light:hover {
  background: var(--emb-surface) !important;
  border-color: var(--emb-brand-300) !important;
  color: var(--emb-brand-700) !important;
  transform: translateY(-1px);
}
body.mode-dark .page-container tbody .btn-secondary:hover,
body.mode-dark .page-container tbody .btn-info:hover,
body.mode-dark .page-container tbody .btn-icon:hover,
body.mode-dark .page-container tbody .btn-light:hover {
  color: #ffffff !important;
  border-color: var(--emb-brand-400) !important;
}
.page-container tbody .btn-secondary .material-symbols-rounded { font-size: 17px; }

/* El desplegable pegado a un boton (el grupo "Editar | v") comparte el borde en
   lugar de flotar como una pildora suelta. */
.page-container tbody .btn-group > .btn { height: 34px; }
.page-container tbody .btn-group > .btn.dropdown-toggle:last-child {
  width: 34px;
  padding: 0;
  border-radius: 10px !important;
}

/* El pie va con position:absolute y bottom:0 en app.css, anclado al fondo del
   contenedor. Fuera del flujo un bloque encoge hasta su texto, y por eso la linea
   de arriba se cortaba a media pantalla.
   Con width:100% pasaba lo contrario y peor: al estar el contenedor en
   position:relative, ese 100% se mide contra su caja CON relleno, asi que el pie
   sobresalia los 246px que la barra lateral deja libres a la izquierda y metia
   scroll horizontal en TODA la aplicacion, en cualquier tamaño de pantalla.
   Un pie de pagina va detras del contenido: devuelto al flujo ocupa el ancho
   disponible por si mismo, y asi no hay forma de que desborde. */
.page-container .footer,
.page-container > .footer {
  position: static;
  display: block;
  width: auto;
}

/* Una fila puede llevar dos estados a la vez (activo + oculto). Iban en linea
   con un margen a la izquierda, asi que al partirse en dos lineas la segunda
   pildora quedaba desplazada respecto a la primera. */
.page-container .list-status {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  float: none !important;
}
.page-container .list-status .label { margin-left: 0 !important; }

/* -----------------------------------------------------------------------------
   14. Pantallas de ajustes
   -------------------------------------------------------------------------- */

/* Los desplegables nativos venian en gris mas oscuro que los campos de texto de
   al lado, asi que dos controles de la misma fila no parecian de la misma
   familia. */
.page-container select.form-control,
.page-container select,
.page-container .select2-container--default .select2-selection--single {
  background-color: var(--emb-surface) !important;
  border: 1px solid var(--emb-line) !important;
  border-radius: var(--emb-radius-field) !important;
  color: var(--emb-fg) !important;
}

/* El campo de subir fichero salia con el boton nativo del navegador, que no se
   parece a nada del resto del panel. */
.page-container input[type='file'] {
  border: 1px solid var(--emb-line) !important;
  border-radius: var(--emb-radius-field) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-muted) !important;
  font-size: 13.5px;
  padding: 6px 10px;
  width: 100%;
  max-width: 420px;
}
.page-container input[type='file']::file-selector-button {
  border: 1px solid var(--emb-line) !important;
  border-radius: var(--emb-radius-pill) !important;
  background: var(--emb-bg-alt) !important;
  color: var(--emb-fg) !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  margin-right: 12px;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.page-container input[type='file']::file-selector-button:hover {
  background: var(--emb-surface);
  border-color: var(--emb-brand-300);
}

/* Pestañas de seccion. */
.page-container .nav-tabs {
  border-bottom: 1px solid var(--emb-line);
  gap: 2px;
  margin-bottom: 22px;
}
.page-container .nav-tabs .nav-link,
.page-container .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--emb-muted) !important;
  background: none !important;
}
.page-container .nav-tabs .nav-link:hover { color: var(--emb-fg) !important; }
.page-container .nav-tabs .nav-link.active,
.page-container .nav-tabs > li.active > a {
  color: var(--emb-brand-700) !important;
  border-bottom-color: var(--emb-accent-500) !important;
  background: none !important;
}
body.mode-dark .page-container .nav-tabs .nav-link.active { color: #ffffff !important; }

/* Titulos de seccion dentro de un formulario largo: hacen de separador, asi que
   necesitan aire por encima y una linea que agrupe lo que viene debajo. */
.page-container form h2,
.page-container form h3,
.page-container .setting-section-title {
  font-family: var(--emb-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--emb-fg);
  margin: 30px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--emb-line);
}

/* El interruptor de un ajuste y su explicacion tienen que leerse juntos. */
.page-container .checkbox-description,
.page-container .form-text,
.page-container .help-block {
  font-size: 13px !important;
  color: var(--emb-muted) !important;
  line-height: 1.55;
  margin-top: 5px;
  max-width: 62ch;
}

/* -----------------------------------------------------------------------------
   15. Panel del cliente
   -------------------------------------------------------------------------- */

/* El porcentaje de cada tarjeta de cuota iba en azul de marca sobre el fondo
   oscuro, que apenas se distingue, y ademas colgaba suelto a la derecha de la
   barra. */
.page-container .quota-percent,
.page-container .circle-percent,
.page-container .quota-box .percent {
  color: var(--emb-muted) !important;
  font-size: 12px;
  font-weight: 600;
}

/* Las metricas de una campaña llevaban delante una pastilla que parecia un
   interruptor. Se reduce a una marca de color. */
.page-container .stat-list .progress,
.page-container .campaign-stat .progress {
  width: 34px;
  min-width: 34px;
  height: 5px !important;
}

/* -----------------------------------------------------------------------------
   16. Contadores dentro de una fila
   -------------------------------------------------------------------------- */

/* Numeros como "8 permisos" o "26 usuarios". Iban en circulos naranjas, y el
   naranja es la accion principal de la pantalla, no un dato. */
.page-container .count-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--emb-radius-pill);
  background: var(--emb-bg-alt);
  border: 1px solid var(--emb-line);
  color: var(--emb-fg);
  font-family: var(--emb-font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   17. Selector de idioma
   -------------------------------------------------------------------------- */

/* Va junto a la lupa y al modo claro/oscuro. Lleva el codigo del idioma escrito
   al lado del icono: un globo terraqueo solo no dice en que idioma estas.

   El menu NO usa las clases de Bootstrap a proposito. Dentro de la barra lateral,
   menu.css trae reglas para los submenus con cinco clases y !important que lo
   estiraban a todo el ancho y lo recortaban contra el borde; pelear eso a base de
   especificidad se convierte en una carrera que siempre se acaba perdiendo. Con
   clases propias no hereda nada. */
.sidebar-tools .sidebar-tool-lang { position: relative; }

.sidebar-tools .but-change-language {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 11px;
  border-radius: var(--emb-radius-sm);
  border: 1px solid var(--emb-nav-veil-strong);
  background: var(--emb-nav-veil);
  color: var(--emb-nav-fg);
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.sidebar-tools .but-change-language:hover,
.sidebar-tools .sidebar-tool-lang.abierto .but-change-language {
  background: var(--emb-nav-veil-strong);
  color: var(--emb-nav-fg-strong);
}
.sidebar-tools .but-change-language .material-symbols-rounded { font-size: 19px; }
.sidebar-tools .but-change-language .lang-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Anclado a la ventana para que el recorte de la barra lateral no lo corte. */
.sidebar-tools .lang-options {
  display: none;
  position: fixed;
  left: 250px;
  bottom: 74px;
  z-index: 20000;
  width: max-content;
  min-width: 168px;
  padding: 5px;
  border-radius: 12px;
  background: var(--emb-surface);
  border: 1px solid var(--emb-line);
  box-shadow: var(--emb-shadow-lg);
}
.sidebar-tools .sidebar-tool-lang.abierto .lang-options { display: block; }

.sidebar-tools .lang-option {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--emb-fg);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-tools .lang-option:hover { background: var(--emb-bg-alt); }
.sidebar-tools .lang-option.actual { background: var(--emb-bg-alt); font-weight: 600; }

.sidebar-tools .lang-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 21px;
  border-radius: var(--emb-radius-pill);
  background: var(--emb-brand-500);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

/* Con la barra lateral plegada solo caben los iconos, y el menu se acerca. */
body.leftbar-closed .sidebar-tools .but-change-language .lang-code,
body.state-closed .sidebar-tools .but-change-language .lang-code { display: none; }
body.leftbar-closed .sidebar-tools .lang-options,
body.state-closed .sidebar-tools .lang-options { left: 84px; }

/* En pantallas donde la barra lateral pasa a ser un panel desplegable, el menu
   se coloca pegado al borde izquierdo. */
@media (max-width: 992px) {
  .sidebar-tools .lang-options { left: 16px; bottom: auto; top: auto; }
}

/* -----------------------------------------------------------------------------
   18. Remates de la barra lateral y del perfil
   -------------------------------------------------------------------------- */

/* Las tres herramientas (buscar, idioma, tema) tenian tres anchos distintos: la
   del idioma llevaba el codigo al lado y sobresalia. Ahora todas son cuadradas
   del mismo tamaño y el codigo va como distintivo en la esquina. */
.sidebar-tools .sidebar-tools-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px 14px;
  margin-top: 6px;
  border-top: 1px solid var(--emb-nav-line);
}

.sidebar-tools .sidebar-tool-btn,
.sidebar-tools .top-search-container .search-icon,
.sidebar-tools .but-change-language {
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  flex: 0 0 38px;
  padding: 0 !important;
  /* search.js le pone a su lupa margen propio y una escala al pasar por encima;
     sin neutralizarlos los tres botones se montaban unos sobre otros. */
  margin: 0 !important;
  transform: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 11px !important;
  border: 1px solid var(--emb-nav-line) !important;
  background: var(--emb-nav-veil) !important;
  color: var(--emb-nav-fg) !important;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.sidebar-tools .sidebar-tool-btn:hover,
.sidebar-tools .top-search-container .search-icon:hover,
.sidebar-tools .but-change-language:hover,
.sidebar-tools .sidebar-tool-lang.abierto .but-change-language {
  background: var(--emb-nav-veil-strong) !important;
  border-color: var(--emb-nav-veil-strong) !important;
  color: var(--emb-nav-fg-strong) !important;
  transform: translateY(-1px) !important;
}
.sidebar-tools .sidebar-tool-btn .material-symbols-rounded,
.sidebar-tools .top-search-container .search-icon,
.sidebar-tools .but-change-language .material-symbols-rounded { font-size: 20px !important; }

/* El codigo del idioma, como distintivo en la esquina: el globo solo no dice en
   que idioma estas, pero el texto al lado descuadraba la fila. */
.sidebar-tools .but-change-language { position: relative; }
.sidebar-tools .but-change-language .lang-code {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 19px;
  height: 14px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--emb-radius-pill);
  background: var(--emb-accent-500);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--emb-nav-bg);
}

/* El buscador lo inserta search.js dentro de su contenedor; sin esto el
   contenedor conservaba su ancho y con el menu plegado quedaba descentrado. */
.sidebar-tools .top-search-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  margin: 0 !important;
}

/* Con la barra plegada no caben tres en una fila: se apilan, centradas. */
body.leftbar-closed .sidebar-tools .sidebar-tools-row,
body.state-closed .sidebar-tools .sidebar-tools-row {
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 14px;
}

/* -----------------------------------------------------------------------------
   19. Migas de pan
   -------------------------------------------------------------------------- */

/* Se retiran. El panel tiene un solo nivel de profundidad real y la barra
   lateral ya dice donde estas, asi que "Inicio" encima de cada titulo solo
   ocupaba una linea para no decir nada. */
.page-container .page-title .breadcrumb,
.page-container .breadcrumb-caret { display: none !important; }

/* -----------------------------------------------------------------------------
   20. Selector de avatar
   -------------------------------------------------------------------------- */

.avatar-picker { text-align: center; }

.avatar-picker-actual {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 3px;
  background: var(--emb-surface);
  box-shadow: 0 0 0 2px var(--emb-line), var(--emb-shadow);
}
.avatar-picker-actual .avatar-actual-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.avatar-picker-ayuda {
  font-size: 13px;
  color: var(--emb-muted);
  margin-bottom: 12px;
}

.avatar-picker-rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-width: 300px;
  margin: 0 auto;
}
.avatar-opcion {
  width: 100%;
  aspect-ratio: 1;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color .18s, transform .18s;
}
.avatar-opcion img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.avatar-opcion:hover { transform: scale(1.08); }
.avatar-opcion.elegido { border-color: var(--emb-accent-500); }
.avatar-opcion:focus-visible {
  outline: 2px solid var(--emb-brand-400);
  outline-offset: 2px;
}

@media (max-width: 1200px) {
  .avatar-picker-rejilla { grid-template-columns: repeat(6, 1fr); max-width: 260px; }
}

/* El buscador de la barra lateral.
 *
 * search.js mete su lupa dentro de cinco envoltorios anidados, y tres de ellos
 * (.control-line, .search-control y el propio .app_search_box con 'ms-auto')
 * miden lo que mediria la barra de busqueda desplegada: 78px. Con el menu
 * plegado, esos 78px sobre un hueco de 38 empujaban la lupa contra el borde
 * derecho, y quedaba descentrada respecto a los otros dos botones.
 *
 * Se acotan todos al ancho del boton. La cadena se recorrio con el navegador;
 * ir nivel a nivel adivinando no daba con ella. */
.sidebar-tools .top-search-container > div,
.sidebar-tools .app_search_box,
.sidebar-tools .control-line,
.sidebar-tools .search-control {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  flex: 0 0 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* El cuadro de resultados se saca del flujo, o contaria para ese ancho. */
.sidebar-tools .top-search-box,
.sidebar-tools .search-results,
.sidebar-tools .search-results-box { position: fixed !important; }

/* Con el menu plegado el <li> conserva su relleno lateral y desplaza la
   columna; sin el, los tres botones caen en el centro exacto de la barra. */
body.leftbar-closed .sidebar-tools,
body.state-closed .sidebar-tools { padding-left: 0 !important; padding-right: 0 !important; }

/* Dentro del ultimo envoltorio, la lupa tiene de hermano el campo de texto del
   buscador, que mide 40px aunque este cerrado. Esos 40px empujaban la lupa. El
   campo solo hace falta cuando el buscador esta abierto, asi que mientras tanto
   sale del flujo. Con .search-open vuelve, que es cuando se escribe en el. */
.sidebar-tools .app_search_input {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
}
/* Al abrirse, el campo sale de la barra lateral: dentro no cabe (media 180px
   en un hueco de 38 y se salia por la izquierda, asi que se escribia a ciegas).
   Se coloca justo encima del cuadro de resultados, que app.css ancla arriba a la
   derecha, para que los dos se lean como una sola pieza. */
body.search-open .sidebar-tools .app_search_input,
.search-open .sidebar-tools .app_search_input {
  position: fixed !important;
  top: 18px;
  right: 16px;
  left: auto !important;
  width: 500px !important;
  max-width: calc(100vw - 280px) !important;
  min-width: 0 !important;
  height: 44px;
  padding: 0 16px !important;
  border: 1px solid var(--emb-line) !important;
  border-radius: var(--emb-radius-field) !important;
  background: var(--emb-surface) !important;
  color: var(--emb-fg) !important;
  font-size: 15px;
  box-shadow: var(--emb-shadow-lg);
  opacity: 1;
  z-index: 20001;
}

body.search-open .search-results,
.search-open .search-results {
  top: 70px !important;
  right: 16px !important;
  left: auto !important;
  width: 500px !important;
  max-width: calc(100vw - 280px) !important;
  border-radius: var(--emb-radius-card) !important;
  border: 1px solid var(--emb-line) !important;
  background: var(--emb-surface) !important;
  box-shadow: var(--emb-shadow-lg) !important;
}

/* El boton de cerrar solo existe con el buscador abierto, y aparecia dentro de
   la fila de herramientas, descuadrando los tres botones. Se va con el panel. */
body.search-open .sidebar-tools .search-close-button,
.search-open .sidebar-tools .search-close-button {
  position: fixed !important;
  top: 18px;
  right: 28px;
  width: 30px;
  height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--emb-muted) !important;
  z-index: 20002;
  cursor: pointer;
}
body.search-open .sidebar-tools .search-close-button:hover {
  color: var(--emb-fg) !important;
}

/* Y el campo deja sitio al aspa para que no se monte sobre el texto. */
body.search-open .sidebar-tools .app_search_input,
.search-open .sidebar-tools .app_search_input { padding-right: 46px !important; }

/* -----------------------------------------------------------------------------
   21. Logo segun el modo
   -------------------------------------------------------------------------- */

/* El logo lleva el texto en blanco: sobre la barra clara desaparecia. Se pintan
   los dos y aqui se enseña el que toca, asi el cambio de tema es inmediato y no
   hace falta recargar la pagina. */
.logo-claro { display: none; }
.logo-oscuro { display: inline-block; }
body.mode-dark .logo-claro { display: none; }
body.mode-dark .logo-oscuro { display: inline-block; }
body:not(.mode-dark) .logo-claro { display: inline-block; }
body:not(.mode-dark) .logo-oscuro { display: none; }

/* -----------------------------------------------------------------------------
   22. Pie de la aplicacion
   -------------------------------------------------------------------------- */

.app-footer {
  border-top: 1px solid var(--emb-line);
  margin-top: 40px;
  padding: 26px 0 16px;
  font-size: 13px;
  color: var(--emb-muted);
}

/* Arriba: marca a la izquierda y los grupos de enlaces a la derecha. */
.app-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 56px;
  padding-bottom: 20px;
}

.app-footer-marca { max-width: 260px; margin-right: auto; }
.app-footer-logo { height: 18px; width: auto; display: block; margin-bottom: 9px; }
.app-footer-lema {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--emb-muted);
}

.app-footer-grupo { display: flex; flex-direction: column; gap: 7px; min-width: 130px; }
.app-footer-grupo-titulo {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emb-fg);
}
.app-footer-grupo a {
  color: var(--emb-muted) !important;
  text-decoration: none;
  font-size: 13px;
  transition: color .18s;
  width: fit-content;
}
.app-footer-grupo a:hover { color: var(--emb-brand-600) !important; }
body.mode-dark .app-footer-grupo a:hover { color: var(--emb-brand-300) !important; }

/* Abajo: copyright a la izquierda, version e idioma a la derecha. */
.app-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--emb-line);
  font-size: 12.5px;
}
.app-footer-copy { margin-right: auto; }
.app-footer-copy strong { color: var(--emb-fg); font-weight: 600; }
.app-footer-sep {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid var(--emb-line);
}

.app-footer-derecha { display: inline-flex; align-items: center; gap: 16px; }
.app-footer-version { font-variant-numeric: tabular-nums; }

.app-footer-idiomas { display: inline-flex; gap: 4px; }
.app-footer-idioma {
  padding: 3px 9px;
  border-radius: var(--emb-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--emb-muted) !important;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.app-footer-idioma:hover { background: var(--emb-bg-alt); color: var(--emb-fg) !important; }
.app-footer-idioma.actual { background: var(--emb-brand-500); color: #ffffff !important; }

@media (max-width: 768px) {
  .app-footer-top { flex-direction: column; gap: 22px; }
  .app-footer-marca { max-width: none; margin-right: 0; }
  .app-footer-base { flex-direction: column; align-items: flex-start; }
  .app-footer-copy { margin-right: 0; }
}

/* -----------------------------------------------------------------------------
   23. Modo claro: estados del menu y boton de plegar
   -------------------------------------------------------------------------- */

/* La barra sigue llevando la clase 'navbar-dark' de Bootstrap, y app.css pone
   color blanco !important en los estados del enlace. En reposo ya lo ganaba el
   tema, pero al pasar por encima o con el submenu abierto volvia el blanco:
   sobre la barra clara, blanco sobre blanco. */
.navbar.navbar-main .navbar-nav .nav-link:hover,
.navbar.navbar-main .navbar-nav .nav-link:focus,
.navbar.navbar-main .navbar-nav .nav-link.show,
.navbar.navbar-main .navbar-nav .nav-item.show > .nav-link,
.navbar.navbar-main .navbar-nav .nav-item.active > .nav-link,
.navbar.navbar-main .navbar-nav .lvl-1:hover,
.navbar.navbar-main .navbar-nav .lvl-1.show {
  color: var(--emb-nav-fg-strong) !important;
  background-color: var(--emb-nav-hover-bg) !important;
}
.navbar.navbar-main .navbar-nav .nav-item.active > .nav-link,
.navbar.navbar-main .navbar-nav .nav-item.show > .nav-link {
  background-color: var(--emb-nav-active-bg) !important;
}

/* Y el mismo blanco fijo en la regla del submenu desplegado. */
.leftbar:not(.leftbar-closed) .navbar-main .navbar-nav a.nav-link,
.leftbar:not(.leftbar-closed) .navbar-main .navbar-nav a.nav-link:hover {
  color: var(--emb-nav-fg) !important;
}
.leftbar:not(.leftbar-closed) .navbar-main .navbar-nav a.nav-link:hover {
  color: var(--emb-nav-fg-strong) !important;
}

/* El boton de plegar es un SVG que hereda el color del texto, y ese color era
   blanco fijo: en modo claro el boton existia pero no se veia. */
.navbar.navbar-main .leftbar-hide-menu,
.navbar.navbar-main .leftbar-hide-menu svg {
  color: var(--emb-nav-fg) !important;
  fill: currentColor !important;
}
.navbar.navbar-main .leftbar-hide-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.navbar.navbar-main .leftbar-hide-menu:hover {
  background: var(--emb-nav-veil);
  color: var(--emb-nav-fg-strong) !important;
}