/* Dee — TEMA. Colores y variables copiados de tresD DICOM (src/theme.css) para que Dee sea de la misma familia.
   El tema lo pone <html data-tema="claro|oscuro"> (js/tema.js: sigue al sistema salvo que el usuario elija).
   Paleta de marca (manual de marca v1.2): verde tresD #004A46 · verde bisel #10A23B · menta #89CBC4 · azul bisel #ADD9E9 ·
   fondo oscuro #0B0F1A; sobre oscuro #B6D8E7 / #97C9C3 / #399F48. Letra: Poppins. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  /* marca (igual en los dos temas) */
  --green: #004A46;      /* verde tresD */
  --green2: #10A23B;     /* verde bisel */
  --mint: #89CBC4;       /* menta bisel */
  --blue: #ADD9E9;       /* azul bisel */
  --green-dk: #399F48; --mint-dk: #97C9C3; --blue-dk: #B6D8E7;   /* variantes sobre oscuro */
  --grad-brand: linear-gradient(108deg, #004A46 0%, #10A23B 55%, #89CBC4 100%);
  --grad-brand-dark: linear-gradient(108deg, #B6D8E7 0%, #97C9C3 50%, #399F48 100%);
  --ok: #10A23B;
  --warn: #F59E0B;
  --bad: #E05252;
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 12px;
  --radius-s: 8px;
  --radius-l: 18px;
  --fs: 1;               /* factor de tamaño de letra (Ajustes) */
  --barra-h: 56px;
  --lateral-w: 272px;
  --panel-w: 460px;
  --t-rapida: .16s;
  --t-media: .28s;
  color-scheme: light;
}

/* TEMA CLARO (por defecto) */
:root, :root[data-tema="claro"] {
  --fondo-app: radial-gradient(90% 120% at 82% 50%, #89CBC429 0%, #89CBC400 60%), linear-gradient(240deg, #E8F3F2 0%, #FFFFFF 100%);
  --window-bg: #FFFFFF; --side-bg: #F2F6F5; --surface: #FFFFFF; --surface2: #EEF4F3; --surface3: #E2EEEC;
  --border: #D5E1DF; --border-suave: #E4ECEA; --text: #1B2A28; --text2: #373736; --hint: #5B6A68; --muted: #5F6E6C; /* DICOM: #7B8A88 (más oscuro para leerse bien en letra pequeña) */
  --accent: #004A46; --accent-hover: #10A23B; --accent-disabled: #B9CBC8; --accent-suave: #004A4614;
  --grad: linear-gradient(108deg, #004A46 0%, #0F8A3C 100%); --grad-h: linear-gradient(108deg, #063F3C 0%, #10A23B 100%); --grad-text: #FFFFFF;
  --grad-marca: var(--grad-brand);
  --seg-bg: #EEF4F3; --seg-hover: #E2EEEC; --seg-border: #C9DAD6; --seg-text: #004A46;
  --ghost-bg: #F2F6F5; --ghost-hover: #E2EEEC; --ghost-border: #D5E1DF; --ghost-text: #004A46;
  --ok-bg: #E8F7EE; --ok-fg: #0E7A30; --ok-bd: #8FD6A9;
  --warn-bg: #FEF5E6; --warn-fg: #8A5300; --warn-bd: #F6CF8B;
  --bad-bg: #FDEEEE; --bad-fg: #B53434; --bad-bd: #E2B4B4;
  --info-bg: #EAF5FA; --info-fg: #1F5F78; --info-bd: #B6D8E7;
  --menu-bg: #FFFFFF; --menu-text: #1B2A28; --menu-sel: #EEF4F3;
  --input-bg: #FFFFFF;
  --burbuja-yo: #EEF4F3;
  --sombra-1: 0 1px 2px #0F2A2614, 0 1px 3px #0F2A260F;
  --sombra-2: 0 6px 24px #0F2A261A, 0 2px 6px #0F2A260F;
  --sombra-3: 0 18px 60px #0F2A262E, 0 4px 14px #0F2A2614;
  --velo: #0B0F1A66;
  --scroll: #C9DAD6;
  /* colores del avatar de Dee (asistente_tresd.svg) */
  --dee-asta: #004A46; --dee-cara: #004A46; --dee-brillo: #FFFFFF;
}

/* TEMA OSCURO */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo-app: radial-gradient(90% 120% at 82% 50%, #89CBC41A 0%, #89CBC400 60%), linear-gradient(240deg, #141A28 0%, #0B0F1A 100%);
  --window-bg: #0B0F1A; --side-bg: #0F1523; --surface: #141A28; --surface2: #1C2333; --surface3: #232B3E;
  --border: #2A3350; --border-suave: #222A40; --text: #EEF2FF; --text2: #AEBABA; --hint: #AEBABA; --muted: #8E9A9A;
  --accent: #89CBC4; --accent-hover: #B6D8E7; --accent-disabled: #3A4A48; --accent-suave: #89CBC41A;
  --grad: linear-gradient(108deg, #B6D8E7 0%, #97C9C3 50%, #399F48 100%); --grad-h: linear-gradient(108deg, #C9E4EF 0%, #A9D5CF 50%, #4DB05C 100%); --grad-text: #0B0F1A;
  --grad-marca: var(--grad-brand-dark);
  --seg-bg: #14201F; --seg-hover: #1A2B29; --seg-border: #234A45; --seg-text: #97C9C3;
  --ghost-bg: #141A28; --ghost-hover: #1C2333; --ghost-border: #2A3350; --ghost-text: #97C9C3;
  --ok-bg: #123322; --ok-fg: #6FCF86; --ok-bd: #1F6D4A;
  --warn-bg: #2E2410; --warn-fg: #F5C46B; --warn-bd: #6B5220;
  --bad-bg: #241416; --bad-fg: #F87171; --bad-bd: #5A2A2A;
  --info-bg: #13222C; --info-fg: #B6D8E7; --info-bd: #2A4A5C;
  --menu-bg: #141A28; --menu-text: #EEF2FF; --menu-sel: #1C2333;
  --input-bg: #141A28;
  --burbuja-yo: #1C2333;
  --sombra-1: 0 1px 2px #00000040;
  --sombra-2: 0 8px 28px #00000059, 0 2px 6px #00000040;
  --sombra-3: 0 20px 70px #00000080, 0 4px 14px #00000059;
  --velo: #000000A6;
  --scroll: #2A3350;
  --dee-asta: #FFFFFF; --dee-cara: #F4F8FA; --dee-brillo: #0B0F1A;
}

/* AVATAR DE DEE: el de «burbuja (elegido)» (asistente_tresd.svg), mismas animaciones y estados que en tresD DICOM:
   quieto (parpadea), .pensando (mira de lado a lado y los puntos laten), .hablando (los puntos rebotan),
   y los gestos .contento (salta) y .duda (se inclina). */
.tda { --azul: #B6D8E7; --menta: #97C9C3; --verde: #399F48; --asta: var(--dee-asta); --cara: var(--dee-cara); --brillo: var(--dee-brillo); overflow: visible; }
.tda .ojo { transform-box: fill-box; transform-origin: center; animation: tda-parpadeo 4.6s ease-in-out infinite; }
.tda .ojo.b { animation-delay: .08s; }
.tda .mirada { transition: transform .4s ease; }
.tda.pensando .mirada { animation: tda-mirar 2.6s ease-in-out infinite; }
.tda.pensando .punto { animation: tda-latido 1.4s ease-in-out infinite; }
.tda.hablando .punto { animation: tda-rebote 1.05s ease-in-out infinite; }
.tda .punto.p2 { animation-delay: .17s; } .tda .punto.p3 { animation-delay: .34s; }
.tda.contento { animation: tda-salto .7s ease-out 1; }
.tda.duda { animation: tda-duda 1.4s ease-in-out 1; transform-origin: 50% 90%; }
@keyframes tda-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@keyframes tda-mirar { 0%, 100% { transform: translate(-22px, 0); } 50% { transform: translate(22px, 0); } }
@keyframes tda-rebote { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-26px); } }
@keyframes tda-latido { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes tda-salto { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-14%); } 60% { transform: translateY(0); } 78% { transform: translateY(-5%); } }
@keyframes tda-duda { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .tda * { animation: none !important; }
}
:root[data-movimiento="reducido"] *, :root[data-movimiento="reducido"] *::before, :root[data-movimiento="reducido"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}