/* =========================================================
   EL PANEL DE TRABAJO DEL DEALER (/panel)
   Mismos colores, radios y sombras que el resto (variables de styles.css):
   el panel tiene que sentirse la misma casa, no otra aplicación pegada.
   ========================================================= */

/* ---------- Quién ve el enlace «Panel» ----------
   El dueño y su equipo (body.con-panel, lo pone app.js). Mismas reglas de peso
   que los demás enlaces por rol en styles.css. */
.panel-only, .mainnav a.panel-only, .sb-nav a.panel-only, .bottomnav a.panel-only { display: none; }
body.con-panel .mainnav a.panel-only { display: inline-flex; }
body.con-panel .sb-nav a.panel-only, body.con-panel .bottomnav a.panel-only { display: flex; }

/* ---------- El esqueleto: menú del panel + contenido ---------- */
.pn { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.5rem; margin-top: 1.4rem; align-items: start; }
.pn-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: .15rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; }
.pn-nav-cab { padding: .45rem .6rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pn-nav-cab b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-nav-cab span { font-size: .75rem; color: var(--muted); }
.pn-nav-a { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .92rem; }
.pn-nav-a svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.pn-nav-a:hover { background: var(--bg); }
.pn-nav-a.on { background: var(--accent-soft); color: var(--accent-dark); }
.pn-nav-a.on svg { color: var(--accent); }
.pn-main { min-width: 0; }

/* ---------- Toretto en el menú del panel ----------
   Borde fino siempre, para que destaque entre los demás. Al estar dentro, una
   luz da vueltas por ese borde: un degradado cónico detrás del botón cuyo
   ángulo se anima (@property hace que el ángulo se pueda animar). Las dos capas
   de padding-box tapan el centro y solo se ve el anillo del borde. */
@property --tor-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.pn-nav-a.pn-nav-agente { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pn-nav-a.pn-nav-agente .ag-cara { flex: none; border-radius: 50%; }
.pn-nav-a.pn-nav-agente.on {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--tor-ang), color-mix(in srgb, var(--accent) 25%, transparent) 0 62%, var(--accent) 80%, #fff 86%, var(--accent) 92%, color-mix(in srgb, var(--accent) 25%, transparent)) border-box;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: tor-luz 2.6s linear infinite;
}
@keyframes tor-luz { to { --tor-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .pn-nav-a.pn-nav-agente.on { animation: none; border-color: var(--accent); background: var(--accent-soft); }
}

/* Pantalla de Toretto sin contratar: quién es y dónde probarlo. */
.pn-tor-sin { max-width: 520px; margin: 2rem auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.pn-tor-sin h1 { font-size: 1.45rem; }
.pn-tor-sin .ag-cara { border-radius: 50%; }

/* En «Mi dealer → Resumen», el enlace que lleva a Toretto en el panel. */
.tor-ir { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius); background: var(--card); color: var(--ink); font-weight: 600; }
.tor-ir span { flex: 1; }
.tor-ir:hover { background: var(--accent-soft); }

/* Con el menú del sitio al lado, el panel gana el ancho que le queda. */
body.lateral .pn { gap: 1.2rem; }

/* En el teléfono el menú del panel es una tira que se desliza, arriba: una
   columna al lado se comería la mitad de la pantalla. */
@media (max-width: 900px) {
  .pn { grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-top: .8rem; }
  .pn-nav { position: static; flex-direction: row; overflow-x: auto; padding: .35rem; gap: .25rem; scrollbar-width: none; }
  .pn-nav::-webkit-scrollbar { display: none; }
  .pn-nav-cab { display: none; }
  .pn-nav-a { flex: none; padding: .45rem .7rem; font-size: .85rem; white-space: nowrap; }
}

/* ---------- Cabecera de cada pantalla ---------- */
.pn-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pn-cab h1 { font-size: 1.55rem; line-height: 1.2; }
.pn-cab p { margin-top: .25rem; }
.pn-cab-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.pn-h2 { font-size: 1.05rem; margin: 1.6rem 0 .7rem; }
.pn-h3 { font-size: .9rem; margin: 1.1rem 0 .5rem; color: var(--muted); font-weight: 700; }
.pn-aviso { display: flex; align-items: center; gap: .5rem; background: var(--soft); color: #3730a3; border-radius: 12px; padding: .6rem .8rem; font-size: .88rem; margin-bottom: .9rem; }
.pn-aviso svg { width: 18px; height: 18px; flex: none; }
.pn-compara { margin: -.35rem 0 1rem; }

/* ---------- Cifras ---------- */
.pn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.pn-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .pn-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pn-kpis, .pn-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } }
.pn-kpi { display: flex; flex-direction: column; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; color: var(--ink); position: relative; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.pn-kpi:hover { border-color: #cbd5e1; box-shadow: var(--shadow); transform: translateY(-1px); }
.pn-kpi-top { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.pn-kpi-top svg { width: 16px; height: 16px; flex: none; }
.pn-kpi-top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-kpi-val { font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-kpi-pista { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.pn-kpi.pn-ok::before, .pn-kpi.pn-warn::before, .pn-kpi.pn-mal::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; }
.pn-kpi.pn-ok::before { background: var(--ok); }
.pn-kpi.pn-warn::before { background: #f59e0b; }
.pn-kpi.pn-mal::before { background: var(--danger); }
.pn-kpi.pn-mal .pn-kpi-val { color: var(--danger); }
@media (max-width: 640px) { .pn-kpi { padding: .75rem .8rem; } .pn-kpi-val { font-size: 1.35rem; } }

.pn-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .08rem .45rem; background: var(--bg); color: var(--muted); }
.pn-delta svg { width: 13px; height: 13px; }
.pn-delta.pn-sube { background: #dcfce7; color: #15803d; }
.pn-delta.pn-baja { background: #fee2e2; color: #b91c1c; }
.pn-delta.pn-nuevo { background: var(--soft); color: #3730a3; }

/* ---------- Cajas ---------- */
.pn-caja { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; min-width: 0; }
.pn-caja + .pn-caja { margin-top: 1rem; }
.pn-caja-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.pn-caja-cab h2 { font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.pn-caja-cab h2 svg { width: 18px; height: 18px; color: var(--accent); }
.pn-caja-pista { color: var(--muted); font-size: .8rem; margin: -.45rem 0 .8rem; }
.pn-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.pn-dos-ancho { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pn-dos > .pn-caja + .pn-caja { margin-top: 0; }
.pn-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pn-col > .pn-caja + .pn-caja { margin-top: 0; }
@media (max-width: 1000px) { .pn-dos, .pn-dos-ancho { grid-template-columns: minmax(0, 1fr); } }

.pn-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; color: var(--muted); padding: 1.4rem .8rem; }
.pn-vacio > svg { width: 30px; height: 30px; color: #cbd5e1; }
.pn-vacio p { max-width: 38ch; font-size: .92rem; }
.pn-main > .pn-vacio { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 3rem 1rem; }

.pn-cargando { display: flex; justify-content: center; gap: .4rem; padding: 4rem 0; }
.pn-cargando span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pnPunto 1s infinite ease-in-out; }
.pn-cargando span:nth-child(2) { animation-delay: .15s; }
.pn-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes pnPunto { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pn-cargando span { animation: none; opacity: .6; } a.pn-kpi:hover { transform: none; } }

/* ---------- Periodo ---------- */
.pn-periodo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pn-chips { display: flex; gap: .3rem; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .2rem; }
.pn-chip { border: 0; background: transparent; border-radius: 999px; padding: .38rem .8rem; font-weight: 600; font-size: .85rem; color: var(--muted); cursor: pointer; font-family: inherit; }
.pn-chip:hover { color: var(--ink); }
.pn-chip.on { background: var(--navy); color: #fff; }
.pn-rango { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pn-rango label { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.pn-rango input { border: 1px solid var(--line); border-radius: 10px; padding: .35rem .5rem; font: inherit; font-size: .88rem; background: var(--card); color: var(--ink); }
@media (max-width: 640px) { .pn-chips { border-radius: 14px; } }

/* ---------- Gráfica de barras ---------- */
.pn-barras { display: flex; align-items: flex-end; gap: 3px; height: 190px; padding-bottom: 1.4rem; }
.pn-barra-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.pn-barra { height: var(--h); background: linear-gradient(180deg, var(--accent), #ff9a5c); border-radius: 5px 5px 2px 2px; min-height: 0; transition: filter .15s; }
.pn-barra.pn-cero { height: 2px; background: var(--line); }
.pn-barra-col:hover .pn-barra { filter: brightness(.9); }
.pn-barra-eti { position: absolute; bottom: -1.3rem; left: 50%; transform: translateX(-50%); font-size: .68rem; color: var(--muted); white-space: nowrap; }

/* ---------- Lista con barra ---------- */
.pn-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pn-lista-fila { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; }
.pn-lista-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-lista-pista { height: 7px; background: var(--bg); border-radius: 999px; margin-top: .3rem; overflow: hidden; }
.pn-lista-pista i { display: block; height: 100%; width: var(--w); background: var(--navy-2); border-radius: 999px; }
.pn-lista-extra { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

/* ---------- Embudo ---------- */
.pn-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pn-embudo li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; align-items: center; gap: .3rem .7rem; }
.pn-emb-nom { font-size: .88rem; font-weight: 600; }
.pn-emb-barra { height: 26px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.pn-emb-barra i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--accent), #ffb27f); border-radius: 8px; }
.pn-embudo li:last-child .pn-emb-barra i { background: linear-gradient(90deg, var(--ok), #4ade80); }
.pn-embudo b { text-align: right; }
.pn-embudo small { grid-column: 2 / 4; font-size: .74rem; margin-top: -.2rem; }
@media (max-width: 520px) { .pn-embudo li { grid-template-columns: 96px minmax(0, 1fr) 40px; } }

/* ---------- Tres cifras pequeñas en fila ---------- */
.pn-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.pn-mini-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pn-mini > div { background: var(--bg); border-radius: 12px; padding: .65rem .75rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pn-mini span { font-size: .75rem; color: var(--muted); }
.pn-mini b { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-mini .pn-delta { align-self: flex-start; }
.pn-mal { color: var(--danger); }
.pn-warn { color: var(--warn); }

/* ---------- Tramos de antigüedad ---------- */
.pn-tramos { display: flex; gap: 4px; margin-top: .9rem; }
.pn-tramo { flex: 1 1 var(--w); min-width: 62px; background: var(--soft); border-radius: 10px; padding: .45rem .55rem; display: flex; flex-direction: column; gap: .1rem; }
.pn-tramo b { font-size: 1rem; color: var(--ink); }
.pn-tramo span { font-size: .68rem; color: var(--muted); line-height: 1.2; }
.pn-tramo.pn-mal { background: #fee2e2; }
.pn-tramo.pn-mal b { color: var(--danger); }

.pn-parados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-parados li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .88rem; align-items: center; }
.pn-parados a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pn-parados a:hover { color: var(--accent); }

/* ---------- Lo que conviene mirar ---------- */
.pn-mirar { background: linear-gradient(135deg, #fff, var(--accent-soft)); border-color: #ffd9c2; }
.pn-mirar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.pn-mirar-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .45rem 0; font-size: .92rem; }
.pn-mirar-lista li + li { border-top: 1px dashed #ffd9c2; }
.pn-mirar-lista li > svg { width: 18px; height: 18px; color: var(--accent); }
.pn-mirar-lista a svg { width: 18px; height: 18px; }

/* ---------- Inicio: agenda y esperando ---------- */
.pn-atajos { display: flex; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.pn-atajo { display: inline-flex; align-items: center; gap: .45rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; font-weight: 600; font-size: .88rem; color: var(--ink); }
.pn-atajo svg { width: 16px; height: 16px; color: var(--accent); }
.pn-atajo:hover { border-color: var(--accent); color: var(--accent-dark); }

.pn-ag-lista, .pn-esp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-ag { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.pn-ag:first-child, .pn-esp:first-child { border-top: 0; }
.pn-ag-hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.pn-ag-hora small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.pn-ag-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.pn-ag-cuerpo b, .pn-ag-cuerpo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ag-tarde .pn-ag-hora { color: var(--danger); }
.pn-ag-tel { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); }
.pn-ag-tel svg { width: 16px; height: 16px; }
.pn-ag-tel:hover { background: var(--accent-soft); color: var(--accent); }
.pn-esp { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.pn-esp > div { display: flex; flex-direction: column; min-width: 0; }
.pn-esp > div b, .pn-esp > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-esp-h { font-size: .78rem; font-weight: 700; }
.pn-esp .btn svg { width: 16px; height: 16px; margin: 0; }

/* ---------- Ventanas del panel ---------- */
.modal:has(.pn-modal) { width: min(560px, 100%); padding: 0; }
.modal:has(.pn-modal.pn-ancha) { width: min(820px, 100%); }
.pn-modal-cab { padding: 1.2rem 3.4rem 0 1.4rem; }
.pn-modal-cab h2 { font-size: 1.15rem; margin: 0; }
.pn-modal-cuerpo { padding: 1rem 1.4rem; }
.pn-modal-cuerpo:empty { display: none; }
.pn-modal-pie { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.4rem 1.2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pn-error { background: #fee2e2; color: #b91c1c; border-radius: 10px; padding: .55rem .75rem; font-size: .88rem; margin-top: .6rem; }
.pn-btn-peligro { background: var(--danger); border-color: var(--danger); color: #fff; }
.pn-btn-peligro:hover { background: #b91c1c; }

/* Una fila de campos en las ventanas: dos columnas en pantalla ancha, una en el
   teléfono. Los campos en sí son los `.field` de siempre. */
.pn-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.pn-campos .pn-entera { grid-column: 1 / -1; }
@media (max-width: 560px) { .pn-campos { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tablas del panel ---------- */
.pn-tabla-caja { overflow-x: auto; margin: 0 -1.2rem; padding: 0 1.2rem; }
.pn-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pn-tabla th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pn-tabla td { padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pn-tabla tr:last-child td { border-bottom: 0; }
.pn-tabla .pn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-tabla tbody tr:hover { background: #fafbfd; }

/* Etiquetas de estado reutilizables. */
.pn-pill { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .12rem .55rem; font-size: .74rem; font-weight: 700; background: var(--bg); color: var(--muted); white-space: nowrap; }
.pn-pill.pn-ok { background: #dcfce7; color: #15803d; }
.pn-pill.pn-warn { background: #fef3c7; color: #b45309; }
.pn-pill.pn-mal { background: #fee2e2; color: #b91c1c; }
.pn-pill.pn-info { background: var(--soft); color: #3730a3; }
.pn-pill.pn-naranja { background: var(--accent-soft); color: var(--accent-dark); }

/* Pestañas dentro de un módulo (Ventas · Cuotas · …). */
.pn-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.pn-tabs::-webkit-scrollbar { display: none; }
.pn-tabs button, .pn-tabs a { border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem; color: var(--muted); padding: .6rem .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.pn-tabs .on { color: var(--ink); border-bottom-color: var(--accent); }
.pn-tabs b { background: var(--bg); color: var(--muted); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; }
.pn-tabs .on b { background: var(--accent-soft); color: var(--accent-dark); }