/* ============================================
   ARKOS - Dédalo Platform Styles
   Migrated from Mockup HTML to Blazor
   ============================================ */

/* Tipografia: system fonts (Segoe UI + fallbacks). Sin dependencias externas de Google Fonts. */

/* CSS Variables */
:root {
  /* Colores corporativos de las 3 empresas pioneras — HOMOLOGAR SIEMPRE con estas variables:
     Dédalo (rojo) = --red · Deckel (verde) = --green · Phicron (azul) = --blue. */
  --red: #C1272D;        /* Dédalo */
  --red-dark: #9B1F24;
  --green: #046707;      /* Deckel */
  --green-dark: #035205;
  --green-bg: rgba(4, 103, 7, 0.10);
  --blue: #0863A3;       /* Phicron */
  --blue-dark: #064e82;
  --blue-bg: rgba(8, 99, 163, 0.10);
  --red-soft: #CD5257;
  --red-bg: rgba(193, 39, 45, 0.08);
  --red-border: rgba(193, 39, 45, 0.25);

  /* Colors - Gray palette */
  --g900: #1A1A1A;
  --g800: #2A2A2A;
  --g700: #3A3A3A;
  --g600: #4D4D4D;
  --g500: #808080;
  --g400: #B3B3B3;
  --g300: #D4D4D4;
  --g200: #E8E8E8;
  --g100: #F5F5F5;
  --g50: #FAFAFA;
  --w: #FFFFFF;

  /* Semantic colors — contraste reforzado (Propuesta UI v2, fase 1) */
  --bg: #F2F4F7;
  --card: #FFFFFF;
  --elev: #F5F6F8;
  --hov: #EDF0F4;
  --line: #E0E3E8;
  --line-s: #C9CED6;
  --text: #1A1A1A;
  --text-dim: #3F4652;
  --text-mute: #667085;
  --pos: #2E7D32;
  --neg: var(--red);
  --warn: #ED6C02;
  --info: #0288D1;
  --purple: #7c3aed;
  --pos-bg: rgba(46, 125, 50, 0.08);
  --warn-bg: rgba(237, 108, 2, 0.08);
  --info-bg: rgba(2, 136, 209, 0.08);
  --purple-bg: rgba(124, 58, 237, 0.08);

  /* Elevación, foco y radios (Propuesta UI v2) */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);
  --ring: 0 0 0 3px rgba(193, 39, 45, 0.15);
  --radius: 8px;
  --radius-lg: 12px;

  /* Sidebar (antes hardcodeado #0F0F0F/#222/#666/#bbb) */
  --sb-bg: #15171C;
  --sb-line: #262A31;
  --sb-text: #C6CBD4;
  --sb-text-dim: #7A8290;

  /* Altura uniforme de los controles del header */
  --ctl-h: 36px;

  /* Layout dimensions */
  --sidebar-w: 240px;
  --header-h: 64px;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--g900);
}

a {
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
}

input, select, textarea {
  font-family: inherit;
  font-size: 13px;
}

/* Foco visible con teclado (accesibilidad) */
:is(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Scrollbars finas */
* { scrollbar-width: thin; scrollbar-color: var(--line-s) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-s); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   APP SHELL LAYOUT
   ============================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100dvh; /* dvh: respeta la barra del navegador móvil */
}

.sidebar {
  grid-area: sidebar;
  background: var(--sb-bg);
  color: var(--w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sb-line);
  overflow: hidden;
}

.header-area {
    height: 64px;
}

.header {
  grid-area: header;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 14px;
  flex-shrink: 0;
  height: 64px;
}

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 20px 24px;
  position: relative;
}
/* Páginas de lienzo completo (2026-08-07): si el main contiene un contenedor full-bleed
   (hoy el chat del agente .ag3; mañana las que hagan falta), pierde el padding y el scroll
   lo maneja la propia página. Patrón: agregar aquí el selector del contenedor. */
.main:has(.ag3) { padding: 0; overflow: hidden; }

.page {
  animation: fade 0.18s;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   SIDEBAR COMPONENTS
   ============================================ */
.brand {
  padding: 14px 18px;
  border-bottom: 1px solid var(--sb-line);
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  /* Marca de la plataforma (logo Arkos). <img> transparente: sidebar oscuro y login blanco. */
  height: 34px;
  width: auto;
  max-width: 42px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--w);
}

.brand-sub {
  font-size: 9px;
  color: var(--sb-text-dim);
  letter-spacing: 0.18em;
  margin-top: 3px;
}

.nav-section {
  padding: 10px 0 6px;
  flex: 1;
  overflow-y: auto;
}

.nav-label {
  font-size: 10px;
  color: var(--sb-text-dim);
  letter-spacing: 0.16em;
  padding: 11px 18px 6px;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px;
  color: var(--sb-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.12s;
  text-align: left;
  width: 100%;
}

/* text-decoration:none — el NavLink es <a> y heredaba el underline global */
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--w);
  text-decoration: none;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(193, 39, 45, 0.15), transparent);
  color: var(--w);
  border-left-color: var(--red);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

.nav-item.active .nav-icon {
  opacity: 1;
}

.nav-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  padding: 1px 7px;
  border-radius: 8px;
  color: var(--sb-text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

.nav-item.active .nav-count {
  background: var(--red);
  color: var(--w);
}

/* Items del menú SIN página creada aún (2026-07-15): visibles pero atenuados y no navegables,
   para ver de un vistazo qué falta por construir. Quitar la clase al crear cada página. */
.nav-item.nav-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* --- Avatares de responsables de proyecto (2026-07-15) --- */
/* Círculo con iniciales (estilo user-avatar del sidebar, tamaño tabla). */
.resp-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red, #C1272D); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  border: 2px solid #fff;
  position: relative;
  flex-shrink: 0;
}
/* Stack encimado tipo "monedas": el 1º (Principal) al frente vía z-index descendente inline. */
.resp-stack { display: inline-flex; align-items: center; }
.resp-stack .resp-avatar + .resp-avatar { margin-left: -9px; }
.resp-avatar.resp-more { background: var(--g500, #8892A3); font-size: 9px; }

.user-block {
  padding: 10px 12px;
  border-top: 1px solid var(--sb-line);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex-shrink: 0;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

/* user-info es un <button> con avatar + texto: SIN display:flex los hijos no se
   acomodaban y el nombre largo se encimaba con el boton de logout. */
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--radius);
  transition: background 0.12s;
  cursor: pointer;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.06);
}

.user-text {
  flex: 1;
  min-width: 0; /* habilita el ellipsis de los hijos */
  line-height: 1.3;
}

.user-name {
  color: var(--w);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  color: var(--sb-text-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   HEADER COMPONENTS
   ============================================ */
.header-title {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--g900);
  letter-spacing: -0.01em;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-title > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 400;
}

.breadcrumb-sep {
  opacity: 0.4;
}

.search-box {
  background: var(--g100);
  border: 1px solid var(--line);
  height: var(--ctl-h); /* misma altura que sus vecinos del header */
  padding: 0 11px;
  border-radius: var(--radius);
  flex: 0 1 280px;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.search-box:focus-within {
  border-color: var(--red);
  box-shadow: var(--ring);
  background: var(--card);
}

.search-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12px;
  min-width: 0;
}

.search-box input::placeholder {
  color: var(--text-mute);
}

.search-box svg {
  opacity: 0.4;
  flex-shrink: 0;
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--w);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 200;
  display: none;
}

.search-results.open {
  display: block;
}

.search-result {
  padding: 10px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-result:hover {
  background: var(--g50);
}

.search-result-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  text-transform: uppercase;
  background: var(--g100);
  padding: 2px 6px;
  border-radius: 3px;
}

.header-btn {
  height: var(--ctl-h);
  padding: 0 13px;
  background: var(--g100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.12s;
  white-space: nowrap;
  cursor: pointer;
}

.header-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.header-btn.primary {
  background: var(--red);
  color: var(--w);
  border-color: var(--red);
}

.header-btn.primary:hover {
  background: var(--red-dark);
  color: var(--w);
}

/* Empresa Selector */
.empresa-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: var(--ctl-h);
  border-radius: var(--radius);
  background: var(--g100);
  border: 1px solid var(--line);
  transition: border-color 0.12s;
  flex-shrink: 0;
}

.empresa-selector:hover {
  border-color: var(--line-s);
}

.empresa-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.empresa-badge.dedalo { color: #3b82f6; background: #3b82f6; }
.empresa-badge.deckel { color: #f59e0b; background: #f59e0b; }
.empresa-badge.phicron { color: #10b981; background: #10b981; }

/* Logotipo de la empresa activa en el navbar (a la izquierda del selector).
   Si una empresa no tiene logo, se sirve el de Arkos (ver Header.razor). */
.empresa-logo {
  height: 24px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}

/* Indicador de empresa en modales */
.empresa-indicator {
  background: var(--g100);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--g700);
  border-left: 3px solid var(--g300);
}

/* Título de sección en formularios de modales */
.form-section-title {
  margin: 18px 0 8px;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--g500);
  border-bottom: 1px solid var(--g200);
  padding-bottom: 6px;
}

.empresa-dropdown {
  border: none;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g700);
  cursor: pointer;
  outline: none;
  min-width: 92px; /* que no se corte el nombre de la empresa */
  padding: 0 16px 0 2px;
  appearance: none;
  -webkit-appearance: none;
  /* chevron propio (appearance:none elimina la flecha nativa) */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 2px center;
}

.header-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 4px;
}

.notif-btn {
  width: var(--ctl-h);
  height: var(--ctl-h);
  border-radius: 50%;
  background: var(--g100);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s;
}

.notif-btn:hover {
  border-color: var(--line-s);
}

.notif-dot {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--card);
}

/* ============================================
   COMMON UI COMPONENTS
   ============================================ */
.row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.grid {
  display: grid;
  gap: 14px;
}

.flex-1 {
  flex: 1;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto; /* tablas anchas scrollean dentro de la card (responsive) */
}

.card-title {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--g900);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 11px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.kpi-label {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.kpi-value {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: var(--g900);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi-sub {
  font-size: 10px;
  color: var(--text-mute);
  margin-top: 5px;
  font-weight: 500;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.04em;
}

.kpi-trend.up {
  background: var(--pos-bg);
  color: var(--pos);
}

.kpi-trend.down {
  background: var(--red-bg);
  color: var(--red);
}

.kpi.highlight {
  background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
  color: var(--w);
  border: none;
}

.kpi.highlight .kpi-label {
  color: #bbb;
}

.kpi.highlight .kpi-value {
  color: var(--w);
}

.kpi.highlight .kpi-sub {
  color: #aaa;
}

.kpi-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--red);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.table thead {
  background: transparent;
}

.table th {
  text-align: left;
  padding: 9px 11px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

/* Alineación de encabezados (2026-07-20): los <th> deben respetar la alineación
   explícita de su columna. Sin esto, `.table th { text-align:left }` (especificidad
   0,1,1) le gana a las utilitarias `.right`/`.center` (0,1,0) y las columnas numéricas
   quedan con la celda alineada pero el encabezado a la izquierda (descuadre en TODAS
   las tablas). `.table th.right` (0,2,1) gana limpio. Cero cambios de markup. */
.table th.right  { text-align: right; }
.table th.center { text-align: center; }
.table th.left   { text-align: left; }

.table td {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}

/* Cursor default por defecto: las filas clickeables declaran cursor:pointer
   inline junto a su @onclick (patron usado en todas las paginas). */
.table tbody tr {
  transition: background 0.1s;
  cursor: default;
}

.table tbody tr:hover {
  background: #F7F8FA;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table .num {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 11.5px;
}

/* num + center (2026-07-20): conserva la tipografía tabular de .num pero alinea al centro
   (conteos, %, divisas). Sin esto, .table .num (0,2,0) ganaba a .center (0,1,0). */
.table .num.center {
  text-align: center;
}

.table .strong {
  font-weight: 600;
  color: var(--g900);
}

.table-compact td {
  padding: 6px 9px;
}

/* Pills/Badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-red {
  background: var(--red-bg);
  color: var(--red);
}

.pill-green {
  background: var(--pos-bg);
  color: var(--pos);
}

.pill-amber {
  background: var(--warn-bg);
  color: var(--warn);
}

.pill-blue {
  background: var(--info-bg);
  color: var(--info);
}

.pill-gray {
  background: var(--g100);
  color: var(--text-dim);
}

.pill-dark {
  background: var(--g900);
  color: var(--w);
}

.pill-purple {
  background: var(--purple-bg);
  color: var(--purple);
}

/* Buttons — sin mayúsculas forzadas (Propuesta UI v2) */
.btn {
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s;
  border: 1px solid transparent;
  background: var(--g100);
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  background: var(--g200);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--red);
  color: var(--w);
}

.btn-primary:hover {
  background: var(--red-dark);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-dim);
}

.btn-ghost:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Botón secundario gris oscuro (2026-07-20): acciones alternativas como "Replicar cotización". */
.btn-secondary {
  background: #4b5563;
  color: #fff;
}

/* Botón verde sólido (verde Deckel = --green). Acciones de guardar/confirmar/descargar (Excel). */
.btn-deckel {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-deckel:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

/* Botón verde OUTLINE (Deckel), menos llamativo que el sólido. P. ej. "Descargar cotización Excel"
   junto a "Ver cotización PDF". Homologado con la tarjeta "Descargar definiciones" (2026-07-30). */
.btn-outline-deckel {
  background: #fff;
  color: var(--text);            /* letras negras, como la tarjeta "Descargar definiciones" */
  border-color: var(--green);
}
.btn-outline-deckel:hover:not(:disabled) {
  background: var(--green-bg);
  border-color: var(--green-dark);
  color: var(--text);
}
.btn-outline-deckel:disabled { opacity: .5; cursor: not-allowed; }

/* Botón azul sólido (azul Phicron = --blue). P. ej. "Descargar RFQs". */
.btn-phicron {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-phicron:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}
.btn-phicron:disabled { background: var(--blue); border-color: var(--blue); opacity: .5; }

/* Botón de icono en ROJO Dédalo (2026-07-29): resalta "Prorratear envío" en Análisis proveedores. */
/* Especificidad .btn-icon.btn-icon-envio para ganarle al .btn-icon definido más abajo en el archivo. */
.btn-icon.btn-icon-envio {
  background: var(--red, #C1272D);
  color: #fff;
  border-color: var(--red, #C1272D);
}
.btn-icon.btn-icon-envio:hover { background: var(--red-dark, #a01f24); color: #fff; border-color: var(--red-dark, #a01f24); }
.btn-icon.btn-icon-envio.btn-icon-disabled,
.btn-icon.btn-icon-envio:disabled {
  background: var(--card); color: var(--text-mute); border-color: var(--line);
}
/* Divisa de envío en las tablas de prorrateo: SIEMPRE en negrita (para resaltar sobre la de bienes);
   NARANJA (#ed5f0d) si difiere de la divisa a la que se prorrateará (se homologará al prorratear).
   Especificidad .table td.* para ganarle a `.table td { color: var(--text) }`. */
.table td.envio-div { font-weight: 700; }
.table td.envio-div-warn { color: #ed5f0d; font-weight: 700; }

/* Caja de info al lado del dropdown "Responsable" cuando el proyecto no tiene responsables con acceso. */
.resp-hint {
  display: flex; gap: 8px; align-items: flex-start;
  background: #eef4fb; border: 1px solid #cfe0f3; border-left: 3px solid #0863a3;
  border-radius: 6px; padding: 8px 11px; font-size: 12px; color: #2c4a63; line-height: 1.4;
}
.resp-hint i { color: #0863a3; font-size: 14px; margin-top: 1px; }

/* ===== Tabla "Detalles de items": 3 grupos de color (Especificación / Costos / Venta y utilidad) ===== */
.det-table { font-variant-numeric: tabular-nums; }
/* Fila de grupos (aquí vive la combinación de colores) */
.det-table thead tr.det-grp th { padding: 9px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid; text-align: left; }
.det-grp th.g1 { background: #f1f5f9; color: #334155; border-color: #94a3b8; }
.det-grp th.g2 { background: #fbeeee; color: #c1272d; border-color: #c1272d; }
.det-grp th.g3 { background: #eaf6ee; color: var(--green); border-color: var(--green); }
/* Fila de columnas: tinte suave por grupo */
.det-table thead tr.det-cols th.g1 { background: #fafbfc; }
.det-table thead tr.det-cols th.g2 { background: #fffbfb; }
.det-table thead tr.det-cols th.g3 { background: #fbfefc; }
/* Celdas del cuerpo: tinte casi imperceptible por grupo */
.det-table td.g1 { background: #fafbfc; }
.det-table td.g2 { background: #fffbfb; }
.det-table td.g3 { background: #fbfefc; }
.det-table tbody tr:hover td { background: #f6f8fa; }
.det-table td.costo-total { color: var(--red); font-weight: 650; }
.det-table td.utilidad { color: var(--green); font-weight: 650; }
.det-table td.neg { color: var(--red); font-weight: 650; }
/* Divisa tenue junto a los importes (mismo criterio que la del envío) */
.det-div { color: var(--text-mute); font-size: 11px; margin-left: 3px; font-weight: 400; }
/* Pastilla de margen: verde alta ≥38% · ámbar media 30-37% · rojo baja <30% */
.det-margen { display: inline-block; min-width: 50px; text-align: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.det-margen-alta { background: #e2f5e9; color: var(--green); }
.det-margen-media { background: #fdf3e0; color: #9a6a12; }
.det-margen-baja { background: #fbeaea; color: var(--red); }
/* Chip de entrega */
.det-chip { display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; color: var(--text-dim); background: #fff; white-space: nowrap; }
.det-chip-na { border-style: dashed; font-style: italic; font-weight: 500; }
/* Pie de totales con color por grupo */
.det-table tfoot td { border-top: 2px solid var(--line); font-weight: 700; }
.det-table tfoot td.g1 { background: #f1f5f9; }
.det-table tfoot td.g2 { background: #fbeeee; color: var(--red); }
.det-table tfoot td.g3 { background: #eaf6ee; color: var(--green); }
/* Leyenda de los grupos */
.det-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 18px 8px 18px; font-size: 11px; color: var(--text-dim); }
.det-legend span { display: inline-flex; align-items: center; gap: 6px; }
.det-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Alineación del contador con los dropdowns de filtro */
.det-toolbar .det-count { align-self: flex-end; height: 34px; display: flex; align-items: center; font-size: 12.5px; }

/* ===== Resumen de totales por divisa (Datos generales + tope de Items) ===== */
.cot-resumen-table { width: 100%; border-collapse: collapse; font-size: 12px; }
/* Sin líneas entre las filas de costo; solo el subrayado del encabezado y la línea antes de "Importe de venta". */
.cot-resumen-table th, .cot-resumen-table td { padding: 5px 8px; }
.cot-resumen-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border-bottom: 1.5px solid var(--line); }
.cot-resumen-table td.r, .cot-resumen-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.cot-resumen-table td:first-child { color: var(--text-dim); }
.cot-resumen-table tr.cot-resumen-tot td { font-weight: 700; color: var(--text); }
.cot-resumen-table tr.cot-resumen-venta td { font-weight: 700; border-top: 1.5px solid var(--line); }
.cot-resumen-foot { display: flex; align-items: center; gap: 8px; padding: 10px 8px 3px; }
.cot-resumen-mlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.cot-resumen-mval { margin-left: auto; font-size: 15px; font-weight: 800; }
.cot-sem { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cot-sem.sem-ok { background: var(--green); }   .cot-resumen-mval.sem-ok { color: var(--green); }
.cot-sem.sem-warn { background: #ed5f0d; }        .cot-resumen-mval.sem-warn { color: #ed5f0d; }
.cot-sem.sem-bad { background: var(--red); }      .cot-resumen-mval.sem-bad { color: var(--red); }
.cot-resumen-tc { font-size: 10.5px; color: var(--text-mute); padding: 0 8px 4px; }
/* Caja del resumen en el tope del panel de Items */
.cot-items-resumen { max-width: 560px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* Panel de Items en 2 columnas: izq (contador + filtros + botones) | der (recuadro de resumen). */
.cot-items-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.cot-items-left { flex: 1 1 360px; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.cot-items-right { flex: 0 0 auto; width: 380px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
/* Pill del total de items */
.cot-items-count { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: 12.5px; }
.cot-items-count i { color: var(--red); font-size: 15px; }
.cot-items-count b { color: var(--text); }

/* ===== Modal "¿Qué quieres crear?" (cards, basado en el mockup) ===== */
.nuevo-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nuevo-card { display: flex; gap: 11px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: all .12s; }
.nuevo-card:hover { border-color: var(--red); background: var(--red-bg); }
.nuevo-card-icon { font-size: 21px; line-height: 1; color: var(--red); }

/* Botones de acción de la sección Items como TARJETAS (mismo lenguaje visual que el modal "Nuevo"),
   sin fondo de color pero conservando los íconos (simbólicamente coloreados). */
.item-action-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.item-action-card { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); text-align: left; transition: all .12s; }
.item-action-card:hover:not(:disabled) { border-color: var(--red); background: var(--red-bg); }
/* Hover por color de acción, homologado con el color del ícono de cada tarjeta (2026-07-30):
   Mostrar detalles / Agregar item = rojo Dédalo (default); Descargar definiciones = verde Deckel;
   Descargar RFQs = azul Phicron. */
.item-action-card.iac-green:hover:not(:disabled) { border-color: var(--green); background: var(--green-bg); }
.item-action-card.iac-blue:hover:not(:disabled)  { border-color: var(--blue);  background: var(--blue-bg); }
.item-action-card:disabled { opacity: .45; cursor: not-allowed; }
.item-action-card i { font-size: 16px; flex-shrink: 0; }

/* Input + botón (alta rápida): dropdown de proveedor con un "+" al lado (2026-07-30). */
.input-with-btn { display: flex; gap: 6px; align-items: stretch; }
.input-with-btn .input { flex: 1; min-width: 0; }
.input-add-btn {
  flex-shrink: 0; width: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--g100, #f1f2f4); color: var(--text-mute);
  cursor: pointer; font-size: 15px; transition: all .12s;
}
.input-add-btn:hover:not(:disabled) { background: var(--g200, #e4e6e9); color: var(--text); border-color: var(--g300, #cfd3d8); }
.input-add-btn:disabled { opacity: .45; cursor: not-allowed; }
.nuevo-card-title { font-weight: 600; font-size: 13px; color: var(--red); margin-bottom: 3px; }
.nuevo-card-desc { font-size: 11px; color: var(--text-mute); }
.nuevo-card.soon { cursor: default; opacity: .6; }
.nuevo-card.soon:hover { border-color: var(--line); background: #fff; }
@media (max-width: 560px) { .nuevo-menu-grid { grid-template-columns: 1fr; } }

.btn-secondary:hover {
  background: #374151;
}

/* --- Réplica de cotizaciones (2026-07-20, ReplicarCotizacionModal) --- */
.modal-lg.repl-modal { min-height: 85dvh; max-height: 85dvh; }
.repl-seccion { margin: 20px 0; }
.repl-info { background: var(--g100); border-radius: var(--radius); padding: 12px 16px; margin-top: 12px; }
.repl-info-top { display: flex; gap: 22px; align-items: center; }
.repl-info-items { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 22px; border-right: 1px solid var(--line); }
.repl-info-datos { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px 20px; flex: 1; }
.repl-info-item { display: flex; flex-direction: column; gap: 2px; }
.repl-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
.repl-info-value { font-size: 13px; font-weight: 600; }
.repl-num { font-size: 34px; font-weight: 700; line-height: 1; color: var(--red); }
.repl-totales { margin-top: 12px; }
.repl-divisa { font-size: 10px; color: var(--text-mute); }
.repl-warn { display: flex; gap: 8px; align-items: flex-start; background: #FFF4E5; border: 1px solid #ED6C02; color: #8a4b00; border-radius: var(--radius); padding: 8px 12px; font-size: 12px; margin-top: 10px; }
.repl-items-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.repl-success { text-align: center; padding: 18px 8px 10px; }
.repl-success-icon { font-size: 44px; color: #0AAD2C; }
.btn-spinner { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: repl-spin .7s linear infinite; }
@keyframes repl-spin { to { transform: rotate(360deg); } }

/* Loader de progreso de réplica (2026-07-21): barra animada + pasos, para dar sensación de trabajo. */
.repl-progress { text-align: center; padding: 28px 12px 18px; }
.repl-progress-icon {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 27px; color: #fff;
  background: linear-gradient(135deg, var(--red, #C1272D), #CD5257);
  box-shadow: 0 6px 18px rgba(193,39,45,.35); animation: repl-pulse 1.4s ease-in-out infinite;
}
@keyframes repl-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(193,39,45,.35); }
  50% { transform: scale(1.07); box-shadow: 0 9px 28px rgba(193,39,45,.5); }
}
.repl-progress h3 { margin: 0 0 4px; }
.repl-progress-track {
  height: 10px; border-radius: 999px; background: var(--g100, #f0f0f0); overflow: hidden;
  margin: 18px auto 10px; max-width: 430px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.repl-progress-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--red, #C1272D), #CD5257, var(--red, #C1272D));
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  animation: repl-shimmer 1.6s linear infinite;
}
@keyframes repl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.repl-progress-step { font-size: 12.5px; color: var(--text-mute); margin: 6px 0 0; min-height: 18px; }
.repl-progress-pct { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 700; font-size: 13px; color: var(--red, #C1272D); }

/* Botones deshabilitados (genérico para todos los .btn). */
.btn:disabled,
.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  padding: 5px 11px;
  font-size: 12px;
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
}

.btn-danger:hover {
  background: var(--red);
  color: var(--w);
}

.btn-success {
  background: var(--pos-bg);
  color: var(--pos);
}

.btn-success:hover {
  background: var(--pos);
  color: var(--w);
}

/* Form Inputs */
.input {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--w);
  width: 100%;
  font-size: 12.5px;
  transition: border 0.12s, box-shadow 0.12s;
  color: var(--text);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

.input::placeholder {
  color: var(--text-mute);
}

.input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: var(--ring);
}

.input:disabled {
  background: var(--g100);
  cursor: not-allowed;
}
.input-sm { padding: 5px 9px; font-size: 12px; }
}

.input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}

.input.warn {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px var(--warn-bg);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.input-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.input-error {
  font-size: 10px;
  color: var(--red);
  margin-top: 3px;
  font-weight: 500;
}

.input-warn {
  font-size: 10px;
  color: var(--warn);
  margin-top: 3px;
  font-weight: 500;
}

textarea.input {
  min-height: 60px;
  resize: vertical;
}

/* Barra de filtros de las páginas de lista: transparente sobre el fondo de la
   app (sin card blanca), como en la propuesta de UI v2. */
.filters-bar {
  margin-bottom: 14px;
}

/* ============================================
   LOADER DE NAVEGACIÓN (hoja de papel volteando)
   Cubre header + main pero NO el sidebar. Lo muestra/oculta
   __arkosPageLoader (App.razor) en las navegaciones entre páginas.
   ============================================ */
.page-loader {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 900; /* debajo de los modales (1000) */
  background: rgba(242, 244, 247, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
}

.page-loader.active {
  display: flex;
  /* Anti-parpadeo en el CSS (no en JS): el delay de 100ms + oth deja la
     opacidad en 0 durante esos 100ms. Si la navegacion mejorada termina en
     <100ms (tipico en localhost), el loader se quita antes de verse. Antes esto
     era un setTimeout(120ms) en JS, pero enhancedload disparaba hide() antes de
     que el timer corriera -> el loader nunca aparecia. */
  animation: fadeIn 0.16s ease-out both;
}

.loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* La "hoja": carta blanca con banda roja y líneas de texto, girando como
   una página que se dobla/desdobla. */
.loader-sheet {
  width: 44px;
  height: 56px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: sheetFold 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

.loader-sheet-band {
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--red-dark));
}

.loader-sheet-line {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

.loader-sheet-line.short {
  width: 60%;
}

@keyframes sheetFold {
  0%   { transform: perspective(280px) rotateY(0deg); }
  50%  { transform: perspective(280px) rotateY(-180deg); }
  100% { transform: perspective(280px) rotateY(-360deg); }
}

.loader-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* El loader sigue al sidebar en sus estados responsive */
@media (max-width: 1024px) {
  .page-loader { left: 64px; }
}

@media (max-width: 768px) {
  .page-loader { left: 0; }
}

/* Page Headers */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--g900);
  letter-spacing: -0.02em;
}

.page-sub {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 3px;
  font-weight: 500;
}

.page-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
}

.tab {
  padding: 9px 15px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Pestaña deshabilitada (wizard de creación: solo "Datos" activa hasta crear el proyecto). */
.tab:disabled,
.tab[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--text-mute);
}
.tab:disabled:hover,
.tab[disabled]:hover {
  color: var(--text-mute);
}

/* Pista del wizard bajo las pestañas del modal de proyecto nuevo. */
.wizard-hint {
  margin: 10px 2px 0;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: #f5f7f0;
  border-left: 3px solid var(--green);
  border-radius: 4px;
}

/* Section Headers */
.section-h {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g700);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* Hints/Alerts */
.hint {
  padding: 10px 14px;
  background: var(--info-bg);
  border-left: 3px solid var(--info);
  font-size: 11.5px;
  color: var(--g700);
  border-radius: 4px;
  margin-bottom: 14px;
  line-height: 1.55;
}

.hint b {
  color: var(--info);
}

.hint.warn {
  background: var(--warn-bg);
  border-left-color: var(--warn);
}

.hint.warn b {
  color: var(--warn);
}

.hint.success {
  background: var(--pos-bg);
  border-left-color: var(--pos);
}

.hint.success b {
  color: var(--pos);
}

.hint.error {
  background: var(--red-bg);
  border-left-color: var(--red);
}

.hint.error b {
  color: var(--red);
}

/* Utility Classes */
.muted {
  color: var(--text-mute);
}

.mono {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

.bold {
  font-weight: 600;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}

.empty {
  padding: 32px;
  text-align: center;
  color: var(--text-mute);
  font-size: 12px;
}

.empty svg {
  opacity: 0.3;
  margin-bottom: 9px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--g300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--g500);
}

.sidebar ::-webkit-scrollbar-thumb {
  background: #454B5B; /* 2026-08-07: más visible sobre el fondo oscuro del menú */
}
.sidebar, .sidebar * { scrollbar-color: #454B5B transparent; } /* Firefox */

/* Avatar */
.avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g300);
  color: var(--g700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar-md {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-admin {
  background: var(--red);
  color: var(--w);
}

.role-pm-sr {
  background: var(--purple);
  color: var(--w);
}

.role-pm {
  background: var(--info);
  color: var(--w);
}

.role-ld {
  background: #0D8B7E;
  color: var(--w);
}

.role-admin-staff {
  background: var(--g700);
  color: var(--w);
}

.role-ops {
  background: #888;
  color: var(--w);
}

.role-client {
  background: var(--warn);
  color: var(--w);
}

.role-provider {
  background: #7B5530;
  color: var(--w);
}

/* Form Layouts */
.form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.form-2col .full,
.form-3col .full {
  grid-column: 1/-1;
}

/* Checkbox grid (asignación N:N de marcas en el modal de proveedor) */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px;
  margin-top: 4px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--w);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}

.check-item:hover {
  border-color: var(--g300);
  background: var(--g50);
}

.check-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--red);
  cursor: pointer;
  flex-shrink: 0;
}

.check-item:has(input:checked) {
  border-color: var(--red);
  background: var(--red-bg);
}

/* Blazor Error UI Override */
/* Banner de error de Blazor (#blazor-error-ui en App.razor y MainLayout): oculto por defecto.
   blazor.web.js le pone display:block cuando el circuito falla de verdad. Sin esta regla el
   banner aparecía SIEMPRE al fondo de todas las páginas (el bundle scoped Arkos.Web.styles.css
   que lo ocultaba en MainLayout no está vinculado en App.razor). */
#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 3000;
  background: #b32121; color: #fff; padding: 10px 16px; font-size: 13px;
}
#blazor-error-ui a { color: #fff; font-weight: 700; margin-left: 8px; }

.blazor-error-boundary {
  background: var(--red);
  color: white;
  padding: 1rem 1rem 1rem 3.7rem;
  border-radius: 8px;
  margin: 20px 0;
}

.blazor-error-boundary::after {
  content: "Ha ocurrido un error en la aplicación.";
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* Validation Messages */
.validation-message {
  color: var(--red);
  font-size: 10px;
  margin-top: 3px;
  font-weight: 500;
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid var(--pos);
}

.invalid {
  outline: 1px solid var(--red);
}

/* Responsive — Propuesta UI v2 (Fases 1 y 2) */

/* Hamburguesa: oculta en escritorio, visible solo en el drawer móvil */
.menu-toggle {
  display: none;
}

@media (max-width: 1280px) {
  .search-box {
    flex: 1 1 140px;
  }

  .breadcrumb {
    display: none;
  }
}

/* ≤1024px: sidebar colapsa a rail de iconos (los title de los NavLink hacen de tooltip) */
@media (max-width: 1024px) {
  .app {
    grid-template-columns: 64px 1fr;
  }

  .sidebar .brand-text,
  .sidebar .nav-text,
  .sidebar .nav-count,
  .sidebar .nav-label,
  .sidebar .user-text {
    display: none;
  }

  .brand {
    justify-content: center;
    padding: 14px 8px;
  }

  .nav-item {
    justify-content: center;
    padding: 9px 0;
  }

  .user-block {
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
  }

  .user-info {
    padding: 4px;
  }
}

/* ≤768px: sidebar off-canvas con hamburguesa (antes: display:none = sin navegación) */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    z-index: 1500;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }

  .app.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* dentro del drawer se ven las etiquetas completas otra vez */
  .sidebar .brand-text,
  .sidebar .nav-text,
  .sidebar .nav-label,
  .sidebar .user-text {
    display: block;
  }

  .sidebar .nav-count {
    display: inline-flex;
  }

  .brand {
    justify-content: flex-start;
    padding: 14px 18px;
  }

  .nav-item {
    justify-content: flex-start;
    padding: 7px 18px;
  }

  .user-block {
    flex-direction: row;
    gap: 6px;
    padding: 10px 12px;
  }

  /* overlay oscuro detrás del drawer (clic fuera lo cierra, ver __arkosSidebarDrawer) */
  .app.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1400;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-h);
    height: var(--ctl-h);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--g100);
    color: var(--text-dim);
    flex-shrink: 0;
    cursor: pointer;
  }

  .empresa-selector .empresa-dropdown {
    display: none; /* en móvil solo el logo de la empresa */
  }

  .header {
    padding: 0 14px;
    gap: 10px;
  }

  .main {
    padding: 14px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal,
  .modal-lg {
    width: 100dvw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .modal-lg.cot-modal {
    min-height: 100dvh;
    max-height: 100dvh;
  }

  .form-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 25, 0.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.15s;
}

.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 95%;
  max-width: 680px;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md), 0 20px 60px rgba(0, 0, 0, 0.18);
  animation: slideUp 0.18s;
  overflow: hidden; /* los hijos con fondo (p.ej. header del editor de item) no tapan las esquinas redondeadas */
}

/* Tamaños de modal: soporta .modal.lg (legacy) y las clases modal-md/lg/xl
   usadas en el markup (class="modal modal-lg"). Evita scroll horizontal en tablas. */
.modal-sm { max-width: 520px; }
.modal-md { max-width: 780px; }
.modal.lg, .modal-lg { max-width: 1100px; }
.modal-xl { max-width: 1320px; }

/* Overlay apilado: editor de item abre como modal SEPARADO sobre el de cotizacion.
   z-index mayor que el overlay base (1000) para que quede encima. */
.modal-overlay.layer-2 { z-index: 1100; }

.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-title {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--g900);
  margin-right: auto; /* empuja el extra y el close a la derecha */
}

/* Contenedor de elementos extra en el header del modal (badges, pills) */
.modal-header-extra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Badge de peligro/aviso para el header del modal preview (PDF oficial no disponible) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.badge-danger {
  background: #FDECEC;
  color: #C1272D;
  border: 1px solid #F5C2C2;
}

/* Hint junto a un label para indicar requisito condicional (ej. "requerida para PDF") */
.req-hint {
  font-weight: 400;
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-mute);
}

.modal-sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 3px;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g100);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.12s;
  color: var(--text-mute);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}

/* Fix global (2026-07-15): el close SIEMPRE alineado a la derecha del header.
   `.modal-title{margin-right:auto}` solo funciona si el título es hijo DIRECTO del header;
   varios modales lo envuelven en un <div> (Proyectos, confirmaciones...) y el close quedaba
   pegado al título. margin-left:auto en el close cubre todos los casos. */
.modal-header > .modal-close { margin-left: auto; }
/* Con elementos extra (badges) entre título y close: el extra empuja y el close queda pegado. */
.modal-header > .modal-header-extra { margin-left: auto; }
.modal-header > .modal-header-extra ~ .modal-close { margin-left: 0; }

.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SCORE BARS
   ============================================ */

.score-bar-wrap {
  height: 5px;
  background: var(--g200);
  border-radius: 3px;
  overflow: hidden;
  width: 88px;
  flex-shrink: 0;
}

.score-bar {
  height: 100%;
  background: var(--pos);
  transition: width 0.3s;
  border-radius: 3px;
}

.score-bar.mid {
  background: var(--warn);
}

.score-bar.low {
  background: var(--red);
}

/* ============================================
   AUTH PAGES (Login / Cambio de contraseña)
   Layout centrado con marca ARKOS (sin sidebar/header).
   ============================================ */
.auth-page {
  height: 100vh;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  padding: 34px 32px 30px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.auth-brand .brand-mark {
  height: 40px;
  width: auto;
  max-width: 44px;
}

.auth-brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--g900);
  letter-spacing: 0.04em;
}

.auth-brand-sub {
  font-size: 9px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.auth-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--g900);
  margin-bottom: 4px;
}

.auth-sub {
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 20px;
  line-height: 1.55;
}

.auth-form .input-group {
  margin-bottom: 14px;
}

.auth-form .input {
  font-size: 13px;
  padding: 9px 11px;
}

/* Campo de usuario "bloqueado" (readonly) en el cambio de contraseña forzado:
   apariencia deshabilitada para que no parezca editable, pero SIN disabled=true
   (disabled no se envía en el form y los gestores de contraseñas lo ignoran).
   readonly + autocomplete="username" sí lo reconocen los gestores al guardar. */
.auth-form .input-locked {
  background: var(--g100);
  opacity: 0.65;
  cursor: default;
  color: var(--text-mute);
}
.auth-form .input-locked:focus {
  border-color: var(--line);
  box-shadow: none;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0 16px;
  cursor: pointer;
  user-select: none;
}

.auth-actions {
  margin-top: 4px;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 10px 13px;
  font-size: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-mute);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-links {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
}

.auth-links a {
  color: var(--text-mute);
}

.auth-links a:hover {
  color: var(--red);
  text-decoration: none;
}

/* Alerts del componente StatusMessage de Identity (.alert-danger / .alert-success) */
.auth-card .alert {
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12px;
  margin-bottom: 14px;
  list-style: none;
}

.auth-card .alert-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

/* 2026-08-04 (pedido del usuario): mensajes de éxito en GRIS/NEGRO, no verde. */
.auth-card .alert-success {
  background: #F5F6F8;
  border-color: #D6D9DE;
  color: #1F2430;
}

/* Alertas generales (fuera de .auth-card: modal "Mi perfil", etc.).
   Bootstrap-like: fondo tenue + borde de color + icono implícito vía padding. */
.alert {
  border-radius: 7px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1px solid transparent;
  line-height: 1.45;
  display: block;
}
.alert-success { background: #F5F6F8; color: #1F2430; border-color: #D6D9DE; } /* gris, no verde (2026-08-04) */
.alert-danger { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }
.alert-warning { background: #FFF4E5; color: #8a4b00; border-color: #ED6C02; font-size: 12.5px; line-height: 1.5; }

/* Mensajes de validación de Blazor (.text-danger / role=alert) sin Bootstrap */
.auth-card .text-danger {
  color: var(--red);
  font-size: 10px;
  margin-top: 3px;
  font-weight: 500;
}

.auth-card [role="alert"] {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 14px;
}

.auth-card [role="alert"] ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--red);
}

.auth-card [role="alert"]:empty {
  display: none;
}

/* ============================================
   AMBIENTE NO-PRODUCCIÓN (DESARROLLO / SANDBOX)
   Config del sitio: "Ambiente": { "Nombre": "DESARROLLO"|"SANDBOX", "Color": "#RRGGBB" }.
   El color de la cinta y del badge se aplica INLINE desde ese valor (naranja sandbox / rojo dev).
   Producción NO lleva la sección => nada se muestra. (Compat: "EsSandbox": true = SANDBOX naranja.)
   ============================================ */
.env-ribbon {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red); /* fallback; el color real llega inline */
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 12px;
}
.env-ribbon i { font-size: 13px; line-height: 1; }
/* El shell (.app) mide 100dvh; si hay banner, se le resta su alto para no desbordar. */
.app.has-env-ribbon { height: calc(100dvh - 26px); }

/* Login en ambiente no-productivo: tema oscuro reusando las variables CSS (cascada limpia). */
.auth-nonprod {
  --bg: #14171d;
  --card: #1c2027;
  --w: #23272f;
  --line: #333944;
  --line-s: #3f4652;
  --text: #eef1f5;
  --text-dim: #c7cdd6;
  --text-mute: #8b94a3;
  --g900: #f2f4f7;
  --g100: #2a2f38;
  --g200: #333944;
}
.auth-nonprod .auth-card { box-shadow: 0 10px 44px rgba(0, 0, 0, 0.55); }
.auth-nonprod-badge {
  margin: -6px 0 18px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid currentColor; /* color (naranja/rojo) llega inline vía style */
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.auth-nonprod-badge i { margin-right: 5px; }

/* Elementos del login deshabilitados hasta implementarlos bien (TODOS los entornos). */
.auth-disabled-btn { opacity: 0.45; cursor: not-allowed; }
.auth-link-disabled { color: var(--text-mute); opacity: 0.5; cursor: not-allowed; }

/* ============================================
   BOTÓN DE CERRAR SESIÓN (Sidebar user-block)
   ============================================ */
.user-logout-form {
  margin-left: auto;
}

.user-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.12s;
  flex-shrink: 0; /* nunca lo comprime el nombre largo */
}

.user-logout-btn:hover {
  background: rgba(193, 39, 45, 0.25);
  color: #fff;
}

/* ============================================
   UTILIDADES
   ============================================ */
.hidden { display: none !important; }

/* ============================================
   AUTOCOMPLETADO — quitar el fondo amarillo del navegador
   (Chromium/Edge/Chrome pintan los campos con un amarillo sólido).
   ============================================ */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--w) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ============================================
   TOGGLE MOSTRAR/OCULTAR CONTRASEÑA (icono ojo)
   ============================================ */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 38px; }
.input-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-mute);
  padding: 0;
}
.input-toggle:hover { color: var(--text); background: var(--g100); }
.input-toggle:focus { outline: none; }
.input-toggle .pw-eye { width: 17px; height: 17px; }
.input-toggle.visible { color: var(--red); }

/* Versión general del campo "bloqueado" (readonly) — usada en el modal de perfil,
   fuera de .auth-form donde ya existe la versión específica. */
.input-locked { background: var(--g100); opacity: 0.65; cursor: default; color: var(--text-mute); }
.input-locked:focus { border-color: var(--line); box-shadow: none; }

/* ============================================
   BLOQUE DE USUARIO EN SIDEBAR (ahora .user-info es un <button>)
   ============================================ */
.user-block .user-info {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
}
.user-block .user-info:hover { background: rgba(255, 255, 255, 0.06); }

/* ============================================
   MODAL DE PERFIL DE USUARIO
   ============================================ */
.profile-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.profile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
/* Espaciado vertical entre campos del modal de perfil (input-group no lleva margen por defecto). */
.profile-section .input-group { margin-bottom: 14px; }
.profile-section .input-group:last-child { margin-bottom: 0; }
.profile-actions { margin-top: 4px; display: flex; justify-content: flex-end; }
.profile-divider { height: 1px; background: var(--line); margin: 18px 0; }
.profile-empty { padding: 24px; text-align: center; color: var(--text-mute); font-size: 12px; }
.profile-soon {
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.6;
  background: var(--g100);
  border-radius: 6px;
  padding: 11px 13px;
}
.profile-soon strong { color: var(--text-dim); }
.modal-confirm-text { font-size: 13px; color: var(--text-dim); margin: 0; }


.user-actions-cell { display: flex; gap: 4px; flex-wrap: wrap; }
.user-actions-cell .btn { padding: 3px 8px; font-size: 10px; }
/* ============================================
   TABLA DE PROYECTOS — barra de avance + truncado
   ============================================ */
.avance-cell { display: flex; align-items: center; gap: 8px; }
.avance-pct { font-size: 11px; color: var(--text-mute); min-width: 30px; }

/* Truncado de texto en celdas de tabla (nombres largos de clientes). */
.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ============================================
   COTIZACIONES — tabla items + barra resumen + tabs
   ============================================ */
.cot-table { font-size: 12px; }
/* th con el MISMO padding horizontal que td: si difieren, las columnas numericas
   alineadas a la derecha se ven desfasadas respecto a su encabezado. */
.cot-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 8px; }
.cot-table td { padding: 6px 8px; }

.cot-summary-bar {
  display: flex;
  gap: 0;
  margin-top: 12px;
  background: var(--bg-dark, #1a1a1a);
  border-radius: 8px;
  padding: 10px 14px;
  align-items: center;
}
.cot-summary-item { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.1); }
.cot-summary-item:last-child { border-right: none; }
.cot-summary-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.cot-summary-value { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); font-family: var(--mono, monospace); }

.tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tabs-bar .tab {
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-mute);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .15s;
}
.tabs-bar .tab:hover { color: var(--text); }
.tabs-bar .tab.active { color: var(--red, #C1272D); border-bottom-color: var(--red, #C1272D); font-weight: 600; }
.tabs-bar .tab:disabled,
.tabs-bar .tab[disabled] { cursor: default !important; color: var(--text-mute) !important; opacity: 0.5; }
.tabs-bar .tab:disabled:hover,
.tabs-bar .tab[disabled]:hover { color: var(--text-mute) !important; }

/* Tabla de items de cotizacion: sin cursor pointer en las filas (solo botones lo tienen). */
.cot-table tbody tr { cursor: default; }
.cot-table tbody tr:hover { cursor: default; }

/* ======================================================================
   MODAL DE COTIZACION — layout 2 columnas (Datos generales)
   ====================================================================== */
.cot-datos-2col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
.cot-datos-form { min-width: 0; }
.cot-datos-actions { display: flex; flex-direction: column; gap: 12px; }
.cot-actions-group { display: flex; flex-direction: column; gap: 8px; }
/* Fila que agrupa "Ver cotización PDF" + "Descargar cotización Excel" (2026-07-30). */
.cot-action-pair { display: flex; gap: 8px; }
.cot-action-pair > .cot-action-btn { flex: 1; }
.cot-action-btn { justify-content: flex-start; gap: 8px; text-align: left; padding: 10px 14px; }
.cot-action-section { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.cot-action-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 8px; }
.cot-action-row { display: flex; gap: 8px; align-items: center; }
.cot-action-hint { font-size: 11px; color: var(--text-mute); margin-top: 6px; }
.cot-preview-area {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px;
}

/* Editor WYSIWYG de Condiciones dentro del modal de cotización: media altura (scope; NO tocar
   la clase global .wysiwyg-editor que usan Configuración y Términos de Cliente). */
.cot-condiciones-compact .wysiwyg-editor {
  min-height: 80px;
  max-height: 200px;
}

/* Autocomplete de "Modelo" en el editor de item (prellenado desde histórico, 2026-07-27). */
.modelo-ac {
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: 2px;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto;
}
.modelo-ac-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 7px 10px; background: transparent; border: none; border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.modelo-ac-item:last-child { border-bottom: none; }
.modelo-ac-item:hover { background: var(--bg-2, #f5f5f5); }
.modelo-ac-item.activa { background: #eef3e6; }   /* resaltado por teclado (verde tenue) */
/* Ícono de "autollenado" sobre el campo Modelo (rayo), como el ojo del campo de contraseña. */
.modelo-input-wrap { position: relative; }
.modelo-autofill-icon {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  color: var(--green); font-size: 13px; pointer-events: none;
}
.modelo-ac-cod { font-size: 12.5px; font-weight: 700; color: var(--text); }
.modelo-ac-meta {
  font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Modal de preview de PDF (componente PdfPreviewModal): casi pantalla completa, sin scroll propio */
.pdf-preview-modal {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  min-height: 92vh;
}
.pdf-preview-modal .modal-header,
.pdf-preview-modal .modal-footer {
  flex: 0 0 auto;
}
.pdf-preview-modal-body {
  flex: 1 1 auto;
  padding: 0;
  overflow: hidden;
}
.pdf-preview-modal-body iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 176px);
  border: none;
  overflow: hidden;
}
.pdf-preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 176px);
  color: var(--text-mute);
  font-size: 14px;
}

.cot-mini-resumen {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.cot-mini-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); padding: 9px 12px 3px;
}
.cot-mini-divider { height: 1px; background: var(--line); margin: 2px 0 0; }
.cot-mini-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--text-mute); padding: 6px 12px;
}
.cot-mini-row .strong { color: var(--text); font-weight: 700; font-size: 13px; }
.cot-mini-highlight {
  background: linear-gradient(180deg, var(--pos-bg, rgba(46,125,50,.06)), rgba(46,125,50,.01));
  border-top: 1px solid var(--pos-border, rgba(46,125,50,.2));
  padding: 10px 12px;
}
.cot-mini-highlight .strong { font-size: 16px; }

/* Pill de cotizacion adicional */

/* Altura FIJA del modal de cotizacion: min = max = 92vh para que NO cambie
   al alternar tabs (pedido del usuario 2026-07-05). El espacio sobrante por
   tab se resuelve dentro de cada tab. */
.modal-lg.cot-modal { min-height: 92dvh; max-height: 92dvh; max-width: 1200px; }

/* El body del modal de cotizacion NO scrollea: reparte la altura con flex y
   cada tab scrollea por dentro (la tabla de items, la de proveedores, etc.). */
.cot-modal .modal-body { display: flex; flex-direction: column; overflow: hidden; }
.cot-modal .modal-body > * { flex-shrink: 0; }
.cot-modal .modal-body > .cot-datos-2col { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cot-modal .modal-body > .cot-table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.cot-modal .modal-body > .cot-prov-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cot-modal .cot-prov-wrap > .cot-prov-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }

/* Scroll-y solo en la tabla de items (header fijo + body scrollable) */
.cot-table-scroll {
  overflow: auto; max-height: 52vh; margin-top: 12px;
  border: 1px solid var(--line); border-radius: 6px;
}
.cot-table-scroll table { margin: 0; }
.cot-table-scroll thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--card, #fff);
}

/* Modal de confirmacion: texto centrado */
.modal-confirm-text {
  font-size: 14px; color: var(--text); text-align: center;
  margin: 8px 0; line-height: 1.5;
}

/* Layer 3: modal de confirmacion por encima del modal de item (layer-2) */
.modal-overlay.layer-3 { z-index: 1200; }
.cot-adicional-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  background: #FF9800; color: #fff; font-size: 10px; font-weight: 700;
  margin-left: 4px; vertical-align: middle; line-height: 1;
}

/* Switch / toggle (estilo iOS) para campos booleanos */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc; border-radius: 22px; transition: .3s;
}
.switch-slider:before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: .3s;
}
.switch input:checked + .switch-slider { background: var(--red, #C1272D); }
.switch input:checked + .switch-slider:before { transform: translateX(16px); }
.switch input:disabled + .switch-slider { opacity: 0.5; cursor: default; }

.form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ===== Editor de item inline (modal de cotización) ===== */
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border: 1px solid var(--line); background: var(--card);
  border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text-mute);
  transition: all .15s; margin-left: 4px; padding: 0;
}
.btn-icon:hover { background: var(--hov); color: var(--text); border-color: var(--line-s); }
.btn-icon.danger:hover { color: var(--red, #C1272D); border-color: var(--red, #C1272D); background: var(--red-bg); }
.btn-icon:disabled { opacity: .4; cursor: not-allowed; }
.btn-icon-disabled { opacity: .35 !important; cursor: default !important; }
.item-editor {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  background: transparent; border: none; border-radius: 0; margin: 0;
}
.item-editor-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; background: var(--bg-2, #f5f5f5); border-bottom: 1px solid var(--line);
}
.item-editor-header h4 { margin: 0; font-size: 15px; font-weight: 600; }
.item-editor-body { padding: 16px 18px; flex: 1 1 auto; overflow-y: auto; }
.item-editor-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2, #f5f5f5);
}
/* --- Secciones (fases) del editor de item: más definidas y espaciadas --- */
.item-section { margin-bottom: 20px; }
.item-section:last-child { margin-bottom: 0; }
.item-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim, #4D4D4D); margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.item-section-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red, #C1272D); color: #fff; font-size: 11px; font-weight: 700;
}

/* --- Textarea de Descripción: 80px fijo, sin resize --- */
/* Se usa `textarea.item-textarea` (no solo `.item-textarea`) para ganar en
   especificidad a `textarea.input { resize: vertical }` (línea ~1045); de lo
   contrario esa regla vencía y el textarea seguía siendo redimensionable. */
textarea.item-textarea {
  width: 100%; height: 80px; min-height: 80px; resize: none;
  font-family: inherit; padding: 8px 10px; line-height: 1.4;
}

/* --- Indicador de avance (stepper horizontal, círculos compactos 24px) --- */
.item-stepper {
  display: flex; align-items: flex-start;
  margin-bottom: 24px; padding-bottom: 0px;
  background: var(--card, #fff); border: 0px solid var(--line); border-radius: 8px;
}
.item-stepper .step {
  display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0;
}
.item-stepper .step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-2, #f5f5f5); border: 2px solid var(--line-s, #d4d4d4);
  color: var(--text-mute); transition: all .2s;
}
.item-stepper .step-label {
  font-size: 10.5px; font-weight: 600; color: var(--text-mute); white-space: nowrap; transition: color .2s;
}
.item-stepper .step.current .step-dot {
  background: var(--red, #C1272D); border-color: var(--red, #C1272D); color: #fff;
  box-shadow: 0 0 0 3px var(--red-bg, rgba(193,39,45,.12));
}
.item-stepper .step.current .step-label { color: var(--red, #C1272D); }
.item-stepper .step.done .step-dot { background: var(--pos, #2E7D32); border-color: var(--pos, #2E7D32); color: #fff; }
.item-stepper .step.done .step-label { color: var(--text-dim, #4D4D4D); }
.item-stepper .step-connector {
  flex: 1 1 auto; height: 2px; margin: 11px 8px 0; align-self: flex-start;
  background: var(--line-s, #d4d4d4); border-radius: 2px; transition: background .2s;
}
.item-stepper .step-connector.active { background: var(--pos, #2E7D32); }

/* --- Leyenda de Clave Única (autogenerada) bajo el modelo en el resumen --- */
.sum-clave-unica {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--text-mute);
  font-family: 'JetBrains Mono', Consolas, monospace;
  padding: 4px 0 8px; word-break: break-all;
}
.sum-clave-unica i { font-size: 12px; color: var(--red, #C1272D); }
.item-calc-cell { display: flex; flex-direction: column; gap: 5px; }
.item-calc {
  padding: 7px 10px; background: var(--bg-2, #f5f5f5); border-radius: 6px;
  font-size: 14px; border: 1px solid var(--line);
}
.item-calc.strong { font-weight: 700; color: var(--pos, #2E7D32); }
.item-calc.neg { font-weight: 700; color: var(--red, #C1272D); }

/* Grid de 3 columnas para el editor de item (evita scroll vertical). */
.form-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Normalización de alturas: todos los inputs, selects, textareas y calc al mismo alto. */
.item-editor .input,
.item-editor select.input,
.item-editor textarea.input { min-height: 38px; box-sizing: border-box; }
.item-editor .input-money { min-height: 38px; }
.item-editor .input-money .input { min-height: 38px; }
.item-editor .item-calc { min-height: 38px; display: flex; align-items: center; }
.item-editor .input-prefix, .item-editor .input-suffix { min-height: 38px; }

/* Checkbox "salvo previa venta" alineado con el grid. */
.checkbox-field { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.checkbox-field input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; }
.checkbox-field label { font-size: 13px; cursor: pointer; margin: 0; }

/* Radio group para modo de tiempo de entrega. */
.radio-group { display: flex; gap: 16px; margin-bottom: 8px; }
.radio-group label { display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.radio-group input[type=radio] { cursor: pointer; }

/* Input monetario: prefijo $ + sufijo de divisa (estilo Bootstrap input-group) */
.input-money { display: flex; align-items: stretch; }
.input-money .input { border-radius: 0; flex: 1 1 auto; min-width: 0; }
.input-prefix, .input-suffix {
  display: inline-flex; align-items: center; padding: 0 11px;
  background: var(--bg-2, #f5f5f5); border: 1px solid var(--line);
  font-size: 13px; color: var(--text-mute); white-space: nowrap; user-select: none;
}
.input-prefix { border-radius: 6px 0 0 6px; border-right: none; }
.input-suffix { border-radius: 0 6px 6px 0; border-left: none; font-weight: 600; min-width: 44px; justify-content: center; }
.input-suffix.wide { min-width: 84px; }
/* Sin prefijo (sólo sufijo, ej. porcentaje): redondea la esquina izquierda del input */
.input-money.no-prefix .input { border-radius: 6px 0 0 6px; }
/* ======================================================================
   EDITOR DE ITEM — layout 2 columnas (formulario + Order Summary)
   Rediseño del panel derecho: imagen + tarjeta de resumen compacta.
   ====================================================================== */
.item-editor-2col {
  display: grid;
  grid-template-columns: 2.4fr 0.85fr;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}
/* Modal-xl más alto para reducir scroll vertical */
.modal.modal-xl { max-height: 95vh; }

/* --- Columna izquierda: formulario --- */
.item-form-col {
  padding: 14px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}

/* --- Columna derecha: imagen + tarjeta de resumen --- */
.item-summary-col {
  padding: 12px;
  background: var(--bg-2, #f5f6f8);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-width: 0;
  min-height: 0;
}

/* ===================== ZONA DE IMAGEN ===================== */
.item-image-upload { display: flex; flex-direction: column; gap: 8px; }

/* Contenedor de la preview: tarjeta blanca cuadrada con sombra sutil */
.item-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  overflow: hidden;
}
.item-image-preview {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.item-image-remove { align-self: flex-start; }

/* Dropzone elegante cuando no hay imagen */
.item-image-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 2px dashed var(--line-s, #d4d4d4);
  border-radius: 10px;
  padding: 16px 12px;
  cursor: pointer;
  background: var(--card, #fff);
  aspect-ratio: 1 / 1;
  text-align: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.item-image-dropzone:hover {
  border-color: var(--red, #C1272D);
  background: var(--red-bg, rgba(193, 39, 45, .04));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.item-image-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.item-image-dropzone-icon { font-size: 26px; opacity: .7; line-height: 1; }
.item-image-dropzone-text { font-weight: 600; font-size: 12px; color: var(--text); }
.item-image-dropzone-hint { font-size: 10px; color: var(--text-mute); }
.item-image-error { color: var(--red, #C1272D); font-size: 11px; }

/* ======================================================================
   PÁGINA CONFIGURACIÓN
   ====================================================================== */

/* --- Filas de configuración (toggle + info) --- */
.config-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.config-row:last-child { border-bottom: none; }
.config-row-info { flex: 1 1 auto; min-width: 0; }
.config-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.config-row-desc { font-size: 12px; color: var(--text-mute); margin-top: 3px; line-height: 1.5; }

/* --- Toggle switch (maqueta tema oscuro) --- */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--line-s, #d4d4d4); border-radius: 26px; transition: .25s;
}
.toggle-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--red, #C1272D); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .5; cursor: not-allowed; }

/* --- Hint informativo --- */
.config-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-mute); margin-top: 12px;
  padding: 8px 12px; background: var(--bg-2, #f5f5f5); border-radius: 6px;
}
.config-hint i { color: var(--info, #0288D1); }

/* --- Secciones dentro del card de cotizaciones --- */
.config-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.config-section:last-of-type { border-bottom: none; }
.config-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); margin-bottom: 10px;
}
.config-empresa-select {
  font-weight: 700;
  text-transform: uppercase;
  border: 1.5px solid var(--line);
}
.config-empresa-select:focus {
  border-color: var(--primary, #C1272D);
  box-shadow: 0 0 0 3px rgba(193, 39, 45, .12);
}

/* --- Input hint (texto de ayuda bajo un campo) --- */
.input-hint { font-size: 11px; color: var(--text-mute); margin-top: 5px; line-height: 1.4; }

/* --- Mensaje de guardado exitoso --- */
.config-saved {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #374151; /* gris, no verde (2026-08-04) */
  padding: 10px 14px; margin-top: 12px;
  background: var(--pos-bg, rgba(46,125,50,.10)); border-radius: 6px;
  border: 1px solid rgba(46,125,50,.2);
}

/* --- Editor WYSIWYG (términos y condiciones) --- */
.wysiwyg-toolbar {
  display: flex; gap: 2px; padding: 5px;
  background: var(--bg-2, #f5f5f5); border: 1px solid var(--line); border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.wysiwyg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; padding: 0 7px;
  border: none; background: transparent; cursor: pointer; border-radius: 4px;
  font-size: 13px; color: var(--text-dim, #4D4D4D); transition: all .12s;
}
.wysiwyg-btn:hover { background: #fff; color: var(--text); }
.wysiwyg-btn.active { background: var(--red-bg, rgba(193,39,45,.10)); color: var(--red, #C1272D); }
.wysiwyg-editor {
  min-height: 160px; max-height: 360px; overflow-y: auto;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  font-size: 13.5px; line-height: 1.6; color: var(--text);
  background: var(--card, #fff); outline: none;
}
.wysiwyg-editor:focus { border-color: var(--red, #C1272D); box-shadow: 0 0 0 2px var(--red-bg, rgba(193,39,45,.12)); }
.wysiwyg-editor:empty::before {
  content: "Escribe aquí los términos y condiciones…"; color: var(--text-mute);
}
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: 6px 0 6px 20px; padding: 0; }
.wysiwyg-editor p { margin: 0 0 8px; }
/* Modo deshabilitado (p.ej. cotización bloqueada): texto atenuado + fondo gris, sin interacción */
.wysiwyg-disabled .wysiwyg-editor {
  color: var(--text-mute);
  background: var(--bg-2, #f5f5f5);
  pointer-events: none;
}

/* --- Campo de margen con botón "Ideal" (editor de item) --- */
.margen-field { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.margen-field .input-money { flex: 1 1 120px; }

/* Fila superior de la sección Venta: Tiempo de entrega (col-4) | Margen bruto + botones (col-8). */
.item-venta-top {
  display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: start;
}
/* Botón de info (i) junto a la etiqueta "Margen bruto". */
.margen-info-btn {
  float: right; font-size: 16px; margin-bottom: 4px;
  border: none; background: transparent; color: #0863a3; cursor: pointer;
  padding: 0 0 0 4px; line-height: 1;
}
.margen-info-btn:hover { color: #064e82; }
.btn-ideal {
  flex-shrink: 0; padding: 0 12px; font-size: 12px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.btn-ideal i { font-size: 13px; }

/* Botón extra-pequeño (usado por "Quitar imagen") */
.btn-xs { padding: 3px 9px; font-size: 11px; }
/* ===================== TARJETA DE RESUMEN (Order Summary) ===================== */
.item-summary-card {
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Header: modelo (negrita) + cantidad/unidad (tenue) */
.sum-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.sum-head-modelo {
  font-weight: 700; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sum-head-cant { font-size: 11px; font-weight: 600; color: var(--text-mute); white-space: nowrap; flex-shrink: 0; }

/* Etiqueta de sección (Costos / Venta) */
.sum-section-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  padding: 9px 12px 3px;
}

/* Divisor entre secciones */
.sum-divider { height: 1px; background: var(--line); margin: 2px 0 0; }

/* --- Filas de cálculo: label izquierda / valor derecha ---
   Override del base .item-calc-cell (columna) y .item-calc (caja) para un
   look limpio tipo "Subtotal ... $1,200.00" del checkout. */
.item-summary-card .item-calc-cell {
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px;
  padding: 4px 12px;
}
.item-summary-card .item-calc-cell .input-label {
  flex: 1 1 auto; min-width: 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-summary-card .item-calc {
  flex-shrink: 0;
  display: block;
  min-height: 0; padding: 0; background: none; border: none; border-radius: 0;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text); text-align: right; white-space: nowrap;
}
.item-summary-card .item-calc.strong { font-weight: 700; color: var(--text); }
.item-summary-card .item-calc.neg { font-weight: 700; color: var(--red, #C1272D); }

/* --- Utilidad bruta destacada (footer de la tarjeta, tipo "Total") --- */
.item-summary-card .item-calc-cell.item-calc-highlight {
  margin-top: auto;
  padding: 11px 12px 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--pos-bg, rgba(46, 125, 50, .08)), rgba(46, 125, 50, .02));
  align-items: center;
}
.item-summary-card .item-calc-cell.item-calc-highlight .input-label {
  font-size: 12px; font-weight: 700; color: var(--text-dim, #4D4D4D);
}
.item-summary-card .item-calc-cell.item-calc-highlight .item-calc { font-size: 17px; font-weight: 700; }
.item-summary-card .item-calc-cell.item-calc-highlight .item-calc.strong { color: var(--pos, #2E7D32); }
.item-summary-card .item-calc-cell.item-calc-highlight .item-calc.neg { color: var(--red, #C1272D); }
/* Utilidad negativa → fondo rojo tenue */
.item-summary-card .item-calc-cell.item-calc-highlight:has(.item-calc.neg) {
  background: linear-gradient(180deg, var(--red-bg, rgba(193, 39, 45, .08)), rgba(193, 39, 45, .02));
  border-top-color: var(--red-border, rgba(193, 39, 45, .25));
}

/* ============================================================
   COTIZACIONES — Tab Items: toolbar de filtros + acciones
   ============================================================ */
.cot-items-toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cot-items-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cot-items-filters .input-group { min-width: 150px; margin: 0; }
.cot-items-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   COTIZACIONES — Tab Analisis de proveedores
   ============================================================ */
.cot-prov-wrap { display: flex; flex-direction: column; gap: 10px; }
.cot-prov-summary {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--text-dim);
}
.cot-prov-warn { color: var(--warn, #ED6C02); font-weight: 600; font-size: 11.5px; }
.cot-prov-scroll { overflow: auto; max-height: 52vh; border: 1px solid var(--line); border-radius: 6px; }
.cot-prov-table { font-size: 12px; }
/* th con el MISMO padding horizontal que td (ver nota en .cot-table th). */
.cot-prov-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 8px; }
.cot-prov-table td { padding: 7px 8px; }
.cot-prov-legend { font-size: 11px; color: var(--text-mute); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Pasos de progreso por proveedor (RFQ / Cot. / OC) */
.prov-step {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; margin-right: 3px;
  letter-spacing: .03em; line-height: 1.4;
}
.prov-step.pending { background: var(--g100); color: var(--text-mute); border: 1px solid var(--line); }
.prov-step.done { background: var(--pos-bg, rgba(46,125,50,.1)); color: var(--pos, #2E7D32); border: 1px solid rgba(46,125,50,.3); }
/* ============================================================
   COTIZACIONES - Columna ETAPA de la tabla de items
   Indica en que fase esta el item: Esp. (naranja), Costo (amarillo),
   Venta (verde claro) o Completo (verde solido con check).
   ============================================================ */
.etapa-pill {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; letter-spacing: .03em;
  line-height: 1.4; white-space: nowrap; border: 1px solid transparent;
}
.etapa-pill.etapa-esp    { background: rgba(237,108,2,.12);  color: #ED6C02; border-color: rgba(237,108,2,.30); }
.etapa-pill.etapa-costo  { background: rgba(255,184,0,.14);  color: #B7791F; border-color: rgba(255,184,0,.32); }
.etapa-pill.etapa-venta  { background: var(--green-bg);      color: var(--green); border-color: rgba(4,103,7,.28); }
.etapa-pill.etapa-done   { background: var(--green);         color: #fff;    border-color: var(--green); }

.empresa-logo-thumb { width: 120px; height: auto; max-height: 50px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; }
.emp-logo-upload { margin-bottom: 18px; }
.emp-logo-preview-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.emp-logo-preview { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 3px; background: #fff; }
.emp-logo-remove { align-self: flex-start; }
.emp-logo-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 110px; border: 2px dashed var(--line); border-radius: 6px; background: var(--g100, #f6f6f7); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.emp-logo-dropzone:hover { border-color: var(--red, #C1272D); background: var(--red-bg, rgba(193, 39, 45, .04)); }
.emp-logo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.emp-logo-dropzone-icon { font-size: 26px; opacity: .7; line-height: 1; }
.emp-logo-dropzone-text { font-weight: 600; font-size: 12px; color: var(--text); }
.emp-logo-dropzone-hint { font-size: 10px; color: var(--text-mute); }
.emp-logo-error { color: var(--red, #C1272D); font-size: 11px; margin-top: 6px; }

/* ===== Layout 2-col (formulario izq · logotipo+resumen der) ===== */
.emp-editor-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; }
@media (max-width: 980px) { .emp-editor-2col { grid-template-columns: 1fr; } }
.emp-form-col { padding: 4px 6px; min-width: 0; }
.emp-summary-col { padding: 14px; background: var(--bg-2, #f5f6f8); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.emp-summary-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.emp-summary-card .sum-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.emp-summary-card .sum-head-modelo { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-summary-card .sum-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); margin: 4px 0 2px; }
.emp-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--line); }
.emp-stat-row:last-child { border-bottom: 0; }
.emp-stat-row-block { flex-direction: column; align-items: flex-start; gap: 2px; }
.emp-stat-label { color: var(--text-mute); }
.emp-stat-value { font-weight: 600; color: var(--text); text-align: right; }
.emp-stat-row-block .emp-stat-value { text-align: left; font-weight: 500; font-size: 11px; }
.input-mayus { text-transform: uppercase; letter-spacing: .02em; }

/* Leyenda de ámbito en /catalogos (2026-07-23): pill de color de empresa vs gris global. */
.catalogo-legend { display: inline-flex; align-items: center; gap: 8px; }
.catalogo-pill { color: #fff; font-weight: 600; }
.catalogo-pill-global { background: #4b5563; }
.catalogo-pill-mixto { background: #0d9488; }   /* global pero visible por empresa */

/* Check de visibilidad deshabilitado (empresa que el usuario no opera). */
.check-item-dis { opacity: .5; cursor: not-allowed; }
.check-item-dis input { cursor: not-allowed; }

/* Fila de página futura (sin implementar) en la matriz de accesos. */
.acc-row-futura { opacity: .6; }
.acc-pill-futura { font-size: 9.5px; margin-left: 6px; vertical-align: middle; }

/* Elementos del navbar aún sin funcionalidad: visibles muy tenues, no interactivos. */
.header-inactive { opacity: .35; pointer-events: none; user-select: none; }

/* ============================================
   TAB DOCUMENTOS (Fase 6.3) — control documental de respaldo
   Subida de cotización de proveedor (PDF) + lista de documentos.
   ============================================ */
.doc-panel { display: flex; flex-direction: column; gap: 18px; }

.doc-upload {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 14px 16px;
}
.doc-upload-title {
  font-size: 13px; font-weight: 700; color: var(--g900);
  margin-bottom: 10px;
}
.doc-upload-row {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
}
.doc-upload-row .input-group { margin-bottom: 0; }
.doc-hint {
  margin-top: 10px; font-size: 11px; color: var(--text-mute);
  display: flex; align-items: center; gap: 6px;
}
.doc-hint i { font-size: 13px; }
.doc-error {
  margin-top: 10px; padding: 8px 12px; font-size: 12px;
  color: #c0392b; background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25); border-radius: var(--radius);
}

.doc-list-title {
  font-size: 13px; font-weight: 700; color: var(--g900); margin-bottom: 8px;
}
.doc-scroll {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: auto; max-height: 320px;
}
.doc-table { margin: 0; }
.doc-table th { position: sticky; top: 0; background: var(--bg, #F2F4F7); z-index: 1; }

/* Badges de tipo de documento */
.doc-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.doc-badge-blue   { background: rgba(37, 99, 235, 0.12);  color: #1d4ed8; }
.doc-badge-green  { background: rgba(22, 163, 74, 0.12);  color: #15803d; }
.doc-badge-purple { background: rgba(126, 34, 206, 0.12); color: #7e22ce; }
.doc-badge-amber  { background: rgba(217, 119, 6, 0.14);  color: #b45309; }
.doc-badge-gray   { background: rgba(100, 116, 139, 0.14); color: #475569; }

/* ============================================
   MODAL "MOSTRAR DETALLES" (tabla completa de items)
   Modal near-fullscreen con las 18 columnas de costeo. Solo lectura.
   ============================================ */
.modal-2xl {
  width: 96vw;
  max-width: 1800px;
  height: 92vh;
  max-height: 92vh;
}
.det-overlay { z-index: 1300; }
.det-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 9px 18px; border-bottom: 1px solid var(--line);
}
.det-scroll {
  overflow: auto;
  max-height: calc(92vh - 150px);
}
.det-table { margin: 0; font-size: 11.5px; }
.det-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg, #F2F4F7);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line);
}
.det-table tbody td { white-space: nowrap; }
.det-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.018); }
.det-table tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  background: var(--card, #fff);
  border-top: 2px solid var(--line);
}
/* Divisa pill (sufijo pequeno en celdas monetarias de la tabla compacta) */
.cur {
  font-size: 9px; font-weight: 700; color: var(--text-mute);
  margin-left: 2px; letter-spacing: 0.02em;
}
.neg { color: #c0392b; }
/* ============================================
   MODAL REASIGNAR MARGEN (Análisis proveedores)
   Panel de impacto financiero con barras comparativas CSS.
   ============================================ */
.margen-modal { max-width: 520px; }

.impact-panel {
  background: linear-gradient(135deg, #FAFBFC 0%, #F2F4F7 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  margin-bottom: 16px;
}
.impact-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-mute);
  margin-bottom: 14px;
}
.impact-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.impact-label { font-size: 12px; color: var(--text-mute); flex: 1; }
.impact-label.strong { font-weight: 700; color: var(--g900); }
.impact-value { font-size: 18px; font-weight: 800; color: var(--g900); font-variant-numeric: tabular-nums; }
.impact-value.pos { color: #15803d; }
.impact-value.neg { color: #c0392b; }
.impact-sub { font-size: 11px; color: var(--text-mute); min-width: 70px; text-align: right; }

/* Barra horizontal animada */
.impact-bar-wrap {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  overflow: hidden;
  height: 26px;
  position: relative;
}
.impact-bar {
  height: 100%;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 3%;
}
.impact-bar-current { background: linear-gradient(90deg, #64748B, #94A3B8); }
.impact-bar-up      { background: linear-gradient(90deg, #15803d, #22c55e); }
.impact-bar-down    { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.impact-bar-label {
  font-size: 10.5px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Delta destacado */
.impact-delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; padding: 5px 12px;
  border-radius: 20px; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.delta-up   { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
.delta-down { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; }
.delta-pct  { font-size: 11px; font-weight: 600; opacity: 0.85; }

/* Línea de costo total de referencia */
.impact-ref {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* Input de nuevo margen */
.margen-input-section { margin-top: 4px; }
.margen-input-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.margen-input-suffix {
  font-size: 18px; font-weight: 700; color: var(--text-mute);
  margin-left: -38px; pointer-events: none; z-index: 1;
}
.margen-input-hint { font-size: 12px; }

/* Fix barras: altura 12px + sin span (el valor ya esta arriba) + nota de decimales + margen hint */
.impact-bar-wrap { height: 12px !important; }
.impact-bar {
  display: block !important;
  padding: 0 !important;
  border-radius: 4px !important;
}
.impact-note {
  margin-top: 10px; font-size: 10px; font-style: italic;
  color: var(--text-mute); opacity: 0.8;
}
.margen-input-hint { margin-left: 14px; }

/* .pos global (verde) para el nuevo precio de venta; .neg ya existe del det-table */
.pos { color: #15803d; }


/* ============================================
   TOAST NOTIFICATIONS
   Contenedor fijo arriba a la derecha. Reutilizable
   via IToastService / ToastContainer.razor.
   ============================================ */
.toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 36px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #fff;
  border-left: 4px solid var(--primary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  animation: toast-in 0.25s ease-out;
}
.toast-success { border-left-color: #15803d; }
.toast-error { border-left-color: #c1272d; }
.toast-warning { border-left-color: #d97706; }
.toast-info { border-left-color: #0863a3; }
.toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-mute);
}
.toast-success .toast-icon { color: #15803d; }
.toast-error .toast-icon { color: #c1272d; }
.toast-warning .toast-icon { color: #d97706; }
.toast-info .toast-icon { color: #0863a3; }
.toast-content { flex: 1; min-width: 0; }
.toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.toast-message {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 2px;
  color: var(--text-mute);
  cursor: pointer;
  border-radius: 4px;
}
.toast-close:hover { background: rgba(0,0,0,0.05); color: var(--text); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   MODAL DE PROYECTOS — altura fija entre tabs
   ============================================ */
.modal-lg.proy-modal { min-height: 82dvh; max-height: 92dvh; }
.proy-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0;
}
.proy-modal .modal-body > .tabs {
  flex-shrink: 0;
  margin: 18px 22px 0;
}
.proy-modal .proy-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 22px 22px;
}

/* Contenedor del chart en el dashboard de proyecto */
.proy-dash-chart {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.proy-dash-chart-title {
  font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
.amchart-wrap { width: 100%; }

/* ============================================
   DASHBOARD DE PROYECTO (modo lectura, tab Datos)
   ============================================ */
.proy-dash { display: flex; flex-direction: column; gap: 18px; }

/* Banner: logo + identidad + barra de avance */
.proy-dash-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-card, #fff) 0%, #fafafa 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.proy-dash-logo {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; flex-shrink: 0;
}
.proy-dash-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.proy-dash-id { min-width: 0; }
.proy-dash-clave { font-size: 12px; color: var(--text-dim); letter-spacing: .5px; }
.proy-dash-nombre { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; margin: 2px 0 6px; }
.proy-dash-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proy-dash-fecha { font-size: 12px; color: var(--text-dim); }
.proy-dash-avance { min-width: 180px; }
.proy-dash-avance-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.proy-dash-avance-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.proy-dash-avance-pct { font-size: 15px; font-weight: 700; color: var(--text); }

/* Cards de stats */
.proy-dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.proy-dash-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.proy-dash-card-accent {
  border-color: var(--green, #2e7d32);
  background: linear-gradient(135deg, rgba(46,125,50,.06) 0%, #fff 100%);
}
.proy-dash-card-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.proy-dash-card-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.proy-dash-card-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Info complementaria compacta */
.proy-dash-info {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 16px;
}
.proy-dash-info-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft, #f0f0f0);
  font-size: 13px;
}
.proy-dash-info-row:last-child { border-bottom: none; }
.proy-dash-info-row .muted { color: var(--text-dim); font-size: 12px; }

@media (max-width: 900px) {
  .proy-dash-cards { grid-template-columns: repeat(2, 1fr); }
  .proy-dash-banner { grid-template-columns: auto 1fr; }
  .proy-dash-avance { grid-column: 1 / -1; min-width: 0; }
}

/* ===== /infraestructura: tablas clave-valor (2026-07-18) ===== */
.infra-table td:first-child { color: #6b7280; width: 42%; white-space: nowrap; }
.infra-table td { vertical-align: middle; }


/* Iconos decorativos en KPIs y cards de /infraestructura (2026-07-18) */
.kpi { position: relative; }
.kpi-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 32px; color: #8892a3; opacity: .32; pointer-events: none; }
.infra-rel { position: relative; }
.infra-card-icon { position: absolute; top: 12px; right: 16px; font-size: 46px; line-height: 1; pointer-events: none; }


/* Circulo de estado en KPIs (verde ok / rojo problema) */
.kpi-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: 2px; }


/* ===================== FASE 8: Ordenes de Compra a Proveedores ===================== */
.oc-empty { text-align: center; padding: 28px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.oc-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.oc-cards { display: flex; flex-direction: column; gap: 14px; }

.oc-card { border: 1px solid var(--line, #E5E7EB); border-radius: 10px; background: #fff; overflow: hidden; }
.oc-card-emitida { border-color: #2E7D32; box-shadow: 0 0 0 1px rgba(46,125,50,.15); }
.oc-card-cancelada { opacity: .55; }

.oc-card-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--field-bg, #FAFAFA); border-bottom: 1px solid var(--line, #E5E7EB); }
.oc-numero { font-weight: 800; font-size: 13.5px; letter-spacing: .3px; margin-right: 10px; }
.oc-proveedor { font-size: 13px; color: var(--text-2, #3D3D3D); font-weight: 600; }
.oc-head-right { display: flex; gap: 8px; align-items: center; }
.oc-divisa-pill { font-size: 11px; font-weight: 700; border: 1px solid var(--line, #E5E7EB); border-radius: 999px; padding: 2px 10px; background: #fff; color: var(--text-2, #3D3D3D); }
.oc-status-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.oc-pill-borrador { background: #FFF3E0; color: #B26A00; }
.oc-pill-emitida { background: #E8F5E9; color: #2E7D32; }
.oc-pill-cancelada { background: #ECEFF1; color: #607D8B; }

.oc-card-body { padding: 12px 14px; }
.oc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }

/* Anchos y alto del modal de OCs (2026-07-19): con tarjetas = como el modal de cotizacion
   (1200px, 92dvh); vacio (solo el boton de generar) ~1/3 de ese ancho. */
.modal.oc-modal { max-width: 1200px; width: 96vw; min-height: 92dvh; max-height: 92dvh; }
.modal.oc-modal .modal-body { overflow-y: auto; }
.modal.oc-modal-empty { max-width: 420px; }

/* Cuerpo de la tarjeta en 2 columnas 70/30: formulario | resumen (patron modal de items). */
.oc-body-cols { display: flex; gap: 16px; align-items: stretch; }
.oc-body-left { flex: 7 1 0; min-width: 0; }
.oc-body-right { flex: 3 1 0; min-width: 190px; }
.oc-resumen { background: var(--field-bg, #FAFAFA); border: 1px solid var(--line, #E5E7EB); border-radius: 8px; padding: 12px 14px; height: 100%; display: flex; flex-direction: column; gap: 7px; }
.oc-resumen-label { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-mute, #6B7280); }
.oc-resumen-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2, #3D3D3D); }
.oc-resumen-divider { border-top: 1px dashed var(--line, #E5E7EB); margin: 2px 0; }
.oc-resumen-total { font-size: 13.5px; }
.oc-req { color: #C62828; font-weight: 800; }
.oc-field { display: flex; flex-direction: column; gap: 3px; }
.oc-field > label { font-size: 11.5px; font-weight: 600; color: var(--text-mute, #6B7280); }
.oc-tc-row { display: flex; gap: 6px; }
.oc-tc-row .input { flex: 1; min-width: 0; }
.oc-input-warn { border-color: #E6A700 !important; background: #FFFBF0; }
/* Check "Trasladar costo de envío a proveedor" (2026-07-22) */
.oc-check { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; font-weight: 500; color: var(--text, #374151); cursor: pointer; }
.oc-check input[type="checkbox"] { width: 14px; height: 14px; margin: 0; cursor: pointer; flex: 0 0 auto; }
.oc-check span { line-height: 1.2; }
/* "Aplicar a todos" (entregas por item) + prorrateo de envío (2026-07-22) */
.oc-aplicar-todos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; background: var(--field-bg, #FAFAFA); border: 1px solid var(--border, #E8E8E8); border-radius: 6px; font-size: 12px; }
.oc-aplicar-todos > span { color: var(--text-mute, #6B7280); font-weight: 600; }
.oc-warn-banner { margin: 14px 0; padding: 10px 12px; background: #FFF8E6; border: 1px solid #F0D48A; border-radius: 6px; font-size: 11.5px; color: #6B5312; line-height: 1.45; }
.oc-margen-baja { color: #B25E00; font-weight: 600; }
.oc-margen-neg { color: #C0392B; font-weight: 700; }
/* Colaboradores (2026-07-22) */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row-2 { grid-template-columns: 1fr; } }
.req { color: #C0392B; font-weight: 700; }
.row-inactive { opacity: 0.6; }
.alert-info { background: #EAF3FF; border: 1px solid #BCD7F5; color: #1E4B7A; padding: 10px 14px; border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
.alert-info a { color: #1E4B7A; font-weight: 700; text-decoration: underline; }
.cred-box { border: 1px solid var(--border, #E8E8E8); border-radius: 8px; overflow: hidden; }
.cred-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; }
.cred-row + .cred-row { border-top: 1px solid var(--border, #E8E8E8); }
.cred-row > span:first-child { color: var(--text-mute, #6B7280); font-size: 12px; }
.cred-val { font-weight: 700; font-size: 14px; }
.cred-val.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: 0.5px; background: var(--field-bg, #FAFAFA); padding: 3px 8px; border-radius: 4px; }
/* Sidebar: item oculto por la matriz de accesos del colaborador (2026-07-22) */
.nav-hidden { display: none !important; }
/* Venta total enmascarada con ojo revelador (2026-07-22) */
.kpi-venta { position: relative; }
.kpi-eye { position: absolute; top: 12px; right: 12px; background: transparent; border: none; cursor: pointer; color: var(--text-mute, #6B7280); padding: 4px; border-radius: 6px; line-height: 0; font-size: 15px; }
.kpi-eye:hover { background: var(--field-bg, #F1F1F3); color: var(--text, #374151); }
/* Matriz de accesos (modal en /colaboradores) — tarjetas por sección + toggles tipo switch */
.acc-card { border: 1px solid var(--border, #E8E8E8); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.acc-card-head { background: var(--field-bg, #F7F7F9); padding: 9px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-mute, #6B7280); text-transform: uppercase; border-bottom: 1px solid var(--border, #E8E8E8); }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.acc-row + .acc-row { border-top: 1px solid var(--border-soft, #F1F1F3); }
.acc-nombre { font-weight: 600; font-size: 13.5px; color: var(--text, #1F2430); }
.acc-row-off .acc-nombre { color: var(--text-mute, #9AA0A8); }
.acc-toggles { display: flex; gap: 24px; flex: 0 0 auto; }
.acc-toggle { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; cursor: pointer; }
.acc-toggle-label { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-mute, #6B7280); }
.acc-toggle-dis { opacity: 0.5; }
/* Switch reutilizable */
.switch { position: relative; display: inline-block; width: 38px; height: 21px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: #cfd3da; border-radius: 999px; transition: background .18s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 15px; width: 15px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: #2E7D32; }
.switch input:checked + .slider::before { transform: translateX(17px); }
.switch input:disabled + .slider { opacity: .45; cursor: not-allowed; }
/* Tamaño de la base de datos en /infraestructura (2026-07-22) */
.db-size { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft, #F1F1F3); }
.db-size-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 3px 0; color: var(--text-mute, #6B7280); }
.db-size-line .strong { color: var(--text, #1F2430); }
.db-size-lim { margin-top: 6px; }
.db-progress { height: 9px; border-radius: 999px; background: #EDEEF1; overflow: hidden; margin-top: 5px; }
.db-progress-fill { height: 100%; border-radius: 999px; transition: width .3s ease; min-width: 2px; }
/* Filtros del dashboard de actividad (2026-07-22) */
.act-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }

.oc-timeline-wrap { margin-top: 12px; }
.oc-timeline-label { font-size: 11.5px; color: var(--text-mute, #6B7280); margin-bottom: 4px; }
.oc-warn-text { color: #B26A00; font-weight: 700; margin-left: 8px; }
.oc-timeline { position: relative; height: 16px; background: #F1F3F5; border-radius: 8px; overflow: visible; }
/* Franja verde CLARO = rango de entrega nosotros→cliente (2026-07-21). */
.oc-timeline-window { position: absolute; top: 0; height: 100%; background: #C8E6C9; border-radius: 8px; }
/* Franja verde MEDIO = rango proveedor→nosotros; naranja medio si sale de la ventana del cliente. */
.oc-timeline-supplier { position: absolute; top: 4px; height: 8px; background: #66BB6A; border-radius: 5px; }
.oc-supplier-warn { background: #FFB74D; }
/* Puntos = cada entrega proveedor→nosotros (verde oscuro dentro de la ventana, naranja fuera). */
.oc-timeline-marker { position: absolute; top: 1px; width: 14px; height: 14px; background: #2E7D32; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 2px #fff; z-index: 2; }
.oc-marker-warn { background: #E65100; }

.oc-totales { display: flex; gap: 18px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line, #E5E7EB); font-size: 12.5px; color: var(--text-2, #3D3D3D); align-items: center; flex-wrap: wrap; }
.oc-total-final { margin-left: auto; font-size: 13.5px; }

.oc-card-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 10px 14px; background: var(--field-bg, #FAFAFA); border-top: 1px solid var(--line, #E5E7EB); }
.oc-emitida-info { font-size: 12px; margin-right: auto; }
.oc-btn-danger { color: #C62828; }

/* Página /ordenes-compra */
.oc-page-filtros { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

/* ============================================
   ESTADO DEL SISTEMA EN EL NAVBAR (2026-08-04)
   Antes (2026-08-03) eran elementos fixed arriba a la derecha; ahora viven en el
   Header junto al buscador (pedido del usuario): ícono hdd azul = SignalR conectado,
   pastillas de reconexión al lado (texto neutro sobre fondo atenuado, sin letras
   naranjas), y semáforos de correo del sistema y SQL Server (azul Phicron = bien,
   rojo Dédalo = apagado/caído). blazor.web.js alterna las clases
   components-reconnect-show / -failed / -rejected en #components-reconnect-modal.
   ============================================ */
.header-status { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
.arkos-reconnect-pill {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #43403B; /* texto NEUTRO: el estado lo da el fondo atenuado + el ícono */
  white-space: nowrap;
  animation: toast-in 0.25s ease-out;
}
.arkos-reconnect-pill .bi { font-size: 18px; line-height: 1; }
#components-reconnect-modal.components-reconnect-show .arkos-reconnect-trying { display: inline-flex; }
#components-reconnect-modal.components-reconnect-failed .arkos-reconnect-down,
#components-reconnect-modal.components-reconnect-rejected .arkos-reconnect-down { display: inline-flex; }
.arkos-reconnect-trying {
  background: #FDF0DC; border: 1px solid #F0DCBB;
  /* Más notoria (2026-08-06): halo pulsante para que el ojo la encuentre sin buscarla. */
  animation: toast-in 0.25s ease-out, arkos-reconnect-halo 1.6s ease-in-out infinite;
}
.arkos-reconnect-trying .bi { color: #ED6C02; animation: arkos-reconnect-pulse 1.1s ease-in-out infinite; }
/* Fallo agotado: rojo pleno (es un error real) — el JS __arkosAutoReconnect sigue reintentando solo. */
.arkos-reconnect-down { background: var(--red, #C1272D); border: 1px solid var(--red, #C1272D); color: #fff; }
.arkos-reconnect-down .bi { color: #fff; animation: arkos-reconnect-pulse 1.1s ease-in-out infinite; }
.arkos-reconnect-down button {
  border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.arkos-reconnect-down button:hover { background: #fff; color: var(--red, #C1272D); }
@keyframes arkos-reconnect-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 108, 2, .30); }
  50% { box-shadow: 0 0 0 8px rgba(237, 108, 2, 0); }
}
@keyframes arkos-reconnect-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Ícono "conectado" permanente (hdd azul). Se oculta cuando la pastilla de
   reconexión (hermano anterior en el DOM) está activa. */
#arkos-conn-ok {
  display: flex;
  align-items: center;
  color: var(--blue, #0863A3);
  font-size: 24px;
  line-height: 1;
}
#components-reconnect-modal.components-reconnect-show + #arkos-conn-ok,
#components-reconnect-modal.components-reconnect-failed + #arkos-conn-ok,
#components-reconnect-modal.components-reconnect-rejected + #arkos-conn-ok { display: none; }

/* Semáforos de correo del sistema y SQL Server (Header.razor los pinta on/off). */
.header-status-icon { display: flex; align-items: center; font-size: 24px; line-height: 1; }
.header-status-icon.status-on { color: var(--blue, #0863A3); }
.header-status-icon.status-off { color: var(--red, #C1272D); }

/* ============================================
   AVISO DE INACTIVIDAD "¿Sigues ahí?" (2026-08-03)
   Lo construye el JS __arkosIdleLogout (App.razor).
   ============================================ */
#arkos-idle-warn { display: none; position: fixed; inset: 0; z-index: 3100; background: rgba(15, 18, 24, .45); }
#arkos-idle-warn.visible { display: flex; align-items: center; justify-content: center; }
.idle-warn-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 12px; padding: 22px 26px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  max-width: 440px; margin: 0 16px;
}
.idle-warn-card > .bi { font-size: 30px; color: #ADADAD; }
.idle-warn-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.idle-warn-text > b { font-size: 15px; }
.idle-warn-count { font-variant-numeric: tabular-nums; color: #B3261E; }
.idle-warn-btn {
  border: none; background: var(--red, #C1272D); color: #fff; font-weight: 700;
  border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.idle-warn-btn:hover { filter: brightness(1.08); }

/* ============================================
   SOPORTE: /ayuda y /herramientas (2026-08-03)
   Adaptado del diseño de Kimi (Recursos/KIMI_Paginas/) con
   FONDO BLANCO (pedido del usuario) y prefijos propios.
   ============================================ */
.sop-wrap {
  background: #fff;
  border: 1px solid var(--line, #E5E7EB);
  border-radius: 12px;
  padding: 28px 32px 36px;
}
.sop-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mute, #6B7280); margin: 32px 0 12px;
}
.sop-footer {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line, #E5E7EB);
  text-align: center; color: var(--text-mute, #6B7280); font-size: 13px;
}
.sop-footer .bi { margin-right: 6px; color: #ADADAD; }

/* ---- /ayuda ---- */
.ayu-hero { text-align: center; padding: 12px 0 4px; }
.ayu-hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.ayu-sub { color: var(--text-mute, #6B7280); font-size: 14px; margin-top: 6px; }
.ayu-search { max-width: 640px; margin: 22px auto 0; position: relative; }
.ayu-search .bi-search {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute, #6B7280); font-size: 17px; pointer-events: none;
}
.ayu-search input {
  width: 100%; height: 52px; padding: 0 20px 0 48px; font: inherit; font-size: 15.5px;
  color: var(--text, #1F2430); background: #fff; border: 1px solid var(--line, #E5E7EB);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ayu-search input::placeholder { color: #ADADAD; }
.ayu-search input:focus { border-color: var(--red, #C1272D); box-shadow: 0 0 0 3px rgba(193,39,45,.12); }
.ayu-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ayu-chip {
  border: 1px solid var(--line, #E5E7EB); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-mute, #6B7280);
  cursor: pointer; transition: all .15s;
}
.ayu-chip:hover { border-color: var(--red, #C1272D); color: var(--red, #C1272D); }
.ayu-chip.active { background: var(--red, #C1272D); border-color: var(--red, #C1272D); color: #fff; }
.ayu-empty { text-align: center; padding: 44px 24px; color: var(--text-mute, #6B7280); }
.ayu-empty .bi { font-size: 30px; color: #ADADAD; display: block; margin-bottom: 10px; }
.ayu-empty p { font-size: 14px; }

.faq-card { background: #fff; border: 1px solid var(--line, #E5E7EB); border-radius: 12px; overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--line, #E5E7EB); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; text-align: left; font-size: 14.5px; font-weight: 600;
  color: var(--text, #1F2430); background: none; border: none; cursor: pointer; font-family: inherit;
  transition: color .15s;
}
.faq-q:hover { color: var(--red, #C1272D); }
.faq-chevron { color: var(--text-mute, #6B7280); font-size: 14px; transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-q { color: var(--red, #C1272D); }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--red, #C1272D); }
.faq-answer { padding: 0 20px 18px; color: var(--text-mute, #6B7280); font-size: 13.5px; max-width: 760px; line-height: 1.55; }
.faq-answer strong { color: var(--text, #1F2430); font-weight: 600; }

.guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.guide-card {
  background: #fff; border: 1px solid var(--line, #E5E7EB); border-radius: 12px;
  padding: 20px; position: relative; opacity: .55; cursor: default;
}
.guide-pill { position: absolute; top: 14px; right: 14px; }
.guide-icon {
  width: 44px; height: 44px; border-radius: 10px; background: rgba(8,99,163,.08); color: var(--blue, #0863A3);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px;
}
.guide-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; padding-right: 84px; }
.guide-card p { font-size: 12.5px; color: var(--text-mute, #6B7280); margin: 0; }

.assistant-card {
  margin-top: 32px; border-radius: 12px; padding: 26px;
  background: linear-gradient(135deg, #C1272D 0%, #8E1B20 100%); color: #fff;
  display: flex; align-items: center; gap: 20px;
  box-shadow: 0 8px 20px rgba(193,39,45,.18); cursor: not-allowed;
}
.assistant-icon {
  width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.assistant-text { flex: 1; min-width: 0; }
.assistant-card h3 { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.assistant-card p { font-size: 13.5px; opacity: .85; margin: 4px 0 0; }
.assistant-pill { background: rgba(255,255,255,.2); color: #fff; }

/* ---- /herramientas ---- */
.herr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.herr-card {
  background: #fff; border: 1px solid var(--line, #E5E7EB); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 150px;
  text-align: left; font-family: inherit;
}
.herr-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--text, #1F2430); }
.herr-card p { font-size: 13px; color: var(--text-mute, #6B7280); line-height: 1.45; margin: 0; }
.herr-card .pill { margin-top: auto; }
.herr-activa { cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.herr-activa:hover { border-color: var(--red, #C1272D); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(31,36,48,.08); }
.herr-icon {
  width: 52px; height: 52px; border-radius: 10px; background: rgba(193,39,45,.08); color: var(--red, #C1272D);
  display: inline-flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.herr-icon-azul { background: rgba(8,99,163,.08); color: var(--blue, #0863A3); }
.is-muted { opacity: .55; }

.herr-dropzone {
  position: relative; display: block; border: 2px dashed var(--line, #E5E7EB); border-radius: 12px;
  padding: 44px 24px; text-align: center; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s; margin-top: 8px;
}
.herr-dropzone:hover, .herr-dropzone.drag-over { border-color: var(--red, #C1272D); background: rgba(193,39,45,.05); }
.herr-dropzone:hover > .bi, .herr-dropzone.drag-over > .bi { color: var(--red, #C1272D); }
.herr-dropzone.drag-over { box-shadow: 0 0 0 4px rgba(193,39,45,.10); }
.herr-dropzone > .bi { display: block; font-size: 40px; color: var(--text-mute, #6B7280); margin-bottom: 12px; transition: color .15s; }
.herr-dropzone p { font-size: 14px; color: var(--text, #1F2430); font-weight: 600; margin: 0; }
.herr-dropzone span { display: block; font-size: 12px; color: var(--text-mute, #6B7280); margin-top: 4px; }
.herr-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.herr-dz-off { opacity: .55; pointer-events: none; }

.herr-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.herr-file-row {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line, #E5E7EB); border-radius: 10px; padding: 8px 14px;
}
.herr-pdf-icon { color: var(--red, #C1272D); font-size: 22px; flex-shrink: 0; }
.herr-file-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.herr-file-size { font-size: 12px; color: var(--text-mute, #6B7280); white-space: nowrap; }
.herr-remove {
  background: transparent; border: none; color: var(--text-mute, #6B7280); font-size: 18px;
  cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; flex-shrink: 0;
}
.herr-remove:hover { color: var(--red, #C1272D); background: rgba(193,39,45,.08); }

.herr-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.herr-privacy { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mute, #6B7280); margin-top: 18px; }
.herr-privacy .bi { color: #6B7280; font-size: 14px; } /* gris, no verde (2026-08-04) */

/* Combinar PDFs: dos columnas — lista angosta | vista previa (2026-08-03) */
.herr-tool-cols { display: flex; gap: 18px; align-items: flex-start; }
.herr-tool-left { flex: 0 0 44%; min-width: 320px; }
.herr-tool-right {
  flex: 1 1 auto; min-width: 0; position: sticky; top: 12px;
  border: 1px solid var(--line, #E5E7EB); border-radius: 12px; overflow: hidden; background: #fff;
}
.herr-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--field-bg, #FAFAFA); border-bottom: 1px solid var(--line, #E5E7EB);
  font-size: 13px; font-weight: 600;
}
.herr-preview-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.herr-preview-frame { display: block; width: 100%; height: 560px; border: none; background: #525659; }
.herr-preview-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; color: var(--text-mute, #6B7280); font-size: 13px; text-align: center;
}
.herr-preview-hint .bi { font-size: 34px; color: #ADADAD; }
.herr-file-row { cursor: pointer; transition: border-color .15s, background .15s; }
.herr-file-row:hover { border-color: var(--red, #C1272D); }
.herr-file-row.active { border-color: var(--red, #C1272D); background: rgba(193,39,45,.05); }
@media (max-width: 980px) {
  .herr-tool-cols { flex-direction: column; }
  .herr-tool-left { flex: 1 1 auto; width: 100%; min-width: 0; }
  .herr-tool-right { position: static; width: 100%; }
  .herr-preview-frame { height: 420px; }
}

/* Overlay de soltado a PANTALLA COMPLETA (estilo iLovePDF, 2026-08-03) */
.herr-drop-overlay {
  display: none; position: fixed; inset: 0; z-index: 2600;
  background: rgba(31, 36, 48, .55); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.herr-drop-overlay.visible { display: flex; }
.herr-drop-inner {
  border: 3px dashed rgba(255,255,255,.85); border-radius: 18px;
  padding: 56px 72px; text-align: center; color: #fff;
  background: rgba(193, 39, 45, .18);
}
.herr-drop-inner .bi { font-size: 54px; display: block; margin-bottom: 14px; animation: herr-drop-bounce 1s ease-in-out infinite; }
.herr-drop-inner p { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.herr-drop-inner span { display: block; font-size: 13.5px; opacity: .85; margin-top: 6px; }
@keyframes herr-drop-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* Resumen del header de Combinar PDFs (chips con ícono, 2026-08-03) */
.herr-resumen { display: flex; gap: 10px; flex-wrap: wrap; }
.herr-stat {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line, #E5E7EB); border-radius: 10px;
  padding: 8px 14px; min-width: 118px;
}
.herr-stat .bi { font-size: 20px; color: var(--red, #C1272D); background: rgba(193,39,45,.08); border-radius: 8px; padding: 6px 8px; }
.herr-stat b { display: block; font-size: 15px; line-height: 1.15; }
.herr-stat span { display: block; font-size: 11px; color: var(--text-mute, #6B7280); }
.herr-stat-ok .bi { color: var(--green, #046707); background: rgba(4,103,7,.08); }
@media (max-width: 768px) { .herr-resumen { width: 100%; } }

/* Loader de combinación (~5 s, pedagógico a pedido del usuario; el merge es real) */
.herr-progress {
  flex: 1; min-width: 180px; height: 8px; background: #ECEDEF;
  border-radius: 999px; overflow: hidden;
}
.herr-progress-fill {
  height: 100%; width: 0; background: var(--red, #C1272D); border-radius: 999px;
  animation: herr-fill 5s cubic-bezier(.25,.6,.45,1) forwards;
}
@keyframes herr-fill { 0% { width: 0; } 82% { width: 91%; } 100% { width: 100%; } }

/* Panel "Uso de herramientas (análisis)" — solo Superadmin */
.herr-uso-card { border: 1px solid var(--line, #E5E7EB); border-radius: 12px; overflow: hidden; }
.herr-uso-resumen { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 18px; background: var(--field-bg, #FAFAFA); border-bottom: 1px solid var(--line, #E5E7EB); }
.herr-uso-stat { display: flex; flex-direction: column; gap: 2px; }
.herr-uso-stat b { font-size: 18px; }
.herr-uso-stat span { font-size: 11.5px; color: var(--text-mute, #6B7280); text-transform: uppercase; letter-spacing: .04em; }
.herr-uso-row { display: flex; gap: 12px; align-items: baseline; padding: 9px 18px; font-size: 12.5px; }
.herr-uso-row + .herr-uso-row { border-top: 1px solid var(--border-soft, #F1F1F3); }
.herr-uso-fecha { color: var(--text-mute, #6B7280); white-space: nowrap; font-variant-numeric: tabular-nums; }
.herr-uso-user { font-weight: 600; white-space: nowrap; }
.herr-uso-det { color: var(--text-mute, #6B7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.herr-success {
  background: rgba(4,103,7,.08); border: 1px solid rgba(4,103,7,.2); border-radius: 12px;
  padding: 28px 24px; text-align: center; margin-top: 8px;
}
.herr-success .bi-check-circle { font-size: 40px; color: var(--green, #046707); display: block; margin-bottom: 10px; }
.herr-success h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.herr-success p { font-size: 13px; color: var(--text-mute, #6B7280); margin: 0 0 18px; }

@media (max-width: 1024px) {
  .guides-grid, .herr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sop-wrap { padding: 20px 16px 28px; }
  .guides-grid, .herr-grid { grid-template-columns: 1fr; }
  .herr-dropzone { padding: 34px 16px; }
  .assistant-card { flex-direction: column; text-align: center; }
  .assistant-card h3 { justify-content: center; }
}

/* ============================================
   AGENTE IA (/agente-ia) — superagente Fase A.3 (2026-08-07)
   Rediseño fiel al mockup `Arkos_Agente_IA/app-Agente-Arkos` (Kimi K3), adaptado al layout
   real: rail de Apps a la IZQUIERDA (paneles Notas/Tareas/Configuración), conversación al
   centro a TODO lo ancho, historial estilo "Chats" a la derecha. Radios pequeños, SIN
   degradados. El acento (--ag-acc) lo elige el usuario entre los 3 colores pioneros
   (default = color primario de la empresa activa); --ag-acc-soft = acento al 10% (hex+1A).
   ============================================ */
.ag3 {
  --ag-border: #E7E9EE; --ag-panel: #fff; --ag-panel2: #F7F8FA;
  --ag-bubble-in: #EEF0F4; --ag-text: #1C1E24; --ag-muted: #878D99;
  /* Full-bleed (A.4): el main pierde su padding vía :has(.ag3) y el chat ocupa TODO el
     espacio; sin radius ni border-top para no duplicar la línea del navbar.
     Altura FIJA por viewport (ajuste del usuario): 100vh - navbar (68px); si hay listón de
     ambiente (DEV/SANDBOX ponen .has-env-ribbon en .app) se restan sus 26px extra. min = max
     para que el div NO crezca mientras el agente responde — el scroll vive en .ag3-msgs. */
  display: flex; width: 100%;
  height: calc(100vh - 68px); min-height: calc(100vh - 68px); max-height: calc(100vh - 68px);
  background: var(--ag-panel); border: none;
  border-radius: 0; overflow: hidden; color: var(--ag-text);
}
.has-env-ribbon .ag3 {
  height: calc(100vh - 94px); min-height: calc(100vh - 94px); max-height: calc(100vh - 94px);
}

/* --- Agente sin configurar --- */
.ag3-off { text-align: center; padding: 10vh 20px; color: #6B7280; }
.ag3-off img { width: 74px; opacity: .45; filter: grayscale(1); margin-bottom: 14px; }
.ag3-off h2 { font-size: 22px; font-weight: 700; color: #1C1E24; margin-bottom: 8px; }
.ag3-off p { max-width: 520px; margin: 0 auto; font-size: 14px; line-height: 1.6; }

/* ============ Rail de Apps (izquierda) ============ */
.ag3-rail {
  width: 56px; min-width: 56px; background: var(--ag-panel);
  border-right: 1px solid var(--ag-border);
  display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px;
}
.ag3-rail-label { font-size: 10.5px; font-weight: 700; color: var(--ag-muted); margin-bottom: 6px; }
.ag3-rail-sep { width: 26px; border-top: 1px solid var(--ag-border); margin: 6px 0; }
.ag3-rail-btn {
  width: 38px; height: 38px; border-radius: 10px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ag-muted); font-size: 17px; transition: .15s; position: relative;
}
.ag3-rail-btn:hover:not(:disabled) { background: var(--ag-panel2); color: var(--ag-text); }
.ag3-rail-btn.activo { background: var(--ag-acc-soft); color: var(--ag-acc); }
.ag3-rail-btn:disabled { opacity: .35; cursor: default; }

/* ============ Panel lateral (Notas / Tareas / Configuración) ============ */
/* A.5: SIEMPRE montado; .open anima el ancho (slide-in) y el chat se reacomoda suave.
   El contenido vive en .ag3-panel-inner con ancho FIJO para que no se reacomode al animar. */
.ag3-panel {
  width: 0; min-width: 0; background: var(--ag-panel);
  border-right: 0 solid var(--ag-border);
  overflow: hidden; min-height: 0;
  transition: width .22s ease, min-width .22s ease, border-right-width .22s ease;
}
.ag3-panel.open { width: 330px; min-width: 330px; border-right-width: 1px; }
.ag3-panel-inner {
  width: 330px; min-width: 330px; height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.ag3-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px 12px; }
.ag3-panel-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.ag3-x, .ag3-x-chico {
  border: none; background: none; cursor: pointer; color: var(--ag-muted);
  width: 30px; height: 30px; border-radius: 8px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.ag3-x:hover, .ag3-x-chico:hover { background: var(--ag-panel2); color: var(--ag-text); }
.ag3-x-chico { width: 24px; height: 24px; font-size: 12px; }
.ag3-panel-body { flex: 1; overflow-y: auto; padding: 2px 20px 16px; min-height: 0; }
.ag3-panel-vacio { color: var(--ag-muted); font-size: 12.5px; text-align: center; padding: 22px 8px; }
.ag3-panel-nota-v1 { font-size: 11px; color: var(--ag-muted); padding: 0 2px 10px; }
.ag3-cta {
  margin: 0 20px 18px; background: var(--ag-acc); color: #fff; border: none; cursor: pointer;
  font-weight: 600; font-size: 13.5px; padding: 13px; border-radius: 10px; transition: .15s;
}
.ag3-cta:hover { filter: brightness(1.1); }

/* Notas (v1 en sesión) */
.ag3-note { border: 1px solid var(--ag-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ag3-note-fecha { font-size: 11px; color: var(--ag-muted); margin-bottom: 6px; }
.ag3-note-titulo {
  width: 100%; border: none; outline: none; background: transparent;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ag-text); margin-bottom: 5px;
}
.ag3-note-texto {
  width: 100%; border: none; outline: none; background: transparent; resize: vertical;
  font: inherit; font-size: 12.5px; color: var(--ag-muted); line-height: 1.55;
}
.ag3-note-tagrow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ag3-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: none; cursor: pointer; }
.ag3-tag-0 { background: #E8EFFE; color: #3B6FE0; }
.ag3-tag-1 { background: var(--ag-acc-soft); color: var(--ag-acc); }
.ag3-tag-2 { background: #FDF3E2; color: #D08A1D; }
.ag3-kebab {
  border: none; background: none; cursor: pointer; color: var(--ag-muted);
  padding: 2px 6px; border-radius: 6px; font-size: 13px;
}
.ag3-kebab:hover { background: var(--ag-panel2); color: var(--red, #C1272D); }

/* Lista de tareas (v1 en sesión) */
.ag3-todo-dia { font-size: 13px; font-weight: 700; margin: 10px 0 2px; }
.ag3-todo-restan { font-size: 11.5px; color: var(--ag-muted); margin-bottom: 9px; }
.ag3-todo-card { border: 1px solid var(--ag-border); border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; }
.ag3-todo-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 13px; }
.ag3-todo-item + .ag3-todo-item { border-top: 1px solid var(--ag-border); }
.ag3-todo-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ag-acc); cursor: pointer; flex: none; }
.ag3-todo-texto { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; color: var(--ag-text); }
.ag3-todo-item.hecha .ag3-todo-texto { text-decoration: line-through; color: var(--ag-muted); }

/* Configuración: color de acento */
.ag3-cfg-titulo { font-size: 13px; font-weight: 700; margin: 12px 0 8px; }
.ag3-cfg-colores { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ag3-color {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--ag-border); border-radius: 10px; background: var(--ag-panel);
  padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--ag-text); transition: .15s;
}
.ag3-color:hover { border-color: var(--ag-acc); }
.ag3-color.activo { border-color: var(--ag-acc); background: var(--ag-acc-soft); }
/* Swatches SOLO de referencia (2026-08-12): el acento sigue a la empresa activa y ya no se
   elige a mano — deshabilitados sin atenuar el activo, que señala la empresa en curso. */
.ag3-color:disabled { cursor: default; }
.ag3-color:disabled:not(.activo) { opacity: .55; }
.ag3-color:disabled:hover { border-color: var(--g200, #E5E7EB); }
.ag3-color:disabled.activo:hover { border-color: var(--ag-acc); }
.ag3-color-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }

/* ============ Conversación (centro) ============ */
.ag3-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: #fff; } /* A.4: blanco, más elegante */
.ag3-conv-head {
  height: 64px; min-height: 64px; background: var(--ag-panel);
  border-bottom: 1px solid var(--ag-border);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.ag3-logo-av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: contain;
  background: var(--ag-panel); border: 1px solid var(--ag-border); padding: 4px; flex: none;
}
.ag3-conv-info { flex: 1; min-width: 0; }
.ag3-conv-info b { font-size: 14px; display: block; }
/* A.4: estado REAL de conexión (ping a la API cada 60 s) — en línea = verde Deckel */
.ag3-status { font-size: 11.5px; font-weight: 500; }
.ag3-status.on { color: var(--green, #046707); }
.ag3-status.off { color: var(--red, #C1272D); }
.ag3-status.check { color: var(--ag-muted); }
.ag3-icon-btn {
  width: 36px; height: 36px; border-radius: 8px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ag-muted); font-size: 16px; transition: .15s;
}
.ag3-icon-btn:hover:not(:disabled) { background: var(--ag-panel2); color: var(--ag-text); }
.ag3-icon-btn:disabled { opacity: .35; cursor: default; }

.ag3-msgs { flex: 1; overflow-y: auto; min-height: 0; padding: 24px 34px; scroll-behavior: smooth; }

/* Hero de bienvenida (sin degradados: logo + tinta plana) */
.ag3-hero { text-align: center; padding: 6vh 18px 24px; }
.ag3-hero-logo { width: 84px; margin-bottom: 16px; }
.ag3-hero h2 { margin: 0 0 8px; font-size: 25px; font-weight: 800; letter-spacing: -.3px; color: var(--ag-text); }
.ag3-hero p { margin: 0 auto; max-width: 540px; color: #6B7280; font-size: 14.5px; line-height: 1.6; }
.agente-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.agente-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--ag-panel, #fff); border: 1px solid var(--ag-border, #E7E9EE); border-radius: 8px;
  padding: 8px 16px 8px 10px; font-size: 13px; color: var(--ag-text, #1C1E24); cursor: pointer;
  transition: all .18s ease;
}
.agente-chip .bi { font-size: 17px; color: var(--ag-acc, #0863A3); }
.agente-chip:hover { border-color: var(--ag-acc, #0863A3); transform: translateY(-1px); }

/* Mensajes: .in (agente, izquierda) / .out (usuario, derecha, color de acento) */
.ag3-msg { max-width: 62%; margin-bottom: 14px; display: flex; flex-direction: column; animation: agente-in .25s ease-out both; }
.ag3-msg.in { align-self: flex-start; align-items: flex-start; max-width: 72%; } /* A.4: el agente respira +10% */
.ag3-msg.out { align-self: flex-end; align-items: flex-end; margin-left: auto; }
.ag3-msg.sin-anim { animation: none; } /* anti-parpadeo al promover la burbuja del streaming */
.ag3-msgs { display: flex; flex-direction: column; }
.ag3-bubble {
  padding: 20px 24px; font-size: 13.5px; line-height: 1.55; border-radius: 14px;
  font-family: var(--agente-fuente, inherit);
}
.ag3-bubble-user {
  background: var(--ag-acc); color: #fff;
  border-top-right-radius: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.ag3-msg.in .ag3-bubble { border-top-left-radius: 4px; background: var(--ag-bubble-in); border: none; box-shadow: none; padding-bottom: 30px; } /* A.5: aire para la pastilla del agente */
.ag3-bubble-user { max-height: 320px; overflow-y: auto; } /* adjuntos largos: scroll dentro de la burbuja */
/* A.4 (ajuste del usuario): el mini-avatar se ENCIMA a la esquina de la burbuja, dentro de
   una PASTILLA blanca para que el texto («Agente IA» / «escribiendo…») no se pierda. */
.ag3-meta {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ag-muted);
  margin-top: -20px; position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--ag-border); border-radius: 999px;
  padding: 2px 10px 2px 2px;
}
.ag3-msg.out .ag3-meta { margin-right: -16px; padding: 2px; }
.ag3-msg.in .ag3-meta { margin-left: -16px; }
.ag3-miniav {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ag-acc); color: #fff;
  border: 2px solid #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
.ag3-miniav-img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--ag-panel); border: 2px solid #fff;
}
.ag3-miniav-activo { animation: agente-glow 1.6s ease-in-out infinite; }

/* Markdown dentro de la burbuja del agente (base A.1/A.2, adaptada al acento elegible) */
.agente-bubble-ia { color: var(--ag-text, #1F2430); overflow-x: auto; }
.agente-bubble-ia p { margin: 0 0 10px; }
.agente-bubble-ia > *:last-child { margin-bottom: 0; }
.agente-bubble-ia ul, .agente-bubble-ia ol { margin: 8px 0; padding-left: 22px; }
.agente-bubble-ia li { margin: 9px 0; } /* aire entre renglones de instrucciones (A.2) */
.agente-bubble-ia li > p { margin: 0 0 4px; }
.agente-bubble-ia h1, .agente-bubble-ia h2, .agente-bubble-ia h3 { font-size: 15.5px; margin: 14px 0 6px; }
.agente-bubble-ia code {
  background: #E3E6EC; border-radius: 5px; padding: 1px 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
.agente-bubble-ia pre {
  background: #0F1218; color: #E6E8EC; border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; overflow-x: auto;
}
.agente-bubble-ia pre code { background: transparent; color: inherit; padding: 0; font-size: 12.5px; }
.agente-bubble-ia a { color: var(--ag-acc, #0863A3); }
.agente-bubble-ia blockquote {
  margin: 10px 0; padding: 4px 12px;
  border-left: 3px solid var(--ag-acc, #C1272D); color: #4B5563; background: #FFFFFF66;
}
.agente-bubble-ia table { border-collapse: collapse; margin: 10px 0; background: #fff; }
.agente-bubble-ia th, .agente-bubble-ia td { border: 1px solid var(--ag-border, #E7E9EE); padding: 5px 10px; font-size: 13px; }
/* Encabezado con el color de acento + zebra tenue (el gris claro se perdía sobre blanco) */
.agente-bubble-ia th {
  background: var(--ag-acc, #0863A3); color: #fff;
  border-color: var(--ag-acc, #0863A3);
  font-weight: 600; text-align: left;
}
.agente-bubble-ia tbody tr:nth-child(even) td { background: var(--ag-acc-soft, #EAF3FA); }
.agente-bubble-ia tbody tr:nth-child(odd) td { background: #fff; }
/* Botón de navegación emitido por el agente ([[boton:Etiqueta|/ruta]] → AgenteRespuestaRenderer) */
.agente-btn-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 4px 6px 4px 0; padding: 7px 14px;
  background: var(--ag-acc, #0863A3); color: #fff !important;
  border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; transition: filter .15s ease, transform .15s ease;
}
.agente-btn-link:hover { filter: brightness(1.12); transform: translateY(-1px); text-decoration: none; }
.agente-btn-link i { font-size: 14px; }

/* Botón de descarga de un documento existente (directiva [[descarga:...]], Fase D). Hermano del
   de navegación pero en tono neutro: descargar no es navegar. */
.agente-btn-descarga {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 6px 4px 0;
  padding: 7px 13px;
  border: 1px solid var(--g300);
  border-radius: 8px;
  background: #fff;
  color: var(--g800);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.agente-btn-descarga:hover {
  border-color: var(--ag-acc, var(--blue));
  color: var(--ag-acc, var(--blue));
  transform: translateY(-1px);
  text-decoration: none;
}
.agente-btn-descarga i { font-size: 15px; }

/* Barras de progreso en la respuesta del agente (directiva [[barra:...]], C.3 2026-08-09):
   reutilizan .score-bar del catálogo de proveedores para que el sistema se vea de una pieza. */
.agente-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 13px;
}
.agente-barra-lbl { min-width: 132px; color: var(--g700); }
.agente-barra-pista { width: 100%; max-width: 260px; height: 8px; }
/* El relleno es un <span>: sin display:block seguiría siendo inline y el width/height del
   estilo en línea no aplicarían — la barra se vería vacía.
   Color = acento de la empresa activa, NO semáforo: el mismo 31% puede ser un margen excelente
   o un avance pobre, y la interfaz no tiene contexto para opinar. */
.agente-barra-pista .score-bar {
  display: block;
  border-radius: 4px;
  background: var(--ag-acc, var(--blue));
}
.agente-barra-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--g900); }

/* Nota bajo el selector de acento: explica que sigue a la empresa activa. */
.ag3-cfg-nota {
  font-size: 11.5px;
  color: var(--g600);
  line-height: 1.5;
  margin: -2px 0 14px;
}
.ag3-link-btn {
  display: block;
  margin-top: 2px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--ag-acc, var(--blue));
  cursor: pointer;
  text-decoration: underline;
}

/* Gráficas SVG generadas en el servidor (directiva [[grafica:...]]). */
.ag3-grafica {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--g200);
  border-radius: 10px;
  background: #fff;
  max-width: 100%;
  overflow-x: auto;
}
.ag3-grafica figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--g900);
  margin-bottom: 10px;
}
.ag3-grafica svg { width: 100%; height: auto; display: block; }
.ag3-svg-lbl { font-size: 10px; fill: var(--g700); }
.ag3-svg-val { font-size: 10px; fill: var(--g900); font-weight: 600; }
.ag3-svg-pista { fill: var(--g200); }
.ag3-svg-grid { stroke: var(--g200); stroke-width: 1; }
/* La serie toma el acento de la empresa activa, igual que el resto de la página. */
.ag3-svg-serie { fill: var(--ag-acc, var(--blue)); }
.ag3-svg-linea { fill: none; stroke: var(--ag-acc, var(--blue)); }

/* Acciones bajo cada respuesta (copiar · útil · reportar). Discretas: aparecen atenuadas y
   solo toman color al pasar el mouse por la burbuja, como en los chats que ya conoce la gente. */
.ag3-acciones {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--g200);
  opacity: .35;
  transition: opacity .15s;
}
.ag3-bubble:hover .ag3-acciones,
.ag3-acciones:focus-within { opacity: 1; }
.ag3-accion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  color: var(--g600);
  cursor: pointer;
}
.ag3-accion:hover { background: var(--g100); color: var(--g900); }
.ag3-accion.activa { color: var(--green); }
.ag3-accion-reportar:hover { color: var(--red); }
.ag3-accion i { font-size: 13px; }

.ag3-check {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--g700);
  line-height: 1.5;
  cursor: pointer;
}
.ag3-check input { margin-top: 2px; flex-shrink: 0; }

/* Panel de reportes (Superadmin) */
.ag3-rail-btn { position: relative; }
.ag3-rail-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.ag3-reporte {
  border: 1px solid var(--g200);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 12px;
}
.ag3-reporte.nuevo { border-left: 3px solid var(--red); }
.ag3-reporte-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ag3-reporte-tipo { font-weight: 700; color: var(--g900); }
.ag3-reporte-fecha { color: var(--g600); font-size: 11px; }
.ag3-reporte-meta { color: var(--g600); font-size: 11px; margin-top: 2px; }
.ag3-reporte-com { margin: 6px 0; color: var(--g800); font-style: italic; line-height: 1.5; }
.ag3-reporte-estado { margin-top: 4px; font-size: 11px; color: var(--green); font-weight: 600; }
.ag3-reporte-detalle { margin: 8px 0; }
.ag3-reporte-detalle strong { display: block; font-size: 11px; color: var(--g600); margin-top: 6px; }
.ag3-reporte-detalle pre {
  max-height: 160px;
  overflow: auto;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 3px 0 0;
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--g700);
}

/* Pastilla de identidad clickeable → ficha del agente. */
.ag3-meta.ag3-meta-click { cursor: pointer; border-color: var(--g300); }
.ag3-meta.ag3-meta-click:hover { background: var(--g100); }

/* ============================================
   FICHA DEL AGENTE — panel del rail de Apps (C.6)
   Rediseñada para una columna de ~330 px: la jerarquía la dan el tamaño y el color, no las
   cajas anidadas (que en angosto se sienten apretadas).
   ============================================ */
.ag3-ficha { display: flex; flex-direction: column; }

.ag3-ficha-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ag3-ficha-top img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ag-acc, var(--blue)); padding: 3px; background: #fff;
}
.ag3-ficha-nom { font-size: 18px; font-weight: 700; color: var(--g900); line-height: 1.2; }
.ag3-ficha-badge {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--ag-acc-soft, #0863A31A); color: var(--ag-acc, var(--blue));
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.ag3-ficha-desc { font-size: 12.5px; line-height: 1.55; color: var(--g700); margin: 0 0 4px; }

/* Encabezado de sección: filete + versalitas */
.ag3-ficha-h {
  display: flex; align-items: center; gap: 6px;
  margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--g200);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--g600);
}
.ag3-ficha-n { background: var(--g100); color: var(--g700); border-radius: 999px; padding: 1px 6px; font-size: 10px; }
.ag3-ficha-hint { font-size: 11.5px; color: var(--g600); margin: 0 0 8px; line-height: 1.45; }

/* Tarjeta por subagente: clicable para ver la ficha del otro */
.ag3-ficha-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--g200); border-radius: 8px; background: #fff;
  padding: 8px 10px; margin-bottom: 6px; transition: border-color .15s, background .15s;
}
.ag3-ficha-card:hover { border-color: var(--ag-acc, var(--blue)); }
.ag3-ficha-card.activa { border-color: var(--ag-acc, var(--blue)); background: var(--ag-acc-soft, #0863A31A); }
.ag3-ficha-card-nom { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--g900); }
.ag3-ficha-card-nom i { color: var(--ag-acc, var(--blue)); font-size: 12px; }
.ag3-ficha-card-rol { font-size: 11px; color: var(--g600); margin-top: 1px; }

/* Ficha histórica del personaje */
.ag3-ficha-mito {
  border-left: 3px solid var(--ag-acc, var(--blue));
  background: var(--g50); border-radius: 0 8px 8px 0;
  padding: 10px 12px; margin: 12px 0 4px;
  font-size: 12px; line-height: 1.6; color: var(--g700);
}
.ag3-ficha-mito-t { font-weight: 700; color: var(--g900); font-size: 12.5px; }
.ag3-ficha-mito-e { font-size: 10.5px; color: var(--g600); margin-bottom: 6px; }
.ag3-ficha-mito p { margin: 0 0 6px; }
.ag3-ficha-mito-p { margin-bottom: 0 !important; }

/* Herramientas como pastillas */
.ag3-ficha-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ag3-ficha-chip {
  border: 1px solid var(--g200); border-radius: 6px; background: var(--g50);
  padding: 3px 8px; font-size: 11px; color: var(--g700); cursor: default;
}
.ag3-ficha-chip:hover { border-color: var(--ag-acc, var(--blue)); color: var(--g900); }

.ag3-ficha-lista { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.55; color: var(--g700); }
.ag3-ficha-lista li { margin-bottom: 5px; }

/* Datos técnicos como pares clave/valor */
.ag3-ficha-datos { margin: 0; font-size: 12px; }
.ag3-ficha-datos dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--g600); margin-top: 8px; }
.ag3-ficha-datos dd { margin: 1px 0 0; color: var(--g800); line-height: 1.5; }
.ag3-ficha-datos code { background: var(--g100); border-radius: 4px; padding: 1px 5px; font-size: 11px; }

/* Las instrucciones se despliegan dentro de una columna flex: sin flex-shrink:0 el navegador las
   aplasta a unos pocos píxeles en vez de dejar crecer el scroll del panel. */
.ag3-ficha-prompt {
  flex-shrink: 0;
  max-height: 340px;
  overflow: auto;
  background: var(--g50); border: 1px solid var(--g200); border-radius: 8px;
  padding: 8px 10px; margin-top: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px;
  white-space: pre-wrap; color: var(--g700);
}
/* Mismo motivo: ninguna sección de la ficha debe encogerse; el que scrollea es el panel. */
.ag3-ficha > * { flex-shrink: 0; }

/* Respuesta señalada por un reporte (al abrirla desde el panel de reportes) */
.ag3-bubble.reportada { box-shadow: 0 0 0 2px var(--red); }
.ag3-marca-reporte {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 10px; padding: 5px 9px; border-radius: 6px;
  background: var(--red-bg, #FDECEC); color: var(--red);
  font-size: 11.5px; font-weight: 600;
}
.ag3-accion.activa-rojo { color: var(--red); }

/* Formulario de reporte dentro del panel */
.ag3-reporte-form {
  border: 1px solid var(--g200); border-radius: 8px;
  padding: 12px; margin-bottom: 6px; background: var(--g50);
}
.ag3-reporte-form .input { width: 100%; }
.ag3-ficha-h.primero { margin-top: 18px; }

/* Campo de API key con botón de ver/ocultar (mismo gesto que las contraseñas de la plataforma) */
.ag3-key-wrap { position: relative; display: flex; align-items: center; }
.ag3-key-wrap .input { width: 100%; padding-right: 34px; }
.ag3-key-ojo {
  position: absolute; right: 6px; border: 0; background: none; cursor: pointer;
  color: var(--g600); padding: 4px; line-height: 1;
}
.ag3-key-ojo:hover { color: var(--ag-acc, var(--blue)); }
.ag3-llm-ayuda { font-size: 11px; color: var(--g600); line-height: 1.45; margin: 4px 0 10px; }

/* Botones pequeños de acción dentro de los paneles (antes eran enlaces subrayados) */
.ag3-btn-mini {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--g300); border-radius: 6px; background: #fff;
  padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--g700); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ag3-btn-mini:hover { border-color: var(--ag-acc, var(--blue)); color: var(--ag-acc, var(--blue)); }
.ag3-btn-mini.primario { background: var(--ag-acc, var(--blue)); border-color: transparent; color: #fff; }
.ag3-btn-mini.primario:hover { filter: brightness(1.1); color: #fff; }
.ag3-btn-mini.peligro { color: var(--red); border-color: var(--g300); }
.ag3-btn-mini.peligro:hover { background: var(--red); border-color: var(--red); color: #fff; }
.ag3-btn-mini i { font-size: 12px; }

/* Tarifas por proveedor (panel LLM) */
.ag3-tarifa {
  border: 1px solid var(--g200); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fff;
}
.ag3-tarifa.activa { border-color: var(--ag-acc, var(--blue)); background: var(--ag-acc-soft, #0863A31A); }
.ag3-tarifa .input { width: 100%; margin-bottom: 4px; }
.ag3-tarifa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ag3-tarifa-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ag3-tarifa-sep {
  margin: 8px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--g600); border-top: 1px solid var(--g200); padding-top: 6px;
}
.ag3-tarifa-enuso {
  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ag-acc, var(--blue));
}
.ag3-tarifa-grid label { font-size: 10.5px; color: var(--g600); text-transform: uppercase; letter-spacing: .03em; }
.ag3-tarifa-nota { font-size: 11px !important; }
.ag3-tarifa-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.ag3-tarifa-badge { font-size: 10.5px; font-weight: 700; color: var(--ag-acc, var(--blue)); text-transform: uppercase; }
.ag3-link-rojo { color: var(--red) !important; }
.ag3-info-tabla tr.costo th, .ag3-info-tabla tr.costo td {
  border-top: 1px dashed var(--g300); padding-top: 6px; color: var(--ag-acc, var(--blue)); font-weight: 700;
}

/* Panel de descarga de conversaciones */
.ag3-formato {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--g200); border-radius: 8px; background: #fff;
  padding: 7px 10px; margin-bottom: 6px; transition: border-color .15s, background .15s;
}
.ag3-formato:hover { border-color: var(--ag-acc, var(--blue)); }
.ag3-formato.activo { border-color: var(--ag-acc, var(--blue)); background: var(--ag-acc-soft, #0863A31A); }
.ag3-formato-t { display: block; font-size: 13px; font-weight: 600; color: var(--g900); }
.ag3-formato-d { display: block; font-size: 11px; color: var(--g600); }

/* Sin scroll propio: que crezca y scrollee el panel completo (más cómodo de recorrer). */
.ag3-descarga-lista { margin-bottom: 12px; }
/* Mismo lenguaje que las tarjetas de tipografía de Configuración: borde suave siempre visible,
   acento al elegir. */
.ag3-descarga-item {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  margin-top: 5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--g200); background: #fff;
  transition: border-color .15s, background .15s;
}
.ag3-descarga-item:hover { border-color: var(--ag-acc, var(--blue)); }
.ag3-descarga-item.sel { border-color: var(--ag-acc, var(--blue)); background: var(--ag-acc-soft, #0863A31A); }
.ag3-descarga-item input { margin-top: 3px; flex-shrink: 0; }
.ag3-descarga-t {
  display: block; font-size: 12.5px; color: var(--g900); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ag3-descarga-d { display: block; font-size: 11px; color: var(--g600); margin-top: 1px; }

/* Tabla de consumo del panel de información */
.ag3-info-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.ag3-info-tabla th {
  text-align: left; font-weight: 500; color: var(--g700); padding: 4px 0; font-size: 12px;
}
.ag3-info-tabla td {
  text-align: right; font-variant-numeric: tabular-nums; color: var(--g900); padding: 4px 0;
}
.ag3-info-tabla tr.sub th, .ag3-info-tabla tr.sub td { color: var(--g600); font-size: 11px; padding-left: 8px; }
.ag3-info-tabla tr.total th, .ag3-info-tabla tr.total td {
  border-top: 1px solid var(--g200); font-weight: 700; color: var(--g900); padding-top: 6px;
}

/* Cerrar, al fondo del panel. Siempre en rojo Dédalo (no sigue el acento de la empresa: es una
   acción de salida y conviene que se vea igual en las tres). */
.ag3-panel-cerrar {
  display: block;
  margin: 20px 0 4px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--red);
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--w);
  text-align: center;
  cursor: pointer;
  transition: filter .15s;
}
.ag3-panel-cerrar:hover { filter: brightness(1.1); }

/* Aviso de «estoy consultando» (C.7): sustituye al preámbulo del modelo, que provocaba un
   saludo repetido al pegarse con la respuesta final. */
.ag3-consultando { display: flex; align-items: center; gap: 10px; color: var(--g600); }
.ag3-consultando > i { font-size: 18px; color: var(--ag-acc, var(--blue)); animation: agente-glow 1.6s ease-in-out infinite; }
.ag3-consultando-t { font-size: 13.5px; font-weight: 600; color: var(--g800); }
.ag3-consultando-d { font-size: 11.5px; color: var(--g600); font-variant: small-caps; }

.agente-pensando { color: #6B7280; font-size: 14px; }
.agente-dots span { animation: agente-dot 1.2s infinite; display: inline-block; }
.agente-dots span:nth-child(2) { animation-delay: .2s; }
.agente-dots span:nth-child(3) { animation-delay: .4s; }

/* Coincidencias del buscador dentro de las burbujas */
mark.agente-match { background: #FFE08A; border-radius: 3px; padding: 0 1px; }

/* Composer (estilo mockup: barra blanca con botón redondo de acento) */
.ag3-composer {
  min-height: 66px; background: var(--ag-panel); border-top: 1px solid var(--ag-border);
  display: flex; align-items: flex-end; gap: 12px; padding: 12px 20px 6px;
}
/* A.5: adjuntar FUNCIONAL (label + InputFile oculto) y alturas consistentes con el send (44px) */
.ag3-plus {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ag-border);
  background: none; color: var(--ag-muted); font-size: 17px; flex: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s;
  position: relative;
}
.ag3-plus:hover:not(.off) { border-color: var(--ag-acc); color: var(--ag-acc); }
.ag3-plus.off { opacity: .4; cursor: default; }
.ag3-plus-input { display: none; }
.ag3-adjunto {
  display: flex; align-items: center; gap: 8px;
  background: var(--ag-acc-soft); color: var(--ag-text);
  border-top: 1px solid var(--ag-border);
  font-size: 12.5px; padding: 8px 20px;
}
.ag3-adjunto.error { background: #FDEDED; color: var(--red, #C1272D); }
.ag3-adjunto .bi { color: var(--ag-acc); }
.ag3-adjunto.error .bi { color: var(--red, #C1272D); }
.ag3-adjunto span { flex: 1; min-width: 0; }
.ag3-adjunto button { border: none; background: none; cursor: pointer; color: var(--ag-muted); }
.ag3-adjunto button:hover { color: var(--red, #C1272D); }
.ag3-composer textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font: inherit; font-family: var(--agente-fuente, inherit);
  font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ag-text);
  min-height: 44px; max-height: 180px; padding: 12px 0; min-width: 0;
}
.ag3-composer textarea:focus, .ag3-composer textarea:focus-visible { box-shadow: none; outline: none; border: none; }
.ag3-send {
  flex-shrink: 0; width: 44px; height: 44px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ag-acc); color: #fff; font-size: 16px; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.ag3-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.ag3-send:disabled { opacity: .35; cursor: default; }
.ag3-stop { background: #1F2430; }
.ag3-footnote { text-align: center; font-size: 11px; color: var(--ag-muted); background: var(--ag-panel); padding: 0 0 8px; }

/* ============ Historial estilo "Chats" (derecha) ============ */
.ag3-chats {
  width: 310px; min-width: 310px; background: var(--ag-panel);
  border-left: 1px solid var(--ag-border);
  display: flex; flex-direction: column; min-height: 0;
}
.ag3-chats-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px 10px; }
.ag3-chats-head h2 { font-size: 18px; font-weight: 700; margin: 0; flex: 1; }
.ag3-chats-count {
  background: var(--ag-acc-soft); color: var(--ag-acc);
  font-size: 11px; font-weight: 700; min-width: 22px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 7px;
}
.ag3-chats-filtros { padding: 0 18px 10px; }
.ag3-search {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--ag-border); border-radius: 8px; padding: 0 10px; background: var(--ag-panel);
}
.ag3-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 12.5px; color: var(--ag-text); padding: 8px 0;
}
.ag3-search input:focus, .ag3-search input:focus-visible { box-shadow: none; outline: none; border: none; }
.ag3-search .bi { color: var(--ag-muted); font-size: 13px; }
.ag3-buscar-info { min-height: 16px; font-size: 11.5px; color: var(--ag-acc); padding: 0 20px 4px; }
.ag3-chats-lista { flex: 1; overflow-y: auto; min-height: 0; }
.ag3-chat-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--ag-border); position: relative; transition: .12s; }
.ag3-chat-item:hover { background: var(--ag-panel2); }
.ag3-chat-item.activo { background: var(--ag-acc); }
.ag3-chat-abrir {
  flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center;
  border: none; background: transparent; cursor: pointer; text-align: left; padding: 13px 0 13px 18px;
}
.ag3-chat-abrir:disabled { cursor: default; opacity: .6; }
.ag3-chat-av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--ag-border); padding: 3px;
  display: none; /* A.5: oculto por decisión del usuario (se veía cargado); el markup se queda */
}
.ag3-chat-body { flex: 1; min-width: 0; display: block; }
.ag3-chat-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ag3-chat-titulo {
  font-size: 13px; font-weight: 600; color: var(--ag-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag3-chat-hora { font-size: 11px; color: var(--ag-muted); flex: none; }
.ag3-chat-prev { display: block; font-size: 12px; color: var(--ag-muted); margin-top: 3px; }
.ag3-chat-item.activo .ag3-chat-titulo { color: #fff; }
.ag3-chat-item.activo .ag3-chat-hora, .ag3-chat-item.activo .ag3-chat-prev { color: rgba(255, 255, 255, .85); }
.ag3-chat-del {
  border: none; background: transparent; cursor: pointer; color: #C6CBD4;
  padding: 0 12px; font-size: 13px; opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.ag3-chat-item:hover .ag3-chat-del, .ag3-chat-item.activo .ag3-chat-del { opacity: 1; }
.ag3-chat-del:hover { color: var(--red, #C1272D); }
.ag3-chat-item.activo .ag3-chat-del { color: rgba(255, 255, 255, .8); }
.ag3-chat-item.activo .ag3-chat-del:hover { color: #fff; }

/* ===== A.4: cabecera («Nuevo chat» + avatar del usuario + modo libre) y panel LLM ===== */
.ag3-btn-nuevo {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ag-border); border-radius: 8px; background: var(--ag-panel);
  color: var(--ag-text); font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer;
  transition: .15s;
}
.ag3-btn-nuevo:hover:not(:disabled) { border-color: var(--ag-acc); color: var(--ag-acc); }
.ag3-btn-nuevo:disabled { opacity: .45; cursor: default; }
.ag3-user-av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--ag-border);
}
.ag3-user-av-ini {
  background: var(--ag-acc); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ag3-modo-libre {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--ag-border); border-radius: 8px; padding: 7px 11px;
  font-size: 12px; font-weight: 600; color: var(--ag-muted); user-select: none;
}
.ag3-modo-libre input { accent-color: var(--ag-acc); cursor: pointer; }
.ag3-modo-libre.on { border-color: var(--ag-acc); color: var(--ag-acc); background: var(--ag-acc-soft); }
.ag3-llm-origen { font-size: 12.5px; color: var(--ag-muted); margin-bottom: 4px; }
.ag3-llm-botones { display: flex; gap: 8px; margin-top: 14px; }
.ag3-llm-explica {
  margin-top: 14px; padding: 12px 14px; border: 1px solid var(--ag-border); border-radius: 10px;
  background: var(--ag-panel2); font-size: 12px; line-height: 1.6; color: var(--ag-muted);
}
.ag3-llm-explica b { color: var(--ag-text); }
/* Acceso directo al agente en el navbar (2026-08-08) */
.header-ia-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  transition: background .15s ease, transform .15s ease;
}
.header-ia-btn img { width: 26px; height: 26px; object-fit: contain; }
.header-ia-btn:hover { background: var(--g100, #F3F4F6); transform: translateY(-1px); }
.ag3-panel-body .input { width: 100%; margin-bottom: 4px; }
.ag3-fuente-actual {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--ag-border); border-radius: 10px; background: var(--ag-panel);
  padding: 10px 12px; cursor: pointer; margin-bottom: 6px; transition: .15s;
}
.ag3-fuente-actual:hover { border-color: var(--ag-acc); }
.ag3-fuente-actual .bi { color: var(--ag-muted); font-size: 13px; }

/* Opciones de fuente (Configuración; cada una se previsualiza con su propia fuente) */
.agente-fuentes { display: flex; flex-direction: column; gap: 6px; }
.agente-fuente-opcion {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; cursor: pointer;
  border: 1px solid var(--ag-border, #E7E9EE); border-radius: 10px; padding: 9px 12px;
}
.agente-fuente-opcion:hover { border-color: var(--ag-acc, #0863A3); }
.agente-fuente-opcion.activa { border-color: var(--ag-acc, #0863A3); background: var(--ag-acc-soft, #EAF3FA); }
.agente-fuente-opcion input { grid-row: span 2; accent-color: var(--ag-acc, #0863A3); }
.agente-fuente-nombre { font-weight: 600; font-size: 14px; }
.agente-fuente-muestra { grid-column: 2; font-size: 12.5px; color: #6B7280; }

/* Foto de perfil (modal Mi perfil + Sidebar, 2026-08-07) */
.profile-foto-row { display: flex; align-items: center; gap: 16px; }
.profile-foto-preview {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none;
  border: 1px solid var(--line, #E5E7EB); background: #F7F8FA;
  display: flex; align-items: center; justify-content: center;
}
.profile-foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-foto-iniciales { font-size: 26px; font-weight: 700; color: #fff; background: var(--blue, #0863A3); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.profile-foto-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.profile-foto-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.profile-foto-btn input[type=file], .profile-foto-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.user-avatar-foto { object-fit: cover; border-radius: 50%; }

@keyframes agente-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28, 30, 36, .25); }
  50% { box-shadow: 0 0 0 6px rgba(28, 30, 36, 0); }
}
@keyframes agente-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes agente-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1250px) {
  .ag3-chats { width: 280px; min-width: 280px; }
  .ag3-panel.open { width: 300px; min-width: 300px; }
  .ag3-panel-inner { width: 300px; min-width: 300px; }
}
@media (max-width: 900px) {
  .ag3-rail, .ag3-panel, .ag3-chats { display: none; } /* móvil: el chat manda; llega con la web responsiva */
  .ag3-msg, .ag3-msg.in { max-width: 92%; }
}

/* ===== Afinación del superagente (2026-08-11) ===== */
/* Diseño CUADRADO del módulo: rail y paneles de Apps sin border-radius (petición del usuario:
   este módulo es especial y se distingue del resto). Excepción: el avatar de la ficha. */
.ag3-rail-btn, .ag3-rail-badge, .ag3-panel * { border-radius: 0 !important; }
.ag3-panel .ag3-ficha-top img { border-radius: 50% !important; }
/* Excepción pedida por el usuario (2026-08-11): el switch de encendido/apagado SÍ va redondo. */
.ag3-panel .switch, .ag3-panel .switch .slider { border-radius: 999px !important; }
.ag3-panel .switch .slider::before { border-radius: 50% !important; }

/* Campos solo-lectura del panel LLM: gris y sin anillo de focus (que se note que no se editan). */
.ag3-ro { background: var(--g100, #F3F4F6) !important; color: var(--g600, #6B7280) !important; }
.ag3-ro:focus, .ag3-ro:focus-visible {
  outline: none !important; box-shadow: none !important; border-color: var(--ag-border, #E5E7EB) !important;
}

/* «Modelo activo» con switch de apagado a la derecha. */
.ag3-llm-activo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ag3-llm-activo-nom { flex: 1; min-width: 0; font-weight: 600; color: var(--ag-text); }

/* Configurar modelos: labels sin mayúsculas forzadas; precios estilo money (como el editor de
   items: $ + inputmode decimal, 4 decimales); conexión al 100% del ancho del card. */
.ag3-tarifa-grid label { text-transform: none; letter-spacing: normal; }
.ag3-precio { display: flex; align-items: center; gap: 5px; }
.ag3-precio > span { color: var(--g600, #6B7280); font-size: 11.5px; }
.ag3-tarifa-grid2 { display: flex; flex-direction: column; gap: 8px; }
.ag3-tarifa-grid2 > .input, .ag3-tarifa-grid2 > .ag3-key-wrap { width: 100%; }

/* Burbuja del usuario: el texto conserva sus saltos de línea; el footer (Copiar) no los hereda. */
.ag3-user-texto { display: block; white-space: pre-wrap; word-break: break-word; }
.ag3-bubble-user { white-space: normal; padding-bottom: 26px; } /* aire para la pastilla del avatar */
.ag3-bubble-user .ag3-acciones { border-top-color: rgba(255,255,255,.28); }
.ag3-bubble-user .ag3-accion { color: rgba(255,255,255,.85); }
.ag3-bubble-user .ag3-accion:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Reintentar (solo en la burbuja de error): a la derecha del footer y visible sin hover. */
.ag3-accion-reintentar { margin-left: auto; color: var(--ag-acc, var(--blue)); font-weight: 700; }
.ag3-bubble:has(.ag3-accion-reintentar) .ag3-acciones { opacity: 1; }

/* ===== Afinación superagente 2ª tanda (2026-08-11) ===== */
/* Estado del header como ag3-llm-activo-nom: negritas negras + circulito de color. */
.ag3-status-modelo { font-weight: 700; color: #888888; display: inline-flex; align-items: center; gap: 6px; } /* gris pedido por el usuario 2026-08-12 */
.ag3-status-modelo .bi-circle-fill { font-size: 12px; }
.ag3-status-modelo .bi-circle-fill.verde { color: var(--green, #046707); }
.ag3-status-modelo .bi-circle-fill.rojo { color: var(--red, #C1272D); }
.ag3-status-modelo.gris { color: var(--g500, #6B7280); }
.ag3-status-modelo.gris .bi-circle-fill { color: var(--g400, #9CA3AF); }

/* Avatar del usuario en el historial de chats (sin foto → iniciales). */
.ag3-chat-av-ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ag-acc-soft, #0863A31A); color: var(--ag-acc, var(--blue));
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}

/* Chip del adjunto en la burbuja del usuario (LOTE 6, 2026-08-12). */
.ag3-adj-chip-row { margin-top: 10px; }
.ag3-adj-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35);
  padding: 5px 10px; font-size: 12px; font-weight: 600; text-decoration: none; border-radius: 8px;
}
.ag3-adj-chip:hover { background: rgba(255,255,255,.3); color: #fff; }
.ag3-adj-chip.sin-archivo { opacity: .7; cursor: default; }
.ag3-adj-chip .bi { font-size: 13px; }