/* =====================================================================
   SPES CRM - sistema de diseno
   Estructura y comportamiento visual tomados de monday.com; la paleta de
   marca es la de SPES (azul #45689F / celeste #5B9BD5 del isotipo).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca SPES */
  --spes-azul:        #45689F;
  --spes-azul-oscuro: #34507D;
  --spes-azul-claro:  #5B9BD5;
  --spes-celeste:     #7FB3E0;
  --spes-celeste-sut: #EAF2FB;

  /* Neutros (escala monday) */
  --texto:            #323338;
  --texto-sec:        #676879;
  --texto-ter:        #9699A6;
  --borde:            #D0D4E4;
  --borde-sut:        #E6E9EF;
  --fondo:            #F6F7FB;
  --superficie:       #FFFFFF;
  --hover:            #F5F6F8;
  --seleccion:        var(--spes-celeste-sut);

  /* Estados: los colores de monday, que ya son lenguaje conocido */
  --verde:     #00C875;
  --naranja:   #FDAB3D;
  --rojo:      #E2445C;
  --morado:    #A25DDC;
  --gris:      #C4C4C4;
  --azul-info: #0073EA;

  /* Forma */
  --radio-sm: 4px;
  --radio:    8px;
  --radio-lg: 12px;
  --sombra-sm: 0 2px 6px rgba(0, 0, 0, .06);
  --sombra:    0 6px 20px rgba(0, 0, 0, .08);
  --sombra-lg: 0 16px 48px rgba(29, 41, 57, .16);

  /* Medidas del shell */
  --topbar-h:  56px;
  --sidebar-w: 248px;

  --fuente: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--azul-info); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--spes-azul-claro);
  outline-offset: 2px;
}

/* Scrollbar discreta, como la de monday */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C5C7D0;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #A9ACB8; background-clip: content-box; }

/* =====================================================================
   3. LOGIN
   ===================================================================== */
.login-pagina {
  display: grid;
  grid-template-columns: minmax(420px, 46%) 1fr;
  min-height: 100vh;
  background: var(--superficie);
}

/* --- Panel izquierdo: el formulario --- */
.login-panel {
  display: flex;
  flex-direction: column;
  padding: 40px 56px;
  overflow-y: auto;
}

.login-marca { margin-bottom: auto; }

/* 54px es el minimo al que el bajada "TOMORROW IS TODAY" del logotipo
   sigue siendo legible. Por debajo se convierte en una linea gris. */
.login-marca img { height: 54px; width: auto; display: block; }

.login-caja {
  width: 100%;
  max-width: 384px;
  margin: 40px auto;
}

.login-titulo {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 8px;
}

.login-bajada {
  font-size: 15px;
  color: var(--texto-sec);
  margin: 0 0 32px;
}

.campo { margin-bottom: 18px; }

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}

.campo input[type="text"],
.campo input[type="password"] {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.campo input::placeholder { color: var(--texto-ter); }

.campo input:hover { border-color: var(--texto-ter); }

.campo input:focus {
  outline: none;
  border-color: var(--spes-azul);
  box-shadow: 0 0 0 1px var(--spes-azul);
}

.campo-clave { position: relative; }

.campo-clave input { padding-right: 44px; }

.ver-clave {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--texto-ter);
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.ver-clave:hover { background: var(--hover); color: var(--texto-sec); }

.login-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 26px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-sec);
  cursor: pointer;
  user-select: none;
}

