/* CRM Tienda — hoja de estilos.
   Los colores de marca (--marca, --acento, --barra, --enlace) los define cada tienda en _colores.html;
   aquí solo hay neutros, estados y estructura. */

@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fuentes/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fuentes/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --marca: #3b4cca; --sobre-marca: #fff; --acento: #3b4cca; --enlace: #3b4cca; --barra: #161a2e;

  --lienzo: #f2f3f6; --superficie: #ffffff; --superficie-2: #f7f8fa;
  --tinta: #14171f; --tinta-2: #4b5563; --tinta-3: #667085;
  --linea: #e3e6ec; --linea-fuerte: #c9cfd9;

  --ok: #12704f; --ok-suave: #e3f3ec;
  --atencion: #8f5300; --atencion-suave: #fdf0d9;
  --peligro: #b3203a; --peligro-suave: #fbe7ea;

  --marca-suave: color-mix(in srgb, var(--marca) 9%, var(--superficie));
  --marca-media: color-mix(in srgb, var(--marca) 22%, var(--superficie));
  --foco: color-mix(in srgb, var(--enlace) 38%, transparent);

  --r-control: 10px; --r-tarjeta: 16px;
  --sombra-flotante: 0 10px 30px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { color-scheme: dark; --oscuro: 1; }
}
:root[data-tema="oscuro"] { color-scheme: dark; }
/* Tema oscuro: se aplica con el ajuste del sistema o con el botón del menú */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --lienzo: #0e1116; --superficie: #161a22; --superficie-2: #1b2029;
    --tinta: #e8ebf1; --tinta-2: #b0b8c6; --tinta-3: #8e98a8;
    --linea: #262c37; --linea-fuerte: #384050;
    --ok: #4cc79b; --ok-suave: #12302a; --atencion: #f0b35a; --atencion-suave: #33270f;
    --peligro: #ff8497; --peligro-suave: #3a1820;
    --sombra-flotante: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}
:root[data-tema="oscuro"] {
  --lienzo: #0e1116; --superficie: #161a22; --superficie-2: #1b2029;
  --tinta: #e8ebf1; --tinta-2: #b0b8c6; --tinta-3: #8e98a8;
  --linea: #262c37; --linea-fuerte: #384050;
  --ok: #4cc79b; --ok-suave: #12302a; --atencion: #f0b35a; --atencion-suave: #33270f;
  --peligro: #ff8497; --peligro-suave: #3a1820;
  --sombra-flotante: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--lienzo); color: var(--tinta);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px; line-height: 1.5; font-feature-settings: "tnum" 1;
}
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 750; margin: 0 0 1.1rem; }
h2 { font-size: 1.08rem; letter-spacing: -.01em; font-weight: 700; margin: 0 0 .8rem; }
p { margin-top: 0; }
.suave { color: var(--tinta-3); font-size: .88rem; }

