/* El marco del dashboard, para maquetas.
 *
 * Una maqueta que no se parece al producto no enseña a usarlo: el usuario llega
 * a la pantalla de verdad y no reconoce nada. Por eso la demo no se pinta en un
 * marco inventado, sino en una réplica del shell — barra lateral, migas,
 * pestañas, tarjetas, tabla y modal.
 *
 * Por qué es una hoja aparte y no `dashboard.css`: esto también carga en la
 * página de inicio, que es lo primero que ve un visitante. Meterle el CSS
 * completo del dashboard le costaría el arranque a cada persona que entra.
 *
 * El precio de esa decisión es que puede desviarse del producto, así que
 * `tests/test_demos_shell_fiel.py` verifica que los colores y las medidas de
 * aquí sigan siendo los de `dashboard.css`. Si alguien cambia el morado de la
 * marca, esta hoja se pone roja hasta que la actualicen.
 *
 * Todo vive bajo `.ecd-app`, así que nada de esto toca el resto de la página.
 */

.ecd-app {
  /* Tokens propios: en el index no existe el tema del dashboard, y dentro del
     dashboard no queremos heredarlo (la maqueta siempre se ve en claro, como el
     producto que estamos retratando). */
  --ecd-p3: #a855d4;
  --ecd-p4: #8b00cc;
  --ecd-p1: #ede0f7;
  --ecd-up: #5ecba1;
  --ecd-dn: #e07a7a;
  --ecd-warn: #f0c060;
  --ecd-bg: #f7f5fb;
  --ecd-surf: #eeeaf5;
  --ecd-card: #ffffff;
  --ecd-b: rgba(90, 50, 190, .1);
  --ecd-mu: #5b4b9e;
  --ecd-tx: #1a0e4a;
  --ecd-hd: #0a0520;

  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid var(--ecd-b);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ecd-bg);
  color: var(--ecd-tx);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  /* El visitante mira, no manipula: la demo se conduce sola. */
  user-select: none;
}

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.ecd-side {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem .55rem;
  border-right: 1px solid var(--ecd-b);
  background: var(--ecd-card);
}
.ecd-marca { display: flex; align-items: center; gap: .45rem; padding: .2rem .35rem .7rem; }
/* La maqueta convive con el CSS de la pagina que la aloja, y esa pagina puede
   tener reglas sueltas sobre `img`. Estas dos ganan por especificidad para que
   ninguna imagen de la maqueta se desborde. */
.ecd-app img { max-width: 100%; }
.ecd-app .ecd-marca-icono { width: 34px; height: 34px; flex: 0 0 34px; }
.ecd-app .ecd-mn-logo { width: 20px; height: 20px; flex: 0 0 20px; }

/* El logo va SIN fondo, como el `.sb-img` de la barra lateral de verdad:
   `background: transparent`, sin borde y sin sombra. El cuadrado de color es
   solo el respaldo de cuando no hay imagen. */
.ecd-marca-icono {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: transparent;
  object-fit: contain;
}
img.ecd-marca-icono { border: 0; box-shadow: none; }
/* Sin imagen: el cuadrado con el degradado de la marca. */
div.ecd-marca-icono:not(.inicial) { background: linear-gradient(135deg, var(--ecd-p3), var(--ecd-p4)); }
/* Cuando el negocio todavía no subió su logo, el producto muestra su inicial
   sobre el color de marca. La maqueta hace lo mismo. */
.ecd-marca-icono.inicial {
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; color: #fff;
}
.ecd-marca b { display: block; font-size: .68rem; letter-spacing: .1em; color: var(--ecd-hd); }
.ecd-marca span { display: block; font-size: .55rem; letter-spacing: .16em; color: var(--ecd-mu); }
/* El «En vivo» de la barra real: punto verde que late. */
.ecd-live {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: .5rem; letter-spacing: .12em; color: var(--ecd-up);
}
.ecd-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ecd-up); animation: ecdLatido 1.4s infinite;
}
@keyframes ecdLatido { 50% { opacity: .25; } }