.check input { width: 16px; height: 16px; accent-color: var(--spes-azul); cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

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

.btn-primario {
  width: 100%;
  color: #fff;
  background: var(--spes-azul);
}

.btn-primario:hover { background: var(--spes-azul-oscuro); }

.btn-primario:disabled { background: var(--borde); color: var(--texto-ter); cursor: default; }

.btn-secundario {
  color: var(--texto);
  background: var(--superficie);
  border-color: var(--borde);
}

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

/* Borrado definitivo (solo administradores). Nace con el borde rojo y no relleno: en una
   barra de acciones, un boton rojo solido compite con la accion principal y termina
   apretandose sin querer. El relleno llega al pasar el mouse, cuando ya hubo intencion. */
.btn-peligro {
  color: var(--rojo);
  background: var(--superficie);
  border-color: var(--rojo);
}

.btn-peligro:hover { color: #fff; background: var(--rojo); }

.btn-peligro:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Texto bajo un campo. VIVIAN EN admin.css, y ese es el defecto que corrigen al mudarse:
   los formularios de Oportunidades, Leads, Visitas y Tareas cargan comercial.css o
   tareas.css, NO admin.css. El mensaje de validacion se pintaba en negro, del tamaño del
   texto normal y sin parecer un error. Un error que no se ve rojo no es un error. */
.campo-ayuda { font-size: 12px; color: var(--texto-ter); margin-top: 4px; }

.campo-error,
.validacion {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--rojo);
  margin-top: 4px;
}

/* Campo de dinero: el signo $ va FUERA del input, no dentro del texto. Dentro estorba al
   escribir (el cursor se le mete delante) y ensucia el valor que hay que limpiar despues. */
.campo-plata { display: flex; align-items: stretch; }

.campo-plata-signo {
  display: flex;
  align-items: center;
  padding: 0 11px;
  font-weight: 600;
  color: var(--texto-sec);
  background: var(--hover);
  border: 1px solid var(--borde);
  border-right: 0;
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
}

.campo-plata input {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-variant-numeric: tabular-nums;
}

/* El campo que el sistema acaba de rellenar solo (el vendedor que viene del cliente de
   SAP). Destello corto: un cambio fuera de la vista que nadie nota es un cambio que
   despues sorprende al guardar. */
.campo-sugerido {
  animation: sugerido 1.4s ease-out;
}

@keyframes sugerido {
  0%   { box-shadow: 0 0 0 0 rgba(69, 104, 159, .55); border-color: var(--spes-azul); }
  100% { box-shadow: 0 0 0 9px rgba(69, 104, 159, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .campo-sugerido { animation: none; border-color: var(--spes-azul); }
}

/* Aviso de error / validacion */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
}

.aviso svg { flex: none; margin-top: 1px; }

.aviso-error {
  color: #8B1F2F;
  background: #FCEBEE;
  border-color: #F5C2CA;
}

/* Advertencia: no fallo nada, pero lo que se esta viendo esta incompleto o tiene un
   reparo. En rojo se leeria como error y se dejaria de leer; en gris no se leeria. */
.aviso-alerta {
  color: #7A4A06;
  background: #FFF4E3;
  border-color: #F6D9A8;
}

/* `.aviso-ok` y `.aviso-info` VIVIAN EN admin.css, que cargan 10 vistas de 40.
   Resultado: el recuadro verde de "se guardo" del partial `_Avisos` —que usa TODA
   la aplicacion— y los doce `aviso-info` repartidos por el CRM salian sin color,
   como un borde transparente y fondo blanco. Es el defecto de §13 otra vez: un
   estilo de componente base escrito dentro del CSS de un modulo.

   El margen NO se trajo: `.aviso` ya trae el suyo y dos de las tres pantallas de
   administracion lo pisaban con `style=` inline, justamente porque no les servia. */
.aviso-ok {
  color: #0B5C36;
  background: #E4F7ED;
  border-color: #A9E3C6;
}

.aviso-info {
  color: #274C77;
  background: #EAF2FB;
  border-color: #C4DCF5;
}

/* La pildora con el numero de una cabecera: columnas de tablero, pestañas de
   detalle, listas. Mismo caso que los avisos — nacio en Administracion y hoy la
   usan veinte vistas, casi ninguna de ellas carga admin.css. */
.conteo {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-sec);
  background: var(--fondo);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-pie {
  margin-top: auto;
  padding-top: 32px;
  font-size: 12px;
  color: var(--texto-ter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Panel derecho: la marca y la vista previa del tablero --- */
.login-vitrina {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 100% 0%,
              var(--spes-azul-claro) 0%, var(--spes-azul) 55%, var(--spes-azul-oscuro) 100%);
}

/* Halos suaves, eco del isotipo */
.login-vitrina::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -12%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}

.login-vitrina::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -18%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 66%);
  pointer-events: none;
}

