/* Base de color y medida. Este archivo se carga al final: estos tokens ganan
   sobre las paletas antiguas de styles.css y workspaces.css.
   Para cambiar un color o el ancho de la hora, se cambia aquí. */
:root {
  --clinic-time-track: max-content;
  --primary: #087ea9;
  --primary-dark: #06698d;
  --navy: #0b2947;
  --teal: #147e78;
  --ink: #102e50;
  --muted: #4b6680;
  --brand-navy: #0b2947;
  --brand-navy-dark: #071e36;
  --brand-sky: #e6f4f9;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-soft: #f6fafc;
  --field: #fbfdfe;
  --white: #ffffff;
  --text-primary: #102e50;
  --text-secondary: #4b6680;
  --text-tertiary: #586d84;
  --line: #d5e3eb;
  --border-strong: #bed3df;
  --control-border: #6d8aa3;
  --brand-gradient: linear-gradient(125deg, #0b2947 0%, #0f5a7e 58%, #087ea9 100%);
  --radius-panel: 22px;
  --radius-modal: 24px;
  --shadow-card: 0 2px 6px rgba(16, 46, 80, .05), 0 12px 28px rgba(16, 46, 80, .075);
  --shadow-panel: 0 4px 10px rgba(16, 46, 80, .06), 0 20px 44px rgba(16, 46, 80, .10);
  --shadow-modal: 0 28px 80px rgba(8, 24, 42, .40);
  --brand-glow: 0 10px 26px rgba(8, 126, 169, .30);
  --focus-ring: #087ea9;
  --tooth-focus: #b45309;
  --link: #06698d;
  --danger: #b33f48;
  --warning: #9a641f;
  --success: #17755f;
  --bg: #eef5f8;
  color-scheme: light;
}

html[data-theme="dark"] {
  --primary: #63c9e8;
  --primary-dark: #8cdef2;
  --navy: #071726;
  --teal: #55d0bd;
  --ink: #edf6fd;
  --muted: #c1d0de;
  --brand-navy: #d5ecf8;
  --brand-navy-dark: #b7dfef;
  --brand-sky: #173b56;
  --surface: #10243a;
  --surface-strong: #142c45;
  --surface-soft: #142c45;
  --field: #0c1d31;
  --white: #10243a;
  --text-primary: #edf6fd;
  --text-secondary: #c1d0de;
  --text-tertiary: #a5b9cb;
  --line: #2d4862;
  --border-strong: #3c5a75;
  --control-border: #5c82a3;
  --brand-gradient: linear-gradient(125deg, #071726 0%, #0a3550 58%, #0b628a 100%);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 26px rgba(0, 0, 0, .40);
  --shadow-panel: 0 4px 10px rgba(0, 0, 0, .40), 0 20px 44px rgba(0, 0, 0, .45);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, .60);
  --brand-glow: 0 10px 26px rgba(3, 20, 34, .55);
  --focus-ring: #73d8ef;
  --link: #8cdef2;
  --danger: #ff9ca3;
  --warning: #f1c378;
  --success: #78e0be;
  --bg: #091725;
  color-scheme: dark;
}

/* Identificación de campos de formulario: borde de ≥3:1 contra su fondo (WCAG 1.4.11).
   No pisa los estados de foco, ni el borde de error (!important), ni controles de píldora. */
html body :is(#app-shell, #login-screen, dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(.appointment-status-select):not(:focus) {
  border-color: var(--control-border);
}

/* ── Evolución v2 — precisión clínica con carácter ─────────────────────────
   Un momento estrella por pantalla, elevación con tinte de marca y modales
   con entrada breve. Respeta prefers-reduced-motion y conserva los contrastes
   AA verificados. Documentado en design-system/clinica-dental-jh/MASTER.md. */

/* Hero del resumen: la banda de marca abre el día */
html body #app-shell .dashboard-overview {
  position: relative;
  overflow: hidden;
  align-items: flex-end;
  padding: 26px 28px;
  border: 0;
  border-radius: var(--radius-panel);
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: var(--shadow-panel);}
html body #app-shell .dashboard-overview::after {
  content: "";
  position: absolute;
  top: -96px;
  right: -72px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
  pointer-events: none;}
html body #app-shell .dashboard-overview .section-kicker { color: #a9dcf0 !important;}
html body #app-shell .dashboard-overview h2 { color: #fff !important; font-size: clamp(22px, 2.3vw, 28px); line-height: 1.08;}
html body #app-shell .dashboard-overview p { color: #d5e9f6 !important; max-width: 62ch;}
html body #app-shell .dashboard-overview-actions .primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #0b4d69 !important;
  box-shadow: 0 10px 24px rgba(3, 22, 38, .30) !important;}
html body #app-shell .dashboard-overview-actions .primary:not(:active):hover {
  background: #e8f5fc !important;
  border-color: #e8f5fc !important;}
html body #app-shell .dashboard-overview-actions .secondary {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  color: #fff !important;}
html body #app-shell .dashboard-overview-actions .secondary:hover {
  background: rgba(255, 255, 255, .20) !important;}
@media (max-width: 760px) {
  html body #app-shell .dashboard-overview { flex-direction: column; align-items: flex-start; padding: 22px 18px;}
  html body #app-shell .dashboard-overview-actions { width: 100%;}
  html body #app-shell .dashboard-overview-actions .primary,
  html body #app-shell .dashboard-overview-actions .secondary { flex: 1 1 0; justify-content: center;}}

/* Elevación con tinte: los paneles y las tarjetas dejan de ser planos */
html body #app-main .panel,
html body #app-main .search {
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);}
html body #app-shell .dashboard-metric {
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;}
html body #app-shell .dashboard-metric:hover,
html body #app-shell .dashboard-metric:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-panel);}

/* Diálogos con expresión: radio y sombra profundos, fondo con desenfoque,
   entrada breve que orienta sin distraer */
html body dialog { box-shadow: var(--shadow-modal);}
@media (min-width: 761px) {
  html body dialog { border-radius: var(--radius-modal);}}
html body dialog::backdrop {
  background: rgba(7, 19, 33, .52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);}
html[data-theme="dark"] dialog::backdrop {
  background: rgba(2, 8, 16, .66);}
html body dialog[open],
html body dialog[open]::backdrop {
  animation: clinic-dialog-in .2s ease-out both;}
html body dialog[open]::backdrop { animation-name: clinic-backdrop-in;}
@keyframes clinic-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.985);}
  to { opacity: 1; transform: none;}
}
@keyframes clinic-backdrop-in {
  from { opacity: 0;}
  to { opacity: 1;}
}
html body .modal-heading h2 { font-size: 22px; letter-spacing: -.015em;}

/* Los botones primarios ganan presencia al apuntarlos */
html :is(#app-shell, dialog) button.primary:not(:disabled):not(:active):hover {
  box-shadow: var(--brand-glow) !important;}

/* Estados vacíos ilustrados: una escena breve en vez de un icono suelto */
html body :is(#app-main, dialog) .empty {
  border: 0;
  border-radius: 18px;
  padding: 30px 20px 26px;
  color: var(--text-secondary) !important;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent) !important;}
html body :is(#app-main, dialog) .empty::before {
  content: "";
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  border-radius: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Ccircle cx='48' cy='50' r='42' fill='%23e6f4f9'/%3E%3Crect x='24' y='28' width='48' height='42' rx='9' fill='%23ffffff' stroke='%230b2947' stroke-width='2.5'/%3E%3Cpath d='M24 41h48' stroke='%230b2947' stroke-width='2.5'/%3E%3Cpath d='M35 22v10M61 22v10' stroke='%230b2947' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M48 47c-3.6-3.8-10.4-2.6-11 2.4-.4 3.4 2.3 5.4 2.9 9.4.4 2.9.6 5.2 2.4 5.2s1.6-3.2 3-3.2 1.3 3.2 3 3.2 2-2.3 2.4-5.2c.6-4 3.3-6 2.9-9.4-.6-5-7.4-6.2-11-2.4Z' fill='%23d9eef8' stroke='%230f5a7e' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M71 18l1.8 4.2L77 24l-4.2 1.8L71 30l-1.8-4.2L65 24l4.2-1.8z' fill='%23147e78'/%3E%3Ccircle cx='20' cy='66' r='2.6' fill='%23087ea9'/%3E%3Ccircle cx='78' cy='62' r='2' fill='%238dc9de'/%3E%3C/svg%3E") center / contain no-repeat !important;}
html[data-theme="dark"] body :is(#app-main, dialog) .empty::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none'%3E%3Ccircle cx='48' cy='50' r='42' fill='%23173b56'/%3E%3Crect x='24' y='28' width='48' height='42' rx='9' fill='%2310243a' stroke='%23cfe8f4' stroke-width='2.5'/%3E%3Cpath d='M24 41h48' stroke='%23cfe8f4' stroke-width='2.5'/%3E%3Cpath d='M35 22v10M61 22v10' stroke='%23cfe8f4' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M48 47c-3.6-3.8-10.4-2.6-11 2.4-.4 3.4 2.3 5.4 2.9 9.4.4 2.9.6 5.2 2.4 5.2s1.6-3.2 3-3.2 1.3 3.2 3 3.2 2-2.3 2.4-5.2c.6-4 3.3-6 2.9-9.4-.6-5-7.4-6.2-11-2.4Z' fill='%2312324b' stroke='%237fd4ea' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M71 18l1.8 4.2L77 24l-4.2 1.8L71 30l-1.8-4.2L65 24l4.2-1.8z' fill='%2355d0bd'/%3E%3Ccircle cx='20' cy='66' r='2.6' fill='%2363c9e8'/%3E%3Ccircle cx='78' cy='62' r='2' fill='%234c7f9a'/%3E%3C/svg%3E") !important;}

@media (prefers-reduced-motion: reduce) {
  html body dialog[open],
  html body dialog[open]::backdrop { animation: none;}
  html body #app-shell .dashboard-metric:hover,
  html body #app-shell .dashboard-metric:focus-visible { transform: none;}}