/* Panel de administración: neutro, para que mande el contenido. Celular primero. */
body.panel { background: var(--wash); padding-bottom: 72px; }
html:has(body.panel) { scroll-padding: 80px 0 88px; }
@media (min-width: 1024px) { html:has(body.panel) { scroll-padding: 80px 0 24px; } }

.panel-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.panel-top .biz { font-weight: 700; font-size: 1rem; }
.panel-top .who { color: var(--muted); font-size: 0.875rem; }
.jortit { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; min-height: 44px; color: var(--muted); text-decoration: none; }
.jortit img { height: 25px; width: auto; }
@media (max-width: 420px) { .jortit span { display: none; } }

.panel-main { padding: 16px; max-width: 1120px; margin: 0 auto; }
.panel-main > h1 { font-size: 1.5rem; margin-bottom: 4px; }
.lede { color: var(--muted); margin-bottom: 20px; }

/* Navegación: abajo en celular, a la izquierda en computadora. */
.panel-nav {
  position: fixed; inset: auto 0 0 0; display: flex; background: var(--paper);
  border-top: 1px solid var(--line); z-index: 20;
}
.panel-nav a {
  flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--muted); font-size: 0.875rem; font-weight: 700;
}
.panel-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }

@media (min-width: 1024px) {
  body.panel { padding-bottom: 0; padding-left: 216px; }
  .panel-nav {
    inset: 0 auto 0 0; width: 216px; flex-direction: column; padding: 72px 12px 12px;
    border-top: 0; border-right: 1px solid var(--line);
  }
  .panel-nav a { flex: 0 0 auto; justify-content: flex-start; padding: 0 12px; border-radius: var(--radius-s); min-height: 44px; }
  .panel-nav a[aria-current="page"] { box-shadow: none; background: var(--wash); }
  .panel-main { padding: 28px 32px; }
}