.vitrina-contenido {
  position: relative;
  width: 100%;
  max-width: 520px;
  color: #fff;
}

.vitrina-titulo {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 12px;
}

.vitrina-texto {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 28px;
  max-width: 42ch;
}

/* Los modulos que el usuario va a encontrar adentro.
   Reemplazo del mini tablero decorativo que habia aca: mostraba un pipeline con empresas y
   montos inventados. Se saco al abrir el CRM al equipo — la primera pantalla del sistema no
   puede ser un dato falso (mismo criterio de INICIO_CLAUDE.md §1).
   Los estilos del tablero (.vt-*) se borraron con el: dejarlos sin consumidor es garantizar
   que dentro de un ano nadie sepa si se pueden tocar. */
.vitrina-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vl-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radio);
  /* Un velo claro sobre el fondo de marca, en vez de tarjetas blancas: las tarjetas
     compiten con el formulario de login, que es lo unico que hay que hacer aca. */
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .10);
}

.vl-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-sm);
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.vl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.vl-txt strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.vl-txt span {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 11px;
  white-space: nowrap;
}

.pill-verde   { background: var(--verde); }
.pill-naranja { background: var(--naranja); }
.pill-rojo    { background: var(--rojo); }
.pill-morado  { background: var(--morado); }
.pill-azul    { background: var(--azul-info); }
.pill-gris    { background: var(--gris); }

/* Bajo 980px la vitrina se va y queda solo el formulario */
@media (max-width: 980px) {
  .login-pagina { grid-template-columns: 1fr; }
  .login-vitrina { display: none; }
  .login-panel { padding: 28px 24px; }
  .login-caja { margin: 32px auto; }
  .login-titulo { font-size: 26px; }
}

/* =====================================================================
   4. SHELL DE LA APLICACION (topbar + sidebar), estilo monday
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar contenido";
  height: 100vh;
}

/* --- Topbar --- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde-sut);
  z-index: 30;
}

/* En la barra superior va solo el isotipo: el logotipo completo, a 30px de
   alto, deja la bajada ilegible. El nombre del producto lo pone el texto. */
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--radio-sm);
  text-decoration: none;
}

.topbar-logo:hover { background: var(--hover); text-decoration: none; }

.topbar-logo img { height: 28px; width: 28px; }

.topbar-logo span {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--spes-azul-oscuro);
}

.topbar-buscador {
  flex: 1;
  max-width: 460px;
  position: relative;
}

.topbar-buscador input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 36px;
  font-family: inherit;
  font-size: 13px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
}

.topbar-buscador input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--spes-azul);
}

.topbar-buscador svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--texto-ter);
  pointer-events: none;
}

.topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.icono-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--texto-sec);
  border-radius: var(--radio-sm);
  cursor: pointer;
}

.icono-btn:hover { background: var(--hover); color: var(--texto); }

.avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--spes-azul);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  flex: none;
}

/* Menu del usuario */
.usuario-menu { position: relative; }

.usuario-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 244px;
  padding: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  z-index: 40;
}

.usuario-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--borde-sut);
  margin-bottom: 6px;
}

.usuario-cab .avatar { width: 36px; height: 36px; font-size: 13px; cursor: default; }

.usuario-nombre { font-size: 13px; font-weight: 600; color: var(--texto); }
.usuario-detalle { font-size: 12px; color: var(--texto-sec); }

