:root {
  --azul-oscuro: #1a2332;
  --azul-medio: #2a3a52;
  --acento: #2f81f7;
  --acento-suave: #e8f1fe;
  --verde: #1a7f5a;
  --rojo: #c0392b;
  --texto: #1f2933;
  --texto-suave: #6b7684;
  --fondo: #f5f7fa;
  --borde: #e1e5ea;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

.oculto { display: none !important; }

/* ---------- LOGIN ---------- */
.pantalla-login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio));
}
.tarjeta-login {
  background: var(--blanco);
  padding: 2.5rem;
  border-radius: 12px;
  width: 320px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.tarjeta-login h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
.subtitulo { color: var(--texto-suave); margin: 0 0 1.5rem; font-size: .9rem; }
.tarjeta-login label { display: block; font-size: .8rem; margin: .8rem 0 .3rem; color: var(--texto-suave); }
.tarjeta-login input {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--borde); border-radius: 8px; font-size: .95rem;
}
.tarjeta-login button {
  width: 100%; margin-top: 1.3rem; padding: .7rem; background: var(--acento); color: white;
  border: none; border-radius: 8px; font-size: .95rem; cursor: pointer; font-weight: 600;
}
.tarjeta-login button:hover { background: #1f6fe0; }
.mensaje-error { color: var(--rojo); font-size: .85rem; min-height: 1.2em; }

/* ---------- LAYOUT APP ---------- */
.app { display: flex; height: 100vh; }

.barra-lateral {
  width: 220px;
  background: var(--azul-oscuro);
  color: white;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0;
  flex-shrink: 0;
}
.logo { font-weight: 700; font-size: 1.05rem; padding: 0 1.2rem 1.2rem; }
.barra-lateral nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.nav-item {
  background: none; border: none; color: #b8c2d0; text-align: left;
  padding: .7rem 1.2rem; cursor: pointer; font-size: .9rem; border-left: 3px solid transparent;
  appearance: none; -webkit-appearance: none; font-family: inherit; opacity: 1;
}
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
.nav-item.activo { background: rgba(47,129,247,0.15); color: white; border-left-color: var(--acento); }

.usuario-actual {
  padding: 1rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center; font-size: .85rem;
}
.usuario-actual button {
  background: none; border: 1px solid #4a5a72; color: #b8c2d0; border-radius: 6px;
  padding: .3rem .6rem; cursor: pointer; font-size: .8rem;
}

.contenido { flex: 1; overflow-y: auto; padding: 2rem; }
.vista h2 { margin-top: 0; }

/* ---------- KPIs ---------- */
.tarjetas-kpi { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.kpi {
  background: white; border: 1px solid var(--borde); border-radius: 10px;
  padding: 1.1rem 1.4rem; min-width: 200px; flex: 1;
}
.kpi-label { display: block; font-size: .8rem; color: var(--texto-suave); margin-bottom: .4rem; }
.kpi-valor { font-size: 1.6rem; font-weight: 700; color: var(--azul-oscuro); }
.kpi-sub { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: .2rem; }

.panel-alertas {
  background: #fff8e1; border: 1px solid #f0c14b; border-radius: 8px;
  padding: 1rem 1.2rem; margin-bottom: 1.5rem; font-size: .9rem; color: #7a5c00;
}
.panel-alertas p { margin: .3rem 0; }

/* ---------- Formularios de catálogo apilados (no lado a lado) ---------- */
.form-catalogo {
  background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 1.2rem;
  display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-bottom: .8rem;
}
.form-catalogo input, .form-catalogo select { min-width: 150px; }

/* ---------- Panel lateral (detalle de capas) ---------- */
.panel-lateral {
  position: fixed; top: 0; right: 0; width: 480px; max-width: 92vw; height: 100vh;
  background: white; box-shadow: -8px 0 30px rgba(0,0,0,0.15); z-index: 50; overflow-y: auto;
}
.panel-lateral-contenido { padding: 2rem 1.5rem; }
.boton-cerrar {
  position: absolute; top: 1rem; right: 1rem; background: none; border: none;
  font-size: 1.2rem; cursor: pointer; color: var(--texto-suave);
}

.solo-admin.oculto { display: none !important; }

/* ---------- Ficha de producto (pestañas) ---------- */
.tabs-ficha { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; }
.tab-ficha {
  background: none; border: none; padding: .5rem .8rem; cursor: pointer; font-size: .85rem;
  color: var(--texto-suave); border-bottom: 2px solid transparent;
}
.tab-ficha.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.tab-contenido.oculto { display: none; }
.tab-contenido table { font-size: .82rem; }

/* ---------- Importación masiva ---------- */
.bloque-importar {
  background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 1.2rem; margin-bottom: 1rem;
}
.bloque-importar h3 { margin-top: 0; }
.input-importar { margin-left: .8rem; }
.vista-previa { margin-top: .8rem; }
.vista-previa table { font-size: .8rem; }
.resumen-importacion { font-size: .85rem; margin-top: .6rem; padding: .6rem; border-radius: 6px; }
.resumen-importacion.ok { background: #e8f8ee; color: #1a7f5a; }
.resumen-importacion.con-errores { background: #fff3e0; color: #b26a00; }

/* ---------- TABLAS ---------- */
.tabla { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; margin-bottom: 1.5rem; }
.tabla th, .tabla td { padding: .6rem .8rem; text-align: left; font-size: .87rem; border-bottom: 1px solid var(--borde); }
.tabla th { background: #f0f2f5; color: var(--texto-suave); font-weight: 600; }

/* ---------- FORMULARIOS ---------- */
.formulario-movimiento, #formMaestro, #formVariante, #formCliente, #formProveedor {
  background: white; border: 1px solid var(--borde); border-radius: 10px; padding: 1.4rem; margin-bottom: 1rem;
}
.fila-form { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: end; }
.fila-form > div { display: flex; flex-direction: column; gap: .3rem; }
.col-ancha { flex: 2; min-width: 220px; }
label { font-size: .8rem; color: var(--texto-suave); }
input, select {
  padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 6px; font-size: .9rem; min-width: 140px;
}
.ayuda { color: var(--acento); font-size: .78rem; }

button { font-family: inherit; }
.boton-primario {
  background: var(--acento); color: white; border: none; padding: .65rem 1.4rem;
  border-radius: 7px; cursor: pointer; font-weight: 600; font-size: .9rem; margin-top: .5rem;
}
.boton-primario:hover { background: #1f6fe0; }
#btnAgregarLinea {
  background: var(--acento-suave); color: var(--acento); border: 1px solid var(--acento);
  padding: .4rem 1rem; border-radius: 6px; cursor: pointer; font-size: .85rem; margin-bottom: 1rem;
}

.panel-crear { margin-bottom: 1rem; }
.panel-crear summary {
  cursor: pointer; background: white; border: 1px solid var(--borde); border-radius: 8px;
  padding: .7rem 1rem; font-size: .9rem; font-weight: 600; color: var(--acento);
}
.panel-crear form { display: flex; gap: .7rem; flex-wrap: wrap; padding: 1rem; background: white; border: 1px solid var(--borde); border-top: none; border-radius: 0 0 8px 8px; }
.panel-crear form button { background: var(--acento); color: white; border: none; border-radius: 6px; padding: .5rem 1rem; cursor: pointer; }

.dos-columnas { display: flex; gap: 2rem; flex-wrap: wrap; }
.dos-columnas > div { flex: 1; min-width: 280px; }
.dos-columnas ul { list-style: none; padding: 0; }
.dos-columnas li { background: white; border: 1px solid var(--borde); border-radius: 6px; padding: .6rem .8rem; margin-bottom: .4rem; font-size: .9rem; }

#movimientoMensaje { font-size: .85rem; margin-top: .6rem; }