/* Vendedor por Redes — hoja única, sin framework ni build.
   Identidad: fondo claro, violeta comercial, tipografía del sistema. */

:root {
  --bg: #f4f2f8;
  --superficie: #ffffff;
  --borde: #e2dfec;
  --texto: #1c1a24;
  --tenue: #6b6680;

  --marca: #6d3bd4;
  --marca-oscuro: #4a2496;
  --marca-suave: #efe8fd;

  --ok: #157a4d;
  --ok-suave: #e3f5ec;
  --espera: #9a6206;
  --espera-suave: #fdf1dd;
  --error: #b3261e;
  --error-suave: #fce9e8;

  --radio: 12px;
  --sombra: 0 1px 2px rgba(28, 26, 36, .06), 0 8px 24px rgba(28, 26, 36, .06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #131019;
    --superficie: #1d1926;
    --borde: #2f2940;
    --texto: #ece9f4;
    --tenue: #a49dba;
    --marca: #a686f5;
    --marca-oscuro: #8b63ef;
    --marca-suave: #2a2140;
    --ok: #63d19b;       --ok-suave: #16301f;
    --espera: #e8b45f;   --espera-suave: #33260f;
    --error: #f28079;    --error-suave: #351a1a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

/* `hidden` manda siempre: sin esto, un .boton (display: inline-block) lo ignora. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--bg);
  color: var(--texto);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
code { font-size: .85em; background: var(--marca-suave); padding: .1em .4em; border-radius: 5px; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.25rem 0; }

/* --- barra superior --- */
.barra {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.marca { display: flex; align-items: center; gap: .5rem; color: var(--texto); font-weight: 650; }
.marca:hover { text-decoration: none; }
.marca-icono { font-size: 1.35rem; line-height: 1; }
.marca-icono.grande { font-size: 2.5rem; }
.nav { display: flex; gap: .25rem; margin-right: auto; flex-wrap: wrap; }
.nav a {
  padding: .4rem .75rem; border-radius: 999px;
  color: var(--tenue); font-weight: 500; font-size: .92rem;
}
.nav a:hover { background: var(--marca-suave); color: var(--marca); text-decoration: none; }
.nav a.activo { background: var(--marca); color: #fff; }
.sesion { display: flex; align-items: center; gap: .75rem; font-size: .88rem; }
.quien { color: var(--tenue); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salir { color: var(--tenue); }

/* La barra, cuando el menú no entra en una fila (lo decide el script de
   base.html midiendo, no un ancho fijo): se va el nombre de la marca —queda
   el ícono— y el menú pasa a ser un desplegable en el medio, con el nombre de
   la sección actual. Antes se partía en dos filas o se envolvía sola, y la
   cabecera quedaba torcida. */
.menu-compacto { display: none; position: relative; }
.barra.compacta { gap: .5rem; }
.barra.compacta .marca-texto,
.barra.compacta .nav { display: none; }
.barra.compacta .menu-compacto { display: block; margin: 0 auto; }
.menu-compacto summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: var(--marca); color: #fff; font-weight: 600; font-size: .92rem;
}
.menu-compacto summary::-webkit-details-marker { display: none; }
.menu-compacto .flecha { font-size: .75rem; transition: transform .15s ease; }
.menu-compacto[open] .flecha { transform: rotate(180deg); }
.menu-compacto-lista {
  position: absolute; top: calc(100% + .45rem); left: 50%; transform: translateX(-50%);
  min-width: 210px; z-index: 20;
  display: flex; flex-direction: column; padding: .35rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.menu-compacto-lista a {
  padding: .65rem .9rem; border-radius: 8px; color: var(--texto); font-weight: 500;
}
.menu-compacto-lista a:hover { background: var(--marca-suave); text-decoration: none; }
.menu-compacto-lista a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 650; }
/* En un teléfono sobra también el nombre de quien entró: "Salir" es la acción,
   y con el desplegable en el medio, un nombre largo lo empujaría. */
@media (max-width: 560px) {
  .quien { display: none; }
}

/* --- estructura --- */
.contenido { max-width: 1040px; margin: 0 auto; padding: 1.5rem 16px 4rem; }
.encabezado {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.sub { color: var(--tenue); margin: .2rem 0 0; font-size: .92rem; }
.miga { font-size: .85rem; color: var(--tenue); margin: 0 0 .25rem; }
.tenue { color: var(--tenue); font-size: .85rem; }

.columnas { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 860px) { .columnas { grid-template-columns: 1.25fr 1fr; align-items: start; } }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  box-shadow: var(--sombra);
}
.tarjeta.destacada { padding: 0; overflow: hidden; }

/* --- avisos --- */
.aviso {
  padding: .75rem 1rem; border-radius: var(--radio);
  margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent;
}
.aviso-error { background: var(--error-suave); color: var(--error); border-color: currentColor; }
.aviso-ok { background: var(--ok-suave); color: var(--ok); border-color: currentColor; }

/* --- pastillas de estado --- */
.pastilla {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: var(--borde); color: var(--tenue);
}
.pastilla-ok { background: var(--ok-suave); color: var(--ok); }
.pastilla-espera { background: var(--espera-suave); color: var(--espera); }
.pastilla-error { background: var(--error-suave); color: var(--error); }

/* --- botones --- */
.boton {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font: inherit; font-size: .92rem; font-weight: 550; cursor: pointer;
  transition: filter .12s ease, background .12s ease;
}
.boton:hover { filter: brightness(.97); text-decoration: none; }
.boton:disabled { opacity: .55; cursor: progress; }
.boton-principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton-principal:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); filter: none; }
.boton-suave { background: var(--marca-suave); border-color: transparent; color: var(--marca); }
.boton-peligro { background: transparent; border-color: var(--error); color: var(--error); }
.boton-chico { padding: .3rem .7rem; font-size: .82rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* --- formularios --- */
.formulario { display: flex; flex-direction: column; gap: .3rem; }
.formulario label { font-size: .85rem; font-weight: 600; margin-top: .65rem; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; font-size: 16px; /* 16px evita el zoom automático en iOS */
  padding: .6rem .7rem; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--bg); color: var(--texto);
  width: 100%;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: 2px solid var(--marca); outline-offset: 1px; border-color: transparent;
}
.formulario textarea { resize: vertical; }
.fila-doble { display: grid; grid-template-columns: 1fr; gap: .3rem; }
@media (min-width: 560px) { .fila-doble { grid-template-columns: 1fr 1fr; gap: .9rem; } }

/* --- tablas --- */
.tabla {
  width: 100%; border-collapse: collapse;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra);
}
.tabla th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tenue);
  padding: .7rem 1rem; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--marca-suave); }
.acciones-fila { text-align: right; white-space: nowrap; }

/* Angostar en dos pasos en vez de saltar directo a tarjetas: una tabla de seis
   columnas no entra en un panel de 700px, pero colapsarla entera ahí
   desperdicia media pantalla. Primero se esconde lo secundario (el RUC vive en
   el detalle), y recién abajo de 620px se pasa a tarjetas. */
@media (max-width: 900px) {
  .tabla .col-secundaria { display: none; }
}
@media (max-width: 620px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-bottom: 1px solid var(--borde); padding: .75rem 0; }
  .tabla td { border: 0; padding: .2rem 1rem; }
  .tabla td:empty { display: none; }
  .acciones-fila { text-align: left; padding-top: .6rem; }
}

.vacio {
  text-align: center; padding: 3rem 1rem; color: var(--tenue);
  background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio);
}

/* --- pasos de la pantalla de inicio --- */
.paso { display: flex; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--borde); }
.paso:last-child { border-bottom: 0; }
.paso-futuro { opacity: .5; }
.paso-numero {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca);
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.paso-hecho { background: var(--ok-suave); color: var(--ok); }
.paso-hecho::after { content: "✓"; }
.paso-hecho { font-size: 0; }
.paso-hecho::after { font-size: 1rem; }
.paso-cuerpo h2 { margin-bottom: .25rem; }
.paso-cuerpo p { margin: 0 0 .75rem; color: var(--tenue); font-size: .92rem; }