.usuario-panel button[type="submit"] {
  width: 100%;
  height: 36px;
  justify-content: flex-start;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.usuario-panel button[type="submit"]:hover { background: var(--hover); }

/* --- Sidebar --- */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borde-sut);
  overflow: hidden;
}

/* Selector de espacio de trabajo */
.ws {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--borde-sut);
}

.ws-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--spes-azul-claro), var(--spes-azul));
  border-radius: 6px;
}

.ws-txt { flex: 1; min-width: 0; line-height: 1.25; }
.ws-txt strong { display: block; font-size: 13px; font-weight: 600; }
.ws-txt span { display: block; font-size: 11.5px; color: var(--texto-ter); }

.ws-colapsar {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-ter);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: transform .18s ease;
}

.ws-colapsar:hover { background: var(--hover); color: var(--texto); border-color: var(--borde-sut); }

/* Filtro del menu */
.menu-filtro { position: relative; padding: 10px 10px 6px; }

.menu-filtro svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-40%);
  color: var(--texto-ter);
  pointer-events: none;
}

.menu-filtro input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  font-family: inherit;
  font-size: 13px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
}

.menu-filtro input:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--spes-azul);
}

.menu-cuerpo { flex: 1; overflow-y: auto; padding: 0 8px 8px; }

/* Secciones plegables */
.menu-seccion { margin-bottom: 2px; }

.menu-seccion-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 8px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-ter);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.menu-seccion-cab:hover { color: var(--texto-sec); }

.menu-seccion-cab .chev { transition: transform .18s ease; }

.menu-seccion.plegada .menu-seccion-cab .chev { transform: rotate(-90deg); }
.menu-seccion.plegada .menu-items { display: none; }

.menu-sin-resultados {
  padding: 16px 12px;
  font-size: 12.5px;
  color: var(--texto-ter);
  text-align: center;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  margin-bottom: 1px;
  font-size: 13.5px;
  color: var(--texto);
  border-radius: var(--radio-sm);
  text-decoration: none;
  white-space: nowrap;
}

.nav-item:hover { background: var(--hover); text-decoration: none; }

/* La franja izquierda del item activo es el gesto de monday para "estas aca" */
.nav-item.activo {
  background: var(--seleccion);
  color: var(--spes-azul-oscuro);
  font-weight: 600;
}

.nav-item.activo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--spes-azul);
}

.nav-item svg { flex: none; color: var(--texto-sec); }
.nav-item.activo svg { color: var(--spes-azul); }

.nav-txt { overflow: hidden; text-overflow: ellipsis; }

.nav-item.deshabilitado {
  color: var(--texto-ter);
  cursor: default;
  pointer-events: none;
}

.nav-item.deshabilitado svg { color: var(--borde); }

.nav-proximamente {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-ter);
  background: var(--fondo);
  border-radius: 3px;
  padding: 2px 6px;
}

.sidebar-pie {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--texto-ter);
  border-top: 1px solid var(--borde-sut);
}

.sidebar-pie .pie-corto { display: none; }

/* =====================================================================
   Sidebar contraido (solo iconos), como el de monday.
   El ancho lo controla la variable --sidebar-w sobre .app, asi el grid se
   reacomoda solo y no hay que duplicar el layout.
   ===================================================================== */
.app.menu-corto { --sidebar-w: 60px; }

.app.menu-corto .ws { justify-content: center; padding: 12px 6px; }
.app.menu-corto .ws-txt { display: none; }
.app.menu-corto .ws-colapsar { position: absolute; left: 40px; top: 68px; z-index: 5; background: var(--superficie); border-color: var(--borde-sut); }
.app.menu-corto .ws-colapsar svg { transform: rotate(180deg); }

.app.menu-corto .menu-filtro { display: none; }
.app.menu-corto .menu-seccion-cab { justify-content: center; padding: 10px 0 4px; }
.app.menu-corto .menu-seccion-cab span,
.app.menu-corto .menu-seccion-cab .chev { display: none; }

