/* ==========================================================================
   Sistema de diseno EnvioExpres
   Los tokens estan tomados de la pagina oficial https://envioexpres.mx
   para que el portal y el sitio publico se vean como el mismo producto.
   Cambiar la marca = cambiar este bloque, nada mas.
   ========================================================================== */

:root {
  /* Superficies */
  --bg: #FFF8F2;
  --surface: #FFFFFF;
  --surface-2: #FFF1E7;

  /* Texto y bordes */
  --ink: #1A1613;
  --muted: #7A6E64;
  --line: #F0E2D6;

  /* Marca */
  --brand: #FF6A00;
  --brand-2: #FF2E63;
  --on-brand: #FFFFFF;
  --grad: linear-gradient(135deg, var(--brand), var(--brand-2));

  /* Semanticos */
  --good: #0F9D58;
  --warn: #B26A00;
  --bad: #D92D20;
  --bad-bg: #FFF1F0;
  --good-bg: #EAF7F0;

  /* Sombras */
  --shadow: 0 24px 60px -28px rgba(120, 40, 0, .45);
  --shadow-sm: 0 10px 30px -18px rgba(120, 40, 0, .5);

  /* Formas */
  --r: 22px;
  --r-sm: 14px;
  --r-xs: 10px;
  /* Tope del contenido. Antes 1160px, que en un monitor de 1800 dejaba una
     franja muerta de mas de 300px a la derecha. 1800 aprovecha las pantallas
     de trabajo y sigue evitando que en un ultrapanoramico las tablas se
     estiren hasta ser incomodas de recorrer con la vista. */
  --maxw: 1800px;

  /* Tipografia */
  --font: "Segoe UI", "SF Pro Display", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Estructura */
  --nav-w: 264px;
  --header-h: 68px;

  color-scheme: light;
}

/* Tema oscuro por preferencia del sistema, salvo que el usuario haya elegido claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14100D;
    --surface: #1E1814;
    --surface-2: #241C16;
    --ink: #FBF3EC;
    --muted: #A89A8E;
    --line: #312720;
    --brand: #FF7C22;
    --brand-2: #FF4477;
    --on-brand: #1A1006;
    --bad-bg: #2A1614;
    --good-bg: #12231A;
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, .75);
    --shadow-sm: 0 12px 34px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* Tema elegido explicitamente: gana sobre la preferencia del sistema */
:root[data-theme="light"] {
  --bg: #FFF8F2;
  --surface: #FFFFFF;
  --surface-2: #FFF1E7;
  --ink: #1A1613;
  --muted: #7A6E64;
  --line: #F0E2D6;
  --brand: #FF6A00;
  --brand-2: #FF2E63;
  --on-brand: #FFFFFF;
  --bad-bg: #FFF1F0;
  --good-bg: #EAF7F0;
  --shadow: 0 24px 60px -28px rgba(120, 40, 0, .45);
  --shadow-sm: 0 10px 30px -18px rgba(120, 40, 0, .5);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #14100D;
  --surface: #1E1814;
  --surface-2: #241C16;
  --ink: #FBF3EC;
  --muted: #A89A8E;
  --line: #312720;
  --brand: #FF7C22;
  --brand-2: #FF4477;
  --on-brand: #1A1006;
  --bad-bg: #2A1614;
  --good-bg: #12231A;
  --shadow: 0 30px 70px -30px rgba(0, 0, 0, .75);
  --shadow-sm: 0 12px 34px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .35em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--brand); color: var(--on-brand); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.ee-silencioso { color: var(--muted); }
.ee-mono { font-family: var(--mono); }

/* ==========================================================================
   Estructura del portal
   ========================================================================== */

.ee-shell { display: flex; min-height: 100vh; }

