/* ==========================================================================
   Cuchimilco Chat v2 — Diseño Final Institucional
   Mini App Municipal — Sobrio, moderno, limpio.
   Scopeado 100% bajo .cuchi-chat-root
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   VARIABLES Y RESET
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-chat-root {
  --cr:       #bd1020;
  --cr2:      #ef3e4f;
  --wine:     #43070d;
  --navy:     #101828;
  --slate:    #344054;
  --muted:    #667085;
  --line:     #e6e9f0;
  --white:    #ffffff;
  --gold:     #f5b640;
  --green:    #16a34a;
  --bg:       #f7f8fc;
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 16px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg: 0 16px 48px rgba(16,24,40,.14), 0 4px 12px rgba(16,24,40,.08);
  --shadow-red: 0 8px 24px rgba(189,16,32,.30);
  --r-xl: 32px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --z: 999990;
  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  position: fixed !important;
  right: 26px !important;
  bottom: 26px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 2147483000 !important;
  font-family: inherit;
  max-width: 100vw;
}

.cuchi-chat-root *,
.cuchi-chat-root *::before,
.cuchi-chat-root *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAUNCHER — MASCOTA FLOTANTE + ORB
   ══════════════════════════════════════════════════════════════════════════ */

/* El LAUNCHER (button) ahora es un wrapper invisible que organiza la pila */
.cuchi-chat-root .launcher-v3 {
  position: relative;
  width: 230px;
  height: 310px;
  overflow: visible !important;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}

.cuchi-chat-root .launcher-v3:hover {
  transform: translateY(-5px);
}

/* Personaje — encima del orb */
.cuchi-chat-root .cuchi-character-wrap {
  --cuchi-character-scale: 1;
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) scale(var(--cuchi-character-scale)) !important;
  transform-origin: center bottom;
  width: 190px;
  height: 245px;
  pointer-events: none;
  z-index: 2;
  transition: transform .22s ease;
}

.cuchi-chat-root.is-welcome-awaiting-interaction .cuchi-character-wrap {
  --cuchi-character-scale: .50;
}

/* Video de bienvenida superpuesto (se usa solo una vez) */
.cuchi-chat-root .cuchi-character-welcome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 3;
}

.cuchi-chat-root .cuchi-character-welcome.is-active {
  opacity: 1;
}

.cuchi-chat-root .cuchi-character-welcome.is-fading-out {
  opacity: 0 !important;
}

.cuchi-chat-root.is-welcome-playing .cuchi-character-video,
.cuchi-chat-root.is-welcome-playing .cuchi-character-fallback {
  opacity: 0 !important;
  visibility: hidden !important;
}

.cuchi-chat-root.is-welcome-playing .cuchi-character-welcome {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Estado fallback: doble capa, ambos videos superpuestos */
.cuchi-chat-root .cuchi-character-wrap .cuchi-character-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transition: opacity .2s ease;
  /* Importante: NO border-radius ni overflow para preservar alpha del WebM */
}

/* El video activo es visible */
.cuchi-chat-root .cuchi-character-wrap .cuchi-character-video.is-active {
  opacity: 1;
}

.cuchi-chat-root .cuchi-character-wrap .cuchi-character-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: none;
}

/* Al fallar ambos videos, mostrar imagen */
.cuchi-chat-root .cuchi-character-wrap.is-fallback .cuchi-character-video {
  display: none !important;
}

.cuchi-chat-root .cuchi-character-wrap.is-fallback .cuchi-character-fallback {
  display: block;
}

/* reduced motion: usar imagen fallback */
@media (prefers-reduced-motion: reduce) {
  .cuchi-chat-root .cuchi-character-wrap .cuchi-character-video { display: none !important; }
  .cuchi-chat-root .cuchi-character-wrap .cuchi-character-fallback { display: block !important; }
}

/* Burbuja de texto flotante */
.cuchi-chat-root .cuchi-character-speech {
  position: absolute;
  right: 152px;
  bottom: 64px;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #101828;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 18px 42px rgba(16,24,40,.16);
  backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px) scale(.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .24s ease;
  z-index: 6;
}

