:root {

  --wine-950: #4b1013;

  --wine-800: #6d171b;

  --wine-700: #861f25;

  --wine-600: #a63339;

  --ink: #271b1c;

  --muted: #6f5e61;

  --line: #dfd6d5;

  --surface: #ffffff;

  --canvas: #f7f4f3;

  --canvas-deep: #eee7e5;

  --success: #176c4d;

  --danger: #a82c35;

  --focus: #1d5d8f;

  --radius: 14px;

  color-scheme: light;

}



* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { min-height: 100%; background: var(--canvas); }

body {

  min-height: 100vh;

  margin: 0;

  color: var(--ink);

  background: var(--canvas);

  font-family: Aptos, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  font-size: 16px;

  line-height: 1.45;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



::selection { color: #fff; background: var(--wine-700); }

* { scrollbar-color: #b59a9b transparent; scrollbar-width: thin; }



a { color: var(--wine-800); text-underline-offset: 3px; }

a:hover { color: var(--wine-950); }

button, input, select, textarea { font: inherit; }

button { border: 0; }

button, select, input, textarea { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {

  outline: 3px solid color-mix(in srgb, var(--focus) 58%, transparent);

  outline-offset: 2px;

}

input, textarea { caret-color: var(--wine-700); }

input[type="number"] { font-variant-numeric: tabular-nums; }

*::-webkit-scrollbar { width: 10px; height: 10px; }

*::-webkit-scrollbar-thumb { border: 3px solid var(--canvas); border-radius: 99px; background: #b59a9b; }

*::-webkit-scrollbar-track { background: transparent; }



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.app-shell {

  width: min(calc(100% - 32px), 1120px);

  margin: 0 auto;

  padding: 32px 0 48px;

  animation: shell-arrival 420ms cubic-bezier(.22, 1, .36, 1) both;

}

.app-shell--narrow { width: min(calc(100% - 32px), 760px); }



.page-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  margin: 0 0 24px;

}

.page-header__title { min-width: 0; }

.page-header h1, .page-header h2, .auth-card h1 {

  margin: 0;

  color: var(--wine-950);

  letter-spacing: -.025em;

  line-height: 1.08;

}

.page-header h1 { font-size: clamp(1.75rem, 3vw, 2.45rem); }

.page-header h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); }

.page-header p { max-width: 62ch; margin: 9px 0 0; color: var(--muted); }



.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-width: max-content;

  color: var(--wine-950);

  font-weight: 750;

  letter-spacing: .01em;

  text-decoration: none;

}

.brand img { width: 42px; height: 42px; object-fit: contain; }

.brand span { max-width: 12ch; line-height: 1.08; }

.brand img, .brand span { transition: transform 180ms cubic-bezier(.22, 1, .36, 1), color 180ms ease; }

@media (hover: hover) { .brand:hover img { transform: rotate(-4deg) scale(1.05); } .brand:hover span { transform: translateX(2px); } }



.session-line {

  margin: 0;

  color: var(--muted);

  font-size: .875rem;

}

.session-line:not(:empty) {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 11px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: #fffafa;

}

.session-line:not(:empty)::before {

  content: "";

  width: 7px;

  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--success);

}



.panel {

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--surface);

}

.panel--form { padding: clamp(20px, 4vw, 32px); }

.panel--results { padding: clamp(18px, 3vw, 28px); }



.panel__heading { margin: 0; font-size: 1.15rem; color: var(--wine-950); }

.panel__intro { margin: 6px 0 20px; color: var(--muted); font-size: .94rem; }



.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }

.field-grid--territory { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field { min-width: 0; }

.field--wide { grid-column: 1 / -1; }

.field label, .filter-field label {

  display: block;

  margin: 0 0 7px;

  color: var(--ink);

  font-size: .875rem;

  font-weight: 700;

}

.field label span { color: var(--danger); }

input, select, textarea {

  width: 100%;

  min-height: 46px;

  padding: 10px 12px;

  border: 1px solid #cbbfbe;

  border-radius: 9px;

  color: var(--ink);

  background: #fff;

  box-shadow: inset 0 1px 1px rgba(40, 22, 23, .04);

  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;

}

textarea { min-height: 88px; resize: vertical; }

input::placeholder, textarea::placeholder { color: #65575a; opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: #aa9092; }

input:focus, select:focus, textarea:focus { border-color: var(--focus); box-shadow: inset 0 1px 1px rgba(40, 22, 23, .04), 0 0 0 3px color-mix(in srgb, var(--focus) 13%, transparent); outline: 0; }

input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) { border-color: var(--danger); }

input:disabled, select:disabled, textarea:disabled { color: #78696a; background: #f1edeb; cursor: not-allowed; }

.field:focus-within label { color: var(--wine-700); }



fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }

fieldset + fieldset { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }

legend {

  padding: 0;

  margin: 0 0 4px;

  color: var(--wine-950);

  font-size: 1.05rem;

  font-weight: 750;

}

.field-help { margin: 0 0 16px; color: var(--muted); font-size: .875rem; }



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding: 10px 15px;

  border: 1px solid transparent;

  border-radius: 9px;

  color: var(--wine-950);

  background: #f0e8e7;

  font-weight: 750;

  line-height: 1.2;

  text-align: center;

  text-decoration: none;

  cursor: pointer;

  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1);

}

.btn:hover { color: var(--wine-950); background: #e5d8d7; }

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: .58; cursor: wait; transform: none; }

