* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background: #f0f4f8;
  color: #1f2d3d;
}

/* ---------------- Login / registro / recuperar ---------------- */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b3d6f 0%, #1273c4 60%, #2aa1e6 100%);
  padding: 16px;
}

.tarjeta-login {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 28px 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.logo-medikar { text-align: center; margin-bottom: 20px; }
.logo-medikar img { max-height: 64px; margin-bottom: 8px; }
.logo-medikar h1 { margin: 0; font-size: 22px; color: #0b3d6f; }
.logo-medikar p { margin: 4px 0 0; color: #667; font-size: 13px; }

.tarjeta-login label {
  display: block;
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #334;
}

.tarjeta-login input,
.tarjeta-login select,
input[type="text"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c7d2dc;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
}

.tarjeta-login input:focus,
.tarjeta-login select:focus,
input:focus, select:focus {
  outline: 2px solid #1273c4;
  border-color: #1273c4;
}

.btn-primario {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #1273c4;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primario:hover { background: #0f64aa; }

.enlaces-login {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.enlaces-login a { color: #1273c4; text-decoration: none; }
.enlaces-login a:hover { text-decoration: underline; }

.aviso-error, .aviso-info, .aviso-exito {
  padding: 10px 12px;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 14px;
}
.aviso-error { background: #fdecea; color: #a4262c; border: 1px solid #f5c6cb; }
.aviso-info  { background: #e8f4fd; color: #0b5c9e; border: 1px solid #bcd8f0; }
.aviso-exito { background: #e8f9ee; color: #157a3c; border: 1px solid #b7e3c6; }

/* ---------------- Cabecera del portal ---------------- */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b3d6f;
  color: #fff;
  padding: 10px 20px;
}
.cabecera .marca { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.logo-cabecera { height: 40px; width: auto; }
.cabecera .usuario { font-size: 14px; }
.cabecera a {
  color: #fff;
  margin-left: 14px;
  font-size: 13px;
}
.cabecera a.cerrar { color: #ffd166; }

.pie {
  background: #0b3d6f;
  color: #cfe3f5;
  text-align: center;
  padding: 18px 16px;
  margin-top: 30px;
  font-size: 13px;
}
.pie p { margin: 2px 0; }

.contenedor {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

.tarjeta {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  margin-bottom: 18px;
}
.tarjeta h2 { margin-top: 0; color: #0b3d6f; font-size: 19px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------------- Tabla detalle ---------------- */
.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabla-datos th, .tabla-datos td {
  border-bottom: 1px solid #e3eaf0;
  padding: 8px 10px;
  text-align: left;
}
.tabla-datos th { background: #eaf2f9; color: #0b3d6f; }
.tabla-datos td.num, .tabla-datos th.num { text-align: right; }
.tabla-datos tr.total td { font-weight: 700; background: #f4f8fb; }

/* ---------------- Buscador ---------------- */
.buscador { display: flex; gap: 8px; margin-bottom: 10px; }
.buscador input { flex: 1; }

.menu-cantidad {
  white-space: nowrap;
}
.menu-cantidad button {
  border: 1px solid #1273c4;
  background: #fff;
  color: #1273c4;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 700;
}
.menu-cantidad button:hover { background: #1273c4; color: #fff; }

.btn-secundario {
  border: 1px solid #1273c4;
  background: #fff;
  color: #1273c4;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
}
.btn-secundario:hover { background: #1273c4; color: #fff; }

.btn-eliminar {
  border: 0;
  background: transparent;
  color: #c44;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

/* ---------------- Stepper cantidad (+/-) ---------------- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.btn-stepper {
  width: 28px;
  height: 28px;
  border: 1px solid #1273c4;
  background: #fff;
  color: #1273c4;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.btn-stepper:hover { background: #1273c4; color: #fff; }
.stepper input.cantidad {
  width: 68px;
  text-align: center;
  padding: 6px 4px;
}

.pie-acciones { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }

.resultados-busqueda {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #c7d2dc;
  border-radius: 8px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
}
.resultados-busqueda li {
  padding: 8px 12px;
  border-bottom: 1px solid #eef;
  cursor: pointer;
}
.resultados-busqueda li:hover, .resultados-busqueda li.seleccion {
  background: #e8f4fd;
}
.resultados-busqueda li small { color: #889; }

.resultados-busqueda .art-nombre { font-weight: 600; color: #1f2d3d; }
.resultados-busqueda .art-ean { color: #4a5a6a; font-size: 12px; margin-right: 12px; }
.resultados-busqueda .art-precio {
  color: #0b5c9e;
  font-weight: 700;
  font-size: 13px;
  margin-right: 12px;
}
.resultados-busqueda .art-stock {
  color: #157a3c;
  font-weight: 600;
  font-size: 12px;
}
.resultados-busqueda .art-stock.stock-cero {
  color: #d32f2f;
  font-weight: 700;
}
.resultados-busqueda .art-stock.stock-cero::before {
  content: "● ";
}

.oculto { display: none; }

.aviso-ok {
  background: #e8f9ee;
  border: 1px solid #b7e3c6;
  color: #157a3c;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 15px;
}
.aviso-ok a { color: #0b5c9e; }

/* ---------------- Dashboard ---------------- */
.grid-resumen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 760px) { .grid-resumen { grid-template-columns: 1fr; } }

.tarjeta.resumen { text-align: center; }
.resumen-valor { font-size: 26px; font-weight: 700; color: #0b3d6f; }
.resumen-deuda .resumen-valor { color: #a4262c; }
.resumen-etiqueta { font-size: 13px; color: #667; margin-top: 4px; }

.grid-acciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 760px) { .grid-acciones { grid-template-columns: 1fr; } }

.tarjeta.accion {
  display: block;
  text-decoration: none;
  border: 1px solid #d5e2ee;
  transition: border-color .15s, box-shadow .15s;
}
.tarjeta.accion:hover { border-color: #1273c4; box-shadow: 0 4px 18px rgba(18,115,196,.18); }
.accion-ico { font-size: 28px; color: #1273c4; margin-bottom: 6px; }
.accion-titulo { font-weight: 700; color: #0b3d6f; font-size: 16px; }
.accion-detalle { color: #667; font-size: 13px; margin-top: 4px; }

.estado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.estado-ok { background: #e8f9ee; color: #157a3c; }
.estado-pendiente { background: #fff4e5; color: #b26a00; }
.estado-bodega { background: #eaf2ff; color: #2b5fae; }
.estado-despachada { background: #f5eaff; color: #7a2bc0; }