.ee-contenido {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ee-main {
  flex: 1;
  padding: 26px clamp(16px, 3vw, 34px) 60px;
  max-width: var(--maxw);
  width: 100%;

  /* Centrado: sin esto el sobrante se acumula todo de un lado. */
  margin-inline: auto;
}

/* --- Barra lateral --- */

.ee-nav {
  width: var(--nav-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.ee-nav__marca {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ee-nav__logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.ee-nav__nombre { font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; }

.ee-nav__lista {
  list-style: none;
  margin: 0;
  padding: 14px 12px;
  overflow-y: auto;
  flex: 1;
}

.ee-nav__lista li + li { margin-top: 2px; }

.ee-nav__grupo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
  padding: 16px 12px 6px;
}

.ee-nav__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-xs);
  color: var(--ink);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.ee-nav__link:hover { background: var(--surface-2); text-decoration: none; }

.ee-nav__link.active {
  background: var(--grad);
  color: var(--on-brand);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.ee-nav__link.active .ee-icono { opacity: 1; }

.ee-nav__pie {
  border-top: 1px solid var(--line);
  padding: 12px;
  flex-shrink: 0;
}

/* --- Encabezado --- */

.ee-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(16px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ee-header__titulo { font-weight: 700; font-size: 1.05rem; }
.ee-header__espacio { flex: 1; }

.ee-usuario { display: flex; align-items: center; gap: 10px; }

.ee-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}

/* Variante con imagen: la foto o el predeterminado, recortados al circulo.
   object-fit:cover evita que una foto rectangular salga deformada, que es lo
   que pasa con width/height a secas. */
.ee-avatar--img {
  background: var(--surface-2);
  object-fit: cover;
  display: block;
}

.ee-usuario__datos { line-height: 1.25; }
.ee-usuario__nombre { font-weight: 600; font-size: .88rem; }
.ee-usuario__rol { font-size: .74rem; color: var(--muted); }

/* --- Encabezado de pagina --- */

.ee-pagina-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ee-pagina-head__texto { flex: 1; min-width: 240px; }
.ee-pagina-head p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.ee-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.ee-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ee-card__body { padding: 20px; }

/* ==========================================================================
   Botones
   ========================================================================== */

.ee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 9px 17px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
  white-space: nowrap;
}

.ee-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ee-btn:active:not(:disabled) { transform: translateY(0); }

.ee-btn:disabled { opacity: .55; cursor: not-allowed; }

.ee-btn--primario {
  background: var(--grad);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}

.ee-btn--contorno {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.ee-btn--contorno:hover:not(:disabled) { background: var(--surface-2); }

.ee-btn--peligro { background: var(--bad); color: #fff; }

.ee-btn--fantasma { background: transparent; color: var(--muted); }
.ee-btn--fantasma:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.ee-btn--bloque { width: 100%; }
.ee-btn--sm { padding: 6px 12px; font-size: .82rem; border-radius: var(--r-xs); }

.ee-btn--icono {
  padding: 7px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
}

.ee-btn--icono:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.ee-btn--icono.es-peligro:hover:not(:disabled) { background: var(--bad-bg); color: var(--bad); }

/* ==========================================================================
   Formularios
   ========================================================================== */

.ee-campo { margin-bottom: 16px; }

.ee-campo__label {
  display: block;
  font-weight: 600;
  font-size: .84rem;
  margin-bottom: 6px;
}

.ee-campo__control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .93rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ee-campo__control::placeholder { color: var(--muted); opacity: .8; }

.ee-campo__control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.ee-campo__control:disabled { background: var(--surface-2); cursor: not-allowed; }

.ee-campo__control.es-invalido { border-color: var(--bad); }

.ee-campo__error { color: var(--bad); font-size: .8rem; margin-top: 5px; display: block; }

.ee-campo__ayuda { color: var(--muted); font-size: .8rem; margin-top: 5px; display: block; }

/* Campo con boton adosado (ver contrasena) */
.ee-campo__grupo { position: relative; display: flex; align-items: center; }
.ee-campo__grupo .ee-campo__control { padding-right: 44px; }

.ee-campo__accion {
  position: absolute;
  right: 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.ee-campo__accion:hover { color: var(--ink); background: var(--surface-2); }

/* Buscador */
.ee-buscador { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.ee-buscador .ee-campo__control { padding-left: 38px; }

.ee-buscador__icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  display: grid;
}

/* ==========================================================================
   Tabla
   ========================================================================== */

.ee-tabla-scroll { overflow-x: auto; }

.ee-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.ee-tabla th {
  text-align: left;
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}

.ee-tabla td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.ee-tabla tbody tr { transition: background .12s ease; }
.ee-tabla tbody tr:hover { background: var(--surface-2); }
.ee-tabla tbody tr:last-child td { border-bottom: 0; }

.ee-tabla__acciones { text-align: right; white-space: nowrap; }
.ee-tabla__num { font-family: var(--mono); font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   Estados
   ========================================================================== */

.ee-vacio { padding: 54px 20px; text-align: center; color: var(--muted); }
.ee-vacio__icono { color: var(--brand); opacity: .55; margin-bottom: 12px; }
.ee-vacio__titulo { font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.ee-cargando { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 40px; color: var(--muted); }

.ee-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ee-girar .7s linear infinite;
  flex-shrink: 0;
}

.ee-spinner--sm { width: 15px; height: 15px; border-width: 2px; }

@keyframes ee-girar { to { transform: rotate(360deg); } }

/* Barra de progreso superior mientras hay una operacion en curso */
.ee-progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  z-index: 100;
  animation: ee-progreso 1.1s ease-in-out infinite;
  transform-origin: left;
}

@keyframes ee-progreso {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(.85); }
  100% { transform: scaleX(1); opacity: .35; }
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.ee-aviso {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: .89rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
}

.ee-aviso__icono { flex-shrink: 0; margin-top: 1px; }
.ee-aviso__texto { flex: 1; }

.ee-aviso--error { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.ee-aviso--exito { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }

.ee-aviso__cerrar {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .6;
  padding: 0;
  display: grid;
  place-items: center;
}

.ee-aviso__cerrar:hover { opacity: 1; }

/* ==========================================================================
   Modal
   ========================================================================== */

.ee-modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, .55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 60;
  animation: ee-aparecer .16s ease;
}

.ee-modal {
  /* Fondo solido: nunca una variable translucida, o se transparenta la tabla */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: ee-subir .2s cubic-bezier(.2, .8, .3, 1);
}

.ee-modal--ancho { max-width: 760px; }

.ee-modal__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.ee-modal__titulo { font-weight: 700; font-size: 1.05rem; flex: 1; }
.ee-modal__body { padding: 22px; overflow-y: auto; }

.ee-modal__pie {
  padding: 15px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@keyframes ee-aparecer { from { opacity: 0; } }
@keyframes ee-subir { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* ==========================================================================
   Login
   ========================================================================== */

.ee-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
}

@media (min-width: 900px) {
  .ee-login { grid-template-columns: 1.05fr .95fr; }
}

.ee-login__panel {
  display: none;
  background: var(--grad);
  color: #fff;
  padding: 54px;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

@media (min-width: 900px) { .ee-login__panel { display: flex; } }

/* Destellos suaves del degradado de marca */
.ee-login__panel::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  right: -150px;
  bottom: -170px;
}

.ee-login__panel > * { position: relative; z-index: 1; }
.ee-login__lema { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; max-width: 13ch; }
.ee-login__sub { opacity: .92; max-width: 40ch; margin-top: 14px; }
.ee-login__pie { font-size: .82rem; opacity: .8; }

.ee-login__formulario {
  display: grid;
  place-items: center;
  padding: 30px 24px;
}

.ee-login__caja { width: 100%; max-width: 380px; }

.ee-login__marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
}

.ee-login__marca .ee-nav__logo { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; }
.ee-login__marca span { font-size: 1.24rem; font-weight: 800; letter-spacing: -.02em; }

/* ==========================================================================
   Utilidades
   ========================================================================== */

.ee-icono { flex-shrink: 0; }
.ee-fila { display: flex; align-items: center; gap: 10px; }
.ee-fila--fin { justify-content: flex-end; }
.ee-crece { flex: 1; }
.ee-oculto-movil { display: none; }

@media (min-width: 700px) { .ee-oculto-movil { display: initial; } }

.ee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

/* ==========================================================================
   Responsive: la barra lateral se colapsa
   ========================================================================== */

@media (max-width: 1024px) {
  .ee-nav {
    position: fixed;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow);
  }

  .ee-nav.esta-abierta { transform: translateX(0); }

  .ee-nav-fondo {
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 6, .5);
    z-index: 40;
  }
}

@media (min-width: 1025px) {
  .ee-nav-boton, .ee-nav-fondo { display: none; }
}

/* Errores de arranque de Blazor */
#blazor-error-ui {
  background: var(--bad);
  color: #fff;
  bottom: 0;
  display: none;
  left: 0;
  padding: 12px 18px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  box-shadow: var(--shadow);
}

#blazor-error-ui .reload { color: #fff; text-decoration: underline; cursor: pointer; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; font-size: 1.3rem; line-height: 1; }

/* ==========================================================================
   Paginador
   ========================================================================== */

.ee-paginador {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r) var(--r);
  font-size: .87rem;
}

.ee-paginador__info { color: var(--muted); }

.ee-paginador__tamano {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}

.ee-paginador__select {
  width: auto;
  padding: 5px 9px;
  font-size: .85rem;
  border-radius: var(--r-xs);
}

.ee-paginador__paginas {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
}

.ee-paginador__pagina {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .86rem;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.ee-paginador__pagina:hover:not(:disabled):not(.esta-activa) { background: var(--surface); }

.ee-paginador__pagina.esta-activa {
  background: var(--grad);
  color: var(--on-brand);
  box-shadow: var(--shadow-sm);
}

.ee-paginador__pagina:disabled { opacity: .5; cursor: not-allowed; }

.ee-paginador__puntos { color: var(--muted); padding: 0 4px; }

/* Con el paginador debajo, la tabla ya no redondea sus esquinas inferiores */
.ee-card:has(.ee-paginador) .ee-tabla tbody tr:last-child td { border-bottom: 1px solid var(--line); }

/* ==========================================================================
   Rejillas de formulario
   ========================================================================== */

.ee-rejilla-2,
.ee-rejilla-3 { display: grid; gap: 0 14px; }

.ee-rejilla-2 { grid-template-columns: 1fr; }
.ee-rejilla-3 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .ee-rejilla-2 { grid-template-columns: 1fr 1fr; }
  .ee-rejilla-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Panel embebido dentro de un modal (formulario de horario) */
.ee-subpanel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 16px 4px;
  margin-bottom: 18px;
}

.ee-subpanel .ee-fila--fin { padding-bottom: 12px; }

.ee-subpanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

/* ==========================================================================
   Migas de pan (recorrido empresa -> sucursales)
   ========================================================================== */

.ee-migas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ee-migas__enlace {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}

.ee-migas__enlace:hover { background: var(--surface-2); text-decoration: underline; }

.ee-migas__sep { color: var(--muted); }
.ee-migas__actual { color: var(--muted); font-weight: 600; }

/* Casilla de verificacion */
.ee-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  cursor: pointer;
  padding: 4px 0 8px;
}

.ee-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

/* ==========================================================================
   Mapa de ubicacion
   ========================================================================== */

.ee-mapa {
  height: 300px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  z-index: 0;   /* por debajo del modal que lo contiene */
}

.ee-mapa-buscador { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }

.ee-mapa-resultados {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  max-height: 165px;
  overflow-y: auto;
}

.ee-mapa-resultados li + li { border-top: 1px solid var(--line); }

.ee-mapa-resultados button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  padding: 9px 12px;
  cursor: pointer;
}

.ee-mapa-resultados button:hover { background: var(--surface-2); }

.ee-mapa-coords {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: .84rem;
}

/* Leaflet pinta sus controles con fondo blanco fijo; se adaptan al tema */
.leaflet-container { background: var(--surface-2); font: inherit; }
.leaflet-control-attribution { font-size: .68rem; }

/* ==========================================================================
   Selector de foto
   ========================================================================== */

.ee-foto { display: flex; gap: 14px; align-items: flex-start; }

.ee-foto__vista {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ee-foto__vista img { width: 100%; height: 100%; object-fit: cover; }
.ee-foto__vacia { color: var(--muted); opacity: .6; }

.ee-foto__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

/* El input nativo se oculta y se usa la etiqueta como boton */
.ee-foto__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ee-foto__acciones label.ee-btn { cursor: pointer; }

/* ==========================================================================
   Cotizacion
   ========================================================================== */

/* Marcadores del mapa de ruta: un punto de color en vez del pin PNG de
   Leaflet, que no se puede tenir y desentona con el tema oscuro. */
.ee-pin { background: transparent; border: 0; }

.ee-pin__punto {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
}

.ee-cotiza {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .ee-cotiza { grid-template-columns: 1fr; }
}

.ee-cotiza .ee-mapa { height: 460px; }

/* Buscador con lista desplegable (sucursal, cliente). El desplegable va sobre
   el mapa, asi que necesita fondo solido y z-index por encima de Leaflet. */
.ee-autocompleta { position: relative; }

.ee-autocompleta__lista {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  max-height: 240px;
  overflow-y: auto;
}

.ee-autocompleta__lista li + li { border-top: 1px solid var(--line); }

.ee-autocompleta__lista button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 9px 12px;
  cursor: pointer;
  display: block;
}

