/* Quiosco ePaper — Design tokens
   Nota: pensado para ser sobrescrito fácilmente (temas por cliente/marca). */

:root {
  /* Paleta base (derivada del logo y referencia UI tipo "dashboard") */
  --qd-primary: #2aa7a6;       /* teal (UI principal) */
  --qd-primary-2: #3bb9b8;     /* teal claro */
  --qd-danger: #b61016;        /* rojo marca (acciones críticas) */
  --qd-success: #118a66;       /* verde UI */
  --qd-warn: #e86900;          /* naranja */
  --qd-ink: #24363a;           /* texto principal (gris azulado) */
  --qd-muted: #5a6670;         /* texto secundario */
  --qd-bg: #f6f7f9;            /* fondo app */
  --qd-surface: #ffffff;       /* tarjetas/superficie */
  --qd-border: rgba(0,0,0,.10);
  --qd-border-soft: rgba(0,0,0,.08);
  --qd-border-strong: rgba(0,0,0,.16);

  /* Derivados (estados): evita repetir color-mix en todo el CSS */
  --qd-primary-hover: color-mix(in srgb, var(--qd-primary) 86%, #000);
  --qd-primary-active: color-mix(in srgb, var(--qd-primary) 80%, #000);
  --qd-danger-hover: color-mix(in srgb, var(--qd-danger) 86%, #000);
  --qd-danger-active: color-mix(in srgb, var(--qd-danger) 80%, #000);
  --qd-secondary: #51606a;
  --qd-secondary-hover: color-mix(in srgb, var(--qd-secondary) 86%, #000);

  /* Tipografía */
  --qd-font-sans: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Radius / sombras */
  --qd-radius: 16px;
  --qd-radius-sm: 12px;
  --qd-shadow-1: 0 2px 10px rgba(0,0,0,.05);
  --qd-shadow-2: 0 10px 24px rgba(0,0,0,.08);

  /* Espaciado */
  --qd-gap: 12px;

  /* Anchos reutilizables */
  --qd-narrow-520: 520px;
  --qd-narrow-720: 720px;
  --qd-narrow-760: 760px;
  --qd-narrow-820: 820px;
  --qd-narrow-860: 860px;
  --qd-narrow-920: 920px;

  /* Componentes */
  --qd-sidebar-w: 260px;
}


/* Reset/estética base */
html, body { height: 100%; }
body.app {
  font-family: var(--qd-font-sans);
  color: var(--qd-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap helpers: mapea colores de marca sin reescribir Bootstrap completo */

/* PRIMARY (teal) */
.btn-primary {
  --bs-btn-bg: var(--qd-primary);
  --bs-btn-border-color: var(--qd-primary);
  --bs-btn-hover-bg: var(--qd-primary-hover);
  --bs-btn-hover-border-color: var(--qd-primary-hover);
  --bs-btn-active-bg: var(--qd-primary-active);
  --bs-btn-active-border-color: var(--qd-primary-active);
  --bs-btn-focus-shadow-rgb: 42, 167, 166;
}

.btn-outline-primary {
  --bs-btn-color: var(--qd-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--qd-primary) 70%, #000);
  --bs-btn-hover-bg: var(--qd-primary);
  --bs-btn-hover-border-color: var(--qd-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--qd-primary-active);
  --bs-btn-active-border-color: var(--qd-primary-active);
  --bs-btn-focus-shadow-rgb: 42, 167, 166;
}

/* DANGER (rojo marca) */
.btn-danger {
  --bs-btn-bg: var(--qd-danger);
  --bs-btn-border-color: var(--qd-danger);
  --bs-btn-hover-bg: var(--qd-danger-hover);
  --bs-btn-hover-border-color: var(--qd-danger-hover);
  --bs-btn-active-bg: var(--qd-danger-active);
  --bs-btn-active-border-color: var(--qd-danger-active);
  --bs-btn-focus-shadow-rgb: 182, 16, 22;
}

.btn-outline-danger {
  --bs-btn-color: var(--qd-danger);
  --bs-btn-border-color: color-mix(in srgb, var(--qd-danger) 70%, #000);
  --bs-btn-hover-bg: var(--qd-danger);
  --bs-btn-hover-border-color: var(--qd-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--qd-danger-active);
  --bs-btn-active-border-color: var(--qd-danger-active);
  --bs-btn-focus-shadow-rgb: 182, 16, 22;
}

/* SECONDARY (neutros) */
.btn-secondary {
  --bs-btn-bg: var(--qd-secondary);
  --bs-btn-border-color: var(--qd-secondary);
  --bs-btn-hover-bg: var(--qd-secondary-hover);
  --bs-btn-hover-border-color: var(--qd-secondary-hover);
  --bs-btn-focus-shadow-rgb: 81, 96, 106;
}

.btn-outline-secondary {
  --bs-btn-color: var(--qd-secondary);
  --bs-btn-border-color: rgba(0,0,0,.25);
  --bs-btn-hover-bg: var(--qd-secondary);
  --bs-btn-hover-border-color: var(--qd-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-focus-shadow-rgb: 81, 96, 106;
}

/* INFO: acción auxiliar (duplicar, suplantar, etc.) */
.btn-info {
  --bs-btn-bg: var(--qd-primary-2);
  --bs-btn-border-color: var(--qd-primary-2);
  --bs-btn-hover-bg: color-mix(in srgb, var(--qd-primary-2) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--qd-primary-2) 86%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--qd-primary-2) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--qd-primary-2) 80%, #000);
  --bs-btn-focus-shadow-rgb: 59, 185, 184;
}

.btn-outline-info {
  --bs-btn-color: var(--qd-primary);
  --bs-btn-border-color: color-mix(in srgb, var(--qd-primary-2) 60%, #000);
  --bs-btn-hover-bg: var(--qd-primary-2);
  --bs-btn-hover-border-color: var(--qd-primary-2);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--qd-primary-2) 80%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--qd-primary-2) 80%, #000);
  --bs-btn-focus-shadow-rgb: 59, 185, 184;
}

/* Links (evita azules discordantes si se usan como botón) */
a { color: var(--qd-primary); }
a:hover { color: color-mix(in srgb, var(--qd-primary) 80%, #000); }


.qd-icon--yes { color: var(--qd-success); }
.qd-icon--no  { color: var(--qd-danger); }

.badge.text-bg-success { background-color: #198754 !important; }

/* Utilidades propias */
.link-clean { text-decoration: none !important; }

.qd-icon-btn {
  text-decoration: none !important;
  line-height: 1;
}

.qd-icon-btn:hover {
  opacity: .85;
}

.container-narrow,
.card-narrow {
  margin-left: auto;
  margin-right: auto;
}
.container-narrow--520 { max-width: var(--qd-narrow-520); }
.container-narrow--760 { max-width: var(--qd-narrow-760); }

.card-narrow--720 { max-width: var(--qd-narrow-720); }
.card-narrow--820 { max-width: var(--qd-narrow-820); }
.card-narrow--860 { max-width: var(--qd-narrow-860); }
.card-narrow--920 { max-width: var(--qd-narrow-920); }

.col-actions--200 { width: 200px; }
.col-actions--240 { width: 240px; }


/* Themes (selector de estilo): aplicar data-theme en <html>.
   Ejemplo: <html lang="es" data-theme="ocean"> ... */

:root[data-theme="dana"] { /* default */ }

:root[data-theme="ocean"] {
  --qd-primary: #2aa7a6;
  --qd-primary-2: #3bb9b8;
  --qd-bg: #f4fbfb;
}

:root[data-theme="slate"] {
  --qd-primary: #2f6fed;
  --qd-primary-2: #5b8bff;
  --qd-bg: #f6f7f9;
  --qd-ink: #1f2a37;
}

:root[data-theme="berry"] {
  --qd-primary: #7c3aed;
  --qd-primary-2: #a78bfa;
  --qd-bg: #faf7ff;
  --qd-danger: #be123c;
}

:root[data-theme="sunset"] {
  --qd-primary: #f97316;
  --qd-primary-2: #fb923c;
  --qd-bg: #fff7ed;
  --qd-danger: #b91c1c;
}

:root[data-theme="forest"] {
  --qd-primary: #1f8a5b;
  --qd-primary-2: #34d399;
  --qd-bg: #f3fbf7;
  --qd-danger: #b42318;
}

:root[data-theme="midnight"] {
  --qd-primary: #38bdf8;
  --qd-primary-2: #7dd3fc;
  --qd-bg: #0b1220;
  --qd-surface: #0f172a;
  --qd-border: rgba(255,255,255,.12);
  --qd-ink: #e5e7eb;
  --qd-muted: #9ca3af;
  --qd-danger: #f87171;
  --qd-success: #34d399;
}

:root[data-theme="sand"] {
  --qd-primary: #8b5cf6;
  --qd-primary-2: #c4b5fd;
  --qd-bg: #faf8f1;
  --qd-border: rgba(0,0,0,.12);
  --qd-ink: #2a2a2a;
}

:root[data-theme="mono"] {
  --qd-primary: #111827;
  --qd-primary-2: #374151;
  --qd-bg: #f7f7f7;
  --qd-danger: #9b1c1c;
  --qd-success: #065f46;
}