/* Una linea separa las secciones cuando no se ven sus titulos */
.app.menu-corto .menu-seccion + .menu-seccion { border-top: 1px solid var(--borde-sut); padding-top: 6px; }

.app.menu-corto .nav-item { justify-content: center; padding: 0; }
.app.menu-corto .nav-txt,
.app.menu-corto .nav-proximamente,
.app.menu-corto .badge { display: none; }

.app.menu-corto .sidebar-pie { text-align: center; padding: 10px 4px; }
.app.menu-corto .pie-largo { display: none; }
.app.menu-corto .pie-corto { display: inline; }

/* Etiqueta flotante al pasar el mouse: sin ella, 13 iconos sueltos no se
   distinguen entre si. */
.app.menu-corto .nav-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #323338;
  border-radius: var(--radio-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 60;
}

.app.menu-corto .nav-item:hover::after { opacity: 1; }

/* --- Contenido --- */
.contenido {
  grid-area: contenido;
  overflow-y: auto;
  padding: 24px 28px 48px;
}

.pagina-cab { margin-bottom: 22px; }
.pagina-titulo { font-size: 24px; font-weight: 700; }
.pagina-bajada { font-size: 14px; color: var(--texto-sec); margin-top: 4px; }

/* Tarjetas de indicadores */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi {
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

.kpi-rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

.kpi-valor {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.kpi-nota { font-size: 12px; color: var(--texto-ter); margin-top: 2px; }

/* Color del numero del KPI. Antes se escribia con style="color:... !important" en cada
   vista; el !important estaba justamente porque competia con reglas de modulo. Como
   variante de un componente base, va aca (ver CLAUDE_CRM.md §13). */
.kpi-verde   { color: var(--verde); }
.kpi-naranja { color: var(--naranja); }
.kpi-rojo    { color: var(--rojo); }

/* El guion de "este dato no existe". Lo usan Tareas, Usuarios y la sincronizacion con SAP,
   asi que es compartido: nacio como .tk-sin en tareas.css y desde ahi se copio a la lista
   de usuarios, que no carga ese archivo y lo mostraba sin formato. */
.dato-vacio { color: var(--texto-ter); }

/* Tarjeta / tablero */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}

.tarjeta-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--borde-sut);
}

.tarjeta-titulo { font-size: 15px; font-weight: 700; }
.tarjeta-cuerpo { padding: 18px; }

/* Tablero estilo monday */
.tablero { width: 100%; overflow-x: auto; }

.tablero table { width: 100%; min-width: 760px; border-collapse: collapse; }

.tablero th {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-sec);
  text-align: left;
  border-bottom: 1px solid var(--borde-sut);
  white-space: nowrap;
}

.tablero td {
  padding: 9px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--borde-sut);
}

.tablero tbody tr:hover td { background: var(--hover); }

/* Cada columna se encoge a su contenido y el sobrante se lo lleva col-relleno,
   que va vacia al final. Sin ella, el nombre del negocio se estiraba y dejaba
   un hueco enorme entre esa columna y el resto en pantallas anchas. */
.tablero .col-estado,
.tablero .col-fecha,
.tablero .col-monto,
.tablero .col-persona,
.tablero .col-avance { width: 1%; white-space: nowrap; }

.tablero .col-nombre {
  width: 1%;
  min-width: 240px;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablero .col-relleno { width: auto; padding: 0; }

.tablero .col-monto { text-align: right; font-variant-numeric: tabular-nums; }

.grupo-cab td {
  padding-top: 18px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 0;
}

.grupo-punto {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* La franja de color del grupo, a la izquierda de cada fila */
.fila-item td:first-child { border-left: 4px solid var(--gris); }

/* El relleno no lleva la linea divisoria: cortarla deja claro donde
   terminan las columnas con datos. */
.tablero .col-relleno { border-bottom-color: transparent; }

.persona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
  background: var(--spes-azul-claro);
}

/* Avance: barra de ancho fijo y el porcentaje AL LADO, no encima.
   Centrado sobre la barra, el texto blanco quedaba sobre el tramo gris
   cuando el avance era bajo y no se leia. */
.avance { display: flex; align-items: center; gap: 10px; }

.barra {
  position: relative;
  width: 132px;
  height: 16px;
  border-radius: 3px;
  background: var(--borde-sut);
  overflow: hidden;
}

.barra span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--verde);
}

