/* Panel de equipo — tokens de BuscadorTributario (tokens.css). Sin hex: todo var(--oc-*). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--oc-bg); color: var(--oc-body);
  font-family: var(--oc-font-sans); font-size: 15px; line-height: 1.55;
}
a { color: var(--oc-navy-500); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--oc-focus-ring); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- banda de marca: cabecera + nav en una sola pieza */
.banda { background: var(--oc-bg-marca, var(--oc-navy)); color: var(--oc-on-navy); }
.banda-in {
  width: min(100% - 64px, 1264px); margin: 0 auto; display: flex; align-items: center;
  gap: 28px; min-height: 60px;
}
.marca { font-weight: 700; font-size: 19px; letter-spacing: -.2px; color: var(--oc-on-navy); text-decoration: none; white-space: nowrap; }
.marca b { color: var(--oc-accent); font-weight: 700; }
.marca span { font-weight: 600; font-size: 13px; color: var(--oc-on-navy-soft); margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .28); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  color: var(--oc-on-navy-soft); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: var(--oc-r-sm); transition: color var(--oc-dur) var(--oc-ease);
}
.nav a:hover { color: var(--oc-on-navy); }
.nav a[aria-current="page"] { color: var(--oc-on-navy); background: rgba(255, 255, 255, .12); }
.nav a:focus-visible, .yo button:focus-visible { box-shadow: 0 0 0 3px var(--oc-focus-on-dark); }
.yo { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--oc-on-navy-soft); white-space: nowrap; }
.yo button {
  background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: var(--oc-on-navy);
  border-radius: var(--oc-r-sm); padding: 5px 10px; cursor: pointer; font-size: 13px; font-weight: 600;
}

/* ---- layout */
.marco { width: min(100% - 64px, 1264px); margin: 28px auto 48px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.marco.solo { grid-template-columns: minmax(0, 1fr); }
h1 { font-family: var(--oc-font-serif); font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--oc-ink); margin: 0 0 4px; letter-spacing: -.3px; }
h2 { font-size: 15px; font-weight: 700; color: var(--oc-ink); margin: 32px 0 12px; }
.bajada { color: var(--oc-mute); margin: 0 0 24px; font-size: 14px; }

/* ---- tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); padding: 14px 16px; }
.tile dt { font-size: 12px; font-weight: 600; color: var(--oc-mute); }
.tile dd { margin: 2px 0 0; font-size: 26px; font-weight: 700; color: var(--oc-ink); font-variant-numeric: tabular-nums; }
.tile.alerta dd { color: var(--oc-bad-strong); }

/* ---- tabla */
.tabla-scroll { overflow-x: auto; border-radius: var(--oc-r); }
.tabla { width: 100%; border-collapse: collapse; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); overflow: hidden; font-size: 14px; }
.tabla th { text-align: left; font-size: 12px; font-weight: 600; color: var(--oc-mute); background: var(--oc-bg-alt); padding: 9px 12px; }
.tabla td { padding: 10px 12px; border-top: 1px solid var(--oc-line); vertical-align: top; }
.tabla tbody tr { cursor: pointer; transition: background var(--oc-dur-fast) var(--oc-ease); }
.tabla tbody tr:hover { background: var(--oc-bg); }
.tabla .quien b { display: block; color: var(--oc-ink); font-weight: 600; }
.tabla .quien small { color: var(--oc-mute); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { background: var(--oc-surface); border: 1px dashed var(--oc-line-2); border-radius: var(--oc-r); padding: 20px; color: var(--oc-mute); font-size: 14px; }

/* ---- badges de estado */
.est { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--oc-r-sm); white-space: nowrap; background: var(--oc-bg-alt); color: var(--oc-body-soft); }
.est.cobro_rechazado, .est.vencida_sin_pagar { background: var(--oc-bad-bg); color: var(--oc-bad-strong); }
.est.esperando_pago, .est.por_vencer { background: var(--oc-warn-bg); color: var(--oc-warn-deep); }
.est.al_dia { background: var(--oc-ok-bg); color: var(--oc-ok-strong); }
.mano { display: inline-block; font-size: 12px; font-weight: 600; color: var(--oc-navy); border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-sm); padding: 1px 7px; margin-left: 6px; }

