:root {
  --color-bg: #f2f5f8;
  --color-surface: #ffffff;
  --color-header: #0b2540;
  --color-primary: #0f7d8c;
  --color-primary-dark: #0c6570;
  --color-text: #1c2733;
  --color-muted: #647587;
  --color-border: #e1e7ee;
  --color-success-bg: #e5f7ee;
  --color-success-text: #147a4a;
  --color-error-bg: #fdeaea;
  --color-error-text: #b3261e;
  --color-brand: #7c1f77;
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  min-height: 100dvh; /* dvh descuenta la barra de direcciones del navegador móvil cuando está visible; 100vh a secas puede quedarse corto y recortar contenido. La declaración de 100vh de arriba queda como fallback para navegadores sin dvh. */
  font-size: 16px;
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: var(--color-header);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
}
.brand-solutel {
  font-family: "Audiowide", "Segoe UI", sans-serif;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.topbar-title {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-right { display: flex; justify-content: flex-end; }
.topbar-logout {
  color: #cfe6ea;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}
.topbar-logout:hover { background: rgba(255,255,255,0.08); }

.container {
  padding: 20px;
  min-height: calc(100vh - 52px);
  min-height: calc(100dvh - 52px);
}

.app-footer {
  position: fixed;
  left: 10px;
  bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand);
  opacity: 0.85;
  pointer-events: none;
}

/* ---------- Login / listado de entradas (pantallas simples) ---------- */
.page-title { font-size: 1.2rem; margin: 4px 0 18px; font-weight: 600; }
.section-title { font-size: 1rem; margin: 24px 0 8px; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 2px 10px rgba(15, 40, 60, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
}

label { font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }
label small { font-weight: 400; text-transform: none; }

input[type=text], input[type=password], input[type=date], input[type=datetime-local], select {
  font-size: 1.3rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 100%;
  background: #fff;
  color: var(--color-text);
}
input[readonly] {
  background: #f6f9fb;
  caret-color: transparent;
}
input[readonly].active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 125, 140, 0.15);
}

select { font-size: 0.95rem; }

.field-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-primary:active { background: var(--color-primary-dark); }
.btn-primary:disabled { opacity: 0.6; }

.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }

/* Tarjeta de entrada: el <li> es la caja visual; dentro va un enlace
   "estirado" (::after cubre toda la tarjeta) que navega a /pesaje/{id}, y
   los iconos de editar/borrar van por encima en su propia capa de clic
   (mismo z-index de la fila de acciones) para que interceptar el toque
   antes de que llegue al enlace de fondo — así toda la tarjeta es
   "pulsable" salvo esos dos iconos, igual que las tarjetas de pesada. */
.entry-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface);
  padding: 18px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 6px rgba(15, 40, 60, 0.06);
}
.entry-card:hover { box-shadow: 0 2px 10px rgba(15, 40, 60, 0.12); }
.entry-card-activa { box-shadow: 0 0 0 2px var(--color-primary) inset; }
.entry-card-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  text-decoration: none;
  color: var(--color-text);
}
.entry-card-link::after { content: ""; position: absolute; inset: 0; }
.entry-card-top { display: flex; justify-content: space-between; }
.entry-card-link .totales { margin-top: 0; }
.entry-especie { font-weight: 600; }
.entry-fecha { color: var(--color-muted); }
.entry-acciones { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; }
.entry-acciones form { display: contents; }

.back-link {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.empty { color: var(--color-muted); }

/* ---------- Pantalla de pesaje: dos paneles para tablet horizontal ---------- */
.pesaje-container { padding: 16px; }

.pesaje-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 400px);
  gap: 16px;
  height: calc(100vh - 52px - 32px);
  height: calc(100dvh - 52px - 32px);
}

.panel-lista {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 40, 60, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-lista-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--color-border);
}
.panel-lista-header h2 { margin: 8px 0 0; font-size: 1.05rem; }
.panel-lista-header-top { display: flex; justify-content: space-between; align-items: center; }
.panel-lista-header-top h2 { margin: 0; }

