* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  background: #16181d;
  color: #e6e6e6;
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: #1c1f26;
  border-right: 1px solid #2a2e37;
  padding: 20px 14px;
  flex-shrink: 0;
}

.marca { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #3ecf8e; color: #10231a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.marca-nombre { font-weight: 600; font-size: 14px; }
.marca-sub { font-size: 12px; color: #8b93a1; }

.boton-refrescar {
  width: 100%; margin-bottom: 16px; padding: 10px 12px;
  background: transparent; border: 1px solid #2a2e37; border-radius: 8px;
  color: #cfd3da; font-size: 14px; cursor: pointer; text-align: left;
}
.boton-refrescar:hover { background: #262a33; color: #fff; }

.herramientas { display: flex; flex-direction: column; gap: 4px; }
.herramienta {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  color: #cfd3da; text-decoration: none; font-size: 14px;
}
.herramienta:hover, .herramienta.activa { background: #262a33; color: #fff; }
.herramienta-disabled { color: #5b6270; cursor: default; }

.herramienta-off { color: #6b7280; }
.herramienta-off:hover { color: #cfd3da; }
.etiqueta { margin-left: auto; font-size: 11px; color: #5b6270; }

.asa-arrastre { cursor: grab; color: #4a5060; font-size: 12px; line-height: 1; user-select: none; }
.asa-arrastre:active { cursor: grabbing; }
.herramienta.arrastrando, .herramienta-disabled.arrastrando { opacity: .35; }

.punto { width: 8px; height: 8px; border-radius: 50%; background: #4a5060; flex-shrink: 0; }
.punto-on { background: #3ecf8e; }
.punto-off { background: #4a5060; }

.punto-servidor { background: #ff4d4d; box-shadow: 0 0 6px rgba(255,77,77,.7); }

.punto-servidor-en-progreso { background: transparent; border: 2px solid #ff4d4d; width: 6px; height: 6px; }

.contenido { flex: 1; min-width: 0; padding: 32px 40px; }
h1 { margin-top: 0; }
.subtitulo { color: #8b93a1; }

.tarjetas { display: flex; gap: 16px; flex-wrap: wrap; }
.tarjeta {
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 10px;
  padding: 18px 20px; min-width: 200px; text-decoration: none; color: inherit;
}
.tarjeta-disabled { opacity: 0.5; }
.tarjeta-off { opacity: 0.6; }
.tarjeta-titulo { font-weight: 600; margin-bottom: 6px; }
.tarjeta-estado { font-size: 12px; color: #8b93a1; }

.bloque {
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 10px;
  padding: 20px 24px; margin-bottom: 24px;
}
.bloque h2 { margin-top: 0; }
.bloque h3 { margin-bottom: 8px; margin-top: 24px; }

.nota { background: #232a1f; border: 1px solid #3a4a2e; color: #cfe3bd; padding: 10px 14px; border-radius: 8px; font-size: 13px; }

.migas-archivos { font-size: 13px; color: #8b93a1; margin-bottom: 16px; }
.migas-archivos a { color: #8b93a1; }
.migas-archivos a:hover { color: #fff; }

.buscar-archivo { width: 100%; max-width: 360px; margin-bottom: 16px; display: block; }

.lista-archivos { display: flex; flex-direction: column; gap: 4px; }
.lista-archivos .herramienta { background: #12141a; }
.lista-archivos .herramienta:hover { background: #262a33; }
.lista-archivos .archivo-carpeta { font-weight: 600; }
.lista-archivos .herramienta[hidden] { display: none; }

.icono-archivo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0;
}
.icono-carpeta, .icono-imagen, .icono-video { background: none; width: auto; height: auto; font-size: 16px; }
.icono-word { background: #2b579a; }
.icono-excel { background: #217346; }
.icono-ppt { background: #d24625; }
.icono-pdf { background: #d93831; font-size: 8px; }
.icono-zip, .icono-txt { background: #5b6270; }
.icono-generico { background: #454b57; }

#log-actualizar-control-diario {
  font-family: Consolas, monospace; font-size: 12.5px; max-height: 200px;
  overflow-y: auto; white-space: pre-wrap;
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { text-align: left; padding: 8px; border-bottom: 1px solid #2a2e37; font-size: 14px; }

.punto-grupo {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}

.tabla-scroll { overflow-x: auto; }
.tabla-centrada th, .tabla-centrada td { text-align: center; white-space: nowrap; }
.tabla-centrada input, .tabla-centrada select { text-align: center; text-align-last: center; }
.nota-alerta { background: #2a231f; border-color: #4a3a2e; color: #e3c8bd; }

.fila-trazabilidad { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.col-trazabilidad { flex: 0 0 auto; }
.col-trazabilidad .tarjetas { flex-wrap: nowrap; gap: 10px; }
.col-trazabilidad .tarjeta { min-width: 0; padding: 14px 14px; }
.col-trazabilidad .resumen-total { font-size: 13px; }
.col-donut { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
.leyenda-donut { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #cfd3da; }
.leyenda-item { display: flex; align-items: center; gap: 8px; }
.leyenda-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.separador-descontinuo { align-self: stretch; border-left: 1px dashed #3a4050; }

.tarjeta-utilidad {
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 10px;
  padding: 12px 14px; margin-top: 12px; text-align: center;
}
.tarjeta-utilidad .tarjeta-titulo { font-size: 15px; margin-bottom: 8px; }
.linea-utilidad { margin: 5px 0; font-size: 12px; color: #b7bdc7; }
.linea-utilidad strong { font-size: 13px; }
.linea-utilidad-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid #2a2e37; }
.linea-utilidad-total strong { font-size: 17px; font-weight: 700; }

.col-lateral { flex: 0 0 auto; }
.nota-gasto-publicidad { margin: 0 0 8px; font-size: 11px; color: #8a90a0; font-style: italic; }
.linea-suma { margin: 4px 0; font-size: 12px; color: #b7bdc7; }
.linea-suma strong { color: #e6e6e6; font-size: 13px; }
.linea-suma-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid #3a4050; }
.linea-suma-total strong { font-size: 15px; }

.flecha-larga { display: inline-block; transform: scaleX(2.2); margin: 0 4px; color: #8b93a1; }

.campo-rango-fechas { min-width: 180px; }
.campo-rango-fechas summary {
  cursor: pointer; background: #12141a; border: 1px solid #2a2e37;
  border-radius: 6px; padding: 8px 10px; font-size: 14px; list-style: none;
}
.campo-rango-fechas summary::-webkit-details-marker { display: none; }
.panel-fechas {
  position: absolute; z-index: 10; margin-top: 6px; min-width: 280px;
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 10px;
}
.lista-presets { display: flex; flex-direction: column; gap: 4px; }
.preset-fecha {
  background: transparent; border: none; color: #cfd3da; text-align: left;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.preset-fecha:hover:not(:disabled) { background: #262a33; }
.preset-fecha:disabled { color: #5b6270; cursor: default; }
.rango-personalizado { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid #2a2e37; padding-top: 10px; }
.rango-personalizado .campo { margin-bottom: 0; }
.fila-filtros { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }

.fila-plataforma-cuenta { display: flex; gap: 16px; align-items: flex-start; }

#form-agregar-campana { align-items: flex-end; }
.resumen-total { font-size: 16px; margin-top: 10px; }
.celda-accion { display: flex; gap: 8px; flex-wrap: wrap; }
.celda-accion .boton-principal, .celda-accion .boton-secundario { padding: 6px 12px; font-size: 13px; }

.positivo { color: #3ecf8e; font-weight: 600; }
.negativo { color: #e07f7f; font-weight: 600; }
.neutro { color: #fff; font-weight: 600; }

.guia-decision { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.guia-punto { display: flex; gap: 14px; align-items: flex-start; }
.guia-numero {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #262a33; color: #3ecf8e; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.guia-titulo { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.guia-texto { font-size: 13px; color: #b7bdc7; margin: 0; line-height: 1.5; }

.campo-productos { min-width: 200px; }
.campo-productos summary {
  cursor: pointer; background: #12141a; border: 1px solid #2a2e37;
  border-radius: 6px; padding: 8px 10px; font-size: 14px; list-style: none;
}
.campo-productos summary::-webkit-details-marker { display: none; }
.panel-productos {
  position: absolute; z-index: 10; margin-top: 6px; min-width: 240px;
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.panel-productos input[type=text] { width: 100%; margin-bottom: 8px; }
.lista-checks { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.check-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; white-space: nowrap; }
.check-item input { width: auto; }
.check-item-todos { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #2a2e37; }
.texto-sin-ventas { color: #e07f7f; }

.fila-totales td { font-weight: 700; border-top: 2px solid #3a4050; }

.tabla-comparativo-mensual th:nth-child(4),
.tabla-comparativo-mensual td:nth-child(4) {
  border-left: 3px solid #3ecf8e;
}

.campo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; color: #b7bdc7; }
.fila { display: flex; gap: 16px; }
.fila .campo { flex: 1; min-width: 0; }
.fila-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }

input[type=text], input[type=number], input[type=password], select, textarea {
  background: #12141a; border: 1px solid #2a2e37; color: #e6e6e6;
  border-radius: 6px; padding: 8px 10px; font-size: 14px; font-family: inherit;
}
textarea { min-height: 70px; resize: vertical; }
input[type=file] {
  color: #cfd3da; font-size: 13px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle;
}

input[type=file][hidden] { display: none; }

.boton-principal {
  background: #3ecf8e; color: #0d1f16; border: none; border-radius: 8px;
  padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.boton-principal:hover { background: #35b87e; }
.boton-principal:disabled { opacity: 0.5; cursor: default; }

.campo-bloqueado { opacity: 0.5; pointer-events: none; background: #1a1d24; }

.boton-secundario {
  background: transparent; color: #e08585; border: 1px solid #5a3232;
  border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.boton-secundario:hover { background: #2a1a1a; }
.boton-secundario:disabled { opacity: 0.5; cursor: default; }

a.boton-secundario { display: inline-block; text-decoration: none; vertical-align: middle; box-sizing: border-box; }

#agregar_variante {
  background: transparent; border: 1px dashed #3a4050; color: #cfd3da;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; margin-top: 6px;
}
.variante-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.variante-fila input[name="opcion_nombre[]"] { flex: 0 0 160px; }
.variante-fila textarea[name="opcion_valores[]"] { flex: 1 1 200px; min-width: 0; resize: vertical; font-family: inherit; }

.combo-precio-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; align-items: center; }
.combo-precio-fila .combo-nombre { flex: 0 0 200px; font-size: 13px; }
.combo-precio-fila input[type="number"] { flex: 1; min-width: 0; }
.combo-precio-fila input[type="text"] { flex: 1 1 140px; min-width: 140px; }

.campo-dinero { display: flex; align-items: stretch; }
.campo-dinero span {
  background: #1a1d24; border: 1px solid #2a2e37; border-right: none;
  border-radius: 6px 0 0 6px; padding: 8px 4px 8px 10px; color: #8b93a1;
}
.campo-dinero input { border-radius: 0 6px 6px 0; flex: 1; min-width: 0; }
.combo-precio-fila .campo-dinero { flex: 1 1 160px; min-width: 160px; }

.combo-precio-fila input:read-only { background: #1a1d24; color: #8b93a1; cursor: not-allowed; }

.resena-fila { border-top: 1px solid #2a2e37; padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.botones-ejecucion { display: flex; gap: 12px; margin-bottom: 14px; }

#mensaje-claude { width: 100%; margin-bottom: 10px; min-height: 50px; }
#estado-espera { margin-top: 10px; }

#log-consola {
  background: #0c0e12; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 14px; height: 320px; overflow-y: auto; font-size: 12.5px;
  white-space: pre-wrap; color: #a9e5c0;
}

.sub-layout { display: flex; gap: 24px; align-items: flex-start; }
.sub-sidebar { position: relative; width: 200px; flex-shrink: 0; transition: width .15s; }

.sub-sidebar.colapsado { width: 0; margin-right: -24px; }
.sub-sidebar.colapsado .sub-sidebar-contenido { display: none; }
.boton-colapsar-sidebar {
  position: absolute; top: 0; right: -34px; z-index: 5;
  width: 26px; height: 26px; border-radius: 50%; background: #1c1f26; border: 1px solid #2a2e37;
  color: #cfd3da; cursor: pointer; font-size: 13px; line-height: 1; padding: 0;
}
.boton-colapsar-sidebar:hover { border-color: #3ecf8e; color: #3ecf8e; }

.sub-sidebar-titulo { font-size: 12px; color: #8b93a1; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.sub-nav { display: flex; flex-direction: column; gap: 4px; }
.sub-nav-item { padding: 10px 12px; border-radius: 8px; color: #cfd3da; text-decoration: none; font-size: 14px; }
.sub-nav-item:hover, .sub-nav-item.activo { background: #262a33; color: #fff; }
.sub-nav-item-off { color: #6b7280; }
.sub-nav-item-off:hover { color: #cfd3da; }
.sub-contenido { flex: 1; min-width: 0; }

.cabecera-busqueda { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }

.resumen-saldo-dropi {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
  font-size: 13px; color: #8b93a1; flex: 1;
}

.resumen-saldo-dropi-caja { display: contents; }
.resumen-saldo-dropi-resumen { display: none; }

.etiqueta-pais { font-size: 12px; color: #8b93a1; font-weight: 400; }

.boton-ver-anuncio { display: inline-block; text-decoration: none; text-align: center; }

.tarjeta-tienda { flex: 1 1 280px; max-width: 400px; }
.tarjeta-tienda .tarjeta-estado { margin: 6px 0 12px; }

.tarjeta-vista { border-color: #3ecf8e; box-shadow: 0 0 0 1px #3ecf8e; }
.tarjeta-vista .tarjeta-titulo::after {
  content: "✓ Ya vista"; margin-left: 8px; font-size: 11px; font-weight: 500;
  color: #3ecf8e; vertical-align: middle;
}

.total-bibliotecas { margin-bottom: 20px; font-weight: 600; }
.bloque-pais { margin-bottom: 28px; }
.titulo-pais { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

#log-escaneo {
  background: #0c0e12; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 14px; max-height: 220px; overflow-y: auto; font-size: 12.5px;
  white-space: pre-wrap; color: #a9e5c0; margin-bottom: 20px;
}

.divcrea-canvas { background: #0a0c10; border: 1px solid #1c1f26; border-radius: 12px; padding: 24px 28px; }
.divcrea-titulo {
  color: #3ecf8e; text-shadow: 0 0 14px rgba(62,207,142,.55), 0 0 3px rgba(62,207,142,.8);
  letter-spacing: .03em;
}

.tablero-viewport {
  position: relative; overflow: hidden; height: 74vh; min-height: 460px;
  background: #0a0c10; border: 1px solid #1c1f26; border-radius: 12px; cursor: default; touch-action: none;
  user-select: none; -webkit-user-select: none;
}

.tablero-viewport.arrastrando-fondo { cursor: grabbing; }

.tablero-viewport-sin-titulo { height: calc(100vh - 64px); }
.tablero-mundo { position: absolute; top: 0; left: 0; width: max-content; transform-origin: 0 0; padding: 40px 60px; }

.tablero-controles {
  position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 6px;
  background: #12141aee; border: 1px solid #2a2e37; border-radius: 8px; padding: 6px 8px;
}
.tablero-controles button {
  background: none; border: 1px solid #2a2e37; color: #cfd3da; border-radius: 6px;
  width: 26px; height: 26px; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.tablero-controles button:hover { border-color: #3ecf8e; color: #3ecf8e; }
.tablero-controles [data-zoom-actual] { font-size: 12px; color: #8b93a1; min-width: 38px; text-align: center; }
.tablero-controles .separador-controles { width: 1px; align-self: stretch; background: #2a2e37; margin: 0 2px; }

.popup-tablero-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 20;
  display: flex; align-items: center; justify-content: center;
}
.popup-tablero-overlay[hidden] { display: none; }
.popup-tablero {
  background: #12141a; border: 1px solid #2a2e37; border-radius: 12px; padding: 22px;
  width: 340px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px;

  max-height: 85vh; overflow-y: auto;
}
.popup-tablero h3 { margin: 0; }
.popup-tablero .campo { margin: 0; }

#vista-ver-referente .fila, #form-editar-referente .fila, #form-mover-referente .fila { gap: 28px; margin-top: 6px; }
#vista-ver-referente .fila { justify-content: center; }

.popup-tablero-ancho { width: 640px; }
.popup-tablero-xl { width: 1040px; }
.media-ver-referente { display: flex; justify-content: center; }
.media-ver-referente img, .media-ver-referente video {
  max-width: 100%; max-height: 65vh; border-radius: 8px; border: 1px solid #2a2e37; display: block;
}

.media-ver-referente img[hidden], .media-ver-referente video[hidden] { display: none; }

.fila-acciones-ver-referente { flex-wrap: wrap; margin-top: 14px; }

.seccion-nivel-divcrea {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 56px;
}
.seccion-nivel-divcrea:last-child { margin-bottom: 0; }
.titulo-nivel-grande {
  text-align: center; font-size: 46px; font-weight: 800; letter-spacing: .02em;
  margin: 0 0 22px; text-transform: none; color: #e6e6e6;
}

.fila-grupos-negocio-divcrea { display: flex; align-items: flex-start; }
.fila-grupos-negocio-divcrea .seccion-nivel-divcrea { margin-bottom: 0; }
.separador-grupo-negocio-divcrea { width: 5px; margin: 0 120px; }

.fila-tipos-divcrea { display: flex; align-items: flex-start; }
.carril-tipo-divcrea { flex-shrink: 0; }
.separador-carril-divcrea { width: 2px; align-self: stretch; background: #3a4050; margin: 0 28px; }

.carril-cabecera-divcrea { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.pill-tipo-divcrea {
  background: #e9ebee; color: #12141a; font-weight: 700; font-size: 13.5px;
  padding: 7px 16px; border-radius: 20px;
}
.pill-agregar-formato {
  background: none; border: 1px solid #3ecf8e; color: #3ecf8e; font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
}
.pill-agregar-formato:hover { background: rgba(62,207,142,.12); }

.fila-columnas-formato { position: relative; }

.columna-formato {
  position: relative; width: 560px; flex-shrink: 0; background: #12141a; border: 1px solid #2a2e37;
  border-radius: 12px; padding: 18px 18px 20px;
}
.columna-formato-cabecera { padding-right: 60px; padding-top: 22px; }
.columna-formato-nombre { font-size: 21px; font-weight: 700; color: #e6e6e6; }
.columna-formato-linea { border: none; border-top: 1px solid #2a2e37; margin: 10px 0 12px; }
.columna-formato-desc { font-size: 13px; color: #8b93a1; margin: 0 0 14px; }

.eliminar-formato-grande { position: absolute; top: 12px; right: 12px; margin: 0; }
.eliminar-formato-grande button {
  background: none; border: none; color: #5b6270; font-size: 17px; line-height: 1;
  cursor: pointer; padding: 4px 7px; border-radius: 6px;
}
.eliminar-formato-grande button:hover { color: #e0615d; background: #2a2e37; }

.editar-formato-grande { margin: 0; }
.editar-formato-grande:not([open]) { position: absolute; top: 6px; right: 38px; }
.editar-formato-grande summary {
  cursor: pointer; list-style: none; color: #5b6270; font-size: 15px; line-height: 1;
  padding: 6px 7px; border-radius: 6px;
}
.editar-formato-grande summary::-webkit-details-marker { display: none; }
.editar-formato-grande:not([open]) summary:hover { color: #3ecf8e; background: #2a2e37; }
.editar-formato-grande[open] {
  background: #0a0c10; border: 1px solid #2a2e37; border-radius: 8px; padding: 12px; margin-bottom: 12px;
}
.editar-formato-grande[open] summary { color: #8b93a1; font-size: 12px; margin-bottom: 8px; }
.editar-formato-grande form { display: flex; flex-direction: column; gap: 8px; }
.editar-formato-grande input, .editar-formato-grande textarea { width: 100%; }

.circulo-formato-compartido {
  position: absolute; top: 15px; right: 66px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid #12141a;
}

.estado-formato-mini {
  position: absolute; top: 16px; left: 16px; margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: #8b93a1; font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 0; white-space: nowrap;
}
.estado-formato-mini.activo { color: #3ecf8e; }
.estado-formato-mini .punto-usado { width: 8px; height: 8px; border-radius: 50%; background: #4a5060; flex-shrink: 0; }
.estado-formato-mini .punto-usado.punto-usado-si { background: #3ecf8e; box-shadow: 0 0 6px rgba(62,207,142,.8); }

.referentes-titulo-divcrea {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7280; margin-bottom: 10px;
}

.grid-referentes-grande {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start;
}
.referente-grande { position: relative; aspect-ratio: 0.72; }

.referente-grande > .referente-clic {
  position: relative; display: block; width: 100%; height: 100%;
  background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer;
}
.referente-grande img, .referente-grande video {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  border: 1px solid #2a2e37; display: block;
}
.referente-solo-link {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; border: 1px dashed #3a4050; border-radius: 8px; color: #cfd3da;
  font-size: 10.5px; padding: 4px; box-sizing: border-box;
}
.referente-marca-sola { font-size: 12.5px; font-weight: 700; color: #cfd3da; text-transform: uppercase; letter-spacing: .03em; }
.quitar-referente {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  background: #2a1a1a; color: #e08585; border: 1px solid #5a3232; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; opacity: 0; transition: opacity .15s;
}
.referente-grande:hover .quitar-referente { opacity: 1; }

.referente-ganador::after,
.referente-tachado::after {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 700; background: rgba(10,12,16,.35);
  border-radius: 8px; pointer-events: none;
}
.referente-ganador::after { content: "✓"; color: rgba(74,222,128,.9); }
.referente-tachado::after { content: "✕"; color: rgba(224,90,90,.88); }

.etiqueta-nivel {
  position: absolute; top: 6px; left: 6px; z-index: 3; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #0a0c10;
}
.etiqueta-nivel-tofu { background: #3ecf8e; }
.etiqueta-nivel-mofu { background: #e0b23e; }
.etiqueta-nivel-bofu { background: #e0615d; }

.referente-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px;
  max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid #2a2e37; border-radius: 8px;
}
.referente-picker-item {
  position: relative; display: block; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 8px;
  background: #12141a; cursor: pointer; text-align: left; font: inherit; color: #cfd3da; overflow: hidden;
}
.referente-picker-item img, .referente-picker-item video {
  width: 100%; aspect-ratio: 0.72; object-fit: cover; display: block;
}
.referente-picker-item.activo { border-color: #3ecf8e; }
.referente-picker-texto { display: block; padding: 10px; font-size: 12.5px; line-height: 1.4; }

.descripcion-ver-referente {
  margin-top: 14px; padding-top: 20px; border-top: 1px solid #2a2e37; text-align: center;
  color: #cfd3da; font-size: 13px; line-height: 1.5; white-space: pre-wrap;
}
.descripcion-ver-referente[hidden] { display: none; }

.referente-agregar { border: 1px dashed #2a2e37; border-radius: 8px; background: #0a0c10; cursor: pointer; }
.referente-agregar:not([open]) summary {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #5b6270;
}
.referente-agregar summary { list-style: none; cursor: pointer; }
.referente-agregar summary::-webkit-details-marker { display: none; }
.referente-agregar[open] { grid-column: 1 / -1; aspect-ratio: auto; padding: 10px; }
.referente-agregar[open] summary { font-size: 12px; color: #8b93a1; margin-bottom: 8px; }
.referente-agregar form { display: flex; flex-direction: column; gap: 6px; }
.referente-agregar form input { width: 100%; font-size: 12.5px; }

.tarjeta-agregar-producto { border-style: dashed; cursor: pointer; padding: 0; }
.tarjeta-agregar-producto:not([open]) summary {
  min-height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 18px 20px; color: #cfd3da; font-size: 14px; font-weight: 600;
}
.tarjeta-agregar-producto[open] summary { padding: 18px 20px 0; }
.tarjeta-agregar-producto[open] form { padding: 0 20px 18px; }
.tarjeta-agregar-producto summary { cursor: pointer; list-style: none; }
.tarjeta-agregar-producto summary::-webkit-details-marker { display: none; }
.tarjeta-agregar-producto form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 220px; }

.panel-metas { margin-top: 24px; background: #12141a; border: 1px solid #2a2e37; border-radius: 8px; padding: 14px; }
.panel-metas-titulo { font-size: 11px; color: #8b93a1; text-transform: uppercase; letter-spacing: .04em; }
.panel-metas-total { font-size: 22px; font-weight: 700; color: #e6e6e6; margin: 4px 0 12px; }
.panel-metas-niveles { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; }
.panel-metas-nivel { display: flex; justify-content: space-between; }
.panel-metas-nivel.nivel-tofu { color: #3ecf8e; }
.panel-metas-nivel.nivel-mofu { color: #e0b23e; }
.panel-metas-nivel.nivel-bofu { color: #e0615d; }
.panel-metas-editar { margin-top: 12px; }
.panel-metas-editar summary { cursor: pointer; list-style: none; color: #8b93a1; font-size: 12px; }
.panel-metas-editar summary::-webkit-details-marker { display: none; }
.panel-metas-editar form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.panel-metas-editar .campo { margin-bottom: 0; }
.panel-metas-editar input { padding: 6px 8px; font-size: 13px; }
.panel-metas-editar .boton-principal { padding: 6px 10px; font-size: 13px; }

.tarjetas-creativos { display: flex; flex-wrap: wrap; gap: 16px; }
.tarjeta-creativo { flex: 1 1 320px; max-width: 380px; display: flex; flex-direction: column; gap: 10px; background: #12141a; }
.tabla-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabla-mini th { color: #8b93a1; font-weight: 500; text-align: left; padding: 4px 6px 0; }
.tabla-mini td { padding: 2px 6px 6px; }
.guion-creativo {
  background: #0a0c10; border: 1px solid #2a2e37; border-radius: 6px;
  padding: 8px 10px; font-size: 13px; white-space: pre-wrap; margin: 0;
}

.texto-truncado {
  position: relative;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.texto-truncado.texto-expandido { display: block; -webkit-line-clamp: unset; overflow: visible; }
.texto-truncado.texto-expandido::after { display: none; }

.texto-recortado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.3em;
  background: linear-gradient(to bottom, transparent, #12141a 75%);
}
.guion-creativo.texto-recortado::after { background: linear-gradient(to bottom, transparent, #0a0c10 75%); }
.boton-ver-mas {
  background: none; border: none; color: #3ecf8e; font-size: 11px; font-weight: 600;
  cursor: pointer; padding: 2px 0; display: block;
}
.checklist-creativo { display: flex; flex-direction: column; gap: 6px; }
.check-item-creativo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check-item-creativo input { width: auto; }
.acciones-tarjeta-creativo { display: flex; gap: 8px; flex-wrap: wrap; }

.etiqueta-vence { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; margin-left: 4px; }
.vence-verde { background: #163024; color: #3ecf8e; }
.vence-amarillo { background: #33290f; color: #e0b23e; }
.vence-rojo { background: #33181a; color: #e0615d; }
.vence-publicado { background: #23262e; color: #6b7280; text-decoration: line-through; }

.tarjeta-creativo-ganador { border-color: #e0b23e; box-shadow: 0 0 0 1px #e0b23e inset; }
.etiqueta-ganador { color: #e0b23e; font-weight: 600; }

.tarjeta-creativo-fallida { border-color: #4a2f2f; opacity: .75; }
.acciones-testeo-manual .boton-secundario { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.subtitulo-gpt-guiones { margin-top: 12px; margin-bottom: 18px; }
.subtitulo-gpt-guiones .editar-link-en-linea { margin-left: 14px; }
.tabla-mini-centrada th, .tabla-mini-centrada td { text-align: center; }
.fila-filtros-centrada { justify-content: center; }
.detalle-generar-guion-testeo { margin-top: -4px; }
.checklist-testeo-manual { margin-top: 6px; margin-bottom: 6px; }
.nota-advertencia-testeo { color: #e0b23e; font-size: 12.5px; margin: -4px 0 0; }

.etiqueta-testeo { background: #1c2430; color: #7fa8d9; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.etiqueta-escalado { background: #1d3a2c; color: #3ecf8e; padding: 2px 8px; border-radius: 10px; font-weight: 600; }

.id-dropi-principal { color: #ffffff; font-weight: 600; font-size: 14px; }
.id-dropi-variante { color: #7fa8d9; font-weight: 600; font-size: 14px; }
.id-dropi-proveedor { color: #e0b23e; font-weight: 600; font-size: 14px; }
.id-dropi-mas { color: #8b93a1; font-weight: 400; font-size: 12px; }

.celda-stock-variantes { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.stock-no-encontrado { color: #6b7280; font-size: 13px; }

.popover-stock-variantes {
  position: fixed; z-index: 60;
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 8px 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  font-size: 13px; font-weight: 400; text-align: left; white-space: nowrap;
  color: #e6e6e6; cursor: default;
}

.grupos-id-dropi { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.grupo-id-dropi { display: flex; gap: 6px; align-items: center; }
.grupo-id-dropi input[type=text] { flex: 1 1 140px; min-width: 110px; }
.btn-quitar-grupo-id-dropi {
  background: transparent; border: 1px solid #5a3232; color: #e08585;
  border-radius: 6px; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer;
}
.btn-quitar-grupo-id-dropi:hover { background: #2a1a1a; }
.btn-agregar-proveedor-id-dropi { padding: 4px 10px; font-size: 12px; }

.tarjeta-producto-divcrea { position: relative; padding: 0; min-width: 220px; }
.tarjeta-producto-divcrea-link { display: block; padding: 18px 20px; text-decoration: none; color: inherit; }
.eliminar-producto-divcrea { position: absolute; top: 6px; right: 6px; margin: 0; }
.eliminar-producto-divcrea button {
  background: none; border: none; color: #5b6270; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.eliminar-producto-divcrea button:hover { color: #e0615d; background: #2a2e37; }
.resumen-producto-divcrea { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b93a1; margin-top: 8px; }

.detalle-pausados-divcrea summary { cursor: pointer; font-weight: 600; color: #cfd3da; margin-bottom: 12px; }
.tarjeta-producto-divcrea-pausado { padding: 18px 20px; opacity: 0.75; }
.acciones-producto-pausado-divcrea { display: flex; gap: 8px; margin-top: 12px; }
.acciones-producto-pausado-divcrea .boton-principal,
.acciones-producto-pausado-divcrea .boton-secundario { padding: 6px 12px; font-size: 13px; }

.indicador-tienda-testeo { display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.indicador-tienda-testeo.match { background: #163024; color: #3ecf8e; }
.indicador-tienda-testeo.sin-match { background: #2a231f; color: #e3c8bd; }
.editar-link-tienda { margin-top: 6px; }
.editar-link-tienda summary { cursor: pointer; list-style: none; font-size: 12px; text-decoration: underline; color: inherit; }
.editar-link-tienda summary::-webkit-details-marker { display: none; }
.editar-link-tienda form { display: flex; gap: 8px; margin-top: 8px; }
.editar-link-tienda input { min-width: 320px; font-size: 13px; }
.editar-link-tienda .boton-secundario { padding: 6px 12px; font-size: 13px; }

.editar-link-en-linea { display: inline-block; margin-top: 0; margin-left: 8px; vertical-align: baseline; }

.tarjeta-guion-manual { flex: 1 1 260px; max-width: 320px; }
.tarjeta-guion-manual form { margin-top: 8px; }
.detalle-agregar-guion { margin-top: 10px; }
.detalle-agregar-guion summary { cursor: pointer; list-style: none; font-size: 13px; text-decoration: underline; color: inherit; }
.detalle-agregar-guion summary::-webkit-details-marker { display: none; }
.detalle-agregar-guion form { margin-top: 10px; max-width: 480px; }

.pruebas-investigacion { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tarjeta-prueba {
  background: #0a0c10; border: 1px solid #2a2e37; border-radius: 6px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.tarjeta-prueba-ganadora { border-color: #e0b23e; box-shadow: 0 0 0 1px #e0b23e inset; }
.tarjeta-prueba-fallida { border-color: #4a2f2f; opacity: .7; }
.tarjeta-prueba-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: #8b93a1; }
.etiqueta-no-funciono { color: #e0615d; font-weight: 600; }
.acciones-tarjeta-prueba { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones-tarjeta-prueba .boton-secundario { padding: 4px 8px; font-size: 11.5px; }

.enlace-volver { color: #3ecf8e; text-decoration: none; font-weight: 600; font-size: 14px; }
.enlace-volver:hover { text-decoration: underline; }

.fila-generar-ia { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fila-generar-ia #estado-generar-ia { font-size: 13px; }
.fila-generar-ia .campo-busqueda-ia { margin-bottom: 0; min-width: 260px; }
.fila-generar-ia .campo-modo-negocio { margin-bottom: 0; min-width: 220px; }

.campos-regenerar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: #8b93a1; }
.campos-regenerar-titulo { font-weight: 600; color: #c7cdd6; }
.campos-regenerar label { display: flex; align-items: center; gap: 5px; }
.campos-regenerar input { width: auto; }
.campos-regenerar input:disabled { opacity: .5; cursor: not-allowed; }
.campos-regenerar label:has(input:disabled) { opacity: .6; cursor: not-allowed; }

.seccion-opciones-estrategia { margin-bottom: 16px; padding: 14px; border: 1px solid #2a3040; border-radius: 10px; background: #171b26; }
.fila-opciones-estrategia { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 10px; }
.columna-opciones-estrategia { flex: 1 1 220px; min-width: 220px; padding-right: 4px; }
.columna-opciones-estrategia + .columna-opciones-estrategia { border-left: 1px solid #2a3040; padding-left: 32px; }
.columna-opciones-estrategia h4 { margin: 0 0 8px; font-size: 13px; color: #c7cdd6; }
.lista-opciones-estrategia { display: flex; flex-direction: column; gap: 6px; }
.opcion-estrategia-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid #2a3040; border-radius: 8px; cursor: pointer; font-size: 13px; color: #c7cdd6; }
.opcion-estrategia-item:hover { background: #1e2433; }
.opcion-estrategia-item input { width: auto; margin-top: 2px; }
.opcion-estrategia-item:has(input:checked) { border-color: #3ecf8e; background: #163024; color: #eaf7f1; }
.boton-ver-mas-opciones { align-self: flex-start; margin-top: 2px; background: transparent; border: 1px dashed #3a4050; color: #8b93a1; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.boton-ver-mas-opciones:hover { color: #c7cdd6; border-color: #4a5060; }
.fila-botones-opciones-estrategia { margin-top: 18px; }

.opcion-personalizada { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px dashed #3a4050; border-radius: 8px; }
.opcion-personalizada input[type="radio"] { width: auto; flex-shrink: 0; }
.opcion-personalizada input[type="text"] { flex: 1; background: transparent; border: none; color: #eaeef3; font-size: 13px; padding: 0; min-width: 0; }
.opcion-personalizada input[type="text"]:focus { outline: none; }
.opcion-personalizada:has(input[type="radio"]:checked) { border-color: #3ecf8e; border-style: solid; background: #163024; }
.tabs-guion { display: flex; gap: 6px; margin-bottom: 6px; }
.tab-guion {
  background: #1c1f27; border: 1px solid #2a2e37; color: #8b93a1; font-size: 12px;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.tab-guion.activo { background: #1d3a2c; border-color: #3ecf8e; color: #3ecf8e; }

.imagen-creativo { max-width: 100%; border-radius: 8px; margin: 8px 0; display: block; }

.opciones-imagen-generada { display: flex; gap: 14px; margin-top: 8px; }
.opcion-imagen-generada-caja { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.opcion-imagen-generada {
  width: 140px; height: 140px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid #2a2e37; opacity: 0.7;
}
.opcion-imagen-generada:hover { opacity: 0.9; }
.opcion-imagen-generada.seleccionada { border-color: #3ecf8e; opacity: 1; }
.opcion-imagen-generada-etiqueta { font-size: 12px; color: #8b93a1; }

.caja-prompt-imagen { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.caja-prompt-imagen textarea { width: 100%; font-family: Consolas, monospace; font-size: 13px; }

.tabla-publicidad th, .tabla-publicidad td { white-space: nowrap; }

.tabla-publicidad .col-texto, .tabla-publicidad .col-num { text-align: center; }
.tabla-publicidad .col-num { font-variant-numeric: tabular-nums; }
.tabla-publicidad tbody tr:hover { background: #232a1f33; }

.tabla-publicidad tbody tr.fila-nuevo-grupo td { border-top: 3px solid #4a5568; }

.tabla-publicidad td.celda-cambio-positivo { background: #1f3d2a; color: #7fe0a8; font-weight: 600; }
.tabla-publicidad td.celda-cambio-negativo { background: #3d1f1f; color: #f0a3a3; font-weight: 600; }

.texto-positivo { color: #7fe0a8; }
.texto-negativo { color: #f0a3a3; }

.texto-naranja { color: #ff9142; }

.boton-apagar-campana { display: block; margin: 6px auto 0; padding: 4px 10px; font-size: 12px; }

.tabla-publicidad td.celda-cambio-limite { background: #2e323c; color: #a8adb8; font-weight: 600; }

.tabla-publicidad td.celda-cambio-dia1 { color: #6b7280; font-style: italic; }

.tabla-publicidad td.celda-cambio-vacio { font-style: italic; }

.tabla-publicidad td.celda-cpa-sin-venta { color: #f0a3a3; font-weight: 700; }
.tabla-publicidad td.col-cpa-hoy { font-weight: 700; }

.tabla-publicidad td.celda-negrilla { color: #ffffff; font-weight: 800; }

.tabla-publicidad td.celda-alerta-fondo { background: #3d1f1f; }

.tabla-publicidad tr.fila-apagada td { opacity: 0.5; }

#tabla-historial-campanas tr.fila-apagada td { opacity: 0.5; }
.boton-activo { padding: 3px 9px; font-size: 12px; }
.boton-activo.activo { background: #1f3d24; border-color: #2f6b3a; color: #7ee08a; opacity: 1; }

.campo-busqueda-tabla {
  display: block; width: 260px; margin-bottom: 12px;
  background: #12151b; border: 1px solid #2a2e37; border-radius: 6px;
  padding: 7px 10px; color: #e6e8eb; font-size: 13px;
}

#selector-columnas-publicidad { position: relative; }
#selector-columnas-publicidad summary { list-style: none; }
#selector-columnas-publicidad summary::-webkit-details-marker { display: none; }
.lista-columnas-publicidad {
  position: absolute; z-index: 5; top: 100%; left: 0; margin-top: 6px;
  background: #1c1f26; border: 1px solid #2a2e37; border-radius: 8px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
  min-width: 220px; max-height: 320px; overflow-y: auto;
}
.lista-columnas-publicidad label { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.fila-seleccionar-todo-columnas { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #2a2e37; }
.campo-busqueda-tabla::placeholder { color: #6b7280; }

.chat-marca {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 140px);
}
.chat-mensajes {
  flex: 1; padding: 8px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-vacio { margin: auto; text-align: center; max-width: 420px; }
.historial-chat-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid #2a2e37; font-size: 13px;
}
.historial-chat-item:last-child { border-bottom: none; }
.historial-chat-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.burbuja {
  font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}

.burbuja-usuario {
  align-self: stretch; background: #1f3d2f; color: #e6e6e6;
  padding: 10px 14px; border-radius: 10px;
}
.burbuja-ia { align-self: stretch; color: #e6e6e6; }
.burbuja-escribiendo { display: flex; gap: 4px; align-items: center; padding: 14px; }
.burbuja-escribiendo[hidden] { display: none; }
.burbuja-escribiendo span {
  width: 6px; height: 6px; border-radius: 50%; background: #8b93a1;
  animation: chat-parpadeo 1.2s infinite ease-in-out;
}
.burbuja-escribiendo span:nth-child(2) { animation-delay: .2s; }
.burbuja-escribiendo span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-parpadeo {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.chat-pie { position: sticky; bottom: 0; background: #16181d; }
.chat-form {
  display: flex; gap: 10px; padding: 14px 0 20px;
}
.chat-form textarea { flex: 1; min-height: 40px; max-height: 160px; resize: none; }
.chat-form .boton-principal { align-self: flex-end; }
.burbuja-imagen { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; cursor: zoom-in; }
.burbuja-imagen + .burbuja-imagen { margin-top: 6px; }
.burbuja-imagen + .burbuja-texto { margin-top: 8px; }
.chat-imagen-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 50; padding: 30px;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.chat-imagen-lightbox[hidden] { display: none; }
.chat-imagen-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.chat-boton-icono {
  align-self: flex-end; background: transparent; color: #8b93a1; border: 1px solid #2a2e37;
  border-radius: 8px; width: 40px; height: 40px; font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.chat-boton-icono:hover { background: #262a33; color: #e6e6e6; }
.chat-boton-icono:disabled { opacity: 0.5; cursor: default; }
.chat-previsualizacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 0;
  background: #1a1d24;
}
.chat-previsualizacion[hidden] { display: none; }
.chat-previsualizacion-item { position: relative; }
.chat-previsualizacion-item img { max-height: 64px; max-width: 100px; border-radius: 8px; object-fit: cover; display: block; }
.chat-previsualizacion-item button {
  position: absolute; top: -7px; right: -7px;
  background: #1a1d24; color: #e08585; border: 1px solid #5a3232; border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 12px; padding: 0;
}

.barra-movil { display: none; }
.fondo-sidebar-movil { display: none; }

@media (max-width: 860px) {
  .barra-movil {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 80;
    background: #1c1f26; border-bottom: 1px solid #2a2e37;
    padding: 12px 16px;
  }
  .boton-menu-movil {
    background: transparent; border: 1px solid #2a2e37; border-radius: 8px;
    color: #e6e6e6; font-size: 20px; line-height: 1; padding: 6px 10px; cursor: pointer;
  }
  .barra-movil-titulo { font-weight: 600; font-size: 15px; }

  .layout { flex-direction: column; min-height: 0; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: min(82vw, 300px);
    z-index: 100; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.sidebar-abierta { transform: translateX(0); }

  .fondo-sidebar-movil.fondo-sidebar-movil-visible {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(0,0,0,.55);
  }

  .contenido { padding: 18px 16px 32px; }

  h1 { font-size: 22px; }
  .bloque { padding: 16px; }
  .bloque h2 { font-size: 17px; }

  .tarjetas { flex-direction: column; }
  .tarjeta { width: 100%; min-width: 0; }

  .fila { flex-direction: column; gap: 12px; }
  .fila .campo { width: 100%; }

  .campo-rango-fechas, .campo-productos { min-width: 0; width: calc(50% - 5px); }

  .campo-rango-fechas summary, .campo-productos summary { width: 100%; }

  .boton-principal, .boton-secundario { min-height: 40px; }

  .sub-layout { flex-direction: column; gap: 14px; align-items: stretch; }
  .sub-sidebar { width: 100%; }
  .sub-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sub-nav-item { padding: 8px 12px; font-size: 13px; }
  .boton-colapsar-sidebar { display: none; }

  .cabecera-busqueda { flex-wrap: wrap; }

  .cabecera-chat-claude { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .cabecera-chat-claude h1 { font-size: 18px; white-space: nowrap; }
  .fila-chat-claude { flex-direction: row; gap: 8px; }
  .fila-chat-claude .boton-secundario { padding: 8px 12px; font-size: 13px; min-height: 36px; white-space: nowrap; }

  .comparativo-mensual-linea { white-space: nowrap; font-size: 13px; }
  .comparativo-mensual-select { font-size: 12px; padding: 4px 6px; }
  .resumen-saldo-dropi-caja { display: block; width: 100%; order: 3; }
  .resumen-saldo-dropi-resumen { display: none; }
  .resumen-saldo-dropi-caja .resumen-saldo-dropi {
    flex-direction: column; gap: 6px; padding: 6px 0 10px; font-size: 13px;
  }

  .etiqueta-invisible-desktop { display: none; }
  .fila-filtros { gap: 10px; margin-bottom: 10px; }

  .bloque { margin-bottom: 16px; }

  .oculta-en-movil { display: none !important; }

  .col-trazabilidad { flex: 1 1 100%; }
  .col-trazabilidad .tarjetas { flex-wrap: wrap; flex-direction: column; }
  .col-trazabilidad .tarjeta { width: 100%; }

  .col-lateral { flex: 1 1 100%; }

  .col-lateral { text-align: center; }
  .leyenda-donut { align-items: center; }

  .fila-trazabilidad { flex-direction: column; align-items: center; }

  .item-utilidad { display: block; margin: 4px 0; }

  .signo-resta { display: none; }

  .fila-trazabilidad { gap: 12px; }

  .separador-descontinuo { display: none; }

  .chat-marca { min-height: calc(100vh - 155px); }

  #form-agregar-campana { flex-direction: column; align-items: stretch; }

  #form-agregar-campana .campo { width: 100%; margin-bottom: 0; }

  .fila-plataforma-cuenta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  #form-agregar-campana .fila-plataforma-cuenta .campo { width: auto; }

  #form-agregar-campana .fila-plataforma-cuenta select {
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #8b93a1 50%), linear-gradient(135deg, #8b93a1 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  #form-agregar-campana .fila-plataforma-cuenta select,
  #form-agregar-campana .fila-plataforma-cuenta input { height: 40px; box-sizing: border-box; }
  .grupo-id-dropi { flex-wrap: wrap; }

  #form-agregar-campana > .campo:last-child { margin-top: 10px; margin-bottom: 16px; }
}
.chat-previsualizacion-item button:hover { background: #2a1a1a; }

.ico { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.herramienta:hover .ico, .herramienta.activa .ico, .sub-nav-item:hover .ico, .sub-nav-item.activo .ico { opacity: 1; }
.sub-nav-item { display: flex; align-items: center; gap: 10px; }

.herramienta > .punto { display: none; }