.cuchi-chat-root .cuchi-character-speech.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Botón flotante para reproducir bienvenida si autoplay falla */
.cuchi-chat-root .cuchi-welcome-cta {
  position: absolute;
  right: 178px;
  bottom: 108px;
  min-width: 122px;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
  cursor: pointer;
  z-index: 20;
  white-space: nowrap;
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: opacity .22s ease, transform .24s ease;
}

.cuchi-chat-root .cuchi-welcome-cta:hover {
  transform: translateX(-2px) !important;
}

.cuchi-chat-root .cuchi-welcome-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cuchi-chat-root.is-welcome-awaiting-interaction .cuchi-welcome-cta {
  right: 142px;
  bottom: 64px;
  min-width: 122px;
  height: 34px;
  padding: 0 13px;
  font-size: 12px;
  line-height: 34px;
}

/* Orb inferior — botón circular que abre el chat */
.cuchi-chat-root .cuchi-chat-orb {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  background: radial-gradient(circle at 24% 18%, rgba(255,255,255,.24), transparent 24%), linear-gradient(135deg,#101828 0%,#43070d 50%,#bd1020 100%);
  box-shadow: 0 24px 60px rgba(67,7,13,.32), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.18);
  z-index: 1;
  pointer-events: none;
  isolation: isolate;
  transition: transform .22s ease;
}

.cuchi-chat-root .cuchi-chat-orb-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(189,16,32,.42), transparent 68%);
  filter: blur(16px);
  animation: glowBreath 3.6s ease-in-out infinite;
  z-index: -1;
}

.cuchi-chat-root .cuchi-chat-orb-ring {
  position: absolute;
  inset: 3px;
  border-radius: 21px;
  background: conic-gradient(from 90deg, rgba(189,16,32,.0), rgba(189,16,32,.55), rgba(245,182,64,.68), rgba(189,16,32,.0), rgba(255,255,255,.45), rgba(189,16,32,.0));
  filter: blur(.2px);
  animation: ringSpin 6.5s linear infinite;
  opacity: .85;
  z-index: 0;
}

.cuchi-chat-root .cuchi-chat-orb-icon {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}

.cuchi-chat-root .cuchi-chat-orb-icon svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

/* Punto verde de estado */
.cuchi-chat-root .cuchi-chat-online {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #16a34a;
  border: 2px solid #fff;
  box-shadow: 0 0 0 5px rgba(22,163,74,.14);
  animation: onlinePulse 1.7s ease-in-out infinite;
}

/* Ocultar clases viejas del launcher anterior */
.cuchi-chat-root .launcher-label,
.cuchi-chat-root .label-dot {
  display: none !important;
}

.cuchi-chat-root.root-open .launcher-v3 {
  opacity: 0;
  transform: translateY(48px) scale(.78) rotate(8deg);
  pointer-events: none;
}

@media (max-width: 640px) {
  .cuchi-chat-root .launcher-v3 {
    width: 160px;
    height: 230px;
  }
  .cuchi-chat-root .cuchi-character-wrap {
    width: 132px;
    height: 176px;
    bottom: 50px;
  }
  .cuchi-chat-root .cuchi-chat-orb {
    width: 58px;
    height: 58px;
  }
  .cuchi-chat-root .cuchi-welcome-cta {
    right: 132px;
    bottom: 82px;
    min-width: 108px;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 32px;
    transform: none;
  }
  .cuchi-chat-root .cuchi-welcome-cta.is-visible {
    transform: none;
  }
  .cuchi-chat-root.is-welcome-awaiting-interaction .cuchi-character-wrap {
    --cuchi-character-scale: .60;
  }
  .cuchi-chat-root.is-welcome-awaiting-interaction .cuchi-welcome-cta {
    right: 106px;
    bottom: 58px;
    min-width: 108px;
    height: 32px;
    padding: 0 10px;
    font-size: 11px;
    line-height: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANEL PRINCIPAL — COMMAND CENTER
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-chat-root .panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 430px;
  height: 680px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(26px) scale(.92);
  filter: blur(6px);
  transform-origin: bottom right;
  transition: opacity .26s ease, transform .42s cubic-bezier(.16,1,.3,1), filter .26s ease;
}

.cuchi-chat-root.root-open .panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.cuchi-chat-root.root-closing .panel {
  opacity: 0;
  transform: translateY(24px) scale(.94);
  filter: blur(8px);
}

.cuchi-chat-root .shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 34px;
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 2px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(220, 20, 60, 0.07);
  backdrop-filter: blur(80px) saturate(108%) contrast(90%) !important;
  -webkit-backdrop-filter: blur(80px) saturate(108%) contrast(90%) !important;
  animation: cuchiGlassBreathe 6s ease-in-out infinite;
}

