/* Identidad Etiqueter: gris #D1D5DB, navy #1F2937, blanco. Montserrat + Roboto */
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/montserrat-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/roboto-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/roboto-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/roboto-latin-700-normal.woff2') format('woff2')}

:root{
  --gray:#D1D5DB;
  --gray-light:#F3F4F6;
  --gray-mid:#9CA3AF;
  --navy:#1F2937;
  --white:#FFFFFF;
  --radius:12px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Montserrat',-apple-system,system-ui,sans-serif;
  background:var(--white);
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
}

.hidden{display:none !important}

/* ------------------------------- LOGIN ------------------------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--white);
}
.login-card{
  width:100%;max-width:360px;text-align:center;
  border:1px solid var(--gray);border-radius:var(--radius);
  padding:40px 32px 32px;background:var(--white);
}
.login-card .isotipo{width:52px;height:auto;display:block;margin:0 auto 18px}
.login-card h1{font-size:22px;font-weight:800;letter-spacing:1.5px;margin-bottom:4px}
.login-card .sub{
  font-family:'Roboto',sans-serif;font-size:12.5px;color:var(--gray-mid);
  margin-bottom:26px;
}
.field{text-align:left;margin-bottom:14px}
.field label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--navy);margin-bottom:6px;
}
.field input{
  width:100%;font-family:'Roboto',sans-serif;font-size:14px;color:var(--navy);
  padding:11px 12px;border:1px solid var(--gray);border-radius:8px;background:var(--white);
  outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--navy)}

.btn{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;
  padding:12px 18px;border:none;border-radius:8px;cursor:pointer;
  background:var(--navy);color:var(--white);transition:opacity .15s;
}
.btn:hover:not(:disabled){opacity:.86}
.btn:disabled{background:var(--gray);color:var(--gray-mid);cursor:not-allowed}
.btn-block{width:100%;margin-top:8px}
.btn-ghost{
  background:transparent;color:var(--navy);border:1px solid var(--gray);
  font-size:12px;padding:8px 14px;
}

.error{
  font-family:'Roboto',sans-serif;font-size:12.5px;color:#B91C1C;
  background:#FEF2F2;border-radius:8px;padding:9px 12px;margin-bottom:14px;text-align:left;
}

/* -------------------------------- APP -------------------------------- */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 28px;border-bottom:1px solid var(--gray);
}
.topbar .isotipo{width:26px;height:auto}
.topbar .marca{font-size:15px;font-weight:800;letter-spacing:1.4px}
.topbar .tienda{
  font-family:'Roboto',sans-serif;font-size:11px;font-weight:500;
  background:var(--gray);color:var(--navy);padding:3px 9px;border-radius:999px;
}
.topbar .spacer{flex:1}

main{max-width:1120px;margin:0 auto;padding:28px}

.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.head h2{font-size:19px;font-weight:700}
.head .meta{font-family:'Roboto',sans-serif;font-size:12.5px;color:var(--gray-mid)}
.head .spacer{flex:1}

.tabla-wrap{border:1px solid var(--gray);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse;font-family:'Roboto',sans-serif;font-size:13px}
thead th{
  background:var(--gray-light);text-align:left;
  font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;color:var(--navy);
  padding:11px 14px;border-bottom:1px solid var(--gray);white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--gray-light);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFAFB}
tbody tr.sel{background:var(--gray-light)}

.col-check{width:44px}
.col-num{width:96px}
.col-fecha{width:112px}
.col-estado{width:186px}

td.num{font-weight:700;font-family:'Roboto',sans-serif;font-size:14px}
td.fecha{color:#4B5563;white-space:nowrap}
.prod-linea{line-height:1.45}
.prod-linea .q{font-weight:700}
.prod-linea .var{color:var(--gray-mid);font-size:12px}

input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--navy);cursor:pointer;margin-top:2px;
}

