/* ============================================================
   IMPERIA · Sistema administrativo
   Joyería y accesorios · @mx.imperia · «Eleva quién eres»

   Paleta tomada del logo real:
     negro/carbón  #11120E   base
     dorado envej. #B3A074   letras y acentos
   De apoyo, observados en fotos de producto y empaque: beige
   crema cálido y kraft — son los cremas de este archivo.

   Las tipografías siguen siendo las que heredó el fork y están
   PENDIENTES de confirmar con el cliente.

   Todo color de marca vive aquí. Ningún componente escribe un
   color literal: si Imperia cambia de paleta, se cambia en este
   bloque y en el :root de tienda.css, y en ningún lado más.
   ============================================================ */

/* ── La paleta ───────────────────────────────────────────────
   La marca del consultorio todavía no está definida, así que esto es un
   punto de partida neutro, no una identidad: grises con un acento sobrio.
   Cuando la clienta decida sus colores se cambian ESTOS valores y cambia
   todo el panel — ninguna pantalla trae un color escrito a mano.
   Los nombres (--oro, --champan) se quedan como en los otros dos sistemas
   para que las pantallas se puedan mover entre repos sin tocarles nada. */
:root {
  --oro: #4f766a;
  --oro-claro: #7d9c92;
  --oro-oscuro: #35534a;
  --champan: #cfdbd6;
  --champan-suave: #eef2f0;
  --tinta: #1b1f1e;
  --tinta-suave: #2a2f2d;
  --papel: #ffffff;
  --lienzo: #f5f6f5;
  --linea: #e2e5e3;
  --texto: #1c201f;
  --texto-suave: #636b68;
  --texto-tenue: #939b98;

  --exito: #2f7a55;
  --exito-bg: #e7f4ed;
  --alerta: #b4801f;
  --alerta-bg: #fbf1de;
  --peligro: #a8352f;
  --peligro-bg: #fbeae9;
  --info: #35618e;
  --info-bg: #e8f0f8;

  --fuente-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --fuente: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --sombra: 0 1px 2px rgba(17, 18, 14, .04), 0 8px 24px rgba(17, 18, 14, .06);
  --sombra-alta: 0 20px 60px rgba(17, 18, 14, .18);
  --sidebar: 264px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
a { color: var(--oro-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

.display { font-family: var(--fuente-display); font-weight: 500; letter-spacing: .01em; }

/* ── Utilidades ───────────────────────────────────────────── */
.fila { display: flex; gap: 12px; align-items: center; }
.fila-entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.crece { flex: 1; }
.tenue { color: var(--texto-suave); }
.mini { font-size: 12px; }
.micro { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--texto-tenue); }
.der { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* Las flechas de los reportes. Van colgadas de .reporte a propósito: un
   .exito suelto le pintaría el texto entero a las tarjetas .kpi.exito, que
   usan esa misma palabra para su franja de color. */
.reporte .sube { color: var(--exito); font-weight: 600; }
.reporte .baja { color: var(--peligro); font-weight: 600; }

/* ── Login ────────────────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(179, 160, 116, .22), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(220, 210, 185, .18), transparent 55%),
    var(--tinta);
}

.login-caja {
  width: 100%;
  max-width: 400px;
  background: var(--papel);
  border-radius: var(--r-lg);
  padding: 40px 34px;
  box-shadow: var(--sombra-alta);
  text-align: center;
}

.login-caja .marca { margin-bottom: 22px; }
.login-caja h1 { font-family: var(--fuente-display); font-size: 30px; letter-spacing: .06em; }
.login-caja .campo { text-align: left; }

/* ── Marca / logo ─────────────────────────────────────────── */
.marca { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.marca svg { display: block; }
.marca .nombre {
  font-family: var(--fuente-display);
  font-size: 22px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}
.marca .tagline {
  font-size: 9px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oro);
}

/* ── Layout de la app ─────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.lateral {
  background: var(--tinta);
  color: #cfcbc0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.lateral-marca {
  padding: 26px 22px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lateral-marca .nombre { color: var(--papel); font-size: 17px; }
.lateral-marca .tagline { font-size: 8px; }
.lateral-marca .marca { align-items: flex-start; gap: 3px; }

.nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav .grupo { margin: 14px 10px 6px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6a665c; }

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: #cfcbc0;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--papel); text-decoration: none; }
.nav a.activo { background: linear-gradient(90deg, rgba(179, 160, 116, .26), rgba(179, 160, 116, .06)); color: var(--champan); box-shadow: inset 2px 0 0 var(--oro); }
.nav a .ico { width: 18px; text-align: center; opacity: .9; }
.nav a .globo {
  margin-left: auto;
  background: var(--peligro);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.lateral-pie { padding: 14px 18px 20px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12px; }
.lateral-pie .usuario { color: var(--papel); font-weight: 600; }
.lateral-pie button { margin-top: 8px; }

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

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 252, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.barra h1 { font-family: var(--fuente-display); font-size: 26px; line-height: 1.1; }
.barra .sub { font-size: 12px; color: var(--texto-suave); }
.hamburguesa { display: none; }

.contenido { padding: 24px 26px 60px; max-width: 1400px; width: 100%; }

/* ── Tarjetas ─────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}
.tarjeta-cab {
  padding: 16px 18px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tarjeta-cab h3 { font-size: 15px; }
.tarjeta-cuerpo { padding: 18px; }
.tarjeta-cuerpo.sin-padding { padding: 0; }

.rejilla { display: grid; gap: 16px; }
.rejilla.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla.auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* ── KPI ──────────────────────────────────────────────────── */
.kpi {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--oro), var(--champan));
}
.kpi .etiqueta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 600; }
.kpi .valor { font-family: var(--fuente-display); font-size: 32px; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .pie { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.kpi.peligro::after { background: linear-gradient(180deg, var(--peligro), #d98a85); }
.kpi.alerta::after { background: linear-gradient(180deg, var(--alerta), #cdbb92); }
.kpi.exito::after { background: linear-gradient(180deg, var(--exito), #8fc7ab); }
.kpi[data-clic] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi[data-clic]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(17, 18, 14, .1); }

/* ── Botones ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--texto);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--oro); color: var(--oro-oscuro); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-oro { background: var(--oro); border-color: var(--oro); color: #fff; }
.btn-oro:hover { background: var(--oro-oscuro); border-color: var(--oro-oscuro); color: #fff; }
.btn-tinta { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn-tinta:hover { background: #000; border-color: #000; color: var(--champan); }
.btn-peligro { color: var(--peligro); border-color: #edd3d1; background: var(--peligro-bg); }
.btn-peligro:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn-fantasma { background: transparent; border-color: transparent; }
.btn-fantasma:hover { background: rgba(17, 18, 14, .05); }
.btn-mini { padding: 5px 10px; font-size: 12px; }
.btn-bloque { width: 100%; }
.btn-claro { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #e8e5dd; }
.btn-claro:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ── Formularios ──────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
/* Un input con su unidad pegada ($ a la izquierda, % a la derecha). */
.con-unidad { position: relative; }
.con-unidad > b { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); font-weight: 600; color: var(--texto-tenue); pointer-events: none; }
.con-unidad input { padding-left: 24px; }
.con-unidad.pct > b { left: auto; right: 11px; }
.con-unidad.pct input { padding-left: 11px; padding-right: 28px; }
.campo .ayuda { font-size: 11.5px; color: var(--texto-tenue); }

input, select, textarea {
  font: inherit;
  font-size: 13.5px;
  color: var(--texto);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(179, 160, 116, .16);
}
textarea { resize: vertical; min-height: 74px; }
input[type="checkbox"] { width: auto; accent-color: var(--oro); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check input { margin: 0; }

.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-rejilla .ancho { grid-column: 1 / -1; }

.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.filtros input, .filtros select { width: auto; min-width: 150px; }
.filtros .buscador { min-width: 240px; flex: 1; max-width: 380px; }

/* ── Tablas ───────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th {
  text-align: left;
  padding: 11px 14px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 700;
  border-bottom: 1px solid var(--linea);
  background: #faf9f5;
  white-space: nowrap;
}
table.tabla td { padding: 11px 14px; border-bottom: 1px solid #f0ede5; vertical-align: middle; }
table.tabla tbody tr:hover { background: #fcfbf7; }
table.tabla tbody tr:last-child td { border-bottom: none; }
table.tabla .acciones { text-align: right; white-space: nowrap; }
table.tabla tr.clicable { cursor: pointer; }

.vacio { padding: 46px 20px; text-align: center; color: var(--texto-suave); }
.vacio .icono { font-size: 34px; opacity: .35; display: block; margin-bottom: 10px; }

/* ── Insignias ────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #f1eee6;
  color: var(--texto-suave);
  white-space: nowrap;
}
.tag.oro { background: var(--champan-suave); color: var(--oro-oscuro); }
.tag.exito { background: var(--exito-bg); color: var(--exito); }
.tag.alerta { background: var(--alerta-bg); color: var(--alerta); }
.tag.peligro { background: var(--peligro-bg); color: var(--peligro); }
.tag.info { background: var(--info-bg); color: var(--info); }
.tag.tinta { background: #e7e5df; color: var(--tinta); }

/* ── Modal ────────────────────────────────────────────────── */
.telon {
  position: fixed;
  inset: 0;
  background: rgba(17, 18, 14, .55);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.modal {
  background: var(--papel);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 620px;
  box-shadow: var(--sombra-alta);
  animation: subir .18s ease-out;
}
.modal.ancho { max-width: 940px; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
.modal-cab {
  padding: 18px 22px;
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-cab h3 { font-family: var(--fuente-display); font-size: 22px; }
.modal-cuerpo { padding: 20px 22px; }
.modal-pie {
  padding: 14px 22px;
  border-top: 1px solid var(--linea);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: #faf9f5;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-wrap: wrap;
}
.cerrar { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--texto-tenue); padding: 0 4px; }
.cerrar:hover { color: var(--texto); }

/* ── Avisos ───────────────────────────────────────────────── */
.aviso {
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid transparent;
  margin-bottom: 14px;
}
.aviso.error { background: var(--peligro-bg); border-color: #f0d6d4; color: var(--peligro); }
.aviso.ok { background: var(--exito-bg); border-color: #cfe6da; color: var(--exito); }
.aviso.alerta { background: var(--alerta-bg); border-color: #f0e0c0; color: var(--alerta); }
.aviso.info { background: var(--info-bg); border-color: #d3e2f0; color: var(--info); }

#brindis { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.brindis {
  background: var(--tinta);
  color: var(--papel);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  box-shadow: var(--sombra-alta);
  animation: subir .2s ease-out;
  border-left: 3px solid var(--oro);
  max-width: 340px;
}
.brindis.error { border-left-color: #e0736c; }
.brindis.ok { border-left-color: #6bbf95; }

/* ── Gráficas simples (sin librerías) ─────────────────────── */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 8px; max-width: 100%; }
/* min-width:0 es indispensable: sin él los elementos flex conservan
   min-width:auto y se niegan a encogerse por debajo de su contenido — con
   el tooltip en nowrap eso daba barras de 131px y la gráfica desbordaba la
   tarjeta encima de la vecina. */
.barras .columna { flex: 1 1 0; min-width: 0; background: linear-gradient(180deg, var(--oro-claro), var(--oro)); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; transition: opacity .15s; }
.barras .columna:hover { opacity: .75; }
.barras .columna span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tinta);
  color: #fff;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  margin-bottom: 5px;
  z-index: 5;
}
.barras .columna:hover span { opacity: 1; }
/* En los extremos el tooltip se ancla al borde en vez de centrarse, para que
   no se salga de la tarjeta. */
.barras .columna:first-child span { left: 0; transform: none; }
.barras .columna:last-child span { left: auto; right: 0; transform: none; }

.medidor { height: 7px; background: #eee9dd; border-radius: 999px; overflow: hidden; }
.medidor i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro), var(--champan)); border-radius: 999px; }
.medidor.peligro i { background: linear-gradient(90deg, var(--peligro), #dd9c98); }
.medidor.alerta i { background: linear-gradient(90deg, var(--alerta), #d2c19b); }

/* ── Lista de detalle ─────────────────────────────────────── */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; }
.datos .dato .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-tenue); font-weight: 600; }
.datos .dato .v { font-size: 14px; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { padding: 10px 0 10px 20px; border-left: 2px solid var(--linea); position: relative; }
.linea-tiempo li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oro);
}
.linea-tiempo li:last-child { border-left-color: transparent; }

/* ── Cargando ─────────────────────────────────────────────── */
.cargando { padding: 60px; text-align: center; color: var(--texto-tenue); }
.girador {
  width: 26px; height: 26px;
  border: 2px solid var(--linea);
  border-top-color: var(--oro);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Eventos: la pantalla del stand ───────────────────────── */
.qr-caja { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.qr-caja img { border: 1px solid var(--linea); border-radius: var(--r); padding: 6px; background: #fff; flex: none; }
.qr-caja strong { word-break: break-all; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.participantes { display: flex; flex-direction: column; }
.participante { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #f0ede5; }
.participante:last-child { border-bottom: 0; }
.boleto-num { font-family: var(--fuente-display); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.boleto-num small { display: block; font-family: var(--fuente); font-size: 11px; color: var(--oro-oscuro); font-weight: 600; margin-top: 3px; }
.validar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.validar .btn-mini { min-height: 34px; }
@media (max-width: 860px) {
  .participante { grid-template-columns: 70px 1fr; }
  .validar { grid-column: 1 / -1; justify-content: flex-start; }
  .validar .btn-mini { min-height: 40px; padding: 8px 14px; font-size: 13px; }
}

.regalos-panel { display: flex; flex-direction: column; }
.regalo-fila { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0ede5; }
.regalo-fila:last-child { border-bottom: 0; }
.regalo-fila img, .regalo-fila .sin { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-sm); background: var(--lienzo); border: 1px solid var(--linea); }
.regalo-fila .sin { display: flex; align-items: center; justify-content: center; color: var(--oro); font-size: 20px; }
.pieza-catalogo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: 0; overflow: hidden; text-align: left; cursor: pointer; }
.pieza-catalogo:hover { border-color: var(--oro); }
.pieza-catalogo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pieza-catalogo span { display: block; font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .regalo-fila { grid-template-columns: 56px 1fr; } .regalo-fila .validar { grid-column: 1 / -1; justify-content: flex-start; } }
/* El equipo del stand: cada quien con su link y su avance contra la meta. */
.equipo-fila { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0ede5; }
.equipo-fila:last-child { border-bottom: 0; }
.equipo-fila .avance { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.barra-avance { flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: #ece8de; overflow: hidden; }
.barra-avance span { display: block; height: 100%; background: #b3a074; border-radius: 3px; transition: width .3s; }
.equipo-fila .mini.exito { color: #2f7a4f; font-weight: 600; }
@media (max-width: 860px) { .equipo-fila { grid-template-columns: 1fr; } .equipo-fila .validar { justify-content: flex-start; } }

/* ── Editor de órdenes: promociones y buscador ────────────── */
.sugerencias-orden { max-height: 380px; overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--r-sm); }
/* El buscador de clientes de la orden: la lista flota bajo el campo. */
.buscador-cli { position: relative; }
.sugerencias-flotante { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 300px; overflow-y: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-sm); box-shadow: var(--sombra-alta); }
.sug-cli-fila { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 10px; cursor: pointer; border-top: 1px solid #f0ede5; }
.sug-cli-fila:hover { background: #f6f3ec; }
.promo-linea { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f0ede5; font-size: 13px; margin: 0; }
.promo-linea:last-child { border-bottom: 0; }
.promo-linea .ico-auto { width: 16px; text-align: center; color: var(--oro-oscuro); font-weight: 700; }
.promo-linea .tag { margin-left: 4px; }

/* ── La agenda del día ────────────────────────────────────── */
.citas { display: flex; flex-direction: column; }
.cita { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f0f1f0; }
.cita:last-child { border-bottom: 0; }
.cita .hora { font-weight: 700; font-size: 14px; line-height: 1.15; }
.cita .hora small { display: block; font-weight: 400; font-size: 11px; color: var(--texto-tenue); }
.cita.cancelada { opacity: .5; }
.cita.cancelada .quien strong { text-decoration: line-through; }

/* Las horas libres, en cuadrícula para elegir de un vistazo. */
.horas { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
.horas .btn { min-width: 74px; }
.horas .btn small { display: block; font-size: 9.5px; letter-spacing: .04em; opacity: .75; }

/* El horario semanal: un bloque por día. */
.dia-horario { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.dia-horario:last-child { border-bottom: 0; }
.dia-horario .tramos { display: flex; flex-direction: column; gap: 6px; }
.dia-horario .tramo { align-items: center; gap: 8px; }
.dia-horario .tramo input[type="time"] { max-width: 130px; }

/* Un servicio apagado se ve apagado, no escondido. */
.apagada { opacity: .6; }

/* El buscador de pacientes de la cita (mismo patrón que el de órdenes). */
.buscador-cli { position: relative; }
.sugerencias-flotante { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-sm); box-shadow: var(--sombra-alta); }
.sug-cli-fila { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 8px 10px; cursor: pointer; border-top: 1px solid #f0f1f0; }
.sug-cli-fila:hover { background: var(--champan-suave); }

@media (max-width: 860px) {
  .cita { grid-template-columns: 56px 1fr; }
  .cita .tag { grid-column: 1 / -1; justify-self: start; }
}

/* ── Impresión de notas ───────────────────────────────────── */
@media print {
  .lateral, .barra, .modal-pie, .no-imprimir { display: none !important; }
  .app { display: block; }
  .telon { position: static; background: none; padding: 0; display: block; }
  .modal { box-shadow: none; max-width: none; }
  body { background: #fff; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rejilla.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-alta);
  }
  .lateral.abierto { transform: none; }
  .velo-nav { position: fixed; inset: 0; background: rgba(17, 18, 14, .45); z-index: 80; }
  .hamburguesa { display: inline-flex; }
  .barra { padding: 12px 16px; flex-wrap: wrap; }
  .barra h1 { font-size: 21px; }
  /* En un teléfono el título y los botones de acción no caben en la misma
     línea. Sin esto no se apilan: estiran el encabezado, y como el encabezado
     define el ancho de la página, el panel entero se scrollea de lado. */
  .barra .crece { min-width: 0; }
  .barra .fila { flex-wrap: wrap; }
  .contenido { padding: 18px 16px 60px; }
  /* minmax(0, 1fr) y no 1fr: con 1fr el mínimo de la pista es «auto», así que
     una tarjeta con contenido ancho estira su columna más allá de la rejilla y
     empuja la página entera. Es el mismo problema que min-width:0 en flex. */
  .rejilla.k2, .rejilla.k3, .rejilla.k4 { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla { grid-template-columns: minmax(0, 1fr); }
  /* Los input traen un ancho intrínseco de ~20 caracteres que no se encoge solo. */
  .campo input, .campo select, .campo textarea { min-width: 0; max-width: 100%; }
  .filtros .buscador { min-width: 100%; max-width: none; }
  .filtros input, .filtros select { flex: 1; min-width: 130px; }
  .modal-pie { justify-content: stretch; }
  .modal-pie .btn { flex: 1; }
}

@media (max-width: 560px) {
  .kpi .valor { font-size: 26px; }
  table.tabla th, table.tabla td { padding: 9px 10px; }
  /* Las etiquetas de la gráfica aparecen al pasar el mouse por encima. En un
     teléfono no hay mouse, así que nunca se ven — pero están posicionadas
     absolutas y sí ensanchan la página. Fuera. */
  .barras .columna span { display: none; }
}

/* ── Subida y galería de fotos de producto ────────────────── */
.soltar-fotos {
  border: 1.5px dashed var(--linea);
  border-radius: var(--r);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  background: #fbfaf6;
  transition: border-color .15s, background .15s;
}
.soltar-fotos:hover { border-color: var(--oro); background: #fdfcf7; }
.soltar-fotos.encima { border-color: var(--oro); background: var(--champan-suave); }
.soltar-texto strong { display: block; font-size: 13.5px; margin-bottom: 3px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
/* El cuadrado es del LIENZO, no de la figura. Cuando lo era de la figura, el
   selector de variante nacía debajo del borde y el overflow lo borraba: estaba
   en el DOM con cero píxeles visibles. */
.galeria .foto {
  margin: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: #f1eee6;
  cursor: grab;
}
/* 4:5, el mismo marco que usa la tienda: quien administra tiene que ver el
   encuadre que va a ver el cliente, no uno distinto. */
.galeria .foto .lienzo { position: relative; aspect-ratio: 4 / 5; }
.galeria .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria .foto.arrastrando { opacity: .4; }
.galeria .cinta-portada {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--tinta);
  color: var(--champan);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.galeria .foto-acciones {
  position: absolute;
  right: 5px; bottom: 5px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.galeria .foto:hover .foto-acciones { opacity: 1; }

/* A qué variante pertenece la foto. Va siempre visible, no al pasar el
   mouse: es un dato de la foto, no una acción escondida. */
.galeria .foto-variante {
  display: block;
  width: 100%;
  margin: 0;
  padding: 5px 6px;
  font-size: 11px;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: var(--papel);
  color: var(--texto);
  cursor: pointer;
}
.galeria .foto-variante:hover { background: var(--champan-suave); }

/* A qué variante van las fotos que se suban ahora. */
.foto-destino {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--texto-suave);
}
.foto-destino select {
  flex: 1 1 180px;
  padding: 6px 8px;
  font-size: 12.5px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--papel);
  color: var(--texto);
}
.galeria .foto-acciones .btn { padding: 3px 7px; font-size: 11px; }

/* En táctil no hay hover: los botones siempre visibles */
@media (hover: none) {
  .galeria .foto-acciones { opacity: 1; }
}

/* En el buscador de la orden la foto ES la búsqueda —quien no se sabe el
   nombre reconoce la pieza por la imagen—, así que va más grande que en el
   listado, donde el nombre está al lado. */
.miniatura-tabla.grande { width: 56px; height: 56px; }
.foto-celda { width: 56px; padding-right: 0; }

.miniatura-tabla {
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--linea);
  background: #f1eee6;
  display: block;
}

/* ── Enlaces de ayuda contextual ──────────────────────────── */
.enlace-ayuda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--oro-oscuro);
  text-decoration: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 4px 12px 4px 8px;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.enlace-ayuda:hover, .enlace-ayuda:focus-visible {
  border-color: var(--oro);
  background: var(--champan-suave);
  text-decoration: none;
}
.enlace-ayuda span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--oro);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ── Lista de casillas (elegir productos de una promoción) ── */
.lista-check {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #fbfaf6;
}
.lista-check .check { font-size: 13px; }

/* ── Sellos de promoción en la tienda ─────────────────────── */
.sello-promo {
  display: inline-flex;
  align-items: center;
  background: #a8352f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ── Vista previa del logo en Ajustes ─────────────────────── */
.vista-logo {
  width: 108px;
  height: 108px;
  flex-shrink: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background:
    linear-gradient(45deg, #f0ede5 25%, transparent 25%, transparent 75%, #f0ede5 75%),
    linear-gradient(45deg, #f0ede5 25%, transparent 25%, transparent 75%, #f0ede5 75%),
    var(--papel);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  display: grid;
  place-items: center;
  padding: 10px;
}
.vista-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ── El logo del negocio, en Ajustes ─────────────────────── */
/* La caja tiene fondo a cuadros claros: casi todos los logos llegan con
   fondo transparente, y sobre blanco no se ve si el recorte quedó bien. */
.logo-ajuste { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.logo-caja {
  width: 96px; height: 96px; flex: none; border-radius: var(--r);
  border: 1px solid var(--linea); display: grid; place-items: center; overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.logo-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-caja .sin-logo { font-size: 11px; color: var(--texto-tenue); text-align: center; padding: 0 6px; }
.logo-ajuste input[type=file] { font-size: 13px; max-width: 100%; }
@media (max-width: 560px) { .logo-ajuste { flex-direction: column; } }