/* ==========================================================================
   KAIONA THEME — capa de tema de KaionaDoc (front nuevo, Angular/PrimeNG)
   --------------------------------------------------------------------------
   - Solo CSS: no modifica lógica, rutas ni llamadas al API.
   - Se carga después de styles-*.css (ver <link> en index.html).
   - Las reglas sin @layer ganan a PrimeNG (@layer primeng) y Tailwind
     (@layer utilities); ":root:root" gana a las variables runtime de PrimeNG.
   - Para desactivarlo basta con quitar el <link> de index.html.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/InterVariable-ext.woff2") format("woff2-variations"),
       url("fonts/InterVariable-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens de marca Kaiona
   -------------------------------------------------------------------------- */
:root:root {
  /* Azul marino (marca) */
  --k-navy-50: #eef2f8;
  --k-navy-100: #d8e1ef;
  --k-navy-200: #b3c4de;
  --k-navy-300: #8299c2;
  --k-navy-400: #4f6c9e;
  --k-navy-500: #24477a;
  --k-navy-600: #0b2447;
  --k-navy-700: #091d3a;
  --k-navy-800: #07172e;
  --k-navy-900: #051022;
  --k-navy-950: #030a16;

  /* Naranja (acento) */
  --k-orange-50: #fff6e8;
  --k-orange-100: #ffe8c2;
  --k-orange-200: #ffd089;
  --k-orange-300: #fcb44a;
  --k-orange-400: #fa8927;
  --k-orange-500: #f39200;
  --k-orange-600: #d66c01;
  --k-orange-700: #a85204;

  /* Neutros fríos */
  --k-gray-0: #ffffff;
  --k-gray-50: #f4f6fb;
  --k-gray-100: #e8eef7;
  --k-gray-200: #d6deea;
  --k-gray-300: #c9d2e3;
  --k-gray-400: #8a94a6;
  --k-gray-500: #5d6c7b;
  --k-gray-600: #43526b;
  --k-gray-700: #2b3445;
  --k-gray-800: #1b2433;
  --k-gray-900: #0d1117;
  --k-gray-950: #070a0f;

  --k-accent: var(--k-orange-500);
  --k-accent-hover: var(--k-orange-600);
  --k-accent-soft: var(--k-orange-50);
  --k-focus-ring: 0 0 0 3px rgb(243 146 0 / 0.35);
  --k-gradient-brand: linear-gradient(135deg, #0b2447 0%, #163a6b 60%, #24477a 100%);
  --k-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Foco visible (accesibilidad) con el naranja de marca */
  --p-focus-ring-width: 0;
  --p-focus-ring-style: none;
  --p-focus-ring-color: transparent;
  --p-focus-ring-shadow: var(--k-focus-ring);
  --p-form-field-focus-border-color: var(--k-orange-500);
  --p-button-primary-focus-ring-shadow: var(--k-focus-ring);

  /* ---- PrimeNG: superficies -> neutros Kaiona ---- */
  --p-surface-0: var(--k-gray-0);
  --p-surface-50: var(--k-gray-50);
  --p-surface-100: var(--k-gray-100);
  --p-surface-200: var(--k-gray-200);
  --p-surface-300: var(--k-gray-300);
  --p-surface-400: var(--k-gray-400);
  --p-surface-500: var(--k-gray-500);
  --p-surface-600: var(--k-gray-600);
  --p-surface-700: var(--k-gray-700);
  --p-surface-800: var(--k-gray-800);
  --p-surface-900: var(--k-gray-900);
  --p-surface-950: var(--k-gray-950);
  --p-text-color: var(--k-gray-700);
  --p-text-hover-color: var(--k-gray-900);
  --p-text-muted-color: var(--k-gray-500);
  --p-content-border-color: var(--k-gray-200);
  --p-form-field-border-color: var(--k-gray-300);

  /* ---- PrimeNG: formas ---- */
  --p-border-radius-sm: 6px;
  --p-border-radius-md: 10px;
  --p-border-radius-lg: 14px;
  --p-border-radius-xl: 20px;

  /* ---- Tokens propios de KaionaDoc ---- */
  --kaiona-blue: var(--k-navy-600);
  --kaiona-dark: var(--k-navy-600);
  --kaiona-info: var(--k-navy-400);
  --font-family: var(--k-font);
  --s-radius-sm: 8px;
  --s-radius-md: 10px;
  --s-radius-lg: 16px;
  --s-radius-xl: 20px;
  --s-radius-btn: 10px;
  --s-shadow-sm: 0 1px 3px rgb(11 36 71 / 0.06), 0 1px 2px rgb(11 36 71 / 0.04);
  --s-shadow-md: 0 6px 16px rgb(11 36 71 / 0.08), 0 2px 4px rgb(11 36 71 / 0.04);
  --s-shadow-lg: 0 16px 40px rgb(11 36 71 / 0.12), 0 4px 10px rgb(11 36 71 / 0.06);
  --s-text-primary: var(--k-gray-900);
  --s-text-secondary: var(--k-gray-700);
  --s-text-tertiary: var(--k-gray-500);
  --s-text-disabled: var(--k-gray-400);
  --s-border: var(--k-gray-300);
  --s-border-light: var(--k-gray-100);

  /* ---- Tailwind (colores usados en plantillas) ---- */
  --font-sans: var(--k-font);
  --default-font-family: var(--k-font);
  --color-orange-500: var(--k-orange-500);
  --color-gray-50: var(--k-gray-50);
  --color-gray-100: var(--k-gray-100);
  --color-gray-200: var(--k-gray-200);
  --color-gray-300: var(--k-gray-300);
  --color-gray-400: var(--k-gray-400);
  --color-gray-500: var(--k-gray-500);
  --color-gray-600: var(--k-gray-600);
  --color-gray-700: var(--k-gray-700);
  --color-gray-800: var(--k-gray-800);
  --color-gray-900: var(--k-gray-900);
  --color-notif-heading: var(--k-navy-600);
  --color-notif-type-pill-bg: var(--k-navy-50);
  --color-notif-type-pill-text: var(--k-navy-600);
  --color-notif-shell-border: var(--k-gray-200);
  --color-notif-card-border: var(--k-gray-200);
  --color-notif-text: var(--k-gray-600);
  --color-notif-muted: var(--k-gray-500);
  --color-notif-time: var(--k-gray-500);

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
}

/* Solo con el tema "Kaiona" del selector: los azules de Tailwind pasan a marino */
html[data-theme="kaiona"] {
  --color-kaiona-blue: var(--k-navy-600);
  --color-blue-50: var(--k-navy-50);
  --color-blue-100: var(--k-navy-100);
  --color-blue-200: var(--k-navy-200);
  --color-blue-400: var(--k-navy-400);
  --color-blue-500: var(--k-navy-500);
  --color-blue-600: var(--k-navy-600);
  --color-blue-700: var(--k-navy-700);
  --color-blue-900: var(--k-navy-900);
  --color-indigo-500: var(--k-navy-500);
  --color-indigo-600: var(--k-navy-600);
  --color-indigo-700: var(--k-navy-700);
  --color-cyan-600: var(--k-navy-500);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html,
body {
  font-family: var(--k-font);
  font-feature-settings: "cv11", "ss01";
  color: var(--k-gray-700);
}
body {
  background: var(--k-gray-50);
}
::selection {
  background: var(--k-orange-200);
  color: var(--k-navy-900);
}
* {
  scrollbar-color: var(--k-gray-300) transparent;
}
a {
  text-underline-offset: 2px;
}

/* Foco de teclado visible en todo lo interactivo */
:where(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea):focus-visible {
  outline: 2px solid var(--k-orange-500);
  outline-offset: 2px;
}
.p-inputtext:enabled:focus,
.p-select.p-focus,
.p-multiselect.p-focus,
.p-autocomplete.p-focus .p-autocomplete-input,
.p-datepicker.p-focus .p-inputtext,
.p-textarea:focus {
  box-shadow: var(--k-focus-ring);
}

/* Enlace "saltar al contenido" */
.skip-link:focus {
  background: var(--k-navy-600);
  color: #fff;
  border-radius: 0 0 10px 0;
  padding: 0.5rem 1rem;
}

/* --------------------------------------------------------------------------
   3. Componentes PrimeNG
   -------------------------------------------------------------------------- */
.p-button {
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.p-button:not(:disabled):active {
  transform: translateY(1px);
}
.p-button.p-button-warn:not(.p-button-outlined):not(.p-button-text),
.p-button.k-accent {
  background: var(--k-orange-500);
  border-color: var(--k-orange-500);
  color: var(--k-navy-900);
}
.p-button.p-button-warn:not(.p-button-outlined):not(.p-button-text):not(:disabled):hover,
.p-button.k-accent:not(:disabled):hover {
  background: var(--k-orange-400);
  border-color: var(--k-orange-400);
  color: var(--k-navy-900);
}

/* Pestañas: barra activa en naranja */
.p-tablist-active-bar {
  background: var(--k-orange-500);
  height: 3px;
  border-radius: 3px 3px 0 0;
}
.p-tab-active {
  color: var(--k-navy-600);
}

/* Interruptores, checkbox, radio, slider, progreso */
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  background: var(--k-navy-600);
}
.p-progressbar-value {
  background: linear-gradient(90deg, var(--k-navy-600), var(--k-orange-500));
}
.p-progressspinner-circle {
  stroke: var(--k-orange-500) !important;
  animation: p-progressspinner-dash 1.5s ease-in-out infinite;
}

/* Tablas */
.p-datatable .p-datatable-thead > tr > th {
  background: var(--k-gray-50);
  color: var(--k-navy-600);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  border-color: var(--k-gray-200);
}
.p-datatable .p-datatable-tbody > tr:hover {
  background: var(--k-navy-50);
}
.p-datatable .p-datatable-tbody > tr.p-datatable-row-selected {
  background: var(--k-navy-50);
  box-shadow: inset 3px 0 0 var(--k-orange-500);
}
.p-paginator .p-paginator-page.p-paginator-page-selected {
  background: var(--k-navy-600);
  color: #fff;
}

/* Overlays */
.p-dialog {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--s-shadow-lg);
}
.p-dialog .p-dialog-header {
  border-bottom: 1px solid var(--k-gray-100);
}
.p-dialog .p-dialog-title {
  color: var(--k-navy-600);
  font-weight: 700;
}
.p-drawer {
  box-shadow: var(--s-shadow-lg);
}
.p-popover,
.p-menu,
.p-tieredmenu,
.p-select-overlay,
.p-multiselect-overlay,
.p-autocomplete-overlay {
  border-radius: 14px;
  border-color: var(--k-gray-200);
  box-shadow: var(--s-shadow-lg);
}
.p-menu .p-menu-item.p-focus > .p-menu-item-content,
.p-tieredmenu .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
  background: var(--k-navy-50);
}
.p-tooltip .p-tooltip-text {
  background: var(--k-navy-700);
  border-radius: 8px;
  font-size: 0.8125rem;
}

