*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#f6f7fb;color:#222}
.wrap{max-width:1240px;margin:24px auto;padding:0 16px}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.actions{display:flex;gap:12px;align-items:center}
.tag{background:#eef;border:1px solid #ccd;padding:6px 10px;border-radius:999px;font-size:13px}
.link{color:#0a7cff;text-decoration:none}

.card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);margin-bottom:20px}
.row{display:flex;gap:10px;margin-bottom:10px}
input,button,select,textarea{padding:10px;border:1px solid #ddd;border-radius:10px;font-size:14px}
button{cursor:pointer}
button.ghost{background:#f5f5f5}

/* Tabla tipo Excel */
table.tbl{width:100%;border-collapse:collapse;background:#fff;table-layout:fixed}
.tbl th,.tbl td{padding:12px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}
.tbl th:nth-child(7), .tbl td:nth-child(7){text-align:right} /* Stock a la derecha */
.money{text-align:right;font-variant-numeric:tabular-nums}

/* Botones de acción */
.btn{padding:8px 12px;border-radius:10px;border:1px solid #ddd;background:#fafafa}
.btn:hover{background:#f0f0f0}
.btn.danger{border-color:#f3c0c0;background:#fff5f5}
.btn.danger:hover{background:#ffe8e8}
.btn.success{border-color:#c0e4c0;background:#f5fff5}
.btn.success:hover{background:#e9ffe9}

/* Lista de movimientos formateada */
#movs{list-style:none;padding:0;margin:8px 0 0 0;max-height:260px;overflow:auto}
.mov{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:8px 12px;padding:6px 0;border-bottom:1px dashed #eee}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid #ccd;background:#f6f7ff}
.name{font-weight:600}
.muted{color:#666;font-size:13px}
.date{grid-column:1/-1;color:#666;font-size:12px}

/* MODALES  */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;align-items:center;justify-content:center;padding:16px;z-index:3000}
.modal.open{display:flex}
.modal-body{background:#fff;border-radius:14px;padding:16px;min-width:320px;max-width:520px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.2);display:grid;gap:10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* Segmento de tipo (quitar/agregar) */
.seg{display:flex;gap:8px}
.seg-btn{flex:1;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fafafa;cursor:pointer}
.seg-btn.active{background:#e9f1ff;border-color:#bcd6ff}

/* Textarea para nota */
.noteBox{min-height:90px;resize:vertical}

/* Responsive */
@media(max-width:900px){
  .wrap{padding:0 10px}
}

/* ...tu CSS anterior... */

/* MODALES: ocultos por defecto y centrados */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;align-items:center;justify-content:center;padding:16px;z-index:3000}
.modal.open{display:flex}
.modal-body{background:#fff;border-radius:14px;padding:16px;min-width:320px;max-width:520px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.2);display:grid;gap:10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
/* --- Login centrado y limpio --- */
.login-page .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-page .card{width:100%;max-width:420px;padding:24px}
.card h2{margin:0 0 12px}
input[type=text],input[type=password]{height:44px}

/* Tabla genérica (también para movimientos.php) */
table.tbl{width:100%;border-collapse:collapse;background:#fff;table-layout:fixed}
.tbl th,.tbl td{padding:12px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle;white-space:nowrap}
.tbl td:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Movimientos recientes – ordenado y en mayúsculas */
#movs{list-style:none;padding:0;margin:8px 0 0 0;max-height:unset}
.mov{
  display:grid;
  grid-template-columns: 80px 60px 1fr 120px 120px; /* tipo | cant | nombre | usuario | ip */
  gap:8px 12px;align-items:center;padding:6px 0;border-bottom:1px dashed #eee
}
.badge,.name,.muted{text-transform:uppercase}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid #ccd;background:#f6f7ff}
.name{font-weight:600}
.muted{color:#666;font-size:13px}
.date{grid-column:1/-1;color:#666;font-size:12px}

/* Botones limpios */
.btn{padding:8px 12px;border-radius:10px;border:1px solid #ddd;background:#fafafa}
.btn:hover{background:#f0f0f0}
.btn.danger{border-color:#f3c0c0;background:#fff5f5}
.btn.danger:hover{background:#ffe8e8}
.btn.success{border-color:#c0e4c0;background:#f5fff5}
.btn.success:hover{background:#e9ffe9}

/* Modales (ya los tenías, solo por si faltaban) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.32);display:none;align-items:center;justify-content:center;padding:16px;z-index:3000}
.modal.open{display:flex}
.modal-body{background:#fff;border-radius:14px;padding:16px;min-width:320px;max-width:520px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.2);display:grid;gap:10px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
/* === OVERRIDES DE ANCHO Y COLUMNAS === */

/* Usa ~90% del ancho de pantalla (hasta 1700px) */
.wrap{ max-width: min(1700px, 92vw); }

/* Mejor reparto de columnas y evitar cortes raros */
table.tbl{ table-layout: auto; }
.tbl th, .tbl td{ white-space: nowrap; }

/* La columna de NOTA sí debe envolver el texto */
.tbl td.notes{
  white-space: normal;         /* permite múltiples líneas */
  word-break: break-word;      /* corta palabras largas */
  white-space: break-spaces;   /* respeta espacios largos */
}

/* Anchos para la tabla de MOVIMIENTOS (id=tMovs) */
#tMovs col:nth-child(1){ width:70px; }   /* ID mov   */
#tMovs col:nth-child(2){ width:190px; }  /* Fecha    */
#tMovs col:nth-child(3){ width:100px; }  /* Tipo     */
#tMovs col:nth-child(4){ width:80px; }   /* Item ID  */
#tMovs col:nth-child(5){ width:28%;  }   /* Nombre   */
#tMovs col:nth-child(6){ width:70px; }   /* Cant.    */
#tMovs col:nth-child(7){ width:130px; }  /* Usuario  */
#tMovs col:nth-child(8){ width:80px; }   /* IP (más corto) */
#tMovs col:nth-child(9){ width:auto; }   /* Nota (todo lo restante) */

/* Anchos para la tabla principal (id=tabla) */
#tabla col:nth-child(1){ width:70px; }   /* ID */
#tabla col:nth-child(2){ width:32%; }    /* Nombre (más ancho) */
#tabla col:nth-child(3){ width:130px; }  /* Cant. inicial */
#tabla col:nth-child(4){ width:120px; }  /* Precio (Q) */
#tabla col:nth-child(5){ width:130px; }  /* Total (Q) */
#tabla col:nth-child(6){ width:110px; }  /* Unidad */
#tabla col:nth-child(7){ width:90px;  }  /* Stock */
#tabla col:nth-child(8){ width:170px; }  /* Resto (Q) */
#tabla col:nth-child(9){ width:130px; }  /* Quitar */
#tabla col:nth-child(10){width:130px; }  /* Agregar */
/* Login: apilar etiqueta e input y que todo ocupe el ancho */
.login-page form{
  display:grid;
  grid-template-columns: 1fr; /* una sola columna */
  gap: 10px;
  width: 100%;
}
.login-page form label{
  display:block;            /* que la etiqueta ocupe toda la línea */
  font-weight:600;
  margin-top:4px;
}
.login-page form input[type="text"],
.login-page form input[type="password"]{
  width:100%;
  height:44px;
}
.login-page .card{ max-width:480px; }   /* un pelín más ancho si quieres */

/* === Pantalla de menú principal === */
.menu-intro{ text-align:center; margin:24px 0 28px }
.menu-intro h2{ margin:0 0 6px; font-size:22px }
.menu-intro p{ margin:0 }

.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:24px;
}
.menu-card{
  background:#fff;
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  text-decoration:none;
  color:#222;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.menu-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  border-color:#bcd6ff;
}
.menu-icon{ font-size:38px; margin-bottom:10px }
.menu-card h3{ margin:0 0 8px; font-size:17px }
.menu-card p{ margin:0; color:#666; font-size:13.5px; line-height:1.4 }

@media(max-width:800px){
  .menu-grid{ grid-template-columns:1fr; }
}
/* ===== Layout general ===== */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px;
}

/* ===== Barra superior ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
}
.topbar h1{
  margin:0;
  font-size:1.6rem;
}
.topbar .actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.topbar .link{
  color:#2563eb;
  text-decoration:none;
  font-weight:500;
}
.topbar .link:hover{
  text-decoration:underline;
}
.topbar .tag{
  background:#eef2ff;
  color:#3730a3;
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
}

/* ===== Tarjetas ===== */
.card{
  background:#fff;
  border-radius:12px;
  padding:20px 22px;
  margin-bottom:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.card h2{
  margin-top:0;
  margin-bottom:16px;
  font-size:1.15rem;
}

/* ===== Formulario ===== */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px 16px;
  align-items:end;
}
.form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.85rem;
  font-weight:600;
  color:#374151;
}
.form-grid input{
  font-size:.95rem;
  font-weight:400;
  padding:9px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
  outline:none;
  transition:border-color .15s;
}
.form-grid input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.form-actions{
  grid-column:1 / -1;
  margin-top:4px;
}

/* ===== Botones ===== */
button{
  cursor:pointer;
  font-size:.9rem;
  font-weight:600;
  padding:9px 18px;
  border-radius:8px;
  border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
button[type="submit"]{
  background:#2563eb;
  color:#fff;
}
button[type="submit"]:hover{
  background:#1d4ed8;
}
button.ghost{
  background:#fff;
  color:#dc2626;
  border-color:#fca5a5;
  padding:6px 14px;
  font-size:.82rem;
}
button.ghost:hover{
  background:#fef2f2;
  border-color:#dc2626;
}

/* ===== Tabla ===== */
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.tbl th{
  text-align:left;
  padding:10px 8px;
  border-bottom:2px solid #e5e7eb;
  color:#374151;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.tbl td{
  padding:10px 8px;
  border-bottom:1px solid #f0f0f0;
  vertical-align:middle;
}
.tbl tr:hover td{
  background:#f9fafb;
}

/* ===== Búsqueda (por si la reutilizas) ===== */
.row{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.row input{
  flex:1;
  min-width:200px;
  padding:9px 10px;
  border:1px solid #d1d5db;
  border-radius:8px;
}

/* ===== Responsive ===== */
@media (max-width:600px){
  .topbar{flex-direction:column;align-items:flex-start;}
  .tbl{display:block;overflow-x:auto;white-space:nowrap;}
}