/* Alfonso — visual system. Loaded after pro-v5.css so existing views retain their layout. */
:root {
  --bg: #f4f5f1;
  --surface: #ffffff;
  --surface2: #f8faf8;
  --ink: #182e38;
  --muted: #60747a;
  --gold: #c59250;
  --gold2: #e7bb77;
  --line: #e0e7e3;
  --ok: #16806a;
  --warn: #985f18;
  --bad: #b44742;
  --shadow: 0 12px 36px rgba(22, 50, 55, .055);
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background: radial-gradient(circle at 84% 9%, #e8f1ec 0, transparent 28rem), var(--bg);
}
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #ad7832; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app { grid-template-columns: 258px minmax(0, 1fr); }
.side {
  background: linear-gradient(165deg, #182e38 0%, #142631 55%, #10232d 100%);
  color: #f6f8f5;
  border-right: 1px solid rgba(255, 255, 255, .08);
  padding: 25px 17px 18px;
  gap: 0;
  box-shadow: 8px 0 28px rgba(17, 39, 49, .07);
}
.brand { border-bottom: 1px solid rgba(255, 255, 255, .1); padding: 5px 9px 23px; gap: 13px; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand b { font-size: 22px; font-weight: 720; letter-spacing: -.035em; }
.brand small { color: #a7bdbd; font-size: 11px; letter-spacing: .025em; }
.nav-heading, .side-foot-label {
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: 750;
  color: #88a4a6;
}
.nav-heading { padding: 25px 14px 12px; }
.nav { gap: 3px; padding: 0 4px 8px 0; scrollbar-color: #587579 transparent; scrollbar-width: thin; }
.nav button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 11px;
  color: #b9cbcd;
  font-size: 13px;
  font-weight: 550;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav button:hover { background: rgba(255, 255, 255, .07); color: white; transform: translateX(2px); }
.nav button.active, .nav button[aria-current="page"] {
  background: rgba(222, 181, 117, .13);
  color: #fff;
  box-shadow: inset 3px 0 0 #e7bb77;
}
.nav i { width: 26px; flex: 0 0 26px; color: #d0aa75; font-size: 17px; }
.side-foot { margin-top: auto; padding: 18px 12px 3px; color: #bfcdcd; line-height: 1.55; }
.side-foot-label { margin-bottom: 8px; }
.side-foot-detail { margin-top: 9px; color: #899fa3; }

.main { display: flex; flex-direction: column; min-height: 100vh; }
.top {
  height: 91px;
  padding: 0 clamp(22px, 3vw, 54px);
  background: rgba(244, 245, 241, .92);
  border-color: #e0e7e3;
  gap: 16px;
}
.top-heading { display: flex; align-items: center; gap: 16px; min-width: 0; }
.top-kicker { display: block; margin-bottom: 4px; color: #718983; font-size: 10px; font-weight: 780; letter-spacing: .14em; }
.top h1 { font-size: clamp(20px, 2vw, 25px); letter-spacing: -.04em; font-weight: 720; }
.top small { color: var(--muted); font-size: 11px; }
.health {
  flex-shrink: 0;
  padding: 9px 13px;
  background: #eef2ef;
  border: 1px solid #dce6df;
  border-radius: 999px;
  color: #526b63;
  font-size: 12px;
  font-weight: 660;
}
.dot { flex: 0 0 8px; width: 8px; height: 8px; }
.dot.ok { background: #259e72; box-shadow: 0 0 0 3px rgba(37, 158, 114, .16); }
.health:has(.dot.ok) { background: #e6f2ec; border-color: #cee6d7; color: #1a684e; }
.workspace { width: 100%; max-width: 1510px; padding: 32px clamp(22px, 3vw, 54px) 60px; flex: 1; }
.footer { color: #879a9b; padding: 15px clamp(22px, 3vw, 54px) 24px; border-top: 1px solid var(--line); font-size: 11px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(208px, 240px);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  color: #f8faf7;
  background:
    radial-gradient(circle at 79% 15%, rgba(113, 158, 148, .3), transparent 24rem),
    radial-gradient(circle at 9% 93%, rgba(179, 127, 64, .15), transparent 23rem),
    linear-gradient(128deg, #172f3a, #133039 67%, #193e42);
  box-shadow: 0 24px 58px rgba(15, 42, 48, .15);
}
.hero::before {
  content: "";
  position: absolute;
  top: -135px;
  right: 9%;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 75px rgba(255, 255, 255, .025), 0 0 0 150px rgba(255, 255, 255, .018);
}
.hero-content, .voice-card { position: relative; z-index: 1; min-width: 0; }
.eyebrow, .voice-label, .card-caption {
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 760;
  text-transform: uppercase;
}
.hero .eyebrow { color: #edc58f; }
.hero h2 { margin: 16px 0 14px; color: white; font-size: clamp(32px, 3.7vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -.06em; }
.hero p { max-width: 610px; margin: 0 0 25px; color: #c7d8d5; line-height: 1.65; font-size: 14px; }
.composer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 7px;
  width: 100%;
  max-width: 690px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(9, 25, 31, .15);
}
.composer:focus-within { outline: 3px solid rgba(231, 187, 119, .6); }
.composer textarea {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 60px;
  max-height: 180px;
  padding: 12px 10px;
  resize: vertical;
  border: 0;
  outline: 0;
  border-radius: 10px;
  color: #1d343d;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
}
.composer textarea::placeholder { color: #7b8d93; }
.btn.primary, .composer .btn.primary {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #bb8546;
  border-radius: 11px;
  background: #c89453;
  color: #172b33;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: none;
}
.btn.primary:hover, .composer .btn.primary:hover { background: #e4b475; }
.composer .btn.primary span { margin-left: 6px; font-size: 17px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #d8e2de;
  background: #f7faf8;
  color: #34505a;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quick button:hover { border-color: #98b5ae; background: #eaf3ee; transform: translateY(-1px); }
.hero .quick { margin-top: 14px; }
.hero .quick button { border-color: rgba(245, 250, 246, .22); background: rgba(245, 250, 246, .08); color: #ecf5f0; }
.hero .quick button:hover { background: rgba(245, 250, 246, .18); border-color: rgba(245, 250, 246, .45); }
.voice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 25px 17px;
  min-width: 0;
  text-align: center;
  border-radius: 19px;
  border: 1px solid rgba(234, 246, 238, .2);
  background: rgba(241, 251, 247, .075);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.voice-label { color: #b7d0c9; }
.mic {
  display: grid;
  place-items: center;
  width: 77px;
  height: 77px;
  margin: 4px 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: #ecba7c;
  color: #1e353d;
  box-shadow: 0 0 0 10px rgba(237, 188, 126, .12);
  font-size: 29px;
}
.mic:hover { background: #f8d3a2; }
.mic.listening { animation: listening 1.5s ease-in-out infinite; }
@keyframes listening { 50% { box-shadow: 0 0 0 17px rgba(237, 188, 126, .18); } }
.voice-card strong { font-size: 14px; }
.voice-card span:last-child { max-width: 160px; color: #c7d8d5; font-size: 12px; line-height: 1.5; }

.overview-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 38px 0 18px; }
.overview-heading .eyebrow { color: #a16e32; }
.overview-heading h2 { margin: 7px 0 3px; font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.045em; }
.overview-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.overview-date { padding-bottom: 4px; color: #78908e; font-size: 12px; text-transform: capitalize; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
.card {
  min-width: 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 18px; font-size: 17px; letter-spacing: -.025em; }
.card p { line-height: 1.55; overflow-wrap: anywhere; }
.card-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid #edf1ee; margin-bottom: 2px; }
.card-heading h3 { margin-bottom: 16px; }
.card-caption { color: #8ea29a; }
.metric-card { position: relative; min-height: 178px; padding-top: 26px; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; top: -52px; right: -52px; width: 165px; height: 165px; border-radius: 50%; border: 1px solid #e6efeb; pointer-events: none; }
.metric-icon { position: absolute; top: 26px; right: 26px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #488170; background: #e9f4ee; }
.metric-card:nth-child(2) .metric-icon { color: #9c6b2f; background: #faf1e5; }
.metric { color: #19343c; font-size: 44px; line-height: 1.15; font-weight: 740; letter-spacing: -.07em; }
.metric-label { color: #233d45; font-size: 14px; font-weight: 690; margin-top: 7px; }
.metric-card p { color: #85969a; margin: 5px 0 0; font-size: 12px; }
.ai-summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: #eaf3ed; border-color: #d4e5d9; }
.ai-summary .eyebrow { color: #5c8274; }
.ai-summary h3 { margin: 5px 0 4px; }
.ai-summary p { margin: 0; color: #587269; font-size: 13px; }
.btn { border: 1px solid #d5e1d9; border-radius: 10px; background: white; color: #26454c; padding: 9px 15px; font-size: 12px; font-weight: 680; }
.btn:hover { border-color: #95b8a5; background: #f0f7f1; }
.ai-summary .btn { flex: 0 0 auto; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.status-card { background: #f7faf8; border: 1px solid #e6ede8; border-radius: 11px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.status-card b { font-size: 12px; }
.tag { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border: 1px solid #dce6e1; border-radius: 999px; color: #5c716d; background: #f3f6f4; font-size: 11px; font-weight: 670; }
.tag.ok { color: #126751; border-color: #cfebdc; background: #e9f7ee; }
.tag.warn { color: #8a5b19; border-color: #f1e1bb; background: #fff7e8; }
.tag.bad { color: #ac423e; border-color: #f0d9d4; background: #fff0ec; }
.list { display: grid; gap: 0; }
.row { padding: 15px 0; border-bottom: 1px solid #edf1ee; }
.row:last-child { border-bottom: 0; }
.row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.row h4 { font-size: 13px; font-weight: 680; margin: 0 0 5px; line-height: 1.45; overflow-wrap: anywhere; }
.row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.empty { padding: 22px 14px; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.section-title h2 { font-size: clamp(22px, 2.2vw, 29px); margin: 0 0 5px; letter-spacing: -.04em; }
.section-title p { color: var(--muted); margin: 0; font-size: 13px; line-height: 1.5; }
.workspace > .card + .grid, .workspace > .card + .card { margin-top: 18px; }
.toast { z-index: 40; border-radius: 13px; padding: 14px 20px; color: white; background: #1c3d43; box-shadow: 0 16px 32px rgba(14, 36, 43, .22); }

@media (max-width: 1180px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .side { padding-left: 10px; padding-right: 10px; }
  .hero { grid-template-columns: minmax(0, 1fr) 190px; padding: 32px; }
  .composer { flex-wrap: wrap; }
  .composer .btn.primary { width: 100%; min-height: 44px; }
}
@media (max-width: 900px) {
  .app { display: block; }
  .side { position: fixed; top: 0; left: 0; z-index: 30; width: min(290px, 85vw); height: 100dvh; transform: translateX(-105%); transition: transform .25s ease; }
  .side.open { transform: translateX(0); }
  .mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(10, 30, 38, .55); }
  .mobile-backdrop.open { display: block; }
  .menu { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
  .hero { grid-template-columns: minmax(0, 1fr) 205px; }
}
@media (max-width: 700px) {
  .top { height: 76px; padding: 0 18px; }
  .top-kicker { font-size: 9px; letter-spacing: .08em; }
  .top small { font-size: 10px; }
  .health { font-size: 0; padding: 9px; }
  .health .dot { margin: 0; }
  .workspace { padding: 19px 16px 38px; }
  .hero { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; border-radius: 19px; }
  .hero h2 { font-size: clamp(32px, 10vw, 46px); }
  .hero p { font-size: 13px; }
  .voice-card { flex-direction: row; justify-content: flex-start; text-align: left; padding: 13px 16px; gap: 14px; flex-wrap: wrap; }
  .voice-card .voice-label { display: none; }
  .voice-card .mic { width: 52px; height: 52px; font-size: 19px; margin: 0; box-shadow: 0 0 0 5px rgba(237, 188, 126, .12); }
  .voice-card span:last-child { max-width: none; width: calc(100% - 70px); }
  .overview-heading { margin-top: 29px; }
  .overview-date { display: none; }
  .span-4 { grid-column: span 6; }
  .span-6 { grid-column: span 12; }
  .grid { gap: 12px; }
  .card { padding: 19px; border-radius: 15px; }
  .metric-card { min-height: 144px; }
  .metric { font-size: 38px; }
  .ai-summary { align-items: flex-start; flex-direction: column; }
  .footer { padding: 14px 18px 25px; }
}
@media (max-width: 480px) {
  .composer { flex-direction: column; }
  .composer textarea { min-height: 70px; }
  .composer .btn.primary { width: 100%; }
  .span-4 { grid-column: span 12; }
  .metric-card { min-height: 118px; }
  .status-grid { grid-template-columns: 1fr; }
  .section-title { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Executive direction: the live workspace follows the gold/ink references. */
:root {
  --bg: #f7f8fa;
  --surface: #fff;
  --surface2: #fffaf0;
  --ink: #17191d;
  --muted: #656e7a;
  --gold: #f1b900;
  --gold2: #ffd84a;
  --line: #e5e7eb;
  --shadow: 0 5px 24px rgba(26, 29, 35, .035);
}
body { background: var(--bg); }
.app { grid-template-columns: 248px minmax(0, 1fr); }
.side {
  background: #fff;
  color: #17191d;
  border-right: 1px solid #e8eaed;
  box-shadow: none;
}
.brand { gap: 11px; border-color: #edeef0; padding-bottom: 22px; }
.brand-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe267, #f6b900);
  color: #17191d;
  font-size: 24px;
  box-shadow: 0 7px 16px rgba(231, 169, 0, .18);
}
.brand b { display: block; color: #17191d; font-size: 19px; letter-spacing: -.05em; }
.brand b em { color: #d69a00; font-style: normal; }
.brand small { color: #68717b; font-size: 10px; }
.brand-symbol.brand-a { background: none; box-shadow: none; padding: 0; overflow: hidden; border: 1px solid #e8d17a; }
.brand-symbol.brand-a img { width: 100%; height: 100%; display: block; border-radius: 12px; object-fit: cover; }
.nav-heading, .side-foot-label { color: #868d97; }
.nav { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 4px; }
.nav-group { font-size: 10px; letter-spacing: .14em; font-weight: 750; color: #8a8a8a; padding: 16px 12px 6px; }
.top { min-height: 72px; height: auto; padding-top: 10px; padding-bottom: 10px; }
.top h1 { font-size: clamp(18px, 1.6vw, 21px); }
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); }
.btn, .quick button, .tab-btn, .month-day, .link-button { transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover, .quick button:hover { transform: scale(1.01); }
.tab-btn.active:hover, .btn.primary:hover { transform: scale(1.02); }
.nav button { color: #404954; border-radius: 10px; font-size: 13px; }
.nav button:hover { color: #16191d; background: #fff6da; }
.nav button.active, .nav button[aria-current="page"] {
  color: #17191d;
  background: linear-gradient(100deg, #ffe477, #ffcf37);
  box-shadow: 0 4px 13px rgba(239, 181, 0, .16);
  font-weight: 750;
}
.nav i { color: #9a7609; }
.nav button.active i { color: #181818; }
.side-foot { border-color: #edeef0; color: #4b5660; }
.side-foot-detail { color: #808995; }
.top { background: rgba(255, 255, 255, .96); border-color: var(--line); }
.top-kicker { color: #9a7b21; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; font-size: 18px; }
.top .btn.primary { align-self: center; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; }
.top .btn.primary span { font-size: 16px; }
.health { background: #f5f7f6; border-color: #e4e8e6; color: #57665e; }
.health:has(.dot.ok) { background: #edf9f2; border-color: #d8ebdc; color: #20774d; }
.workspace { max-width: 1640px; }
.footer { color: #8d939a; }
.btn { border-color: #dde1e6; color: #242a30; }
.btn:hover { border-color: #e7b322; background: #fff8df; }
.btn.primary, .composer .btn.primary, .top .btn.primary {
  background: linear-gradient(125deg, #ffe36b, #ffc928);
  border-color: #f5c83c;
  color: #1a1b1b;
  box-shadow: 0 5px 14px rgba(219, 159, 0, .15);
}
.btn.primary:hover, .composer .btn.primary:hover, .top .btn.primary:hover { background: #ffe681; }
.welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.welcome .eyebrow, .overview-heading .eyebrow { color: #ac7900; }
.welcome h2 { font-size: clamp(27px, 3vw, 39px); letter-spacing: -.055em; margin: 6px 0 3px; line-height: 1.1; }
.welcome p { color: var(--muted); font-size: 13px; margin: 0; }
.welcome-spark { color: #e7a900; font-size: .75em; }
.overview-date { color: #767d87; }
.hero {
  grid-template-columns: 55% 45%;
  padding: clamp(28px, 4vw, 56px);
  color: #000;
  border: 1px solid var(--border-soft);
  background: var(--ossirion-white);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.hero-waves { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 190px; pointer-events: none; }
.hero-waves path { fill: none; stroke-linecap: round; }
.hero-waves .w1 { stroke: #ECECEC; stroke-width: 2.5; animation: waveDrift 28s ease-in-out infinite alternate; }
.hero-waves .w2 { stroke: #D9D9D9; stroke-width: 2; animation: waveDrift 22s ease-in-out infinite alternate-reverse; }
.hero-waves .w3 { stroke: #000; stroke-width: 1.5; opacity: .14; animation: waveDrift 18s ease-in-out infinite alternate; }
.hero-waves .w4 { stroke: var(--ossirion-yellow); stroke-width: 2.5; animation: waveDrift 14s ease-in-out infinite alternate-reverse; }
@keyframes waveDrift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.hero-content { position: relative; z-index: 1; min-width: 0; }
.hero::before { border-color: rgba(161, 122, 4, .11); box-shadow: 0 0 0 75px rgba(255, 255, 255, .16), 0 0 0 150px rgba(255, 255, 255, .09); }
.hero .eyebrow { color: #86600a; }
.hero h2 { color: #000; font-size: clamp(38px, 4vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 750; }
.btn:active, .quick button:active, .tab-btn:active { transform: scale(.99); }
.btn:disabled { opacity: .55; cursor: wait; }
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease; }
.hero-accent { color: #000; }
.hero .eyebrow { color: var(--gold-ink); }
.hero p { color: #56534b; max-width: 590px; }
.composer { border: 1px solid var(--border-soft); border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.composer:focus-within { outline: 2px solid var(--ossirion-yellow); }
.composer textarea { border-radius: 14px; }
.hero .quick button { background: rgba(255, 255, 255, .8); color: #3c331e; border-color: rgba(137, 103, 19, .14); }
.hero .quick button:hover { background: white; border-color: #e4aa11; }
.voice-card { background: rgba(255, 255, 255, .58); border-color: rgba(165, 122, 0, .15); box-shadow: none; }
.voice-label { color: #806113; }
.voice-card strong { color: #252525; }
.voice-card span:last-child { color: #5f5b50; }
.mic { color: #ffdc58; background: #17191d; border-color: #17191d; box-shadow: 0 0 0 10px rgba(255, 255, 255, .48); }
.mic:hover { background: #323537; }
.mic.listening { animation: listening-gold 1.5s ease-in-out infinite; }
@keyframes listening-gold { 50% { box-shadow: 0 0 0 17px rgba(250, 198, 28, .37); } }
.span-3 { grid-column: span 3; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.grid { gap: 15px; }
.card { border-color: var(--line); box-shadow: var(--shadow); }
.metric-card { min-height: 158px; }
.metric-card::after { border-color: #fff1ba; }
.metric-icon, .metric-card:nth-child(2) .metric-icon { color: #775900; background: #fff1c0; }
.metric { color: #151719; }
.metric-label { color: #292e34; }
.metric-card p { color: #7a828d; }
.card-heading { border-color: #f0f0f1; }
.card-caption { color: #9d8790; }
.row { border-color: #f0f1f2; }
.status-card { background: #fafafa; border-color: #edeef0; }
.ai-summary { background: #ffefaa; border-color: #fbe097; }
.ai-summary .eyebrow { color: #8d6100; }
.ai-summary p { color: #5d5140; }
.tag.ok { color: #166f46; }
.tag.warn { color: #8a5b19; }
.toast { background: #252525; }
.link-button { background: none; border: 0; padding: 5px 2px; color: #9b7000; font-weight: 700; font-size: 12px; cursor: pointer; }
.link-button:hover { color: #614400; text-decoration: underline; }
.timeline-row { display: flex; align-items: flex-start; gap: 13px; }
.timeline-dot { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; background: #f5bc14; border-radius: 50%; box-shadow: 0 0 0 4px #fff5d8; }
.data-note { padding-top: 10px; color: #8c939c; font-size: 11px; }
.action-list { display: grid; gap: 7px; }
.action-list button { display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid #eceef0; border-radius: 10px; background: #fff; padding: 10px 12px; text-align: left; color: var(--ink); }
.action-list button:hover { border-color: #efc140; background: #fffbef; }
.action-list span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; color: #8d6500; background: #fff2c7; font-size: 17px; }
.action-list b { font-size: 12px; font-weight: 650; }
.action-list i { margin-left: auto; color: #a77700; font-style: normal; }
.integration-intro { position: relative; padding: 31px 33px; background: #191a1b; border-radius: 19px; color: white; }
.integration-intro > :not(.ecosystem-logo) { position: relative; z-index: 1; }
.ecosystem-logo { position: absolute; right: 27px; top: 21px; width: 155px; height: 42px; object-fit: contain; object-position: right; opacity: .8; }
.integration-intro .eyebrow { color: #ffd453; }
.integration-intro h3 { margin: 10px 0 7px; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -.045em; }
.integration-intro p { max-width: 740px; margin: 0; color: #ccd0d2; font-size: 13px; line-height: 1.6; }
.integration-map { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px 0 10px; }
.integration-node { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 5px; padding: 19px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.integration-node.central { border-color: #f1cd56; background: #fff3c7; }
.integration-node .node-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: #715000; background: #fff0b2; font-size: 23px; }
.integration-node b { font-size: 13px; }
.integration-node small { color: var(--muted); font-size: 11px; }
.flow-arrow { color: #c59000; font-size: 25px; font-weight: 700; }
.integration-grid { margin-bottom: 17px; }
.integration-card { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
.integration-card h3 { margin: 0; }
.integration-card p { margin: 0; color: var(--muted); font-size: 13px; }
.integration-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: #fff2c7; color: #855e00; font-size: 23px; }
.integration-card .status-card { min-width: 160px; }
.integration-card .status-grid { width: 100%; }
.integration-card .link-button { margin-top: auto; }
.integration-explain ol { margin: 0; padding-left: 22px; display: grid; gap: 13px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.integration-explain li::marker { color: #c38c00; font-weight: 750; }
.integration-explain li b { color: var(--ink); }

/* ---- Modo noche diseñado: negro cálido + dorado, no solo "todo negro" ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ossirion-yellow: #E6C85C;
  --bg: #0A0A0A;
  --bg-primary: #0A0A0A;
  --bg-secondary: #121212;
  --surface: #151515;
  --surface2: #121212;
  --surface-alt: #1C1C1C;
  --ink: #F5E7A1;
  --text-primary: #F5E7A1;
  --muted: #D8C97A;
  --text-secondary: #D8C97A;
  --gold: #E6C85C;
  --gold2: #D4AF37;
  --gold-ink: #F2D96B;
  --strong: #F2D96B;
  --accent: #E6C85C;
  --accent-soft: #D4AF37;
  --line: #2A2A2A;
  --border-soft: #2A2A2A;
  --ok: #8fd6a4;
  --warn: #F2D96B;
  --bad: #ff9d94;
  --shadow: 0 10px 28px rgba(0, 0, 0, .45);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] body { color: var(--ink); background: var(--bg); }
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(42rem 22rem at 12% 20%, rgba(230, 200, 92, .08), transparent 70%),
    radial-gradient(48rem 26rem at 88% 8%, rgba(212, 175, 55, .07), transparent 70%),
    radial-gradient(40rem 24rem at 55% 45%, rgba(230, 200, 92, .04), transparent 70%);
}
:root[data-theme="dark"] .side { color: #F5E7A1; background: #060606; border-color: #1c1c1c; }
:root[data-theme="dark"] .brand, :root[data-theme="dark"] .side-foot { border-color: #222; }
:root[data-theme="dark"] .brand b { color: #F5E7A1; }
:root[data-theme="dark"] .brand small, :root[data-theme="dark"] .side-foot, :root[data-theme="dark"] .side-foot-detail { color: #a8945a; }
:root[data-theme="dark"] .nav-heading, :root[data-theme="dark"] .side-foot-label, :root[data-theme="dark"] .nav-group { color: #8a7648; }
:root[data-theme="dark"] .nav button { color: #cbbd7f; }
:root[data-theme="dark"] .nav button:hover { color: #F5E7A1; background: rgba(230, 200, 92, .10); }
:root[data-theme="dark"] .nav button.active, :root[data-theme="dark"] .nav button[aria-current="page"] { color: #0A0A0A; background: var(--accent); }
:root[data-theme="dark"] .top { background: rgba(10, 10, 10, .88); border-color: var(--line); }
:root[data-theme="dark"] .top h1 { color: #F5E7A1; }
:root[data-theme="dark"] .top small { color: var(--muted); }
:root[data-theme="dark"] .top-kicker, :root[data-theme="dark"] .welcome .eyebrow, :root[data-theme="dark"] .overview-heading .eyebrow { color: var(--accent); }
:root[data-theme="dark"] .welcome h2, :root[data-theme="dark"] .overview-heading h2, :root[data-theme="dark"] .section-title h2 { color: #F5E7A1; }
:root[data-theme="dark"] .welcome p, :root[data-theme="dark"] .overview-heading p, :root[data-theme="dark"] .section-title p { color: var(--muted); }
:root[data-theme="dark"] .welcome-spark, :root[data-theme="dark"] .overview-date { color: var(--accent); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .integration-node { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .card h3 { color: #F5E7A1; }
:root[data-theme="dark"] .card p, :root[data-theme="dark"] .muted { color: var(--muted); }
:root[data-theme="dark"] .card-heading, :root[data-theme="dark"] .row { border-color: #232323; }
:root[data-theme="dark"] .card-caption { color: #8a7648; }
:root[data-theme="dark"] .metric, :root[data-theme="dark"] .metric-label, :root[data-theme="dark"] .row h4 { color: #F5E7A1; }
:root[data-theme="dark"] .metric-card::after { border-color: #3a3018; }
:root[data-theme="dark"] .metric-card p, :root[data-theme="dark"] .data-note, :root[data-theme="dark"] .row p { color: var(--muted); }
:root[data-theme="dark"] .metric-icon, :root[data-theme="dark"] .metric-card:nth-child(2) .metric-icon { color: #0A0A0A; background: var(--accent); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .action-list button, :root[data-theme="dark"] .tab-btn { background: #1a1a1a; border-color: #333; color: #F5E7A1; }
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .action-list button:hover, :root[data-theme="dark"] .tab-btn:hover { border-color: var(--accent); background: #22201a; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .composer .btn.primary, :root[data-theme="dark"] .top .btn.primary { background: var(--accent); border-color: var(--accent); color: #0A0A0A; box-shadow: 0 6px 18px rgba(230, 200, 92, .22); }
:root[data-theme="dark"] .mic-cta { background: var(--accent); color: #0A0A0A; box-shadow: 0 10px 26px rgba(230, 200, 92, .25); }
:root[data-theme="dark"] .quick button, :root[data-theme="dark"] .status-card { background: #161616; border-color: #2c2c2c; color: #EAD9a0; }
:root[data-theme="dark"] .quick button:hover { background: #201d12; border-color: var(--accent); }
:root[data-theme="dark"] .tag { background: #1c1a12; border-color: #3a3423; color: #D8C97A; }
:root[data-theme="dark"] .tag.ok { color: #8fd6a4; background: #14231a; border-color: #2c4a35; }
:root[data-theme="dark"] .tag.warn { color: #F2D96B; background: #26200f; border-color: #4a3f1c; }
:root[data-theme="dark"] .tag.bad { color: #ff9d94; background: #2a1512; border-color: #55231d; }
:root[data-theme="dark"] .hero { color: var(--ink); border-color: #3a3018; background: #101010; box-shadow: 0 15px 40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .hero h2 { color: #F5E7A1; }
:root[data-theme="dark"] .hero .eyebrow { color: var(--accent); }
:root[data-theme="dark"] .hero p { color: var(--muted); }
:root[data-theme="dark"] .hero-waves .w1 { stroke: #3a3a3a; }
:root[data-theme="dark"] .hero-waves .w2 { stroke: #55503a; }
:root[data-theme="dark"] .hero-waves .w3 { stroke: #6b6250; opacity: .5; }
:root[data-theme="dark"] .hero-waves .w4 { stroke: var(--accent); }
:root[data-theme="dark"] .hero .quick button { background: #1a1a1a; color: #EAD9a0; border-color: #333; }
:root[data-theme="dark"] .hero .quick button:hover { background: #221e10; border-color: var(--accent); }
:root[data-theme="dark"] .composer { background: #151515; border-color: #2e2e2e; }
:root[data-theme="dark"] .composer textarea { color: #F5E7A1; }
:root[data-theme="dark"] .composer textarea::placeholder { color: #8a7648; }
:root[data-theme="dark"] .avatar { background: #000; }
:root[data-theme="dark"] .orbit { border-color: rgba(230, 200, 92, .4); }
:root[data-theme="dark"] .mic { background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 8px rgba(230, 200, 92, .14); }
:root[data-theme="dark"] .mic .mic-ico { filter: grayscale(1) brightness(.25); }
:root[data-theme="dark"] .voice-assistant strong, :root[data-theme="dark"] .chat-side h3 { color: #F5E7A1; }
:root[data-theme="dark"] .bubble-user { background: #2b2513; color: #F5E7A1; }
:root[data-theme="dark"] .bubble-alfonso { background: #151515; border-color: #2e2e2e; color: #F5E7A1; }
:root[data-theme="dark"] .bubble-time { color: #8a7648; }
:root[data-theme="dark"] .tab-btn.active { background: var(--accent); border-color: var(--accent); color: #0A0A0A; }
:root[data-theme="dark"] .month-day { color: #F5E7A1; }
:root[data-theme="dark"] .month-day.selected { background: var(--accent); color: #0A0A0A; }
:root[data-theme="dark"] .month-day.has-events::after { background: var(--accent); }
:root[data-theme="dark"] .month-dow { color: #8a7648; }
:root[data-theme="dark"] .timeline-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(230, 200, 92, .15); }
:root[data-theme="dark"] .ai-summary { background: #1d190d; border-color: #4a3f1c; }
:root[data-theme="dark"] .ai-summary .eyebrow { color: var(--accent); }
:root[data-theme="dark"] .ai-summary p, :root[data-theme="dark"] .ai-summary h3 { color: #EAD9a0; }
:root[data-theme="dark"] .integration-intro { background: #0d0d0d; border: 1px solid #2e2a18; }
:root[data-theme="dark"] .integration-intro h3, :root[data-theme="dark"] .integration-intro p { color: #EAD9a0; }
:root[data-theme="dark"] .integration-node.central { background: #201b0d; border-color: #6b5a26; }
:root[data-theme="dark"] .integration-card { border-color: #3a3320; }
:root[data-theme="dark"] .integration-icon, :root[data-theme="dark"] .node-icon { background: #2b2410; color: var(--accent); }
:root[data-theme="dark"] .integration-explain li b { color: #F5E7A1; }
:root[data-theme="dark"] .integration-explain li::marker { color: var(--accent); }
:root[data-theme="dark"] .health { color: #D8C97A; background: #1c1a10; border-color: #3a3423; }
:root[data-theme="dark"] .health:has(.dot.ok) { color: #8fd6a4; background: #14231a; border-color: #2c4a35; }
:root[data-theme="dark"] .dot.ok { background: #5fce8a; box-shadow: 0 0 0 3px rgba(95, 206, 138, .18); }
:root[data-theme="dark"] .link-button { color: var(--accent); }
:root[data-theme="dark"] .link-button:hover { color: #F5E7A1; }
:root[data-theme="dark"] .action-list span { background: #2b2410; color: var(--accent); }
:root[data-theme="dark"] .action-list i { color: var(--accent); }
:root[data-theme="dark"] .empty { color: var(--muted); }
:root[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #242424 50%, #1a1a1a 75%); background-size: 800px 100%; }
:root[data-theme="dark"] .toast { background: #F5E7A1; color: #0A0A0A; }
:root[data-theme="dark"] .footer { color: #8a7648; border-color: #222; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea { color-scheme: dark; }
/* Transición suave claro/oscuro */
body, .side, .top, .card, .btn, .quick button, .tag, .hero, .composer,
.nav button, .status-card, .bubble-user, .bubble-alfonso, .tab-btn,
.month-day, .integration-node, .toast, .footer, .avatar-stage .avatar {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.hero-waves path { transition: stroke .28s ease; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr) 190px; }
  .span-3 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .app { display: block; }
  .side { position: fixed; }
}
@media (max-width: 700px) {
  .top-cta { display: none !important; }
  .top-actions { gap: 6px; }
  .welcome { align-items: flex-start; }
  .welcome .overview-date { display: none; }
  .hero { grid-template-columns: 1fr; }
  .span-5, .span-7 { grid-column: span 12; }
  .integration-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-arrow { display: none; }
  .ecosystem-logo { width: 95px; opacity: .4; }
}
@media (max-width: 480px) {
  .span-3 { grid-column: span 12; }
  .integration-intro { padding: 24px; }
  .integration-node { padding: 13px 8px; }
}

/* ============ OSSIRION web redesign: blanco + negro + amarillo ============ */
:root {
  --ossirion-yellow: #FFD700;
  --ossirion-black: #000000;
  --ossirion-white: #FFFFFF;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F7F7;
  --text-primary: #000000;
  --text-secondary: #666666;
  --border-soft: #E6E6E6;
  --gold-ink: #7a5c00;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, .05);
  --bg: var(--bg-primary);
  --surface: var(--ossirion-white);
  --surface2: var(--bg-secondary);
  --ink: #151515;
  --muted: var(--text-secondary);
  --gold: var(--ossirion-yellow);
  --gold2: #E8B800;
  --line: #ECECEC;
  --shadow: var(--shadow-soft);
}
body {
  color: var(--ink);
  background: var(--bg-primary);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Ondas de fondo lentas y sobrias */
body::before {
  content: ""; position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42rem 22rem at 12% 20%, rgba(255, 215, 0, .07), transparent 70%),
    radial-gradient(48rem 26rem at 88% 8%, rgba(0, 0, 0, .045), transparent 70%),
    radial-gradient(40rem 24rem at 55% 45%, rgba(0, 0, 0, .025), transparent 70%);
  animation: waveShift 26s ease-in-out infinite alternate;
}
@keyframes waveShift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, 3%, 0); } }
@keyframes waveFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wavePulse { 0% { transform: scale(.82); opacity: .85; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes haloBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, .35); } 50% { box-shadow: 0 0 0 16px rgba(255, 215, 0, 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
/* Sidebar negra premium */
.side { background: #080808; color: #fff; border-right: 0; box-shadow: none; width: 230px; }
.app { grid-template-columns: 230px minmax(0, 1fr); }
.brand b { color: #fff; }
.brand small { color: #bdbdbd; }
.nav-heading, .side-foot-label { color: #8a8a8a; }
.nav button { color: #d9d9d9; border-radius: var(--radius-md); }
.nav button:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: none; }
.nav button.active, .nav button[aria-current="page"] { background: var(--ossirion-yellow); color: #000; box-shadow: none; font-weight: 750; }
.nav i { color: inherit; }
.side-foot { border-top: 1px solid rgba(255, 255, 255, .12); color: #cfcfcf; }
.side-foot-detail { color: #8a8a8a; }
html[data-collapsed="true"] .app { grid-template-columns: 76px minmax(0, 1fr); }
html[data-collapsed="true"] .nav span, html[data-collapsed="true"] .brand div, html[data-collapsed="true"] .nav-heading,
html[data-collapsed="true"] .side-foot { display: none; }
html[data-collapsed="true"] .nav button { justify-content: center; }
@media (max-width: 900px) { html[data-collapsed="true"] .app { display: block; } }
/* Header blanco con blur */
.top { background: rgba(255, 255, 255, .86); border-color: var(--border-soft); padding-top: env(safe-area-inset-top); }
.top-kicker { color: var(--gold-ink); }
/* Botones y enlaces */
.btn.primary, .composer .btn.primary, .top .btn.primary {
  background: var(--ossirion-yellow); border-color: var(--ossirion-yellow); color: #000;
  border-radius: 999px; box-shadow: 0 6px 18px rgba(255, 215, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.primary:hover, .composer .btn.primary:hover, .top .btn.primary:hover { background: #ffdc33; transform: scale(1.02); }
.link-button { color: var(--gold-ink); }
/* Hero SaaS */
.hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  background: var(--ossirion-white);
  border: 1px solid var(--border-soft);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-xl);
  min-height: 420px;
  overflow: hidden;
}
.hero::before { display: none; }
.hero h2 { color: #000; font-size: clamp(40px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.hero p { color: var(--text-secondary); }
.hero .eyebrow { color: var(--gold-ink); }
.hero-accent { color: var(--gold-ink); }
.composer { border: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); border-radius: var(--radius-lg); }
.composer:focus-within { outline-color: var(--ossirion-yellow); }
.hero .quick button { background: #fff; color: #1a1a1a; border-color: var(--border-soft); }
.hero .quick button:hover { background: #fffbe0; border-color: var(--ossirion-yellow); }
/* Avatar + ondas + mic */
.avatar {
  position: relative; display: inline-grid; place-items: center;
  width: var(--s, 140px); height: var(--s, 140px); border-radius: 50%;
  background: #151515; color: var(--ossirion-yellow);
  font-weight: 800; font-size: calc(var(--s, 140px) * .4); isolation: isolate; flex: 0 0 auto;
}
.avatar::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid var(--ossirion-yellow); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; z-index: 1; }
.hero-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); min-width: 0; text-align: center; }
.avatar-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 18px 0 26px; }
.avatar-stage .avatar { animation: waveFloat 8s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .12)); }
.orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .10); opacity: 0; pointer-events: none; }
.orbit.o1 { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
.orbit.o2 { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-color: rgba(0, 0, 0, .07); }
.orbit.o3 { width: 360px; height: 360px; margin: -180px 0 0 -180px; border-color: var(--ossirion-yellow); }
.is-live .orbit { opacity: 1; animation: wavePulse 2.4s ease-out infinite; }
.is-live .orbit.o2 { animation-delay: .8s; }
.is-live .orbit.o3 { animation-delay: 1.6s; }
.is-speaking .orbit { animation-duration: 1.2s; border-color: var(--ossirion-yellow); }
.voice-assistant { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mic {
  width: 96px; height: 96px; font-size: 38px; border-radius: 50%;
  background: #000 !important; color: #fff !important; border: 3px solid var(--ossirion-yellow) !important;
  box-shadow: 0 0 0 8px rgba(255, 215, 0, .12); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mic:hover { transform: scale(1.02); }
.mic .mic-ico { filter: grayscale(1) brightness(2.4); }
.mic.listening { animation: haloBreathe 1.6s ease-out infinite; }
.mic.speaking { animation: haloBreathe 1.1s ease-out infinite; }
.avatar-stage .avatar { animation: waveFloat 7s ease-in-out infinite; }
.orbit { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 2px solid rgba(255, 215, 0, .55); opacity: 0; pointer-events: none; }
.orbit.o2 { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
.orbit.o3 { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.is-live .orbit { animation: wavePulse 2.6s ease-out infinite; }
.is-live .orbit.o2 { animation-delay: .85s; }
.is-live .orbit.o3 { animation-delay: 1.7s; }
.mic { background: #000 !important; color: #fff !important; border: 1px solid #000 !important; }
.mic-cta {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
  background: var(--ossirion-yellow); color: #000; font-weight: 800; font-size: 17px;
  border-radius: 999px; padding: 16px 30px; box-shadow: 0 10px 26px rgba(255, 215, 0, .32);
  transition: transform .2s ease;
}
.mic-cta:hover { transform: scale(1.02); }
.mic.listening { animation: haloBreathe 1.6s ease-out infinite; }
.mic.speaking { animation: haloBreathe 1.1s ease-out infinite; }
.voice-card { background: var(--bg-secondary); border: 1px solid var(--border-soft); box-shadow: none; color: var(--ink); }
.voice-card strong { color: #000; }
.voice-card span:last-child, .voice-label { color: var(--text-secondary); }
/* Chat asistente */
.chat-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.chat-side { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.chat-log { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.bubble-user { align-self: flex-end; max-width: 88%; background: #F1F1F1; color: #000; border-radius: 18px 18px 6px 18px; padding: 10px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble-row { display: flex; gap: 8px; align-items: flex-start; max-width: 94%; }
.bubble-alfonso { background: #fff; border: 1px solid var(--border-soft); border-radius: 6px 18px 18px 18px; padding: 10px 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; box-shadow: var(--shadow-soft); }
.bubble-time { display: block; margin-top: 6px; font-size: 11px; color: var(--text-secondary); }
.mini-avatar { width: 30px; height: 30px; font-size: 13px; flex: 0 0 auto; }
/* Tabs de tareas y calendario mensual */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab-btn { border: 1px solid var(--border-soft); background: #fff; color: var(--text-secondary); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 650; }
.tab-btn.active { background: var(--ossirion-yellow); border-color: var(--ossirion-yellow); color: #000; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month-dow { text-align: center; font-size: 11px; font-weight: 750; color: var(--text-secondary); padding: 4px 0; }
.month-day { min-height: 44px; border: 0; background: transparent; border-radius: 50%; font-size: 13px; color: var(--ink); position: relative; }
.month-day.has-events::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-ink); }
.month-day.selected { background: var(--ossirion-yellow); color: #000; font-weight: 800; }
.month-day.other { visibility: hidden; }
/* Cards, métricas, estados */
.card { border-color: var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.metric { color: #000; }
.metric-card::after { border-color: #f3e9bd; }
.metric-icon, .metric-card:nth-child(2) .metric-icon { color: #000; background: #ffef9e; }
.tag.ok { color: #0d6b3f; border-color: #cdebd8; background: #e9f7ee; }
.status-card { background: var(--bg-secondary); border-color: var(--border-soft); }
.ai-summary { background: #fff8d9; border-color: #f3df7a; }
.skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, #f1f1f1 25%, #fafafa 50%, #f1f1f1 75%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty .avatar { --s: 64px; }
.page-enter { animation: fadeUp .25s ease; }
.reveal { opacity: 0; }
.reveal.in { opacity: 1; transition: opacity .25s ease, transform .25s ease; }
:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
/* Responsive + safe area */
.workspace, .footer { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
.footer { padding-bottom: max(15px, env(safe-area-inset-bottom)); }
@media (max-width: 1100px) { .chat-layout { grid-template-columns: 1fr; } .chat-side { position: static; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { width: min(300px, 88vw); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero h2 { font-size: clamp(34px, 9vw, 44px); }
  .mic-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; }
  body::before { display: none; }
}
.lead-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lead-field { display: grid; gap: 5px; font-size: 12px; font-weight: 650; color: var(--muted); }
.lead-field input, .lead-field select, .lead-field textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface, #fff); border: 1px solid var(--border-soft, #E6E6E6); border-radius: 10px; padding: 9px 11px; width: 100%; }
.lead-wide { grid-column: 1 / -1; }
.lead-field textarea { resize: vertical; min-height: 52px; }
:root[data-theme="dark"] .lead-field input, :root[data-theme="dark"] .lead-field select, :root[data-theme="dark"] .lead-field textarea { background: #151515; border-color: #2e2e2e; color: #F5E7A1; }
@media (max-width: 700px) { .lead-form { grid-template-columns: 1fr 1fr; } }
/* Inicio v2: Alfonso primero en mobile, mic accesible, safe-area */
@media (max-width: 900px) {
  .hero-side { order: -1; }
  .avatar-stage .avatar { animation: none; }
  .voice-assistant { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .mic { width: 88px; height: 88px; font-size: 34px; }
  .orbit.o1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .orbit.o2 { width: 248px; height: 248px; margin: -124px 0 0 -124px; }
  .orbit.o3 { width: 296px; height: 296px; margin: -148px 0 0 -148px; }
}

/* Agenda comercial: las llamadas ya agendadas llevan su acción de borrador. */
.timeline-row, .lead-action-row { display: flex; align-items: center; gap: 12px; }
.timeline-row > div, .lead-action-row > div { min-width: 0; flex: 1; }
.mail-action { margin-left: auto; white-space: nowrap; min-height: 44px; align-self: center; }
.mail-preview { margin-top: 18px; }
.mail-preview .card-heading { align-items: center; }
.mail-preview h4 { margin: 20px 0 8px; }
.mail-preview ul { margin: 0 0 14px; padding-left: 22px; color: var(--muted); line-height: 1.6; }
.mail-body { padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-md, 16px); }
:root[data-theme="dark"] .mail-body { background: #1C1C1C; border-color: #2A2A2A; color: #F5E7A1; }
@media (max-width: 700px) {
  .lead-action-row, .timeline-row:has(.mail-action) { align-items: flex-start; flex-wrap: wrap; }
  .mail-action { width: 100%; margin-left: 0; }
}
.login-card { background: var(--surface); color: var(--ink); border-color: var(--line); }
.login-card input { background: var(--surface2); border-color: var(--line); color: var(--ink); }
.login-card #loginError { color: var(--bad); }
:root[data-theme="dark"] .login-card { background: #151515; border-color: #2c2c2c; color: #F5E7A1; }
:root[data-theme="dark"] .login-card h2, :root[data-theme="dark"] .login-brand { color: #F5E7A1; }
:root[data-theme="dark"] .login-card p { color: #8a7648; }
:root[data-theme="dark"] .login-card input { background: #1c1c1c; border-color: #333; color: #F5E7A1; }
:root[data-theme="dark"] .login-card .btn.primary { background: var(--accent); border-color: var(--accent); color: #0A0A0A; }
:root[data-theme="dark"] .side-foot #logoutBtn { color: #D8C97A; border-color: #3a3423; }
/* Selector real de IA por orden: ruta + privacidad con allowlist del backend. */
.ai-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ai-mode select { border: 1px solid var(--border-soft, #E6E6E6); border-radius: 999px; background: #fff; color: var(--ink, #151515); padding: 8px 14px; font-size: 13px; font-weight: 650; }
.ai-private { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted, #666); }
.ai-private input { width: 16px; height: 16px; accent-color: var(--ossirion-yellow, #FFD700); }
:root[data-theme="dark"] .ai-mode select { background: #151515; border-color: #2e2e2e; color: #F5E7A1; }

/* FASE 19: composición de las referencias recibidas, datos desde API. */
.ui-icon { width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.nav .ui-icon { width: 23px; height: 23px; }
.brand small { letter-spacing: .22em; font-size: 12px; }
.mobile-wordmark, .reference-mobile-nav { display: none; }
.top-heading { flex: 1; min-width: 0; }
#topSearch { display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface2); border-radius: 999px; width: min(100%, 850px); padding: 5px 16px; }
#searchCommand { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 10px 0; outline-offset: 4px; }
.workspace { max-width: 1800px; padding: 18px 22px 40px; }
.reference-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.reference-main, .reference-rail { min-width: 0; }
.reference-rail { display: flex; flex-direction: column; gap: 18px; }
.reference-hero { position: relative; display: grid; grid-template-columns: 49% 51%; min-height: 400px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 15% 35%, #fff3ba66, transparent 65%); border-radius: 24px; }
.reference-hero .hero-waves { position: absolute; inset: auto 0 0; height: 50%; width: 100%; opacity: .9; z-index: -1; }
.reference-dog { min-width: 0; height: 440px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.reference-dog img { width: 125%; max-width: none; height: auto; object-fit: contain; }
.reference-copy { align-self: center; padding: 15px 18px 50px 0; }
.reference-copy h2 { font-size: clamp(36px, 4vw, 64px); line-height: 1.06; letter-spacing: -.045em; margin: 16px 0 24px; }
.reference-copy h2 em { color: #efb000; font-style: normal; position: relative; }
.reference-copy h2 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; border-top: 4px solid #ffd000; border-radius: 50%; transform: rotate(-2deg); }
.reference-copy p { font-size: clamp(16px, 1.65vw, 22px); color: var(--muted); line-height: 1.4; }
.reference-composer { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; margin: -36px 18px 18px; }
.reference-composer .composer { flex: 1; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 8px 12px; border-radius: 26px; box-shadow: 0 8px 26px #b28b111a; }
.reference-composer .composer textarea { min-height: 45px; height: 45px; flex: 1; width: 100%; min-width: 0; resize: vertical; border: 0; background: transparent; padding: 12px; box-shadow: none; }
.reference-composer .voice-assistant { padding: 0; background: none; border: 0; box-shadow: none; }
.reference-composer .mic { width: 76px; height: 76px; margin: 0; background: #ffcf15; color: #080808; border: 3px solid #fff; box-shadow: 0 4px 22px #ffc40066; }
.reference-composer .mic .ui-icon { width: 34px; height: 34px; }
:root .reference-composer .mic { background: #ffcf15 !important; color: #080808 !important; border: 3px solid #fff !important; }
.reference-composer .composer { flex-direction: row; }
.reference-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0 10px; margin: 20px 0 10px; }
.mode-tile { display: flex; align-items: center; text-align: left; gap: 12px; padding: 15px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 5px 18px #00000006; cursor: pointer; }
.mode-tile .ui-icon { width: 29px; height: 29px; }
.mode-tile b, .mode-tile small { display: block; }
.mode-tile small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.mode-tile.active { background: linear-gradient(120deg,#ffe879,#ffcc28); color: #111; border-color: #ffd23b; }
.mode-tile.active small { color: #463600; }
.mode-tile:disabled { cursor: default; opacity: .7; }
.mode-options { font-size: 12px; margin: 12px 16px 20px; color: var(--muted); }
.reference-actions { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.action-tile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; position: relative; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 23px; padding: 20px 15px 48px; box-shadow: 0 6px 24px #3e290009; cursor: pointer; }
.action-tile > .ui-icon { width: 42px; height: 42px; margin-bottom: 15px; }
.action-tile b { font-size: 17px; letter-spacing: -.03em; }
.action-tile > span { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 8px; }
.action-tile i { position: absolute; bottom: 12px; right: 12px; background: #ffdb37; color: #111; border-radius: 50%; padding: 5px; }
.action-tile i .ui-icon { width: 18px; height: 18px; }
.reference-dashboard .card, .reference-chat, .security-status { border-radius: 24px; box-shadow: 0 6px 26px #3b2e0908; margin-top: 0; }
.reference-main > .card { margin: 18px 0; }
.clock-panel b { display: block; font-size: 38px; letter-spacing: -.04em; margin-top: 8px; }
.clock-panel > span { font-size: 12px; }
.system-row { display: flex; align-items: center; gap: 9px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.system-row:last-child { border: 0; }
.system-row b { flex: 1; }
.system-state { color: var(--muted); font-size: 11px; }
.system-state.online { color: #008a31; }
.system-state.online::before { content: '● '; }
.compact.reference-hero { min-height: 235px; grid-template-columns: 35% 65%; margin-bottom: 20px; }
.compact .reference-dog { height: 235px; }
.compact .reference-dog img { width: 85%; max-height: 300px; }
.compact .reference-copy { padding-bottom: 20px; }
.compact .reference-copy h2 { font-size: clamp(30px, 3vw, 45px); }
.reference-chat .reference-composer { margin: 18px 0 0; }
.reference-chat .bubble-user { background: #fff2bb; color: #111; border-radius: 24px; }
.reference-chat .bubble-alfonso { border-radius: 24px; }
.reference-chat .mini-avatar { width: 46px; height: 46px; }
.home-categories { grid-template-columns: repeat(4,minmax(0,1fr)); }
.reference-task-metrics { margin-bottom: 20px; }
:root[data-theme="dark"] .reference-hero { background: radial-gradient(ellipse at 15% 35%, #44350066, transparent 65%); }
:root[data-theme="dark"] .reference-copy h2 { color: #fff5d2; }
:root[data-theme="dark"] .reference-copy em { color: #ffd331; }
:root[data-theme="dark"] .reference-hero .hero-waves { opacity: .28; }
@media (max-width: 1350px) { .reference-actions { grid-template-columns: repeat(3,minmax(0,1fr)); } .reference-dashboard { grid-template-columns: minmax(0,1fr) 260px; gap: 16px; } .reference-hero { min-height: 340px; } .reference-dog { height: 360px; } }
@media (max-width: 1050px) { .reference-dashboard { grid-template-columns: 1fr; } .reference-rail { display: grid; grid-template-columns: 1fr 1fr; } .clock-panel { display: none; } }
@media (max-width: 650px) {
  .workspace { padding: 12px 14px 30px; }
  .top { padding: 12px; } .top .health, .top-cta { display: none; }
  .top-heading .menu { display: none; }
  #topSearch { display: none; }
  .mobile-wordmark { display: flex; align-items: center; gap: 9px; }
  .mobile-wordmark img { width: 40px; height: 40px; }
  .mobile-wordmark b { font-size: 18px; }
  .mobile-wordmark small { display: block; font-size: 9px; }
  .reference-mobile-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); z-index: 15; padding: 10px 8px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 24px 24px 0 0; box-shadow: 0 -3px 20px #00000008; }
  .reference-mobile-nav button { border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 5px; font-size: 10px; min-width: 0; }
  .reference-mobile-nav button[aria-current] { color: var(--ink); font-weight: 750; }
  .reference-mobile-nav button[aria-current] .ui-icon { background: #ffdf7788; box-shadow: 0 0 0 9px #ffdf7788; border-radius: 18px; }
  .footer { padding-bottom: 100px; }
  #topSearch { padding: 2px 8px; } #searchCommand { font-size: 12px; }
  .reference-hero { min-height: 280px; grid-template-columns: 53% 47%; }
  .reference-dog { height: 295px; } .reference-dog img { width: 160%; }
  .reference-copy { padding: 0 4px 25px 0; }
  .reference-copy .eyebrow { display: none; }
  .reference-copy h2 { font-size: 32px; margin: 12px 0 20px; }
  .reference-copy p { font-size: 13px; }
  .reference-composer { margin: -20px 0 12px; gap: 8px; }
  .reference-composer .mic { width: 60px; height: 60px; }
  .reference-modes { gap: 7px; padding: 0; }
  .mode-tile { gap: 6px; padding: 12px 7px; border-radius: 16px; }
  .mode-tile .ui-icon { width: 20px; height: 20px; } .mode-tile b { font-size: 11px; } .mode-tile small { font-size: 9px; }
  .action-tile { padding: 16px 12px 45px; } .action-tile b { font-size: 15px; }
  .action-tile > .ui-icon { width: 34px; height: 34px; }
  .reference-rail { display: flex; }
  .compact.reference-hero { grid-template-columns: 36% 64%; min-height: 160px; }
  .compact .reference-dog { height: 160px; } .compact .reference-dog img { width: 120%; }
  .compact .reference-copy h2 { font-size: 30px; }
  .home-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid { grid-template-columns: 1fr; }
  .grid > [class*="span-"] { grid-column: 1 / -1; min-width: 0; }
  .reference-task-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reference-task-metrics > [class*="span-"] { grid-column: auto !important; }
}