.btn--primary { color: #fff; background: var(--wine-700); }

.btn--primary:hover { color: #fff; background: var(--wine-950); }

.btn--secondary { color: #fff; background: #315f80; }

.btn--secondary:hover { color: #fff; background: #244a65; }

.btn--success { color: #fff; background: var(--success); }

.btn--success:hover { color: #fff; background: #10533a; }

.btn--quiet { border-color: var(--line); background: #fff; }

.btn--danger { color: #fff; background: var(--danger); }

@media (hover: hover) { .btn--primary:hover, .btn--success:hover, .btn--secondary:hover { transform: translateY(-1px); } }



.action-row { display: flex; flex-wrap: wrap; gap: 10px; }

.action-row .btn { flex: 0 1 auto; }

.page-header__controls { margin-top: 10px; }

.primary-actions { margin-bottom: 22px; }

.form-grid-offset { margin-top: 22px; }

.capture-actions {

  position: sticky;

  bottom: 12px;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 10px;

  margin-top: 28px;

  padding: 10px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: rgba(255, 255, 255, .96);

  backdrop-filter: blur(8px);

}

.form-stack { display: grid; gap: 12px; }

.capture-actions .btn { min-height: 48px; }

.capture-actions .btn--quiet { white-space: nowrap; }



.status {

  min-height: 1.25rem;

  margin: 16px 0 0;

  color: var(--muted);

  font-size: .9rem;

}

.status--error { color: var(--danger) !important; }

.status--success { color: var(--success) !important; }

.status--success:not(:empty) { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line)); border-radius: 9px; background: #f4fbf7; font-weight: 700; }

.status--error:not(:empty) { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: 9px; background: #fff8f8; font-weight: 700; }



.workspace-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.8fr); gap: 22px; align-items: start; }

.filter-panel { padding: 20px; }

.filter-panel h2 { margin: 0 0 16px; color: var(--wine-950); font-size: 1.12rem; }

.filter-stack { display: grid; gap: 13px; }

.filter-actions { display: grid; gap: 9px; margin-top: 18px; }



.results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.results-head h2 { margin: 0; color: var(--wine-950); font-size: 1.2rem; }

.results-head p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.repCard {

  padding: 16px 0;

  border: 0;

  border-bottom: 1px solid var(--line);

  border-radius: 0;

  background: transparent;

  color: var(--ink);

  line-height: 1.55;

  transition: background-color 160ms ease, transform 160ms ease;

}

.repCard:first-of-type { border-top: 1px solid var(--line); }

.repCard:hover { transform: translateX(4px); background: #fffafa; }

.repCard b { display: inline-block; margin-bottom: 3px; color: var(--wine-950); font-size: 1.02rem; }

.repCard small { color: var(--muted); }

.waLink { display: inline-flex; margin: 8px 0 2px; color: #075c40; font-weight: 750; text-decoration-thickness: 1px; }

.seccBox { max-height: 200px; overflow: auto; }

#info h2 { margin: 0; color: var(--wine-950); font-size: 1.3rem; }

#info > p { color: var(--muted); }

#info details { margin: 12px 0; color: var(--muted); }

#info summary { color: var(--wine-800); font-weight: 750; cursor: pointer; }

.empty-state { max-width: 38ch; padding: 26px 0 8px; color: var(--muted); text-align: center; }

.empty-state strong { display: block; margin-bottom: 5px; color: var(--wine-950); font-size: 1rem; }



.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 620px; border-collapse: collapse; }

th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

th { color: var(--muted); background: #fbf8f7; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

td { font-size: .9rem; }

td .btn { min-height: 34px; padding: 7px 9px; font-size: .8rem; }



.auth-page {

  display: grid;

  place-items: center;

  min-height: 100vh;

  padding: 24px;

  overflow: hidden;

  background: var(--wine-950);

}

.auth-page::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  opacity: .14;

  background: url("../logo.png") center / min(78vw, 700px) no-repeat;

}

.auth-card {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 430px;

  padding: clamp(26px, 7vw, 42px);

  border-radius: 16px;

  background: #fffdfc;

  box-shadow: 0 26px 60px rgba(0, 0, 0, .28);

}

.auth-card__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }

.auth-card__brand img { width: 66px; height: 66px; object-fit: contain; }

.auth-card h1 { font-size: 1.5rem; }

.auth-card__brand p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }

.auth-card .field + .field { margin-top: 16px; }

.auth-card .btn { width: 100%; min-height: 48px; margin-top: 24px; }

.auth-card .status { text-align: center; }



@keyframes shell-arrival { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 760px) {

  .app-shell { width: min(calc(100% - 24px), 1120px); padding: 20px 0 32px; }

  .page-header { align-items: stretch; flex-direction: column; gap: 14px; margin-bottom: 18px; }

  .brand { align-self: flex-start; }

  .field-grid, .field-grid--territory, .workspace-grid { grid-template-columns: 1fr; }

  .field--wide { grid-column: auto; }

  .panel--form, .panel--results { padding: 20px; }

  .capture-actions { grid-template-columns: 1fr; bottom: 8px; }

  .capture-actions .btn--quiet { order: 2; }

  .results-head { flex-direction: column; }

}



/* Comando territorial: aplicación operativa para escritorio y captura de campo. */

.app-page { background: #eef0f2; }

.app-layout { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; background: #eef0f2; }

.side-rail { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 100vh; height: 100vh; padding: 26px 17px 20px; color: #fffaf9; background: var(--wine-950); }

.side-brand { display: inline-flex; align-items: center; gap: 11px; padding: 3px 8px 28px; color: #fff; font-size: 1rem; letter-spacing: .02em; }

.side-brand img { width: 38px; height: 38px; filter: brightness(0) invert(1); }

.side-brand span { display: grid; gap: 3px; max-width: 13ch; }

.side-brand small { color: #edd8d8; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.side-brand:hover { color: #fff; }

.side-nav { display: grid; gap: 5px; }

.side-nav a, .side-rail__footer a, .side-rail__footer button { display: block; width: 100%; padding: 10px 12px; border-radius: 9px; color: #f7e7e6; background: transparent; font: inherit; font-size: .9rem; font-weight: 700; text-align: left; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; }

.side-nav a:hover, .side-rail__footer a:hover, .side-rail__footer button:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateX(2px); }

.side-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.16); }

.side-rail a:focus-visible, .side-rail button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: rgba(255,255,255,.2); }

.side-rail__footer { display: grid; gap: 4px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }

.side-rail__footer span { padding: 0 12px 8px; color: #dcbdbd; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.side-rail__footer button { cursor: pointer; }

.work-area { width: min(100%, 1280px); padding: clamp(30px, 5vw, 64px); }

.work-area--capture { max-width: 980px; }

.workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 34px; }

.workspace-header h1 { margin: 0; color: var(--wine-950); font-size: clamp(2rem, 4vw, 3.05rem); letter-spacing: -.035em; line-height: 1; }

.workspace-header .session-line { margin-top: 12px; }

.workspace-header__action { flex: 0 0 auto; margin-top: 3px; }

.command-band { padding: 22px 0 26px; border-top: 1px solid #cfc0be; border-bottom: 1px solid #cfc0be; }

.command-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.command-band__head h2, .record-ledger h2 { margin: 0; color: var(--wine-950); font-size: 1.18rem; letter-spacing: -.015em; }

.command-band__head p { margin: 0; color: var(--muted); font-size: .9rem; }

.command-fields { display: grid; grid-template-columns: minmax(200px, 1.45fr) minmax(145px, .72fr) minmax(170px, .9fr) auto; gap: 12px; align-items: end; }

.filter-field { min-width: 0; }

.filter-field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: .78rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }

.command-fields .btn { min-height: 46px; }

.record-ledger { margin-top: 32px; padding: 0; border-top: 2px solid var(--wine-800); background: transparent; }

.record-ledger .results-head { margin: 0; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }

.record-ledger .results-head p { margin: 4px 0 0; }

.record-ledger .repCard { padding: 18px 12px; }

.record-ledger .repCard:hover { transform: none; background: #f8f2f1; }

.record-ledger .empty-state { margin: 16px 0; }

.capture-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 26px; border-top: 1px solid #cfc0be; border-bottom: 1px solid #cfc0be; }

.capture-steps a { display: flex; align-items: center; gap: 9px; padding: 13px 6px; color: var(--wine-800); font-size: .86rem; font-weight: 800; text-decoration: none; }

.capture-steps span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; font-size: .72rem; }

.capture-steps a:first-child { color: var(--wine-700); }

.capture-sheet { padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 14px; background: #fffdfc; }

.capture-sheet fieldset + fieldset { margin-top: 34px; padding-top: 30px; }

.capture-sheet legend { font-size: 1.18rem; }

.capture-sheet .field-help { max-width: 68ch; }

.capture-choices { display: grid; gap: 20px; margin-top: 24px; }

.capture-sheet .choice-group + .choice-group { margin: 0; padding: 0; border: 0; }

.capture-sheet .choice-group legend { font-size: .95rem; }

.choice-group legend span { color: var(--danger); }

.choice-group .field-help { margin-bottom: 4px; }

.choice-options { display: flex; flex-wrap: wrap; gap: 4px 22px; }

.choice-option { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 0; cursor: pointer; }

.choice-option input[type="radio"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--wine-700); box-shadow: none; }

.choice-option input[type="radio"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: none; }

.choice-option:has(input:checked) { color: var(--wine-800); font-weight: 700; }

.capture-actions { max-width: 980px; }

.admin-layout { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.2fr); gap: 42px; align-items: start; }

.admin-layout .capture-sheet { min-width: 0; }

.admin-layout .record-ledger { margin-top: 0; }

.password-sheet { max-width: 760px; }



@media (max-width: 980px) {

  .app-layout { grid-template-columns: 210px minmax(0, 1fr); }

  .work-area { padding: 32px; }

  .command-fields { grid-template-columns: 1fr 1fr; }

  .command-fields .filter-field--search { grid-column: 1 / -1; }

  .command-fields .btn { justify-self: start; }

  .admin-layout { grid-template-columns: 1fr; gap: 32px; }

}

@media (max-width: 760px) {

  .app-layout { display: block; }

  .side-rail { position: static; display: grid; grid-template-columns: 1fr auto; min-height: 0; height: auto; padding: 15px 16px; }

  .side-brand { padding: 0; font-size: .92rem; }

  .side-brand img { width: 32px; height: 32px; }

  .side-brand small { display: none; }

  .side-nav { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; }

  .side-nav a { width: auto; flex: 0 0 auto; padding: 8px 10px; font-size: .8rem; }

  .side-rail__footer { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 3px; margin: 0; padding: 0; border: 0; }

  .side-rail__footer span { display: none; }

  .side-rail__footer a, .side-rail__footer button { width: auto; padding: 8px 10px; font-size: .8rem; }

  .work-area { width: 100%; padding: 28px 16px 34px; }

  .workspace-header { align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 25px; }

  .workspace-header h1 { font-size: 2.15rem; }

  .workspace-header__action { align-self: flex-start; }

  .command-band__head { display: block; }

  .command-band__head p { margin-top: 5px; }

  .command-fields { grid-template-columns: 1fr; }

  .command-fields .filter-field--search { grid-column: auto; }

  .command-fields .btn { width: 100%; justify-self: stretch; }

  .record-ledger { margin-top: 26px; }

  .capture-steps { margin-inline: -16px; padding-inline: 16px; overflow-x: auto; }

  .capture-steps a { flex: 0 0 auto; padding-right: 20px; }

  .capture-sheet { padding: 22px 18px; }

  .capture-sheet .field-grid--territory { grid-template-columns: 1fr; }

}



.record-actions { display:flex; gap:8px; float:right; margin:0 0 12px 12px; }

.record-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:9px; color:var(--wine-800); background:var(--surface); cursor:pointer; }

.record-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.record-icon--danger { color:var(--danger); }