/* Tarjetas y paneles */
.p-card,
.p-panel,
.p-fieldset {
  border-radius: 16px;
  border: 1px solid var(--k-gray-100);
  box-shadow: var(--s-shadow-sm);
}

/* Etiquetas y badges */
.p-badge {
  font-weight: 700;
}
.p-tag {
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 0.625rem;
}

/* Migas de pan */
p-breadcrumb .p-breadcrumb li:last-child .p-breadcrumb-item-label {
  color: var(--k-navy-600);
  font-weight: 600;
}

/* Toasts */
.p-toast .p-toast-message {
  border-radius: 14px;
  box-shadow: var(--s-shadow-lg);
}

/* Botones propios del dashboard */
.db-btn--dark:hover {
  background: #163a6b;
}

/* Gridstack: placeholder con acento */
.grid-stack-placeholder > .placeholder-content {
  border-color: var(--k-orange-500) !important;
}

/* --------------------------------------------------------------------------
   4. Shell de la aplicación (menú lateral, cabecera, pie)
   Nota: styles-*.css se carga en diferido y DESPUÉS de este fichero, por eso
   algunas reglas duplican clase/elemento para ganar en especificidad.
   -------------------------------------------------------------------------- */

/* Menú lateral: azul marino Kaiona en lugar de gris #2b2b2b */
app-sidebar-component aside[class*="bg-[#2b2b2b]"] {
  background: linear-gradient(180deg, #0b2447 0%, #0d2b55 55%, #102f5c 100%);
  box-shadow: 4px 0 24px rgb(11 36 71 / 0.18);
  border-right: 1px solid rgb(255 255 255 / 0.04);
}
app-sidebar-component aside [class*="hover:bg-[#3a3a3a]"]:hover {
  background: rgb(255 255 255 / 0.08);
}
app-sidebar-component nav .nav-item.nav-item {
  position: relative;
  border-radius: 12px;
  color: rgb(255 255 255 / 0.78);
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
app-sidebar-component nav .nav-item.nav-item:hover {
  background: rgb(255 255 255 / 0.07);
  color: #fff;
}
app-sidebar-component nav .nav-item.nav-item--active,
app-sidebar-component nav .nav-item.nav-item--active:hover {
  background: rgb(255 255 255 / 0.11);
  color: #fff;
  font-weight: 600;
}
app-sidebar-component nav .nav-item.nav-item--active::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 22%;
  bottom: 22%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--k-orange-500);
}
app-sidebar-component nav .nav-item.nav-item--active .material-icons {
  color: var(--k-orange-400);
}
app-sidebar-component nav .nav-item.nav-item:focus-visible {
  outline: 2px solid var(--k-orange-500);
  outline-offset: -2px;
}

/* Cabecera */
app-header-component header.bg-white {
  box-shadow: 0 1px 0 var(--k-gray-100), 0 6px 18px -12px rgb(11 36 71 / 0.25);
}
app-header-component header button.rounded-full:hover {
  background: var(--k-navy-50);
}

/* Pie */
app-footer-component footer {
  background: var(--k-gray-0);
  border-top: 1px solid var(--k-gray-100);
  color: var(--k-gray-500);
}

/* Diálogos: franja superior fina en vez de 15px */
.p-dialog.p-dialog .p-dialog-header {
  border-top-width: 4px;
  border-bottom-color: var(--k-gray-100);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Tour de ayuda (driver.js) */
.driver-popover.kaiona-help-tour {
  border-radius: 16px;
  box-shadow: var(--s-shadow-lg);
  font-family: var(--k-font);
}
.driver-popover.kaiona-help-tour * {
  font-family: var(--k-font);
}

/* 5. Login y páginas públicas: ver kaiona-layout.css */

/* --------------------------------------------------------------------------
   6. Ajustes finos
   -------------------------------------------------------------------------- */
:root:root {
  /* Alias que usan varios componentes (Workplace, etc.) y PrimeNG no define */
  --p-highlight-bg: var(--p-highlight-background);
  /* Campos deshabilitados más ligeros */
  --p-form-field-disabled-background: #eef1f6;
  --p-form-field-disabled-color: var(--k-gray-500);
}