.avance-pct {
  width: 34px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-sec);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Aviso de "en construccion" del tablero */
.nota-obra {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: #6B4A00;
  background: #FFF6E0;
  border: 1px solid #FBE3A8;
  border-radius: var(--radio);
}

.nota-obra svg { flex: none; margin-top: 1px; color: var(--naranja); }

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "contenido";
  }
  .sidebar { display: none; }
  .contenido { padding: 18px 16px 40px; }
  .topbar-buscador { max-width: none; }
}

/* =====================================================================
   7. DESPLEGABLE DE AUTOCOMPLETE
   Compartido: lo usan la Ficha 360 (buscador de clientes) y Tareas
   (cliente y productos). Vivia en ficha-360.css y por eso el desplegable
   de Tareas salia sin formato — el nombre y el codigo pegados en una
   sola linea. Un estilo que usan dos modulos va en el compartido.
   El prefijo fc- se conserva para no tocar las dos vistas.
   ===================================================================== */
.fc-sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  z-index: 50;
}

.fc-sug {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--borde-sut);
}

.fc-sug:last-child { border-bottom: 0; }
.fc-sug:hover, .fc-sug.sel { background: var(--seleccion); }

/* El nombre en su propia linea; el codigo y el RUT debajo, en gris */
.fc-sug strong { display: block; font-size: 13.5px; font-weight: 600; }
.fc-sug span { display: block; font-size: 12px; color: var(--texto-sec); }

/* =====================================================================
   8. CONTROLES DE FORMULARIO  (sistema de diseño, SIN prefijo de modulo)
   Estos estilos vivian dentro de cada modulo (.tk-form textarea,
   .campo select...) y por eso una pantalla que no estuviera en ese
   contenedor mostraba los controles crudos del navegador: cajas con
   borde negro, nada que ver con el resto.
   Un control basico se estila UNA vez, aca, y funciona en todas partes.
   ===================================================================== */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  height: 40px;
  padding: 0 12px;
}

textarea {
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 76px;
}

input::placeholder,
textarea::placeholder { color: var(--texto-ter); }

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--texto-ter); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--spes-azul);
  box-shadow: 0 0 0 1px var(--spes-azul);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--fondo);
  color: var(--texto-ter);
  cursor: not-allowed;
}

/* La flecha nativa del select no combina con nada. Se reemplaza por una
   propia en SVG, del mismo gris que el resto de los iconos. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}

/* Los numericos van alineados a la derecha: se comparan de un vistazo */
input[type="number"] { text-align: right; }

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--spes-azul);
  cursor: pointer;
}

/* Ancho automatico para los controles que no deben ocupar toda la fila */
.control-corto { width: auto; min-width: 120px; }

/* Variantes del boton. Estaban en admin.css y por eso .auto no hacia efecto en
   Tareas: el boton "Guardar gestion" salia a todo el ancho porque .btn-primario
   trae width:100%. Una variante de un componente base va con el componente. */
.btn.auto { width: auto; }
.btn.chico { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; }

/* Los dos campos con icono adentro necesitan mas padding a la izquierda.
   Llevan el selector de atributo para GANARLE a las reglas base de §8: con
   solo la clase empatan en especificidad, gana la que va despues en el
   archivo, y el icono quedaba encima del texto. */
.topbar-buscador input[type="search"] { padding-left: 36px; }
.menu-filtro input[type="text"] { padding-left: 30px; height: 32px; }