/* Bloques del panel */
.sheet { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; margin-bottom: 16px; }
.sheet > h2 { font-size: 1.05rem; margin-bottom: 12px; }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.row-list > li:first-child { border-top: 0; }
.row-list .grow { flex: 1; min-width: 0; }
.row-list .title { font-weight: 700; text-decoration: none; display: block; overflow-wrap: anywhere; }
.row-list .meta { color: var(--muted); font-size: 0.875rem; }
.badge { display: inline-block; font-size: 0.875rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.badge.live { border-color: var(--ok); color: var(--ok); }
.badge.staff { border-color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.stats div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px; }
.stats b { display: block; font-size: 1.375rem; }
.stats span { color: var(--muted); font-size: 0.875rem; }

/* Formularios (también estilizan las páginas de Identity) */
label, .form-label { display: block; font-weight: 700; margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }
.field > .hint, .alt-login > .hint { display: block; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=search], select, textarea, .form-control {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: 44px;
}
textarea { min-height: 260px; resize: vertical; line-height: 1.5; }
.field { margin-bottom: 16px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; cursor: pointer; }
.check input { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; }

.btn, button, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; font: inherit; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-s); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none;
}
.btn.quiet, button.quiet { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.danger, button.danger { background: var(--paper); color: var(--danger); border-color: var(--line); }
.icon-btn { min-height: 44px; min-width: 44px; padding: 0 12px; background: var(--paper); color: var(--ink); border-color: var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

.notice { padding: 12px 16px; border-radius: var(--radius-s); margin-bottom: 16px; border: 1px solid var(--line); background: var(--paper); }
.notice.ok { border-color: var(--ok); color: var(--ok); }
.notice.error { border-color: var(--danger); color: var(--danger); }
.empty { color: var(--muted); padding: 8px 0; }

/* Editor: formulario y vista previa en celular, lado a lado en computadora. */
.editor { display: grid; gap: 16px; }
@media (min-width: 1024px) { .editor { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
.phone {
  border: 1px solid var(--line); border-radius: 28px; padding: 20px 18px; background: var(--paper);
  min-height: 420px; position: sticky; top: 76px;
}
.phone .q { font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; }
.phone-label { color: var(--muted); font-size: 0.875rem; margin-bottom: 8px; }
.format-help { font-size: 0.875rem; color: var(--muted); }
.format-help code { background: var(--wash); padding: 1px 4px; border-radius: 4px; }

/* Identity (login) */
.form-floating { margin-bottom: 12px; display: flex; flex-direction: column-reverse; }
.text-danger { color: var(--danger); font-size: 0.875rem; }
.w-100 { width: 100%; }
.mb-16 { margin-bottom: 16px; }
.mt-12 { margin-top: 12px; }
/* La CSP bloquea estilos en línea; el resumen vacío de validación se oculta por clase. */
.validation-summary-valid { display: none; }
.field-validation-valid { display: none; }

/* Inicio de sesión y seguridad de la cuenta */
.auth { max-width: 420px; margin: 8px auto 0; }
.auth > h1 { font-size: 1.5rem; margin-bottom: 8px; }
.code-input { font-size: 1.375rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.setup { display: grid; gap: 20px; }
.qr { width: 200px; margin: 12px 0; padding: 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-s); }
.qr svg { display: block; width: 100%; height: auto; }
.key { font-size: 1rem; word-spacing: 0.25em; background: var(--wash); padding: 4px 8px; border-radius: var(--radius-s); overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding-left: 1.5em; margin: 12px 0 0; }
.recovery-codes code { font-size: 1rem; font-variant-numeric: tabular-nums; }
.codes-sheet { border-color: var(--ink); }
/* QR de acceso del equipo: grande para escanearlo de pantalla a celular. */
.access-layout { display: grid; gap: 12px; }
.access-qr { width: min(100%, 260px); margin: 4px auto; }
.access-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.access-actions .btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 768px) { .access-layout { grid-template-columns: 260px minmax(0, 1fr); align-items: center; gap: 24px; } .access-qr { margin: 0; } }
.alt-login > summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; min-height: 44px; display: flex; align-items: center; }
.alt-login[open] > summary { margin-bottom: 4px; }
@media (min-width: 768px) { .setup { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: start; gap: 32px; } }
.stats-one { grid-template-columns: 1fr; }

/* Encabezado de página con acción principal */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.page-head h1 { font-size: 1.5rem; margin-bottom: 4px; }
.page-head .lede { margin-bottom: 16px; }

/* Filtros de la lista de negocios */
.filters { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.filters a { flex: 0 0 auto; text-decoration: none; font-size: 0.875rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--paper); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.filters a b { color: var(--ink); font-variant-numeric: tabular-nums; }
.filters a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filters a[aria-current="page"] b { color: var(--paper); }

.badge.warn { border-color: var(--warn); color: var(--warn); }
.badge.danger { border-color: var(--danger); color: var(--danger); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* Administrar un negocio: se despliega debajo de la fila, sin JavaScript */
.biz-list > li { flex-wrap: wrap; scroll-margin-top: 80px; }
.biz-list h2.title { font-size: 1rem; margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.row-actions:has(.manage[open]) { flex-basis: 100%; }
.manage { flex: 0 0 auto; }
.manage[open] { flex-basis: 100%; order: 2; }
.manage > summary { list-style: none; }
.manage > summary::-webkit-details-marker { display: none; }
.manage[open] > summary { margin-left: auto; display: flex; width: max-content; }
.badge.strong { background: var(--danger); color: var(--paper); border-color: var(--danger); }
.search { display: flex; gap: 8px; margin-bottom: 12px; }
.search input { flex: 1; min-width: 0; }
.btn.warn, button.warn { background: var(--paper); color: var(--warn); border-color: var(--warn); }
.notice.warn { border-color: var(--warn); color: var(--warn); margin: 0; }
.manage-body { display: grid; gap: 12px; margin-top: 12px; }
.manage-block { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; background: var(--wash); }
.manage-block h3 { font-size: 0.9375rem; margin-bottom: 10px; }
.manage-block .field { margin-bottom: 10px; }
.manage-block .hint { margin: 6px 0 10px; }
.grid-3 { display: grid; gap: 0 10px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1024px) { .manage-body { grid-template-columns: 1fr 1fr; } }
input[type=number], input[type=date] { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: 44px; }
.hint-inline { color: var(--muted); font-size: 0.875rem; font-weight: 400; }
.danger-zone { border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; display: grid; gap: 8px; }
.danger-zone label:first-child { margin-bottom: 0; }
.danger-zone button { justify-self: start; }
.pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pay-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.875rem; }
.pay-list b { font-variant-numeric: tabular-nums; }

/* Alta de negocio */
.form-narrow { max-width: 560px; }
.suffix-input { display: flex; align-items: stretch; }
.suffix-input input { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; }
.suffix-input span { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--wash); color: var(--muted); font-size: 0.875rem; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.facts { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0 0 12px; }
.facts dt { color: var(--muted); font-size: 0.875rem; margin-top: 8px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .facts { grid-template-columns: max-content 1fr; } .facts dt { margin-top: 0; } }

/* Estado del servicio */
.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.status-list li:first-child { border-top: 0; }
.status-list .grow { flex: 1; min-width: 0; }
.status-list b { display: block; overflow-wrap: anywhere; }
.status-list .meta { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; }
.dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.lvl-ok .dot { background: var(--ok); }
.lvl-warn .dot { background: var(--warn); }
.lvl-down .dot { background: var(--danger); }

/* Salud de los negocios */
.dot.is-ok { background: var(--ok); }
.dot.is-warn { background: var(--warn); }
.dot.is-down { background: var(--danger); }
.health-list > li { display: block; }
.health > summary { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.health > summary::-webkit-details-marker { display: none; }
.health > summary .title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; }
.health > summary .title .meta { display: block; font-weight: 400; }
.health-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.health-state .meta { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.health > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 8px 4px 0 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.health[open] > summary::after { transform: rotate(-135deg); margin-top: 12px; }
.health > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 639px) {
  .health > summary { flex-wrap: wrap; }
  .health > summary::after { order: 2; }
  .health-state { order: 3; flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; padding-left: 24px; text-align: left; }
}
.health-checks { margin: 8px 0 12px 24px; }
.todo-action { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--line); }
.todo-action span { font-weight: 700; }
.lvl-warn > .grow > .todo-action { border-left-color: var(--warn); }
.lvl-down > .grow > .todo-action { border-left-color: var(--danger); }
.steps { padding-left: 1.25em; margin: 8px 0 0; display: grid; gap: 6px; }
.access { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.access .when { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }

/* Sello */
.stamp-layout { display: grid; gap: 16px; }
@media (min-width: 1024px) { .stamp-layout { grid-template-columns: 320px minmax(0, 1fr); align-items: start; } }
.logo-box { display: grid; place-items: center; min-height: 160px; background: var(--wash); border-radius: var(--radius-m); margin-bottom: 16px; padding: 12px; }
.logo-box img { width: 160px; height: 160px; object-fit: contain; }
input[type=color] { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); }
input[type=file] { font: inherit; max-width: 100%; }
.stamp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .stamp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stamp-grid li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); text-align: center; }
.stamp-grid li.chosen { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.stamp-grid img { width: 112px; height: 112px; }
.stamp-grid .name { font-weight: 700; font-size: 0.875rem; }
.grid-2 { display: grid; gap: 0 10px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.transfer { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.transfer-title { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 639px) {
  .row-actions { flex-basis: 100%; }
  .row-actions .manage { flex: 1 1 0; }
  .row-actions .manage[open] { flex-basis: 100%; }
  .manage > summary, .manage[open] > summary { margin-left: 0; width: 100%; justify-content: center; }
}
/* Pausa */
.paused .facts { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px 16px; }
.center { text-align: center; }
.stamp-grid button { padding: 0 12px; white-space: nowrap; }
.stamp-layout > * { min-width: 0; }
input[type=file] { width: 100%; }
/* Inicio del negocio */
.todo { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; }
.todo li { padding-left: 4px; }
.todo li span { display: block; margin-bottom: 6px; }
@media (min-width: 640px) { .todo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .todo li span { margin: 0; } }
.text-warn { color: var(--warn); }
@media (max-width: 380px) { .stats b { font-size: 1.125rem; } }
/* Campo de archivo con texto en español */
.field .label { display: block; font-weight: 700; margin-bottom: 6px; }
.file-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; font-weight: 400; }
.file-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick .btn { pointer-events: none; }
.file-pick:focus-within .btn { outline: 3px solid var(--ink); outline-offset: 2px; }
.file-pick .file-name { color: var(--muted); font-size: 0.875rem; overflow-wrap: anywhere; min-width: 0; }
/* El subdominio completo se lee también en el celular */
@media (max-width: 639px) {
  .suffix-input { flex-direction: column; }
  .suffix-input input { border-radius: var(--radius-s) var(--radius-s) 0 0; }
  .suffix-input span { max-width: none; border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-s) var(--radius-s); padding: 8px 10px; white-space: normal; overflow-wrap: anywhere; }
}
/* Transferencia avisada por el negocio */
.confirm-box { margin-top: 10px; padding: 12px; border: 1px solid var(--warn); border-radius: var(--radius-m); background: var(--paper); }
.confirm-box p { margin: 0 0 10px; }
.confirm-box code { overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Agregar sello: la acción del mostrador. Botones grandes, al alcance del pulgar. */
.primary-action { width: 100%; min-height: 52px; margin-bottom: 16px; font-size: 1.0625rem; }
@media (min-width: 640px) { .primary-action { width: auto; } }
.stamp-now h2 { font-size: 1.375rem; }
.stamp-now h2 .meta { color: var(--muted); font-weight: 400; font-size: 1rem; }
.stamp-now .tally { margin: 4px 0 10px; }
.stamp-now .tally b { font-size: 1.25rem; }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.dots span.on { background: var(--ink); border-color: var(--ink); }
button.big { width: 100%; min-height: 56px; font-size: 1.125rem; }
.confirm p { margin-bottom: 12px; }
.find { display: flex; gap: 8px; margin-bottom: 8px; }
.find-input { flex: 1; min-width: 0; font-size: 1.25rem !important; min-height: 52px !important; }
.find button { min-height: 52px; }
.results .meta { display: block; }
.results form { flex: 0 0 auto; }
.enroll { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.enroll h3 { font-size: 1rem; margin-bottom: 4px; }
.enroll .meta { color: var(--muted); margin-bottom: 12px; }
.enroll .check { margin-bottom: 12px; }
.scanner { margin: 12px 0; }
.scanner video { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); background: #000000; display: block; }
.code-input { text-transform: uppercase; }

/* QR del local */
.qr-layout { display: grid; gap: 16px; }
@media (min-width: 1024px) { .qr-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.big-qr { width: min(320px, 100%); }
.link-text { overflow-wrap: anywhere; }
/* Con Sellar y QR la barra de abajo tiene hasta 6 secciones: en celulares angostos se desliza en lugar de cortarse. */
@media (max-width: 1023px) {
  .panel-nav { overflow-x: auto; scrollbar-width: none; }
  .panel-nav::-webkit-scrollbar { display: none; }
  .panel-nav a { flex: 1 0 auto; padding: 0 10px; }
}

/* Plan Bronce, Plata y Oro: solo en el panel del dueño. */
.tier-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 2px 10px 2px 6px; border-radius: 999px; border: 1px solid var(--tier-edge, #D0D7DE);
  background: #fff; color: #0B2545; font: 600 0.75rem/1.3 "Bricolage Grotesque", system-ui, sans-serif; white-space: nowrap;
}
.tier-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--tier-fill, #D0D7DE); }
.tier-bronce { --tier-edge: #B97A4E; --tier-fill: linear-gradient(135deg, #E3A877, #8E5129); }
.tier-plata { --tier-edge: #A7B1BB; --tier-fill: linear-gradient(135deg, #EEF1F4, #8C97A3); }
.tier-oro { --tier-edge: #C9A24E; --tier-fill: linear-gradient(135deg, #E6C878, #A97C2B); }
.panel-top .biz { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.founder-no { color: var(--muted); font-size: 0.875rem; }
.founder-no { margin-left: 8px; }
.founder-news { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.founder-news p { margin: 0; flex: 1 1 260px; }

/* Detalle del cliente */
.panel-main > h1 .meta { color: var(--muted); font-weight: 400; font-size: 1rem; }
.history li { flex-wrap: wrap; }
.history li.voided .title { text-decoration: line-through; color: var(--muted); }
.history .meta { display: block; }
.void { flex: 0 0 auto; }
.void summary { list-style: none; cursor: pointer; }
.void summary::-webkit-details-marker { display: none; }
.void[open] { flex-basis: 100%; }
.void form { display: grid; gap: 8px; margin-top: 8px; }
.narrow-form { max-width: 560px; }
textarea.short { min-height: 88px; }

/* Cadenas: selector de negocio en la cabecera. */
.switcher { position: relative; margin-top: 4px; }
.switcher summary { cursor: pointer; font-size: 0.875rem; color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.switcher ul { list-style: none; margin: 0; padding: 4px; position: absolute; z-index: 30; min-width: min(280px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.switcher button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; border-radius: var(--radius-s); cursor: pointer; }
.switcher button:hover:not(:disabled), .switcher button:focus-visible { background: var(--line); }
.switcher button:disabled { font-weight: 700; cursor: default; color: var(--ink); }
.switcher .tag { font-size: 0.75rem; color: var(--muted); font-weight: 400; }

/* Código de mostrador para abrir la tarjeta en otro celular: se dicta, así que va grande y espaciado. */
.link-code { font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; margin: 8px 0; }
.choice { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.choice legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.choice .check { align-items: flex-start; }
.team .meta { display: block; overflow-wrap: anywhere; }

/* Actividad: semana o mes del negocio. Una sola serie en un solo azul (validado: contraste y croma). */
:root { --chart: #1F6FB2; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 12px; background: var(--paper); }
.segmented a { min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; }
.segmented a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.period { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.period h2 { margin: 0; font-size: 1rem; text-align: center; flex: 1; }
.period .icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stats-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stats-4 { grid-template-columns: repeat(4, 1fr); } }
.stats small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--muted); }
.stats small.up { color: var(--ok); }
.stats small.down { color: var(--danger); }
.chart .bars { display: block; width: 100%; height: 160px; margin-top: 8px; }
.bars .bar { fill: var(--chart); }
.bars .hit { fill: transparent; }
.bars g:hover .bar { fill: var(--ink); }
.bars .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.bars .base { stroke: var(--muted); stroke-width: 1; }
.axis { display: flex; list-style: none; margin: 4px 0 0; padding: 0; }
.axis li { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: visible; }
.log { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.log th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.log td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log tr.voided td { color: var(--muted); text-decoration: line-through; }

/* =====================================================================================
   Tema JortIT del panel. Lienzo azul marino profundo y tarjetas claras encima: el contraste
   entre figura y fondo hace el trabajo de las sombras (no hay sombras ni brillos). Títulos en
   peso 400 con tracking negativo, etiquetas en mono mayúsculas, radios cortos (3 px botones,
   10 px tarjetas). El azul JortIT (#149DDD) es voz de datos y estado, no relleno de botones.
   Las variables se redefinen por zona: en el lienzo el "papel" es oscuro y la "tinta" clara;
   dentro de una tarjeta se invierten, así botones e inputs se adaptan solos.
   ===================================================================================== */
body.panel {
  --jortit-navy: #0B2545;
  --jortit-blue: #149DDD;
  --canvas: #06162B;
  --paper: var(--canvas);
  --ink: #EEF2F6;
  --muted: #97AAC0;
  --line: #1D3757;
  --wash: #0B2545;
  --focus: #149DDD;
  --ok: #7FD4A0;
  --danger: #FF8A8A;
  --warn: #F2C46B;
  --chart: #1488C8;
  --radius-s: 3px;
  --radius-m: 10px;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  background: var(--canvas);
  color: var(--ink);
}

/* Zona tarjeta: la figura clara sobre el lienzo. */
body.panel .sheet, body.panel .stats > div, body.panel .notice, body.panel .switcher ul,
body.panel .phone, body.panel .confirm-box, body.panel .segmented {
  --paper: #F2F5F8;
  --ink: #0A1626;
  --muted: #4B5D72;
  --line: #D3DCE6;
  --wash: #E4EBF2;
  --ok: #1A7F37;
  --danger: #C4202C;
  --warn: #8A5D00;
  --focus: #0B6FB0;
  background: var(--paper);
  color: var(--ink);
}
body.panel .sheet, body.panel .stats > div { border-color: transparent; }

/* Cabecera y navegación: un escalón arriba del lienzo, con filete fino. */
body.panel .panel-top { background: var(--jortit-navy); border-bottom-color: var(--line); }
body.panel .panel-nav { background: var(--jortit-navy); border-color: var(--line); }
body.panel .panel-nav a { font-weight: 400; letter-spacing: -0.01em; }
body.panel .panel-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 3px 0 var(--jortit-blue); }
@media (min-width: 1024px) {
  body.panel .panel-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--jortit-blue); background: rgb(20 157 221 / 0.10); }
}

/* Tipografía: autoridad por tamaño y tracking, no por negritas. */
body.panel h1, body.panel .panel-main > h1, body.panel .auth > h1, body.panel .page-head h1 {
  font-weight: 400; font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em;
}
body.panel .panel-top .biz { font-weight: 400; letter-spacing: -0.01em; }
body.panel .sheet > h2, body.panel .chart h2, body.panel .stats span, body.panel .log th, body.panel legend {
  font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
body.panel .stats b { font-weight: 400; font-size: 2rem; letter-spacing: -0.03em; line-height: 1.1; }
body.panel .row-list .title { font-weight: 400; letter-spacing: -0.01em; }
body.panel label, body.panel .form-label { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
body.panel .check { color: var(--ink); font-size: 1rem; }

/* Botones: rellenos neutros; en el lienzo, claros con texto oscuro (sale solo de las variables). */
body.panel .btn, body.panel button, body.panel .btn-primary { font-weight: 400; letter-spacing: -0.01em; transition: background-color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1); }
body.panel .primary-action { background: #FAFBFC; color: #06162B; border-color: #FAFBFC; }

/* Sin sombras: el menú de negocios se separa con borde. */
body.panel .switcher ul { box-shadow: none; border: 1px solid var(--line); }

/* Datos: el azul JortIT marca lo que cambia. */
body.panel .stats small.up { color: var(--ok); }
body.panel .segmented a[aria-current="page"] { background: var(--jortit-navy); color: #FFFFFF; }

/* Pagos de la mensualidad */
.pay-next .pay-date { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pay-list li:last-child { border-bottom: 0; }
.pay-list li.rejected .pay-amount { color: var(--muted); text-decoration: line-through; }
.pay-list .hint { margin: 4px 0 0; }
.pay-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pay-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-state { font-size: 0.8125rem; font-weight: 600; }
.pay-state.ok { color: var(--ok); }
.pay-state.warn { color: var(--warn); }
.pay-state.bad { color: var(--danger); }

/* Plataforma > Cuentas */
.accounts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.accounts h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
.accounts .acciones { display: grid; gap: 8px; margin-top: 12px; }
.accounts .acciones details { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 14px; background: var(--wash); }
.accounts .acciones summary { cursor: pointer; font-weight: 700; }
.accounts .acciones form { display: grid; gap: 8px; margin-top: 10px; }

/* Cobro automático con Mercado Pago en Pagos. */
.pay-mp { margin: 14px 0 6px; }
.pay-mp button { width: 100%; }
.pay-mp .hint { margin: 6px 0 0; }
.pay-auto { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s); background: #DAFBE1; color: #0F5323; }

/* Marca de TarjetIT en el encabezado cuando no hay negocio elegido (inicio de sesión y Plataforma). */
.marca-tarjetit { display: inline-flex; align-items: center; min-height: 44px; }
.marca-tarjetit img { height: 40px; width: auto; display: block; }

/* Campo de código en casillas (js/codigo.js). Sin JS queda el .code-input de siempre. */
.otp { position: relative; width: fit-content; max-width: 100%; }
.otp-cells { display: flex; gap: 6px; }
.otp-cell {
  display: flex; align-items: center; justify-content: center;
  width: clamp(36px, 11vw, 48px); aspect-ratio: 5 / 6;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper);
  font: 700 1.375rem/1 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-cell.gap { margin-left: 8px; }
.otp-cell.filled { border-color: var(--muted); }
.otp-cell.active { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.2); }
.otp-cell.active:empty::after { content: ""; height: 50%; border-left: 2px solid var(--ink); animation: otp-blink 1.1s steps(1) infinite; }
.otp > .otp-field {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; opacity: 0; font-size: 16px; letter-spacing: 0; cursor: text;
}
.otp.is-error .otp-cell { border-color: var(--danger); }
.otp.is-error .otp-cells { animation: otp-shake 0.4s ease; }
@keyframes otp-blink { 50% { opacity: 0; } }
@keyframes otp-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@media (forced-colors: active) { .otp-cell.active { outline: 2px solid Highlight; } }