/* NEWCLINICA: tokens de diseno compartidos por panel y reserva publica.
   El tema se define con data-theme en <html>. Catalogo de temas: core/ThemeCatalog.php.
   Cada tema es un bloque de variables; los componentes solo consumen variables, nunca colores fijos. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Tipografia */
  --nc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nc-fs-xs: .78rem;
  --nc-fs-sm: .875rem;
  --nc-fs-md: 1rem;
  --nc-fs-lg: 1.1875rem;
  --nc-fs-xl: 1.5rem;
  --nc-fs-2xl: 1.875rem;
  --nc-lh: 1.5;

  /* Espaciado */
  --nc-s1: .25rem;
  --nc-s2: .5rem;
  --nc-s3: .75rem;
  --nc-s4: 1rem;
  --nc-s5: 1.5rem;
  --nc-s6: 2rem;

  /* Radios */
  --nc-r-sm: 8px;
  --nc-r-md: 12px;
  --nc-r-lg: 18px;
  --nc-r-pill: 999px;
  --nc-r-btn: 999px;

  /* Movimiento y tactil */
  --nc-ease: cubic-bezier(.2, .7, .3, 1);
  --nc-t: 160ms;
  --nc-touch: 44px;

  /* Marcas: hoja, onda y loto. Cada tema elige la suya */
  --nc-mark-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 4C14 4 5 10 5 20c0 2.300.6 4.300 1.600 6C10 19 15 14.500 22 11.500 16.500 15.500 11.500 20.500 8.500 27.800c1.600.8 3.400 1.200 5.200 1.200C24 29 28 19 28 4z'/%3E%3C/svg%3E");
  --nc-mark-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 15c4.500-5.500 9-6 13.500-3.500S25 14 29 8.500c.5 5.500-2 11-7.500 11.500-4 .4-6.500-1.500-9.500-3s-6-1.500-9-2z'/%3E%3Cpath d='M4 23c3.500-2.800 6.500-3 9.500-1.800s6 2.800 10 1.500c-3 3.300-7 4-10.500 2.800S7 22.800 4 23z'/%3E%3C/svg%3E");
  --nc-mark-lotus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.500' stroke-linejoin='round'%3E%3Cpath d='M16 5c3.500 3.800 4.500 8.500 0 15.500C11.500 13.500 12.500 8.800 16 5z'/%3E%3Cpath d='M9 8.500c-.5 5 1.500 9.500 7 12-1-.8-2-3-3-5.500M23 8.500c.5 5-1.500 9.500-7 12 1-.8 2-3 3-5.500'/%3E%3Cpath d='M3.500 13c1 5 5 8.500 12.500 8.500S27.500 18 28.500 13c-2 .3-4 1-5.500 2.300M3.500 13c2 .3 4 1 5.500 2.300M7 24.500c5 1.800 13 1.800 18 0'/%3E%3C/svg%3E");

  /* Compatibilidad con variables historicas */
  --bg-main: var(--nc-bg);
  --bg-card: var(--nc-surface);
  --bg-card-soft: var(--nc-surface-2);
  --primary: var(--nc-primary);
  --primary-hover: var(--nc-grad-b);
  --secondary: var(--nc-muted);
  --accent: var(--nc-ink);
  --accent-soft: var(--nc-primary-soft);
  --text-main: var(--nc-text);
  --text-muted: var(--nc-muted);
  --text-light: var(--nc-muted);
  --border: var(--nc-border);
  --danger: var(--nc-err-fg);
  --radius-lg: var(--nc-r-lg);
  --radius-md: var(--nc-r-md);
  --shadow-soft: var(--nc-shadow-2);

  color-scheme: light;
}

/* Variables semanticas por superficie. Por defecto derivan de la paleta base del tema,
   de modo que un tema que no las redefine (Grafito Premium) conserva exactamente su aspecto.
   Se declaran tambien en [data-nc-preview] para que las vistas previas del selector resuelvan su propio tema. */