/* ------------------------------------------------------------- estructura */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.contenido { padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; width: 100%; max-width: 1280px; }
.solo { min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 1rem; padding: 1rem .8rem; background: var(--barra); color: #fff;
}
.tienda-bloque { padding: .2rem .2rem 0; }
.cambiar-tienda summary {
  list-style: none; display: flex; align-items: center; gap: .7rem; padding: .5rem; border-radius: 12px; cursor: pointer;
}
.cambiar-tienda summary::-webkit-details-marker { display: none; }
.cambiar-tienda summary:hover { background: rgba(255, 255, 255, .1); }
.tienda-chip {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--marca); color: var(--sobre-marca); font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.tienda-chip[hidden] { display: none; }
.tienda-chip.pequeno { width: 26px; height: 26px; border-radius: 8px; font-size: .8rem; box-shadow: none; }
.tienda-textos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tienda-textos strong { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.tienda-textos small { color: rgba(255, 255, 255, .72); font-size: .78rem; }
.chevron { flex: none; opacity: .8; transition: transform .15s; }
.cambiar-tienda[open] .chevron { transform: rotate(180deg); }
.menu-tiendas { display: grid; gap: 2px; margin: .3rem 0 0; padding: .35rem; background: rgba(0, 0, 0, .28); border-radius: 12px; }
.menu-tiendas form { margin: 0; }
.menu-tiendas button {
  width: 100%; display: flex; align-items: center; gap: .6rem; background: transparent; border: 0; color: #fff;
  font: inherit; text-align: left; padding: .45rem .5rem; border-radius: 8px; cursor: pointer;
}
.menu-tiendas button:hover { background: rgba(255, 255, 255, .14); }

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px;
  color: rgba(255, 255, 255, .8); font-weight: 560;
}
.menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.menu a.activo { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 700; }
.menu-grupo { margin: 1rem .7rem .25rem; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .62); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pie-lateral { margin-top: auto; display: grid; gap: .7rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.herramientas { display: flex; gap: .4rem; }
.btn-icono {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 1rem; line-height: 1;
}
.btn-icono:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.usuario { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.usuario-nombre { font-weight: 650; font-size: .92rem; overflow-wrap: anywhere; }
.usuario form { margin: 0; }
.btn-salir { display: inline-flex; align-items: center; gap: .35rem; background: transparent; border: 1px solid rgba(255, 255, 255, .4); color: #fff; padding: .3rem .65rem; border-radius: 9px; cursor: pointer; font: inherit; font-size: .85rem; }
.btn-salir:hover { background: rgba(255, 255, 255, .16); }
.btn-nav { background: rgba(255, 255, 255, .14); border: 0; color: #fff; padding: .45rem .6rem; border-radius: 9px; font: inherit; font-size: .82rem; cursor: pointer; }
.btn-nav[hidden] { display: none; }

/* Logo de la empresa: va sobre una placa clara para que se lea sobre cualquier color de menú */
.logo-placa { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: .45rem .7rem; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.logo-placa img { display: block; max-width: 100%; max-height: 44px; width: auto; height: auto; }
.logo-placa.grande { padding: .8rem 1.1rem; border-radius: 16px; max-width: 320px; }
.logo-placa.grande img { max-height: 70px; }
.logo-placa[hidden] { display: none; }
.cambiar-tienda.con-logo summary { flex-wrap: wrap; gap: .45rem; }
.cambiar-tienda.con-logo .logo-placa { flex: 1 1 100%; }
.cambiar-tienda.con-logo .tienda-textos { flex: 1 1 auto; padding-left: .2rem; }
.logo-ajuste { margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linea); }
.logo-ajuste .logo-placa { background: #fff; border: 1px solid var(--linea); box-shadow: none; margin-bottom: .6rem; justify-self: start; }

/* ------------------------------------------------------------- componentes */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 1.25rem 1.4rem; margin-bottom: 1.1rem; }
.tarjeta > :last-child { margin-bottom: 0; }
.rejilla { display: grid; gap: 1.1rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.g2 > .tarjeta { margin-bottom: 0; }

/* Indicadores: una sola franja con divisiones, no una fila de cajas sueltas */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); margin-bottom: 1.25rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); overflow: hidden;
}
.kpi { padding: 1rem 1.25rem 1.05rem; box-shadow: 1px 1px 0 0 var(--linea); }
.kpi .valor { font-size: 1.85rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.kpi .etiqueta { margin-top: .2rem; font-size: .84rem; color: var(--tinta-3); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { font-size: .82rem; font-weight: 650; color: var(--tinta-3); border-bottom-color: var(--linea-fuerte); white-space: nowrap; }
tbody tr:hover td { background: var(--superficie-2); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }

.etiqueta-estado { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 650; background: var(--marca-suave); color: var(--tinta); border: 1px solid var(--marca-media); white-space: nowrap; }
.est-cerrado { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.est-perdido { background: var(--peligro-suave); color: var(--peligro); border-color: transparent; }
.est-interesado, .est-negociacion { background: var(--atencion-suave); color: var(--atencion); border-color: transparent; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: .5rem 1.05rem;
  background: var(--marca); color: var(--sobre-marca); border: 1px solid transparent; border-radius: var(--r-control);
  font: inherit; font-weight: 650; font-size: .95rem; cursor: pointer; transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { filter: brightness(.95); }
.btn.sec { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn.sec:hover { background: var(--superficie-2); filter: none; }
.btn.peq { min-height: 32px; padding: .2rem .7rem; font-size: .85rem; }
.btn.peligro { background: var(--peligro); color: #fff; }

form p { margin: .7rem 0; }
form label { display: block; font-weight: 600; font-size: .86rem; color: var(--tinta-2); margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control);
  font: inherit; color: var(--tinta); background: var(--superficie);
}
input[type=color] { width: 56px; height: 40px; padding: 3px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-control); background: var(--superficie); cursor: pointer; }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--marca); vertical-align: -2px; margin-right: .35rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--enlace); box-shadow: 0 0 0 3px var(--foco); }
.helptext { display: block; color: var(--tinta-3); font-size: .82rem; margin-top: .2rem; }
.filtros { display: flex; gap: .85rem; flex-wrap: wrap; align-items: end; } .filtros p { margin: 0; } .filtros > * { flex: 1 1 160px; } .filtros > .btn { flex: 0 0 auto; }
.errorlist { color: var(--peligro); list-style: none; padding: 0; margin: .25rem 0; font-size: .86rem; font-weight: 550; }
.mensajes { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.mensajes li { padding: .7rem 1rem; border-radius: 12px; background: var(--ok-suave); color: var(--ok); font-weight: 600; }
.mensajes li.error { background: var(--peligro-suave); color: var(--peligro); }
.mensajes li.warning { background: var(--atencion-suave); color: var(--atencion); }
.vencido { color: var(--peligro); font-weight: 650; }
.barra { background: var(--linea); border-radius: 999px; height: 10px; overflow: hidden; min-width: 90px; } .barra > span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.barra.ok > span { background: var(--ok); }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.chart-caja { position: relative; height: 270px; }
.encabezado-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.encabezado-pagina h1 { margin: 0; }

/* ----------------------------------------------- productos / llamada con ítems */
tr.inactivo td { opacity: .55; }
fieldset.bloque { border: 1px solid var(--linea); border-radius: 14px; margin: 1rem 0; padding: .6rem 1rem 1rem; background: var(--superficie-2); }
fieldset.bloque legend { font-weight: 700; padding: 0 .45rem; }
fieldset.bloque.destacado { border-color: var(--atencion); background: var(--atencion-suave); }
.item-fila { display: grid; grid-template-columns: 90px 160px 1fr; gap: .5rem; align-items: center; margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--linea-fuerte); }
.item-fila .c-producto { grid-column: 1 / -1; }
.item-fila .c-sub { text-align: right; font-weight: 700; }
.totales { display: flex; gap: 1.6rem; margin-top: .7rem; padding: .65rem .9rem; background: var(--marca-suave); border: 1px solid var(--marca-media); border-radius: 12px; flex-wrap: wrap; }
.totales[hidden] { display: none; }

/* ------------------------------------------------------------- diario de ventas */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.1rem; }
.form-grid p { margin: .55rem 0; }
.detalle { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1.4rem; margin: 0 0 1rem; }
.detalle dt { font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
.detalle dd { margin: .1rem 0 0; font-weight: 550; overflow-wrap: anywhere; }
.lista-simple { list-style: none; margin: 0 0 .8rem; padding: 0; }
.lista-simple li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple form { margin: 0; }
.lista-simple li.inactivo { opacity: .55; }
.fila-agregar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.fila-agregar input[name=nombre] { flex: 1 1 200px; width: auto; }
.fila-agregar select { width: auto; }
.fila-agregar label { display: inline-flex; align-items: center; font-weight: 500; margin: 0; }

/* ------------------------------------------------------------- calendario */
.cal-barra { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.1rem; }
.cal-nav { display: flex; gap: .5rem; align-items: center; } .cal-mes { font-size: 1.2rem; font-weight: 700; min-width: 10rem; text-align: center; }
.cal-filtro { margin: 0; } .cal-filtro select { width: auto; }
.cal-tarjeta { padding: .9rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
.cal-cabecera div { text-align: center; font-size: .82rem; font-weight: 650; color: var(--tinta-3); padding: .2rem 0; }
.cal-dia { position: relative; display: block; min-height: 100px; padding: .35rem .4rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); color: inherit; overflow: hidden; }
.cal-dia:hover { border-color: var(--marca); text-decoration: none; }
.cal-dia.fuera { background: var(--superficie-2); opacity: .55; }
.cal-dia.hoy .num-dia { background: var(--marca); color: var(--sobre-marca); border-radius: 999px; padding: 0 .45rem; }
.cal-dia.sel { border: 2px solid var(--marca); box-shadow: 0 0 0 3px var(--marca-media); }
.num-dia { font-size: .86rem; font-weight: 650; display: inline-block; }
.cal-cuenta { display: none; position: absolute; right: 6px; top: 5px; background: var(--marca); color: var(--sobre-marca); border-radius: 999px; font-size: .72rem; padding: 0 .45rem; }
.cal-eventos { display: block; margin-top: .25rem; }
.ev { display: block; font-size: .74rem; line-height: 1.3; padding: .12rem .35rem; margin-bottom: 2px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-devolucion { background: var(--atencion-suave); color: var(--atencion); border-left: 3px solid var(--atencion); }
.ev-seguimiento { background: var(--marca-suave); color: var(--tinta); border-left: 3px solid var(--marca); }
.ev-vencido { background: var(--peligro-suave); color: var(--peligro); border-left: 3px solid var(--peligro); }
.ev-hecho { background: var(--superficie-2); color: var(--tinta-3); border-left: 3px solid var(--linea-fuerte); text-decoration: line-through; }
.ev-mas { font-size: .74rem; color: var(--tinta-3); }
.cal-leyenda { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; } .cal-leyenda .ev { display: inline-block; }

/* ----------------------------------------------------------------- alertas */
.insignia { display: inline-block; min-width: 1.3rem; padding: 0 .4rem; margin-left: auto; border-radius: 999px; background: #ff4d5e; color: #fff; font-size: .74rem; font-weight: 750; text-align: center; line-height: 1.3rem; }
.insignia[hidden] { display: none; }
h2 .insignia { margin-left: .4rem; }
#avisos-toasts { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1000; display: flex; flex-direction: column; gap: .7rem; width: min(380px, calc(100vw - 2rem)); max-height: 80vh; overflow-y: auto; }
.aviso { background: var(--superficie); border: 1px solid var(--linea); border-left: 6px solid var(--marca); border-radius: 14px; padding: .75rem .9rem; box-shadow: var(--sombra-flotante); }
.aviso-proxima { border-left-color: var(--marca); }
.aviso-ahora { border-left-color: var(--atencion); background: var(--atencion-suave); }
.aviso-vencida { border-left-color: var(--peligro); background: var(--peligro-suave); }
.aviso-nuevo { animation: aviso-pulso .5s ease-in-out 3; }
@keyframes aviso-pulso { 50% { transform: scale(1.03); } }
.aviso-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.aviso-x { background: transparent; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--tinta-3); padding: 0 .25rem; }
.aviso-detalle { font-size: .86rem; color: var(--tinta-2); margin: .15rem 0; }
.aviso-motivo { font-size: .88rem; }
.aviso-motivo:empty { display: none; }
.aviso-acciones { display: flex; gap: .45rem; align-items: center; margin-top: .55rem; flex-wrap: wrap; }
.aviso-acciones select { width: auto; min-height: 32px; padding: .2rem .4rem; font-size: .84rem; }
.aviso-acciones .btn { text-decoration: none; }
.alerta-bloque h2 .insignia { background: var(--marca); color: var(--sobre-marca); }
.alerta-bloque.critica h2 .insignia { background: var(--peligro); color: #fff; }
.alerta-fila { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.alerta-fila:last-child { border-bottom: 0; }
.resumen-alertas { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; background: var(--atencion-suave); color: var(--tinta); border-radius: 14px; padding: .75rem 1.1rem; margin-bottom: 1.1rem; }
.resumen-alertas.ok { background: var(--ok-suave); }

/* ------------------------------------------------ ingreso y selección de tienda */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.entrada-panel {
  background: var(--barra); color: #fff; padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: space-between;
  background-image: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--marca) 55%, transparent) 0%, transparent 60%);
  transition: background-color .25s;
}
.entrada-panel .tienda-chip { width: 56px; height: 56px; border-radius: 16px; font-size: 1.6rem; }
.entrada-panel h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin: 1.2rem 0 .6rem; overflow-wrap: anywhere; }
.entrada-panel p { color: rgba(255, 255, 255, .78); max-width: 34ch; margin: 0; }
.entrada-form { display: grid; place-items: center; padding: 2rem 1.25rem; }
.entrada-form > div { width: min(400px, 100%); }
.entrada-form h1 { font-size: 1.6rem; }
.entrada-form .btn { width: 100%; min-height: 44px; margin-top: .5rem; }
.tiendas-lista { display: grid; gap: .7rem; }
.tienda-opcion { display: flex; width: 100%; align-items: center; gap: .9rem; padding: .85rem 1rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; }
.tienda-opcion:hover { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-media); }
.tienda-opcion .tienda-chip { box-shadow: none; }
.muestra-colores { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; }
.muestra-colores span { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--linea-fuerte); }
.vista-previa { border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); display: grid; grid-template-columns: 110px 1fr; min-height: 170px; }
.vista-previa .vp-barra { background: var(--vp-barra); padding: .7rem; display: grid; gap: .4rem; align-content: start; }
.vista-previa .vp-barra i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .35); }
.vista-previa .vp-barra i:first-child { height: 22px; width: 22px; border-radius: 7px; background: var(--vp-marca); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.vista-previa .vp-cuerpo { background: var(--lienzo); padding: .8rem; display: grid; gap: .6rem; align-content: start; }
.vista-previa .vp-boton { justify-self: start; padding: .35rem .8rem; border-radius: 9px; background: var(--vp-marca); color: var(--vp-sobre); font-weight: 650; font-size: .85rem; }
.vista-previa .vp-enlace { color: var(--vp-acento); font-weight: 650; font-size: .9rem; }

/* ------------------------------------------------------------- pantallas chicas */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: column; gap: .5rem; padding: .7rem .7rem .5rem; }
  .menu { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: .3rem; scrollbar-width: thin; }
  .menu a { white-space: nowrap; padding: .5rem .75rem; }
  .menu-grupo { display: none; }
  .pie-lateral { margin-top: 0; grid-template-columns: auto 1fr; align-items: center; padding-top: .5rem; }
  .contenido { padding-top: 1.25rem; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-panel { padding: 1.5rem; min-height: 0; gap: 1rem; }
  .entrada-panel h2 { font-size: 1.8rem; margin-top: .6rem; }
  .vista-previa { grid-template-columns: 70px 1fr; }
}
@media (max-width: 700px) {
  table { font-size: .84rem; }
  .cal-dia { min-height: 56px; } .cal-eventos { display: none; } .cal-cuenta { display: inline-block; }
  #avisos-toasts { right: .5rem; left: .5rem; bottom: .5rem; width: auto; }
  .item-fila { grid-template-columns: 80px 1fr; }
  h1 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}