/* Guadagnini 1782 · app de demo. Claro para el trabajo; la paleta de la marca (violeta, verde o azul, con plata y oro) para el ingreso y para Amadeus. */
:root {
  /* claros apagados: papel tibio, no blanco de pantalla */
  --fondo: #E6E2DC; --panel: #F4F1EC; --panel-alto: #FAF8F4; --borde: #D5CFC6; --linea: #E2DCD3; --texto: #1D1D1F; --suave: #6E6E73; --tenue: #8A8A8E;
  --acento: #7C3A1D; --acento-suave: rgba(124,58,29,.1); --sube: #1F7A3A; --baja: #C4161C; --ambar: #A04A00;
  --verde: #34C759; --amarillo: #FF9F0A; --rojo: #FF3B30;
  --oscuro: #14110F; --cobre: #C98C5C; --crema: #E9DFD6;
  /* marca: tres paletas (Preferencias). Por defecto, violeta Purple Label; plata y oro en las tres */
  --marca: #3B1E54; --marca-claro: #4A2A66; --marca-hondo: #2A1440; --marca-noche: #1C0E2B; --marca-msj: #5A3A78; --marca-medio: #2E1744;
  --barra-osc: rgba(42,20,64,.88); --entrada-osc: rgba(28,14,43,.94);
  --plata: #D6D8DD; --oro: #D9B566;
  --plata-grad: linear-gradient(180deg, #F7F7F9 0%, #C9CBD1 42%, #9EA1A8 55%, #E4E5E9 78%, #B5B7BD 100%);
  --oro-grad: linear-gradient(175deg, #F6E7B0 0%, #D9B566 30%, #A97E2F 52%, #E8CD84 72%, #9B7230 100%);
  --fondo-marca: radial-gradient(120% 110% at 25% 10%, var(--marca-claro) 0%, var(--marca) 42%, var(--marca-hondo) 75%, var(--marca-noche) 100%);
  --acento: #4A2766; --acento-suave: rgba(74,39,102,.1);
  --radio: 14px; --sombra: 0 1px 2px rgba(0,0,0,.04);
  --fuente: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
}
@font-face { font-family: "Pinyon Script"; src: url("fuentes/pinyon-script.woff2") format("woff2"); font-display: swap; }
[data-paleta="verde"] {
  --marca: #1E3B2C; --marca-claro: #2A4F3B; --marca-hondo: #142A1F; --marca-noche: #0C1A13; --marca-msj: #355E48; --marca-medio: #183225;
  --barra-osc: rgba(20,42,31,.88); --entrada-osc: rgba(12,26,19,.94);
  --acento: #1F5A3E; --acento-suave: rgba(31,90,62,.1);
}
[data-paleta="azul"] {
  --marca: #1B2A4A; --marca-claro: #26395F; --marca-hondo: #121D35; --marca-noche: #0B1222; --marca-msj: #33496F; --marca-medio: #162340;
  --barra-osc: rgba(18,29,53,.88); --entrada-osc: rgba(11,18,34,.94);
  --acento: #1F3A6B; --acento-suave: rgba(31,58,107,.1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font-family: var(--fuente); -webkit-font-smoothing: antialiased; font-size: 14px; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.n { font-variant-numeric: tabular-nums; }
.s { font-size: 12px; color: var(--tenue); }
.sube { color: var(--sube); } .baja { color: var(--baja); }
[hidden] { display: none !important; }

/* ---------- estructura ---------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 248px; flex: none; padding: 10px; }
.lateral nav { height: 100%; background: rgba(240,240,243,.92); border: .5px solid rgba(0,0,0,.08); border-radius: 18px; padding: 16px 10px 12px; display: flex; flex-direction: column; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 9px; padding: 0 10px 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.violin { color: #14110F; flex: none; }
.plata-txt { background: var(--plata-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oro-txt { background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em .12em; }
.firma { font-family: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive; color: var(--acento); font-weight: 400; letter-spacing: 0; line-height: 1.1; }
.lateral .firma { font-size: 15.5px; padding: 0 10px 12px 31px; margin-top: -6px; white-space: nowrap; }
.firma.oro-txt, .plata-txt { color: transparent; }
.ingreso .firma { font-size: clamp(19px, 5.6vw, 26px); margin-top: -6px; white-space: nowrap; }
.seccion { padding: 14px 10px 5px; font-size: 11px; font-weight: 600; color: var(--tenue); }
.item { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; border: 0; background: none; width: 100%; text-align: left; }
.item:hover { background: rgba(0,0,0,.04); }
.item.on { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.item svg { flex: none; }
.btn-amadeus { font: inherit; font-weight: 600; cursor: pointer; text-align: left; width: 100%; margin-top: auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; border: 0; background: var(--marca); color: #fff; font-weight: 600; }
.btn-amadeus .orbe-mini { width: 22px; height: 22px; }
.usuario { display: flex; align-items: center; gap: 9px; padding: 12px 10px 0; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }
.principal { flex: 1; min-width: 0; padding: 18px 28px 40px 20px; }
.cabecera { display: flex; align-items: center; gap: 14px; min-height: 52px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecera h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 700; }
.cabecera .der { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.chip.real { color: #1F6B35; background: #E3F3E7; } .chip.ej { color: #8A5A00; background: #FFF1D2; } .chip.info { color: #1A56C4; background: #E8F0FE; }

/* ---------- piezas ---------- */
.grilla { display: grid; gap: 14px; margin-bottom: 14px; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.k { background: var(--panel); border: .5px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); min-width: 0; }
.k.p { padding: 14px 16px; }
.k svg { max-width: 100%; height: auto; }
.k h2 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.kpi .r { font-size: 12px; font-weight: 600; color: var(--suave); }
.kpi .v { font-size: 25px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { font-size: 11px; font-weight: 600; color: var(--tenue); text-align: left; padding: 0 10px 7px; white-space: nowrap; }
.tabla td { padding: 7px 10px; border-top: .5px solid var(--linea); vertical-align: middle; }
.tabla .d { text-align: right; white-space: nowrap; }
.tabla tr:nth-child(even) td { background: #FAFAFB; }
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fila { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: .5px solid var(--linea); }
.fila:first-of-type { border-top: 0; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pie { font-size: 12px; color: var(--tenue); line-height: 1.45; margin: 6px 0 0; }
.tag { font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 6px; }
.filtros { display: flex; flex-direction: column; gap: 8px; }
.filtros .f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filtros .f > span:first-child { width: 70px; font-size: 12px; font-weight: 600; color: var(--tenue); }
.pill { height: 28px; padding: 0 11px; border-radius: 999px; border: .5px solid var(--borde); background: var(--panel-alto); font-size: 12px; font-weight: 600; }
.pill.on { background: var(--acento); border-color: var(--acento); color: #fff; }
.buscar { height: 34px; border-radius: 999px; border: .5px solid var(--borde); padding: 0 14px; font: inherit; width: 100%; max-width: 360px; background: var(--panel-alto); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #E9E9EE; }
.seg button { border: 0; background: none; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.seg button.on { background: var(--panel-alto); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.lista-inf button { display: grid; grid-template-columns: 10px 74px minmax(110px, 190px) minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-top: .5px solid var(--linea); background: none; text-align: left; }
.lista-inf button.on { background: var(--acento-suave); }
.g-inf { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.detalle-inf { position: sticky; top: 14px; }
.elip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Amadeus ---------- */
.oraculo { background: radial-gradient(70% 55% at 30% 15%, var(--marca-claro) 0%, var(--marca-medio) 55%, var(--marca-noche) 100%); color: #fff; border-radius: 22px; min-height: calc(100dvh - 60px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; overflow: hidden; }
.oraculo .conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.oraculo .cab { display: flex; align-items: center; gap: 16px; padding: 22px 26px 8px; }
.orbe { position: relative; width: 84px; height: 84px; flex: none; }
.orbe::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(217,181,102,.5) 0%, rgba(169,126,47,0) 70%); }
.orbe::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FBF1CF 0%, #D9B566 40%, #8A6524 100%); box-shadow: 0 0 34px rgba(217,181,102,.5); }
.orbe.activo::before { animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.18); opacity: .7; } }
.orbe-mini { position: relative; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FBF1CF 0%, #D9B566 45%, #8A6524 100%); display: inline-block; }
.oraculo h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.oraculo .sub { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.45; margin-top: 4px; }
.estado { padding: 4px 26px 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); min-height: 18px; }
.mensajes { flex: 1; overflow-y: auto; padding: 14px 26px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
.msj { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; }
.msj .quien { font-size: 11.5px; color: rgba(255,255,255,.6); margin-bottom: 3px; }
.msj .quien b { color: #fff; }
.msj .txt { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.93); white-space: pre-wrap; }
.msj.carlos { align-self: flex-end; flex-direction: row-reverse; }
.msj.carlos .burbuja { background: var(--marca-msj); border-radius: 16px 16px 5px 16px; padding: 9px 13px; }
.msj.agente .burbuja { background: rgba(255,255,255,.06); border: .5px solid rgba(255,255,255,.1); border-radius: 16px 16px 16px 5px; padding: 12px 14px; }
.ini { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.ini.carlos { background: var(--plata); color: var(--marca-hondo); }
.acciones-msj { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.acciones-msj button { height: 28px; padding: 0 11px; border-radius: 8px; border: .5px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 12px; font-weight: 600; }
.ondas { display: inline-flex; gap: 2px; align-items: center; height: 14px; vertical-align: middle; margin-left: 6px; }
.ondas i { width: 2.5px; border-radius: 2px; background: var(--oro); animation: onda .9s ease-in-out infinite; }
.ondas i:nth-child(2) { animation-delay: .15s } .ondas i:nth-child(3) { animation-delay: .3s } .ondas i:nth-child(4) { animation-delay: .45s }
@keyframes onda { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.entrada { padding: 12px 20px 20px; display: flex; gap: 8px; align-items: center; border-top: .5px solid rgba(255,255,255,.08); }
.entrada input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: .5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: #fff; padding: 0 18px; font: inherit; font-size: 15px; }
.entrada input::placeholder { color: rgba(255,255,255,.45); }
.mic { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--oro-grad); display: flex; align-items: center; justify-content: center; flex: none; }
/* escuchando: sigue dorado; lo indica un halo dorado que late */
.mic.escucha { background: var(--oro-grad); animation: escucha-oro 1s ease-in-out infinite; }
@keyframes escucha-oro { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,181,102,.7); } 50% { box-shadow: 0 0 0 12px rgba(217,181,102,0); } }
@keyframes latido-btn { 50% { box-shadow: 0 0 0 10px rgba(255,69,58,.18); } }
.enviar, .parar { height: 46px; padding: 0 16px; border-radius: 999px; border: .5px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-weight: 600; flex: none; }
.lado { border-left: .5px solid rgba(255,255,255,.08); padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.lado h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.oscuro-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); }
.oscuro-seg button { border: 0; background: none; color: rgba(255,255,255,.75); height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.oscuro-seg button.on { background: #fff; color: var(--marca-hondo); }
.sugerencias { display: flex; flex-direction: column; gap: 6px; }
.sugerencias button { text-align: left; border: .5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #fff; border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.35; }
.sugerencias button span { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }
.ico-parar { display: none; }
.punto-escucha { width: 8px; height: 8px; border-radius: 50%; background: #C7C7CC; flex: none; }
.punto-escucha.activo { background: #34C759; animation: latido-btn 1.6s ease-in-out infinite; }
.aviso-osc { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.55); }

/* ---------- ingreso ---------- */
.ingreso { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--fondo-marca); }
.ing-col { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.lockup-ing { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lockup-ing b { font-size: 17px; font-weight: 700; letter-spacing: .1em; }
.ingreso .btn-prim { background: var(--marca); }
/* teclado abierto: la tarjeta sube y el logo se achica, para ver lo que se escribe */
.ingreso { transition: padding .25s ease; }
.ingreso.teclado { align-items: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-bottom: 55vh; }
.ingreso.teclado .ing-col { gap: 12px; }
.ingreso.teclado .lockup-ing { gap: 4px; }
.ingreso.teclado .lockup-ing svg { display: none; }
.ingreso.teclado .lockup-ing b { font-size: 13px; }
.ingreso.teclado .firma { font-size: 17px !important; margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .ingreso { transition: none; } }
.tarjeta-ing { width: 100%; background: rgba(244,241,236,.97); border-radius: 22px; padding: 30px; box-shadow: 0 24px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 14px; }
.tarjeta-ing label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #3A3A3C; }
/* contraseña con puntos sin usar el campo «password» de Safari (ver entrada.js) */
.clave-oculta { -webkit-text-security: disc; text-security: disc; }
.tarjeta-ing input { scroll-margin-bottom: 140px; }
.tarjeta-ing input { height: 42px; border-radius: 9px; border: .5px solid var(--borde); background: var(--panel-alto); padding: 0 12px; font: inherit; font-size: 16px; }
.btn-prim { height: 42px; border-radius: 10px; border: 0; background: var(--acento); color: #fff; font-weight: 600; font-size: 15px; }
.btn-sec { height: 40px; border-radius: 10px; border: .5px solid var(--borde); background: var(--panel-alto); font-weight: 600; }

/* ---------- iPhone ---------- */
.pestanas { display: none; }
.marca-movil { display: none; }
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  body { font-size: 15px; }
  .lateral { display: none; }
  .principal { padding: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 96px); }
  .cabecera h1 { font-size: 30px; }
  .marca-movil { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0 14px; }
  .marca-movil .marca { padding: 0; color: var(--texto); }
  .marca-movil .firma { font-size: 17px; }
  .oscuro-app .marca-movil { padding: calc(env(safe-area-inset-top) + 12px) 16px 2px; }
  .oscuro-app .marca-movil .marca { background: var(--plata-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .oscuro-app .marca-movil .marca svg { color: var(--plata); }
  .oscuro-app .marca-movil .firma { background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .15em .12em; }
  .oscuro-app .marca-movil + .oraculo { padding-top: 0; }
  .pestanas { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 10px); height: 64px; border-radius: 32px; background: rgba(244,241,236,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: .5px solid rgba(0,0,0,.08); box-shadow: 0 8px 30px rgba(0,0,0,.12); align-items: center; justify-content: space-around; z-index: 20; }
  .pestanas button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--suave); min-width: 56px; }
  .pestanas button.on { color: var(--acento); }
  /* el botón central es el mismo círculo dorado con micrófono que el de al lado de «Amadeus, dime…» */
  .pestanas .centro { width: 58px; height: 58px; margin-top: -28px; border-radius: 50%; background: var(--oro-grad); box-shadow: 0 6px 18px rgba(0,0,0,.28); justify-content: center; align-items: center; }
  .pestanas .centro svg { width: 24px; height: 24px; }
  .pestanas .centro.escucha { background: var(--oro-grad); animation: escucha-oro 1s ease-in-out infinite; }
  .oscuro-app .pestanas { background: var(--barra-osc); border-color: rgba(255,255,255,.08); }
  .oscuro-app .pestanas button { color: rgba(255,255,255,.6); }
  .oscuro-app .pestanas button.on { color: #fff; }
  .oscuro-app { background: var(--marca-noche); }
  .oscuro-app .principal { padding: 0 0 calc(env(safe-area-inset-bottom) + 86px); }
  .oraculo { grid-template-columns: 1fr; border-radius: 0; min-height: 100dvh; padding-top: env(safe-area-inset-top); }
  .oraculo .cab { padding: 14px 18px 4px; }
  .orbe { width: 64px; height: 64px; } .orbe::after { inset: 14px; }
  .oraculo h1 { font-size: 24px; }
  .mensajes { padding: 12px 16px; min-height: 0; }
  /* «Amadeus, dime…» fijo abajo, justo sobre el botón dorado (que en el teléfono hace de micrófono) */
  .entrada { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 112px); z-index: 6; padding: 6px 6px 6px 8px; border-radius: 30px; border: .5px solid rgba(255,255,255,.14); background: var(--entrada-osc); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
  .entrada .mic { display: none; }
  .oraculo { padding-bottom: calc(env(safe-area-inset-bottom) + 190px); }
  .enviar { display: none; }
  .parar { width: 46px; padding: 0; } .txt-parar { display: none; } .ico-parar { display: inline; }
  .mic { width: 48px; height: 48px; }
  .lado { border-left: 0; border-top: .5px solid rgba(255,255,255,.08); padding: 16px; }
  .g-inf { grid-template-columns: 1fr; }
  .detalle-inf { order: -1; position: static; }
  .lista-inf button { grid-template-columns: 10px 64px minmax(0, 1fr); }
  .lista-inf button .cargo-col { display: none; }
  .kpi .v { font-size: 22px; }
}

/* ---------- preferencias ---------- */
.paletas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .paletas { grid-template-columns: 1fr; } }
.paleta { border: 1.5px solid var(--borde); border-radius: 16px; background: var(--panel); padding: 0; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; }
.paleta:hover { border-color: var(--acento); }
.paleta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.paleta.on { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.paleta .muestra { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 18px; }
.paleta .muestra b { font-size: 12px; letter-spacing: .1em; }
.paleta .muestra .firma { font-size: 17px; }
.paleta .pie { padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.paleta .pie div { flex: 1; min-width: 0; }
.paleta .pie b { color: var(--texto); }
.paleta .tilde { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--borde); flex: none; display: grid; place-items: center; }
.paleta.on .tilde { background: var(--acento); border-color: var(--acento); }
.paleta.on .tilde::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* preferencias: una fila por opción, con el control a la derecha */
.pref-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding-top: 12px; border-top: .5px solid var(--linea); }
.pref-fila > div:first-child { flex: 1; min-width: 220px; }

/* manos libres escuchando: un halo dorado que respira en el botón */
.centro.atento, .btn-amadeus.atento { box-shadow: 0 0 0 0 rgba(217,181,102,.6); animation: atento 2.2s ease-in-out infinite; }
@keyframes atento { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,181,102,.55); } 50% { box-shadow: 0 0 0 9px rgba(217,181,102,0); } }
@media (prefers-reduced-motion: reduce) { .centro.atento, .btn-amadeus.atento { animation: none; box-shadow: 0 0 0 3px rgba(217,181,102,.6); } }

/* torta del patrimonio: gráfico y leyenda lado a lado; en el teléfono, uno debajo del otro */
.torta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
@media (max-width: 560px) { .torta { justify-content: center; } }

/* el botón de Amadeus en todos lados: círculo dorado metálico sólido con el micrófono adentro (sin esfera difuminada) */
.boton-oro { border: 0; border-radius: 50%; background: var(--oro-grad); display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.25); }
.boton-oro svg { width: 52%; height: 52%; }
.boton-oro.chico { width: 26px; height: 26px; }
.boton-oro.grande { width: 72px; height: 72px; }
.boton-oro.grande.activo { animation: escucha-oro 1.2s ease-in-out infinite; }
@media (max-width: 900px) { .boton-oro.grande { width: 60px; height: 60px; } }

/* Mac: Amadeus ocupa la ventana justa; la conversación y las preguntas se desplazan solas y el campo queda siempre a la vista */
@media (min-width: 901px) {
  .oscuro-app .principal { padding-bottom: 18px; }
  .oraculo { height: calc(100dvh - 36px); min-height: 0; }
  .oraculo .conv { min-height: 0; }
  .mensajes { min-height: 0; }
}