/* ---------- Identidad Expert Data (se carga después de estilos.css) ----------
   Fuente: presentación corporativa y normativa de marca (consultoria-expert-data:diseno-marca).
   Paleta: primario #102A3F, acento #2CAD6E, datos #43A4DC, neutro cálido #DEDCAA. Archivo en títulos, Montserrat en cuerpo.
   Los colores que llevan texto se oscurecen lo justo para AA (4.5:1); el tono de marca se conserva en fondos y trazos. */

@font-face { font-family: "Archivo"; src: url("archivo-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("montserrat-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("montserrat-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --marca: #102A3F; --marca-verde: #2CAD6E; --marca-azul: #43A4DC; --marca-calido: #DEDCAA;
  --sobre-marca: #FFFFFF; --sobre-marca-suave: #C9D3DC;
  --f-titulo: "Archivo", "Montserrat", system-ui, sans-serif;
  --f-cuerpo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fondo: #FAFAF8; --superficie: #FFFFFF; --borde: #E4E3DC; --texto: #102A3F; --suave: #5A6B78;
  --primario: #102A3F; --primario-2: #1D4566; --sobre-primario: #FFFFFF;
  --enlace: #1A6496;                       /* azul de datos oscurecido para texto (≈6:1 sobre blanco) */
  --ed: #EAF4FB; --usuario: #102A3F; --sistema: #F5F4E8;
  --exito: #1B7A4C; --n4: #1B7A4C; --n3: #1A6496;
  --t-ok: #1B7A4C; --t-info: #1A6496;
  --construible: #1B7A4C;
  --radio: 12px; --sombra: 0 1px 2px rgba(16, 42, 63, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0B1D2C; --superficie: #102A3F; --borde: #24425B; --texto: #F1F0E4; --suave: #A9B8C4;
    --primario: #43A4DC; --primario-2: #6BB8E6; --sobre-primario: #102A3F;
    --enlace: #7CC0EA;
    --ed: #17364F; --usuario: #1D4A6E; --sistema: #26291F;
    --exito: #1B7A4C; --n4: #1B7A4C; --n3: #2470A3;  /* #2C7DB5 daba 4.46:1 con texto blanco */
    --t-ok: #6FD39A; --t-info: #8CC8EE;
    --carril: #0E2436; --carril-2: #12293C;
  }
}

/* Tipografía: dos pesos por familia (Montserrat 400/600, Archivo 600) */
body { font-family: var(--f-cuerpo); font-size: 15px; line-height: 1.6; }
b, strong { font-weight: 600; }
h1, .titulo-vacio, .dialogo h2, .m-vacio h2, .vacio h1 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.005em; }
.cabecera-proyecto h1, .hilo-centro .cabecera-proyecto h1 { font-size: 1.25rem; }
/* Rótulos de sección: eyebrow de la marca (mayúsculas solo aquí, con 0.08em) */
h3, h2.rotulo, .insp-cab h2 { font-family: var(--f-cuerpo); font-weight: 600; letter-spacing: .08em; color: var(--suave); }
#m-svg { font-family: var(--f-cuerpo); }

/* Enlaces y acciones de texto en azul de datos */
.enlace, .estado-ed a, .descargas a { color: var(--enlace); }
:focus-visible { outline-color: var(--enlace); }

/* Botones */
.btn { border-radius: 8px; font-weight: 600; }
.btn.primario { background: var(--primario); color: var(--sobre-primario); }
.btn.primario:hover:not(:disabled) { background: var(--primario-2); }
.btn.secundario { color: var(--primario); border-color: var(--primario); }
.btn.exito { background: var(--exito); }
.btn.fantasma { border-color: var(--borde); }

/* La navegación (barra lateral y barra superior) vive en estilos.css, sección "Estructura tipo SaaS"; usa los tokens de arriba. */

/* Tarjetas y paneles: superficie blanca, borde fino, radio de 12 px */
.tarjeta, .kpi, .accion-card, .dialogo { border-radius: var(--radio); box-shadow: var(--sombra); }
.lista, .cabecera-proyecto, .m-barra { background: var(--superficie); }
.accion-card { border-left-color: var(--marca-azul); }
.accion-card .ico { color: var(--enlace); }
.accion-card b { font-family: var(--f-titulo); color: var(--texto); }
.accion-card:hover { background: var(--ed); }

/* Conversación */
.msg { border-radius: 12px; box-shadow: none; border: 1px solid var(--borde); }
.msg.usuario { border-color: transparent; }
.msg.ed { border-color: transparent; }

/* Pestañas del modelo y lista de proyectos: indicador en azul de datos */
.m-pestanas button.activa { color: var(--texto); border-bottom-color: var(--marca-azul); }
.lista li button.activo, .vista-hilos .lista li a.activo { background: var(--ed); border-color: transparent; box-shadow: inset 3px 0 0 var(--marca-azul); }

/* Login (diseño "Login Expert Data", variante dividida): lienzo con el logotipo formado por documentos a la izquierda,
   acceso sobre blanco a la derecha. Siempre en claro: el lienzo dibuja hojas blancas con tinta azul marino. */
.login { color-scheme: light; display: flex; flex-wrap: wrap; min-height: 100vh; padding: 0; place-items: initial; background: #FFFFFF; color: #102B40; }
.login-lienzo { flex: 1 1 560px; min-height: 420px; position: relative; background: #EEF1F3; overflow: hidden; }
.login-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.login-lado { flex: 1 1 400px; max-width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 32px; gap: 40px; }
.login-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.login-titulo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.login-titulo h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; color: #102B40; }
.login-titulo p { margin: 0; font-size: 15px; line-height: 1.5; color: #5A6B78; }
.login-campos { display: flex; flex-direction: column; gap: 8px; }
.login-caja label { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #102B40; }
.login-campos label:first-child, .login-campos .nota + label { margin-top: 0; }
.login-caja input { height: 48px; padding: 0 14px; border: 1px solid #7F8E9B;  /* el #C3CDD6 del diseño daba 1.6:1; un campo pide 3:1 */ border-radius: 6px; font: inherit; font-size: 15px; letter-spacing: normal; text-align: left; color: #102B40; background: #FFFFFF; }
.login-caja input:focus-visible { outline: 0; border-color: #102B40; box-shadow: 0 0 0 3px rgba(68, 164, 222, .35); }
.login-caja input::placeholder { color: #5A6B78; }
.campo-contrasena { position: relative; display: flex; }
.campo-contrasena input { flex: 1; min-width: 0; padding-right: 92px; }
.ver-contrasena { position: absolute; right: 4px; top: 4px; height: 40px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #2E6F9E; cursor: pointer; }
.ver-contrasena:hover { background: #EEF1F3; }
@media (pointer: coarse) { .ver-contrasena { height: 44px; top: 2px; } }
.login-caja .btn.primario { height: 50px; border-radius: 6px; font-size: 16px; background: #102B40; color: #FFFFFF; }
.login-caja .btn.primario:hover:not(:disabled) { background: #1B3F5C; }
.login-caja .error { color: #B3261E; font-size: 14px; margin: 0; min-height: 0; }
.login-caja .error:empty { display: none; }
.login-caja .nota { color: #5A6B78; font-size: 13px; margin: 0; }
.login-pie { margin: 0; font-size: 12px; color: #5A6B78; }
/* Mejoras del login: rótulo del producto, frase de valor sobre el lienzo y aviso de Bloq Mayús (el logotipo ya lo forma el lienzo) */
.login-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #1A6496; }
.login-lema { position: absolute; left: 32px; bottom: 28px; max-width: min(460px, calc(100% - 64px)); margin: 0; padding: 14px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .92); border: 1px solid #DDE3E8; color: #102B40; font-size: 15px; line-height: 1.5; }
.login .bloq-mayus { margin: 2px 0 0; color: #8A5600; font-size: 13px; }
@media (max-width: 700px) { .login-lema { display: none; } }
.login :focus-visible { outline-color: #102B40; }
@media (max-width: 700px) {  /* en celular el lienzo queda arriba, más bajo, y el acceso debajo */
  .login-lienzo { flex-basis: 100%; min-height: 240px; }
  .login-lado { padding: 32px 16px; gap: 28px; }
}

/* Leyenda del diagrama: el gap no llega a través de <details style="display:contents">; separación explícita */
@media (min-width: 701px) { .m-ley-items .ley { margin-right: .9rem; } }

/* Las pantallas internas (Inicio, Proyectos, Conversaciones, Tickets, Mi cuenta, Administración) viven en pantallas.css. */