.ecd-side-grupo {
  margin: .55rem .35rem .2rem; font-size: .55rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ecd-mu); opacity: .75;
}
.ecd-nav {
  display: flex; align-items: center; gap: .45rem;
  padding: .42rem .5rem; border-radius: 8px;
  font-size: .72rem; font-weight: 600; color: var(--ecd-tx);
}
.ecd-nav i { font-style: normal; font-size: .8rem; line-height: 1; opacity: .8; }
.ecd-nav.activo { background: var(--ecd-p1); color: var(--ecd-p4); font-weight: 800; }
.ecd-nav.activo i { opacity: 1; }
.ecd-nav-sub {
  display: flex; align-items: center; gap: .4rem;
  padding: .26rem .5rem .26rem 1.55rem; font-size: .66rem; color: var(--ecd-mu);
}
.ecd-nav-sub::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ecd-up);
}
.ecd-empresa {
  margin-top: auto; display: flex; align-items: center; gap: .45rem;
  padding: .5rem; border: 1px solid var(--ecd-b); border-radius: 9px; background: var(--ecd-surf);
}
.ecd-empresa-icono {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
  background: var(--ecd-p1); display: grid; place-items: center; font-size: .7rem;
}
.ecd-empresa b { display: block; font-size: .65rem; color: var(--ecd-hd); }
.ecd-empresa span { display: block; font-size: .53rem; letter-spacing: .1em; color: var(--ecd-mu); }

/* ── Zona principal ────────────────────────────────────────────────────── */
.ecd-main { display: flex; flex-direction: column; min-width: 0; }
.ecd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--ecd-b); background: var(--ecd-card);
}
.ecd-migas { font-size: .66rem; color: var(--ecd-mu); }
.ecd-migas b { color: var(--ecd-hd); font-weight: 700; }
.ecd-plan {
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 99px; padding: .2rem .5rem;
  background: rgba(240, 192, 96, .16); color: #8a6300;
}
.ecd-lienzo { flex: 1; padding: .9rem; overflow: hidden; }
.ecd-encabezado { margin-bottom: .7rem; }
.ecd-eyebrow {
  display: block; font-size: .56rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ecd-p4); margin-bottom: .15rem;
}
.ecd-h1 {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem; font-weight: 700; color: var(--ecd-hd);
}
.ecd-h1 em { font-style: normal; color: var(--ecd-p4); }
.ecd-sub { margin: .15rem 0 0; font-size: .68rem; color: var(--ecd-mu); }

.ecd-tabs {
  display: flex; gap: .1rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--ecd-b); overflow: hidden;
}
.ecd-tab {
  display: flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .45rem .6rem; font-size: .68rem; font-weight: 650; color: var(--ecd-mu);
  border-bottom: 2px solid transparent;
}
.ecd-tab.activo { color: var(--ecd-p4); font-weight: 800; border-bottom-color: var(--ecd-p4); }

.ecd-acciones { display: flex; gap: .4rem; justify-content: flex-end; margin-bottom: .7rem; }
.ecd-btn {
  border: 1px solid var(--ecd-p4); background: var(--ecd-p4); color: #fff;
  border-radius: 8px; padding: .38rem .7rem; font-size: .67rem; font-weight: 800;
  font-family: inherit; white-space: nowrap;
}
.ecd-btn.suave { background: transparent; color: var(--ecd-p4); }

.ecd-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.ecd-tarjeta {
  position: relative; overflow: hidden;
  border: 1px solid var(--ecd-b); border-radius: 10px; background: var(--ecd-card); padding: .6rem .7rem;
}
.ecd-tarjeta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ecd-p3);
}
.ecd-tarjeta.ok::after { background: var(--ecd-up); }
.ecd-tarjeta.alerta::after { background: var(--ecd-warn); }
.ecd-tarjeta.malo::after { background: var(--ecd-dn); }
.ecd-tarjeta small { display: block; font-size: .56rem; letter-spacing: .04em; color: var(--ecd-mu); }
.ecd-tarjeta strong { display: block; font-size: 1.3rem; font-weight: 700; color: var(--ecd-hd); line-height: 1.2; }
.ecd-tarjeta span { display: block; font-size: .56rem; color: var(--ecd-mu); }

.ecd-panel {
  border: 1px solid var(--ecd-b); border-radius: 10px; background: var(--ecd-card);
  padding: .7rem .8rem; margin-top: .6rem;
}
.ecd-panel h4 { margin: 0 0 .1rem; font-size: .76rem; color: var(--ecd-hd); }
.ecd-panel p { margin: 0 0 .5rem; font-size: .62rem; color: var(--ecd-mu); }