.totales {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}
.total-item {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.total-item strong { color: var(--color-text); font-weight: 700; }
.total-kg strong { font-size: 1.05rem; color: var(--color-primary-dark); }
.total-kg small { color: var(--color-muted); }

.lista-scroll {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pesada-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2px 10px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.9rem;
}
.pesada-numero {
  grid-column: 1;
  grid-row: 1 / 4;
  font-weight: 700;
  color: var(--color-primary);
  align-self: center;
  padding-right: 8px;
  border-right: 1px solid var(--color-border);
}
.pesada-matriculas { grid-column: 2; font-weight: 600; }
.pesada-destare { grid-column: 2; color: var(--color-muted); font-size: 0.82rem; }
.pesada-pesos { grid-column: 2; font-size: 0.95rem; }
.pesada-pesos small { color: var(--color-muted); }

.pesada-acciones {
  grid-column: 3;
  grid-row: 1 / 4;
  display: flex;
  gap: 6px;
  align-items: center;
  align-self: center;
}
.btn-icon {
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:active { background: #eef2f6; }
.btn-editar:hover, .btn-editar:active { color: var(--color-primary-dark); border-color: var(--color-primary); }
.btn-borrar { color: var(--color-error-text); }
.btn-borrar:hover, .btn-borrar:active { border-color: #f3c9c9; background: var(--color-error-bg); }
.pesada-badge {
  font-size: 0.78rem;
  color: var(--color-muted);
  background: #eef1f4;
  padding: 3px 10px;
  border-radius: 8px;
}

.edicion-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff4e0;
  color: #7a5209;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.edicion-banner[hidden] { display: none; }
.edicion-banner button {
  border: none;
  background: none;
  color: #7a5209;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
}

.pesada-card-nueva { animation: resaltar 1.4s ease-out; }
@keyframes resaltar {
  from { background: #dff3f2; }
  to { background: #f8fafc; }
}

.panel-entrada {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 40, 60, 0.06);
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 12px;
}
.keypad button {
  font-size: 1.4rem;
  padding: 16px 0;
  border: none;
  border-radius: var(--radius-sm);
  background: #eaf0f4;
  color: var(--color-header);
  font-weight: 600;
  cursor: pointer;
}
.keypad button:active { background: #d7e2e9; }
.keypad .key-back, .keypad .key-clear {
  background: #fbdede;
  color: #8a2424;
}
.keypad .key-guardar {
  grid-column: span 2;
  padding: 0;
  font-size: 1.05rem;
  /* .keypad button es más específico que .btn-primary y le ganaba el color
     de fondo/texto, dejando este botón gris como una tecla más. */
  background: var(--color-primary);
  color: #fff;
}
.keypad .key-guardar:active { background: var(--color-primary-dark); }
.keypad .key-guardar:disabled { opacity: 0.6; }

.destare-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #f0f6f7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
}
.destare-toggle strong { color: var(--color-primary-dark); }
.chevron { color: var(--color-muted); }

.destare-detalle {
  background: #fbfdfd;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 14px 16px 4px;
  margin-top: -12px;
}

.neto-preview { font-size: 1rem; margin: 4px 0; }
.neto-preview strong { font-size: 1.2rem; color: var(--color-primary-dark); }


/* Tablet en vertical, o tablets de 8" en horizontal (p.ej. Galaxy Tab
   Active5, bastante más estrecha en px CSS que la Tab S10 FE de 10.9" para
   la que se pensó el diseño a dos columnas): apilar en vez de dos columnas.
   El umbral se sube a 1024px a propósito para que también entren tablets
   de 8" en horizontal, no solo el modo vertical/estrecho. */
@media (max-width: 1024px) {
  .pesaje-grid {
    /* Se mantiene con altura acotada a la pantalla (no height:auto): si no,
       el panel de la derecha pierde el límite que necesita su propio
       overflow-y:auto para funcionar, y en vez de hacer scroll cada panel
       por separado (como en el modo de dos columnas) acaba haciendo scroll
       toda la página entera, dejando "Guardar pesada" fuera de vista sin
       bajar. Con filas de grid en vez de auto, cada panel sigue haciendo su
       propio scroll interno, solo que apilados en vez de en paralelo. */
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 35vh) 1fr;
    grid-template-rows: minmax(120px, 35dvh) 1fr;
  }
  .panel-entrada { padding: 16px 18px; }
  .keypad button { padding: 12px 0; }
}

.prev-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.prev-table th, .prev-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }