/* Autor: Mariano Sánchez Sigüenza.
   Identidad de la landing sobre las variables públicas de Frappe 16.31.
   Los colores de estado, radios y sombras conservan sus valores nativos.
   html:root prevalece sobre el :root del login.bundle.css que Frappe carga
   después de web_include_css, sin !important ni cambios de plantilla. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/academy_management/fonts/Archivo-normal-100_900-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

html:root, [data-theme] {
  --ac-paper: #FFFFFF;
  --ac-paper-2: #F3F4F4;
  --ac-plate: #F0F1F1;
  --ac-ink: #15161A;
  --ac-ink-2: #4A4D54;
  --ac-ink-3: #5C5F66;
  --ac-line: rgba(21, 22, 26, .16);
  --ac-line-soft: rgba(21, 22, 26, .12);
  --ac-teal: #087270;
  --ac-teal-night: #5CC6C4;
  --ac-night: #101521;
  --ac-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-stack: var(--ac-sans);
}

html:root, [data-theme="light"] {
  --ac-accent: var(--ac-teal);
  --ac-action-text: var(--ac-paper);
  --ac-accent-text: var(--ac-paper);
  --primary: var(--ac-accent);
  --brand-color: var(--ac-accent);
  --primary-color: var(--ac-accent);
  --btn-primary: var(--ac-ink);
  --heading-color: var(--ac-ink);
  --text-color: var(--ac-ink);
  --text-neutral: var(--ac-ink);
  --text-muted: var(--ac-ink-2);
  --text-light: var(--ac-ink-3);
  --bg-color: var(--ac-paper);
  --fg-color: var(--ac-paper);
  --card-bg: var(--ac-paper);
  --modal-bg: var(--ac-paper);
  --popover-bg: var(--ac-paper);
  --navbar-bg: var(--ac-paper);
  --subtle-accent: var(--ac-paper-2);
  --subtle-fg: var(--ac-plate);
  --control-bg: var(--ac-paper-2);
  --fg-hover-color: var(--ac-plate);
  --surface-white: var(--ac-paper);
  --surface-menu-bar: var(--ac-paper-2);
  --surface-modal: var(--ac-paper);
  --surface-gray-1: var(--ac-paper-2);
  --surface-gray-2: var(--ac-plate);
  --ink-gray-6: var(--ac-ink-2);
  --ink-gray-7: var(--ac-ink-2);
  --ink-gray-8: var(--ac-ink);
  --ink-gray-9: var(--ac-ink);
  --focus-default: 0 0 0 2px var(--ac-accent);
}

/* Valores de Desk/Espresso oscuros de la versión instalada; también sirven
   a las superficies web que no incluyen desk/dark.scss. */
html[data-theme="dark"], [data-theme="dark"] {
  --neutral: var(--neutral-black);
  --invert-neutral: var(--neutral-white);
  --text-dark: var(--gray-900);
  --btn-default-bg: #232323;
  --btn-default-hover-bg: #383838;
  --btn-ghost-hover-bg: #232323;
  --border-color: #232323;
  --table-border-color: var(--border-color);
  --disabled-text-color: var(--gray-400);
  --disabled-control-bg: #232323;
  --icon-stroke: var(--gray-300);
  --ac-accent: var(--ac-teal-night);
  --ac-action-text: var(--ac-ink);
  --ac-accent-text: var(--ac-ink);
  --primary: var(--ac-accent);
  --brand-color: var(--ac-accent);
  --primary-color: var(--ac-accent);
  --btn-primary: var(--ac-accent);
  --heading-color: var(--gray-50);
  --text-color: var(--gray-50);
  --text-neutral: var(--gray-50);
  --text-muted: var(--gray-400);
  --text-light: var(--gray-300);
  --bg-color: var(--gray-900);
  --fg-color: var(--gray-900);
  --card-bg: var(--gray-900);
  --modal-bg: var(--gray-900);
  --popover-bg: var(--gray-900);
  --navbar-bg: var(--surface-menu-bar);
  --subtle-accent: #232323;
  --subtle-fg: #383838;
  --control-bg: #232323;
  --fg-hover-color: #232323;
  --surface-white: #0f0f0f;
  --surface-menu-bar: #0f0f0f;
  --surface-modal: #232323;
  --surface-gray-1: #232323;
  --surface-gray-2: #2b2b2b;
  --ink-gray-6: #999999;
  --ink-gray-7: #afafaf;
  --ink-gray-8: #d4d4d4;
  --ink-gray-9: #f8f8f8;
  --focus-default: 0 0 0 2px var(--ac-accent);
}

/* ── Tanda 2 (marca-opus): componentes nativos del Desk ──────────────────────
   Primero variables nativas (Espresso/css_variables); las reglas que siguen a
   este bloque cubren sólo lo que ninguna variable alcanza (ver final.md). */
html:root, [data-theme] {
  /* Radios más rectos, como la landing; full (pastillas) no cambia. */
  --border-radius-sm: 6px;
  --border-radius: 6px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 10px;
  --border-radius-2xl: 12px;
}

html:root:not([data-theme="dark"]), [data-theme="light"] {
  /* Línea fina visible sobre papel (paso nativo outline-gray-2). Va después del
     bloque oscuro: el :not() evita pisar sus valores. */
  --border-color: var(--outline-gray-2, #E2E2E2);
  --table-border-color: var(--outline-gray-2, #E2E2E2);
  --ac-btn-line: rgba(21, 22, 26, 0.24);
}

html[data-theme="dark"], [data-theme="dark"] {
  --ac-btn-line: var(--outline-gray-3, #424242);
}

/* R1 · Botón secundario de la landing (contorno). Frappe pinta .btn-default y
   .btn-secondary con --control-bg, la misma variable de los campos: cambiarla
   volvería blancos los inputs. Sombra interior: no altera medidas ni el anillo
   de foco nativo (box-shadow !important de :focus-visible). */
/* Frappe combina clases («btn btn-default btn-primary»): los tonos sólidos
   (primario y de estado) quedan fuera. */
:is(.btn.btn-default, .btn.btn-secondary):not(.btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-dark) {
  background-color: var(--fg-color);
  box-shadow: inset 0 0 0 1px var(--ac-btn-line);
}
:is(.btn.btn-default, .btn.btn-secondary):not(.btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-dark):is(:hover, :active) {
  background-color: var(--subtle-accent);
}

/* R2 · Título de la cabecera (último elemento de las migas): wordmark de la
   landing. No existe variable de ancho/peso de título. */
.navbar-breadcrumbs li:last-child > a,
.modal-header .modal-title {
  font-stretch: 82%;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* R3 · Pestañas de formulario: activa con trazo de acento de 2 px y foco
   visible (Frappe quita el outline en :focus-visible, form.scss:518). */
.form-tabs .nav-item .nav-link.active {
  border-bottom: 2px solid var(--primary);
  color: var(--text-color);
  font-weight: 600;
  padding-bottom: 8px;
}
.form-tabs .nav-item .nav-link:focus-visible {
  box-shadow: inset 0 -2px 0 var(--primary), 0 0 0 2px var(--primary);
  border-radius: var(--border-radius-tiny, 4px);
}