/* Capa de la app sobre el Clavisco Design System.
   Los componentes viven en vendor/ds-styles/components.css y no se editan.
   Acá solo va lo que el DS no cubre. */

/* Slot de contexto de la shell bar (ambiente en Operación, dominio AD en
   Directorio AD). No existe en el DS: es específico de esta app.
   La etiqueta de tipo ("Ambiente ·", "Dominio AD ·") dice qué es el badge;
   se oculta en pantallas angostas, donde el badge solo ya cabe justo. */
.cl-shell-env { position: relative; }
.cl-shell-env > summary,
.cl-shell-env--static { display: inline-flex; align-items: center; gap: var(--space-3); }
.cl-shell-env > summary { cursor: pointer; list-style: none; }
.cl-shell-env > summary::-webkit-details-marker { display: none; }
.cl-shell-env-label {
  color: var(--fg-3);
  font-size: var(--fs-small);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .cl-shell-env-label { display: none; }
}
.cl-shell-env-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 220px;
  padding: 6px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

/* El margen superior negativo de .cl-object-head asume que el header es lo
   primero dentro de .cl-main; cuando el layout renderiza un flash antes, el
   header (opaco, sticky) se monta encima y tapa el banner. Se anula solo en
   ese caso; al cerrar el banner el selector deja de aplicar y todo vuelve
   al layout normal del DS. */
.cl-main > .cl-banner ~ .cl-object-page .cl-object-head { margin-top: 0; }

/* .cl-card recorta (overflow: clip) y las celdas de .cl-table no hacen wrap,
   así que en tablas anchas la columna de acciones quedaba inalcanzable.
   Mismo razonamiento que .cl-listreport en el DS: scroll horizontal en vez
   de recorte; overflow-y sigue recortado para conservar los bordes redondos. */
.cl-card:has(> .cl-table) { overflow-x: auto; overflow-y: clip; }

/* Acciones de formulario: .cl-btn-group del DS es un segmented control
   (fuerza background: var(--bg-canvas) en sus hijos), no un footer de
   formulario. Un .cl-btn--primary dentro de .cl-btn-group queda con texto
   blanco sobre fondo blanco. Esta clase reemplaza a .cl-btn-group para
   agrupar botones de acción sin ese efecto. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

/* Las celdas de .cl-table no hacen wrap (DS). Empresa y Cliente llegan a
   50-65 caracteres y empujaban Acciones fuera de la pantalla a 1280px.
   Sigue la convención .cell-* del DS (.cell-sub): la celda puede partir
   línea y se acota para que no absorba el ancho de las demás columnas. */
.cl-table .cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 28ch;
}

/* Contraseña temporal: monoespaciada y grande, sin pisar .cl-mono inline. */
.ldap-temp-password {
  margin-top: var(--space-4);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

/* Bloques secundarios debajo de la tarjeta principal (tarjetas, reportes,
   zonas de riesgo). Reemplaza los margin-top inline entre tarjetas. */
.section {
  margin-top: var(--space-8);
}

/* Páginas sin sesión (login, registro, recuperar y confirmar). Desde DS
   v5.2.0 .cl-main--narrow ya acota el ancho y centra; acá solo queda el
   despegue vertical de la tarjeta. */
.auth-page {
  margin-top: 10vh;
}
.auth-page .cl-shell-logo {
  justify-content: center;
  margin-bottom: var(--space-8);
}
.auth-submit {
  margin-top: var(--space-8);
}
.auth-submit .cl-btn {
  width: 100%;
}
.auth-links {
  margin-top: var(--space-6);
  text-align: center;
}

/* Campos apilados dentro de una tarjeta de formulario. */
.form-stack > * + * {
  margin-top: var(--space-6);
}

/* Vínculos de un Operator (operators/index). Las columnas «Vinculado a» y
   «Minutos» comparten una celda (colspan) para que un solo <details> nativo
   colapse ambas: dos .cl-stack paralelos se desalineaban al hacer wrap y no
   se pueden plegar juntos sin JavaScript. Cada vínculo es una fila de la
   grilla; los ocultos heredan las columnas vía subgrid para seguir alineados
   al expandir. */
.operator-bindings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px;
  column-gap: var(--space-6);
  align-items: center;
}
.operator-binding {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}
.operator-binding-tenant {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  white-space: normal;
  overflow-wrap: anywhere;
}
.operator-binding-expiry { min-height: 20px; }
/* Los navegadores actuales envuelven el contenido del <details> en el pseudo
   ::details-content; hay que hacerlo subgrid también o las filas ocultas
   pierden las columnas al expandir. En navegadores sin ese pseudo las filas
   son hijas directas del <details> y el primer subgrid alcanza. */
.operator-bindings-more,
.operator-bindings-more::details-content {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: 2px;
  align-items: center;
}
.operator-bindings-more > summary {
  grid-column: 1 / -1;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--accent-600);
}
.operator-bindings-more > summary::-webkit-details-marker { display: none; }
.operator-bindings-more[open] > summary { color: var(--fg-3); }

/* Iconos inline (IconsHelper). El DS ya dimensiona .cl-side-link svg y
   .cl-btn svg, pero no el hueco de .cl-empty-icon ni .cl-shell-icon-btn. */
.cl-empty-icon svg { width: 20px; height: 20px; }
.cl-shell-icon-btn svg { width: 16px; height: 16px; }

/* Toggle de tema: luna en light (invita a oscurecer), sol en dark. Se
   alterna por data-theme en <html>, sin JavaScript adicional. */
html:not([data-theme="dark"]) .theme-toggle-sun,
html[data-theme="dark"] .theme-toggle-moon { display: none; }