/* ============================================================================
   Consola de la plataforma — la pantalla del dueño del sistema.

   No es el punto de venta y no debe parecerlo: acá nadie cobra ni atiende mesas.
   Es una lista de clientes que se mira de reojo varias veces al día, así que lo
   que manda es el estado de cada uno y lo que necesita atención.
   ========================================================================== */

body { background: var(--bg); }

/* ---------------------------------------------------------------- entrada */

.pl-centro { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.pl-entrada {
  width: min(100%, 25rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.pl-entrada h1 { font-size: 19px; margin: 4px 0 0; }
.pl-entrada > p { margin: -8px 0 4px; font-size: 13.5px; line-height: 1.5; }
.pl-entrada .btn { margin-top: 4px; }

.pl-marca { display: flex; align-items: center; gap: 8px; }
.pl-marca b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pl-marca span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 2px 6px;
}

.pl-campo { display: flex; flex-direction: column; gap: 5px; }
.pl-campo > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pl-campo .in { height: var(--toque); }
.pl-campo small { line-height: 1.45; }

.pl-error {
  display: flex; align-items: center; gap: 6px;
  margin: 0; color: var(--bad); font-size: 13px; font-weight: 500;
}
.pl-error:empty { display: none; }

/* ---------------------------------------------------------------- caparazón */

.pl-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.pl-tabs { display: flex; gap: 2px; flex: 1; }
.pl-tabs button {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 12px; margin-bottom: -13px;
  color: var(--ink-3); font-size: 14px; font-weight: 500;
}
.pl-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.pl-tabs button:hover { color: var(--ink); }
.pl-yo { display: flex; align-items: center; gap: 8px; }

.pl-cuerpo {
  max-width: 68rem; margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}

.pl-barra { display: flex; align-items: center; gap: 12px; }
.pl-barra h2 { font-size: 17px; }
.pl-espacio { flex: 1; }

.pl-sec { padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pl-sec h3 { font-size: 15px; }
.pl-sec p { margin: 0; line-height: 1.55; }
.pl-sec code { font-family: var(--mono); font-size: 13px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* ---------------------------------------------------------------- clientes */

.pl-clientes { display: flex; flex-direction: column; gap: 10px; }

.pl-cliente {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  border-left: 3px solid var(--ok);
}
.pl-cliente[data-estado="SUSPENDIDO"] { border-left-color: var(--bad); }
.pl-cliente[data-estado="BAJA"] { border-left-color: var(--line-2); opacity: .7; }
.pl-cliente.abierto { box-shadow: var(--shadow-lg); }

.pl-cliente-cab {
  width: 100%; appearance: none; background: none; border: none; text-align: left;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  color: inherit;
}
.pl-cliente-cab:hover { background: var(--surface-2); }
.pl-cliente-t { min-width: 0; }
.pl-cliente-t b { display: block; font-size: 15.5px; font-weight: 600; }
.pl-cliente-t code {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.pl-cliente-n {
  margin-left: auto; display: flex; gap: 16px;
  font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.pl-detalle {
  padding: 4px 16px 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.pl-dato { padding-top: 12px; }
.pl-url { font-family: var(--mono); font-size: 13.5px; color: var(--accent); word-break: break-all; }

.pl-motivo {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--bad-bg); color: var(--bad); font-size: 13px; font-weight: 500;
}

.pl-ficha {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0;
  font-size: 13.5px;
}
.pl-ficha dt { color: var(--ink-3); }
.pl-ficha dd { margin: 0; font-variant-numeric: tabular-nums; }

.pl-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pl-forma { display: flex; flex-direction: column; gap: 12px; }
.pl-forma p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pl-vista-url {
  font-family: var(--mono); font-size: 13px; color: var(--accent);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px; word-break: break-all; margin-top: -4px;
}

.pl-ops { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pl-op {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.pl-op code { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.pl-op .muted { margin-left: auto; }

@media (max-width: 720px) {
  .pl-top { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .pl-cuerpo { padding: 16px 14px 40px; }
  .pl-cliente-n { display: none; }
  .pl-ficha { grid-template-columns: 1fr; gap: 2px; }
  .pl-ficha dt { margin-top: 8px; font-size: 12px; }
}

/* Los tres topes se editan juntos: se miran como un conjunto, no de a uno. */
.pl-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-rejilla .in { text-align: right; font-variant-numeric: tabular-nums; }
.pl-sub {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}
.pl-cliente-plan {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 2px 8px;
}
.btn.ghost.danger { color: var(--bad); }

@media (max-width: 560px) { .pl-rejilla { grid-template-columns: 1fr; } }