/* Remito-app: estilos simples, primero celular */
* { box-sizing: border-box; }
:root {
  --azul: #1a5fb4; --azul-osc: #14487f; --gris: #f2f3f5; --borde: #d5d8dc;
  --rojo: #c0392b; --verde: #1e8449; --naranja: #ca6f1e;
}
body {
  margin: 0; font-family: system-ui, -apple-system, sans-serif;
  background: var(--gris); color: #1c2833; font-size: 16px;
}
.topbar {
  background: var(--azul); color: #fff; padding: .6rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.topbar .marca { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.topbar nav { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.topbar nav a { color: #dbe9ff; text-decoration: none; }
.topbar nav a:active { color: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
.tarjeta {
  background: #fff; border-radius: 12px; padding: 1.2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 1rem;
}
.tarjeta.login { max-width: 380px; margin: 3rem auto; }
h1 { font-size: 1.35rem; margin: 0 0 .8rem; }
h2 { font-size: 1.1rem; }
label { display: block; margin-bottom: .8rem; font-weight: 600; }
input, textarea, select {
  width: 100%; padding: .65rem; margin-top: .25rem;
  border: 1px solid var(--borde); border-radius: 8px; font-size: 1rem;
  font-family: inherit;
}
textarea { min-height: 6rem; }
button, .boton {
  display: inline-block; padding: .7rem 1.2rem; border: 1px solid var(--borde);
  border-radius: 8px; background: #fff; font-size: 1rem; cursor: pointer;
  text-decoration: none; color: #1c2833; text-align: center;
}
button.principal, .boton.principal {
  background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600;
}
button.principal:active, .boton.principal:active { background: var(--azul-osc); }
button.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
button.link {
  border: none; background: none; color: #dbe9ff; padding: 0; font-size: 1rem;
  cursor: pointer; text-decoration: underline;
}
form.inline { display: inline; }
.error { color: var(--rojo); font-weight: 600; }
.exito { color: var(--verde); font-weight: 600; }

/* estados */
.estado {
  display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: #fff; background: #7f8c8d;
}
.estado.subido      { background: #7f8c8d; }
.estado.procesando  { background: var(--naranja); }
.estado.borradores_listos { background: var(--azul); }
.estado.aprobado    { background: #7d3c98; }
.estado.publicando  { background: var(--naranja); }
.estado.publicado   { background: var(--verde); }
.estado.error       { background: var(--rojo); }
.estado.nuevo       { background: var(--azul); }
.estado.ya_publicado { background: var(--verde); }
.estado.existente   { background: #148f77; }
.estado.descartado  { background: #95a5a6; }

/* edicion de borradores */
.galeria { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem 0; }
.galeria img {
  height: 110px; border-radius: 8px; border: 1px solid var(--borde); flex: 0 0 auto;
}
.foto-item { flex: 0 0 auto; text-align: center; }
.foto-acciones { display: flex; gap: .3rem; justify-content: center; margin-top: .25rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.boton.chico, button.chico { padding: .3rem .7rem; font-size: .9rem; }
.boton.grande {
  display: block; width: 100%; padding: 1.1rem; font-size: 1.15rem;
  margin-bottom: .9rem; cursor: pointer;
}
.boton.deshabilitado { opacity: .6; pointer-events: none; }
hr { border: none; border-top: 1px solid var(--gris); margin: 1.2rem 0; }

/* avisos y tablas */
.aviso {
  background: #fef9e7; border: 1px solid #f7dc6f; border-radius: 8px;
  padding: .7rem .9rem; margin: .8rem 0;
}
.aviso.error-caja { background: #fdedec; border-color: #f1948a; }
form.moneda {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--gris); border-radius: 8px; padding: .7rem; margin: .8rem 0;
}
form.moneda select, form.moneda input { width: auto; margin-top: 0; }
.aviso ul { margin: .4rem 0 0 1.2rem; }
.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--gris); }
th { background: var(--gris); }
details.inline { display: inline-block; }
details.inline summary { list-style: none; cursor: pointer; }
details.inline form { display: flex; gap: .4rem; margin-top: .4rem; }
details.inline input { width: auto; }

/* listas */
.fila {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--gris);
  flex-wrap: wrap;
}
.fila:last-child { border-bottom: none; }
.fila .detalle { color: #5d6d7e; font-size: .9rem; }
@media (max-width: 480px) {
  main { padding: .6rem; }
  .tarjeta { padding: .9rem; border-radius: 10px; }
}