/* --- QR --- */
.qr-caja {
  display: grid; place-items: center; min-height: 300px;
  background: #fff;             /* el QR necesita fondo blanco real para escanear */
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem;
}
.qr-caja img { width: 100%; max-width: 280px; height: auto; display: block; image-rendering: pixelated; }
.qr-esperando { color: #6b6680; font-size: .92rem; text-align: center; margin: 0; }
.qr-ok { color: #157a4d; font-weight: 600; text-align: center; margin: 0; }

.instrucciones ol { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .92rem; }
.instrucciones li { margin-bottom: .4rem; }
.nota { font-size: .85rem; color: var(--tenue); margin: 1rem 0 0; }

.datos { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0 0 1rem; font-size: .9rem; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }

/* --- login --- */
.pantalla-login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.tarjeta-login {
  width: 100%; max-width: 380px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px; padding: 2rem; box-shadow: var(--sombra);
}
.login-marca { text-align: center; margin-bottom: 1.5rem; }
.login-marca h1 { font-size: 1.35rem; margin: .5rem 0 0; }
.tarjeta-login .boton { margin-top: 1.25rem; width: 100%; }

/* --- modal --- */
.modal {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  padding: 1.5rem; width: min(520px, calc(100vw - 32px)); box-shadow: var(--sombra);
}
.modal::backdrop { background: rgba(28, 26, 36, .5); }
.modal .acciones { justify-content: flex-end; margin-top: 1.5rem; }

/* --- bandeja de conversaciones --- */
/* Dos formas de mostrarla según el ancho, y el corte (640px) coincide con el
   ANGOSTO del script de la página:
   - ancho: lista a la izquierda y chat a la derecha, los dos a la vista;
   - angosto: uno por vez, como en WhatsApp. Se ve la lista; tocar un contacto
     "entra" al chat, que ocupa la pantalla, y el botón ← (o el atrás del
     teléfono) vuelve a la lista. */
/* `minmax(0, 1fr)` y no `1fr`: `1fr` es en realidad `minmax(auto, 1fr)`, y el
   ancho mínimo de un item con texto largo sin cortes —un LID como
   "197207902961917@lid · número privado"— estiraba la columna más allá de la
   pantalla. Medido: 379px de columna dentro de 343px de bandeja. */
.bandeja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bandeja > * { min-width: 0; }

/* La página de conversaciones NO scrollea: ocupa exactamente la ventana, y
   cada panel —la lista y el chat— tiene su propio scroll, como cualquier app
   de mensajería. Con scroll de página, bajar por la lista se llevaba el chat
   (y el cuadro de escribir) fuera de la vista.
   Es una cadena de alturas: la ventana → body (columna flex) → .contenido
   (lo que queda debajo de la barra) → .bandeja (lo que queda debajo del
   título y del cartel de modo prueba) → la lista y el chat. Cada eslabón
   necesita `min-height: 0`: sin eso un hijo flex/grid no se achica por
   debajo de su contenido y el scroll interno nunca aparece.
   `--alto-ventana` lo pone el script con el alto VISIBLE (visualViewport):
   en el celular se achica al abrir el teclado y el cuadro de escribir queda
   arriba del teclado. Sin script, 100dvh. */
body:has(.bandeja) {
  height: var(--alto-ventana, 100dvh);
  display: flex; flex-direction: column; overflow: hidden;
}
body:has(.bandeja) > .barra { flex: none; }
.contenido:has(.bandeja) {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; flex-direction: column;
  padding-bottom: 1rem;
}
.contenido:has(.bandeja) > * { flex: none; }
.contenido > .bandeja {
  flex: 1 1 auto; min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}
.bandeja > .lista, .bandeja > .hilo { min-height: 0; height: 100%; }
.centrado { text-align: center; padding: 2rem 1rem; }
.chico { font-size: .78rem; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lista {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
  overflow-y: auto; overscroll-behavior: contain;
}
.fila-chat {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--borde);
  background: transparent; color: var(--texto); font: inherit;
}
.fila-chat:last-child { border-bottom: 0; }
.fila-chat:hover { background: var(--marca-suave); }
.fila-chat.activa { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
.fila-arriba { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* El alto lo da la cadena de arriba; acá solo se reparte: cabecera y cuadro
   de escribir fijos, y los mensajes se llevan el resto con su scroll. */
.hilo { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.hilo > .centrado { margin: auto; }
.hilo-cabecera {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--borde);
}
.hilo-quien { flex: 1 1 auto; min-width: 0; }
.hilo-quien b, .hilo-quien div { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo-acciones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.boton-atras {
  display: none;  /* solo en angosto */
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: 0; background: var(--marca-suave); color: var(--marca);
  font-size: 1.15rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.mensajes {
  flex: 1 1 auto;
  /* `min-height: 0` es imprescindible: sin eso un hijo flex no se encoge por
     debajo de su contenido y el `overflow` nunca entra en juego.
     Y NADA de max-height acá: con el alto tope puesto, el sobrante del
     min-height de la tarjeta no lo puede absorber nadie y queda como un hueco
     muerto debajo del cuadro de escritura. */
  min-height: 0;
  overflow-y: auto; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.burbuja {
  max-width: 80%; padding: .55rem .8rem; border-radius: 14px;
  font-size: .92rem; overflow-wrap: anywhere;
}
.burbuja.entrante { align-self: flex-start; background: var(--bg); border: 1px solid var(--borde); }
.burbuja.saliente { align-self: flex-end; background: var(--marca); color: #fff; }
.burbuja.ignorada { opacity: .5; font-style: italic; }
.burbuja .marca { display: block; font-size: .7rem; opacity: .7; margin-top: .25rem; }
.adjunto { display: block; margin: -.2rem -.45rem .35rem; }
.adjunto img {
  display: block; max-width: min(260px, 100%); max-height: 320px;
  border-radius: 10px; background: var(--marca-suave);
  /* Reserva un alto mientras carga: sin eso cada foto que llega empuja el
     chat y el scroll salta. */
  min-height: 120px; min-width: 120px; object-fit: cover;
}

.escribir { display: flex; gap: .6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--borde); }
.escribir input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: .6rem .7rem;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--bg); color: var(--texto);
}
.escribir input:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: transparent; }

/* ancho: los dos a la vista. El corte es "¿entra un chat legible al lado de
   la lista?": 640px deja ~360px de chat con una lista de 260px. Con el corte en
   860px, una ventana de escritorio angosta (o el panel lateral de un editor)
   mostraba una sola cosa por vez y la lista "desaparecía" al abrir un chat. */
@media (min-width: 640px) {
  .bandeja { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (min-width: 860px) {
  .bandeja { grid-template-columns: 320px minmax(0, 1fr); }
}

/* angosto (teléfono): uno por vez */
@media (max-width: 639px) {
  .bandeja .hilo { display: none; }
  .bandeja.viendo-chat .lista { display: none; }
  .bandeja.viendo-chat .hilo { display: flex; }
  /* En el chat, el título de la página es espacio robado a los mensajes. */
  .contenido:has(.bandeja.viendo-chat) .encabezado-bandeja { display: none; }
  .contenido:has(.bandeja.viendo-chat) { padding-top: .75rem; padding-bottom: .75rem; }
  .boton-atras { display: grid; place-items: center; }
  /* Si los botones no entran al lado del nombre, bajan a una segunda fila en
     vez de empujar el chat fuera de la pantalla. */
  .hilo-cabecera { padding: .6rem .75rem; gap: .5rem; flex-wrap: wrap; }
  .hilo-quien { flex: 1 1 9rem; }
  .hilo-acciones { margin-left: auto; }
  .mensajes { padding: .9rem .75rem; }
  .burbuja { max-width: 88%; }
  .escribir { padding: .6rem .75rem; }
}

/* --- panel de servicios --- */
.tarjetas-salud {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem; margin-bottom: 1.25rem;
}
.tarjeta-salud {
  display: flex; align-items: center; gap: .7rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .85rem 1rem; box-shadow: var(--sombra);
}
.punto {
  flex: 0 0 auto; width: .65rem; height: .65rem; border-radius: 999px;
  background: var(--tenue);
}
.tarjeta-salud.sano  .punto { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-suave); }
.tarjeta-salud.caido .punto { background: var(--error); box-shadow: 0 0 0 3px var(--error-suave); }

.registro {
  margin: 0; padding: 1rem; border-radius: 9px;
  background: #14121c; color: #d6d2e4;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  max-height: 380px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lista-simple { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.lista-simple li { margin-bottom: .25rem; }

/* --- confirmación propia (no confirm() nativo) --- */
.modal-confirmar { width: min(420px, calc(100vw - 32px)); }
.confirmar-texto { margin: 0 0 .5rem; font-size: .95rem; }
.tarjeta-salud.arrancando .punto {
  background: var(--espera); box-shadow: 0 0 0 3px var(--espera-suave);
  animation: latido 1s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: .35; } }
.boton:disabled { cursor: not-allowed; }

/* --- enlace de acceso, para copiar --- */
.enlace-copiable {
  width: 100%; font: inherit; font-size: .85rem;
  font-family: ui-monospace, Consolas, monospace;
  padding: .6rem .7rem; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--bg); color: var(--texto);
}

/* --- modo prueba --- */
.interruptor {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; font-weight: 600; cursor: pointer; margin-top: .65rem;
}
.interruptor input { width: auto; flex: 0 0 auto; }
.interruptor input:disabled + span { color: var(--tenue); }
/* Que se vea distinto de un aviso común: significa que el sistema NO está
   atendiendo normalmente, y dejarlo prendido sin darse cuenta es el error
   más caro que se puede cometer acá. */
.aviso-prueba {
  background: var(--espera-suave); color: var(--espera);
  border: 1px solid currentColor;
}
.aviso-prueba a { color: inherit; text-decoration: underline; }

/* --- el vendedor: lo que sabe --- */
.fichas { list-style: none; margin: .4rem 0 0; padding: 0; }
.fichas li {
  display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid var(--borde); font-size: .92rem;
}
.fichas li > div { min-width: 0; overflow-wrap: anywhere; }
.fichas li:last-child { border-bottom: 0; }
#avisos .interruptor { align-items: flex-start; font-weight: 400; }
#avisos .interruptor input { margin-top: .25rem; }
.pila { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.vacio {
  margin: .75rem 0 0; padding: .8rem 1rem; border-radius: 9px;
  background: var(--marca-suave); font-size: .9rem;
}
/* Enseñar va arriba y aparte: es lo que más se hace en esta pantalla. Tema
   arriba y contenido abajo en cualquier ancho: se lee como una ficha, título y
   texto, igual que como queda guardada. */
.ensenar { margin-bottom: 1.25rem; }
.form-ensenar { display: grid; grid-template-columns: 1fr; gap: .3rem; }
.form-ensenar .boton { justify-self: start; margin-top: .6rem; }
.form-ensenar > div { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.cuenta {
  display: inline-block; min-width: 1.5em; margin-left: .35rem; padding: 0 .45em;
  border-radius: 999px; background: var(--marca-suave); color: var(--marca);
  font-size: .78rem; font-weight: 650; text-align: center;
}
.botones-ficha { display: flex; gap: .35rem; flex: 0 0 auto; }
.fichas li.editando { display: block; }
.editar-ficha label:first-child { margin-top: 0; }
.reglas { margin-top: .9rem; border-top: 1px solid var(--borde); padding-top: .75rem; }
.reglas > summary { cursor: pointer; font-weight: 650; font-size: .95rem; }
.reglas ol { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.reglas li { margin-bottom: .55rem; }
.reglas li .tenue { font-size: .86rem; }
/* "No sabe algo" decide si el vendedor aprende solo: va destacado. */
.aprende {
  padding: .1rem .85rem .75rem; margin-bottom: .5rem; border-radius: 10px;
  background: var(--ok-suave); border: 1px solid var(--ok);
}
.aprende.apagado { background: var(--espera-suave); border-color: var(--espera); }
.aprende .interruptor { align-items: flex-start; font-weight: 400; }
.aprende .interruptor input { margin-top: .25rem; }
.aprende .pastilla { margin-left: .3rem; vertical-align: 1px; }

/* --- gasto de IA (Servicios) --- */
.costos { margin-bottom: 1.25rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cifras > div { display: flex; flex-direction: column; padding: .7rem .9rem; border-radius: 10px; background: var(--bg); }
.cifras b { font-size: 1.35rem; letter-spacing: -.01em; }
.costos .tabla { box-shadow: none; }

/* --- catálogo --- */
.titulo-seccion { margin: 0 0 .75rem; }
.fila-doble .campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.productos {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.producto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* La foto va encerrada en su caja: en Safari (iPhone), una foto vertical
   dentro de una caja con aspect-ratio la agrandaba, se desbordaba hacia abajo
   y tapaba el nombre y el precio. Cuadrada, como en Instagram: sirve para
   cualquier producto y recorta poco una foto vertical. */
.producto-foto {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--marca-suave);
  display: grid; place-items: center; font-size: 2.5rem;
}
.producto-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.producto-datos { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; overflow-wrap: anywhere; }
.producto-precio { font-weight: 650; color: var(--marca); }
.producto-pie { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.producto .botones-ficha { margin-top: .4rem; }
/* La fila precio/stock es un div hijo del formulario de arriba, pero es una
   grilla: sin esto la regla de columna de `.form-ensenar > div` la pisa. */
.form-ensenar > .fila-doble { display: grid; }
/* Imagen de algo aprendido (tabla de medidas, menú) y lo que se leyó. */
.miniatura img {
  display: block; max-width: 160px; max-height: 120px; margin-top: .4rem;
  border-radius: 8px; border: 1px solid var(--borde); object-fit: cover;
}
.leido pre {
  white-space: pre-wrap; font: inherit; font-size: .82rem; margin: .3rem 0 0;
  padding: .5rem .6rem; border-radius: 8px; background: var(--bg);
}
.como-lo-ve { font-style: italic; }
.ojo {
  margin-left: auto; border: 0; background: none; padding: .15rem .35rem;
  font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 6px; opacity: .65;
}
.ojo:hover, .ojo[aria-expanded="true"] { opacity: 1; background: var(--borde); }
.ojo-espera { opacity: .35; }

/* --- la base del negocio: qué importa de cada producto --- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--bg); font-size: .88rem; font-weight: 500; cursor: pointer;
}
.chip input { width: auto; margin: 0; accent-color: var(--marca); }
.chip:has(input:checked) { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); }
.agregar-campo { display: flex; gap: .4rem; align-items: center; }
.agregar-campo input { flex: 1 1 auto; min-width: 0; }
.falta-base {
  background: var(--espera-suave); border: 1px solid var(--espera);
  margin-bottom: 1.25rem;
}
.falta-base h2 { color: var(--espera); }
.fichas li.base { background: var(--marca-suave); margin: 0 -.6rem; padding: .7rem .6rem; border-radius: 9px; border-bottom: 0; }
.fichas li.base + li:not(.base) { margin-top: .4rem; }
.paso-campos[hidden] { display: none; }

/* --- sus indicaciones --- */
.regla-fila { display: flex; gap: .75rem; justify-content: space-between; align-items: flex-start; }
.regla-fila > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.regla + .regla { margin-top: .55rem; }
/* Editar una indicación puede romper cómo atiende: se ve como advertencia. */
.aviso-cuidado {
  background: var(--espera-suave); color: var(--espera);
  border: 1px solid currentColor; font-size: .86rem;
}

/* --- páginas legales --- */
.legal { max-width: 720px; line-height: 1.55; }
.legal h2 { margin-top: 1.5rem; }

/* --- Instagram: elegir qué importar --- */
.encabezado-seccion { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.pestanas { display: flex; gap: .3rem; flex-wrap: wrap; }
.pestana { border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; }
.pestana.activa { background: var(--marca-suave); border-color: var(--marca); color: var(--marca); font-weight: 600; }
.barra-eleccion { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: .75rem 0; }
.barra-eleccion .interruptor { margin: 0; }
.publicacion .producto-foto { cursor: pointer; }
.publicacion .elegir { position: absolute; top: .6rem; left: .6rem; width: 1.4rem; height: 1.4rem; accent-color: var(--marca); z-index: 1; }
.publicacion:has(.elegir:checked) { outline: 2px solid var(--marca); }

/* Tarjetas chicas para ver muchas publicaciones a la vez; la foto, en grande al tocarla. */
.grilla-publicaciones { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr)); gap: .75rem; }
.grilla-publicaciones .producto-datos { padding: .55rem .6rem .7rem; gap: .15rem; font-size: .84rem; }
.grilla-publicaciones .producto-datos label { margin: .3rem 0 0; font-size: .75rem; }
.grilla-publicaciones input, .grilla-publicaciones textarea { padding: .35rem .45rem; font-size: .84rem; }
.grilla-publicaciones .producto-foto img { cursor: zoom-in; }
.grilla-publicaciones .leido pre { max-height: 9rem; overflow: auto; }
.foto-grande { max-width: min(96vw, 900px); max-height: 96vh; padding: .75rem; border: 0; border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); cursor: zoom-out; }
.foto-grande::backdrop { background: rgba(0, 0, 0, .75); }
.foto-grande img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; object-fit: contain; border-radius: 8px; }
.foto-grande p { white-space: pre-wrap; margin: .6rem 0 .3rem; max-height: 14vh; overflow: auto; }