/* ===========================================================================
   PANEL DE LEXY — hoja de estilo
   ===========================================================================
   La forma es la de un panel de gestión: barra lateral fija con el menú
   agrupado por secciones, cabecera con el nombre y el estado, y el contenido en
   fichas. Se eligió después de ver un panel comercial que funciona bien (Bizee),
   porque una fila de pestañas se queda corta en cuanto hay más de cuatro sitios
   a donde ir — y aquí ya hay siete.

   La paleta es la de la marca, la misma de las páginas de acuerdos del sitio. El
   acento es azul, no naranja: si el panel y el sitio no se parecen, el panel
   parece de otra empresa.

   Sin librerías. Una hoja que se lee entera en cinco minutos vale más que un
   framework que hay que reinstalar dentro de tres años.
   ========================================================================= */

:root {
  --azul:   #0A578B;
  --azul2:  #0E6AB2;
  --turq:   #45BFC7;
  --rojo:   #E20842;
  --tinta:  #2D3748;
  --gris:   #4A5568;
  --gris2:  #718096;
  --linea:  #E3E8EF;
  --fondo:  #F6F7F9;
  --verde:  #1E7A44;
  --ambar:  #B7791F;
  --radio:  12px;
  --lateral-ancho: 272px;
}

* { box-sizing: border-box; }

/* El atributo `hidden` vale display:none, pero lo pone la hoja del navegador y
   cualquier regla propia con `display` le gana. Pasó el 23/09/2026: .entrar
   tenía display:grid y la pantalla de entrada no se quitaba nunca. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================== entrar === */
.entrar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #0A578B 0%, #0E6AB2 55%, #2E9BC4 100%);
}

.tarjeta-entrar {
  width: min(100%, 380px);
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 18px 40px rgba(10, 87, 139, .28);
}

.marca { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--azul); }
.marca-sub { margin: 2px 0 26px; color: var(--gris); font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 6px; }

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  margin-bottom: 16px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--turq);
  outline-offset: 1px;
  border-color: var(--turq);
}

.boton-principal {
  width: 100%; padding: 12px; border: 0; border-radius: 10px;
  background: var(--azul); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.boton-principal:hover { background: var(--azul2); }
.boton-principal:disabled { opacity: .6; cursor: wait; }

.error {
  margin: 14px 0 0; padding: 10px 12px;
  background: #FDECEF; border-left: 3px solid var(--rojo); border-radius: 6px;
  color: #9B0B2E; font-size: 14px;
}

/* ============================================================= armazón === */
.armazon { display: flex; min-height: 100dvh; }

/* ------------------------------------------------------ barra lateral --- */
.lateral {
  width: var(--lateral-ancho);
  flex: 0 0 var(--lateral-ancho);
  background: #fff;
  border-right: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

.lateral-marca { padding: 20px 22px 14px; border-bottom: 1px solid var(--linea); }
.logotipo { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--azul); line-height: 1.1; }
.logotipo-pie { font-size: 12px; color: var(--gris2); letter-spacing: .08em; text-transform: uppercase; }

.tarjeta-persona {
  display: flex; gap: 12px; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--linea); background: #FBFCFD;
}

.inicial {
  flex: 0 0 42px; height: 42px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}

.persona-datos { display: flex; flex-direction: column; min-width: 0; }
.persona-datos strong { font-size: 14px; line-height: 1.3; }
.persona-datos span { font-size: 12px; color: var(--gris2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-ref { font-family: ui-monospace, Consolas, monospace; font-size: 10px !important; opacity: .7; }

.menu { flex: 1; padding: 14px 12px; }
.menu-seccion {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gris2); padding: 16px 10px 6px;
}
.menu-seccion:first-child { padding-top: 4px; }

.menu-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--gris); text-align: left;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.menu-item:hover { background: var(--fondo); color: var(--tinta); }
.menu-item.activo { background: #EAF3FA; color: var(--azul); }
.menu-item .icono { flex: 0 0 18px; display: grid; place-items: center; opacity: .85; }
.menu-item .cuenta {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--azul); color: #fff; border-radius: 999px; padding: 1px 7px;
}

.salir {
  margin: 12px 18px 20px; padding: 10px; border: 1px solid var(--linea);
  background: #fff; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--gris); cursor: pointer;
}
.salir:hover { border-color: var(--rojo); color: var(--rojo); }

/* -------------------------------------------------------- lo principal -- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: #fff; border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 5;
}

.cabecera-empresa { font-weight: 700; letter-spacing: .01em; }
.cabecera-hueco { flex: 1; }
.cabecera-enlace { color: var(--azul); font-size: 14px; font-weight: 600; text-decoration: none; }
.cabecera-enlace:hover { text-decoration: underline; }

.hamburguesa { display: none; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--gris); }

.insignia {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E7F6EC; color: var(--verde); border: 1px solid #BFE6CC;
  border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700;
}
.insignia.mal { background: #FDECEF; color: #9B0B2E; border-color: #F7C6D1; }

.contenido { padding: 26px; max-width: 1040px; }

/* ============================================================ piezas ==== */
h2 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 0 0 6px; }
.explicacion { color: var(--gris); font-size: 14px; margin: 0 0 22px; max-width: 70ch; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 26px; }

.dato {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px;
}
.dato .numero { font-size: 28px; font-weight: 800; color: var(--azul); line-height: 1.1; }
.dato .rotulo { font-size: 13px; color: var(--gris2); }
.dato.alerta .numero { color: var(--rojo); }

.ficha {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 17px 19px; margin-bottom: 12px;
}
.ficha-datos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--gris); margin-bottom: 10px; }

.etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--fondo); color: var(--gris); border: 1px solid var(--linea);
}
.etiqueta.publicado { background: #E7F6EC; color: var(--verde); border-color: #BFE6CC; }
.etiqueta.revision  { background: #FEF5E7; color: var(--ambar); border-color: #F5DEB3; }
.etiqueta.borrador  { background: var(--fondo); }
.etiqueta.roja      { background: #FDECEF; color: #9B0B2E; border-color: #F7C6D1; }
.etiqueta.ambar     { background: #FEF5E7; color: var(--ambar); border-color: #F5DEB3; }
.etiqueta.verde     { background: #E7F6EC; color: var(--verde); border-color: #BFE6CC; }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

.boton {
  border: 1px solid var(--azul); background: #fff; color: var(--azul);
  font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px;
  border-radius: 8px; cursor: pointer;
}
.boton:hover { background: #F0F7FC; }
.boton.lleno { background: var(--azul); color: #fff; }
.boton.lleno:hover { background: var(--azul2); }
.boton.peligro { border-color: var(--rojo); color: var(--rojo); }
.boton.peligro:hover { background: #FDECEF; }
.boton.tenue { border-color: var(--linea); color: var(--gris); }
.boton.tenue:hover { background: var(--fondo); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton.pequeno { padding: 5px 11px; font-size: 13px; }

.vacio {
  background: #fff; border: 1px dashed var(--linea); border-radius: var(--radio);
  padding: 38px 22px; text-align: center; color: var(--gris);
}
.cargando { color: var(--gris2); font-size: 14px; padding: 22px 0; }

.formulario {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 19px; margin-bottom: 24px;
}
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pista { font-size: 12px; color: var(--gris2); margin: -10px 0 16px; }

.migas { font-size: 13px; color: var(--gris2); margin-bottom: 14px; }
.migas button { border: 0; background: none; font: inherit; color: var(--azul); font-weight: 600; cursor: pointer; padding: 0; }
.migas button:hover { text-decoration: underline; }

.subpestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin: 18px 0 20px; overflow-x: auto; }
.subpestana {
  border: 0; background: none; font: inherit; font-weight: 600; color: var(--gris2);
  padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap;
}
.subpestana.activa { color: var(--azul); border-bottom-color: var(--azul); }

.huella {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; word-break: break-all; color: var(--gris);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 8px; padding: 9px 11px;
}

.respuestas { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; }
.respuesta { display: grid; grid-template-columns: minmax(180px, 38%) 1fr; border-bottom: 1px solid var(--linea); }
.respuesta:last-child { border-bottom: 0; }
.respuesta dt { padding: 10px 14px; background: #FBFCFD; font-size: 13px; color: var(--gris); font-weight: 600; }
.respuesta dd { padding: 10px 14px; margin: 0; font-size: 14px; }

/* ============================================================== aviso === */
.aviso {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); z-index: 50;
  max-width: min(92vw, 560px);
}
.aviso.mal { background: #9B0B2E; }

/* ============================================================ diálogo === */
.velo {
  position: fixed; inset: 0; background: rgba(45, 55, 72, .55);
  display: grid; place-items: center; padding: 20px; z-index: 60;
}
.dialogo {
  background: #fff; border-radius: 14px; padding: 24px; width: min(100%, 520px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3); max-height: 88dvh; overflow-y: auto;
}
.dialogo-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* =========================================================== pantalla === */
.lateral-velo { position: fixed; inset: 0; background: rgba(45, 55, 72, .45); z-index: 8; }

@media (max-width: 860px) {
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 9;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  }
  .lateral.abierta { transform: translateX(0); }
  .hamburguesa { display: block; }
  .contenido { padding: 18px 16px 60px; }
  .cabecera { padding: 12px 16px; gap: 10px; }
  .cabecera-enlace { display: none; }
  .dos { grid-template-columns: 1fr; }
  .respuesta { grid-template-columns: 1fr; }
  .respuesta dt { padding-bottom: 2px; }
}

.con-aire { margin-top: 20px; }

/* =========================================================================
   VYXTA — catálogo y tablero (24 de septiembre de 2026)
   =========================================================================
   Se añade al mismo sistema, no se hace otro: mismas variables, mismos
   bordes y el mismo radio. Un panel que parece dos panel es un panel roto.

   El bloque de datos de un producto usa `grid` con `auto-fit` en vez de
   flex: en el teléfono caen en una columna y en el escritorio en cuatro,
   sin una sola consulta de medios. */

.barra-busqueda {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px;
}
.barra-busqueda input[type="search"] {
  flex: 1 1 260px; min-width: 0;
  font: inherit; font-size: 15px; padding: 10px 13px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
}
.barra-busqueda select {
  flex: 0 1 240px; font: inherit; font-size: 14px; padding: 10px 11px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: #fff;
  color: var(--gris);
}
.barra-busqueda input:focus, .barra-busqueda select:focus {
  outline: 2px solid var(--azul2); outline-offset: 1px;
}

.ficha-cabeza {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 12px;
}
.ficha-sub { font-size: 13px; color: var(--gris2); margin-top: 3px; }
.ficha-precio { text-align: right; white-space: nowrap; }
.ficha-precio strong { display: block; font-size: 19px; color: var(--azul); }
.ficha-precio small { font-size: 11px; color: var(--gris2); }

/* Se sustituye el flex de arriba por una rejilla SOLO dentro del catálogo:
   ocho campos en fila se vuelven ilegibles en cuanto uno es largo. */
.ficha .ficha-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px; margin-bottom: 0;
}
.campo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.campo-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gris2); font-weight: 700;
}
.campo-valor { font-size: 14px; color: var(--tinta); overflow-wrap: anywhere; }

/* Un producto sin existencia se ve, pero se ve apagado: esconderlo haría
   pensar que no existe, y lo que pasa es que hoy no se vende. */
.ficha.apagada { opacity: .62; }
.ficha-aviso { margin: 10px 0 0; font-size: 13px; color: var(--ambar); font-weight: 600; }

.tabla {
  width: 100%; border-collapse: collapse; margin: 10px 0 22px;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; font-size: 14px;
}
.tabla th, .tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th {
  background: var(--fondo); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gris2);
}
.tabla tr:last-child td { border-bottom: 0; }

/* En el teléfono una tabla de siete columnas no cabe. Se deja desplazar en
   horizontal en vez de encogerla hasta que no se lea. */
@media (max-width: 720px) {
  .tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

.paginacion { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }

/* ---------------------------------------------------------------------------
   El motivo de un rechazo o un retiro
   ---------------------------------------------------------------------------
   Va dentro de la ficha y con color propio, porque es lo que hay que leer antes
   que nada cuando una empresa volvio a borrador. Ambar para «corrija y vuelva a
   mandarla», rojo para «esta fuera de circulacion»: son dos situaciones
   distintas y la segunda no se arregla escribiendo.                          */
.motivo {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #FFFAF0; border-left: 3px solid var(--ambar);
  font-size: 14px; line-height: 1.5; color: var(--gris);
}
.motivo strong { color: var(--ambar); }
.motivo-retiro { background: #FDECEF; border-left-color: var(--rojo); }
.motivo-retiro strong { color: var(--rojo); }

/* El area del motivo en el dialogo: ocupa el ancho y no se puede estirar a lo
   ancho (romperia la caja del dialogo en el movil). */
#dialogo-cuerpo textarea { width: 100%; resize: vertical; margin-top: 4px; }

/* ¿Olvidó su contraseña? (03-10-2026) y el enlace al ERP en el menú */
.enlace-acceso { display: block; margin: 14px auto 0; background: none; border: none; color: var(--azul);
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
a.menu-item { display: flex; text-decoration: none; }

/* La casilla de autorizacion de quien entra por invitacion. El texto es largo y
   legal: se alinea arriba y no se deja que el input se estire al ancho. */
.casilla { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.45; color: var(--gris); margin: 6px 0 12px; }
.casilla input { width: auto; margin-top: 3px; flex: none; }
.casilla a { color: var(--azul); }


/* ---------------------------------------------------------------------------
   Crear cuenta, intermediarios y la firma del acuerdo (04-10-2026)
   --------------------------------------------------------------------------- */
/* El formulario de registro lleva el texto de autorizacion, que es largo: la
   tarjeta de acceso normal se queda estrecha y lo vuelve una columna ilegible. */
/* La base fija el ancho con `width: min(100%, 380px)`, no con max-width: por eso
   un max-width aqui no hacia nada (medido el 04-10: seguia en 380). */
.tarjeta-ancha { width: min(100%, 520px); }
.tarjeta-ancha select { width: 100%; }

/* Los tres estados de quien intermedia: espera a Lexy, le toca a el, o listo. */
.aviso-estado {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--tinta);
  background: #EAF3FA; border-left: 4px solid var(--azul);
}
.aviso-estado.accion { background: #FFFAF0; border-left-color: var(--ambar); }
.aviso-estado.listo  { background: #EEF8F1; border-left-color: var(--verde); }
.aviso-estado .acciones { margin-top: 12px; }

/* El texto que se firma se muestra TAL CUAL, con sus saltos de linea: lo que se
   firma es la huella de ese texto, y no se le pone nada encima. */
.documento-legal {
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
  padding: 18px 20px; font-size: 14.5px; line-height: 1.65; color: var(--tinta);
}
.huella-doc { font-size: 12.5px; color: var(--gris2); margin: 8px 0 18px; overflow-wrap: anywhere; }
.huella-doc code { font-size: 12px; }
.firma-pasos input#f-codigo { max-width: 180px; font-size: 20px; letter-spacing: .25em; text-align: center; }
.explicacion.mal { color: var(--rojo); }

.por-cuenta {
  margin: 8px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #EAF3FA; font-size: 14px; color: var(--gris);
}
.por-cuenta strong { color: var(--azul); }

/* ---------------------------------------------------------------------------
   El cuestionario dentro del panel (cuestionario.js, 04-10-2026)
   --------------------------------------------------------------------------- */
.cq-seccion h3 { margin: 0 0 4px; }
.cq-sub { margin: 0 0 16px; }
.cq-pregunta { margin-bottom: 14px; }
.cq-pregunta .pista { margin: -2px 0 8px; }
.cq-pregunta select, .cq-pregunta textarea, .cq-pregunta input:not([type=checkbox]) { width: 100%; }
.opcional { font-weight: 400; color: var(--gris2); font-size: 12.5px; }
.cq-aviso { margin: 0 0 8px; font-size: 13.5px; }
.cq-pie { position: sticky; bottom: 0; background: var(--fondo); padding: 12px 0 4px; border-top: 1px solid var(--linea); }
.cq-pie .explicacion { margin: 0; }
.cq-completo { color: var(--verde); }
.cq-centro { justify-content: center; }
.ficha .acciones select { width: auto; max-width: 100%; }
.cq-respuestas { margin-top: 12px; }