/* ============================================================================
   eTradie Intranet - estilos compartidos por las dos pantallas unicas:
   intranet_home.html (colaborador) e intranet_admin_dashboard.html (admin).
   Se carga DESPUES de etradie.css, etradie-tipografia.css y de
   etradie_assistance.css. Solo tokens del eDS.

   Aqui vive solo lo que usan las dos pantallas (seccion 20.1 del maestro).
   ============================================================================ */

/* ---- Ayuda de pantalla -------------------------------------------------
   #intra-ayuda-hold recibe el aviso de la seccion activa. Cuando
   etradie_ayuda.js ya esta funcionando (body.et-ayuda-on) el contenedor se
   saca de la vista: el aviso de cada seccion nueva se escribe ahi y el
   script lo lleva al modal sin que se vea un parpadeo arriba de las
   pestanas. Si el script no carga, la clase no existe y el aviso se ve. */
body.et-ayuda-on .intra-ayuda-hold {
    position: absolute; left: -10000px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

/* El boton "?" que agrega etradie_ayuda.js al final del encabezado. */
.page-hd-actions .et-ayuda-btn {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--et-line); border-radius: 8px;
    background: var(--et-surface); color: var(--et-primary);
    transition: border-color 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1);
}
.page-hd-actions .et-ayuda-btn:hover { background: var(--et-primary-50); border-color: var(--et-primary); }
.page-hd-actions .et-ayuda-btn:focus-visible { outline: 2px solid var(--et-accent); outline-offset: 2px; }
.et-ayuda-box { max-width: 520px; }
.et-ayuda-body { font-size: var(--et-fs-sm); line-height: 1.6; color: var(--et-ink); }

/* ---- Asistente eTradie IA ----------------------------------------------
   El marco (contorno naranja, varita) lo pone etradie_assistance.js
   con .et-ai-standard. Aqui solo el acomodo interno del panel y de cada
   observacion, que ese archivo no estiliza. */
body:not(.ia-on) .intra-ia { display: none; }
.intra-ia { margin: 16px 0; }
.intra-ia .ia-bar-btn { cursor: pointer; }
/* Titulo arriba y descripcion abajo: sin esto, en .NET 8 se pegaban en una
   sola linea ("Lectura de la IntranetSolicitudes en espera..."). */
.intra-ia .ia-bar-txt { display: flex; flex-direction: column; gap: 2px; }

.intra-ia .ia-card { margin: 0; }
.ia-card-hd { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 12px; padding: 14px 16px 8px; }
.ia-card-tit { min-width: 0; }
.ia-card-tit .main-content-label { display: flex; align-items: center;
              font-size: var(--et-fs-sm); font-weight: 700; color: var(--et-ink); }
.ia-card-nota { font-size: var(--et-fs-xs); color: var(--et-ink-muted); margin: 2px 0 0; }
.ia-card-acc { display: flex; gap: 6px; flex: 0 0 auto; }
.ia-card-body { padding: 0 16px 14px; }

.ia-item { display: flex; align-items: flex-start; gap: 10px;
           padding: 10px 0; border-top: 1px solid var(--et-line);
           font-size: var(--et-fs-sm); line-height: 1.5; color: var(--et-ink); }
.ia-item:first-child { border-top: 0; }
.ia-item > i { flex: 0 0 18px; margin-top: 3px; text-align: center; color: var(--et-info); }
.ia-item.tipo-riesgo > i    { color: var(--et-danger); }
.ia-item.tipo-pendiente > i { color: var(--et-warning); }
.ia-item.tipo-canal > i     { color: var(--et-danger); }
.ia-item.tipo-logro > i     { color: var(--et-success); }
.ia-item.tipo-sugerencia > i,
.ia-item.tipo-patron > i    { color: var(--et-accent); }

.ia-pie { display: flex; align-items: center; gap: 6px; margin-top: 8px;
          padding-top: 8px; border-top: 1px solid var(--et-line);
          font-size: var(--et-fs-xs); color: var(--et-ink-soft); }
.ia-cargando, .ia-vacio { padding: 12px 0; font-size: var(--et-fs-sm); color: var(--et-ink-soft); }
.ia-error { color: var(--et-danger); }
.ia-error-det { margin-top: 4px; font-size: var(--et-fs-xs); color: var(--et-ink-muted); }

/* ---- Botones con color en .NET 8 ----------------------------------------
   etradie.css define .btn-success, .btn-danger, etc. y MAS ABAJO otra regla
   .btn con fondo neutro y la misma especificidad, que les gana: en .NET 8
   los botones de los modales salian sin color. En webApi2 no pasa (lo
   resuelve su hoja de compatibilidad), por eso se acota a body.intra-module,
   la clase que solo llevan las pantallas de .NET 8. No se toca etradie.css. */
body.intra-module .btn-success { background: var(--et-success); border-color: var(--et-success); color: #fff; }
body.intra-module .btn-danger  { background: var(--et-danger);  border-color: var(--et-danger);  color: #fff; }
body.intra-module .btn-warning { background: var(--et-warning); border-color: var(--et-warning); color: #fff; }
body.intra-module .btn-info    { background: var(--et-info);    border-color: var(--et-info);    color: #fff; }
body.intra-module .btn-success:hover, body.intra-module .btn-danger:hover,
body.intra-module .btn-warning:hover, body.intra-module .btn-info:hover { filter: brightness(.93); color: #fff; }
body.intra-module .btn-secondary { background: var(--et-surface); border-color: var(--et-line); color: var(--et-ink); }
body.intra-module .btn-secondary:hover { background: var(--et-bg); border-color: var(--et-ink-muted); color: var(--et-ink); }
body.intra-module .btn:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .page-hd-actions .et-ayuda-btn { transition: none; }
}