:root {
  color-scheme: light;
  --berry: #c8173d;
  --berry-deep: #95112f;
  --berry-soft: #fff0f3;
  --leaf: #627b43;
  --leaf-soft: #edf2e8;
  --gold: #bd8c38;
  --ink: #38282b;
  --muted: #85777a;
  --line: #eee3e2;
  --paper: #fffdfc;
  --canvas: #faf5f3;
  font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.brand-emblem { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; border: 1px solid #f2d7d9; border-radius: 17px; background: linear-gradient(145deg,#fff 5%,#ffedf0); box-shadow: 0 5px 14px #b8193510; }
.brand-emblem svg { width: 38px; height: 38px; overflow: visible; }
.brand-emblem .berry { fill: var(--berry); }
.brand-emblem .leaf { fill: var(--leaf); }
.brand-emblem .seed { fill: none; stroke: #ffd98a; stroke-linecap: round; stroke-width: 2; }
.eyebrow { margin: 0; color: var(--berry); font-size: .69rem; font-weight: 800; letter-spacing: .17em; }

/* Acceso */
.login-screen { display: grid; min-height: 100vh; padding: clamp(20px,5vw,74px); place-items: center; background: radial-gradient(ellipse at 18% 13%,#fff 0 21%,transparent 57%),var(--canvas); }
.login-card { width: 100%; max-width: 450px; justify-self: center; padding: clamp(28px,4vw,48px); border: 1px solid #f0e4e2; border-radius: 28px; background: #fffdfc; box-shadow: 0 26px 90px #5b1a2812,0 3px 10px #5b1a2808; }
.login-brand,.sidebar-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.login-brand { margin-bottom: 48px; }
.login-brand strong,.sidebar-brand strong { display: block; color: var(--berry-deep); font-family: Georgia,"Times New Roman",serif; font-size: 1.2rem; letter-spacing: -.025em; }
.login-brand small,.sidebar-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: .76rem; }
.login-card h1 { max-width: 330px; margin: 12px 0 10px; color: #3b262b; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3.4vw,2.65rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.login-copy { max-width: 350px; margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.65; }
.login-form { display: grid; margin-top: 30px; }
.login-form label { margin: 15px 0 7px; color: #56464a; font-size: .83rem; font-weight: 700; }
.login-form input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #e8dada; border-radius: 12px; outline: 0; background: #fff; color: var(--ink); transition: border-color .16s,box-shadow .16s; }
.login-form input:focus { border-color: #d74260; box-shadow: 0 0 0 4px #c8173d13; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-size: .84rem; font-weight: 750; transition: transform .15s,background .15s,border-color .15s,box-shadow .15s; }
.button:active { transform: translateY(1px); }
.button:focus-visible,.filter:focus-visible,.conversation-select:focus-visible,.play-button:focus-visible { outline: 3px solid #cf3151; outline-offset: 3px; }
.button-primary { color: #fff; background: linear-gradient(135deg,#d62349,#ae1237); box-shadow: 0 8px 18px #b4143630; }
.button-primary:hover { background: linear-gradient(135deg,#df3156,#9f0e32); box-shadow: 0 10px 22px #b4143640; }
.login-submit { min-height: 50px; justify-content: space-between; margin-top: 24px; padding: 0 18px; font-size: .93rem; }
.login-submit span { font-size: 1.2rem; }
.form-error { min-height: 1.1em; margin: 10px 0 0; color: var(--berry-deep); font-size: .82rem; }
.login-note { margin: 20px 0 0; color: #a09295; font-size: .75rem; text-align: center; }
.login-note span { margin-right: 4px; color: var(--gold); }
.login-art { position: relative; display: grid; min-height: min(72vh,680px); place-items: center; overflow: hidden; border: 1px solid #f2dedc; border-radius: 38px; background: radial-gradient(circle at 52% 45%,#fff 0,#fff9f6 36%,#fcece8 100%); box-shadow: inset 0 0 80px #fff9; }
.login-art::before,.login-art::after { position: absolute; width: 70%; height: 70%; border: 1px solid #c38d4835; border-radius: 50%; content: ""; }
.login-art::after { width: 82%; height: 82%; border-color: #d8526520; }
.art-berry { position: absolute; top: 32%; width: clamp(150px,19vw,240px); height: clamp(170px,21vw,260px); border: 3px solid #b70f36; border-radius: 48% 52% 50% 50% / 40% 40% 62% 62%; transform: rotate(1deg); background: radial-gradient(ellipse at 32% 24%,#ff8390 0 6%,transparent 28%),radial-gradient(ellipse at 38% 32%,#ed3355 0,#c9103b 72%); box-shadow: inset 12px 10px 22px #ffb2b76b,inset -14px -17px 27px #870c342b,0 22px 45px #a9283827; }
.art-berry::before { position: absolute; inset: 18% 15% 15%; border-radius: inherit; background-image: radial-gradient(ellipse at center,#ffe49e 0 2px,transparent 3px); background-size: 35px 35px; content: ""; opacity: .9; }
.art-leaf { position: absolute; z-index: 1; top: -19px; left: 33%; width: 53px; height: 43px; border-radius: 3px 90% 4px 90%; transform: rotate(-22deg); background: linear-gradient(145deg,#779256,#405e35); }
.art-leaf.second { left: 49%; transform: scaleX(-1) rotate(-22deg); }
.art-shine { position: absolute; top: 20%; left: 19%; width: 22px; height: 39px; border-radius: 50%; transform: rotate(25deg); background: #ffffff91; filter: blur(2px); }
.art-crown { position: absolute; z-index: 2; top: 19%; color: var(--gold); font-size: clamp(3.5rem,7vw,6rem); text-shadow: 0 4px 0 #fff,0 9px 16px #76501d30; }
.art-caption { position: absolute; right: 26px; bottom: 30px; left: 26px; display: grid; gap: 7px; color: #fff; text-align: center; text-shadow: 0 2px 12px #4f102a85; }
.art-caption span { color: #ffe6bc; font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.art-caption strong { font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.35rem,2.5vw,2rem); font-weight: 500; line-height: 1.13; }
.login-art .art-caption { z-index: 2; bottom: 8%; }
.art-sparkle { position: absolute; z-index: 2; color: #c69a4e; }
.sparkle-one { top: 24%; left: 19%; font-size: 2rem; }
.sparkle-two { top: 49%; right: 16%; font-size: 2.5rem; }
.art-orbit { position: absolute; z-index: 0; bottom: 6%; width: 90%; height: 17%; border: 2px solid #bd8c3833; border-radius: 50%; transform: rotate(-8deg); }
.orbit-two { bottom: 8%; transform: rotate(8deg); }

/* Panel e archivo */
.dashboard { min-height: 100vh; }
.sidebar { position: fixed; z-index: 3; inset: 0 auto 0 0; display: flex; width: 260px; flex-direction: column; padding: 27px 18px 20px; border-right: 1px solid #eee4e2; background: #fffdfc; }
.sidebar-brand { gap: 11px; padding: 0 8px 35px; }
.sidebar-brand .brand-emblem { width: 42px; height: 42px; border-radius: 15px; }
.sidebar-brand .brand-emblem svg { width: 34px; height: 34px; }
.sidebar-brand strong { font-size: 1.05rem; }
.sidebar-brand small { font-size: .68rem; }
.sidebar-section-label { margin: 8px 10px 12px; color: #a39596; font-size: .64rem; font-weight: 800; letter-spacing: .16em; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { display: flex; min-height: 46px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; color: #716366; font-size: .87rem; font-weight: 650; text-decoration: none; }
.nav-item.active { color: var(--berry-deep); background: var(--berry-soft); }
.nav-icon { display: grid; width: 25px; height: 25px; place-items: center; color: var(--berry); font-size: 1.15rem; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 11px; border: 1px solid #e7eee1; border-radius: 13px; background: #f8fbf5; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #70934d; box-shadow: 0 0 0 4px #71964b1a; }
.sidebar-footer strong,.sidebar-footer small { display: block; }
.sidebar-footer strong { color: #596c43; font-size: .77rem; }
.sidebar-footer small { margin-top: 3px; color: #829071; font-size: .68rem; }
.main-area { min-height: 100vh; margin-left: 260px; }
.topbar { position: sticky; z-index: 2; top: 0; display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(22px,4vw,54px); border-bottom: 1px solid #eee6e4; background: #fffdfceF; backdrop-filter: blur(14px); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #a09596; font-size: .79rem; }
.breadcrumbs strong { color: #534347; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.updated-label { margin-right: 4px; color: #95888a; font-size: .73rem; }
.button-light { border-color: #eadfdd; color: #5c4b4f; background: #fff; }
.button-light:hover { border-color: #dcbdc1; background: #fff8f8; }
.button-quiet { color: #887a7d; background: transparent; }
.button-quiet:hover { color: var(--berry-deep); background: #fff0f3; }
.workspace { width: min(100%,1540px); margin: 0 auto; padding: 36px clamp(22px,4vw,54px) 18px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-heading h1 { margin: 7px 0 5px; color: #39282d; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2rem,3vw,2.65rem); font-weight: 600; letter-spacing: -.05em; }
.page-heading p:last-child { margin: 0; color: var(--muted); font-size: .9rem; }
.heading-crown { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid #f0dfc7; border-radius: 18px; color: var(--gold); background: linear-gradient(145deg,#fff,#fff8ed); font-size: 2rem; box-shadow: 0 8px 18px #91621c12; }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { position: relative; display: grid; min-height: 148px; align-content: start; padding: 18px 19px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 7px 24px #5b1a2807; }
.stat-card::after { position: absolute; right: -27px; bottom: -52px; width: 100px; height: 100px; border: 1px solid #c8173d12; border-radius: 50%; content: ""; }
.stat-main { border-color: #f1d6db; background: linear-gradient(135deg,#fff 35%,#fff6f7); }
.stat-icon { position: absolute; top: 17px; right: 17px; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 11px; color: var(--berry); background: var(--berry-soft); font-size: 1.1rem; }
.stat-card:nth-child(2) .stat-icon { color: var(--leaf); background: var(--leaf-soft); }
.stat-card:nth-child(3) .stat-icon { color: #997231; background: #faf2e5; }
.stat-label { color: #77696c; font-size: .76rem; font-weight: 680; }
.stat-card strong { margin-top: 15px; color: #3e2d32; font-family: Georgia,"Times New Roman",serif; font-size: 2rem; font-weight: 600; letter-spacing: -.04em; }
.stat-card small { margin-top: 5px; color: #9b8d8f; font-size: .7rem; }
.history-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: 0 10px 34px #5b1a2808; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 17px; }
.history-toolbar h2 { margin: 0; color: #433136; font-family: Georgia,"Times New Roman",serif; font-size: 1.38rem; font-weight: 600; letter-spacing: -.025em; }
.history-toolbar p { margin: 6px 0 0; color: #94878a; font-size: .79rem; }
.search-box { display: flex; width: min(340px,40%); min-height: 43px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #ece1df; border-radius: 12px; background: #fff; }
.search-box:focus-within { border-color: #d74260; box-shadow: 0 0 0 3px #c8173d10; }
.search-icon { color: #a38b90; font-size: 1.5rem; line-height: 1; transform: rotate(-15deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .79rem; }
.search-box input::placeholder { color: #ac9fa1; }
.filter-row { display: flex; align-items: center; justify-content: space-between; padding: 0 24px 15px; }
.filters { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #f0e8e6; border-radius: 11px; background: #faf7f6; }
.filter { min-height: 31px; padding: 0 13px; border: 0; border-radius: 8px; color: #837578; background: transparent; cursor: pointer; font-size: .76rem; font-weight: 700; }
.filter.active { color: var(--berry-deep); background: white; box-shadow: 0 1px 5px #58323a12; }
.result-count { color: #a09496; font-size: .72rem; }
.content-grid { display: grid; min-height: 470px; grid-template-columns: minmax(280px,.78fr) minmax(360px,1.22fr); border-top: 1px solid #f1e9e7; }
.conversation-list { max-height: min(68vh,760px); overflow: auto; border-right: 1px solid #f0e8e6; scrollbar-color: #e2c8ca transparent; scrollbar-width: thin; }
.conversation-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; padding: 16px 17px; border-bottom: 1px solid #f3edeb; transition: background .15s; }
.conversation-item:hover { background: #fffafa; }
.conversation-item.selected { background: #fff3f5; box-shadow: inset 3px 0 var(--berry); }
.play-button { display: grid; width: 39px; height: 39px; align-self: start; place-items: center; border: 1px solid #efd8dc; border-radius: 13px; color: var(--berry); background: #fff; cursor: pointer; }
.play-button::before { width: 0; height: 0; margin-left: 3px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; content: ""; }
.play-button.is-playing { color: #fff; border-color: var(--berry); background: var(--berry); }
.play-button.is-playing::before { width: 9px; height: 11px; margin: 0; border: 0; background: linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%); }
.play-button:disabled { cursor: not-allowed; opacity: .35; }
.conversation-select { display: block; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.conversation-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.conversation-title { display: -webkit-box; overflow: hidden; color: #49393d; font-size: .83rem; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.badge { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: #6e8251; background: #edf3e8; font-size: .64rem; font-weight: 800; }
.badge.text { color: #94713d; background: #faf1df; }
.summary { display: -webkit-box; margin-top: 6px; overflow: hidden; color: #87797c; font-size: .73rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.meta { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 9px; color: #a19497; font-size: .65rem; }
.detail { position: relative; display: flex; min-width: 0; max-height: min(68vh,760px); flex-direction: column; overflow: hidden; }
.detail.empty { align-items: center; justify-content: center; padding: 38px; text-align: center; }
.detail-empty-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #f0dadd; border-radius: 20px; color: var(--berry); background: #fff4f5; font-size: 2rem; }
.detail.empty h3 { margin: 17px 0 7px; color: #5a494e; font-family: Georgia,"Times New Roman",serif; font-size: 1.15rem; font-weight: 600; }
.detail.empty p { max-width: 290px; margin: 0; color: #988b8e; font-size: .79rem; line-height: 1.6; }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 21px 15px; border-bottom: 1px solid #f1e9e7; }
.detail-head h2 { max-width: 100%; margin: 0; overflow: hidden; color: #49373c; font-family: Georgia,"Times New Roman",serif; font-size: 1.15rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.detail-head .meta { margin-top: 6px; }
.detail-actions { display: flex; align-items: center; gap: 9px; }
.detail-audio-note { color: #9a8c8f; font-size: .68rem; }
.detail-play { min-height: 36px; padding: 0 11px; border-radius: 10px; font-size: .72rem; }
.transcript { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 20px; overflow: auto; background: radial-gradient(ellipse at top center,#fffdfc 0,#fff 75%); scrollbar-color: #e2c8ca transparent; scrollbar-width: thin; }
.message { display: grid; width: fit-content; max-width: min(87%,520px); gap: 6px; }
.message.user { align-self: flex-end; }
.message.assistant { align-self: flex-start; }
.message-text { padding: 12px 14px; border: 1px solid #efe5e3; border-radius: 15px 15px 15px 4px; color: #514246; background: #fff; font-size: .82rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 3px 11px #56303a08; }
.message.user .message-text { border-color: #f2d8dc; border-radius: 15px 15px 4px 15px; color: #76273b; background: #fff1f3; }
.message-meta { display: flex; align-items: center; gap: 7px; padding: 0 3px; color: #aa9da0; font-size: .64rem; }
.message.user .message-meta { justify-content: flex-end; }
.speaker-dot { width: 6px; height: 6px; border-radius: 50%; background: #779250; }
.message.user .speaker-dot { background: #d06478; }
.transcript-empty { margin: auto; color: #988b8e; font-size: .82rem; }
.list-empty,.list-error { display: grid; min-height: 270px; place-items: center; padding: 25px; color: #988b8e; font-size: .82rem; text-align: center; }
.list-error { color: var(--berry-deep); }
.page-footer { padding: 20px 0 0; color: #a59a9b; font-size: .7rem; text-align: center; }
.page-footer span { color: var(--berry); }
.toast { position: fixed; z-index: 10; right: 22px; bottom: 22px; max-width: min(380px,calc(100vw - 30px)); padding: 12px 16px; border: 1px solid #efdcdf; border-radius: 13px; color: #fff; background: #5a343f; box-shadow: 0 12px 32px #35141c2b; font-size: .79rem; }

@media (max-width: 1100px) {
  .sidebar { width: 218px; }
  .main-area { margin-left: 218px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid { grid-template-columns: minmax(260px,.9fr) minmax(330px,1.1fr); }
  .top-actions { gap: 6px; }
  .updated-label { display: none; }
}
@media (max-width: 790px) {
  .login-screen { grid-template-columns: 1fr; padding: 18px; }
  .login-card { max-width: 500px; }
  .login-art { display: none; }
  .sidebar { position: static; width: auto; min-height: 0; flex-direction: row; align-items: center; padding: 12px 18px; border-right: 0; border-bottom: 1px solid #eee4e2; }
  .sidebar-brand { padding: 0; }
  .sidebar-section-label,.sidebar nav { display: none; }
  .sidebar-footer { margin: 0 0 0 auto; padding: 8px 10px; }
  .main-area { margin-left: 0; }
  .topbar { min-height: 60px; }
  .content-grid { grid-template-columns: 1fr; }
  .conversation-list { max-height: 370px; border-right: 0; border-bottom: 1px solid #f0e8e6; }
  .detail { max-height: 56vh; min-height: 400px; }
}
@media (max-width: 560px) {
  .login-screen { padding: 12px; }
  .login-card { padding: 25px 21px; border-radius: 22px; }
  .login-brand { margin-bottom: 38px; }
  .topbar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .top-actions .button { min-height: 37px; padding: 0 10px; font-size: .75rem; }
  .workspace { padding: 25px 13px 15px; }
  .page-heading { margin-bottom: 18px; }
  .heading-crown { width: 44px; height: 44px; border-radius: 14px; font-size: 1.6rem; }
  .page-heading p:last-child { max-width: 260px; font-size: .8rem; }
  .stats-grid { gap: 9px; }
  .stat-card { min-height: 130px; padding: 14px; border-radius: 14px; }
  .stat-card strong { margin-top: 13px; font-size: 1.7rem; }
  .stat-label { max-width: calc(100% - 35px); font-size: .7rem; }
  .stat-icon { top: 12px; right: 12px; width: 27px; height: 27px; }
  .history-toolbar { align-items: stretch; flex-direction: column; padding: 18px 15px 14px; }
  .search-box { width: 100%; }
  .filter-row { padding: 0 15px 13px; }
  .filters { gap: 1px; }
  .filter { min-height: 29px; padding: 0 10px; font-size: .7rem; }
  .content-grid { min-height: 0; }
  .conversation-list { max-height: 330px; }
  .conversation-item { padding: 14px 12px; }
  .detail { min-height: 370px; }
  .detail-head { align-items: flex-start; flex-direction: column; padding: 15px; }
  .detail-actions { width: 100%; justify-content: space-between; }
  .transcript { padding: 16px 12px; }
  .message { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}