/* Enlace del menu de usuario: mismo aspecto que el boton de salir */
.usuario-enlace {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto);
  border-radius: var(--radio-sm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.usuario-enlace:hover { background: var(--hover); text-decoration: none; }

/* ------------------------------------------------------------------
   Tablero por columnas (estilo monday)
   Lo usan Visitas, Leads y Oportunidades: por eso vive aca y no en el
   CSS de un modulo (CLAUDE_CRM.md §13). Nacio en visitas.css como
   `.vs-tablero` y se generalizo al aparecer el segundo consumidor.

   El color de la franja superior lo pone la vista por `style=`, desde
   la funcion Color() del estado. Duplicarlo aca garantizaria que un dia
   digan cosas distintas.
   ------------------------------------------------------------------ */
.cols-tablero {
  display: grid;
  gap: 14px;
  align-items: start;
}

.col-k {
  background: var(--fondo);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  overflow: hidden;
}

.col-k-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--superficie);
  border-top: 3px solid var(--gris);
  border-bottom: 1px solid var(--borde-sut);
}

.col-k-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-sec);
}

/* Monto o dato secundario de la columna, alineado a la derecha */
.col-k-monto {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-ter);
  font-variant-numeric: tabular-nums;
}

.col-k-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 60px;
}

.col-k-vacia {
  margin: 0;
  padding: 8px 2px;
  font-size: 12.5px;
  color: var(--texto-ter);
}

/* --- Tarjeta dentro de una columna --- */
.tarj-k {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-left: 3px solid transparent;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}

/* `text-decoration` va aca y no solo en `.tarj-k`: la regla base `a:hover`
   (§8) subraya cualquier enlace y tiene MAS especificidad que una sola
   clase, asi que le ganaba y subrayaba la tarjeta entera al pasar por
   encima. Con `.tarj-k:hover` empata en clases y gana por ir despues. */
.tarj-k:hover {
  box-shadow: var(--sombra);
  transform: translateY(-1px);
  text-decoration: none;
}

.tarj-k.alerta { border-left-color: var(--rojo); }
.tarj-k.destacada { border-left-color: var(--azul-info); }

.tarj-k-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.3;
}

.tarj-k-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-sec);
  font-variant-numeric: tabular-nums;
}

