:root {
  --azul: #1972B9; --azul-osc: #0F4C80; --rojo: #E7312A; --negro: #1B1F24; --gris: #5F6B76;
  --linea: #E3E8EE; --fondo: #F4F7FA; --blanco: #FFFFFF;
  --verde: #1E8E4E; --verde-suave: #E3F4EA; --ambar: #B7791F; --ambar-suave: #FDF3E1; --gris-suave: #EEF1F4;
  --rojo-suave: #FDECEB; --azul-suave: #E6F0F9;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--negro); background: var(--fondo); line-height: 1.45; }
.oculto { display: none !important; }
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--blanco); border-bottom: 4px solid var(--azul); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: 900; font-size: 24px; letter-spacing: 1px; text-decoration: none; }
.marca .in { color: var(--azul); } .marca .dala { color: var(--rojo); }
.titulo { font-weight: 700; color: var(--gris); flex: 1; }
.enlace { background: none; border: 0; color: var(--azul); font-weight: 700; cursor: pointer; font-size: 15px; }
main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
h1 { font-size: 24px; margin: 0 0 6px; } h2 { font-size: 20px; margin: 0 0 6px; } h3 { font-size: 16px; margin: 0 0 6px; }
.ayuda { color: var(--gris); margin: 0 0 12px; font-size: 14.5px; }
.entrar { max-width: 460px; margin: 24px auto; }
label { display: block; font-weight: 600; margin: 12px 0; font-size: 15px; }
label small { display: block; font-weight: 400; color: var(--gris); margin-top: 4px; }
input, select { width: 100%; font: inherit; padding: 11px 12px; border: 1.5px solid #C9D3DD; border-radius: 10px; margin-top: 6px; background: var(--blanco); color: var(--negro); }
input:focus, select:focus { outline: 3px solid var(--azul-suave); border-color: var(--azul); }
.boton { display: inline-block; width: 100%; background: var(--rojo); color: var(--blanco); border: 0; border-radius: 10px; padding: 13px; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-align: center; text-decoration: none; }
.boton:hover { filter: brightness(.95); }
.boton.secundario { background: var(--azul); }
.boton.whatsapp { background: #1FA855; margin-top: 12px; }
.error { color: var(--rojo); font-weight: 600; min-height: 1em; margin: 10px 0 0; }
.admin { margin-top: 18px; color: var(--gris); }
.admin summary { cursor: pointer; font-size: 14px; }
.resultados { list-style: none; padding: 0; margin: 12px 0 0; }
.resultados li { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.resultados li:hover { border-color: var(--azul); background: var(--azul-suave); }
.resultados small { color: var(--gris); display: block; }
.cabecera { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.periodo { margin: 0; min-width: 200px; }
.cargando { text-align: center; color: var(--gris); }

/* Etiqueta que explica cada bloque */
.que-es { display: flex; gap: 10px; background: var(--azul-suave); color: var(--azul-osc); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 4px 0 14px; }
.que-es b { white-space: nowrap; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cifra { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; }
.cifra .valor { font-size: 26px; font-weight: 800; color: var(--azul-osc); }
.cifra .nombre { font-weight: 700; font-size: 14px; }
.cifra .explica { color: var(--gris); font-size: 12.5px; margin-top: 4px; }
.cifra.alerta .valor { color: var(--rojo); }

.ahorro { border: 2px solid var(--rojo); background: var(--rojo-suave); }
.ahorro .grande { font-size: 30px; font-weight: 900; color: var(--rojo); }

.grafico { width: 100%; overflow-x: auto; }
.grafico svg { display: block; width: 100%; height: auto; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris); margin-top: 8px; }
.punto { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

.sabor { display: grid; grid-template-columns: minmax(110px, 190px) 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linea); }
.sabor .nombre { font-weight: 600; font-size: 14.5px; }
.sabor .pista { background: var(--gris-suave); border-radius: 6px; height: 14px; overflow: hidden; }
.sabor .relleno { height: 100%; background: var(--azul); border-radius: 6px; }
.sabor .dato { font-size: 13px; color: var(--gris); white-space: nowrap; text-align: right; }
.chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; margin-left: 6px; }
.chip.alta { background: var(--verde-suave); color: var(--verde); }
.chip.media { background: var(--ambar-suave); color: var(--ambar); }
.chip.baja { background: var(--gris-suave); color: var(--gris); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dos > *, .sabor > * { min-width: 0; }
.mezcla { list-style: none; padding: 0; margin: 10px 0; columns: 2; }
.mezcla li { padding: 4px 0; font-size: 15px; }
.sugerido .grande { font-size: 30px; font-weight: 900; color: var(--azul-osc); }
.sugerido .gratis { color: var(--verde); font-weight: 800; }

.promo { border-left: 5px solid var(--azul); padding: 8px 12px; margin: 10px 0; background: var(--fondo); border-radius: 0 10px 10px 0; }
.promo.si { border-color: var(--verde); } .promo.no { border-color: var(--rojo); } .promo.ahora { border-color: var(--rojo); background: var(--rojo-suave); }
.promo .estado { font-weight: 800; }

.consejos { list-style: none; padding: 0; margin: 0; }
.consejos li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.consejos .icono { font-size: 20px; line-height: 1.2; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--gris); font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
td.num, th.num { text-align: right; white-space: nowrap; }
.tabla { overflow-x: auto; }
details.pedidos summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.pie { text-align: center; color: var(--gris); font-size: 12.5px; padding: 24px 16px 40px; }

@media (max-width: 720px) {
  .dos { grid-template-columns: 1fr; }
  .mezcla { columns: 1; }
  .sabor { grid-template-columns: 1fr; gap: 4px; }
  .sabor .dato { white-space: normal; text-align: left; }
  h1 { font-size: 21px; }
}

/* Ahorro, cuenta del cliente y botones pequeños */
.ahorrado { border: 2px solid var(--verde); background: var(--verde-suave); }
.ahorrado .grande { font-size: 30px; font-weight: 900; color: var(--verde); }
.cuenta { background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; font-size: 14px; max-width: 360px; }
.boton.chico { width: auto; padding: 8px 12px; font-size: 14px; margin-top: 8px; }
.codigo { font-size: 20px; letter-spacing: 2px; font-family: Consolas, monospace; }
.primera { margin-top: 16px; }
.primera summary { cursor: pointer; font-weight: 700; color: var(--azul); }

/* Etiquetas al pasar el mouse (ⓘ) */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 12px; font-weight: 800; margin-left: 6px; cursor: help; vertical-align: middle; user-select: none; }
.tip:hover, .tip:focus { background: var(--azul-osc); outline: none; }
.burbuja { position: fixed; z-index: 50; max-width: 300px; background: var(--negro); color: #fff; font-size: 13.5px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none; }
.burbuja b { color: #FFD166; }
[data-tip] { cursor: help; }
svg [data-tip] { cursor: pointer; }

/* Resumen en una frase */
.frase { font-size: 17px; line-height: 1.5; margin: 0 0 8px; }
.frase b { color: var(--azul-osc); }

/* Ahorro: barra comparativa */
.barras-ahorro { margin-top: 10px; }
.barra-ahorro { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.barra-ahorro .pista { background: var(--gris-suave); border-radius: 6px; height: 16px; overflow: hidden; }
.barra-ahorro .relleno { height: 100%; border-radius: 6px; }

/* Sabores: dona + lista */
.sabores { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.dona svg { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }
.dona .centro { font-weight: 900; font-size: 22px; fill: var(--negro); }
.dona-leyenda { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; columns: 2; }
.dona-leyenda li { padding: 2px 0; break-inside: avoid; }

/* Calendario de promos: 12 meses */
.linea-tiempo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 10px 0 6px; }
.mes-cal { border-radius: 8px; padding: 8px 2px 6px; text-align: center; font-size: 12px; background: var(--gris-suave); color: var(--gris); border: 2px solid transparent; }
.mes-cal b { display: block; font-size: 13px; color: var(--negro); }
.mes-cal .ico { font-size: 18px; display: block; line-height: 1.2; }
.mes-cal.promo { background: var(--ambar-suave); color: var(--ambar); }
.mes-cal.ahora { border-color: var(--rojo); background: var(--rojo-suave); color: var(--rojo); }
.mes-cal.pasado { opacity: .55; }

/* Asesor */
.asesor-cliente { margin-top: 14px; border: 2px solid var(--azul); border-radius: 12px; padding: 14px; background: var(--azul-suave); }

/* Pedidos hechos desde el portal */
.pedido-portal { border-left: 4px solid var(--verde); padding: 6px 10px; margin: 6px 0; background: var(--fondo); border-radius: 0 8px 8px 0; font-size: 14px; }

@media (max-width: 720px) {
  .sabores { grid-template-columns: 1fr; }
  .barra-ahorro { grid-template-columns: 1fr; gap: 4px; }
  .linea-tiempo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .burbuja { max-width: calc(100vw - 32px); }
}

/* Análisis de compras */
.analisis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.panel { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; }
.panel-t { font-weight: 700; font-size: 13.5px; color: var(--gris); }
.panel-v { font-size: 26px; font-weight: 900; color: var(--azul-osc); margin: 2px 0; }
.panel-e { font-size: 13px; color: var(--gris); }
.movimiento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 14px; }
.movimiento > div > div { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.movimiento .chip { margin: 0; }
.recomendaciones { border: 2px solid var(--azul); }
.lista-rec { padding-left: 22px; margin: 0; }
.lista-rec li { padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.5; }
.lista-rec li b { color: var(--azul-osc); }
@media (max-width: 720px) { .movimiento { grid-template-columns: 1fr; } }

/* Enlaces a la página principal de INDALA */
.nav-sitio { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-sitio a { color: var(--negro); text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; padding: 6px 10px; border-radius: 999px; }
.nav-sitio a:hover { background: var(--gris-suave); color: var(--rojo); }
.pie a { color: var(--azul); font-weight: 600; }
@media (max-width: 720px) {
  .barra { flex-wrap: wrap; }
  .nav-sitio { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--linea); padding-top: 6px; }
  .nav-sitio a { font-size: 12px; padding: 5px 8px; }
}

/* Botón PDF y cabecera */
.acciones-cab { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.acciones-cab .boton.chico { margin-top: 0; }
.solo-imprimir { display: none; }

/* Informe en PDF (imprimir → Guardar como PDF) */
@media print {
  @page { size: A4; margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 11.5pt; }
  .barra { position: static; border-bottom: 3px solid var(--azul); }
  .nav-sitio, #btnSalir, .no-imprimir, #vistaAdmin, #vistaEntrar, #panelCuenta, .burbuja, .pie, .tip, .que-es,
  .boton.whatsapp, #cargando, .periodo select { display: none !important; }
  .periodo { display: none; }
  .solo-imprimir { display: block; color: var(--gris); font-size: 9.5pt; margin: 4px 0 0; }
  main { max-width: none; padding: 0; }
  .tarjeta { break-inside: avoid; page-break-inside: avoid; border: 1px solid #cfd6de; margin-bottom: 10px; padding: 12px; }
  .tarjeta:has(table), .tarjeta.recomendaciones, .tarjeta:has(.sabor) { break-inside: auto; page-break-inside: auto; }
  .dos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .analisis { grid-template-columns: repeat(4, 1fr); }
  .sabores { grid-template-columns: 220px 1fr; }
  .linea-tiempo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sabor, .lista-rec li, .promo, .consejos li, tr { break-inside: avoid; page-break-inside: avoid; }
  details.pedidos > summary { list-style: none; font-size: 13pt; color: var(--negro); }
  .grafico { overflow: visible; }
  .grafico svg { width: 100% !important; }
  h1 { font-size: 18pt; } h2 { font-size: 13.5pt; }
}

/* Datos del cliente */
.perfil { max-width: 620px; margin: 16px auto; }
.perfil .fijos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.perfil .fijos span { display: block; font-size: 12.5px; color: var(--gris); }
.oblig { color: var(--rojo); }
label.falta input, label.falta select { border-color: var(--rojo); background: var(--rojo-suave); }
label.falta { color: var(--rojo); }
.chips-zona { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips-zona .chip { margin: 0; font-size: 13px; }
.bienvenida { border: 2px solid var(--verde); }

/* Comparación zona + país y sabores estrella */
.comparaciones.dos { align-items: start; }
.mini-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-comp > div { background: var(--gris-suave); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.mini-comp span { color: var(--gris); font-size: 12px; }
.mini-comp b { font-size: 15px; }
.mini-comp small { color: var(--gris); }
table.estrellas td, table.estrellas th { white-space: nowrap; }
table.estrellas .chip { margin: 0; font-size: 12px; }
@media (max-width: 720px) {
  .mini-comp { grid-template-columns: 1fr 1fr 1fr; } .mini-comp > div { padding: 6px; }
  table.estrellas { font-size: 11.5px; } table.estrellas th { white-space: normal; font-size: 10px; }
  table.estrellas td, table.estrellas th { padding: 6px 3px; } table.estrellas td { white-space: normal; }
  table.estrellas .chip { font-size: 11px; white-space: nowrap; } table.estrellas .chip.baja { white-space: normal; } table.estrellas .chip .largo { display: none; }
}
@media print { .comparaciones.dos { grid-template-columns: 1fr 1fr; } table.estrellas { font-size: 11px; } }

/* Cambios de sabor */
.cambios { display: grid; gap: 10px; margin-top: 10px; }
.cambio { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.cambio > .sale, .cambio > .entra { border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cambio .sale { background: var(--gris-suave); }
.cambio .entra { background: var(--verde-suave); }
.cambio .entra.vacio { background: var(--ambar-suave); }
.cambio b { font-size: 16px; }
.cambio small { color: var(--gris); }
.cambio .etq { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.cambio .entra .etq { color: var(--verde); }
.cambio .flecha { align-self: center; font-size: 22px; color: var(--azul); }
@media (max-width: 720px) { .cambio { grid-template-columns: 1fr; gap: 4px; } .cambio .flecha { transform: rotate(90deg); justify-self: center; } }
@media print { .cambio { break-inside: avoid; } }

/* Nivel de cliente */
.escalera { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.peldano { border: 1px solid var(--linea); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; opacity: .6; }
.peldano span { font-size: 22px; }
.peldano small { color: var(--gris); font-size: 12px; }
.peldano.actual { opacity: 1; border: 2px solid var(--azul); background: var(--gris-suave); }
/* Sugerencias */
.sugerir label { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-weight: 700; font-size: 14px; }
.sugerir textarea { font: inherit; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; resize: vertical; }
.estrellas-cal { display: flex; gap: 4px; }
.estrella { background: none; border: none; font-size: 30px; line-height: 1; color: #C9D1D9; cursor: pointer; padding: 2px; }
.estrella.on { color: #F5B301; }
.sugerir .boton { margin-top: 12px; }
#sugerencias tr.nueva td { background: var(--ambar-suave); }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 12px 0; font-weight: 400; }
label.check input { margin-top: 3px; width: auto; }
@media (max-width: 720px) {
  .escalera { grid-template-columns: repeat(2, 1fr); }
}
@media print { .sugerir { display: none !important; } .escalera { grid-template-columns: repeat(4, 1fr); } }

/* Califica a INDALA */
.opinion .preg { margin: 12px 0 6px; }
.opinion label { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-weight: 700; font-size: 14px; }
.opinion label.check { flex-direction: row; font-weight: 400; margin: 10px 0 0; }
.opinion textarea { font: inherit; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; resize: vertical; font-weight: 400; }
.opinion .boton { margin-top: 14px; }
.nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps button { border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: 8px 0; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--negro); }
.nps button.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.nps-leyenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); margin-top: 4px; }
@media (max-width: 720px) { .nps button { padding: 7px 0; font-size: 13px; } .nps { gap: 3px; } }

/* Pedido directo */
.c-lineas { display: grid; gap: 6px; margin-top: 10px; }
.c-linea { display: grid; grid-template-columns: 1fr auto 100px; gap: 10px; align-items: center; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; }
.c-sabor { font-weight: 700; display: flex; flex-direction: column; }
.c-sabor small { font-weight: 400; color: var(--gris); font-size: 12px; }
.c-cant { display: flex; align-items: center; gap: 8px; }
.c-cant b { min-width: 26px; text-align: center; font-size: 17px; }
.c-cant button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--azul); }
.c-sub { text-align: right; font-weight: 700; }
.c-agregar { margin-top: 10px; width: 100%; font-size: 15px; }
.c-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.c-resumen > div { background: var(--gris-suave); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.c-resumen span { font-size: 12px; color: var(--gris); }
.c-resumen b { font-size: 18px; }
.c-resumen b.verde { color: var(--verde); }
.c-resumen .aviso-c { grid-column: 1 / -1; margin: 0; background: var(--ambar-suave); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.c-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.c-extra label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.carrito #cEnviar { margin-top: 14px; }
@media (max-width: 720px) {
  .c-linea { grid-template-columns: 1fr auto; }
  .c-sub { grid-column: 1 / -1; text-align: left; font-size: 13px; color: var(--gris); }
  .c-extra { grid-template-columns: 1fr; }
}

/* Entrega, envíos y cambios de pedido */
.c-entrega { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 8px; }
.c-entrega .preg { margin: 6px 0; }
.c-entrega label.check { margin: 6px 0; }
.c-detalle { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; margin-top: 10px; }
.tarjeta.deuda { border: 2px solid var(--rojo); }
.tarjeta.deuda h2 { color: var(--rojo); }
.carrito .aviso-deuda { background: var(--rojo-suave); color: var(--rojo); }
.deuda-admin { background: var(--rojo-suave); color: var(--rojo); font-weight: 700; border-radius: 8px; padding: 4px 8px; margin-top: 6px; font-size: 14px; }
select:disabled { opacity: .6; }
.carrito .aviso-c { background: var(--ambar-suave); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.pp-acciones { margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pedido-portal.anulado { opacity: .6; text-decoration: line-through; }
.pedido-portal.con-cambio { border-left: 5px solid var(--rojo); background: var(--rojo-suave); padding-left: 10px; }
.cambio-det { margin-top: 6px; background: #fff; border-radius: 8px; padding: 6px 8px; }
.alerta-cambio { background: var(--rojo-suave); color: var(--rojo); font-weight: 700; border-radius: 10px; padding: 10px 12px; }

/* Tienda: dentro del portal solo «Mis datos» y «Salir» (zona de venta sin distracciones) */
.barra .titulo { margin-right: auto; }
.dentro .solo-fuera { display: none; }
.ir-tienda { display: block; text-align: center; font-size: 17px; margin: 0 0 16px; }
.c-otros-t { margin: 14px 0 6px; font-size: 15px; }

/* Mes a mes: rango y comparación de años */
.rango { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chip-btn { border: 1px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--negro); }
.chip-btn.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.grafico-scroll { overflow-x: auto; }
.tabla-anios td, .tabla-anios th { white-space: nowrap; }
.tabla-anios tr.total td { border-top: 2px solid var(--linea); }
.rojo-txt { color: var(--rojo); }
/* Alertas de patrón de compra (solo INDALA) */
.alerta-patron { border-left: 4px solid #AEB8C2; background: var(--gris-suave); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.alerta-patron.alta { border-left-color: var(--rojo); }
.alerta-patron.media { border-left-color: var(--ambar); }
.alerta-patron.baja { border-left-color: #2E9E5B; }
.alerta-patron.vista { opacity: .6; }
.alerta-patron.baja-cli { border-left-color: #5B6B7A; }
.sug-acepta { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #AEB8C2; font-size: 14px; }
.sug-acepta button { margin-top: 6px; }
.lo-maps { grid-column: 1 / -1; }
#instalarCel { margin: 6px 0 10px; }
table.reparto input { width: 64px; padding: 6px; text-align: center; }
table.reparto th { font-size: 13px; }
.saldo-promos { margin-top: 8px; }
.admin-arranque #vistaEntrar { display: none; }   /* llegando del hub de producción/manual: nada de parpadeo del login de clientes */
.lo-maps button { margin-top: 4px; }
.alerta-patron .ap-det { margin: 4px 0; }
.alerta-patron .ap-rec { color: var(--azul-osc); }
.patron { border: 2px solid var(--ambar); }
.patron .estado-cli { font-size: 16px; }
.temporada { background: var(--azul-suave, #EAF2FB); border-radius: 8px; padding: 8px 12px; font-size: 14px; }

/* ---------- Tienda para heladerías ---------- */
.tienda { border: 2px solid var(--azul); }
.t-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.t-cats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.t-buscar { flex: 1 1 220px; max-width: 320px; }
.t-cat-t { margin: 16px 0 8px; font-size: 16px; }
.t-cat-t small { color: var(--gris); font-weight: 400; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.t-prod { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--blanco); }
.t-prod.en-carrito { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul) inset; }
.t-foto { height: 86px; border-radius: 10px; display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 50% 50%, var(--c, #ddd) 0 30px, color-mix(in srgb, var(--c, #ddd) 22%, #fff) 31px); }
.t-foto.otro { background: var(--gris-suave); }
.t-nombre { font-weight: 700; font-size: 15px; line-height: 1.25; }
.t-nombre .chip { font-size: 10px; margin: 2px 0 0; }
.t-desc { font-size: 12px; color: var(--gris); }
.t-precio { font-size: 15px; font-weight: 700; margin-top: 2px; }
.t-precio small { font-weight: 400; color: var(--gris); }
.t-info { flex: 1; }
.t-acc { display: flex; justify-content: center; }
.t-acc .boton { width: 100%; }
.t-flotante { position: sticky; bottom: 8px; z-index: 4; margin: 12px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between;
  background: var(--negro, #1B1F24); color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.t-flotante .verde { color: #7BE3A0; }
.t-carrito { border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 6px; }
@media (max-width: 520px) { .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-foto { height: 70px; } .t-buscar { max-width: none; } }

/* ---------- Oportunidades ---------- */
.t-foto.img { position: relative; padding: 0; overflow: hidden; cursor: pointer; background: var(--gris-suave); }
.t-foto.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-nfotos { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 7px; }
.t-pronto { background: var(--gris-suave); border-radius: 10px; padding: 10px 12px; }
.t-interes textarea { width: 100%; margin: 6px 0; }
.oport-cab { margin-bottom: 10px; }
.oport-form { border: 1px dashed var(--azul); border-radius: 12px; padding: 12px; margin: 10px 0; }
.oport-form textarea { width: 100%; }
.oport-prev { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.oport-prev img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.oport-mias { margin-top: 8px; font-size: 14px; }
.oport-mia { padding: 6px 0; border-bottom: 1px solid var(--linea); }
.oport-admin { display: grid; grid-template-columns: 120px 1fr; gap: 12px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; margin: 8px 0; font-size: 14px; }
.oport-admin.revision { border-color: var(--ambar); background: #FFFBF2; }
.oa-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.oa-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.oa-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.oa-acc input { max-width: 200px; }
@media (max-width: 520px) { .oport-admin { grid-template-columns: 1fr; } }

/* ---------- Administrador de la tienda ---------- */
.ta-prod { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; margin: 8px 0; }
.ta-prod.apagado { opacity: .65; background: var(--gris-suave); }
.ta-foto { width: 70px; height: 70px; border-radius: 8px; background: var(--gris-suave); display: grid; place-items: center; font-size: 30px; overflow: hidden; }
.ta-foto img { width: 100%; height: 100%; object-fit: cover; }
.ta-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); min-width: 0; gap: 6px 10px; font-size: 13px; }
.ta-campos .ta-ancho { grid-column: 1 / -1; }
.ta-acc { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ta-helados { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 600px) { .ta-prod { grid-template-columns: 1fr; } .ta-acc { align-items: stretch; } }
.ta-campos input, .ta-campos select { width: 100%; min-width: 0; box-sizing: border-box; }
#tiendaAdmin details { margin: 10px 0; }

/* ---------- Negocio · personas · facturar a · quién paga ---------- */
.perfil > .tarjeta, .perfil #miAcceso .tarjeta, .perfil #misDatosExtra .tarjeta { margin-bottom: 14px; }
.sub { color: var(--gris); font-size: 14px; margin: -4px 0 10px; }
.grupo-campos { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--linea); }
.grupo-campos b { display: block; font-size: 16px; }
.grupo-campos span { font-size: 13px; color: var(--gris); }
.fila-dato { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
details.mini { margin: 10px 0; }
details.mini summary { cursor: pointer; color: var(--azul); font-weight: 700; font-size: 14px; }
.lista-negocios { display: grid; gap: 8px; }
.negocio-admin { border: 2px solid var(--azul); }
.negocio-admin h3 { margin: 14px 0 4px; font-size: 15px; }

/* ---------- Ventas por provincia y cantón ---------- */
.tabla-zonas tr.zp { cursor: pointer; background: var(--gris-suave); }
.tabla-zonas tr.zc td:first-child { padding-left: 18px; }
.tabla-zonas td, .tabla-zonas th { white-space: nowrap; }

/* «Continuar con Google» */
#googleBtn { display: flex; justify-content: center; margin: 6px 0 4px; min-height: 44px; }
.separador { text-align: center; color: var(--gris); font-size: 13px; margin: 10px 0; border-top: 1px solid var(--linea); line-height: 0; }
.separador span { background: var(--blanco); padding: 0 10px; }

.oa-trato { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--gris-suave); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oa-trato input, .oa-trato select { max-width: 190px; }
.oport-admin.reservada { border-color: var(--azul); }

/* Secciones del cliente: Tienda · Pedidos y pagos · Mis números (una a la vez, nada amontonado) */
.secciones { position: sticky; top: 62px; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--fondo); padding: 6px 0 10px; margin-bottom: 6px; }
.secciones button { border: 1.5px solid var(--linea); background: var(--blanco); color: var(--negro); border-radius: 12px; padding: 11px 8px; font: inherit; font-weight: 800; font-size: 15px; line-height: 1.2; cursor: pointer; }
.secciones button.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.globo { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--rojo); color: #fff; font-size: 12px; font-weight: 800; text-align: center; margin-left: 4px; }
/* Enlace del menú del administrador que abre otra página (producción) */
.admin-nav .boton-nav { display: inline-block; border: 1px solid var(--linea); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; color: var(--negro); text-decoration: none; background: var(--blanco); }
.admin-nav .boton-nav:hover { border-color: var(--azul); color: var(--azul); }
/* Cobros por WhatsApp (panel del administrador) */
.cb-cab .cifras { margin-bottom: 8px; }
.cb-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.cb-acciones .boton { margin-top: 0; }
.cb-det { border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.cb-det summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.cb-det textarea { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; box-sizing: border-box; margin-top: 6px; }
.cb-lbl { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; }
.cb-fechas { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.cb-fechas label { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; gap: 4px; }
.cb-fechas input { font: inherit; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; }
.cb-fechas .boton { margin-top: 0; }
.cb-cuatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cb-bloque { border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.cb-bloque ul { list-style: none; padding: 0; margin: 6px 0 0; max-height: 220px; overflow: auto; }
.cb-bloque li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--linea); }
.cb-tabla td, .cb-tabla th { vertical-align: top; }
.cb-tabla tr.cb-excluido { opacity: .6; }
.cb-acc { display: flex; flex-wrap: wrap; gap: 4px; min-width: 190px; }
.cb-acc .boton { margin-top: 0; padding: 6px 9px; font-size: 13px; }
.cb-wa.boton { margin-top: 0; }
.cb-gris { color: var(--gris); }
.cb-detalle { margin-top: 8px; }
.cb-mini td { padding: 2px 8px 2px 0; font-size: 13px; border: 0; }
.cb-msj { white-space: pre-wrap; background: var(--gris-suave); border-radius: 10px; padding: 10px; font: inherit; font-size: 13.5px; margin: 6px 0 0; }
.cb-paso { border: 2px solid #1FA855; border-radius: 12px; padding: 10px 14px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-paso .boton { margin-top: 0; }
.verde { color: #2E9E5B; }
/* Pagos */
.pago-fila { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin: 10px 0; }
.pago-fila .pf-txt small { display: block; color: var(--gris); font-size: 13px; }
.pago-fila .pf-monto { font-size: 20px; color: var(--azul-osc); }
.pago-fila .pf-acc, .pago-fila .pf-zona { grid-column: 1 / -1; }
.pago-fila .pf-acc .boton { margin-right: 6px; }
.pago-fila .pf-acc .boton.activo { outline: 3px solid var(--azul-suave); }
.pf-zona:empty { display: none; }
.pf-zona, .pago-ahora { border-top: 1px dashed var(--linea); padding-top: 10px; }
.pago-ahora { margin-top: 12px; }
.cta-admin { border: 1px solid var(--linea); border-radius: 10px; padding: 4px 12px 12px; margin: 8px 0; }
.bancos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 8px 0; }
.banco { background: var(--gris-suave); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.c-pago { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 8px; }
.c-pago label.check { margin: 6px 0; }
.t-nota { display: block; color: var(--gris); font-size: 11.5px; margin-top: 4px; }
/* Administrador: un menú, un panel a la vez */
.admin-nav { position: sticky; top: 62px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; background: var(--fondo); padding: 6px 0 10px; }
.admin-nav button { border: 1.5px solid var(--linea); background: var(--blanco); border-radius: 10px; padding: 9px 12px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: var(--negro); }
.admin-nav button.activo { background: var(--negro); border-color: var(--negro); color: #fff; }
.panel-admin > .boton.chico { display: block; margin-top: 12px; }
.pago-txt { font-size: 13px; font-weight: 700; }
.pago-admin { display: grid; grid-template-columns: 90px 1fr; gap: 12px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; margin: 8px 0; font-size: 14px; }
.pago-admin.revision { border-color: var(--ambar); background: #FFFBF2; }
.pago-admin.rechazado { opacity: .7; }
.pa-foto img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); }
.pa-foto span { font-size: 36px; display: block; text-align: center; }
.pa-acc { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.pa-acc input { width: auto; flex: 1; min-width: 160px; margin: 8px 0 0; padding: 7px 10px; }
@media (max-width: 600px) {
  .secciones { top: 58px; }
  .secciones button { padding: 8px 4px; font-size: 13.5px; }
  .admin-nav { flex-wrap: nowrap; overflow-x: auto; top: 58px; }
  .admin-nav button { white-space: nowrap; }
  .pago-fila .pf-acc .boton { width: 100%; margin-right: 0; }
}
@media print { .secciones, .admin-nav { display: none !important; } }

/* Pagos: el cliente marca qué paga (uno o varios) y ve el total */
.pago-items { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pago-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; margin: 0; font-weight: 400; cursor: pointer; }
.pago-item input { width: 22px; height: 22px; margin: 0; }
.pago-item small { display: block; color: var(--gris); font-size: 13px; }
.pago-item .pi-monto { color: var(--azul-osc); font-size: 17px; }
.pago-total { font-size: 18px; margin: 6px 0 4px; }
.pago-total b { color: var(--azul-osc); }
.pf-acc .apagado { opacity: .45; pointer-events: none; }
#pagos .pf-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pagos .pf-acc .boton { margin: 0; }
.pago-ahora { margin-top: 10px; background: var(--azul-suave); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }