/* ═══ Maca móvil v1.5 — conversación de Maca a pantalla completa ═══
   Pedido textual de Fernando (prueba real 8-oct-2026): mobile-first a 390px, escala a una
   columna central de máx. 820px en escritorio. Usa las MISMAS variables de public/app.css
   (nunca hex fijo) para que funcione en modo claro y oscuro sin reglas propias de tema —
   las únicas excepciones son --royal/--luster/--tan/--habanero/--depths, que ya son
   constantes de marca en ambos modos (no se redefinen en el bloque oscuro de app.css).

   No es un panel/modal: es una vista fija que tapa TODA la interfaz, incluida la barra
   inferior de navegación (.bottomnav). Por eso usa [hidden] nativo (display:none) en vez
   de competir con él por especificidad — ver la regla ":not([hidden])" de abajo, patrón
   necesario porque un selector por id siempre le gana a "[hidden]" si ambos ponen
   "display". body.maca-open congela el scroll de fondo mientras la vista está abierta.

   v1.6 (pulido visual, pedido de Fernando tras probar v1.5 en su teléfono): radio único
   var(--r2) en los contenedores que faltaban, burbujas translúcidas con blur vía
   color-mix() sobre los tokens de marca fijos, scrollbar invisible en reposo, compositor
   flotante con margen y textarea de 2 líneas mínimo, y encabezados de markdown degradados
   a párrafo en negrita — detalle de cada decisión en el bloque correspondiente abajo. */

body.maca-open{overflow:hidden}

:root{
  --user-bubble-bg:color-mix(in srgb, var(--royal) 90%, transparent);
  --maca-bubble-bg:color-mix(in srgb, var(--tan) 40%, transparent);
  --maca-bubble-border:color-mix(in srgb, var(--tan) 50%, transparent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --maca-bubble-bg:color-mix(in srgb, var(--tan) 65%, transparent);
  --maca-bubble-border:color-mix(in srgb, var(--tan) 70%, transparent);
}}
:root[data-theme="dark"]{
  --maca-bubble-bg:color-mix(in srgb, var(--tan) 65%, transparent);
  --maca-bubble-border:color-mix(in srgb, var(--tan) 70%, transparent);
}

#macaView{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--text-1);font-family:var(--sans)}
#macaView:not([hidden]){display:flex;flex-direction:column;height:100dvh}

/* ── Cabecera: flecha "←" + logo + "Maca · Asistente" ── */
.maca-head{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2);min-height:var(--top-h);padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2);background:var(--surface);border-bottom:1px solid var(--border)}
.maca-back{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r2);color:var(--text-1);transition:background-color 120ms ease,transform 120ms ease-out}
.maca-back svg{width:22px;height:22px}
.maca-back:active{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){.maca-back:hover{background:var(--surface2)}}
.maca-logo{height:20px;width:auto;aspect-ratio:1505/185;flex:0 0 auto}
.maca-title{display:flex;align-items:baseline;gap:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}
.maca-title b{font-weight:600}
.maca-title span{color:var(--text-3);font-size:13px}

/* ── Aviso corto: siempre visible, no condicional ── */
.maca-disclaimer{flex:0 0 auto;margin:0;font-size:12px;line-height:1.4;color:var(--text-2);background:var(--surface2);border-bottom:1px solid var(--border);padding:var(--s2) var(--s3)}

/* ── Mensajes ── */
.maca-messages{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--bg);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s3);border:1px solid var(--border);border-radius:var(--r2);scrollbar-width:thin;scrollbar-color:transparent transparent}
.maca-messages:hover,.maca-messages.scrolling{scrollbar-color:color-mix(in srgb, var(--tan) 60%, transparent) transparent}
.maca-messages::-webkit-scrollbar{width:7px;height:7px}
.maca-messages::-webkit-scrollbar-track{background:transparent}
.maca-messages::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--r2)}
.maca-messages:hover::-webkit-scrollbar-thumb,.maca-messages.scrolling::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--tan) 60%, transparent)}

.maca-daypill{align-self:center;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;margin:var(--s2) 0}

.maca-msg-row{display:flex;flex-direction:column;gap:4px;max-width:88%}
.maca-msg-row.me{align-self:flex-end;align-items:flex-end}
.maca-msg-row.them{align-self:flex-start;align-items:flex-start}

/* Usuario a la derecha: fondo Real, texto Marfil (en claro, --bg == --luster: un fondo
   Marfil se perdería contra la página; Real es la pareja de contraste que siempre se lee
   en los dos modos — ver nota de diseño en el reporte de entrega). */
.maca-bubble{padding:10px 12px;border-radius:var(--r2);overflow-wrap:anywhere}
.maca-bubble.me{background:var(--user-bubble-bg);color:var(--luster);white-space:pre-wrap}
/* Maca a la izquierda: sin burbuja marcada, fondo Arena suave translúcido con blur
   (constantes de marca — ver cálculo de contraste en el reporte de entrega de v1.6). */
.maca-bubble.them{background:var(--maca-bubble-bg);border:1px solid var(--maca-bubble-border);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--depths)}
.maca-bubble.them p{margin:0 0 8px}
.maca-bubble.them p:last-child{margin-bottom:0}
.maca-bubble.them strong{font-weight:600}
.maca-bubble.them code{font-family:var(--mono);font-size:.92em;background:rgba(17,17,68,.08);padding:1px 4px;border-radius:3px}
.maca-bubble.them a{color:var(--royal);text-decoration:underline;text-decoration-color:currentColor}
.maca-bubble.them ul,.maca-bubble.them ol{margin:4px 0 8px 1.25em}
.maca-bubble.them li{margin:2px 0}
.maca-bubble.them table{width:100%;border-collapse:collapse;font-size:13px;background:rgba(255,255,255,.35)}
.maca-bubble.them th,.maca-bubble.them td{border:1px solid rgba(17,17,68,.18);padding:5px 7px;text-align:left;vertical-align:top}
.maca-bubble.them th{font-weight:600}
.maca-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--maca-bubble-border);border-radius:var(--r2);margin:6px 0 8px}

.maca-atts{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.maca-atts a{font-size:12px;color:var(--text-2);text-decoration:underline}
.maca-att-size{font-size:11px;color:var(--text-3)}

/* ── Línea de estado: "Enviado..."/"Maca está trabajando" ── */
.maca-status{flex:0 0 auto;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-3);padding:6px var(--s3);background:var(--surface2);border-top:1px solid var(--border)}

/* ── Chips de adjuntos pendientes (sobre la caja de texto) ── */
.maca-pending{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:var(--s2) var(--s3);background:var(--surface2);border-top:1px solid var(--border)}
.maca-pending-count{flex:0 0 100%;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.maca-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:4px 2px 4px 10px;font-size:12px;color:var(--text-1)}
.maca-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.maca-chip-size{color:var(--text-3);font-size:11px;white-space:nowrap}
.maca-chip-x{position:relative;flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;color:var(--text-3);border-radius:50%}
/* Área táctil ≥44px aunque el chip visual sea más chico (pedido #8), vía pseudo-elemento. */
.maca-chip-x::before{content:'';position:absolute;inset:-8px}
@media(hover:hover) and (pointer:fine){.maca-chip-x:hover{color:var(--err-c);background:var(--err-bg)}}

/* ── Compositor fijo abajo: + · mic · textarea · enviar ── */
.maca-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:6px;margin:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));padding:var(--s2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r2)}
.maca-icon-btn{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r2);color:var(--text-2);transition:background-color 120ms ease,color 150ms ease,transform 120ms ease-out}
.maca-icon-btn svg{width:22px;height:22px}
.maca-icon-btn:active{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){.maca-icon-btn:hover{background:var(--surface2);color:var(--text-1)}}
.maca-icon-btn.active{color:var(--err-c)} /* micrófono grabando */

#macaText{flex:1 1 auto;min-width:0;box-sizing:border-box;overflow-y:auto;resize:none;font:inherit;font-size:15px;line-height:1.45;color:var(--text-1);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r2);padding:11px 12px;min-height:66px;max-height:154px}
#macaText:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Único uso de --accent/--habanero en toda la vista de Maca: el botón de enviar. */
.maca-send{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:var(--on-accent);transition:transform 120ms ease-out,opacity 150ms ease}
.maca-send svg{width:19px;height:19px}
.maca-send:active{transform:scale(.92)}
.maca-send:disabled{opacity:.45}

/* ── Escritorio: columna central de máx. 820px, rieles laterales ── */
@media(min-width:860px){
  #macaView:not([hidden]){align-items:center;background:var(--surface2)}
  .maca-head,.maca-disclaimer,.maca-messages,.maca-status,.maca-pending,.maca-composer{width:100%;max-width:820px}
}

@media(prefers-reduced-motion:reduce){
  .maca-back,.maca-icon-btn,.maca-send{transition:none!important}
}