/* ---- filtros */
.filtros { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.campo { background: var(--oc-surface); border: 1px solid var(--oc-line-2); border-radius: var(--oc-r); padding: 9px 12px; min-width: 0; }
.filtros .campo:first-child { flex: 1; min-width: 200px; }

/* ---- carpeta */
.volver { font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; margin-bottom: 12px; }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); margin: 0; }
.datos div { padding: 10px 14px; border-top: 1px solid var(--oc-line); }
.datos div:nth-child(-n+2) { border-top: 0; }
.datos dt { font-size: 12px; font-weight: 600; color: var(--oc-mute); }
.datos dd { margin: 1px 0 0; color: var(--oc-ink); overflow-wrap: anywhere; }
.atiendo { display: flex; gap: 14px; align-items: flex-start; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); padding: 14px 16px; margin-top: 14px; }
.atiendo p { margin: 2px 0 0; font-size: 13px; color: var(--oc-mute); }
.atiendo b { color: var(--oc-ink); }
.switch { flex: none; width: 44px; height: 26px; border-radius: var(--oc-r-pill); border: 0; background: var(--oc-line-2); position: relative; cursor: pointer; transition: background var(--oc-dur) var(--oc-ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--oc-r-circle); background: var(--oc-surface); box-shadow: var(--oc-shadow-sm); transition: transform var(--oc-dur) var(--oc-ease); }
.switch[aria-checked="true"] { background: var(--oc-navy); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .5; cursor: wait; }
.nota-founder { background: var(--oc-bg-alt); border-left: 3px solid var(--oc-navy); border-radius: var(--oc-r-sm); padding: 10px 14px; font-size: 14px; margin-top: 14px; }
.notas textarea { width: 100%; min-height: 80px; resize: vertical; }
.notas ul, .hist { list-style: none; padding: 0; margin: 12px 0 0; }
.notas li { background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r); padding: 10px 14px; margin-bottom: 8px; white-space: pre-wrap; font-size: 14px; }
.notas li small, .hist small { display: block; color: var(--oc-mute); font-size: 12px; }
.hist li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--oc-line); font-size: 14px; }
.hist li:first-child { border-top: 0; }
.hist .f { color: var(--oc-mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.hist .q { font-weight: 600; color: var(--oc-ink); }

/* ---- botones */
.btn { background: var(--oc-navy); color: var(--oc-surface); border: 0; border-radius: var(--oc-r); padding: 9px 16px; font-weight: 600; cursor: pointer; transition: background var(--oc-dur) var(--oc-ease); }
.btn:hover { background: var(--oc-navy-500); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.sec { background: var(--oc-surface); color: var(--oc-navy); border: 1px solid var(--oc-line-2); }
.btn.sec:hover { background: var(--oc-bg-alt); }
.fila-btn { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---- chat */
.chat { background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r-lg); display: flex; flex-direction: column; height: calc(100vh - 120px); position: sticky; top: 20px; min-height: 420px; }
.solo .chat { height: calc(100vh - 150px); position: static; }
.chat-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--oc-line); }
.chat-cab b { color: var(--oc-ink); font-size: 14px; }
.chat-cab b { flex: none; }
.chat-cab select { flex: 1; min-width: 0; max-width: 240px; font-size: 13px; padding: 5px 8px; }
.msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 92%; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--oc-navy); color: var(--oc-surface); border-radius: var(--oc-r) var(--oc-r) var(--oc-r-sm) var(--oc-r); padding: 9px 13px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; color: var(--oc-body); }
.msg.assistant p { margin: 0 0 8px; }
.msg.assistant ul, .msg.assistant ol { margin: 0 0 8px; padding-left: 20px; }
.msg.assistant strong { color: var(--oc-ink); }
.msg.error { color: var(--oc-bad-strong); font-size: 13px; }
.pensando { color: var(--oc-mute); font-size: 13px; }
.sugerencias { display: flex; flex-direction: column; gap: 8px; }
.sugerencias p { margin: 0 0 4px; color: var(--oc-mute); font-size: 13px; }
.sugerencias button { text-align: left; background: var(--oc-bg); border: 1px solid var(--oc-line); border-radius: var(--oc-r); padding: 9px 12px; cursor: pointer; font-size: 14px; color: var(--oc-body); transition: border-color var(--oc-dur) var(--oc-ease); }
.sugerencias button:hover { border-color: var(--oc-navy-500); }
.composer { border-top: 1px solid var(--oc-line); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; overflow-y: hidden; max-height: 160px; min-height: 42px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r); padding: 10px 12px; }

/* ---- acceso */
.acceso { width: min(100% - 32px, 420px); margin: 64px auto; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r-lg); padding: 28px; box-shadow: var(--oc-shadow); }
.acceso label { display: block; font-size: 13px; font-weight: 600; color: var(--oc-ink); margin: 14px 0 6px; }
.acceso input { width: 100%; }
.acceso .btn { width: 100%; margin-top: 20px; padding: 12px; }
.acceso .ayuda { font-size: 13px; color: var(--oc-mute); margin: 14px 0 0; }
.msg-err { color: var(--oc-bad-strong); font-size: 14px; margin: 12px 0 0; min-height: 1em; }
.msg-ok { color: var(--oc-ok-strong); font-size: 14px; margin: 12px 0 0; }

@media (max-width: 1080px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .marco > .chat { display: none; }
}
@media (max-width: 720px) {
  .banda-in, .marco { width: min(100% - 32px, 1264px); }
  .banda-in { flex-wrap: wrap; gap: 6px 16px; padding: 10px 0; }
  .marca span { display: none; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .datos div:nth-child(2) { border-top: 1px solid var(--oc-line); }
  .tabla .ocultable { display: none; }
  .filtros .campo, .filtros .campo:first-child { flex: 1 1 100%; }
  .tabla td, .tabla th { padding: 9px 10px; }
  .hist li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }