/* Identidad visual de infantilesandrea.com: Titan One (títulos), Rubik (texto), Nunito (etiquetas). */
:root {
    --magenta: #DE2D79;
    --magenta-hover: #C4246A;
    --magenta-oscuro: #912855;
    --rosa: #F09CA7;
    --rosa-claro: #FFE2DF;
    --rosa-fondo: #FFF6F8;
    --azul: #1A2B5F;
    --azul-gris: #6A7597;
    --naranja: #FC9E00;
    --amarillo: #F4D054;
    --celeste: #8ADFF1;
    --celeste-claro: #E6F8FC;
    --lila: #B976C5;
    --verde: #2BB673;
    --blanco: #FFFFFF;
    --borde: #F3D9E1;
    --sombra: 0 6px 20px rgba(26, 43, 95, 0.08);
    --radio: 18px;
    --fuente-titulo: "Titan One", "Rubik", sans-serif;
    --fuente-texto: "Rubik", system-ui, sans-serif;
    --fuente-etiqueta: "Nunito", "Rubik", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: var(--fuente-texto);
    color: var(--azul);
    background: var(--rosa-fondo);
    -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2 { font-family: var(--fuente-titulo); font-weight: 400; margin: 0; letter-spacing: 0.3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
.sutil { color: var(--azul-gris); margin: 0; }

/* Franja arcoíris del logo */
.arcoiris {
    height: 6px;
    background: linear-gradient(90deg, var(--amarillo) 0 16.6%, var(--magenta) 0 33.3%, var(--azul-gris) 0 50%, var(--celeste) 0 66.6%, var(--rosa) 0 83.3%, var(--lila) 0);
}

/* ─── Botones ─────────────────────────────────────────────────────────── */
.boton {
    border: 0;
    border-radius: 999px;
    padding: 12px 26px;
    font-family: var(--fuente-texto);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 14px;
    transition: background 0.15s, transform 0.1s;
}
.boton:active { transform: scale(0.97); }
.boton-principal { background: var(--magenta); color: var(--blanco); }
.boton-principal:hover { background: var(--magenta-hover); }
.boton-principal:disabled { background: var(--rosa); cursor: wait; }
.boton-secundario { background: var(--rosa-claro); color: var(--magenta-oscuro); }
.boton-secundario:hover { background: #FFD3CF; }
.boton-texto { background: none; border: 0; color: var(--azul-gris); font-weight: 500; padding: 8px 10px; border-radius: 10px; }
.boton-texto:hover { color: var(--magenta); background: var(--rosa-claro); }
.boton-icono { background: var(--rosa-claro); border: 0; width: 38px; height: 38px; border-radius: 50%; color: var(--magenta); font-size: 18px; }

/* ─── Ingreso ─────────────────────────────────────────────────────────── */
.ingreso { min-height: calc(100% - 6px); display: grid; place-items: center; padding: 24px 16px; }
.tarjeta-ingreso {
    width: 100%; max-width: 380px; background: var(--blanco); border-radius: 28px;
    box-shadow: var(--sombra); padding: 32px 28px; text-align: center; display: grid; gap: 14px;
}
.logo-ingreso { width: 180px; margin: 0 auto; }
.tarjeta-ingreso h1 { color: var(--magenta); font-size: 30px; }
.campo { display: grid; gap: 6px; text-align: left; }
.campo span { font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--azul-gris); }
.campo input, .lista-herramientas input {
    border: 2px solid var(--borde); border-radius: 14px; padding: 12px 14px; background: var(--blanco); width: 100%;
}
.campo input:focus, .lista-herramientas input:focus { border-color: var(--magenta); outline: none; }
.error { color: var(--magenta-oscuro); min-height: 1.2em; margin: 0; font-size: 14px; }

/* ─── Estructura ──────────────────────────────────────────────────────── */
.panel { height: calc(100% - 6px); display: flex; flex-direction: column; }
@supports (padding: env(safe-area-inset-bottom)) {
    .redactar, .grabando { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .cabecera { padding-top: max(10px, env(safe-area-inset-top)); }
}
.cabecera {
    display: flex; align-items: center; gap: 20px; padding: 10px 24px;
    background: var(--blanco); border-bottom: 1px solid var(--borde); flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 10px; }
.logo { height: 46px; }
.titulo-marca { font-family: var(--fuente-titulo); font-size: 24px; color: var(--azul); }
.pestanas { display: flex; gap: 4px; margin: 0 auto; }
.pestana {
    background: none; border: 0; padding: 10px 16px; border-radius: 999px;
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; font-size: 14px; color: var(--magenta);
    display: inline-flex; align-items: center; gap: 6px;
}
.pestana:hover { color: var(--rosa); }
.pestana.activa { background: var(--rosa-claro); color: var(--magenta-oscuro); }
.contador {
    background: var(--naranja); color: var(--blanco); border-radius: 999px; font-size: 11px;
    padding: 2px 7px; font-family: var(--fuente-etiqueta); font-weight: 900;
}
.cabecera-derecha { display: flex; align-items: center; gap: 10px; }
.lineas { display: flex; gap: 6px; flex-wrap: wrap; }
.linea {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    background: var(--rosa-fondo); border: 1px solid var(--borde); font-family: var(--fuente-etiqueta);
    font-weight: 800; font-size: 12px; color: var(--azul);
}
.linea[data-estado="qr"] { background: #FFF4DC; border-color: var(--amarillo); cursor: pointer; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--azul-gris); }
.linea[data-estado="conectado"] .punto { background: var(--verde); }
.linea[data-estado="cargando"] .punto, .linea[data-estado="iniciando"] .punto { background: var(--naranja); animation: latido 1.2s infinite; }
.linea[data-estado="qr"] .punto { background: var(--amarillo); animation: latido 1.2s infinite; }
.linea[data-estado="desconectado"] .punto { background: var(--magenta); }
@keyframes latido { 50% { opacity: 0.3; } }

.vista { flex: 1; min-height: 0; }

/* ─── Chats ───────────────────────────────────────────────────────────── */
.vista-chats { display: grid; grid-template-columns: 360px 1fr; }
.lista-chats { background: var(--blanco); border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; }
.lista-herramientas { padding: 14px; display: grid; gap: 10px; border-bottom: 1px solid var(--borde); }
.filtros { display: flex; gap: 6px; }
.filtro {
    flex: 1; border: 2px solid var(--borde); background: var(--blanco); border-radius: 999px; padding: 6px 0;
    font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 13px; color: var(--azul-gris);
}
.filtro.activo { border-color: var(--magenta); color: var(--magenta); background: var(--rosa-fondo); }
.chats { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.chat-item {
    display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
    padding: 10px; border-radius: 16px; cursor: pointer;
}
.chat-item:hover { background: var(--rosa-fondo); }
.chat-item.seleccionado { background: var(--rosa-claro); }
.avatar {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-family: var(--fuente-titulo); font-size: 20px; color: var(--blanco);
}
.chat-texto { min-width: 0; }
.chat-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ultimo { color: var(--azul-gris); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-meta { display: grid; justify-items: end; gap: 6px; }
.chat-hora { font-size: 12px; color: var(--azul-gris); }
.etiqueta {
    font-family: var(--fuente-etiqueta); font-weight: 900; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 3px 8px; border-radius: 999px;
}
.etiqueta-bot { background: var(--celeste-claro); color: #137C93; }
.etiqueta-manual { background: #FFF0D6; color: #A36400; }
.vacio { text-align: center; color: var(--azul-gris); padding: 40px 20px; line-height: 1.6; }

/* Conversación */
.conversacion { display: flex; min-height: 0; min-width: 0; }
.sin-seleccion { margin: auto; text-align: center; max-width: 360px; padding: 24px; display: grid; gap: 10px; }
.logo-grande { width: 220px; margin: 0 auto 8px; opacity: 0.9; }
.sin-seleccion h2 { color: var(--magenta); font-size: 30px; }
.chat-activo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-cabecera {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--blanco);
    border-bottom: 1px solid var(--borde);
}
.volver { display: none; }
.chat-datos { flex: 1; min-width: 0; }
.chat-datos h2 { font-size: 21px; color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-datos p { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icono { display: inline-flex; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 4px; flex: none; }
.icono svg { width: 100%; height: 100%; }
.media-sin-archivo { display: inline-flex; align-items: center; color: var(--azul-gris); }
.modo { display: flex; background: var(--rosa-fondo); border: 2px solid var(--borde); border-radius: 999px; padding: 3px; }
.modo-opcion {
    border: 0; background: none; padding: 7px 14px; border-radius: 999px;
    font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 13px; color: var(--azul-gris);
}
.modo-opcion.activo[data-modo="bot"] { background: var(--celeste); color: var(--azul); }
.modo-opcion.activo[data-modo="manual"] { background: var(--naranja); color: var(--blanco); }

.mensajes {
    flex: 1; overflow-y: auto; padding: 20px clamp(12px, 4vw, 48px); display: flex; flex-direction: column; gap: 8px;
    background:
        radial-gradient(circle at 12px 12px, rgba(222, 45, 121, 0.06) 2px, transparent 2.5px) 0 0 / 28px 28px,
        var(--rosa-fondo);
}
.dia {
    align-self: center; font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 12px; color: var(--azul-gris);
    background: var(--blanco); padding: 4px 12px; border-radius: 999px; margin: 8px 0; box-shadow: 0 1px 3px rgba(26, 43, 95, 0.08);
}
.burbuja {
    max-width: min(72%, 560px); padding: 10px 14px 6px; border-radius: 18px; box-shadow: 0 1px 2px rgba(26, 43, 95, 0.08);
    line-height: 1.45; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.burbuja a { color: var(--magenta); }
.burbuja .autor { display: block; font-family: var(--fuente-etiqueta); font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
.burbuja .hora { display: block; text-align: right; font-size: 11px; color: var(--azul-gris); margin-top: 4px; }
.burbuja-cliente { align-self: flex-start; background: var(--blanco); border-bottom-left-radius: 6px; }
.burbuja-cliente .autor { color: var(--magenta); }
.burbuja-bot { align-self: flex-end; background: var(--celeste-claro); border-bottom-right-radius: 6px; }
.burbuja-bot .autor { color: #137C93; }
.burbuja-asesor { align-self: flex-end; background: var(--rosa-claro); border-bottom-right-radius: 6px; }
.burbuja-asesor .autor { color: var(--magenta-oscuro); }
.burbuja-aviso { align-self: center; background: #FFF4DC; font-size: 13px; max-width: 80%; }
.burbuja img, .burbuja video { max-width: 100%; max-height: 360px; border-radius: 12px; display: block; margin: 2px 0 4px; object-fit: contain; }
.burbuja audio { width: 260px; max-width: 100%; }

.redactar { display: flex; gap: 10px; padding: 12px 20px 6px; background: var(--blanco); border-top: 1px solid var(--borde); align-items: flex-end; }
.redactar textarea {
    flex: 1; resize: none; border: 2px solid var(--borde); border-radius: 18px; padding: 11px 16px; max-height: 140px; background: var(--rosa-fondo);
}
.redactar textarea:focus { border-color: var(--magenta); outline: none; background: var(--blanco); }
.nota-redactar { margin: 0; padding: 0 22px 10px; background: var(--blanco); font-size: 12px; color: var(--azul-gris); }
.redactar .boton-icono { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 11px; }
.redactar .boton-icono svg { width: 100%; height: 100%; }
.icono-boton { display: block; width: 100%; height: 100%; }
.boton-grabar { background: var(--celeste-claro); color: #137C93; }
.boton-grabar:hover, .boton-adjuntar:hover { filter: brightness(0.96); }
.boton-grabar.no-disponible { opacity: 0.45; }

/* Archivo listo para enviar */
.adjunto {
    display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--rosa-fondo);
    border-top: 1px solid var(--borde);
}
.adjunto-vista {
    width: 56px; height: 56px; border-radius: 12px; background: var(--blanco); display: grid; place-items: center;
    overflow: hidden; flex: none; color: var(--magenta); padding: 12px;
}
.adjunto-vista.con-imagen { padding: 0; }
.adjunto-vista img, .adjunto-vista video { width: 100%; height: 100%; object-fit: cover; }
.adjunto-vista svg { width: 100%; height: 100%; }
.adjunto-datos { flex: 1; min-width: 0; display: grid; }
.adjunto-datos strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adjunto-datos span { font-size: 13px; }

/* Varios archivos listos para enviar */
.adjunto { align-items: flex-start; }
.adjuntos-lista { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; min-width: 0; }
.adjunto-item {
    display: flex; align-items: center; gap: 10px; background: var(--blanco); border-radius: 14px; padding: 6px 8px 6px 6px;
    flex: none; max-width: 260px; position: relative; box-shadow: 0 1px 3px rgba(26, 43, 95, 0.08);
}
.adjunto-item .adjunto-vista { width: 48px; height: 48px; padding: 10px; }
.adjunto-item .adjunto-vista.con-imagen { padding: 0; }
.adjunto-item .adjunto-datos strong { font-size: 13px; max-width: 150px; }
.adjunto-item .adjunto-datos span { font-size: 12px; }
.quitar-adjunto {
    border: 0; background: var(--rosa-claro); color: var(--magenta-oscuro); width: 24px; height: 24px; border-radius: 50%;
    flex: none; font-size: 15px; line-height: 1; padding: 0;
}

/* Menú del clip */
.contenedor-adjuntar { position: relative; flex: none; }
.menu-adjuntar {
    position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 5; background: var(--blanco); border-radius: 18px;
    box-shadow: 0 10px 30px rgba(26, 43, 95, 0.18); padding: 8px; display: grid; gap: 2px; min-width: 190px;
}
.menu-adjuntar button {
    display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 12px; border-radius: 12px;
    font-weight: 500; text-align: left; color: var(--azul);
}
.menu-adjuntar button:hover, .menu-adjuntar button:focus-visible { background: var(--rosa-fondo); }
.icono-menu { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 8px; color: var(--blanco); flex: none; }
.icono-menu svg { width: 100%; height: 100%; }
[data-entrada="camara"] .icono-menu { background: var(--magenta); }
[data-entrada="video"] .icono-menu { background: var(--naranja); }
[data-entrada="galeria"] .icono-menu { background: var(--lila); }
[data-entrada="documento"] .icono-menu { background: var(--azul); }

/* Instalar la app */
.boton-instalar {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--magenta); color: var(--blanco);
    border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 13px;
}
.boton-instalar .icono { margin: 0; }

/* Grabación */
.grabando {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px 6px; background: var(--blanco); border-top: 1px solid var(--borde);
    flex-wrap: wrap;
}
.grabando strong { font-variant-numeric: tabular-nums; margin-right: auto; }
.punto-rojo { width: 12px; height: 12px; border-radius: 50%; background: var(--magenta); animation: latido 1s infinite; }

/* Soltar archivos sobre la conversación */
.conversacion.soltando .mensajes { outline: 3px dashed var(--magenta); outline-offset: -12px; }

/* Documentos dentro de los mensajes */
.documento {
    display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.7); border-radius: 12px;
    padding: 10px 12px; margin: 2px 0 4px; text-decoration: none; color: var(--azul); min-width: 220px;
}
.documento:hover { background: var(--blanco); }
.documento .icono-doc { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--magenta); color: var(--blanco); flex: none; padding: 8px; }
.documento .icono-doc svg { width: 100%; height: 100%; }
.documento .doc-nombre { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; white-space: normal; }
.documento .doc-tipo { font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--azul-gris); }
.burbuja a.ver-imagen { display: block; }
.burbuja img.sticker { width: 140px; background: none; }
.burbuja-voz { display: flex; align-items: center; gap: 6px; }
.burbuja-voz .icono { color: var(--magenta); }

/* ─── Solicitudes y avisos ───────────────────────────────────────────── */
.vista-lista { overflow-y: auto; padding: 28px clamp(16px, 4vw, 48px); }
.encabezado-vista { margin-bottom: 20px; display: grid; gap: 4px; }
.encabezado-vista h2 { color: var(--magenta); font-size: 32px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tarjeta {
    background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; display: grid; gap: 10px;
    border-top: 5px solid var(--naranja);
}
.tarjeta[data-estado="contactado"] { border-top-color: var(--celeste); }
.tarjeta[data-estado="cerrado"] { border-top-color: var(--azul-gris); opacity: 0.75; }
.tarjeta h3 { margin: 0; font-family: var(--fuente-texto); font-weight: 600; font-size: 18px; }
.tarjeta .dato { font-size: 14px; color: var(--azul-gris); }
.tarjeta .interes { background: var(--rosa-fondo); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.tarjeta .interes a { color: var(--magenta); overflow-wrap: anywhere; }
.tarjeta-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tarjeta-pie select { border: 2px solid var(--borde); border-radius: 999px; padding: 6px 12px; background: var(--blanco); font-size: 13px; }
.enlace-boton {
    font-size: 13px; font-weight: 500; text-decoration: none; color: var(--magenta); background: var(--rosa-claro);
    padding: 7px 12px; border-radius: 999px; border: 0;
}
.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.aviso {
    background: var(--blanco); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra);
    display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start;
}
.aviso.nuevo { box-shadow: var(--sombra), inset 4px 0 0 var(--magenta); }
.aviso-icono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 9px; background: var(--rosa-claro); color: var(--magenta); }
.aviso-icono svg { width: 100%; height: 100%; }
.aviso[data-tipo="solicitud"] .aviso-icono { background: #FFF0D6; color: var(--naranja); }
.aviso[data-tipo="no_contactar"] .aviso-icono { background: #ECEEF4; color: var(--azul-gris); }
.aviso-texto { white-space: pre-wrap; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.aviso-hora { font-size: 12px; color: var(--azul-gris); margin-bottom: 4px; }

/* ─── Catálogo ───────────────────────────────────────────────────────── */
.encabezado-catalogo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.herramientas-catalogo { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.herramientas-catalogo input, .herramientas-catalogo select, .campos-producto input, .campos-producto select, .campos-producto textarea {
    border: 2px solid var(--borde); border-radius: 14px; padding: 10px 14px; background: var(--blanco); font-size: 14px;
}
.herramientas-catalogo input { flex: 1; min-width: 220px; }
.herramientas-catalogo input:focus, .herramientas-catalogo select:focus, .campos-producto :is(input, select, textarea):focus { border-color: var(--magenta); outline: none; }
.ayuda-catalogo {
    background: #FFF8E6; border: 1px dashed var(--amarillo); border-radius: 14px; padding: 10px 14px; font-size: 13px;
    color: var(--azul); margin-bottom: 18px; line-height: 1.5;
}
.ayuda-catalogo code { background: var(--blanco); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.producto {
    background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
    display: flex; flex-direction: column; cursor: pointer; transition: transform 0.15s;
}
.producto:hover { transform: translateY(-2px); }
.producto.agotado { opacity: 0.6; }
.producto-foto { aspect-ratio: 1; background: var(--rosa-fondo); position: relative; display: grid; place-items: center; color: var(--rosa); }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.producto-foto .icono { width: 48px; height: 48px; margin: 0; }
.producto-foto .contador-fotos {
    position: absolute; right: 8px; bottom: 8px; background: rgba(26, 43, 95, 0.75); color: var(--blanco);
    font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 11px; padding: 3px 8px; border-radius: 999px;
}
.producto-foto .sello {
    position: absolute; left: 8px; top: 8px; font-family: var(--fuente-etiqueta); font-weight: 900; font-size: 11px;
    text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--azul-gris); color: var(--blanco);
}
.producto-cuerpo { padding: 12px 14px 14px; display: grid; gap: 4px; }
.producto-cuerpo h3 { margin: 0; font-family: var(--fuente-texto); font-weight: 600; font-size: 15px; line-height: 1.3; }
.producto-ref { font-family: var(--fuente-etiqueta); font-weight: 800; font-size: 11px; color: var(--azul-gris); text-transform: uppercase; }
.producto-precio { font-family: var(--fuente-titulo); color: var(--magenta); font-size: 20px; }
.producto-precio.sin-precio { font-family: var(--fuente-texto); font-size: 13px; color: var(--naranja); font-weight: 500; }
.producto-detalle { font-size: 12.5px; color: var(--azul-gris); }

.dialogo-producto { max-width: 640px; text-align: left; max-height: calc(100% - 32px); overflow-y: auto; }
.dialogo-producto h2 { text-align: center; }
.producto-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.producto-fotos .miniatura { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; position: relative; background: var(--rosa-fondo); }
.producto-fotos .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.producto-fotos .miniatura.nueva { outline: 3px solid var(--celeste); outline-offset: -3px; }
.producto-fotos .quitar {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0;
    background: rgba(26, 43, 95, 0.75); color: var(--blanco); font-size: 15px; line-height: 1; padding: 0;
}
.fila-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fila-final { margin-top: 8px; }
.espacio { flex: 1; }
.boton-archivo { cursor: pointer; display: inline-block; }
.campos-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.campos-producto .campo-ancho { grid-column: 1 / -1; }
.campos-producto textarea { resize: vertical; }
.interruptor { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--magenta); }
.peligro { color: var(--magenta-oscuro); }
.boton:disabled { opacity: 0.6; cursor: wait; }

/* ─── Diálogo QR y aviso flotante ────────────────────────────────────── */
.dialogo {
    border: 0; border-radius: 28px; padding: 28px; box-shadow: 0 20px 60px rgba(26, 43, 95, 0.25);
    text-align: center; max-width: 380px; width: calc(100% - 32px); color: var(--azul);
}
.dialogo::backdrop { background: rgba(26, 43, 95, 0.35); }
.dialogo h2 { color: var(--magenta); font-size: 26px; margin-bottom: 14px; }
.dialogo img { border-radius: 16px; border: 6px solid var(--rosa-claro); max-width: 100%; height: auto; }
.pasos { text-align: left; color: var(--azul-gris); font-size: 14px; line-height: 1.6; padding-left: 20px; margin: 16px 0 20px; }
.aviso-flotante {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--azul); color: var(--blanco);
    padding: 12px 20px; border-radius: 999px; box-shadow: var(--sombra); font-size: 14px; z-index: 10; max-width: calc(100% - 32px);
}
.aviso-flotante.error { background: var(--magenta-oscuro); }

/* ─── Celular ─────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .cabecera { padding: 8px 16px; gap: 8px; }
    .logo { height: 38px; }
    .titulo-marca { display: none; }
    .pestanas { order: 3; width: 100%; justify-content: space-between; }
    .pestana { padding: 8px 10px; font-size: 13px; }
    .cabecera-derecha { margin-left: auto; }
    .boton-instalar { padding: 6px 10px; font-size: 12px; }
    .linea { padding: 5px 10px; font-size: 11px; }
    .cabecera-derecha { gap: 6px; }
    .cabecera-derecha .boton-texto { padding: 6px; }
    .vista-chats { grid-template-columns: 1fr; }
    .vista-chats.mostrando-chat .lista-chats { display: none; }
    .vista-chats:not(.mostrando-chat) .conversacion { display: none; }
    .volver { display: grid; place-items: center; }
    .chat-cabecera { padding: 10px 12px; gap: 8px; }
    .chat-cabecera .avatar { width: 38px; height: 38px; font-size: 16px; }
    .chat-datos h2 { font-size: 18px; }
    .modo-opcion { padding: 6px 10px; }
    .modo { margin-left: auto; }
    .burbuja { max-width: 88%; }
    .productos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .producto-cuerpo { padding: 10px; }
    .campos-producto { grid-template-columns: 1fr; }
    .dialogo-producto { padding: 20px 16px; }
    .redactar { padding: 10px 12px 6px; gap: 6px; }
    .redactar .boton-icono { width: 40px; height: 40px; padding: 9px; }
    .redactar .boton-principal { padding: 12px 16px; }
    .adjunto, .grabando { padding-left: 12px; padding-right: 12px; }
    .nota-redactar { display: none; }
    .redactar { padding-bottom: 10px; }
}