:root, [data-nc-preview] {
  /* Menu lateral, encabezado y navegacion inferior */
  --nc-sidebar-bg: var(--nc-chrome-bg);
  --nc-topbar-bg: var(--nc-chrome-bg);
  --nc-bottomnav-bg: var(--nc-chrome-bg);
  --nc-nav-fg: var(--nc-text);
  --nc-nav-icon: var(--nc-muted);
  --nc-nav-hover-bg: var(--nc-surface-2);
  --nc-nav-hover-fg: var(--nc-ink);
  --nc-nav-active-bg: var(--nc-btn-grad);
  --nc-nav-active-fg: var(--nc-on-primary);
  --nc-nav-active-edge: var(--nc-btn-edge);
  --nc-nav-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 8px rgba(0, 0, 0, .12);
  --nc-backdrop: rgba(15, 20, 18, .45);

  /* Paneles, tarjetas e indicadores */
  --nc-card-bg: var(--nc-surface);
  --nc-tile-bg: var(--nc-surface);
  --nc-modal-bg: var(--nc-surface);
  --nc-modal-foot-bg: var(--nc-surface-2);
  --nc-table-head-bg: var(--nc-surface-2);

  /* Controles */
  --nc-input-bg: var(--nc-surface);
  --nc-input-border: var(--nc-border-strong);
  --nc-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 0 var(--nc-btn-edge), 0 4px 12px rgba(0, 0, 0, .14);
  --nc-btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .32), 0 2px 0 var(--nc-btn-edge), 0 8px 18px rgba(0, 0, 0, .18);
  --nc-btn3d-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 0 var(--nc-btn-edge), 0 5px 14px rgba(0, 0, 0, .14);
  --nc-btn3d-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--nc-btn-edge), 0 9px 20px rgba(0, 0, 0, .18);
  --nc-btn-lift: -1px;
  --nc-chevron-filter: none;

  /* Agenda y cuadricula horaria */
  --nc-cal-bg: var(--nc-surface);
  --nc-cal-grid: var(--nc-border);
  --nc-cal-today: var(--nc-surface-2);
  --nc-cal-neutral: var(--nc-surface-2);
  --nc-cal-btn-bg: var(--nc-surface);
}

/* Temas corporativos: radios moderados y relieve contenido. Grafito conserva los suyos. */
:root[data-theme]:not([data-theme="grafito"]), :root:not([data-theme]), [data-nc-preview]:not([data-nc-preview="grafito"]) {
  --nc-r-sm: 7px;
  --nc-r-md: 10px;
  --nc-r-lg: 14px;
  --nc-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .12);
  --nc-btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .14);
  --nc-btn3d-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .12);
  --nc-btn3d-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .14);
  --nc-btn-lift: 0px;
  --nc-nav-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .10);
}

/* ===== Tema: Verde Salud. Verde grisaceo pastel, salvia y verde bosque ===== */
:root:not([data-theme]), :root[data-theme="verde"], [data-nc-preview="verde"] {
  --nc-bg: #dfe7e1;
  --nc-bg-glow: #d6e0d8;
  --nc-page-bg: linear-gradient(180deg, #e2e9e3 0, #dce4de 100%);
  --nc-chrome-bg: #e3eae4;
  --nc-hero-bg: linear-gradient(118deg, #ecf1ec 30%, #e6ece6);
  --nc-surface: #ecf1ed;
  --nc-surface-2: #e2e9e3;
  --nc-surface-3: #d3ddd5;
  --nc-text: #1c2a23;
  --nc-muted: #4c5c53;
  --nc-border: #ccd8cf;
  --nc-border-strong: #a3b5a8;
  --nc-ink: #2b6443;
  --nc-primary: #2f6846;
  --nc-grad-a: #4c8462;
  --nc-grad-b: #285c3d;
  --nc-btn-grad: linear-gradient(180deg, #3b7553 0, #2f6846 60%, #2a5f40 100%);
  --nc-on-primary: #ffffff;
  --nc-primary-soft: #d2e0d5;
  --nc-primary-line: #79a084;
  --nc-accent: #4a8160;
  --nc-focus: #2b6443;
  --nc-shadow-1: 0 1px 2px rgba(28, 52, 38, .06), 0 2px 8px rgba(28, 52, 38, .04);
  --nc-shadow-2: 0 2px 6px rgba(28, 52, 38, .08), 0 10px 24px rgba(28, 52, 38, .08);
  --nc-btn-edge: rgba(18, 56, 34, .45);
  --nc-sel-1: #e6eee8;
  --nc-sel-2: #d4e1d7;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='%23dfe7e0'/%3E%3Cpath d='M300 0c70 36 150 18 220 42s70 24 100 22V0z' fill='%23d5dfd7'/%3E%3C/svg%3E");

  --nc-sidebar-bg: #d6e1d8;
  --nc-topbar-bg: #e1e8e2;
  --nc-bottomnav-bg: #e1e8e2;
  --nc-nav-hover-bg: #cad7cd;
  --nc-nav-active-bg: linear-gradient(180deg, #527e5d 0, #46714f 100%);
  --nc-nav-active-fg: #ffffff;
  --nc-nav-active-edge: rgba(30, 70, 44, .35);
  --nc-card-bg: #ecf1ed;
  --nc-tile-bg: #f2f5f2;
  --nc-modal-bg: #eef3ef;
  --nc-modal-foot-bg: #e3eae4;
  --nc-table-head-bg: #e1e8e2;
  --nc-input-bg: #f4f7f4;
  --nc-input-border: #7f9285;
  --nc-cal-bg: #edf2ee;
  --nc-cal-grid: #d3ddd5;
  --nc-cal-today: #e2eae3;
  --nc-cal-neutral: #e3eae4;
  --nc-cal-btn-bg: #f2f5f2;
  --nc-backdrop: rgba(20, 36, 26, .40);

  --nc-ok-bg: #d5e5d9;
  --nc-ok-fg: #1f5636;
  --nc-warn-bg: #f1e7c8;
  --nc-warn-fg: #634507;
  --nc-err-bg: #f1dcd7;
  --nc-err-fg: #922c22;
  --nc-info-bg: #d9e4ea;
  --nc-info-fg: #24546f;

  --nc-st-confirmed: #2f6846;
  --nc-st-confirmed-fg: #ffffff;
  --nc-st-confirmed-line: #245536;
  --nc-st-pending: #f4e8c3;
  --nc-st-pending-fg: #563d05;
  --nc-st-pending-line: #b28a24;
  --nc-st-attended: #d3dfd6;
  --nc-st-attended-fg: #22342a;
  --nc-st-attended-line: #66836f;
  --nc-st-cancelled: #f1d7d1;
  --nc-st-cancelled-fg: #6f2318;
  --nc-st-cancelled-line: #c47c6c;
  --nc-st-expired: #e3e8e4;
  --nc-st-expired-fg: #434d47;
  --nc-st-expired-line: #96a29a;
  --nc-st-blocked: #4a534e;
  --nc-st-blocked-stripe: #404844;
  --nc-st-blocked-fg: #ffffff;
  --nc-st-blocked-line: #3a423e;

  --nc-mark: var(--nc-mark-leaf);
  --nc-mark-a: #7aa585;
  --nc-mark-b: #2b6443;
  color-scheme: light;
}

/* ===== Tema: Arena Natural. Beige calido, crema, tierra y oliva oscuro ===== */
:root[data-theme="arena"], [data-nc-preview="arena"] {
  --nc-bg: #e8e2d7;
  --nc-bg-glow: #e0d8ca;
  --nc-page-bg: linear-gradient(180deg, #ebe5db 0, #e5ded2 100%);
  --nc-chrome-bg: #ebe5db;
  --nc-hero-bg: linear-gradient(118deg, #f2eee6 30%, #ece6db);
  --nc-surface: #f1ece3;
  --nc-surface-2: #e8e1d5;
  --nc-surface-3: #dcd3c3;
  --nc-text: #2a261f;
  --nc-muted: #5c5547;
  --nc-border: #d9d0c0;
  --nc-border-strong: #b3a891;
  --nc-ink: #5a5530;
  --nc-primary: #5c5833;
  --nc-grad-a: #8a8457;
  --nc-grad-b: #4f4c2b;
  --nc-btn-grad: linear-gradient(180deg, #69653d 0, #5c5833 60%, #535030 100%);
  --nc-on-primary: #ffffff;
  --nc-primary-soft: #e6dcc4;
  --nc-primary-line: #ae9f72;
  --nc-accent: #9c7d4c;
  --nc-focus: #5a5530;
  --nc-shadow-1: 0 1px 2px rgba(60, 48, 28, .06), 0 2px 8px rgba(60, 48, 28, .04);
  --nc-shadow-2: 0 2px 6px rgba(60, 48, 28, .08), 0 10px 24px rgba(60, 48, 28, .08);
  --nc-btn-edge: rgba(52, 48, 22, .45);
  --nc-sel-1: #efe8da;
  --nc-sel-2: #e4d9c3;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='%23ebe4d7'/%3E%3Cpath d='M300 0c70 36 150 18 220 42s70 24 100 22V0z' fill='%23e3d9c6'/%3E%3C/svg%3E");

  --nc-sidebar-bg: #e1d9cb;
  --nc-topbar-bg: #e9e3d8;
  --nc-bottomnav-bg: #e9e3d8;
  --nc-nav-hover-bg: #d7cdbb;
  --nc-nav-active-bg: linear-gradient(180deg, #7c7449 0, #6c653e 100%);
  --nc-nav-active-fg: #ffffff;
  --nc-nav-active-edge: rgba(70, 62, 30, .35);
  --nc-card-bg: #f1ece3;
  --nc-tile-bg: #f6f2eb;
  --nc-modal-bg: #f3eee6;
  --nc-modal-foot-bg: #e9e2d6;
  --nc-table-head-bg: #e8e1d5;
  --nc-input-bg: #f7f4ee;
  --nc-input-border: #91856c;
  --nc-cal-bg: #f2ede5;
  --nc-cal-grid: #ddd4c5;
  --nc-cal-today: #ebe3d4;
  --nc-cal-neutral: #e9e2d6;
  --nc-cal-btn-bg: #f6f2eb;
  --nc-backdrop: rgba(40, 34, 22, .40);

  --nc-ok-bg: #dfe3cc;
  --nc-ok-fg: #44491d;
  --nc-warn-bg: #f2e5c4;
  --nc-warn-fg: #634507;
  --nc-err-bg: #f1dcd5;
  --nc-err-fg: #8f2d21;
  --nc-info-bg: #dde3e6;
  --nc-info-fg: #2f5161;

  --nc-st-confirmed: #5c5833;
  --nc-st-confirmed-fg: #ffffff;
  --nc-st-confirmed-line: #4a4727;
  --nc-st-pending: #f5e6be;
  --nc-st-pending-fg: #563d05;
  --nc-st-pending-line: #b28a24;
  --nc-st-attended: #e0dccd;
  --nc-st-attended-fg: #302c22;
  --nc-st-attended-line: #857c66;
  --nc-st-cancelled: #f1d6cf;
  --nc-st-cancelled-fg: #6f2318;
  --nc-st-cancelled-line: #c47c6c;
  --nc-st-expired: #e8e4dc;
  --nc-st-expired-fg: #4a463e;
  --nc-st-expired-line: #a19a8c;
  --nc-st-blocked: #575b60;
  --nc-st-blocked-stripe: #4b4f54;
  --nc-st-blocked-fg: #ffffff;
  --nc-st-blocked-line: #43474c;

  --nc-mark: var(--nc-mark-leaf);
  --nc-mark-a: #b3a679;
  --nc-mark-b: #5a5530;
  color-scheme: light;
}

/* ===== Tema: Gris Salmon. Gris calido y perla, salmon suave y terracota claro ===== */
:root[data-theme="salmon"], [data-nc-preview="salmon"] {
  --nc-bg: #e6e3df;
  --nc-bg-glow: #ddd8d3;
  --nc-page-bg: linear-gradient(180deg, #e8e5e1 0, #e2dfda 100%);
  --nc-chrome-bg: #e9e6e2;
  --nc-hero-bg: linear-gradient(118deg, #f0eeeb 30%, #ebe7e3);
  --nc-surface: #efedea;
  --nc-surface-2: #e5e2de;
  --nc-surface-3: #d8d3ce;
  --nc-text: #2a2625;
  --nc-muted: #5b5552;
  --nc-border: #d6d1cc;
  --nc-border-strong: #aea6a0;
  --nc-ink: #8f4a3a;
  --nc-primary: #a95a47;
  --nc-grad-a: #e6b19f;
  --nc-grad-b: #d08d78;
  --nc-btn-grad: linear-gradient(180deg, #e4ab98 0, #dc9e89 60%, #d4937e 100%);
  --nc-on-primary: #3a1c14;
  --nc-primary-soft: #efdcd5;
  --nc-primary-line: #cf947f;
  --nc-accent: #b26a55;
  --nc-focus: #8f4a3a;
  --nc-shadow-1: 0 1px 2px rgba(50, 40, 36, .06), 0 2px 8px rgba(50, 40, 36, .04);
  --nc-shadow-2: 0 2px 6px rgba(50, 40, 36, .08), 0 10px 24px rgba(50, 40, 36, .08);
  --nc-btn-edge: rgba(130, 64, 46, .38);
  --nc-sel-1: #f2e6e1;
  --nc-sel-2: #ead6ce;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='%23e9e3df'/%3E%3Cpath d='M300 0c70 36 150 18 220 42s70 24 100 22V0z' fill='%23ead9d1'/%3E%3C/svg%3E");

  --nc-sidebar-bg: #dedad6;
  --nc-topbar-bg: #e7e4e0;
  --nc-bottomnav-bg: #e7e4e0;
  --nc-nav-hover-bg: #d3cec9;
  --nc-nav-active-bg: linear-gradient(180deg, #dda08b 0, #d3917b 100%);
  --nc-nav-active-fg: #351a12;
  --nc-nav-active-edge: rgba(130, 64, 46, .30);
  --nc-card-bg: #efedea;
  --nc-tile-bg: #f4f2f0;
  --nc-modal-bg: #f1efec;
  --nc-modal-foot-bg: #e6e3df;
  --nc-table-head-bg: #e5e2de;
  --nc-input-bg: #f6f4f2;
  --nc-input-border: #91877f;
  --nc-cal-bg: #f0eeeb;
  --nc-cal-grid: #dbd6d1;
  --nc-cal-today: #e8e4e0;
  --nc-cal-neutral: #e6e3df;
  --nc-cal-btn-bg: #f4f2f0;
  --nc-backdrop: rgba(36, 30, 28, .40);

  --nc-ok-bg: #d9e4df;
  --nc-ok-fg: #24533f;
  --nc-warn-bg: #f2e6c8;
  --nc-warn-fg: #634507;
  --nc-err-bg: #f0dad6;
  --nc-err-fg: #8f2a22;
  --nc-info-bg: #dde3e8;
  --nc-info-fg: #2d5068;

  /* Confirmada en pizarra verdoso: no se confunde con el salmon de la marca ni con Cancelada */
  --nc-st-confirmed: #3f6660;
  --nc-st-confirmed-fg: #ffffff;
  --nc-st-confirmed-line: #2f514c;
  --nc-st-pending: #f4e7c2;
  --nc-st-pending-fg: #563d05;
  --nc-st-pending-line: #b28a24;
  --nc-st-attended: #dcdad7;
  --nc-st-attended-fg: #2c2a28;
  --nc-st-attended-line: #7d7773;
  --nc-st-cancelled: #f2d3cb;
  --nc-st-cancelled-fg: #72241a;
  --nc-st-cancelled-line: #c47a69;
  --nc-st-expired: #e7e5e2;
  --nc-st-expired-fg: #4a4644;
  --nc-st-expired-line: #9f9893;
  --nc-st-blocked: #4c4847;
  --nc-st-blocked-stripe: #423f3e;
  --nc-st-blocked-fg: #ffffff;
  --nc-st-blocked-line: #3b3837;

  --nc-mark: var(--nc-mark-leaf);
  --nc-mark-a: #e2a995;
  --nc-mark-b: #8f4a3a;
  color-scheme: light;
}

/* ===== Tema: Azul Profesional. Azul grisaceo claro, azul corporativo y acero ===== */
:root[data-theme="azul"], [data-nc-preview="azul"] {
  --nc-bg: #dbe3ec;
  --nc-bg-glow: #d2dce7;
  --nc-page-bg: linear-gradient(180deg, #dee6ee 0, #d7e0ea 100%);
  --nc-chrome-bg: #e3e9f0;
  --nc-hero-bg: linear-gradient(118deg, #e9eef4 30%, #e3e9f0);
  --nc-surface: #e8edf3;
  --nc-surface-2: #dee5ed;
  --nc-surface-3: #cfd9e4;
  --nc-text: #1b2633;
  --nc-muted: #4b5a6b;
  --nc-border: #c9d3de;
  --nc-border-strong: #9eafc1;
  --nc-ink: #2c5782;
  --nc-primary: #2f5884;
  --nc-grad-a: #5c7fa6;
  --nc-grad-b: #284d75;
  --nc-btn-grad: linear-gradient(180deg, #3b6591 0, #2f5884 60%, #2a5079 100%);
  --nc-on-primary: #ffffff;
  --nc-primary-soft: #d1dceb;
  --nc-primary-line: #7593b6;
  --nc-accent: #557391;
  --nc-focus: #2c5782;
  --nc-shadow-1: 0 1px 2px rgba(24, 40, 60, .06), 0 2px 8px rgba(24, 40, 60, .04);
  --nc-shadow-2: 0 2px 6px rgba(24, 40, 60, .08), 0 10px 24px rgba(24, 40, 60, .08);
  --nc-btn-edge: rgba(18, 40, 70, .45);
  --nc-sel-1: #e4ebf3;
  --nc-sel-2: #d3deeb;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='%23dfe6ee'/%3E%3Cpath d='M300 0c70 36 150 18 220 42s70 24 100 22V0z' fill='%23d4deea'/%3E%3C/svg%3E");

  --nc-sidebar-bg: #e2e8ef;
  --nc-topbar-bg: #e0e7ee;
  --nc-bottomnav-bg: #e0e7ee;
  --nc-nav-hover-bg: #d2dce7;
  --nc-nav-active-bg: linear-gradient(180deg, #4f6f94 0, #43628a 100%);
  --nc-nav-active-fg: #ffffff;
  --nc-nav-active-edge: rgba(24, 48, 80, .35);
  --nc-card-bg: #e8edf3;
  --nc-tile-bg: #eef2f6;
  --nc-modal-bg: #ebeff5;
  --nc-modal-foot-bg: #dfe6ee;
  --nc-table-head-bg: #dde4ec;
  --nc-input-bg: #f1f4f8;
  --nc-input-border: #7d8ea2;
  --nc-cal-bg: #e9eef4;
  --nc-cal-grid: #cfd8e2;
  --nc-cal-today: #dde6f0;
  --nc-cal-neutral: #dfe6ee;
  --nc-cal-btn-bg: #eef2f6;
  --nc-backdrop: rgba(18, 28, 42, .40);

  --nc-ok-bg: #d6e6de;
  --nc-ok-fg: #1d5440;
  --nc-warn-bg: #f2e6c6;
  --nc-warn-fg: #634507;
  --nc-err-bg: #f0dbd8;
  --nc-err-fg: #8f2a22;
  --nc-info-bg: #d3dfec;
  --nc-info-fg: #2a5480;

  --nc-st-confirmed: #2f5884;
  --nc-st-confirmed-fg: #ffffff;
  --nc-st-confirmed-line: #244569;
  --nc-st-pending: #f4e7c3;
  --nc-st-pending-fg: #563d05;
  --nc-st-pending-line: #b28a24;
  --nc-st-attended: #d6dee7;
  --nc-st-attended-fg: #212f3e;
  --nc-st-attended-line: #607790;
  --nc-st-cancelled: #f1d6d0;
  --nc-st-cancelled-fg: #6f2318;
  --nc-st-cancelled-line: #c47c6c;
  --nc-st-expired: #e3e8ee;
  --nc-st-expired-fg: #434d58;
  --nc-st-expired-line: #96a3b1;
  --nc-st-blocked: #49525d;
  --nc-st-blocked-stripe: #3f4751;
  --nc-st-blocked-fg: #ffffff;
  --nc-st-blocked-line: #38404a;

  --nc-mark: var(--nc-mark-wave);
  --nc-mark-a: #7b9cc0;
  --nc-mark-b: #2c5782;
  color-scheme: light;
}

/* Tema C: Grafito Premium. Dorado champan principal, salmon pastel y amarillo calido secundarios */
:root[data-theme="grafito"], [data-nc-preview="grafito"] {
  --nc-bg: #24252a;
  --nc-bg-glow: #3a352c;
  --nc-page-bg:
    radial-gradient(1100px 520px at 88% -8%, #3b362d 0, transparent 66%),
    radial-gradient(900px 560px at -6% 104%, #33302f 0, transparent 60%),
    #24252a;
  --nc-chrome-bg: #2b2c31;
  --nc-hero-bg: linear-gradient(118deg, #2e2f35 30%, #35342f 68%, #40392c);
  --nc-surface: #2e2f35;
  --nc-surface-2: #37383e;
  --nc-surface-3: #42434a;
  --nc-text: #f4f1eb;
  --nc-muted: #c6c2b9;
  --nc-border: #4a4b52;
  --nc-border-strong: #6c6c73;
  --nc-ink: #f0d6a2;
  --nc-primary: #e3c184;
  --nc-grad-a: #f6e2b9;
  --nc-grad-b: #cda161;
  --nc-btn-grad: linear-gradient(180deg, #f8e7c4 0, #ebcf9a 34%, #e0bd81 70%, #cda161 100%);
  --nc-on-primary: #2a2116;
  --nc-primary-soft: #4a4030;
  --nc-primary-line: #c9a569;
  --nc-accent: #f0b09b;
  --nc-warm: #f2d682;
  --nc-focus: #f2d682;
  --nc-shadow-1: 0 1px 2px rgba(0, 0, 0, .22), 0 6px 18px rgba(0, 0, 0, .20);
  --nc-shadow-2: 0 2px 4px rgba(0, 0, 0, .26), 0 14px 34px rgba(0, 0, 0, .28);
  --nc-btn-edge: rgba(90, 62, 22, .7);
  --nc-sel-1: #4e4535;
  --nc-sel-2: #40392e;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23c9a569' stop-opacity='.05'/%3E%3Cstop offset='.55' stop-color='%23e8c98f' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%23f6e2b9' stop-opacity='.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='url(%23g)'/%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52' fill='none' stroke='%23f0d6a2' stroke-opacity='.55' stroke-width='1.4'/%3E%3Cpath d='M300 0c70 36 150 18 220 42s70 24 100 22V0z' fill='%23eda993' fill-opacity='.14'/%3E%3C/svg%3E");

  --nc-ok-bg: #413f2c;
  --nc-ok-fg: #f2d682;
  --nc-warn-bg: #4b412a;
  --nc-warn-fg: #f2d682;
  --nc-err-bg: #4d3530;
  --nc-err-fg: #f7bcaa;
  --nc-info-bg: #3d3d44;
  --nc-info-fg: #e8e3d9;

  --nc-st-confirmed: #e3c184;
  --nc-st-confirmed-fg: #2a2116;
  --nc-st-confirmed-line: #f0d6a2;
  --nc-st-pending: #40392a;
  --nc-st-pending-fg: #f7dd8e;
  --nc-st-pending-line: #f2d682;
  --nc-st-attended: #b3afa6;
  --nc-st-attended-fg: #1c1c1f;
  --nc-st-attended-line: #d3cfc6;
  --nc-st-cancelled: #f0b09b;
  --nc-st-cancelled-fg: #3a1c13;
  --nc-st-cancelled-line: #f7c9ba;
  --nc-st-expired: #3a3b41;
  --nc-st-expired-fg: #d6d2c9;
  --nc-st-expired-line: #85858c;
  --nc-st-blocked: #5d5e65;
  --nc-st-blocked-stripe: #52535a;
  --nc-st-blocked-fg: #f7f4ee;
  --nc-st-blocked-line: #7b7c83;

  --nc-mark: var(--nc-mark-lotus);
  --nc-mark-a: #f6e2b9;
  --nc-mark-b: #d3a96a;

  color-scheme: dark;
}

/* ===== Tema: Pizarra Azul. Oscuro carbon azulado, pizarra y azul acero (independiente de Grafito) ===== */
:root[data-theme="pizarra"], [data-nc-preview="pizarra"] {
  --nc-bg: #1b2027;
  --nc-bg-glow: #222a34;
  --nc-page-bg: linear-gradient(180deg, #1d222a 0, #191d24 100%);
  --nc-chrome-bg: #20262f;
  --nc-hero-bg: linear-gradient(118deg, #262d37 30%, #29313c);
  --nc-surface: #262d37;
  --nc-surface-2: #2d3540;
  --nc-surface-3: #38414d;
  --nc-text: #e4e8ee;
  --nc-muted: #a7b1bd;
  --nc-border: #363f4a;
  --nc-border-strong: #56616e;
  --nc-ink: #9fbcdc;
  --nc-primary: #4c7099;
  --nc-grad-a: #6d90b7;
  --nc-grad-b: #42658c;
  --nc-btn-grad: linear-gradient(180deg, #4f739c 0, #4a6d95 60%, #44678e 100%);
  --nc-on-primary: #ffffff;
  --nc-primary-soft: #2e3d50;
  --nc-primary-line: #6f92b9;
  --nc-accent: #8aa6c4;
  --nc-focus: #9fbcdc;
  --nc-shadow-1: 0 1px 2px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .14);
  --nc-shadow-2: 0 2px 6px rgba(0, 0, 0, .26), 0 10px 24px rgba(0, 0, 0, .22);
  --nc-btn-edge: rgba(10, 24, 44, .65);
  --nc-sel-1: #2f3d4f;
  --nc-sel-2: #2a3646;
  --nc-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 170' preserveAspectRatio='none'%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52V0z' fill='%235a7ea6' fill-opacity='.10'/%3E%3Cpath d='M90 0c90 62 210 34 320 72s150 62 210 52' fill='none' stroke='%239db8d6' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E");

  --nc-sidebar-bg: #1f2834;
  --nc-topbar-bg: #20262f;
  --nc-bottomnav-bg: #1f2834;
  --nc-nav-hover-bg: #2a3442;
  --nc-nav-hover-fg: #c9d9ec;
  --nc-nav-active-bg: linear-gradient(180deg, #3f5a7a 0, #37506e 100%);
  --nc-nav-active-fg: #ffffff;
  --nc-nav-active-edge: rgba(110, 146, 185, .35);
  --nc-card-bg: #262d37;
  --nc-tile-bg: #2b333e;
  --nc-modal-bg: #272e38;
  --nc-modal-foot-bg: #222932;
  --nc-table-head-bg: #2b333e;
  --nc-input-bg: #212831;
  --nc-input-border: #6c7888;
  --nc-cal-bg: #232a33;
  --nc-cal-grid: #323b46;
  --nc-cal-today: #29323e;
  --nc-cal-neutral: #282f39;
  --nc-cal-btn-bg: #2b333e;
  --nc-backdrop: rgba(5, 8, 12, .60);
  --nc-chevron-filter: invert(1) brightness(1.5);

  --nc-ok-bg: #263a31;
  --nc-ok-fg: #a7d7bb;
  --nc-warn-bg: #3c3626;
  --nc-warn-fg: #ecd38c;
  --nc-err-bg: #42302e;
  --nc-err-fg: #f1b3a5;
  --nc-info-bg: #2a3849;
  --nc-info-fg: #b9cfe7;

  --nc-st-confirmed: #4c7099;
  --nc-st-confirmed-fg: #ffffff;
  --nc-st-confirmed-line: #86a8cf;
  --nc-st-pending: #3c3626;
  --nc-st-pending-fg: #f0d68a;
  --nc-st-pending-line: #c9a74a;
  --nc-st-attended: #aab4c0;
  --nc-st-attended-fg: #1a1f26;
  --nc-st-attended-line: #c9d1da;
  --nc-st-cancelled: #e2a291;
  --nc-st-cancelled-fg: #3a1a12;
  --nc-st-cancelled-line: #f0c0b3;
  --nc-st-expired: #2c333d;
  --nc-st-expired-fg: #c3cad3;
  --nc-st-expired-line: #707b88;
  --nc-st-blocked: #505257;
  --nc-st-blocked-stripe: #45474c;
  --nc-st-blocked-fg: #f3f4f6;
  --nc-st-blocked-line: #6c6f75;

  --nc-mark: var(--nc-mark-wave);
  --nc-mark-a: #a9c2dd;
  --nc-mark-b: #5a7ea6;
  color-scheme: dark;
}

/* Marca: el tono viene del fondo, la forma de la mascara */
.nc-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: none;
  background: linear-gradient(145deg, var(--nc-mark-a), var(--nc-mark-b));
  -webkit-mask: var(--nc-mark) center/contain no-repeat;
  mask: var(--nc-mark) center/contain no-repeat;
}

/* Boton principal: capsula con degradado delicado y relieve discreto */
.nc-btn-3d {
  background: var(--nc-btn-grad);
  color: var(--nc-on-primary);
  border: 1px solid var(--nc-btn-edge);
  border-radius: var(--nc-r-btn);
  box-shadow: var(--nc-btn3d-shadow);
  transition: transform var(--nc-t) var(--nc-ease), box-shadow var(--nc-t) var(--nc-ease), filter var(--nc-t) var(--nc-ease);
}
.nc-btn-3d:hover:not(:disabled) {
  transform: translateY(var(--nc-btn-lift));
  filter: brightness(1.04);
  box-shadow: var(--nc-btn3d-shadow-hover);
}
.nc-btn-3d:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22);
}

html { background-color: var(--nc-bg); }

/* Fondo de pagina: capa fija, funciona tambien en navegadores moviles */
.nc-page-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--nc-page-bg);
}

/* Estados de cita: asignacion unica para panel, leyenda y modales */
.nc-st-confirmed { --st: var(--nc-st-confirmed); --st-fg: var(--nc-st-confirmed-fg); --st-line: var(--nc-st-confirmed-line); --st-style: solid; }
.nc-st-pending_payment { --st: var(--nc-st-pending); --st-fg: var(--nc-st-pending-fg); --st-line: var(--nc-st-pending-line); --st-style: dashed; }
.nc-st-attended { --st: var(--nc-st-attended); --st-fg: var(--nc-st-attended-fg); --st-line: var(--nc-st-attended-line); --st-style: solid; }
.nc-st-cancelled { --st: var(--nc-st-cancelled); --st-fg: var(--nc-st-cancelled-fg); --st-line: var(--nc-st-cancelled-line); --st-style: solid; }
.nc-st-expired { --st: var(--nc-st-expired); --st-fg: var(--nc-st-expired-fg); --st-line: var(--nc-st-expired-line); --st-style: dotted; }
.nc-st-blocked { --st: var(--nc-st-blocked); --st-fg: var(--nc-st-blocked-fg); --st-line: var(--nc-st-blocked-line); --st-style: solid; }

:focus-visible {
  outline: 2px solid var(--nc-focus);
  outline-offset: 2px;
}

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