.tarj-k-monto {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.tarj-k-pie {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 11px;
  color: var(--texto-ter);
}

.chip-k {
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 600;
}

.chip-k-azul  { background: var(--azul-info); color: #fff; }
.chip-k-rojo  { background: var(--rojo); color: #fff; }
.chip-k-verde { background: #E6F7EF; color: #00794A; }
.chip-k-suave { background: var(--spes-celeste-sut); color: var(--azul-info); }
/* Prospecto: el morado es el mismo que marca "Calificado" en el tablero de leads, asi
   que el color ya significa "todavia no es cliente" en el resto del CRM. */
.chip-k-morado { background: #F4EAFB; color: #7B3BB5; }

/* ------------------------------------------------------------------
   Arrastrar tarjetas entre columnas (wwwroot/js/tablero.js)

   Va aca y no en comercial.css porque estiliza `.tarj-k` y `.col-k`,
   que son compartidas (§13). Solo se activa en los tableros que
   declaran `data-tablero`, asi que el tablero de Visitas no cambia.
   ------------------------------------------------------------------ */
/* La pista solo aparece si el arrastre realmente esta andando: la enciende
   tablero.js. Prometer un gesto que el navegador no soporta es peor que no
   decir nada. */
.pista-arrastre { display: none; }

body.tablero-vivo .pista-arrastre {
  display: inline;
  margin-left: 4px;
  font-size: 12.5px;
  color: var(--texto-ter);
}

[data-tablero] [data-tarjeta] {
  cursor: grab;
  /* Evita que el celular seleccione el texto al mantener apretado, que
     es justo el gesto con el que se levanta la tarjeta. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.arrastrando-tarjeta { cursor: grabbing; }
body.arrastrando-tarjeta * { cursor: grabbing !important; }

/* La tarjeta original desaparece mientras su copia sigue al puntero */
.tarj-oculta { display: none !important; }

/* La copia que va pegada al dedo o al raton */
.tarj-fantasma {
  position: fixed;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
  transform: rotate(1.8deg) scale(1.02);
  box-shadow: var(--sombra-lg);
  opacity: .95;
}

/* El espacio que queda reservado en la columna de destino */
.tarj-hueco {
  border: 2px dashed var(--borde);
  border-radius: var(--radio-sm);
  background: rgba(0, 115, 234, .04);
}

/* La columna bajo el puntero */
.col-k.col-destino { border-color: var(--azul-info); }
.col-k.col-destino .col-k-cuerpo { background: var(--spes-celeste-sut); }

/* Mientras el servidor confirma */
.tarj-moviendo { opacity: .55; }

/* Confirmado: un destello verde y se apaga. Es la unica senal de que
   el cambio quedo guardado, porque la pagina no recarga. */
.tarj-lista { animation: tarj-ok .9s ease; }

@keyframes tarj-ok {
  0%   { box-shadow: 0 0 0 2px var(--verde); }
  100% { box-shadow: var(--sombra-sm); }
}

/* Rechazado: vuelve a su lugar con un destello rojo */
.tarj-vuelve { animation: tarj-mal .5s ease; }

@keyframes tarj-mal {
  0%, 100% { box-shadow: var(--sombra-sm); }
  50%      { box-shadow: 0 0 0 2px var(--rojo); }
}

@media (prefers-reduced-motion: reduce) {
  .tarj-fantasma { transform: none; }
  .tarj-lista, .tarj-vuelve { animation: none; }
}

/* Aviso flotante del tablero. No puede usar TempData ni `_Avisos`
   porque no hay recarga: el resultado del arrastre se dice aca. */
.tbl-aviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2100;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 18px;
  background: var(--texto);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.tbl-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.tbl-aviso.malo { background: var(--rojo); }

/* --- Barra de filtros, tambien compartida --- */
.filtros-barra {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde-sut);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

.filtros-barra .campo { margin: 0; min-width: 150px; }
.filtros-barra .acciones { display: flex; gap: 8px; margin-left: auto; }

/* --- Cabecera de pagina con acciones a la derecha --- */
.cab-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cab-pagina .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .filtros-barra .acciones { margin-left: 0; }
}

/* ------------------------------------------------------------------
   Pantalla de detalle: contenido + columna lateral
   La usan Visitas, Leads y Oportunidades. Nacio en visitas.css como
   `.vs-columnas` y se generalizo al tercer consumidor (§13).
   ------------------------------------------------------------------ */
.detalle-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

/* Lista de datos etiqueta/valor de la columna lateral */
.lista-datos { margin: 0; }

.lista-datos dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-ter);
  margin-top: 12px;
}

.lista-datos dt:first-child { margin-top: 0; }

.lista-datos dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--texto);
  line-height: 1.4;
}

/* Un <details> usado como boton desplegable: el summary lleva las clases
   de .btn, asi que hay que sacarle la flecha nativa. */
.desplegable summary { list-style: none; cursor: pointer; }
.desplegable summary::-webkit-details-marker { display: none; }

.form-chico { margin-top: 10px; }
.form-chico .campo { margin-bottom: 8px; }

/* Separador entre datos de una bajada: "Estado · Codigo · Origen" */
.sep-punto { color: var(--texto-ter); margin: 0 4px; }

/* Rojo de "esto esta vencido / fuera de rango". Lo usan varios modulos. */
.texto-alerta { color: var(--rojo); font-weight: 600; }

/* Numeros de tabla alineados a la derecha y con cifras de ancho fijo */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Subtitulo dentro de un formulario largo */
.form-seccion {
  margin: 22px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-sut);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-ter);
}

@media (max-width: 1100px) {
  .detalle-cols { grid-template-columns: 1fr; }
}