/* =====================================================================
   Portal IceStar · identidad visual inspirada en icestarlatam.com
   Todos los colores viven aquí. Ajústalos y todo el portal cambia.
   ===================================================================== */

:root {
  --marino:      #0A2540;   /* azul corporativo IceStar */
  --marino-2:    #0F3560;
  --azul:        #1B6CB0;
  --hielo:       #4EB1E0;
  --escarcha:    #EAF3F9;
  --papel:       #F4F7FA;
  --blanco:      #FFFFFF;
  --texto:       #16232E;
  --texto-suave: #5A6B7A;
  --linea:       #D6DFE7;

  --ok:            #17845C;
  --ok-fondo:      #E6F4EE;
  --error:         #C0392B;
  --error-fondo:   #FBEBE9;
  --aviso:         #B5761A;
  --aviso-fondo:   #FDF3E2;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(10,37,64,.06), 0 4px 14px rgba(10,37,64,.08);
  --sombra-fuerte: 0 8px 32px rgba(10,37,64,.20);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--papel);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 { font-size: 1.55rem; margin: 0 0 .35rem; color: var(--marino); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 1.1rem;  margin: 0 0 .5rem; color: var(--marino); font-weight: 600; }
p.sub { color: var(--texto-suave); margin: 0 0 1.25rem; font-size: .92rem; }
a  { color: var(--azul); }

/* ---------- Topbar (inspirado en el header de icestarlatam) ---------- */

.topbar {
  background: var(--marino);
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: .95rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--blanco); line-height: 1.1; }
.brand-mark { font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; }
.brand-sub  { font-size: .74rem; color: var(--hielo); letter-spacing: .1em; text-transform: uppercase; }

.topbar nav { display: flex; gap: 1.5rem; margin-right: auto; }
.topbar nav a {
  color: #B8CDDF; text-decoration: none; font-size: .95rem; padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.topbar nav a:hover,
.topbar nav a[aria-current] { color: var(--blanco); border-bottom-color: var(--hielo); }

.user { text-align: right; border-left: 1px solid #1E4A75; padding-left: 1.25rem; line-height: 1.25; }
.user-name { font-size: .88rem; color: var(--blanco); }
.user-rut  { font-size: .74rem; color: #9FC0D8; }

.logout {
  color: #B8CDDF; text-decoration: none; font-size: .82rem;
  padding: .45rem .85rem; border: 1px solid #1E4A75; border-radius: var(--radio);
}
.logout:hover { color: var(--blanco); border-color: var(--hielo); }

/* ---------- Contenedor ---------- */

.wrap { max-width: 1240px; margin: 0 auto; padding: 2rem 1.5rem 3rem; flex: 1; width: 100%; }

.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
}

/* ---------- Cifras ---------- */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.metric { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; }
.metric .n { font-size: 1.85rem; font-weight: 600; color: var(--marino); line-height: 1; }
.metric .l { font-size: .74rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; margin-top: .35rem; }
.metric.ok    .n { color: var(--ok); }
.metric.error .n { color: var(--error); }

/* ---------- Login ---------- */

.login-page { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-card { background: var(--blanco); width: 100%; max-width: 400px; padding: 2rem 2.2rem 1.8rem; border-radius: var(--radio); box-shadow: var(--sombra-fuerte); }
.login-card h1 { text-align: center; margin-bottom: .3rem; }
.login-card p.sub { text-align: center; }
.login-card .field { margin-bottom: 1rem; }
.login-card label { display: block; font-size: .82rem; font-weight: 600; color: var(--marino); margin-bottom: .3rem; }
.login-card input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; }
.login-card input:focus { outline: 2px solid var(--hielo); outline-offset: -1px; border-color: var(--hielo); }

/* ---------- Botones ---------- */

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radio);
  padding: .65rem 1.25rem; font-size: .95rem; font-weight: 500;
  cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1;
}
.btn-primary { background: var(--marino); color: var(--blanco); width: 100%; padding: .8rem; }
.btn-primary:hover { background: var(--marino-2); }
.btn-ok      { background: var(--ok); color: var(--blanco); }
.btn-ok:hover { background: #126B4A; }
.btn-plain   { background: var(--blanco); color: var(--marino); border-color: var(--linea); }
.btn-plain:hover { border-color: var(--azul); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Zona de subida ---------- */

.drop {
  display: block;
  border: 2px dashed var(--hielo);
  background: var(--escarcha);
  border-radius: var(--radio);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.drop:hover, .drop.over { background: #DCEDF7; border-color: var(--azul); }
.drop strong { display: block; color: var(--marino); font-size: 1.1rem; margin-bottom: .3rem; }
.drop span   { color: var(--texto-suave); font-size: .92rem; }
.drop input  { display: none; }
.drop .file-name { margin-top: 1rem; font-weight: 600; color: var(--azul); }

/* ---------- Tabla de líneas ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
table.lineas { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 1400px; }
table.lineas thead th {
  background: var(--marino); color: var(--blanco); text-align: left; padding: .6rem .55rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; position: sticky; top: 0;
}
table.lineas tbody td {
  padding: .45rem .55rem; border-bottom: 1px solid var(--linea); vertical-align: middle;
}
table.lineas tbody tr:hover { background: var(--escarcha); }
table.lineas tr.err { background: var(--error-fondo); }
table.lineas tr.err:hover { background: #F7DDD8; }

table.lineas td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.lineas td.sku { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8rem; }

table.lineas input, table.lineas select {
  width: 100%; border: 1px solid transparent; background: transparent;
  padding: .3rem .35rem; font: inherit; font-size: .86rem; border-radius: 4px;
}
table.lineas input:focus, table.lineas select:focus {
  border-color: var(--hielo); background: var(--blanco); outline: 2px solid var(--hielo); outline-offset: -2px;
}
table.lineas input.dirty, table.lineas select.dirty { background: #FFF9E1; border-color: #E8C878; }

/* Etiquetas de estado */
.tag { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; }
.tag-ok    { background: var(--ok-fondo);    color: var(--ok); }
.tag-err   { background: var(--error-fondo); color: var(--error); }
.tag-neu   { background: var(--escarcha);    color: var(--azul); }

.err-list  { margin: .2rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--error); }
.err-list li::before { content: "· "; }

/* ---------- Mensajes ---------- */

.msg { padding: .8rem 1rem; border-radius: var(--radio); margin-bottom: 1.25rem; font-size: .92rem; border: 1px solid; }
.msg-ok    { background: var(--ok-fondo);    color: var(--ok);    border-color: #BFE3D3; }
.msg-error { background: var(--error-fondo); color: var(--error); border-color: #F0C8C2; }
.msg-aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: #F0DDB8; }

/* ---------- Barra de acciones ---------- */

.actions {
  display: flex; gap: .75rem; align-items: center;
  padding: 1rem 1.25rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  flex-wrap: wrap;
}
.actions .grow { flex: 1; }
.actions .hint { color: var(--texto-suave); font-size: .85rem; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--texto-suave); }
.empty strong { display: block; color: var(--marino); font-size: 1.05rem; margin-bottom: .35rem; }

/* ---------- Pie ---------- */

.foot {
  background: var(--marino);
  color: #9FC0D8;
  padding: 1rem 1.5rem;
  font-size: .78rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; gap: 1rem; }
  .topbar nav { order: 3; width: 100%; }
  .user, .logout { font-size: .78rem; }
  .foot { flex-direction: column; text-align: center; }
}

:focus-visible { outline: 2px solid var(--hielo); outline-offset: 2px; }