/* ============================================================================
   Agentika 2.0 — agentika.css
   Componentes propios del Centro de Comando, construidos SOBRE el sistema
   visual oficial 4REV (sam.css + console.css). Vanilla CSS, cero frameworks.

   Aquí NO se redefinen componentes que ya provee sam.css (.btn, .card, .chip,
   .field, .eyebrow, .muted...). Sólo lo que es exclusivo de esta consola:
   rail, motores, flota, cuotas, alertas, drawer y consola de streaming.
   ========================================================================== */

:root {
  /* Alias semánticos sobre los tokens corporativos de sam.css */
  --agtk-bg:        #f5f5f7;              /* lienzo Apple/Launchpad */
  --agtk-panel:     var(--blanco, #fff);
  --agtk-linea:     #e5e7eb;
  --agtk-linea-sut: #eef1f5;
  --agtk-ok:        var(--turquesa, #1FA577);
  --agtk-ok-suave:  #e7f3ee;
  --agtk-alerta:    var(--ambar, #E89F1F);
  --agtk-alerta-sut:#fdf4e3;
  --agtk-peligro:   #c0392b;
  --agtk-peligro-sut:#fbeceb;
  --agtk-rail-w:    92px;
  --agtk-drawer-w:  min(470px, 94vw);
  --agtk-ease:      cubic-bezier(.4,.14,.2,1);
}

/* ============================ LOGIN ====================================== */
.brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.brand-dot {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--azul-noche, #0A1F3D); color: #fff;
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
}
.brand-name { font-weight: 650; font-size: 19px; color: var(--texto, #15294a); letter-spacing: -.02em; }
.brand-name span { color: var(--turquesa, #1FA577); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--gris-400, #9CA3AF); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--agtk-linea); }
.sub { color: var(--texto-suave, #5b6b82); font-size: 14px; line-height: 1.5; }

/* ============================ APP SHELL ================================== */
.shell { display: grid; grid-template-columns: var(--agtk-rail-w) 1fr; min-height: 100vh; background: var(--agtk-bg); }

.rail {
  background: var(--agtk-panel); border-right: 1px solid var(--agtk-linea);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0;
  position: sticky; top: 0; height: 100vh;
}
.rail .brand-dot { margin-bottom: 18px; }
.rail-spacer { flex: 1; }

/* El rail-item oficial está pensado para iconos SVG; aquí usamos glifos, así
   que se fuerza tamaño y contraste legibles. */
.rail .rail-item {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 19px; line-height: 1; color: var(--gris-500, #6B7280); text-decoration: none;
  background: transparent; border: 0; transition: .15s var(--agtk-ease); position: relative;
}
.rail .rail-item:hover { background: var(--gris-100, #F3F5F8); color: var(--texto, #15294a); }
.rail .rail-item.activo { color: #0f7a54; background: var(--agtk-ok-suave); }
.rail .rail-item.activo::before {
  content: ""; position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--turquesa, #1FA577);
}

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 30px; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--agtk-linea); position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 17px; font-weight: 650; color: var(--texto, #15294a); letter-spacing: -.02em; }
.topbar .ctx { font-size: 12px; color: var(--gris-400, #9CA3AF); margin-top: 2px; }
.tenant-chip {
  font-size: 12px; font-weight: 600; color: #0f7a54; background: var(--agtk-ok-suave);
  border: 1px solid #cfe9df; border-radius: 999px; padding: 5px 13px;
}
.user-cluster { display: flex; align-items: center; gap: 12px; }
.avatar-user {
  width: 34px; height: 34px; border-radius: 50%; background: var(--turquesa, #1FA577);
  color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600;
}

.canvas { padding: 28px 30px; display: flex; flex-direction: column; gap: 32px; max-width: 1440px; width: 100%; }

/* Encabezado de sección */
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.sec-head h2 { font-size: 15px; font-weight: 650; color: var(--texto, #15294a); letter-spacing: -.01em; }
.sec-head .tag { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-400, #9CA3AF); }
.sec-head .line { flex: 1; height: 1px; background: var(--agtk-linea); }

/* ============================ MOTORES ==================================== */
.motores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.motor-card {
  background: var(--agtk-panel); border: 1px solid var(--agtk-linea); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(10,31,61,.06));
}
.motor-card .row { display: flex; align-items: center; justify-content: space-between; }
.motor-logo { font-weight: 650; font-size: 15px; color: var(--texto, #15294a); }
.motor-meta { font-size: 12.5px; color: var(--texto-suave, #5b6b82); }
.pill { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.pill.on { color: #0f7a54; background: var(--agtk-ok-suave); }
.pill.off { color: var(--gris-500, #6B7280); background: var(--gris-100, #F3F5F8); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================ FLOTA ====================================== */
.flota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.agente-card {
  background: var(--agtk-panel); border: 1px solid var(--agtk-linea); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sh-sm, 0 1px 2px rgba(10,31,61,.06)); transition: .18s var(--agtk-ease);
}
.agente-card:hover { border-color: #cfd6e0; box-shadow: var(--sh-md, 0 6px 18px rgba(10,31,61,.08)); transform: translateY(-2px); }
.agente-top { display: flex; align-items: center; gap: 12px; }
.agente-avatar {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 21px; background: var(--gris-100, #F3F5F8); border: 1px solid var(--agtk-linea);
}
.agente-nombre { font-weight: 650; font-size: 14.5px; color: var(--texto, #15294a); }
.agente-desc { color: var(--texto-suave, #5b6b82); font-size: 13px; min-height: 34px; line-height: 1.45; }
.agente-foot { display: flex; align-items: center; gap: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-dot { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave, #5b6b82); }
.estado-dot .d { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-400, #9CA3AF); }
.estado-activo .d { background: var(--turquesa, #1FA577); }
.estado-pausado .d { background: var(--ambar, #E89F1F); }

.card-nueva {
  border: 1.5px dashed #cfd6e0; box-shadow: none; align-items: center; justify-content: center;
  color: var(--gris-400, #9CA3AF); cursor: pointer; min-height: 156px; font-weight: 600; font-size: 14px;
}
.card-nueva:hover { border-color: var(--turquesa, #1FA577); color: #0f7a54; background: #f6fbf9; transform: none; }

/* ============================ CUOTAS + ALERTAS =========================== */
.dash-abajo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .dash-abajo { grid-template-columns: 1fr; } }

.cuotas-panel, .alertas-panel {
  background: var(--agtk-panel); border: 1px solid var(--agtk-linea); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--sh-sm, 0 1px 2px rgba(10,31,61,.06));
}
.cuota-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.metric { display: flex; flex-direction: column; gap: 5px; }
.metric .k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-400, #9CA3AF); }
.metric .v { font-size: 26px; font-weight: 700; color: var(--texto, #15294a); letter-spacing: -.02em; line-height: 1; }
.metric .v small { font-size: 13px; color: var(--texto-suave, #5b6b82); font-weight: 500; }

.barra { height: 10px; border-radius: 999px; background: var(--gris-100, #F3F5F8); overflow: hidden; border: 1px solid var(--agtk-linea); }
.barra > i { display: block; height: 100%; border-radius: 999px; background: var(--turquesa, #1FA577); transition: width .9s var(--agtk-ease); }
.barra.medio > i { background: var(--ambar, #E89F1F); }
.barra.alto > i { background: var(--agtk-peligro); }
.cuota-leyenda { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12px; color: var(--texto-suave, #5b6b82); }

/* Alertas operativas */
.alertas-lista { display: flex; flex-direction: column; gap: 9px; }
.alerta {
  display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid transparent; font-size: 13px; line-height: 1.4;
}
.alerta .ic { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; }
.alerta strong { display: block; font-weight: 650; }
.alerta small { color: var(--texto-suave, #5b6b82); }
.alerta.info    { background: var(--agtk-ok-suave);      border-color: #cfe9df; }
.alerta.info .ic{ background: var(--turquesa, #1FA577); color: #fff; }
.alerta.aviso   { background: var(--agtk-alerta-sut);    border-color: #f2e0bc; }
.alerta.aviso .ic{ background: var(--ambar, #E89F1F); color: #fff; }
.alerta.critica { background: var(--agtk-peligro-sut);   border-color: #f3cfcb; }
.alerta.critica .ic{ background: var(--agtk-peligro); color: #fff; }

/* ============================ DRAWER ===================================== */
.overlay {
  position: fixed; inset: 0; background: rgba(10,31,61,.34); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: .26s var(--agtk-ease); z-index: 90;
}
.overlay.abierto { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: var(--agtk-drawer-w);
  background: var(--agtk-panel); border-left: 1px solid var(--agtk-linea); z-index: 100;
  transform: translateX(100%); transition: transform .3s var(--agtk-ease);
  display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(10,31,61,.16);
}
.drawer.abierto { transform: translateX(0); }
.drawer-head { padding: 20px 24px; border-bottom: 1px solid var(--agtk-linea-sut); display: flex; align-items: center; justify-content: space-between; }
.drawer-head h3 { font-size: 16px; font-weight: 650; color: var(--texto, #15294a); letter-spacing: -.01em; }
.drawer-head .cerrar {
  background: var(--gris-100, #F3F5F8); border: 1px solid var(--agtk-linea); color: var(--gris-500, #6B7280);
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 16px; line-height: 1;
}
.drawer-head .cerrar:hover { background: var(--gris-200, #E5E7EB); color: var(--texto, #15294a); }
.drawer-body { padding: 22px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.drawer-foot { padding: 16px 24px; border-top: 1px solid var(--agtk-linea-sut); display: flex; gap: 10px; background: var(--gris-50, #F9FAFB); }

/* Campos del drawer */
.campo { display: flex; flex-direction: column; gap: 7px; }
/* Sólo el rótulo directo del campo va en versalitas: las <label class="opcion">
   anidadas conservan la capitalización real del nombre de la skill/dataset. */
.campo > label { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--gris-500, #6B7280); }
.campo input[type=text], .campo textarea, .campo select {
  font: inherit; font-size: 14px; color: var(--texto, #15294a); width: 100%;
  background: #fff; border: 1px solid #d6dbe2; border-radius: 9px; padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--turquesa, #1FA577); box-shadow: 0 0 0 3px rgba(31,165,119,.15);
}
.campo input[type=file] { font-size: 12.5px; color: var(--texto-suave, #5b6b82); }
.opciones { display: flex; flex-direction: column; gap: 7px; max-height: 186px; overflow-y: auto; padding-right: 4px; }
.opcion { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--agtk-linea); border-radius: 9px; cursor: pointer; transition: .14s var(--agtk-ease); }
.opcion:hover { border-color: var(--turquesa, #1FA577); background: #f6fbf9; }
.opcion input { accent-color: var(--turquesa, #1FA577); }
.opcion .txt { font-size: 13.5px; color: var(--texto, #15294a); }
.opcion .txt small { display: block; color: var(--gris-400, #9CA3AF); font-size: 11.5px; }
.rango { display: flex; align-items: center; gap: 12px; }
.rango input[type=range] { flex: 1; accent-color: var(--turquesa, #1FA577); }
.rango .val { font-size: 13px; font-weight: 650; color: #0f7a54; min-width: 34px; text-align: right; }

/* ============================ CONSOLA SSE ================================ */
.consola { display: flex; flex-direction: column; gap: 14px; }
.consola-out {
  min-height: 210px; max-height: 44vh; overflow-y: auto;
  background: var(--gris-50, #F9FAFB); border: 1px solid var(--agtk-linea); border-radius: 10px;
  padding: 15px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  color: var(--texto, #15294a);
}
.cursor { display: inline-block; width: 2px; height: 15px; background: var(--turquesa, #1FA577); vertical-align: text-bottom; animation: agtk-blink 1s steps(1) infinite; }
@keyframes agtk-blink { 50% { opacity: 0; } }
.tool-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 8px 0; padding: 7px 13px;
  border-radius: 999px; background: var(--agtk-ok-suave); border: 1px solid #cfe9df;
  color: #0f7a54; font-size: 12.5px; font-weight: 600;
}
.tool-badge .spin { width: 11px; height: 11px; border: 2px solid #0f7a54; border-top-color: transparent; border-radius: 50%; animation: agtk-spin2 .7s linear infinite; }
@keyframes agtk-spin2 { to { transform: rotate(360deg); } }
.consola-meta { font-size: 11.5px; color: var(--gris-400, #9CA3AF); }

/* ============================ VARIOS ===================================== */
.vacio { color: var(--gris-400, #9CA3AF); font-size: 13px; padding: 22px; text-align: center; border: 1px dashed #d6dbe2; border-radius: 12px; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(18px);
  background: var(--azul-noche, #0A1F3D); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--sh-lg, 0 18px 44px rgba(10,31,61,.16));
  opacity: 0; visibility: hidden; transition: .24s var(--agtk-ease); z-index: 200;
}
.toast.ver { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@keyframes agtk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.canvas > section { animation: agtk-rise .5s var(--agtk-ease) both; }
.canvas > section:nth-child(2) { animation-delay: .06s; }
.canvas > section:nth-child(3) { animation-delay: .12s; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; width: 100%;
          flex-direction: row; justify-content: space-around; border-right: none;
          border-top: 1px solid var(--agtk-linea); z-index: 50; padding: 8px 0; }
  .rail .brand-dot, .rail-spacer { display: none; }
  .canvas { padding: 18px; padding-bottom: 88px; }
}