.badge{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:10.5px;
  font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.badge-pend{background:var(--gray-light);color:#6B7280;border:1px solid var(--gray)}
.badge-imp{background:var(--navy);color:var(--white)}
.reimp{
  display:block;font-family:'Roboto',sans-serif;font-size:11px;
  color:var(--gray-mid);margin-top:4px;
}

.barra{
  position:sticky;bottom:0;margin-top:20px;
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--gray);border-radius:var(--radius);
  padding:14px 18px;
}
.barra .conteo{font-family:'Roboto',sans-serif;font-size:13px;color:#4B5563}
.barra .conteo b{font-family:'Montserrat',sans-serif;color:var(--navy)}
.barra .spacer{flex:1}

/* Aviso de remitente sin cargar */
.aviso{
  display:flex;align-items:center;gap:14px;
  font-family:'Roboto',sans-serif;font-size:13px;
  background:var(--gray-light);border:1px solid var(--gray);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;
}
.aviso .btn{margin-left:auto;flex-shrink:0}
.aviso a.btn{text-decoration:none}
.aviso-alerta{background:#FEF2F2;border-color:#FECACA;color:#991B1B}

/* Modal de datos de la tienda */
.modal-fondo{
  position:fixed;inset:0;background:rgba(31,41,55,.45);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:10;
}
.modal{
  width:100%;max-width:440px;background:var(--white);
  border-radius:var(--radius);padding:26px 26px 20px;
}
.modal h3{font-size:17px;font-weight:700;margin-bottom:4px}
.modal-sub{
  font-family:'Roboto',sans-serif;font-size:12.5px;color:var(--gray-mid);
  margin-bottom:20px;
}
.modal-acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal-ancho{max-width:640px;max-height:82vh;overflow:auto}

/* Contador de solicitudes pendientes en la topbar */
.pill{
  display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;
  border-radius:999px;background:var(--navy);color:var(--white);
  font-family:'Roboto',sans-serif;font-size:10.5px;font-weight:700;
}

/* Fichas de solicitudes */
.solicitud{
  border:1px solid var(--gray);border-radius:10px;padding:14px 16px;margin-bottom:12px;
}
.solicitud .cab{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.solicitud .cab .fecha{
  font-family:'Roboto',sans-serif;font-size:12px;color:var(--gray-mid);
}
.solicitud .cab .spacer{flex:1}
.solicitud .quien{font-size:13px;font-weight:700}
.solicitud .cuerpo{
  font-family:'Roboto',sans-serif;font-size:12.5px;line-height:1.55;color:#374151;
}
.solicitud .cuerpo b{font-weight:700;color:var(--navy)}
.solicitud .detalle{
  background:var(--gray-light);border-radius:8px;padding:10px 12px;margin-top:10px;
  font-family:'Roboto',sans-serif;font-size:11.5px;line-height:1.6;
}
.solicitud .detalle .fila{display:flex;gap:10px}
.solicitud .detalle .fila span:first-child{font-weight:700;min-width:96px}
.hint{
  display:block;font-family:'Roboto',sans-serif;font-size:11.5px;
  color:var(--gray-mid);margin-top:6px;
}
.hint a{color:var(--navy);cursor:pointer;text-decoration:underline}
.ok{
  font-family:'Roboto',sans-serif;font-size:12.5px;color:#065F46;
  background:#ECFDF5;border-radius:8px;padding:9px 12px;margin-bottom:14px;
}

/* Pie del login / registro */
.pie{
  font-family:'Roboto',sans-serif;font-size:12.5px;color:var(--gray-mid);
  margin-top:18px;
}
.pie a{color:var(--navy);font-weight:500;text-decoration:underline;cursor:pointer}

/* Estado de conexión con Tiendanube dentro del modal */
.conexion{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--gray);margin-top:20px;padding-top:16px;
}
.conexion .btn{margin-left:auto}
.conexion a.btn{text-decoration:none}

.vacio{
  text-align:center;padding:56px 20px;font-family:'Roboto',sans-serif;
  font-size:14px;color:var(--gray-mid);
}
.nota{
  font-family:'Roboto',sans-serif;font-size:11.5px;color:var(--gray-mid);
  margin-top:14px;text-align:center;
}