:root {
  color: #1f2937;
  background: #f3f6f9;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

.container {
  max-width: 920px;
  margin: 48px auto;
  padding: 0 24px;
}

header { margin-bottom: 28px; }

.auth-card {
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  margin: 72px auto;
  max-width: 440px;
  padding: 32px;
}
.login-form { display: grid; gap: 16px; margin-top: 24px; }
.login-form label { display: grid; gap: 6px; }
.login-form input { margin: 0; width: 100%; }
.login-form .status { margin: 0; }
.session-bar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#session-user { color: #475569; font-size: .9rem; font-weight: 600; }

.eyebrow {
  color: #0c6b4b;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1 { font-size: 2rem; margin: 0; }
.subtitle { color: #64748b; margin: 8px 0 0; }

.filters {
  align-items: end;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 16px;
}

label { display: block; font-size: .88rem; font-weight: 600; }
input, button { border-radius: 6px; font: inherit; min-height: 40px; }
input { border: 1px solid #b9c5d0; margin-top: 6px; padding: 0 10px; }
button { background: #0c6b4b; border: 0; color: #fff; cursor: pointer; font-weight: 600; padding: 0 18px; }
button:hover { background: #09543c; }

.secondary-button {
  background: #e7f4ee;
  color: #0c6b4b;
  white-space: nowrap;
}
.secondary-button:hover { background: #d4ebdf; }
.secondary-button:disabled { color: #94a3b8; cursor: not-allowed; }
.ticket-actions { min-width: 154px; }
.ticket-actions button { display: block; width: 100%; }
.ticket-actions button + button { margin-top: 8px; }

.status { color: #475569; min-height: 24px; margin: 18px 0 10px; }
.status.error { color: #b42318; }

.table-wrapper { background: #fff; border: 1px solid #dbe3ea; border-radius: 10px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #e7edf2; padding: 14px 16px; text-align: left; }
th { background: #f8fafc; color: #475569; font-size: .82rem; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
.empty { color: #64748b; text-align: center; }

.quality { margin-top: 4px; }
.quality-heading { align-items: baseline; display: flex; justify-content: space-between; }
.quality h2 { font-size: 1.35rem; margin: 0 0 12px; }

.estimate { max-width: 640px; }
.weight-summary { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 24px 0; }
.weight-summary > div, .net-weight {
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  padding: 16px;
}
.weight-summary span, .net-weight span { color: #64748b; display: block; font-size: .86rem; }
.weight-summary strong { display: block; font-size: 1.2rem; margin-top: 6px; }
.estimate-form { display: grid; gap: 8px; }
.estimate-form input { max-width: 280px; }
.estimate-form button { margin-top: 8px; width: fit-content; }
.form-error { color: #b42318; margin: 0; }
.net-weight { background: #e7f4ee; border-color: #b8ddcd; margin: 24px 0; }
.net-weight strong { color: #075c40; display: block; font-size: 2rem; margin-top: 6px; }
.net-weight p { color: #475569; margin: 8px 0 0; }
.sample-count { border-top: 1px solid #b8ddcd; margin-top: 16px; padding-top: 16px; }
.sample-count strong { font-size: 1.35rem; }
.back-button { margin-top: 8px; }
.bunch-quality { margin-top: 32px; }
.bunch-quality h2 { font-size: 1.35rem; margin-bottom: 6px; }
.bunch-quality > p { color: #64748b; margin-top: 0; }
.bunch-inputs { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0; }
.bunch-inputs label { display: grid; gap: 6px; }
.bunch-inputs input { margin: 0; padding: 0 10px; width: 100%; }
.class-group { border: 1px solid #dbe3ea; border-radius: 10px; margin: 22px 0; padding: 16px; }
.class-group legend { color: #1f2937; font-weight: 700; padding: 0 6px; }
.class-group p { color: #64748b; font-size: .9rem; margin: 0; }
.percentage-result { margin-top: 28px; }
.percentage-result h3 { font-size: 1.1rem; margin-bottom: 4px; }
.percentage-result > p { color: #475569; margin-top: 0; }

@media (max-width: 560px) {
  .container { margin: 24px auto; padding: 0 14px; }
  .auth-card { margin: 24px auto; padding: 24px; }
  .session-bar { align-items: stretch; flex-direction: column; gap: 10px; }
  .session-bar button { width: 100%; }
  .filters { align-items: stretch; flex-direction: column; }
  .filters input, .filters button { width: 100%; }
  h1 { font-size: 1.65rem; }
  .quality-heading { align-items: stretch; flex-direction: column; gap: 8px; }
  .quality-heading button { width: 100%; }
  .weight-summary { grid-template-columns: 1fr; }
  .bunch-inputs { grid-template-columns: 1fr; }
  .estimate-form input, .estimate-form button, .back-button { max-width: none; width: 100%; }
}

@media (max-width: 700px) {
  .table-wrapper { background: transparent; border: 0; overflow: visible; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  table { border: 0; }
  tbody { display: grid; gap: 12px; }
  tr {
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    overflow: hidden;
  }
  td {
    align-items: center;
    border-bottom: 1px solid #e7edf2;
    display: flex;
    justify-content: space-between;
    min-height: 45px;
    padding: 10px 14px;
    text-align: right;
  }
  td::before {
    color: #475569;
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 700;
    margin-right: 16px;
    text-align: left;
    text-transform: uppercase;
  }
  #tickets td:nth-child(1)::before { content: 'Tiquete'; }
  #tickets td:nth-child(2)::before { content: 'Placa'; }
  #tickets td:nth-child(3)::before { content: 'Identificación'; }
  #tickets td:nth-child(4)::before { content: 'Conductor'; }
  #tickets td:nth-child(5)::before { content: 'Peso inicial (t)'; }
  #tickets td:nth-child(6)::before { content: 'Fecha ingreso'; }
  #tickets td:nth-child(7)::before { content: none; }
  #quality-details td:nth-child(1)::before { content: 'Concepto'; }
  #quality-details td:nth-child(2)::before { content: 'Valor registrado'; }
  #quality-details td:nth-child(3)::before { content: 'Tolerancia inicial'; }
  #quality-details td:nth-child(4)::before { content: 'Tolerancia final'; }
  #bunch-percentages td:nth-child(1)::before { content: 'Clasificación'; }
  #bunch-percentages td:nth-child(2)::before { content: 'Racimos'; }
  #bunch-percentages td:nth-child(3)::before { content: 'Porcentaje / valor'; }
  td.empty { display: block; padding: 24px 14px; text-align: center; }
  td.empty::before { content: none !important; }
  #tickets td:last-child { display: grid; gap: 8px; padding: 10px 14px; }
  #tickets td:last-child .secondary-button, #tickets td:last-child button { width: 100%; }
}