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

   Orden de capas (declarado en index.html):  ammia < core
   - components.css se carga como components.scoped.css: el mismo contenido dentro de
     @scope (.cx-scope) to (.content-page). El DS solo puede aplicar dentro del shell y del login;
     dentro de .content-page (las pantallas actuales) y fuera de .cx-scope no existe.
   - Los estilos sin capa (Bootstrap, styles.css, CSS de componentes) ganan a cualquier capa.

   Ajustes temporales registrados en PLAN_MENU_LATERAL/REGISTRO_AJUSTES.md.
   ============================================================================= */

/* AJ-01 · Isla del design system.
   Dentro de .cx-scope (shell y login), salvo .content-page, se ignora el CSS sin capa (Bootstrap,
   tema y estilos globales del app) y se vuelve a la cascada en capas: DS + core. revert-layer
   conserva las pistas de presentación (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) to (.content-page) {
  :scope,
  :is(*, #cx-ds-isla),
  :is(*, #cx-ds-isla)::before,
  :is(*, #cx-ds-isla)::after {
    all: revert-layer;
  }
}

@layer core {
  /* Base tipográfica de las piezas del DS (lo que en el catálogo da body). El contenedor del shell
     no la lleva: así las pantallas actuales siguen heredando la tipografía de <body>. */
  .cx-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;
  }
}

/* =============================================================================
   App shell (F2 · DS 5.1 y 5.2). Las clases del DS (.app-shell, .rail, .topbar...) aplican; aquí
   va solo lo propio de Core.
   ============================================================================= */
@layer core {
  .cx-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--layout-rail-width) minmax(0, 1fr);
    /* Se conserva el fondo actual de las pantallas (body / #main). */
    background: transparent;
  }
  /* Host de los componentes de Angular dentro de la isla (por defecto serían inline). */
  app-global-search {
    display: block;
  }
  .cx-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .cx-content {
    display: block;
    min-width: 0;
  }

  /* Topbar: misma transición que el navbar anterior cuando se abre el panel derecho. */
  .cx-shell .topbar {
    transition: margin-right 0.5s;
  }
  .cx-topbar-search {
    display: block;
    flex: 1 1 auto;
    max-width: 640px;
    min-width: 0;
  }

  /* Flyout del rail: a 8 px del rail, a la altura de su ítem (DS 5.2). */
  .cx-rail-fly {
    position: fixed;
    left: calc(var(--layout-rail-width) + var(--space-2));
    z-index: var(--z-overlay);
    max-height: calc(100vh - var(--space-4));
    overflow-y: auto;
  }

  /* Búsqueda global (gap G1: no existe como composite en el DS; REGISTRO_AJUSTES AJ-06). */
  .cx-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .cx-search-filter-btn {
    white-space: nowrap;
  }
  .cx-search-filter > .fly {
    left: 0;
    right: auto;
  }
  .cx-search-control {
    flex: 1 1 auto;
  }
  .cx-search-loading {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }
  .cx-search-kbd {
    flex: none;
    padding: 0 var(--space-2);
    border: var(--stroke-default) solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    line-height: 1.6;
  }

  /* Foto de perfil dentro del avatar del DS. */
  .cx-avatar {
    overflow: hidden;
    padding: 0;
  }
  .cx-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Etiquetas largas en las tabs móviles («Configuración»): hasta 2 líneas (DS 5.2 regla 5). */
  .mtabs .mtab {
    min-width: 0;
    text-align: center;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .cx-srow-danger,
  .cx-srow-danger .icon {
    color: var(--feedback-critical-text);
  }

  @media (max-width: 1023px) {
    .cx-shell {
      grid-template-columns: minmax(0, 1fr);
      padding-bottom: calc(var(--layout-bottom-nav-height-mobile) + var(--space-3));
    }
    /* En móvil la topbar queda como barra de búsqueda bajo .mtop (hoy la búsqueda también se ve). */
    .cx-shell .mtop {
      order: -1;
    }
    .cx-shell .topbar {
      display: flex;
      position: static;
      height: auto;
      padding: var(--space-2) var(--space-4);
    }
    .cx-shell .topbar > .topbar-title,
    .cx-shell .topbar > .cx-cuenta,
    .cx-search-kbd,
    .cx-rail-fly {
      display: none;
    }
    .cx-topbar-search {
      max-width: none;
    }
  }
}