.ee-autocompleta__lista button:hover { background: var(--surface-2); }

.ee-autocompleta__lista small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

/* Tarjeta con el resultado de la cotizacion */
.ee-cotiza-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
}

.ee-dato__etiqueta {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 2px;
}

.ee-dato__valor { font-size: 1.15rem; font-weight: 600; }

.ee-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.ee-total__valor { font-size: 1.4rem; font-weight: 700; color: var(--brand); }

/* Celda larga (direcciones) que no debe ensanchar la tabla */
.ee-truncar {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Selector de color y categorias
   ========================================================================== */

.ee-color { display: flex; align-items: center; gap: 10px; }

/* El input type=color trae su propio marco y relleno segun el navegador; se
   deja como una muestra cuadrada del tamano de los demas controles. */
.ee-color__nativo {
  width: 46px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  cursor: pointer;
  flex: 0 0 auto;
}

.ee-color__nativo::-webkit-color-swatch-wrapper { padding: 0; }
.ee-color__nativo::-webkit-color-swatch { border: 0; border-radius: 6px; }
.ee-color__nativo:disabled { cursor: not-allowed; opacity: .6; }

.ee-color__hex { max-width: 120px; text-transform: lowercase; }

.ee-paleta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.ee-paleta__color {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer;
  padding: 0;
}

.ee-paleta__color:hover { transform: scale(1.12); }
.ee-paleta__color:disabled { cursor: not-allowed; opacity: .5; }

.ee-paleta__color.esta-activo {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

/* Muestra de color en las tablas */
.ee-muestra {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
  vertical-align: -4px;
  flex: 0 0 auto;
}

/* Categorias: categorias a la izquierda, sus subcategorias a la derecha */
.ee-cats {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .ee-cats { grid-template-columns: 1fr; }
}

/* Renglon de categoria seleccionable */
.ee-tabla tbody tr.esta-activo { background: var(--surface-2); }
.ee-tabla tbody tr.es-clicable { cursor: pointer; }

/* ==========================================================================
   Permisos
   ========================================================================== */

.ee-permisos {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .ee-permisos { grid-template-columns: 1fr; }
}

.ee-tabla--permisos th input[type="checkbox"] { margin-top: 5px; }

.ee-tabla--permisos td input[type="checkbox"],
.ee-tabla--permisos th input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
}

.ee-tabla--permisos input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }

/* La ultima columna ("Todo") se separa del resto */
.ee-tabla--permisos th:last-child,
.ee-tabla--permisos td:last-child { border-left: 1px solid var(--line); }

/* ==========================================================================
   Toast: aviso de exito flotante

   Va por encima del modal (z-index 60) porque el caso normal es justo ese:
   guardas, el modal se cierra y el aviso tiene que verse. Pero por debajo del
   banner de error de Blazor (1000), que avisa de que la aplicacion se rompio y
   nada deberia taparlo.

   Fondo solido, no una variable translucida: encima del modal o del mapa, un
   fondo semitransparente deja el texto ilegible.
   ========================================================================== */
.ee-toast {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  right: 20px;
  z-index: 900;

  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  padding: 13px 14px;

  background: var(--surface);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-left: 4px solid var(--good);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);

  animation: ee-toast-entra .22s ease-out;
}

.ee-toast__icono { flex-shrink: 0; margin-top: 1px; color: var(--good); }
.ee-toast__texto { flex: 1; line-height: 1.4; }

.ee-toast__cerrar {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  line-height: 1;
}

.ee-toast__cerrar:hover { opacity: 1; }

@keyframes ee-toast-entra {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* En movil ocupa el ancho util, que si no queda una tira estrecha en la esquina */
@media (max-width: 640px) {
  .ee-toast {
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
    animation: ee-toast-entra-movil .22s ease-out;
  }

  @keyframes ee-toast-entra-movil {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Quien prefiere menos movimiento no necesita la animacion de entrada */
@media (prefers-reduced-motion: reduce) {
  .ee-toast { animation: none; }
}

/* El aviso de error dentro de un modal se pega al borde superior del cuerpo */
.ee-modal__body > .ee-aviso:first-child { margin-bottom: 14px; }

/* ==========================================================================
   Campo de foto de perfil
   ========================================================================== */
.ee-foto {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ee-foto__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* El <input type=file> real se esconde y se dispara desde el <label>, que es la
   unica forma de darle el aspecto de los demas botones sin JavaScript. */
.ee-foto__elegir {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ee-foto__elegir input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  /* Sin esto el area pulsable es solo el texto, no el boton entero */
  width: 100%;
  height: 100%;
}

.ee-foto__elegir input[type="file"]:disabled { cursor: not-allowed; }

.ee-foto__ayuda {
  font-size: .76rem;
  color: var(--muted);
  flex-basis: 100%;
}

/* ==========================================================================
   Desplegable con buscador

   Fondo SOLIDO, nunca una variable translucida: la lista flota sobre el
   formulario y con transparencia el texto de debajo la vuelve ilegible.
   ========================================================================== */
.ee-combo { position: relative; }

/* Captura el clic fuera para cerrar. Va por debajo de la lista pero por encima
   del resto del formulario, y es transparente a proposito. */
.ee-combo__fondo {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.ee-combo__lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 31;

  max-height: 260px;
  overflow-y: auto;

  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  padding: 4px;
}

.ee-combo__opcion {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}

.ee-combo__opcion:hover { background: var(--surface-2); }

.ee-combo__opcion.es-activa {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  font-weight: 600;
}

.ee-combo__principal { line-height: 1.3; }

.ee-combo__secundario {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.3;
}

.ee-combo__vacio {
  padding: 10px;
  color: var(--muted);
  font-size: .85rem;
}

/* ==========================================================================
   Selector de icono
   ========================================================================== */
.ee-iconos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ee-iconos__opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 74px;
  padding: 10px 8px;

  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
}

.ee-iconos__opcion:hover:not(:disabled) { background: var(--surface-2); }
.ee-iconos__opcion:disabled { opacity: .55; cursor: not-allowed; }

/* El elegido se marca con color Y con borde: solo por color no se distingue
   con un daltonismo, y aqui no hay texto que lo diga. */
.ee-iconos__opcion.es-activa {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-weight: 600;
}

/* ==========================================================================
   Tablero de inicio

   Un solo tono para los datos. El color NO codifica identidad aqui: cada barra
   lleva su nombre escrito al lado, asi que anadir una paleta por categoria solo
   traeria el problema de que dos tonos no se distingan con daltonismo, sin
   aportar informacion. Los colores semanticos quedan libres para los estados,
   que es donde si significan algo.
   ========================================================================== */
.ee-tablero__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ee-tablero__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  align-items: start;
}

/* --- Cifra --------------------------------------------------------------- */
.ee-cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.ee-cifra__titulo { font-size: .78rem; color: var(--muted); }

.ee-cifra__valor {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  /* Tabular para que los numeros no bailen al cambiar de periodo */
  font-variant-numeric: tabular-nums;
}

.ee-cifra__valor.es-bueno   { color: var(--good); }
.ee-cifra__valor.es-regular { color: var(--warn); }
.ee-cifra__valor.es-malo    { color: var(--bad); }

/* El estado siempre lleva palabra, nunca solo color */
.ee-cifra__estado { font-size: .74rem; font-weight: 600; }
.ee-cifra__estado.es-bueno   { color: var(--good); }
.ee-cifra__estado.es-regular { color: var(--warn); }
.ee-cifra__estado.es-malo    { color: var(--bad); }

.ee-cifra__nota { font-size: .74rem; color: var(--muted); }

/* --- Barras por mes ------------------------------------------------------ */
.ee-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding-top: 18px;
}

.ee-barras__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.ee-barras__valor {
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

/* Extremo redondeado solo arriba: la barra nace en la linea base */
.ee-barras__barra {
  width: 100%;
  max-width: 34px;
  background: var(--brand);
  border-radius: 4px 4px 0 0;
  min-height: 0;
}

.ee-barras__etiqueta {
  font-size: .62rem;
  color: var(--muted);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Lista de barras horizontales ---------------------------------------- */
.ee-listabarras { display: flex; flex-direction: column; gap: 9px; }

.ee-listabarras__fila {
  display: grid;
  grid-template-columns: minmax(80px, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
}

.ee-listabarras__nombre {
  font-size: .84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ee-listabarras__pista {
  background: var(--surface-2);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.ee-listabarras__barra {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
}

.ee-listabarras__valor {
  font-size: .84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ee-listabarras__valor small {
  display: block;
  font-weight: 400;
  font-size: .7rem;
  color: var(--muted);
}

/* --- Opiniones ----------------------------------------------------------- */
.ee-opiniones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ee-opiniones > li { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ee-opiniones > li:last-child { border-bottom: 0; padding-bottom: 0; }

.ee-opiniones__texto {
  margin: 5px 0 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.45;
}

.ee-chip--malo {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 25%, transparent);
}

/* Tarjeta de alerta: borde de color Y texto que dice que pasa */
.ee-card--alerta {
  border-left: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, var(--surface));
}

/* ==========================================================================
   Tablas en pantallas chicas

   EL PROBLEMA
   Con scroll horizontal a secas, el navegador reparte el poco ancho entre
   TODAS las columnas: en un telefono el nombre partia en dos lineas, la
   direccion en cinco, y aun asi habia que arrastrar para llegar al estado y al
   boton. La fila crecia a 150px de alto y no se trabajaba con nada.

   LA SOLUCION
   Se le da a la tabla un ancho minimo para que las columnas conserven su
   tamano natural y el scroll sea de verdad horizontal, no una compresion. Y la
   primera columna se queda fija, que es la referencia para saber de que
   renglon se esta leyendo al desplazarse.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 900px) {
  .ee-tabla-scroll {
    /* La sombra del borde avisa de que hay mas contenido a la derecha. */
    background:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left,  var(--surface) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .ee-tabla {
    /* Ancho natural en vez de aplastado. El scroll del contenedor hace el resto. */
    min-width: 720px;
  }

  /* La primera columna, fija: es de donde se sabe que renglon se esta leyendo. */
  .ee-tabla th:first-child,
  .ee-tabla td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Fondo solido obligatorio: sin el se transparenta lo que pasa por debajo. */
    background: var(--surface);
  }

  .ee-tabla th:first-child { background: var(--surface-2); z-index: 3; }

  /* La sombra separa la columna fija de lo que se desplaza detras. */
  .ee-tabla th:first-child::after,
  .ee-tabla td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(0,0,0,.07), transparent);
    pointer-events: none;
  }

  /* El renglon resaltado tiene que ganarle al fondo de la columna fija. */
  .ee-tabla tbody tr:hover td:first-child,
  .ee-tabla tbody tr.esta-activo td:first-child { background: var(--surface-2); }
}



/* ==========================================================================
   Telefono: cada renglon es una ficha

   Una tabla de siete columnas en 390px no se arregla con scroll: aunque se le
   ponga ancho minimo, las columnas quedan en 100px y el nombre del cliente se
   parte en tres lineas. Peor todavia, el estado, el total y el boton quedan
   fuera de la vista, que es justo lo que hay que mirar para trabajar.

   Asi que en telefono la tabla deja de ser tabla: cada renglon se apila como
   una ficha con "etiqueta: valor". El nombre de la columna lo pone el CSS desde
   data-etiqueta, que rellena portal.js leyendo los encabezados.
   ========================================================================== */
@media (max-width: 640px) {
  .ee-tabla-scroll { overflow-x: visible; }

  .ee-tabla,
  .ee-tabla tbody,
  .ee-tabla tr,
  .ee-tabla td { display: block; width: auto; }

  /* Los encabezados ya no hacen falta: cada celda lleva el suyo. */
  .ee-tabla thead { display: none; }

  .ee-tabla tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  .ee-tabla tr:last-child { border-bottom: 0; }

  .ee-tabla td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .ee-tabla td::before {
    content: attr(data-etiqueta);
    flex-shrink: 0;
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    /* Ancho fijo para que los valores queden alineados entre si. */
    min-width: 92px;
    padding-top: 2px;
  }

  /* Una celda vacia no aporta nada en una ficha: solo seria una etiqueta
     seguida de nada. Se esconde. */
  .ee-tabla td:empty { display: none; }

  /* Una celda sin encabezado (la de los botones) no necesita hueco de etiqueta. */
  .ee-tabla td:not([data-etiqueta])::before,
  .ee-tabla td[data-etiqueta=""]::before { display: none; }

  /* Las acciones, a lo ancho y al final de la ficha. */
  .ee-tabla td.ee-tabla__acciones {
    justify-content: flex-end;
    padding-top: 10px;
  }

  /* Los bloques de dos lineas (nombre + direccion) se alinean a la derecha
     como el resto del valor. */
  .ee-tabla td > div { text-align: right; }

  .ee-tabla__num { font-weight: 600; }
}