.ecd-t { width: 100%; border-collapse: collapse; font-size: .66rem; }
.ecd-t th, .ecd-t td { text-align: left; padding: .36rem .45rem; border-bottom: 1px solid var(--ecd-b); }
.ecd-t th { font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ecd-mu); }
.ecd-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ecd-t td.malo { color: var(--ecd-dn); font-weight: 800; }
.ecd-t td.bien { color: #0a7a52; font-weight: 700; }
.ecd-t tr.nueva td { background: rgba(94, 203, 161, .12); }

.ecd-chip {
  display: inline-block; font-size: .55rem; font-weight: 800; border-radius: 5px;
  padding: .12rem .35rem; background: var(--ecd-p1); color: var(--ecd-p4);
}
.ecd-chip.ok { background: rgba(94, 203, 161, .18); color: #0a7a52; }
.ecd-chip.espera { background: rgba(240, 192, 96, .2); color: #8a6300; }

/* ── Barra de período: la acción que más repite un usuario ──────────── */
.ecd-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .6rem; }
.ecd-periodo-et {
  font-size: .55rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ecd-mu); margin-right: .3rem;
}
.ecd-fb {
  border: 1px solid var(--ecd-b); border-radius: 7px; background: var(--ecd-card);
  color: var(--ecd-mu); padding: .26rem .55rem; font-size: .64rem; font-weight: 700;
  transition: background .25s, color .25s, border-color .25s;
}
.ecd-fb.activo { border-color: var(--ecd-p4); background: var(--ecd-p1); color: var(--ecd-p4); }

/* ── La caja de Cristal ───────────────────────────────────── */
.ecd-consulta {
  border: 1px solid rgba(168, 85, 212, .3); border-radius: 10px;
  background: var(--ecd-card); padding: .7rem .75rem; display: grid; gap: .5rem;
}
.ecd-consulta-head { display: flex; align-items: center; gap: .5rem; }
.ecd-consulta-head > div { flex: 1; }
.ecd-consulta-ico {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; display: grid;
  place-items: center; background: var(--ecd-p1); color: var(--ecd-p4); font-size: .72rem;
}
.ecd-consulta-head strong { display: block; font-size: .76rem; color: var(--ecd-hd); }
.ecd-consulta-head small { display: block; font-size: .6rem; color: var(--ecd-mu); }
.ecd-consulta .ecd-input { min-height: 34px; }
.ecd-consulta-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.ecd-respuesta {
  border-left: 2px solid var(--ecd-p3); padding: .1rem 0 .1rem .55rem;
  font-size: .7rem; line-height: 1.55; color: var(--ecd-tx);
}
.ecd-respuesta b { color: var(--ecd-hd); }

/* Un valor que acaba de cambiar: destello, no estado permanente. */
.ecd-tarjeta { transition: box-shadow .3s; }
.ecd-tarjeta.cambiada { box-shadow: 0 0 0 3px rgba(168, 85, 212, .18); }

/* ── La marca del negocio ───────────────────────────────────────────
   El Punto de venta es la pantalla que ven los clientes del cliente, así que
   arriba manda SU marca: logo, nombre y color propios, con Ecosonics al lado.
   Es lo que se ve en una caja de verdad, y lo que hay que enseñar en la demo. */
.ecd-marca-negocio {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; color: #fff;
  transition: background .45s ease;
}
.ecd-marca-negocio.cambiada { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.ecd-mn-eco {
  font-size: .56rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; opacity: .82;
}
.ecd-mn-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
.ecd-mn-logo {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
  display: grid; place-items: center; object-fit: contain;
  background: #fff; color: inherit;
  font-size: .62rem; font-weight: 800;
}
.ecd-marca-negocio b { font-size: .72rem; }
.ecd-mn-plan {
  margin-left: auto; font-size: .54rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 99px; padding: .16rem .5rem;
  background: rgba(255, 255, 255, .2);
}

/* ── Punto de venta: su propia pantalla, sin barra lateral ─────────── */
.ecd-app.sin-lateral { grid-template-columns: minmax(0, 1fr); }
/* Catálogo a la izquierda, ticket a la derecha, como en la pantalla real. */
.ecd-caja { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(200px, .65fr); gap: .7rem; }
.ecd-caja > * { min-width: 0; }

.ecd-ticket {
  display: flex; flex-direction: column; gap: .45rem;
  border: 1px solid var(--ecd-b); border-radius: 10px;
  background: var(--ecd-card); padding: .65rem .7rem;
}
.ecd-tk-head { font-size: .68rem; font-weight: 800; color: var(--ecd-hd); }
.ecd-tk-lineas { display: grid; gap: .3rem; min-height: 54px; }
.ecd-tk-linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem;
  align-items: baseline; font-size: .66rem; color: var(--ecd-tx);
  border-bottom: 1px dashed var(--ecd-b); padding-bottom: .28rem;
}
.ecd-tk-linea > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecd-tk-cant { color: var(--ecd-mu); font-size: .6rem; }
.ecd-tk-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.ecd-tk-linea.nueva { animation: ecdEntra .4s ease-out; }
@keyframes ecdEntra { from { opacity: 0; transform: translateY(-4px); } }
.ecd-tk-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: .3rem; border-top: 1px solid var(--ecd-b);
  font-size: .62rem; color: var(--ecd-mu);
}
.ecd-tk-total strong { font-size: 1.05rem; color: var(--ecd-hd); font-variant-numeric: tabular-nums; }
.ecd-tk-cobrar {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; padding: .5rem; font-size: .72rem;
}
.ecd-tk-cobrar em { font-style: normal; font-size: .55rem; opacity: .75; }

/* Los medios de pago, tal como los ofrece la caja. */
.ecd-pagos { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: .3rem; }
.ecd-pago {
  display: grid; gap: .1rem; justify-items: center;
  border: 1px solid var(--ecd-b); border-radius: 8px; background: var(--ecd-card);
  padding: .38rem .3rem; font-size: .58rem; font-weight: 700; color: var(--ecd-mu);
  transition: border-color .25s, background .25s, color .25s;
}
.ecd-pago i { font-style: normal; font-size: .95rem; }
.ecd-pago.activo { border-color: var(--ecd-p4); background: var(--ecd-p1); color: var(--ecd-p4); }

@media (max-width: 780px) {
  .ecd-caja { grid-template-columns: 1fr; }
}

/* ── La maqueta dentro de la pestaña Ayuda de un módulo ───────────── */
.ecd-ayuda-marco { margin-bottom: 1.2rem; }
.ecd-ayuda-titulo {
  margin: 0 0 .2rem; font-size: .95rem; color: var(--hd, #0a0520);
}
.ecd-ayuda-sub {
  margin: 0 0 .7rem; font-size: .74rem; line-height: 1.5; color: var(--mu, #5b4b9e);
  max-width: 62ch;
}

/* ── La ayuda en un bloque plegable ──────────────────────────────────
   Para los modulos sin barra de pestanas. Va cerrado: quien entra a mirar sus
   ventas no quiere una demo ocupandole la pantalla. */
.ecd-plegable {
  margin: 1.4rem 0 .4rem;
  border: 1px solid var(--b, #e7e2eb);
  border-radius: 12px;
  background: var(--card, #fff);
}
.ecd-plegable > summary {
  cursor: pointer; list-style: none;
  padding: .75rem .9rem;
  font-size: .8rem; font-weight: 700; color: var(--hd, #0a0520);
}
.ecd-plegable > summary::-webkit-details-marker { display: none; }
.ecd-plegable > summary::before {
  content: "›"; display: inline-block; margin-right: .5rem;
  color: var(--p3, #a855d4); font-weight: 900;
  transition: transform .2s;
}
.ecd-plegable[open] > summary::before { transform: rotate(90deg); }
.ecd-plegable[open] > summary { border-bottom: 1px solid var(--b, #e7e2eb); }
.ecd-plegable > div { padding: .9rem; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.ecd-velo {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
  background: rgba(26, 14, 74, .34); opacity: 0; transition: opacity .28s;
}
.ecd-velo.abierto { opacity: 1; }
.ecd-modal {
  width: min(420px, 100%); max-height: 92%; overflow: hidden;
  border: 1px solid var(--ecd-b); border-radius: 13px; background: var(--ecd-card);
  padding: .85rem .95rem; box-shadow: 0 22px 50px rgba(26, 14, 74, .2);
  transform: translateY(10px) scale(.98); transition: transform .28s;
}
.ecd-velo.abierto .ecd-modal { transform: none; }
.ecd-modal h4 { margin: 0; font-size: .82rem; color: var(--ecd-hd); }
.ecd-modal > p { margin: .1rem 0 .6rem; font-size: .6rem; color: var(--ecd-mu); }

.ecd-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ecd-campo { display: grid; gap: .16rem; min-width: 0; }
.ecd-campo.ancho { grid-column: 1 / -1; }
.ecd-campo > label {
  font-size: .53rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ecd-mu);
}
.ecd-input {
  display: flex; align-items: center; justify-content: space-between; gap: .3rem;
  min-height: 28px; padding: .32rem .45rem;
  border: 1px solid var(--ecd-b); border-radius: 7px; background: var(--ecd-card);
  font-size: .68rem; color: var(--ecd-tx);
  transition: border-color .2s, box-shadow .2s;
}
.ecd-input.vacio { color: #9a92b8; }
.ecd-input.select::after { content: "▾"; font-size: .55rem; color: #9a92b8; }
.ecd-input.foco { border-color: var(--ecd-p3); box-shadow: 0 0 0 3px rgba(168, 85, 212, .16); }
/* El cursor que parpadea mientras la demo "escribe". */
.ecd-input.foco > span::after {
  content: ""; display: inline-block; width: 1px; height: .8em;
  margin-left: 1px; background: var(--ecd-p4); vertical-align: -1px;
  animation: ecdLatir 1s steps(1) infinite;
}
@keyframes ecdLatir { 50% { opacity: 0; } }

/* ── Conducción: puntero, halo, aviso ──────────────────────────────────── */
.ecd-puntero {
  position: absolute; z-index: 5; width: 16px; height: 16px; margin: -3px 0 0 -3px;
  pointer-events: none; opacity: 0;
  transition: transform .5s cubic-bezier(.33, 1, .68, 1), opacity .25s;
}
.ecd-puntero.visible { opacity: 1; }
.ecd-puntero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ecd-hd);
  clip-path: polygon(0 0, 0 72%, 26% 55%, 44% 92%, 60% 84%, 42% 48%, 72% 44%);
}
.ecd-puntero.pulsando::after {
  content: ""; position: absolute; left: -8px; top: -8px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(168, 85, 212, .32);
  animation: ecdPulso .5s ease-out;
}
@keyframes ecdPulso { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

.ecd-halo {
  position: absolute; z-index: 4; pointer-events: none; opacity: 0;
  border: 2px solid var(--ecd-p3); border-radius: 9px;
  box-shadow: 0 0 0 4px rgba(168, 85, 212, .16);
  transition: all .45s cubic-bezier(.33, 1, .68, 1);
}
.ecd-halo.visible { opacity: 1; }

.ecd-aviso {
  position: absolute; z-index: 6; right: .8rem; bottom: .8rem;
  display: flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(94, 203, 161, .4); border-radius: 9px;
  background: #edfaf4; color: #0a5c3e;
  padding: .45rem .65rem; font-size: .66rem; font-weight: 700;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.ecd-aviso.visible { opacity: 1; transform: none; }
.ecd-aviso::before { content: "✓"; font-weight: 900; }

/* ── Pie: qué está pasando y por qué ───────────────────────────────────── */
.ecd-relato {
  display: grid; gap: .5rem;
  border-top: 1px solid var(--ecd-b); background: var(--ecd-card); padding: .7rem .9rem;
}
.ecd-relato-texto { margin: 0; font-size: .74rem; line-height: 1.55; color: var(--ecd-mu); min-height: 2.3em; }
.ecd-relato-texto b { color: var(--ecd-hd); }
.ecd-barra { height: 3px; border-radius: 99px; background: var(--ecd-surf); overflow: hidden; }
.ecd-barra > i { display: block; height: 100%; width: 0; background: var(--ecd-p3); transition: width .3s linear; }
.ecd-pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.ecd-capitulo { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ecd-p4); }
.ecd-ficticio { font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ecd-mu); opacity: .8; }

@media (max-width: 780px) {
  .ecd-app { grid-template-columns: 1fr; min-height: 0; }
  .ecd-side { flex-direction: row; align-items: center; gap: .5rem; overflow-x: auto; padding: .5rem; }
  .ecd-side-grupo, .ecd-nav-sub, .ecd-empresa { display: none; }
  .ecd-nav { flex: 0 0 auto; }
  .ecd-campos { grid-template-columns: 1fr; }
  .ecd-campo.ancho { grid-column: auto; }
  /* La tabla es lo unico que no encoge: se compacta y, si aun asi no cabe, se
     desliza dentro de su panel en vez de quedar cortada contra el borde. */
  .ecd-panel { overflow-x: auto; }
  .ecd-t { font-size: .6rem; }
  .ecd-t th, .ecd-t td { padding: .3rem .35rem; white-space: nowrap; }
  .ecd-h1 { font-size: 1.2rem; }
  .ecd-tarjeta strong { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ecd-puntero, .ecd-halo, .ecd-velo, .ecd-modal, .ecd-aviso, .ecd-barra > i { transition: none; }
  .ecd-puntero.pulsando::after, .ecd-input.foco > span::after { animation: none; }
}