/* AJ-05 · Margen del contenido. styles.css da a .content-page margin-top: 180px y 50px a los
   lados para librar el navbar fijo anterior. Sin capa, para ganarle (misma regla, más específica).
   Padding lateral de 16 px (no los 40 del DS): con el rail de 88 px, el ancho útil queda casi igual
   al de antes (100 px de margen total) y las tablas de las pantallas actuales no se parten ni
   desbordan sus tarjetas de alto fijo. Se ajusta al DS cuando cada pantalla migre. */
.cx-content > .content-page {
  margin: 0;
  padding: var(--space-7) var(--space-4) var(--space-8);
}
@media (max-width: 1023px) {
  .cx-content > .content-page {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

/* =============================================================================
   Login y restablecer contraseña (F4 · DS 5.4). El template del DS hace el resto.
   ============================================================================= */
@layer core {
  /* hyphens: manual — las frases del login nunca se parten con guion (igual que ammia-admin, e72c70a).
     El rail y las pestañas móviles conservan su hyphens: auto. */
  .cx-auth {
    min-height: 100vh;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .cx-auth-version {
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-align: center;
  }
}

/* AJ-09 · Colores del logo del sprite. Las reglas .logo-ink/.logo-accent del DS quedan dentro del
   @scope, pero los trazos del logo viven en el sprite (fuera del alcance) y se clonan con <use>:
   ahí no aplican. Se repiten sin alcance; solo leen variables (--logo-ink/--logo-accent las fija
   cada contexto, p. ej. .logo-on-dark en el login). Respaldo: tokens primitivos del DS. */
@layer core {
  .logo-ink {
    fill: var(--logo-ink, var(--text-primary));
  }
  .logo-accent {
    fill: var(--logo-accent, var(--primitive-ammia-blue-500));
  }
}

/* =============================================================================
   Marca del tenant (F5 · DS 8). Logo del registro como <img class="tenant-logo"> (Core v1.2.0, 8.6: rail,
   topbar mobile y login); sin logo, el nombre en texto (cx-brand-name: gap de 8.6, logo faltante).
   ============================================================================= */
@layer core {
  .cx-brand-name {
    max-width: 72px;
    color: var(--brand-text-strong);
    font-family: var(--font-brand);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .cx-brand-name-on-dark {
    max-width: none;
    color: var(--brand-on-primary);
    font-size: var(--font-size-xl);
    text-align: left;
  }
}

/* Cuenta en la zona inferior del rail (F7, a petición del negocio): avatar del tamaño de un icono. */
@layer core {
  .cx-avatar-rail {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: var(--radius-pill);
  }
}

/* Rail: el icono nunca se encoge y las etiquetas largas («Configuración») caben en el botón de
   72 px: hasta 2 líneas (DS 5.2 regla 5), con guion si hace falta. */
@layer core {
  .rail .nav-i > .icon {
    flex: none;
  }
  .rail .nav-i {
    text-align: center;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* AJ-17 · Pestañas de Gestión de módulos apagados para el tenant (F3). Se ocultan con una clase
   (customClass de ngx-bootstrap: encabezado y contenido) en lugar de *ngIf, para no cambiar cómo
   se registran las pestañas (con *ngIf, Angular marcaba ExpressionChangedAfterItHasBeenChecked). */
.content-page .cx-pestana-oculta {
  display: none !important;
}

/* Búsqueda global centrada en la topbar (escritorio, a petición del negocio 16 oct). La topbar tiene
   solo la ruta y la búsqueda: tres columnas (ruta | búsqueda | espacio igual) dejan la búsqueda al
   centro y su lista de resultados ya no se sale por la derecha. En móvil sigue el arreglo de arriba. */
@layer core {
  @media (min-width: 1024px) {
    .cx-shell .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 640px) minmax(0, 1fr);
    }
    .cx-topbar-search {
      max-width: none;
      width: 100%;
    }
  }
}

/* Lista de resultados de la búsqueda: el typeahead la pinta en <body> (fuera de la isla del DS).
   Nunca más ancha que la ventana. Sin capa para ganarle al CSS de ngx-bootstrap. */
typeahead-container.dropdown-menu {
  max-width: calc(100vw - 32px);
}