/* ============================================================
   Consulta de precios — hoja de estilos
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  /* La paleta son CUATRO colores, los que eligió la casa:
       #F5F5F5 gris papel · #F05454 rojo · #30475E azul marino · #121212 negro
     Todo lo demás son tintes de esos cuatro. No hay ámbar, no hay verde:
     "gano" es azul marino y "pierdo" es rojo, que es como se leen los
     colores del logo. */

  /* Neutros */
  --tinta:        #121212;
  --tinta-suave:  #3A4650;
  --tinta-tenue:  #6E7A87;
  --linea:        rgba(48,71,94,.14);
  --linea-suave:  rgba(48,71,94,.08);
  /* "Papel" ya no es blanco opaco: es blanco translúcido, para que todo
     panel que lo use deje ver el fondo difuso de detrás. */
  --papel:        rgba(255,255,255,.72);
  --lienzo:       #F5F5F5;

  /* Marca: el azul manda (botones, títulos, lo activo); el rojo se usa con
     cuentagotas, donde hay que mirar: pierdo, la campana, el menú activo. */
  --marca:        #30475E;
  --marca-hondo:  #121212;
  --marca-medio:  #3F5B77;
  --marca-claro:  #E9EEF3;
  --rojo:         #F05454;
  --rojo-hondo:   #D63E3E;
  --rojo-fondo:   #FDECEC;
  /* Lo editable (las casillas de descuento, DESC VITAL en el Excel). Antes
     era ámbar; ahora un gris azulado, que marca "aquí se escribe" sin meter
     un quinto color. */
  --oro:          #5B7089;
  --oro-fondo:    #EEF2F6;

  /* Semáforo, dentro de la paleta */
  --bien:         #30475E;
  --bien-fondo:   #E9EEF3;
  --mal:          #D63E3E;
  --mal-fondo:    #FDECEC;
  --medio:        #6E7A87;
  --medio-fondo:  #EEF1F4;
  --aparte:       #4C6079;
  --aparte-fondo: #E9EEF3;

  --radio:      20px;
  --radio-min:  12px;
  --sombra:     0 10px 30px rgba(48, 71, 94, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  --sombra-alta:0 24px 54px rgba(18, 18, 18, .22);
  --lateral:    236px;
  --transicion: .18s ease;
}

* { box-sizing: border-box; }

/* El navegador oculta lo que lleva [hidden] con `display:none`, pero esa
   regla suya pierde contra cualquier `display` nuestro: `.rejilla` declara
   `display:grid` y por eso se seguía viendo aunque estuviera "oculta".
   Con esto, [hidden] gana siempre. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* ============================================================
   El cristal
   ------------------------------------------------------------
   La dirección que eligió la casa: paneles de vidrio esmerilado
   (blanco translúcido con desenfoque de lo que hay detrás y un
   reflejo diagonal) sobre un fondo de manchas azul marino y rojo.
   Todo lo que es un panel — tarjetas, filtros, tablas, el lateral —
   comparte `--vidrio-*`; los controles van en píldora.
   ============================================================ */
:root {
  --vidrio:        linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.52) 100%);
  --vidrio-denso:  linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.72) 100%);
  --vidrio-borde:  rgba(255,255,255,.85);
  --vidrio-sombra: 0 10px 30px rgba(48,71,94,.12), inset 0 1px 0 rgba(255,255,255,.9);
  --vidrio-linea:  rgba(48,71,94,.12);   /* separadores dentro del cristal */
  --vidrio-linea-suave: rgba(48,71,94,.07);
  --desenfoque:    blur(18px) saturate(1.2);
  --radio-vidrio:  22px;
  --pildora:       999px;
}

body {
  margin: 0;
  color: var(--tinta);
  font: 400 14px/1.5 'IBM Plex Sans', ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* El fondo: un degradado claro y, fijas detrás de todo, dos manchas
     difusas con los colores del logo. Van en pseudoelementos fijos para
     que no se muevan con el scroll ni pesen en cada panel. */
  background: linear-gradient(180deg, #DDE4EB 0%, #F5F5F5 100%) fixed;
  position: relative;
  min-height: 100vh;
}
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
body::before {
  left: -120px; top: -160px; width: 720px; height: 620px;
  background: radial-gradient(circle, rgba(48,71,94,.5) 0%, rgba(48,71,94,0) 70%);
}
body::after {
  right: -140px; bottom: -220px; width: 760px; height: 640px;
  background: radial-gradient(circle, rgba(240,84,84,.42) 0%, rgba(240,84,84,0) 70%);
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--marca);
}

/* Los precios se comparan de un vistazo si todos los dígitos ocupan lo mismo */
.num, .tarjeta__num, .ficha__precio .valor {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--marca); }

/* ============================================================
   Login
   ============================================================ */
.pantalla-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* La tarjeta de entrada: el mismo cristal, sobre el fondo difuso del body. */
.tarjeta-login {
  width: 100%;
  max-width: 400px;
  background: var(--vidrio-denso);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: 28px;
  padding: 38px 36px 32px;
  box-shadow: 0 24px 64px rgba(48, 71, 94, .22), inset 0 1px 0 rgba(255,255,255,.9);
}

.marca-login { text-align: center; margin-bottom: 26px; }
.marca-login .logo { font-size: 40px; display: block; margin-bottom: 8px; }
.marca-login .logo-img { display: block; width: 210px; max-width: 80%; margin: 0 auto 14px; }
.marca-login h1 { font-size: 21px; margin: 0 0 5px; }
.marca-login p { margin: 0; color: var(--tinta-tenue); font-size: 13px; }

.tarjeta-login label {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
  margin: 16px 0 6px;
}

.tarjeta-login input[type="text"],
.tarjeta-login input[type="password"] {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(48,71,94,.15);
  border-radius: var(--pildora);
  font: inherit;
  font-size: 15px;
  background: rgba(255,255,255,.75);
  color: var(--tinta);
}

.tarjeta-login input:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(48,71,94,.16);
}

.casilla {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  margin-top: 18px !important;
  color: var(--tinta) !important;
}
.casilla input { margin: 0; }

.texto-ayuda { color: var(--tinta-suave); font-size: 13.5px; }
.comando {
  background: var(--marca-hondo);
  color: #E1E5EA;
  padding: 13px 15px;
  border-radius: var(--radio-min);
  font: 12.5px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace;
  overflow-x: auto;
  user-select: all;
}

/* ============================================================
   Estructura: barra lateral + contenido
   ============================================================ */
.disposicion {
  display: flex;
  gap: 4px;
  min-height: 100vh;
  padding: 18px 18px 18px 18px;
  position: relative;
  z-index: 1;
}

/* El lateral es un panel de cristal que flota a la izquierda, con el logo
   arriba en su placa blanca. Lo activo se marca en azul marino sólido; el
   rojo queda para las burbujas que piden atención (Alertas, Avisos). */
.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  border-radius: 26px;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  box-shadow: var(--vidrio-sombra);
  color: var(--tinta-suave);
}

.lateral__marca {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--vidrio-linea);
}
.lateral__logo {
  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(48,71,94,.1);
}
.lateral__logo img { display: block; width: 100%; height: auto; }
.lateral__lema {
  display: block;
  margin-top: 9px;
  padding-left: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* La firma: quién impulsa esto. Discreta, al final del lateral. */
.lateral__firma {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--vidrio-linea);
  font-size: 10px;
  line-height: 1.5;
  color: var(--tinta-tenue);
  letter-spacing: .02em;
}
.lateral__firma strong { color: var(--marca); font-weight: 600; }
.lateral__firma em { font-style: normal; color: var(--rojo); font-weight: 700; }

.menu { padding: 10px 10px; flex: 1; overflow-y: auto; }

/* La barra de scroll del menú: la de Windows es un rectángulo gris que
   rompe el cristal. Se deja una cinta fina y redondeada, casi invisible
   hasta que se pasa el ratón por el menú. */
.menu { scrollbar-width: thin; scrollbar-color: rgba(48, 71, 94, .14) transparent; }
.menu:hover { scrollbar-color: rgba(48, 71, 94, .28) transparent; }
.menu::-webkit-scrollbar { width: 6px; }
.menu::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.menu::-webkit-scrollbar-thumb { background: rgba(48, 71, 94, .14); border-radius: 999px; }
.menu:hover::-webkit-scrollbar-thumb { background: rgba(48, 71, 94, .28); }
.menu::-webkit-scrollbar-thumb:hover { background: rgba(48, 71, 94, .5); }
.menu::-webkit-scrollbar-button { display: none; height: 0; }

/* Y lo mismo en el resto de cajas con scroll propio (tablas, paneles),
   para que ninguna traiga la barra gris. */
.caja-tabla, .caja-matriz, .multi__lista, .buscador__lista, .modal__caja {
  scrollbar-width: thin;
  scrollbar-color: rgba(48, 71, 94, .22) transparent;
}
.caja-tabla::-webkit-scrollbar, .caja-matriz::-webkit-scrollbar,
.multi__lista::-webkit-scrollbar, .buscador__lista::-webkit-scrollbar, .modal__caja::-webkit-scrollbar { width: 8px; height: 8px; }
.caja-tabla::-webkit-scrollbar-track, .caja-matriz::-webkit-scrollbar-track,
.multi__lista::-webkit-scrollbar-track, .buscador__lista::-webkit-scrollbar-track, .modal__caja::-webkit-scrollbar-track { background: transparent; margin: 6px; }
.caja-tabla::-webkit-scrollbar-thumb, .caja-matriz::-webkit-scrollbar-thumb,
.multi__lista::-webkit-scrollbar-thumb, .buscador__lista::-webkit-scrollbar-thumb, .modal__caja::-webkit-scrollbar-thumb {
  background: rgba(48, 71, 94, .22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.caja-tabla::-webkit-scrollbar-thumb:hover, .caja-matriz::-webkit-scrollbar-thumb:hover,
.multi__lista::-webkit-scrollbar-thumb:hover, .buscador__lista::-webkit-scrollbar-thumb:hover, .modal__caja::-webkit-scrollbar-thumb:hover { background-color: rgba(48, 71, 94, .45); }
.caja-tabla::-webkit-scrollbar-button, .caja-matriz::-webkit-scrollbar-button,
.multi__lista::-webkit-scrollbar-button, .buscador__lista::-webkit-scrollbar-button, .modal__caja::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.menu__grupo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta-tenue);
  padding: 14px 12px 6px;
}
.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 7px;
  border-radius: var(--pildora);
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.menu a:hover { background: rgba(255,255,255,.7); color: var(--marca); }
.menu a.activo { background: var(--marca); color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgba(48,71,94,.28); }
/* Cada icono en su círculo, como en la barra flotante de la referencia. */
.menu a .icono {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.9);
  color: var(--marca);
  box-sizing: border-box;
}
.menu a.activo .icono { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff; }
.menu a .cuenta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: rgba(48,71,94,.1);
  color: var(--marca);
  padding: 1px 7px;
  border-radius: 999px;
}
.menu a.activo .cuenta { background: rgba(255,255,255,.22); color: #fff; }

.lateral__pie {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--vidrio-linea);
  font-size: 12px;
}
.lateral__pie .quien { color: var(--marca); font-weight: 600; display: block; }
.lateral__pie .cuando { color: var(--tinta-tenue); font-size: 11px; display: block; margin: 2px 0 9px; }

/* Cuándo entró cada fuente de datos y con qué archivo */
.cargas { margin: 7px 0 9px; display: grid; gap: 3px; }
.carga {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 6px;
  font-size: 10.5px;
  line-height: 1.35;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  cursor: help;
}
.carga__que { color: var(--tinta); font-weight: 600; }
.carga__cuando { color: var(--tinta-tenue); text-align: right; white-space: nowrap; }
.carga__archivo {
  grid-column: 1 / -1;
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pasado el plazo, o sin cargar nunca: que salte a la vista. */
.carga--vieja { background: var(--rojo-fondo); border-color: #F3C9C9; }
.carga--vieja .carga__que,
.carga--vieja .carga__cuando { color: var(--mal); }

.lateral__acciones { display: flex; gap: 6px; }
.lateral__acciones .boton { flex: 1; justify-content: center; padding: 6px 8px; font-size: 12px; }

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

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 10px 0;
}
.cabecera h1 { margin: 0; font-size: 30px; }
.cabecera p { margin: 4px 0 0; color: var(--tinta-suave); font-size: 13.5px; max-width: 76ch; }

.contenido { padding: 16px 10px 44px; }

/* Botón de menú, solo en pantallas chicas */
.abrir-menu { display: none; }

/* ============================================================
   Botones
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--pildora);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion);
}
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton--principal { background: var(--marca); color: #fff; box-shadow: 0 8px 20px rgba(48,71,94,.28); }
.boton--principal:hover:not(:disabled) { background: #121212; }
.boton--ancho { width: 100%; margin-top: 22px; padding: 11px; font-size: 14.5px; }
.boton--tenue { background: rgba(255,255,255,.6); color: var(--marca); border-color: rgba(48,71,94,.15); }
.boton--tenue:hover:not(:disabled) { background: #FFFFFF; border-color: var(--marca); }
.boton--excel { background: var(--rojo); color: #fff; box-shadow: 0 8px 20px rgba(240,84,84,.32); }
.boton--excel:hover:not(:disabled) { background: var(--rojo-hondo); }
.boton--peligro { background: var(--papel); color: var(--mal); border-color: #F3C9C9; }
.boton--peligro:hover:not(:disabled) { background: var(--mal-fondo); }
.boton--min { padding: 5px 10px; font-size: 12px; }

.lateral .boton--tenue {
  background: rgba(255, 255, 255, .6);
  color: var(--marca);
  border-color: rgba(48, 71, 94, .15);
}
.lateral .boton--tenue:hover { background: #fff; border-color: var(--marca); }

/* Los desplegables nativos, con la misma píldora y una flecha propia: sin
   esto cada navegador les pone su cuadro gris. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2330475E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ============================================================
   Avisos
   ============================================================ */
.aviso {
  padding: 12px 16px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid;
}
.aviso--error { background: rgba(253,236,236,.75); border-color: var(--rojo); color: var(--mal); }
.aviso--ok { background: rgba(255,255,255,.62); border-color: var(--marca); color: var(--marca); }
.aviso--info { background: rgba(255,255,255,.62); border-color: rgba(48,71,94,.2); color: var(--marca); }

.nota-pie {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--tinta-tenue);
  max-width: 100ch;
}

/* ============================================================
   Tarjetas de indicadores
   ============================================================ */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.tarjeta {
  display: block;
  position: relative;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-vidrio);
  padding: 18px 20px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--vidrio-sombra);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
/* Sin barrita de color a la izquierda: el color va en el número. */
.tarjeta::before { display: none; }
a.tarjeta:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 16px 36px rgba(48,71,94,.18), inset 0 1px 0 rgba(255,255,255,.9);
}

/* La tarjeta que está filtrando ahora mismo. Se marca a fondo porque es un
   interruptor: hay que ver de un vistazo que la lista de abajo está
   recortada, y que se apaga pulsándola otra vez. */
.tarjeta--activa {
  border-color: var(--marca);
  box-shadow: inset 0 0 0 2px var(--marca), var(--vidrio-sombra);
}
.tarjeta__marca {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--marca);
  background: var(--papel);
  border: 1px solid var(--marca);
  border-radius: 999px;
  padding: 1px 7px;
}
a.tarjeta--activa:hover .tarjeta__marca { background: var(--marca); color: #fff; }
.tarjeta__num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.tarjeta__tit { display: block; font-size: 13px; font-weight: 600; margin-top: 9px; }
.tarjeta__pie {
  display: block;
  font-size: 11.5px;
  color: var(--tinta-tenue);
  margin-top: 3px;
  line-height: 1.4;
}

.tarjeta--bien::before   { background: var(--bien); }
.tarjeta--bien   .tarjeta__num { color: var(--bien); }
.tarjeta--mal::before    { background: var(--mal); }
.tarjeta--mal    .tarjeta__num { color: var(--mal); }
.tarjeta--medio::before  { background: var(--medio); }
.tarjeta--medio  .tarjeta__num { color: var(--medio); }
.tarjeta--aparte::before { background: var(--aparte); }
.tarjeta--aparte .tarjeta__num { color: var(--aparte); }
.tarjeta--gris::before   { background: #8A94A0; }
.tarjeta--marca { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 14px 34px rgba(48,71,94,.35); }
.tarjeta--marca .tarjeta__num { color: #fff; }
.tarjeta--marca .tarjeta__pie { color: rgba(255,255,255,.72); }
.tarjeta--marca .tarjeta__marca { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }

/* ============================================================
   Filtros
   ============================================================ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-vidrio);
  padding: 14px 16px 16px;
  box-shadow: var(--vidrio-sombra);
  margin-bottom: 14px;
  /* El desenfoque hace que cada panel sea una capa aparte, y la tabla de
     abajo, que viene después, se pintaba encima de los desplegables
     abiertos. La barra de filtros entera va por encima de lo que le sigue. */
  position: relative;
  z-index: 30;
}
/* Y un desplegable abierto, por encima de sus vecinos dentro de la barra. */
.multi:has(.multi__panel:not([hidden])), .campo:has(.buscador__lista:not([hidden])) { z-index: 5; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 152px; }
.campo--ancho { flex: 1 1 280px; }
.campo--corto { min-width: 98px; max-width: 116px; }
/* Un dato que se lee en la barra de filtros pero no se edita ahí: va con la
   misma altura que un campo, para que la fila no baile, y como enlace a
   donde sí se cambia. */
.campo__dato {
  display: flex; align-items: center; height: 36px;
  font-size: 13px; font-weight: 600; color: var(--marca);
  text-decoration: none; white-space: nowrap;
}
.campo__dato:hover { text-decoration: underline; }
.campo--acciones { flex-direction: row; gap: 8px; margin-left: auto; align-items: flex-end; }
.campo label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-tenue);
}
.campo input, .campo select {
  padding: 8px 14px;
  border: 1px solid rgba(48,71,94,.15);
  border-radius: var(--pildora);
  font: inherit;
  font-size: 13.5px;
  background: rgba(255,255,255,.7);
  color: var(--tinta);
  max-width: 100%;
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(48,71,94,.14);
  background: #fff;
}
.campo--casilla {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  min-width: auto;
  padding-bottom: 8px;
}
.campo--casilla label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
}

/* --- Desplegable de selección múltiple --- */
.multi { position: relative; min-width: 178px; }
.multi__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: 1px solid rgba(48,71,94,.15);
  border-radius: var(--pildora);
  background: rgba(255,255,255,.7);
  font: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  cursor: pointer;
  text-align: left;
}
.multi__boton:hover { border-color: var(--marca); background: #fff; }
.multi__boton [data-resumen] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi__flecha { color: var(--tinta-tenue); font-size: 11px; flex: none; }
.multi--activo .multi__boton {
  border-color: var(--marca);
  background: var(--marca);
  font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 20px rgba(48,71,94,.28);
}
.multi--activo .multi__flecha { color: rgba(255,255,255,.7); }

.multi__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 340px;
  /* Casi opaco a propósito: un menú que flota sobre una tabla tiene que
     taparla. El desenfoque no vale aquí (dentro de un panel ya
     desenfocado no ve lo que hay detrás), así que se tapa con blanco. */
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(48, 71, 94, .14);
  box-shadow: 0 18px 44px rgba(48, 71, 94, .22);
  border-radius: var(--radio-min);
  box-shadow: var(--sombra-alta);
  padding: 8px;
}
.multi--arriba .multi__panel { top: auto; bottom: calc(100% + 4px); }
.multi__panel[hidden] { display: none; }

.multi__buscar {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  background: #FAFAFA;
  margin-bottom: 6px;
}
.multi__buscar:focus { outline: none; border-color: var(--marca); }

.multi__acciones { display: flex; gap: 6px; margin-bottom: 6px; }
.multi__acciones button {
  flex: 1;
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 7px;
  padding: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
}
.multi__acciones button:hover { background: var(--marca-claro); color: var(--marca); }

.multi__lista { max-height: 240px; overflow-y: auto; }
.multi__opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}
.multi__opcion:hover { background: var(--marca-claro); }
.multi__opcion[hidden] { display: none; }
.multi__opcion input { width: 15px; height: 15px; flex: none; cursor: pointer; accent-color: var(--marca); }
.multi__opcion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi__vacio { font-size: 12px; color: var(--tinta-tenue); padding: 8px; }

/* --- Desplegable con búsqueda --- */
.buscador { position: relative; }
.buscador input { width: 100%; }
.buscador__lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 3px);
  left: 0; right: 0;
  max-height: 268px;
  overflow-y: auto;
  background: rgba(255, 255, 255, .97);   /* flota sobre la tabla: la tapa */
  border: 1px solid rgba(48, 71, 94, .14);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(48, 71, 94, .22);
  padding: 4px;
}
.buscador__lista[hidden] { display: none; }
.buscador__lista li {
  list-style: none;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buscador__lista li:hover,
.buscador__lista li.marcado { background: var(--marca-claro); color: var(--marca); }
.buscador__lista li.vacio { color: var(--tinta-tenue); cursor: default; }
.buscador__lista li.vacio:hover { background: none; color: var(--tinta-tenue); }
.buscador__lista ul { margin: 0; padding: 0; }

/* ============================================================
   Barra de resultados
   ============================================================ */
.barra-resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}
.barra-resultados strong { color: var(--tinta); font-size: 15px; }
.barra-resultados .grupo { display: flex; align-items: center; gap: 8px; }

.cambiavista {
  display: inline-flex;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  padding: 2px;
  gap: 2px;
}
.cambiavista button {
  border: none;
  background: none;
  padding: 5px 11px;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
}
.cambiavista button.activo { background: var(--marca); color: #fff; }

/* ============================================================
   Tabla
   ============================================================ */
.caja-tabla {
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-vidrio);
  box-shadow: var(--vidrio-sombra);
  overflow-x: auto;
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla thead th {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--marca);
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 11px 12px;
  border-bottom: 1px solid var(--vidrio-linea);
  white-space: nowrap;
  z-index: 2;
}
.tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vidrio-linea-suave);
  vertical-align: top;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .fuerte { font-weight: 700; }
.tabla .tenue { color: var(--tinta-tenue); font-size: 12.5px; }
.tabla .centro { text-align: center; }

.orden { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.orden .flecha { opacity: .3; font-size: 9.5px; }
.orden--activo { color: var(--marca); }
.orden--activo .flecha { opacity: 1; }

tr.fila { cursor: pointer; }
tr.fila:hover { background: #FAFAFA; }
tr.fila:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
tr.fila--mejor            { box-shadow: inset 3px 0 0 var(--bien); }
tr.fila--peor             { box-shadow: inset 3px 0 0 var(--mal); }
tr.fila--igual            { box-shadow: inset 3px 0 0 var(--oro); }
tr.fila--revisar          { box-shadow: inset 3px 0 0 var(--aparte); }
tr.fila--sin-competencia  { box-shadow: inset 3px 0 0 #C9D0D8; }

.col-producto { max-width: 460px; min-width: 260px; }
.producto { display: block; font-weight: 600; line-height: 1.35; }
.submeta { display: block; font-size: 11.5px; color: var(--tinta-tenue); margin-top: 2px; }
/* Los tres descuentos de un día, en la ventana del calendario. El que trae
   un cuadro de ESE día se resalta; el que ya venía en la lista va tenue. */
.casilla-da {
  display: inline-block;
  min-width: 42px;
  margin-left: 3px;
  padding: 2px 8px;
  border-radius: var(--pildora);
  background: rgba(48,71,94,.08);
  color: var(--tinta-suave);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.casilla-da--nueva {
  background: var(--marca);
  color: #fff;
  font-weight: 700;
}
/* ============================================================
   Negociaciones: el pote del día
   ============================================================ */
.pote {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
  justify-content: space-between;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-vidrio);
  box-shadow: var(--vidrio-sombra);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.pote__cifras {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 4px 34px;
  flex: 1 1 380px;
}
.pote__dato { display: flex; flex-direction: column; }
.pote__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.pote__tit { font-size: 13px; font-weight: 600; margin-top: 7px; }
.pote__pie { font-size: 11.5px; color: var(--tinta-tenue); margin-top: 2px; }
.pote__dato--mal .pote__num { color: var(--rojo); }
/* La barra ocupa las tres columnas, debajo de las cifras. */
.pote__barra {
  grid-column: 1 / -1;
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(48, 71, 94, .12);
  overflow: hidden;
}
.pote__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
  transition: width var(--transicion);
}
.pote__barra span.pote__barra--mal { background: var(--rojo); }
.pote__barra--fina { height: 6px; margin-top: 4px; min-width: 90px; }
.pote__editar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  flex: 0 1 auto;
}

/* El formulario de alta se distingue del de filtros: es el que se usa. */
.filtros--alta { border-color: var(--marca); box-shadow: 0 10px 30px rgba(48,71,94,.16); }

/* Dos tablas cortas una al lado de la otra. */
.rejilla-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 18px;
}

/* ============================================================
   El aviso emergente de descuentos recién activados
   ============================================================ */
.emergente {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 430px;
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--vidrio-denso);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  box-shadow: 0 18px 44px rgba(48, 71, 94, .26);
  animation: emerger .28s ease both;
}
@keyframes emerger {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.emergente__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--rojo);
  color: #fff;
}
.emergente__texto { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.emergente__texto strong { font-size: 13.5px; }
.emergente__texto span { font-size: 12px; color: var(--tinta-tenue); }
.emergente__cerrar {
  border: none;
  background: none;
  color: var(--tinta-tenue);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.emergente__cerrar:hover { color: var(--tinta); }
/* Quien no quiera animaciones no las ve. */
@media (prefers-reduced-motion: reduce) { .emergente { animation: none; } }
@media (max-width: 700px) {
  .emergente { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* En la ventana de una molécula: las ofertas mías, y resaltada la del
   producto por el que se entró. */
.fila--mia > td { background: rgba(48, 71, 94, .06); }
.fila--esta > td {
  background: var(--marca-claro);
  box-shadow: inset 0 0 0 1px rgba(48, 71, 94, .25);
}

/* Un descuento que no viene solo: es justo lo que antes no se veía. */
.acompanado {
  color: var(--rojo);
  font-weight: 700;
}

/* El peso del artículo en el mercado (IMS), bajo el nombre del producto.
   Si está entre los 100 que más venden, se marca. */
.ims { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.ims--top { color: var(--medio); font-weight: 700; }

.bien { color: var(--bien); font-weight: 700; }
.mal { color: var(--mal); font-weight: 700; }
.vacio { text-align: center; padding: 52px 20px; color: var(--tinta-tenue); }
.vacio strong { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 4px; }

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.etiqueta--mejor { background: var(--marca); color: #fff; }
.etiqueta--peor { background: var(--rojo); color: #fff; }
.etiqueta--igual { background: rgba(255,255,255,.7); color: var(--tinta-suave); border: 1px solid rgba(48,71,94,.18); }
.etiqueta--revisar { background: var(--aparte-fondo); color: var(--aparte); }
.etiqueta--sin-competencia { background: #EEF1F4; color: var(--tinta-tenue); }
.etiqueta--mia { background: var(--marca); color: #fff; }
.etiqueta--barato { background: var(--medio-fondo); color: var(--medio); }
.etiqueta--nueva { background: var(--aparte-fondo); color: var(--aparte); }
.etiqueta--fuera { background: #EEF1F4; color: var(--tinta-tenue); }
.factor { color: var(--aparte); font-weight: 600; font-size: 12px; }

/* Barra de proporción para comparar stock */
.barra-prop {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--linea);
  overflow: hidden;
  margin-top: 5px;
  min-width: 76px;
}
.barra-prop span { display: block; height: 100%; background: var(--marca); border-radius: 3px; }

/* ============================================================
   Vista en tarjetas
   ============================================================ */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px;
}
.ficha {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px 15px 13px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ficha:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 75, 67, .14); }
.ficha:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ficha--mejor { border-top-color: var(--bien); }
.ficha--peor { border-top-color: var(--mal); }
.ficha--igual { border-top-color: var(--oro); }
.ficha--revisar { border-top-color: var(--aparte); }
.ficha--sin-competencia { border-top-color: #C9D0D8; }

.ficha__alto { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ficha__nombre { font-weight: 650; font-size: 13.5px; line-height: 1.35; }
.ficha__meta { font-size: 11.5px; color: var(--tinta-tenue); margin-top: 3px; }
.ficha__precios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
}
.ficha__precio { display: flex; flex-direction: column; gap: 1px; }
.ficha__precio .rotulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
}
.ficha__precio .valor { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.ficha__precio .quien { font-size: 11px; color: var(--tinta-tenue); }
.ficha__bajo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.ficha__brecha { font-size: 15px; font-weight: 700; }

/* ============================================================
   Simulador
   ============================================================ */
.acciones-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: var(--marca-claro);
  border: 1px solid #C9D0D8;
  border-radius: var(--radio);
  padding: 13px 15px;
  margin-bottom: 14px;
}
.acciones-lote .campo label { color: var(--marca); }
.acciones-lote .campo input,
.acciones-lote .campo select { background: var(--papel); }
.acciones-lote .separador { width: 1px; align-self: stretch; background: #C9D0D8; margin: 0 3px; }
.acciones-lote .aclara { font-size: 12px; color: var(--marca); max-width: 34ch; line-height: 1.4; }

.da {
  width: 52px;
  padding: 5px 6px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  text-align: right;
  background: #FAFAFA;
  color: var(--tinta);
  -moz-appearance: textfield;
}
/* Sin las flechitas de subir/bajar: se escribe el número y ya */
.da::-webkit-outer-spin-button,
.da::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.da:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 2px rgba(18, 75, 67, .16);
  background: var(--papel);
}
.da--tocado { border-color: var(--marca); background: var(--marca-claro); font-weight: 650; }
.da--guardando { opacity: .55; }

tr.simulada { background: #EEF1F4; }
tr.simulada td { border-bottom-color: #CDD8E6; }

.flecha-precio { color: var(--tinta-tenue); margin: 0 5px; }
.precio-nuevo { font-weight: 700; }
.precio-nuevo--gana { color: var(--bien); }
.precio-nuevo--pierde { color: var(--mal); }
/* En Mis ofertas hay dos columnas de precio: mientras no se toque ningún
   descuento, la del precio "nuevo" es igual a la de hoy y se muestra
   apagada para que no compita con la real. */
tr:not(.simulada) .precio-nuevo { color: var(--tinta-tenue); font-weight: 500; }

/* En el Comparativo no hay dos columnas: "Mi precio" ES el precio con los
   descuentos de la fila puestos, tocados o no. Así que ahí nunca va
   apagado, aunque comparta la clase con el de Mis ofertas. */
tr:not(.simulada) .col-miprecio .precio-nuevo { color: inherit; font-weight: 700; }
tr:not(.simulada) .col-miprecio .precio-nuevo--gana { color: var(--bien); }
tr:not(.simulada) .col-miprecio .precio-nuevo--pierde { color: var(--mal); }

/* El aviso de que ese precio salió de un descuento escrito a mano y todavía
   no está cargado en el portal. */
.tocado {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--oro);
  margin-top: 2px;
  white-space: nowrap;
}
.ficha__precio .tocado { display: inline; margin: 0; }

.col-categoria { font-size: 11.5px; text-transform: capitalize; }

.marca-fila { width: 34px; text-align: center; }
.marca-fila input { width: 15px; height: 15px; cursor: pointer; margin: 2px 0 0; }

/* ============================================================
   Ajustes
   ============================================================ */
.panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  margin-bottom: 16px;
  max-width: 940px;
}
.panel h2 { margin: 0 0 5px; font-size: 16px; }
.panel > p { margin: 0 0 16px; color: var(--tinta-suave); font-size: 13.5px; max-width: 78ch; }

.lista-competidores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
/* Cada competidor tiene dos mandos: la casilla que decide si cuenta, y la
   cabecera que se le descuenta al precio que publica. Son dos <label>
   hermanos dentro del recuadro para que cada uno muerda solo su control. */
.competidor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  transition: border-color var(--transicion), background var(--transicion);
}
.competidor:hover { border-color: #D5DCE4; background: #FAFAFA; }
.competidor__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.competidor__marca > span { min-width: 0; }
.competidor__marca input { width: 16px; height: 16px; cursor: pointer; flex: none; }
.competidor__nombre { font-weight: 600; font-size: 13.5px; display: block; }
.competidor__meta { font-size: 11.5px; color: var(--tinta-tenue); display: block; }
.competidor--fuera { background: #F5F5F5; border-style: dashed; }
.competidor--fuera .competidor__nombre { color: var(--tinta-tenue); text-decoration: line-through; }

/* Mi propia cabecera: un solo campo, con más aire que los de la lista
   porque manda sobre todo el comparativo. */
.mi-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mi-cabecera__campo { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mi-cabecera__campo input {
  width: 78px;
  padding: 8px 10px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  background: #fff;
}
.mi-cabecera__campo input:focus { outline: none; border-color: var(--marca); }
.mi-cabecera__campo > span { font-size: 13.5px; color: var(--tinta-suave); }
.mi-cabecera .tenue { font-size: 12px; max-width: 46ch; }

.competidor__cab {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 11px;
  color: var(--tinta-tenue);
  cursor: pointer;
}
.competidor__cab input {
  width: 52px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  text-align: right;
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  background: #fff;
}
.competidor__cab input:focus { outline: none; border-color: var(--marca); }
/* Con cabecera anotada el recuadro se nota, para ubicarlas de un vistazo */
.competidor__cab input:not([value=""]):not([value="0"]) {
  border-color: var(--marca);
  font-weight: 600;
}

/* ============================================================
   Descuentos por laboratorio
   ============================================================ */
.lab { padding: 18px 20px 16px; max-width: none; }
.lab__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.lab__cabeza h2 { margin: 0; font-size: 17px; }
.lab__sub { margin: 3px 0 0; color: var(--tinta-tenue); font-size: 12.5px; }
.lab__alerta {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.lab__alerta--mal { background: var(--mal-fondo); color: var(--mal); }
.lab__alerta--bien { background: var(--bien-fondo); color: var(--bien); }

/* Barra que muestra de qué % a qué % llega cada droguería */
.rango {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--linea-suave);
  overflow: hidden;
  min-width: 150px;
}
.rango__tramo {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--oro);
  border-radius: 4px;
}
.rango__tramo--mia { background: var(--marca); }

/* Tabla con los tres DA separados en grupos de columnas */
.tabla--da thead th { vertical-align: bottom; }
.tabla--da thead tr.sub th {
  top: 34px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-tenue);
  padding-top: 3px;
  padding-bottom: 6px;
}
.tabla--da th.grupo-da, .tabla--da th.grupo-total {
  text-align: center;
  border-left: 1px solid var(--linea);
}
.tabla--da td.grupo-da, .tabla--da td.grupo-total { background: rgba(231, 223, 204, .22); }
.tabla--da th.grupo-total, .tabla--da td.grupo-total { background: var(--marca-claro); }
.tabla--da .rango { margin-top: 6px; max-width: 200px; }
.flecha-da { color: var(--tinta-tenue); font-size: 10px; margin: 0 1px; }

/* ---- Ventana "¿queda competitiva?" ---- */
.veredicto {
  border-radius: var(--radio-min);
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 16px;
  border: 1px solid;
}
.veredicto--bien { background: var(--bien-fondo); border-color: #CDD8E6; color: #30475E; }
.veredicto--medio { background: var(--medio-fondo); border-color: #D5DCE4; color: var(--medio); }
.veredicto--mal { background: var(--mal-fondo); border-color: #F3C9C9; color: var(--mal); }

.armado {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.armado__col {
  flex: 1 1 210px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  padding: 12px 14px;
  background: #FAFAFA;
}
.armado__col--mia { background: var(--marca-claro); border-color: #C9D0D8; }
.armado__quien {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-tenue);
  margin-bottom: 8px;
}
.armado__linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.armado__linea--total {
  border-top: 1px solid var(--linea);
  margin-top: 5px;
  padding-top: 7px;
  font-weight: 700;
}
.armado__k { color: var(--tinta-suave); }
.armado__v { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.armado__linea--total .armado__v { font-size: 16px; }
.armado__vs {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  color: var(--tinta-tenue);
  flex: 0 0 auto;
}

.cara-a-cara {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  padding: 13px 16px;
}
.cara-a-cara__dato { text-align: center; }
.cara-a-cara__num {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.cara-a-cara__tit { font-size: 11px; color: var(--tinta-tenue); text-transform: uppercase; letter-spacing: .05em; }
.cara-a-cara__nota { font-size: 12.5px; color: var(--tinta-suave); flex: 1 1 210px; line-height: 1.45; }

.nota-da {
  margin: 10px 2px 0;
  font-size: 11.5px;
  color: var(--tinta-tenue);
  line-height: 1.45;
  max-width: 100ch;
}

/* Mientras se rehacen los resultados de una búsqueda en vivo */
.refrescando { opacity: .55; transition: opacity .1s ease; pointer-events: none; }

.th-nota {
  display: block;
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta-tenue);
  margin-top: 1px;
}

/* ============================================================
   Paginación
   ============================================================ */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.paginacion__pos { font-size: 13px; color: var(--tinta-suave); padding: 0 8px; }

/* ============================================================
   Ventana de detalle
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none !important; }
.modal__fondo { position: absolute; inset: 0; background: rgba(14, 59, 53, .55); }
.modal__caja {
  position: relative;
  background: var(--papel);
  border-radius: 14px;
  width: min(1060px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 24px 26px 22px;
  box-shadow: var(--sombra-alta);
}
.modal__cerrar {
  position: absolute;
  top: 13px; right: 13px;
  border: none;
  background: #EEF1F4;
  border-radius: var(--radio-min);
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tinta-suave);
}
.modal__cerrar:hover { background: #D5DCE4; }

.detalle__titulo { margin: 0 36px 3px 0; font-size: 17px; }
.detalle__sub { margin: 0 0 16px; color: var(--tinta-tenue); font-size: 12.5px; }
.detalle__pie { margin: 12px 0 0; font-size: 11.5px; color: var(--tinta-tenue); }
.tabla--detalle { border: 1px solid var(--linea); border-radius: var(--radio-min); overflow: hidden; }
.tabla--detalle thead th { position: static; }
tr.fila--mia { background: var(--marca-claro); }
tr.fila--mia td { font-weight: 600; }
tr.fila--fuera td { opacity: .5; }
.cargando { padding: 34px; text-align: center; color: var(--tinta-tenue); }

/* ============================================================
   Pantallas chicas
   ============================================================ */
@media (max-width: 980px) {
  .disposicion { display: block; }
  .disposicion { padding: 12px; }
  .lateral {
    position: fixed;
    z-index: 70;
    left: 0; top: 0;
    height: 100vh;
    border-radius: 0 26px 26px 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sombra-alta);
  }
  body.menu-abierto .lateral { transform: none; }
  body.menu-abierto::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(14, 59, 53, .45);
    z-index: 65;
  }
  .abrir-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 16px 0;
    padding: 8px 13px;
    border: 1px solid var(--linea);
    background: var(--papel);
    border-radius: var(--radio-min);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }
  .cabecera { padding: 14px 16px 0; }
  .contenido { padding: 14px 16px 40px; }
  .col-producto { max-width: 250px; min-width: 190px; }
  .campo--acciones { margin-left: 0; width: 100%; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
}

/* ============================================================
   Informe de enfoque
   ============================================================ */
.lista-enfoque {
  width: 100%;
  max-width: 640px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-min);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: #FAFAFA;
  color: var(--tinta);
  resize: vertical;
}
.lista-enfoque:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(18, 75, 67, .14);
}
.opciones-informe {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* --- El titular del enfoque: gano / no gano / cuánto cuesta --- */
.titular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.titular__lado {
  display: block;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio-vidrio);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
a.titular__lado:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(48,71,94,.18), inset 0 1px 0 rgba(255,255,255,.9); }
.titular__num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}
.titular__tit { display: block; font-size: 14.5px; font-weight: 600; margin-top: 9px; }
.titular__pie { display: block; font-size: 12px; color: var(--tinta-tenue); margin-top: 4px; line-height: 1.45; }
.titular__lado--bien .titular__num { color: var(--marca); }
.titular__lado--mal .titular__num { color: var(--rojo); }
.titular__lado--dinero { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 14px 34px rgba(48,71,94,.35); }
.titular__lado--dinero .titular__num { color: #fff; }
.titular__lado--dinero .titular__pie { color: rgba(255,255,255,.8); }

/* Cintas por clase de rotación */
.cintas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.cinta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--papel);
  border: 1px solid var(--vidrio-borde);
  border-radius: 18px;
  padding: 11px 16px;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.cinta:hover { border-color: var(--marca); background: rgba(255,255,255,.92); }
.cinta--activa { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); background: rgba(255,255,255,.92); }
.cinta__datos { flex: 1; }
.cinta__monto {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--mal);
}

/* --- La matriz de IMS: valores / unidades --- */
.titulo-matriz {
  font-size: 14px;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ayuda-matriz { font-size: 11.5px; color: var(--tinta-tenue); font-weight: 400; }

.matriz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.matriz .cinta { align-items: center; }
.matriz .cinta__datos strong { display: block; font-size: 13px; }
.matriz .cinta__datos .submeta { margin-top: 1px; }

/* La etiqueta A/C, con el peso visual de lo que representa */
.combi {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: var(--pildora);
  white-space: nowrap;
  border: 1px solid transparent;
}
.combi--estrella { background: var(--rojo); color: #fff; }
.combi--fuerte { background: var(--mal-fondo); color: var(--mal); border-color: #F3C9C9; }
.combi--medio { background: var(--medio-fondo); color: var(--medio); border-color: #D5DCE4; }
.combi--flojo { background: var(--linea-suave); color: var(--tinta-tenue); }

.falta-dar {
  display: inline-block;
  background: var(--mal-fondo);
  color: var(--mal);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
}
.rival { font-weight: 600; }

.subir-archivo {
  display: block;
  width: 100%;
  max-width: 640px;
  padding: 18px;
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  background: #FAFAFA;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.subir-archivo:hover { border-color: var(--marca); background: var(--marca-claro); }

.sub-bloque {
  font-size: 15px;
  margin: 24px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

/* Clase de rotación del estudio de mercado */
.clase {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 5px;
}
.clase--a { background: var(--mal-fondo); color: var(--mal); }
.clase--b { background: var(--medio-fondo); color: var(--medio); }
.clase--c { background: var(--linea-suave); color: var(--tinta-tenue); }
.clase--d { background: var(--linea-suave); color: var(--tinta-tenue); }

/* --- La hoja del informe --- */
.hoja { background: #EEF1F4; }

.barra-imprimir {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--marca-hondo);
  color: #C6CCD4;
  padding: 11px 22px;
  font-size: 13px;
}
.barra-imprimir strong { color: #fff; }

.informe {
  max-width: 1000px;
  margin: 22px auto 60px;
  background: var(--papel);
  padding: 40px 46px 34px;
  box-shadow: 0 4px 26px rgba(18, 75, 67, .14);
}

.portada { border-bottom: 3px solid var(--marca); padding-bottom: 22px; margin-bottom: 28px; }
.portada__marca {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: 12px;
}
.portada h1 { margin: 0 0 6px; font-size: 30px; }
.portada__sub { margin: 0 0 18px; color: var(--tinta-suave); font-size: 15px; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; }
.portada__datos div { margin: 0; }
.portada__datos dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.portada__datos dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }

.bloque { margin-bottom: 34px; }
.bloque h2 {
  font-size: 20px;
  margin: 0 0 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linea);
}
.bloque__intro { margin: 10px 0 14px; color: var(--tinta-suave); font-size: 13.5px; }

.cifra-grande {
  background: var(--marca);
  color: #fff;
  border-radius: var(--radio);
  padding: 22px 26px;
  margin: 18px 0;
}
.cifra-grande__num {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.cifra-grande__tit { display: block; font-size: 15px; font-weight: 600; margin-top: 6px; }
.cifra-grande__pie {
  display: block;
  font-size: 12.5px;
  opacity: .82;
  margin-top: 8px;
  line-height: 1.5;
  max-width: 76ch;
}

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cifra {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea);
  border-radius: var(--radio-min);
  padding: 12px 14px;
}
.cifra__num {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
}
.cifra__tit { display: block; font-size: 12.5px; font-weight: 600; margin-top: 3px; }

/* ============================================================
   Top de rotación: el nuestro contra el del mercado
   ============================================================ */
/* El titular hace de menú de los tres grupos: el elegido se marca. */
.titular__lado--elegido {
  box-shadow: 0 0 0 2px var(--marca) inset;
}

.cifras--anchas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 18px; }
.cifra--mal { border-left-color: var(--mal); }
.cifra--mal .cifra__num { color: var(--mal); }
.cifra--marca { border-left-color: var(--marca); }
.cifra--marca .cifra__num { color: var(--marca); }
.cifra--aparte { border-left-color: var(--aparte); }
.cifra--aparte .cifra__num { color: var(--aparte); }

/* De qué lista viene cada producto */
.grupo-marca {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.grupo-marca--juntos   { background: var(--bien-fondo); color: var(--bien); }
.grupo-marca--solo-mio { background: var(--medio-fondo); color: var(--medio); }
.grupo-marca--solo-ims { background: var(--mal-fondo); color: var(--mal); }

/* Cuánto coinciden las dos listas, tramo por tramo del ranking */
.tramos {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.tramo { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.tramo__rango {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--tinta-tenue);
  width: 84px;
  text-align: right;
  flex-shrink: 0;
}
.tramo__barra {
  flex: 1;
  height: 15px;
  background: var(--linea-suave);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.tramo__lleno { display: block; height: 100%; background: var(--marca); border-radius: 4px; }
.tramo__pct {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  width: 52px;
  text-align: right;
  flex-shrink: 0;
}
.tramo__pie { color: var(--tinta-tenue); width: 96px; flex-shrink: 0; font-size: 11.5px; }

@media (max-width: 700px) {
  .tramo__pie { display: none; }
  .tramo__rango { width: 70px; font-size: 11px; }
}

/* ============================================================
   Calendario de promociones — las ofertas que corremos nosotros
   ============================================================ */
.titular__lado--marca { border-top-color: var(--marca); }
.titular__lado--marca .titular__num { color: var(--marca); }
.titular__lado--medio { border-top-color: var(--oro); }
.titular__lado--medio .titular__num { color: var(--medio); }

/* Qué clase de descuento es. El color separa de dónde sale la plata:
   pino = la ponemos nosotros, violeta = la pone el laboratorio,
   oro = a medias. */
.tipo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tipo--sale  { background: var(--marca); color: #fff; border-color: var(--marca); }
.tipo--entra { background: var(--aparte-fondo); color: var(--aparte); border-color: #CDD8E6; }
.tipo--mixto { background: rgba(18,18,18,.08); color: var(--tinta-suave); border-color: rgba(48,71,94,.15); }
.tipo--otro  { background: var(--linea-suave); color: var(--tinta-tenue); border-color: var(--linea); }

.estado {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.estado--activa  { background: var(--bien-fondo); color: var(--bien); }
.estado--proxima { background: var(--marca-claro); color: var(--marca); }
.estado--vencida { background: var(--linea-suave); color: var(--tinta-tenue); }

/* La rejilla del mes */
.calendario {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.calendario__cabeza {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  text-align: center;
  padding-bottom: 2px;
}

.dia {
  min-height: 116px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 7px 8px 9px;
  cursor: pointer;
  transition: var(--transicion);
  overflow: hidden;
}
.dia:hover, .dia:focus-visible {
  border-color: var(--marca);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 24px rgba(48,71,94,.16);
  transform: translateY(-2px);
  outline: none;
}
.dia--vacio { background: transparent; border: none; cursor: default; }
.dia--vacio:hover { transform: none; box-shadow: none; }
.dia--quieto { background: rgba(255,255,255,.28); cursor: default; }
.dia--quieto:hover { transform: none; box-shadow: none; border-color: var(--linea); }
.dia--hoy { border-color: var(--marca); background: var(--marca); color: #fff; box-shadow: 0 12px 28px rgba(48,71,94,.3); }
.dia--hoy .dia__numero, .dia--hoy .dia__mas { color: #fff; }

.dia__numero {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-tenue);
  margin-bottom: 5px;
}
.dia__hoy {
  background: var(--marca);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 20px;
}
.dia__curso { font-size: 10.5px; color: var(--tinta-tenue); margin-top: 4px; }

/* Cada línea dentro de un día: solo lo que arranca o lo que termina */
.pastilla {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 5px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--linea-suave);
  color: var(--tinta-suave);
}
.pastilla__flecha { font-size: 8px; margin-right: 3px; opacity: .75; }
.pastilla--arranca { background: var(--bien-fondo); color: var(--bien); }
.pastilla--termina { background: var(--mal-fondo); color: var(--mal); }
.pastilla--mas { background: transparent; color: var(--tinta-tenue); font-weight: 500; padding-left: 2px; }
.nota-pie .pastilla { display: inline-block; margin: 0 4px 0 0; }

/* Dentro de la ventana: el encabezado de un cuadro de descuento */
.fichas-promo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin: 16px 0 20px;
}
.ficha-promo {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea);
  border-radius: var(--radio-min);
  padding: 11px 13px;
  font-size: 14px;
}
.ficha-promo strong { font-size: 15px; }
.ficha-promo--bien { border-left-color: var(--bien); }
.ficha-promo--bien strong { color: var(--bien); }
.ficha-promo--gris { border-left-color: #C9D0D8; }
.ficha-promo__pie {
  display: block;
  font-size: 11.5px;
  color: var(--tinta-tenue);
  margin-top: 4px;
  line-height: 1.45;
}

/* Cuánto le queda a una promoción, pegado al nombre */
.quedan {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 7px;
  background: var(--linea-suave);
  color: var(--tinta-tenue);
  vertical-align: middle;
  white-space: nowrap;
}
.quedan--ya { background: var(--mal-fondo); color: var(--mal); }
.quedan--luego { background: var(--marca-claro); color: var(--marca); }

.detalle__grupo {
  font-size: 13px;
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--linea);
}
.detalle__grupo .tenue { font-weight: 400; font-size: 11.5px; }

.volver {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--marca);
  cursor: pointer;
  margin-bottom: 10px;
}
.volver:hover { text-decoration: underline; }

@media (max-width: 860px) {
  /* En pantalla chica la rejilla de siete columnas no cabe: el mes pasa a
     ser una lista de días, que además se lee mejor con el pulgar. */
  .calendario { grid-template-columns: 1fr; }
  .calendario__cabeza { display: none; }
  .dia--vacio { display: none; }
  .dia { min-height: 0; }
}
.cifra__pie { display: block; font-size: 11px; color: var(--tinta-tenue); margin-top: 2px; }
.cifra--bien { border-left-color: var(--bien); } .cifra--bien .cifra__num { color: var(--bien); }
.cifra--mal { border-left-color: var(--mal); } .cifra--mal .cifra__num { color: var(--mal); }
.cifra--medio { border-left-color: var(--oro); } .cifra--medio .cifra__num { color: var(--medio); }
.cifra--aparte { border-left-color: var(--aparte); } .cifra--aparte .cifra__num { color: var(--aparte); }

.tabla--informe { border: 1px solid var(--linea); border-radius: var(--radio-min); overflow: hidden; }
.tabla--informe thead th { position: static; background: var(--marca-claro); }
.tabla--compacta { font-size: 12px; }
.tabla--compacta td, .tabla--compacta th { padding: 6px 9px; }

/* ============================================================
   Panel de "contra quién pierdo aquí" (Comparativo, al filtrar un lab)
   ============================================================ */
.contra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--mal);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 11px 15px;
  margin-bottom: 12px;
}
.contra__resumen { display: flex; align-items: center; gap: 11px; }
.contra__num { font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.contra__texto { font-size: 13.5px; line-height: 1.35; }

.contra__quienes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.contra__uno {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 3px 4px 3px 11px;
  text-decoration: none;
  color: var(--tinta);
  font-size: 12px;
  background: #FAFAFA;
}
.contra__uno:hover { border-color: var(--mal); background: var(--mal-fondo); }
.contra__uno--activo { border-color: var(--mal); background: var(--mal-fondo); font-weight: 650; }
.contra__quien { white-space: nowrap; }
.contra__sku {
  background: var(--mal);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
/* Qué parte del portafolio domina. Es lo que hace comparable un laboratorio
   con otro: 27 de 30 y 27 de 400 no son lo mismo. */
.contra__pct {
  color: var(--tinta-tenue);
  font-size: 11px;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Mapa de competencia: laboratorios × droguerías
   ============================================================ */
.caja-matriz { max-height: 74vh; overflow: auto; }

/* `width: auto` a propósito: con el 100% heredado, el navegador repartía el
   ancho entre 22 columnas y las cuatro primeras se comían la pantalla
   mientras las de las droguerías quedaban ilegibles. Aquí cada columna mide
   lo que mide su contenido y la caja se desplaza de lado. */
.tabla--matriz {
  width: auto;
  min-width: 100%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}
.tabla--matriz thead th.col-drog {
  padding: 8px 6px;
  text-align: right;
  font-size: 9.5px;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: bottom;
}
.tabla--matriz td, .tabla--matriz th { border-bottom: 1px solid var(--linea-suave); }

/* El laboratorio se queda a la vista al desplazar de lado, y el encabezado
   al desplazar hacia abajo. Sin esto, en la columna 12 ya no sabes de qué
   fila ni de qué droguería estás leyendo. */
.tabla--matriz .col-lab {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--papel);
  text-align: left;
  min-width: 190px;
  max-width: 230px;
  font-weight: 600;
  border-right: 1px solid var(--linea);
}
.tabla--matriz thead .col-lab { z-index: 4; background: #F5F5F5; }
.tabla--matriz thead th { z-index: 3; }
.tabla--matriz tbody tr:hover .col-lab { background: #FAFAFA; }
.lab-enlace { color: inherit; text-decoration: none; }
.lab-enlace:hover { color: var(--marca); text-decoration: underline; }

/* Las celdas del cuadro. El tono va por qué PARTE del portafolio de ese
   laboratorio domina esa droguería: 50 de 60 aprieta mucho más que 50 de 900.

   OJO con el nombre: `.casilla` ya existe más arriba para la casilla de
   verificación del login, y trae `display: flex !important`. Una celda de
   tabla con ese display deja de ser celda, y el navegador la saca a una fila
   propia — el cuadro entero se desarmaba en columna. */
.tabla--matriz .celda-mapa { padding: 5px 6px; font-variant-numeric: tabular-nums; }
.celda-mapa__pct { display: block; font-size: 9px; font-weight: 500; opacity: .7; }
.celda-mapa a { color: inherit; text-decoration: none; display: block; }
.celda-mapa a:hover { text-decoration: underline; }
.celda-mapa--0 { color: var(--linea); }
.celda-mapa--1 { background: #FDF1F1; }
.celda-mapa--2 { background: #F9D3D3; }
.celda-mapa--3 { background: #F4A9A9; font-weight: 600; }
.celda-mapa--4 { background: #F05454; font-weight: 700; color: #FFFFFF; }

/* ============================================================
   Detalle de un cuadro de descuento
   ============================================================ */
/* Los tres descuentos que el producto ya tiene, con la casilla donde cae el
   del cuadro marcada. Verlos juntos es lo que explica por qué el precio se
   mueve o no. */
.cascada { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Los botones para llevarse ESTE cuadro solo, sin el calendario entero. */
.detalle__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

/* El veredicto va bajo el precio del mercado, en la misma celda: son la
   pregunta y la respuesta, y en columnas separadas obligaban a desplazar la
   ventana de lado para leerlas juntas. */
.veredicto { display: block; margin-top: 4px; font-size: 11px; }
.veredicto .tenue { font-size: 11px; }

/* La ventana del calendario no debe desplazarse de lado: se lee de arriba
   abajo. Con seis columnas y las celdas apiladas, cabe. */
.tabla--detalle { width: 100%; table-layout: auto; }
.tabla--detalle .col-producto { max-width: 260px; }
.da-caja {
  display: inline-block;
  min-width: 26px;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--tinta-suave);
}
.da-caja--destino {
  background: var(--oro-fondo);
  border: 1px solid #D5DCE4;
  color: var(--medio);
  font-weight: 700;
}

/* ==================================================================
   CONTROL DE ACCESOS
   La garita: quién entra desde fuera, desde cuántos sitios, y cómo
   sacarlo. Casi todo reutiliza .tabla y .caja-tabla; aquí va solo lo
   que esa pantalla necesita y no existía.
   ================================================================== */
.pestanas {
  display: inline-flex;
  gap: 2px;
  background: var(--linea-suave);
  padding: 2px;
  border-radius: 9px;
}
.pestanas__una {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--tinta-tenue);
  text-decoration: none;
}
.pestanas__una:hover { color: var(--tinta); }
.pestanas__una.activa {
  background: var(--papel);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* La fila que hay que mirar dos veces: una cuenta con demasiados sitios,
   o una dirección que va probando usuarios distintos. */
.tabla .fila--ojo { background: var(--mal-fondo); }
.marca--ojo { background: var(--mal-fondo); color: var(--mal); }

/* Las direcciones desde las que entró una cuenta, en línea. */
.tabla .direcciones { max-width: 320px; line-height: 1.9; }
.tabla code {
  background: var(--linea-suave);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  font-family: Consolas, "Courier New", monospace;
}
.tabla .agente { font-size: 11px; opacity: .75; }

/* Los botones de cada fila, uno al lado del otro y sin estirar la fila. */
.tabla .acciones-fila { display: flex; gap: 5px; white-space: nowrap; }
.tabla .acciones-fila form { margin: 0; }

.desplegable { margin-top: 22px; }
.desplegable > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta-tenue);
  padding: 8px 0;
}
.desplegable > summary:hover { color: var(--tinta); }
.da-punto { color: var(--linea); margin: 0 1px; }

/* La ficha que avisa de que el cuadro todavía no bajó a la lista de precios */
.ficha-promo--aviso {
  background: var(--oro-fondo);
  border-color: #D5DCE4;
}
.ficha-promo--aviso strong { color: var(--medio); }

/* ============================================================
   Alertas: movimientos de la competencia
   ============================================================ */
/* El resumen de quién se movió no debe empujar la lista fuera de la
   pantalla: si hay muchas droguerías, esa tabla se desplaza sola. */
/* Más alto que antes (240px): con 240 solo entraban tres filas y medio y
   había que desplazar para todo. A 520 caben ocho o nueve, que es lo que se
   mira de verdad, y el desplazamiento queda para los casos raros. */
.caja-tabla--corta { max-height: 520px; overflow-y: auto; margin-bottom: 14px; }

/* Una razón social que se puede abrir para ver sus laboratorios */
.fila--abrible { cursor: pointer; }
.fila--abrible:hover { background: #FAFAFA; }
.fila--abrible.fila--alerta:hover { background: #F9D3D3; }
.flecha {
  display: inline-block;
  width: 12px;
  margin-right: 4px;
  color: var(--tinta-tenue);
  font-size: 10px;
}
.fila--abierta .flecha { color: var(--marca); }

/* Las marcas de dentro: sangradas y en gris, para que se lea de un vistazo
   que cuelgan de la fila de arriba y no son otra razón social más. */
tr.fila--marca > td { background: #FAFAFA; font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
tr.fila--marca .col-marca { padding-left: 30px; color: var(--tinta-suave); }
tr.fila--marca .col-marca::before { content: "└ "; color: var(--tinta-tenue); }

/* Los dos resúmenes de Alertas, lado a lado: quién se mueve y en qué
   laboratorio. En pantalla estrecha se apilan solos. */
.dos-resumenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px;
  align-items: start;
}
.dos-resumenes .caja-tabla--corta { margin-bottom: 0; }

/* Las filas donde un competidor pasó de estar a mi nivel a estar por debajo.
   Son la razón de ser de la pantalla, así que se marcan de lado como un
   renglón subrayado con lápiz rojo. */
tr.fila--alerta { background: var(--mal-fondo); }
tr.fila--alerta td { border-bottom-color: #F3C9C9; }
tr.fila--alerta td:first-child { box-shadow: inset 3px 0 0 var(--mal); }

/* El contador del menú cuando hay alguien pisándote el precio */
/* El contador rojo del logo: es lo único del menú que pide atención ya. */
.menu a .cuenta--alerta {
  background: var(--rojo);
  color: #fff;
  font-weight: 700;
}
.menu a.activo .cuenta--alerta { background: var(--rojo); }

.ficha-informe {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 16px;
  break-inside: avoid;
}
.ficha-informe__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ficha-informe__pos {
  display: inline-block;
  background: var(--marca);
  color: #fff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 1px 7px;
  margin-right: 7px;
}
.ficha-informe__nombre { font-weight: 700; font-size: 14.5px; }
.ficha-informe__meta { display: block; font-size: 11.5px; color: var(--tinta-tenue); margin-top: 3px; }
.ficha-informe__cifras { display: flex; gap: 20px; }
.ficha-informe__cifras .k {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.ficha-informe__cifras .v {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
}
.ficha-informe__resumen {
  background: #FAFAFA;
  border-radius: var(--radio-min);
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 11px;
  line-height: 1.5;
}

.pie-informe {
  border-top: 1px solid var(--linea);
  padding-top: 16px;
  font-size: 11.5px;
  color: var(--tinta-suave);
  line-height: 1.55;
}
.pie-informe p { margin: 0 0 8px; max-width: 92ch; }
.pie-informe__firma { color: var(--tinta-tenue); font-size: 10.5px; }

/* ============================================================
   Impresión
   ============================================================ */
@media print {
  .lateral, .filtros, .paginacion, .barra-resultados .grupo,
  .acciones-lote, .barra-imprimir, .abrir-menu { display: none !important; }
  .contenido { padding: 0; }
  body, .hoja { background: #fff; }

  .informe {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Que un bloque no se parta a la mitad entre dos hojas */
  .bloque, .ficha-informe, .cifra-grande { break-inside: avoid; }
  .salto-antes { break-before: page; }
  thead { display: table-header-group; }   /* el encabezado se repite */
  tr { break-inside: avoid; }
  a[href]::after { content: ""; }          /* sin URLs impresas al lado */

  @page { margin: 14mm 12mm; }
}