@keyframes cuchiGlassBreathe {
  0%, 100% {
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.22),
      0 0 20px rgba(220, 20, 60, 0.05);
  }
  50% {
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.28),
      0 0 44px rgba(220, 20, 60, 0.13);
  }
}

.cuchi-chat-root .shell > * {
  position: relative;
  z-index: 2;
}

.cuchi-chat-root .shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Línea de acento superior — institucional, 2px, pulso suave */
.cuchi-chat-root .shell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220, 20, 60, 0.70) 25%,
    rgba(255, 255, 255, 0.80) 50%,
    rgba(220, 20, 60, 0.70) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 10;
  animation: cuchiTopAccent 4s ease-in-out infinite;
}

@keyframes cuchiTopAccent {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .cuchi-chat-root .shell {
    animation: none !important;
  }
  .cuchi-chat-root .shell::after {
    animation: none !important;
    opacity: 0.45;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER LIMPIO
   ══════════════════════════════════════════════════════════════════════════ */
#cuchi-header {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.52) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.cuchi-hdr-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  border: 2px solid var(--white);
  overflow: hidden;
  animation: cuchiAvatarFloat 3.5s ease-in-out infinite;
}

@keyframes cuchiAvatarFloat {
  0%, 100% { transform: translateY(0);    box-shadow: 0 2px 6px rgba(0,0,0,.15); }
  50%       { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(220,20,60,.2); }
}

@media (prefers-reduced-motion: reduce) {
  .cuchi-hdr-avatar { animation: none !important; }
}

.cuchi-hdr-info {
  flex: 1;
  min-width: 0;
}

.cuchi-hdr-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.cuchi-hdr-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.cuchi-hdr-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--green);
  animation: statusPulse 2s infinite;
}

.cuchi-hdr-online {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

#cuchi-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .25s var(--spring);
  flex-shrink: 0;
}

#cuchi-close-btn:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
  transform: rotate(90deg);
}

#cuchi-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  stroke-width: 2.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY / ÁREA DE MENSAJES
   ══════════════════════════════════════════════════════════════════════════ */
#cuchi-body {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  background: rgba(255, 255, 255, 0.08) !important;
}

#cuchi-body::-webkit-scrollbar { width: 5px; }
#cuchi-body::-webkit-scrollbar-track { background: transparent; }
#cuchi-body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO INICIAL
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-hero {
  background: linear-gradient(145deg, var(--navy) 0%, var(--wine) 55%, var(--cr) 100%);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  animation: heroIn .5s var(--spring) both;
}

/* Luz aurora sutil */
.cuchi-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 120%;
  background: radial-gradient(ellipse, rgba(239,62,79,.25) 0%, transparent 70%);
  pointer-events: none;
}

.cuchi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.cuchi-hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

.cuchi-hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.cuchi-hero-desc {
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}

.cuchi-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cuchi-chip {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
  transition: all .25s var(--spring);
  animation: chipIn .4s var(--spring) both;
}

.cuchi-chip:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-2px);
}

.cuchi-chip:active { transform: scale(.95); }

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN DE CARDS (START SECTION)
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 2px;
}

.cuchi-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cuchi-section-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.cuchi-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuchi-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 2px solid rgba(255, 255, 255, 0.50);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transition: all .3s var(--spring);
  animation: itemIn .4s var(--spring) both;
  overflow: hidden;
}

.cuchi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
}

.cuchi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(189,16,32,.15);
}

.cuchi-card:hover::after {
  animation: shimmer .5s forwards;
}

.cuchi-card:active,
.cuchi-card.is-pressing {
  transform: scale(.97);
  box-shadow: var(--shadow-sm);
}

.cuchi-card.is-disabled {
  opacity: .55;
  pointer-events: none;
}

.cuchi-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(189,16,32,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s;
}

.cuchi-card:hover .cuchi-card-icon {
  background: rgba(189,16,32,.14);
}

.cuchi-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cr);
  fill: none;
}

.cuchi-card-body {
  flex: 1;
  min-width: 0;
}

.cuchi-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.cuchi-card-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.cuchi-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .25s var(--spring);
}

.cuchi-card:hover .cuchi-card-arrow {
  background: var(--cr);
  border-color: var(--cr);
}

.cuchi-card-arrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--muted);
  transition: stroke .25s;
}

.cuchi-card:hover .cuchi-card-arrow svg {
  stroke: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTA DE TRÁMITES (ACTION TILES)
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-tramites-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuchi-tramites-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cuchi-tramites-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cuchi-tramites-area {
  font-size: 12px;
  color: var(--muted);
}

.cuchi-tile {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 2px solid rgba(255, 255, 255, 0.50);
  border-left: 5px solid var(--cr);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-radius: var(--r-md);
  padding: 14px 14px 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transition: all .3s var(--spring);
  animation: itemIn .4s var(--spring) both;
}

.cuchi-tile:hover {
  transform: translateX(4px);
  border-color: var(--cr);
  box-shadow: var(--shadow-md);
}

.cuchi-tile:active,
.cuchi-tile.is-pressing {
  transform: scale(.97);
}

.cuchi-tile.is-disabled {
  opacity: .55;
  pointer-events: none;
}

.cuchi-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: rgba(189,16,32,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cuchi-tile-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--cr);
  fill: none;
}

.cuchi-tile-info {
  flex: 1;
  min-width: 0;
}

.cuchi-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cuchi-tile-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(22,163,74,.1);
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cuchi-tile-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.cuchi-tile-chev {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .25s var(--spring);
}

.cuchi-tile:hover .cuchi-tile-chev {
  background: var(--cr);
  border-color: var(--cr);
}

.cuchi-tile-chev svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
  transition: stroke .25s;
}

.cuchi-tile:hover .cuchi-tile-chev svg {
  stroke: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════════
   MENSAJES
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-msg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: messageIn .35s var(--spring) both;
}

/* Bot */
.cuchi-msg-bot { align-self: flex-start; max-width: 88%; }

.cuchi-msg-bot-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 2px;
  margin-bottom: 2px;
}

.cuchi-msg-bot-avatar {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--wine), var(--cr));
  display: flex;
  align-items: center;
  justify-content: center;
}

.cuchi-msg-bot-avatar svg {
  width: 12px;
  height: 12px;
  stroke: var(--white);
  fill: none;
}

.cuchi-msg-bot-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.cuchi-msg-bot-time {
  font-size: 10px;
  color: var(--muted);
  opacity: .7;
}

.cuchi-msg-bot-bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px 18px 18px 18px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  box-shadow: var(--shadow-sm);
}

/* Usuario */
.cuchi-msg-user {
  align-self: flex-end;
  max-width: 80%;
}

.cuchi-msg-user-bubble {
  background: linear-gradient(135deg, var(--cr) 0%, var(--cr2) 100%);
  border-radius: 18px 4px 18px 18px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--white);
  line-height: 1.55;
  box-shadow: 0 4px 14px rgba(189,16,32,.25);
}

.cuchi-msg-user-time {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  padding-right: 4px;
  opacity: .7;
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPEDIENTE DIGITAL
   ══════════════════════════════════════════════════════════════════════════ */
.cuchi-expediente {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  animation: itemIn .5s var(--spring) both;
}

.cuchi-exp-hero {
  background: linear-gradient(145deg, var(--navy) 0%, var(--wine) 55%, var(--cr) 100%);
  padding: 22px 20px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cuchi-exp-hero::after {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 150%;
  background: radial-gradient(ellipse, rgba(239,62,79,.2) 0%, transparent 70%);
  pointer-events: none;
}

.cuchi-exp-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.cuchi-exp-icon-wrap svg {
  width: 26px;
  height: 26px;
  stroke: var(--white);
  fill: none;
}

.cuchi-exp-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.cuchi-exp-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.cuchi-exp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cuchi-exp-badge.gold {
  background: var(--gold);
  color: var(--wine);
  border-color: var(--gold);
}

/* Cuerpo del expediente */
.cuchi-exp-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--white);
}

.cuchi-exp-desc {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--cr);
}

.cuchi-exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cuchi-exp-cell {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 12px;
}

.cuchi-exp-cell-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 4px;
}

.cuchi-exp-cell-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.cuchi-exp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuchi-exp-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 7px;
}

.cuchi-exp-section-title svg {
  width: 16px;
  height: 16px;
  stroke: var(--cr);
}

/* Checklist requisitos */
.cuchi-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cuchi-req-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cuchi-req-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cr);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.cuchi-req-check.optional { background: var(--muted); }

.cuchi-req-check svg {
  width: 10px;
  height: 10px;
  stroke: var(--white);
  stroke-width: 3;
}

.cuchi-req-text {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}

/* Documentos PDF */
.cuchi-pdf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cuchi-pdf-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all .3s var(--spring);
}

.cuchi-pdf-btn:hover {
  border-color: rgba(189,16,32,.3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cuchi-pdf-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(189,16,32,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .25s;
}

.cuchi-pdf-btn:hover .cuchi-pdf-btn-icon { background: rgba(189,16,32,.15); }

.cuchi-pdf-btn-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--cr);
}

.cuchi-pdf-btn-info { flex: 1; }

.cuchi-pdf-btn-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.cuchi-pdf-btn-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.cuchi-pdf-btn-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .25s;
}

.cuchi-pdf-btn:hover .cuchi-pdf-arrow { background: var(--cr); }

.cuchi-pdf-btn-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--muted);
}

/* Documento pendiente */
.cuchi-doc-pending {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}

.cuchi-doc-pending svg {
  width: 18px;
  height: 18px;
  stroke: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Alerta de observaciones */
.cuchi-exp-notes {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: #0369a1;
  line-height: 1.5;
}

.cuchi-exp-notes svg {
  width: 16px;
  height: 16px;
  stroke: #0369a1;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPING INDICATOR
   ══════════════════════════════════════════════════════════════════════════ */
#cuchi-typing {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: messageIn .35s var(--spring) both;
  margin-bottom: 5px;
}

.cuchi-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(189,16,32,.2);
  border: 1.5px solid var(--white);
  position: relative;
}

.cuchi-message-thinking .cuchi-mini-avatar {
  animation: cuchiThinkFloat 1.6s ease-in-out infinite;
}

.cuchi-message-thinking .cuchi-mini-avatar::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, .12);
  animation: cuchiThinkPulse 1.5s ease-out infinite;
  pointer-events: none;
}

@keyframes cuchiThinkFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

@keyframes cuchiThinkPulse {
  0% { opacity: .65; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.22); }
}

.cuchi-thinking-video,
.cuchi-mini-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.cuchi-mini-fallback {
  display: none;
}

.cuchi-thinking-bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cuchi-thinking-bubble strong {
  font-size: 11px;
  color: var(--navy);
  margin-bottom: 2px;
}

.cuchi-thinking-bubble p {
  font-size: 13px;
  color: var(--slate);
  margin: 0;
}

.cuchi-typing-dots {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.cuchi-typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cr);
  opacity: .4;
  animation: typingDots 1.4s infinite ease-in-out both;
}
.cuchi-typing-dots span:nth-child(1) { animation-delay: -.32s; }
.cuchi-typing-dots span:nth-child(2) { animation-delay: -.16s; }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER / INPUT DOCK
   ══════════════════════════════════════════════════════════════════════════ */
