/* =============================================================================
   Ammia Admin · CSS propio del producto (Ammia Design System 6.5)
   Prefijo ad-. Solo tokens del DS: sin hex ni z-index literales.

   Orden de capas (declarado en index.html):  ammia < admin
   - components.css se carga como components.scoped.css (mismo contenido dentro de
     @scope (.cx-scope)): el DS solo aplica dentro de .cx-scope, que hoy son el login y las
     pantallas de recuperacion de contrasena. El resto de ammia-admin no cambia.
   - Los estilos sin capa (Bootstrap, style-ammia.css, CSS de componentes) ganan a cualquier capa.
   Mismo esquema que Ammia Core (surexs-admin-web/src/assets/css/core.css).
   ============================================================================= */

/* AD-01 · Isla del design system (igual que AJ-01 de Ammia Core).
   Dentro de .cx-scope se ignora el CSS sin capa (Bootstrap, style-ammia.css y el CSS de cada
   componente) y se vuelve a la cascada en capas: DS + admin. revert-layer conserva las pistas de
   presentacion (atributos de HTML y SVG). :is(*, #cx-ds-isla) da especificidad de id sin que el
   id exista, para ganar a cualquier selector de clases de Bootstrap. */
@scope (.cx-scope) {
  :scope,
  :is(*, #cx-ds-isla),
  :is(*, #cx-ds-isla)::before,
  :is(*, #cx-ds-isla)::after {
    all: revert-layer;
  }
}

@layer admin {
  /* Base tipografica de las piezas del DS (lo que en el catalogo da body). */
  .ad-ds {
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }
}

/* =============================================================================
   Login y recuperacion de contrasena (DS 5.4). El template del DS hace el resto.
   ============================================================================= */
@layer admin {
  .ad-auth {
    min-height: 100vh;
    /* Sin separacion silabica: style-ammia.css pone hyphens: auto a casi todo y el login lo heredaba
       ("op-eración"), ademas con reglas del ingles (index.html es lang="en"). Las frases del panel
       de marca y los textos del formulario se parten solo entre palabras. */
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .ad-auth-version {
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
  }
  /* Recuerdame + ¿Olvidaste tu contrasena? en una fila */
  .ad-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  /* Codigo de verificacion: 4 casillas de un caracter */
  .ad-codigo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 56px));
    justify-content: center;
    gap: var(--space-3);
  }
  .ad-codigo .control input {
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
  }
  .ad-auth-intro {
    margin: 0;
    color: var(--text-secondary);
  }
}

/* Tenant sin logo en el panel de marca: su nombre en texto. Con logo se usa img.auth-logo.tenant-logo
   del DS (8.6, v1.2.0). */
@layer admin {
  .ad-brand-name-on-dark {
    color: var(--brand-on-primary);
    font-family: var(--font-brand);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
}

/* Colores del logo de Ammia del sprite (igual que AJ-09 de Ammia Core): los trazos viven en el
   sprite, fuera del @scope, y se clonan con <use>; se repiten sin alcance y solo leen variables. */
@layer admin {
  .logo-ink {
    fill: var(--logo-ink, var(--text-primary));
  }
  .logo-accent {
    fill: var(--logo-accent, var(--primitive-ammia-blue-500));
  }
}