#cuchi-footer {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.50) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 14px 18px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#cuchi-input-pill {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 11px 18px;
  font-size: 14px;
  color: var(--navy);
  font-family: inherit;
  outline: none;
  transition: all .25s var(--ease);
  box-shadow: none;
}

#cuchi-input-pill::placeholder { color: var(--muted); }

#cuchi-input-pill:focus {
  border-color: var(--cr);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(189,16,32,.12), 0 2px 12px rgba(189,16,32,.08);
}

#cuchi-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cr);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(189,16,32,.3);
  transition: all .3s var(--spring);
}

#cuchi-send-btn.is-active {
  background: linear-gradient(135deg, var(--cr), var(--cr2));
  box-shadow: 0 6px 18px rgba(189,16,32,.4);
  animation: cuchiSendPulse 1.8s ease-in-out infinite;
}

@keyframes cuchiSendPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(189,16,32,.4); }
  50%       { box-shadow: 0 6px 22px rgba(189,16,32,.62), 0 0 0 5px rgba(189,16,32,.1); }
}

#cuchi-send-btn:hover:not(:disabled) {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 20px rgba(189,16,32,.4);
}

#cuchi-send-btn:active,
#cuchi-send-btn.is-pressing {
  transform: scale(.92);
}

#cuchi-send-btn:disabled {
  background: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}

#cuchi-send-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--white);
  stroke-width: 2.5;
  transform: translateX(1px);
}

/* Ripple */
.cuchi-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple .5s linear;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMACIONES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.7); }
  70%  { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes softSweep{to{transform:rotate(360deg)}}
@keyframes glowBreath{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 0 5px rgba(22,163,74,.12)}50%{box-shadow:0 0 0 9px rgba(22,163,74,.06);transform:scale(1.08)}}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes itemIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes messageIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes typingDots {
  0%,80%,100% { transform: translateY(0); opacity: .4; }
  40%          { transform: translateY(-4px); opacity: 1; }
}

@keyframes shimmer {
  to { transform: translateX(200%); }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cuchi-chat-root *,
  .cuchi-chat-root *::before,
  .cuchi-chat-root *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — FULL SCREEN APP
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cuchi-chat-root {
    right: 14px !important;
    bottom: 14px !important;
    left: auto !important;
    top: auto !important;
  }

  .cuchi-chat-root .launcher-v3 {
    width: 120px;
    height: 175px;
  }

  .cuchi-chat-root .cuchi-character-wrap {
    width: 104px;
    height: 120px;
    bottom: 48px;
  }

  .cuchi-chat-root .cuchi-chat-orb {
    width: 58px;
    height: 58px;
    border-radius: 20px;
  }

  .cuchi-chat-root .cuchi-character-speech {
    right: 122px;
    bottom: 54px;
    max-width: 180px;
    font-size: 12px;
  }

  .cuchi-chat-root .cuchi-welcome-cta {
    right: 76px;
    bottom: 84px;
    font-size: 12px;
    padding: 8px 12px;
  }

  .cuchi-chat-root .panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    transform-origin: bottom center;
  }

  .cuchi-chat-root .shell {
    border-radius: 0;
    border: 0;
  }

  .cuchi-hero-title { font-size: 18px; }
  .cuchi-hero { padding: 18px 16px 16px; }
  .cuchi-exp-grid { grid-template-columns: 1fr; }

  #cuchi-footer { padding: 12px 16px 16px; }

  #cuchi-body { padding: 16px 14px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROPUESTA 10 — MUNICIPAL PREMIUM (extras de card hover y reduced motion)
   ══════════════════════════════════════════════════════════════════════════ */

.cuchi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.15), 0 0 0 1px rgba(220,20,60,.12) !important;
}

.cuchi-tile:hover {
  transform: translateX(5px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(220,20,60,.1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cuchi-chat-root *,
  .cuchi-chat-root *::before,
  .cuchi-chat-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}