/* Panel Central · solo admin
 *
 * Tarjetas de color por cliente y mosaicos blancos con el ícono en un
 * círculo lavanda (dirección aprobada por Alejandro el 4-oct). Vive
 * dentro del armazón del panel: usa sus tokens de fondo y texto y
 * agrega los suyos con prefijo --pc-.
 */

:root {
  --pc-fondo: #f3f3f8;
  --pc-tarjeta: #ffffff;
  --pc-tarjeta-2: #f7f7fc;
  --pc-linea: #e3e3ee;
  --pc-acento: #7d78f0;
  --pc-acento-2: #a7a3ff;
  --pc-sombra: 0 6px 18px rgba(60, 58, 120, .10);
  --pc-t1a: #8a85f7; --pc-t1b: #aaa6ff;
  --pc-t2a: #f7b733; --pc-t2b: #ffd27a;
  --pc-t3a: #3d9df5; --pc-t3b: #7cc0ff;
  --pc-t4a: #dc78ee; --pc-t4b: #f2adfb;
  --pc-bien: #138a5a;
  --pc-mal: #c8372d;
  --pc-aviso: #a86400;
  --pc-equipo: #11847a;
  --pc-entra: #ffffff;
  --pc-sale: #ebeaff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pc-fondo: #17172a;
    --pc-tarjeta: #22223a;
    --pc-tarjeta-2: #1c1c31;
    --pc-linea: #34344f;
    --pc-acento: #9a96ff;
    --pc-acento-2: #b7b4ff;
    --pc-sombra: 0 6px 18px rgba(0, 0, 0, .35);
    --pc-bien: #4ecb84;
    --pc-mal: #ff7b70;
    --pc-aviso: #e0a13c;
    --pc-equipo: #45c9b8;
    --pc-entra: #2a2a45;
    --pc-sale: #36345f;
  }
}

:root { --pc-riel: #24233b; --pc-riel-texto: #c9c8e6; }
@media (prefers-color-scheme: dark) { :root { --pc-riel: #0f0f1e; --pc-riel-texto: #b9b8dc; } }

/* El Panel Central reemplaza el armazón del panel por el suyo. */
body.vista-ancha .barra,
body.vista-ancha .navegacion { display: none !important; }
body.vista-ancha #app { display: block; }
body.vista-ancha .contenido { max-width: none; margin: 0; padding: 0; }
body.vista-ancha { background: var(--pc-fondo); }

.pc-app { display: flex; min-height: 100dvh; background: var(--pc-fondo); }

.pc-riel {
  width: 72px;
  flex-shrink: 0;
  background: var(--pc-riel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: 22px;
  position: sticky;
  top: 0;
  height: 100dvh;
}
.pc-riel__logo {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--pc-acento);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 10px;
}
.pc-riel__boton {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--pc-riel-texto);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.pc-riel__boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-riel__boton:hover, .pc-riel__boton[aria-current="page"] { background: rgba(255, 255, 255, .09); color: #fff; }
.pc-riel__linea { width: 28px; height: 1px; background: rgba(255, 255, 255, .14); margin: 4px 0; }
.pc-riel__espacio { flex: 1; }

.pc-cabeza__lado { display: flex; align-items: center; gap: 18px; }
.pc-quien { display: flex; align-items: center; gap: 10px; text-align: right; }
.pc-quien small { display: block; color: var(--texto-suave); font-size: .85rem; }
.pc-quien strong { display: block; }

@media (max-width: 640px) {
  .pc-app { flex-direction: column; }
  .pc-riel { width: 100%; height: auto; flex-direction: row; padding: 8px 12px; overflow-x: auto; z-index: 5; }
  .pc-riel__logo { margin: 0 6px 0 0; }
  .pc-riel__linea { width: 1px; height: 28px; margin: 0 4px; }
  .pc-quien span:first-child { display: none; }
}

.pc {
  flex: 1;
  min-width: 0;
  background: var(--pc-fondo);
  padding: 24px clamp(16px, 3vw, 40px) 48px;
}

.pc-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.pc-cabeza h1 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.pc-sub { margin: 4px 0 0; color: var(--texto-suave); }

.pc-titulo { font-size: 1rem; font-weight: 700; color: var(--texto-suave); margin: 32px 0 14px; letter-spacing: .02em; }
.pc-titulo-fila { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pc-pie { margin-top: 32px; color: var(--texto-suave); font-size: .9rem; }

.pc-boton {
  border: 1px solid var(--pc-linea);
  background: var(--pc-tarjeta);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.pc-boton:hover { border-color: var(--pc-acento); color: var(--pc-acento); }

/* ── Tarjetas de cliente ─────────────────────────────────── */
.pc-clientes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.pc-clientes > * { flex: 1 1 calc((100% - (var(--por-fila, 4) - 1) * 20px) / var(--por-fila, 4)); min-width: 0; }
.pc-cliente, .pc-barra {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: var(--pc-sombra);
}
.pc-cliente {
  min-height: 170px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  transition: transform .15s;
}
.pc-cliente:hover { transform: translateY(-3px); }
.pc-cliente::before, .pc-barra::before {
  content: "";
  position: absolute;
  right: -60px; top: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.pc-cliente::after {
  content: "";
  position: absolute;
  left: -40px; bottom: -110px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.pc-cliente > *, .pc-barra > * { position: relative; z-index: 1; }
.t1 { background: linear-gradient(135deg, var(--pc-t1a), var(--pc-t1b)); }
.t2 { background: linear-gradient(135deg, var(--pc-t2a), var(--pc-t2b)); }
.t3 { background: linear-gradient(135deg, var(--pc-t3a), var(--pc-t3b)); }
.t4 { background: linear-gradient(135deg, var(--pc-t4a), var(--pc-t4b)); }

.pc-cliente__logo {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  align-self: center;
  flex-shrink: 0;
}
.t1 .pc-cliente__logo { color: var(--pc-t1a); }
.t2 .pc-cliente__logo { color: #c98a0b; }
.t3 .pc-cliente__logo { color: var(--pc-t3a); }
.t4 .pc-cliente__logo { color: #b94fcc; }

.pc-cliente__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 16px; }
.pc-cliente__nombre { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.pc-cliente__estado { display: flex; align-items: baseline; gap: 6px; font-size: .9rem; opacity: .95; margin-top: 3px; }
.pc-cliente__estado > span { min-width: 0; }
.pc-cliente__estado .pc-punto { align-self: center; }
.pc-cliente__pie > span:first-child { min-width: 0; }
.pc-campana { flex-shrink: 0; }

.pc-punto { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); flex-shrink: 0; }
.pc-vivo { background: #7dffb8; }
.pc-pruebas { background: #fff27a; }
.pc-apagado { background: #ffb3b3; }

.pc-campana { position: relative; display: flex; align-items: center; gap: 5px; font-weight: 700; }
.pc-campana svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-campana i { position: absolute; right: -2px; top: -1px; width: 8px; height: 8px; border-radius: 50%; background: #ff6b4a; }

/* ── Mosaicos ────────────────────────────────────────────── */
.pc-mosaicos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.pc-mosaicos > * { flex: 1 1 calc((100% - (var(--por-fila, 6) - 1) * 18px) / var(--por-fila, 6)); min-width: 0; }
.pc-mosaico {
  background: var(--pc-tarjeta);
  color: var(--texto);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--pc-sombra);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pc-accionable { cursor: pointer; transition: transform .15s; }
.pc-accionable:hover { transform: translateY(-3px); }
.pc-circulo {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--pc-acento-2), var(--pc-acento));
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.pc-circulo::after {
  content: "";
  position: absolute;
  right: -18px; bottom: -22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.pc-circulo svg { width: 26px; height: 26px; position: relative; z-index: 1; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-etiqueta { font-weight: 700; }
.pc-valor { font-size: 1.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-nota { font-size: .9rem; color: var(--texto-suave); }

.pc-compactos .pc-mosaico { padding: 16px 12px 14px; gap: 8px; }
.pc-compactos .pc-circulo { width: 46px; height: 46px; }
.pc-compactos .pc-circulo svg { width: 20px; height: 20px; }

.pc-pastilla {
  font-size: .8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: none;
}
.pc-bien { color: var(--pc-bien); background: color-mix(in srgb, var(--pc-bien) 14%, transparent); }
.pc-mal { color: var(--pc-mal); background: color-mix(in srgb, var(--pc-mal) 14%, transparent); }
.pc-aviso { color: var(--pc-aviso); background: color-mix(in srgb, var(--pc-aviso) 16%, transparent); }
.pc-equipo { color: var(--pc-equipo); background: color-mix(in srgb, var(--pc-equipo) 15%, transparent); }
.pc-acento { color: var(--pc-acento); background: color-mix(in srgb, var(--pc-acento) 15%, transparent); }

/* ── Vista de cliente ────────────────────────────────────── */
.pc-barra {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pc-barra .pc-cliente__logo { width: 54px; height: 54px; font-size: 1.05rem; }
.pc-barra__quien { flex: 1; min-width: 200px; }
.pc-barra__quien strong { display: block; font-size: 1.3rem; }
.pc-volver {
  border: 0;
  background: rgba(255, 255, 255, .24);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}
.pc-volver:hover { background: rgba(255, 255, 255, .34); }
.pc-selector {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, .94);
  color: #26263f;
  cursor: pointer;
  min-height: 44px;
}

.pc-chat {
  background: var(--pc-tarjeta);
  border-radius: 10px;
  box-shadow: var(--pc-sombra);
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: 600px;
  overflow: hidden;
}
.pc-leads { border-right: 1px solid var(--pc-linea); display: flex; flex-direction: column; min-width: 0; }
.pc-leads__arriba { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--pc-linea); }
.pc-buscar {
  width: 100%;
  border: 1px solid var(--pc-linea);
  background: var(--pc-tarjeta-2);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 16px;
}
.pc-fichas { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-ficha {
  border: 1px solid var(--pc-linea);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
}
.pc-ficha[aria-pressed="true"] { background: var(--pc-acento); border-color: var(--pc-acento); color: #fff; }

.pc-lista { overflow-y: auto; flex: 1; max-height: 640px; }
.pc-lead {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--pc-linea);
  background: transparent;
  text-align: left;
  cursor: pointer;
  align-items: flex-start;
}
.pc-lead:hover { background: var(--pc-tarjeta-2); }
.pc-lead[aria-current="true"] { background: color-mix(in srgb, var(--pc-acento) 13%, transparent); }
.pc-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--pc-acento);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.pc-lead__medio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-lead__fila { display: flex; justify-content: space-between; gap: 8px; }
.pc-lead__nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-lead__nombre small, .pc-lead__hora { color: var(--texto-suave); font-weight: 400; font-size: .8rem; font-variant-numeric: tabular-nums; }
.pc-lead__hora { flex-shrink: 0; }
.pc-lead__ultimo { font-size: .9rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-lead__etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }

.pc-hilo { display: flex; flex-direction: column; min-width: 0; }
.pc-hilo__cabeza { padding: 14px 18px; border-bottom: 1px solid var(--pc-linea); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pc-hilo__quien { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pc-hilo__quien strong { font-size: 1.05rem; }
.pc-hilo__quien small { color: var(--texto-suave); font-size: .85rem; font-variant-numeric: tabular-nums; }

.pc-ficha-lead {
  margin: 0;
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--pc-tarjeta-2);
  border-bottom: 1px solid var(--pc-linea);
  font-size: .9rem;
}
.pc-ficha-lead dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); font-weight: 700; }
.pc-ficha-lead dd { margin: 0; }

.pc-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  background: var(--pc-tarjeta-2);
}
.pc-dia { align-self: center; font-size: .8rem; color: var(--texto-suave); background: var(--pc-tarjeta); padding: 3px 12px; border-radius: 999px; }
.pc-evento { align-self: center; font-size: .85rem; color: var(--texto-suave); border: 1px dashed var(--pc-linea); background: var(--pc-tarjeta); padding: 5px 12px; border-radius: 8px; text-align: center; max-width: 90%; }
.pc-burbuja {
  max-width: min(78%, 560px);
  padding: 9px 13px;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.pc-burbuja b { display: block; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pc-acento); margin-bottom: 3px; }
.pc-burbuja small { display: block; font-size: .72rem; color: var(--texto-suave); margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.pc-entra { align-self: flex-start; background: var(--pc-entra); border-top-left-radius: 4px; }
.pc-sale { align-self: flex-end; background: var(--pc-sale); border-top-right-radius: 4px; }
.pc-vacio { margin: auto; padding: 40px 24px; color: var(--texto-suave); text-align: center; }

/* ── Errores ─────────────────────────────────────────────── */
.pc-panel > .pc-fichas { margin-bottom: 12px; }
.pc-aviso-linea { margin: 8px 0; padding: 10px 14px; border-radius: 8px; color: var(--pc-aviso); background: color-mix(in srgb, var(--pc-aviso) 12%, transparent); }
.pc-errores { list-style: none; margin: 0; padding: 0; }
.pc-error { padding: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.pc-error + .pc-error { border-top: 1px solid var(--pc-linea); }
.pc-error__cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-error__hora { margin-left: auto; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.pc-error__mensaje { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88rem; background: var(--pc-tarjeta-2); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.pc-error__pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.pc-error__resuelto { color: var(--pc-bien); }
.pc-error--resuelto .pc-error__mensaje { opacity: .7; }
.pc-boton--chico { padding: 4px 10px; font-size: .82rem; }
.pc-boton--chico:disabled { opacity: .5; cursor: progress; }
.pc-titulo-fila__accion { margin-left: auto; align-self: center; }
.pc-resueltos { margin-top: 16px; }
.pc-resueltos > summary { cursor: pointer; list-style-position: inside; }

/* ── Consumo de toda la casa ─────────────────────────────── */
.pc-panel { background: var(--pc-tarjeta); border-radius: 10px; box-shadow: var(--pc-sombra); padding: 18px 20px; }
.pc-barra-h { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; }
.pc-barra-h + .pc-barra-h { border-top: 1px solid var(--pc-linea); }
.pc-barra-h__nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-barra-h__pista { height: 12px; border-radius: 999px; background: var(--pc-tarjeta-2); overflow: hidden; }
.pc-barra-h__relleno { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pc-acento), var(--pc-acento-2)); }
.pc-barra-h__valor { font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.pc-columnas { display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 1px solid var(--pc-linea); }
.pc-columnas__dia { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.pc-columnas__barra { display: block; width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--pc-acento-2), var(--pc-acento)); }
.pc-columnas__eje { display: flex; justify-content: space-between; color: var(--texto-suave); font-size: .85rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pc-barra-h { grid-template-columns: minmax(0, 1fr) auto; } .pc-barra-h__pista { grid-column: 1 / -1; grid-row: 2; } }

@media (max-width: 860px) {
  .pc-chat { grid-template-columns: 1fr; }
  .pc-leads { border-right: 0; border-bottom: 1px solid var(--pc-linea); }
  .pc-lista { max-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-cliente, .pc-accionable { transition: none; }
}

.pc-cabeza + .pc-mosaicos { margin-top: 28px; }

/* ── Las secciones del cliente con el tema del Panel Central ──
 * Solo el admin en la raíz (body.tema-central). Las pantallas de
 * siempre usan los tokens del panel; aquí se les cambia el valor para
 * que tomen el fondo, las tarjetas y el acento lavanda del diseño. */
body.tema-central, .acceso {
  --fondo: var(--pc-tarjeta);
  --superficie: var(--pc-tarjeta-2);
  --borde: var(--pc-linea);
  --borde-fuerte: var(--pc-linea);
  --acento: var(--pc-acento);
  --acento-oscuro: var(--pc-acento-2);
  --acento-texto: #ffffff;
  background: var(--pc-fondo);
}
html:has(body.tema-central) { background: var(--pc-fondo); }
.pc-seccion .pc-cabeza { margin-bottom: 24px; }
.pc-lienzo { max-width: none; }
.pc-espera { display: grid; place-items: center; min-height: 60vh; }
.pc-espera .cargando, .pc-espera .mensaje { text-align: center; }
body.tema-central .pc-lienzo .tarjeta,
body.tema-central .pc-lienzo .estado,
body.tema-central .pc-lienzo .interruptor-agente,
body.tema-central .pc-lienzo .metrica,
body.tema-central .pc-lienzo .propuesta,
body.tema-central .pc-lienzo .ficha {
  border-color: transparent;
  border-radius: 10px;
  box-shadow: var(--pc-sombra);
}
.pc-selector--claro {
  background: var(--pc-tarjeta);
  color: var(--texto);
  border: 1px solid var(--pc-linea);
  max-width: 260px;
}

/* ── Dar de baja ──────────────────────────────────────────── */
.pc-cliente-caja { position: relative; display: flex; }
.pc-cliente-caja > .pc-cliente { flex: 1; min-width: 0; }
.pc-cliente__menu {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .22); color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.pc-cliente__menu:hover, .pc-cliente__menu:focus-visible { background: rgba(255, 255, 255, .38); }
.pc-dialogo {
  border: 0; border-radius: 12px; padding: 24px; width: min(480px, calc(100vw - 32px));
  background: var(--pc-tarjeta); color: var(--texto); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.pc-dialogo::backdrop { background: rgba(10, 10, 25, .55); }
.pc-dialogo h2 { margin: 0 0 10px; font-size: 1.2rem; }
.pc-dialogo p { margin: 0 0 12px; color: var(--texto-suave); }
.pc-dialogo__etiqueta { display: block; font-weight: 700; margin-bottom: 4px; }
.pc-dialogo__nombre { font-weight: 700; color: var(--texto) !important; }
.pc-dialogo__aviso { color: var(--pc-mal) !important; min-height: 1.2em; margin-top: 8px !important; }
.pc-dialogo__acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.pc-boton--peligro { background: var(--pc-mal); border-color: var(--pc-mal); color: #fff; }
.pc-boton--peligro:hover { color: #fff; filter: brightness(1.08); }
.pc-boton--peligro:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.pc-bajas { display: flex; flex-direction: column; gap: 0; }
.pc-baja { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pc-baja + .pc-baja { border-top: 1px solid var(--pc-linea); }
.pc-baja strong { flex: 1; min-width: 0; }

.pc-de-equipo { background: color-mix(in srgb, var(--pc-equipo) 16%, var(--pc-tarjeta)); }
.pc-de-equipo b { color: var(--pc-equipo); }

/* ── Panel de un cliente con el diseño central (6-oct, YarYur) ──
 * modulos.diseno = "central". El riel lleva el nombre de cada sección
 * debajo del ícono: el dueño no tiene por qué adivinar los íconos. */
.pc-riel--cliente { width: 88px; gap: 6px; }
.pc-riel__boton--rotulado {
  width: 76px; height: auto; min-height: 58px; padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative;
}
.pc-riel__rotulo { font-size: .72rem; font-weight: 600; line-height: 1.1; text-align: center; }
.pc-riel__globo {
  position: absolute; top: 4px; right: 10px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--pc-mal); color: #fff; font-size: .72rem; font-weight: 700;
  display: grid; place-items: center;
}
.pc-riel__globo[hidden] { display: none; }
@media (max-width: 640px) {
  .pc-riel--cliente { width: 100%; }
  .pc-riel--cliente .pc-riel__logo { flex-shrink: 0; width: 38px; height: 38px; }
  .pc-riel__boton--rotulado { width: 68px; min-height: 52px; }
}

.pc-cliente__esperando { display: block; margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--pc-mal); }

/* Aviso de preguntas pendientes en Inicio */
.aviso-preguntas {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-left: 4px solid var(--pc-acento) !important;
}
.aviso-preguntas p { margin: 4px 0 0; color: var(--texto-suave); }
.aviso-preguntas .boton-principal { width: auto; }
/* Clientes esperando a un asesor (Inicio, 9-oct) */
.aviso-esperando { border-left-color: var(--pc-mal, #c0392b) !important; }
.aviso-esperando > div:first-child { flex: 1 1 260px; }
.esperando__lista { flex: 1 1 100%; }
.esperando__lista[hidden] { display: none; }
.esperando__filas { list-style: none; margin: 8px 0 0; padding: 0; }
.esperando__fila { padding: 10px 0; border-top: 1px solid var(--linea, rgba(0,0,0,.08)); }
.esperando__cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.esperando__tel { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.esperando__horas { margin-left: auto; font-size: .85rem; color: var(--texto-suave); }
.esperando__horas--mal { color: var(--pc-mal, #c0392b); font-weight: 600; }
.esperando__texto { margin: 4px 0 0; color: var(--texto-suave); overflow-wrap: anywhere; }
.preguntas__intro { color: var(--texto-suave); margin: 0 0 18px; max-width: 70ch; }

/* ── Catálogo ─────────────────────────────────────────────── */
.cat-barra { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.cat-barra__fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cat-barra__fila .seccion-titulo { margin: 0; flex: 1 1 200px; }
.cat-barra__fila .boton-principal { width: auto; }
.cat-buscar {
  flex: 1 1 260px; min-height: 48px; padding: 10px 14px; font-size: 16px;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--pc-linea); border-radius: 10px;
}
.cat-contador { color: var(--texto-suave); font-weight: 600; }
.cat-filtros button { min-height: 40px; padding: 6px 14px; font-size: 15px; }

.cat-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.cat-tarjeta {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--fondo); color: var(--texto); border: 0; border-radius: 12px; box-shadow: var(--pc-sombra);
  transition: transform .15s ease, box-shadow .15s ease; font: inherit;
}
.cat-tarjeta:hover, .cat-tarjeta:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(60, 58, 120, .18); }
.cat-tarjeta[data-baja="true"] { opacity: .55; }
.cat-portada { position: relative; aspect-ratio: 4 / 3; background: var(--superficie); display: grid; place-items: center; }
.cat-portada img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
.cat-portada__vacia { color: var(--texto-suave); font-size: .9rem; }
.cat-fotos {
  position: absolute; bottom: 8px; right: 8px; padding: 3px 9px; border-radius: 999px;
  background: rgba(20, 20, 40, .72); color: #fff; font-size: .78rem; font-weight: 600;
}
.cat-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.cat-nombre { font-size: 1.02rem; line-height: 1.25; }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-chip { padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--superficie); }
.cat-chip--produccion { background: color-mix(in srgb, var(--pc-t1a) 22%, transparent); color: var(--pc-acento); }
.cat-chip--impresion { background: color-mix(in srgb, var(--pc-t3a) 22%, transparent); color: var(--pc-t3a); }
.cat-chip--a_medida { background: color-mix(in srgb, var(--pc-t4a) 22%, transparent); color: var(--pc-t4a); }
.cat-chip--sin { background: color-mix(in srgb, var(--pc-aviso) 18%, transparent); color: var(--pc-aviso); }
.cat-chip--baja { background: var(--superficie); color: var(--texto-suave); }
.cat-precio { font-weight: 700; }
.cat-precio--sin { color: var(--texto-suave); font-weight: 600; }
.cat-minimo { color: var(--texto-suave); font-size: .88rem; }
.cat-falta { color: var(--pc-mal); font-size: .85rem; font-weight: 600; }
.cat-completa { color: var(--pc-bien); font-size: .85rem; font-weight: 600; }
.cat-vacio { color: var(--texto-suave); grid-column: 1 / -1; margin: 8px 0; }

/* Ficha de la categoría */
.cat-panel .panel__caja { max-width: 720px; }
.cat-subtitulo { margin: 22px 0 10px; font-size: 1rem; }
.cat-fotos-bloque { margin-top: 8px; }
.cat-fotos-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-fotos-cabeza .boton-principal { width: auto; }
.cat-galeria__estado { color: var(--texto-suave); min-height: 1.2em; margin: 6px 0; }
.cat-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-foto { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-foto[data-oculta="true"] img { opacity: .45; }
.cat-foto__enlace { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--superficie); }
.cat-foto__enlace img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.cat-foto figcaption { font-size: .85rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-foto__acciones { display: flex; gap: 4px; flex-wrap: wrap; }
.cat-mini {
  min-height: 34px; padding: 4px 8px; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--pc-linea); border-radius: 8px;
}
.cat-mini[aria-pressed="true"] { background: var(--pc-acento); color: #fff; border-color: var(--pc-acento); }
.cat-mini--peligro { color: var(--pc-mal); }
@media (max-width: 640px) {
  .cat-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-cuerpo { padding: 10px; }
  .cat-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cat-tarjeta { transition: none; } }

/* ── Uso del panel (6-oct) ────────────────────────────────── */
.pc-uso { margin-top: 18px; }
.pc-uso__cabeza { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pc-uso__cliente { font-size: 1.05rem; }
.pc-uso__tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-uso table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 760px; }
.pc-uso th { text-align: left; color: var(--texto-suave); font-weight: 600; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--pc-linea); }
.pc-uso td { padding: 10px; border-bottom: 1px solid var(--pc-linea); vertical-align: top; }
.pc-uso tr:last-child td { border-bottom: 0; }
.pc-uso td small { display: block; color: var(--texto-suave); }
.pc-uso tr[data-estado="rojo"] td:first-child strong, .pc-uso tr[data-estado="nunca"] td:first-child strong { color: var(--pc-mal); }

/* ── Menú ⋯ de la tarjeta + Usuarios y PIN (10-oct) ───────── */
.pc-menu {
  position: absolute; top: 52px; right: 10px; z-index: 5;
  min-width: 200px; padding: 6px; border-radius: 10px;
  background: var(--pc-tarjeta); color: var(--texto); box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.pc-menu__opcion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; color: inherit; text-align: left;
  padding: 10px 12px; min-height: 44px; border-radius: 8px; font-weight: 600; cursor: pointer;
}
.pc-menu__opcion svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-menu__opcion:hover, .pc-menu__opcion:focus-visible { background: var(--pc-tarjeta-2); }
.pc-menu__opcion--peligro { color: var(--pc-mal); }

.pc-boton--primario { background: var(--pc-acento); border-color: var(--pc-acento); color: #fff; }
.pc-boton--primario:hover { color: #fff; filter: brightness(1.08); }
.pc-boton--primario:disabled { opacity: .5; cursor: progress; filter: none; }
.pc-boton--suave-peligro:hover { border-color: var(--pc-mal); color: var(--pc-mal); }

.pc-campo { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; border: 0; padding: 0; }
.pc-campo select.pc-buscar { appearance: auto; }
.pc-campo .pc-nota { font-size: .82rem; }
.pc-campo--pin { gap: 6px; }
.pc-opcion { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.pc-opcion input { width: 18px; height: 18px; accent-color: var(--pc-acento); }
.pc-pin { max-width: 200px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.pc-pin-listo__numero {
  font-size: 2.4rem; font-weight: 800; letter-spacing: .25em; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--texto) !important;
  background: var(--pc-tarjeta-2); border-radius: 10px; padding: 14px 0 14px .25em; margin: 6px 0 14px !important;
}

.pc-usuarios table { min-width: 620px; }
.pc-usuarios__agregar { margin-left: auto; }
.pc-usuarios__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-usuarios td small { margin-top: 4px; }
.pc-usuarios tr[data-activo="false"] td { color: var(--texto-suave); }
.pc-usuarios-filtros { margin-top: 18px; }

/* En el teléfono cada persona es una ficha: con la tabla, los botones
   quedaban fuera de la pantalla y había que deslizar para verlos. */
@media (max-width: 640px) {
  .pc-usuarios table { min-width: 0; }
  .pc-usuarios thead { display: none; }
  .pc-usuarios table, .pc-usuarios tbody { display: block; }
  .pc-usuarios tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--pc-linea);
  }
  .pc-usuarios tr:last-child { border-bottom: 0; }
  .pc-usuarios td { padding: 0; border: 0; }
  .pc-usuarios td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--texto-suave); font-size: .85rem; }
  .pc-usuarios td:nth-child(2)::before { content: 'Último ingreso: '; }
  .pc-usuarios td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .pc-usuarios td:nth-child(4) { grid-column: 1 / -1; margin-top: 8px; }
}

/* ── Acceso 2.0 (10-oct) ─────────────────────────────────────
 * La misma casa que el Panel Central: fondo lavanda, tarjeta blanca
 * con sombra, logo cuadrado con la inicial del negocio y cada persona
 * con su círculo de iniciales. Los botones siguen siendo grandes: se
 * entra de pie, en el mostrador, con una mano. */
.acceso {
  position: relative; overflow: hidden;
  background:
    radial-gradient(520px 520px at 12% 8%, color-mix(in srgb, var(--pc-acento) 22%, transparent), transparent 70%),
    radial-gradient(460px 460px at 92% 96%, color-mix(in srgb, var(--pc-t4a) 18%, transparent), transparent 70%),
    var(--pc-fondo);
}
.acceso__caja {
  max-width: 420px; padding: 32px 28px 28px;
  background: var(--pc-tarjeta); border-radius: 18px; box-shadow: 0 18px 50px rgba(60, 58, 120, .16);
}
.acceso__cabeza { text-align: center; margin-bottom: 26px; }
.acceso__logo {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--pc-acento), var(--pc-acento-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pc-acento) 35%, transparent);
}
.acceso .acceso__marca {
  margin: 0; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--texto); line-height: 1.25;
}
.acceso__sub { margin: 4px 0 0; color: var(--texto-suave); font-size: .95rem; }
.acceso .acceso__pregunta { font-size: 1.05rem; margin-bottom: 14px; }

.acceso .personas { gap: 10px; }
.acceso .personas button {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px 16px 10px 10px;
  background: var(--pc-tarjeta-2); border: 1px solid var(--pc-linea); border-radius: 14px;
  font-size: 1.05rem; transition: border-color .15s, transform .15s;
}
.acceso .personas button:hover, .acceso .personas button:focus-visible { border-color: var(--pc-acento); }
.acceso .personas button:active { transform: scale(.99); border-color: var(--pc-acento); }
.acceso__persona { flex: 1; min-width: 0; }
.acceso .personas small { font-size: .85rem; }
.acceso__flecha { font-size: 1.6rem; line-height: 1; color: var(--texto-suave); }
.acceso__avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff;
  background: radial-gradient(circle at 30% 25%, var(--pc-acento-2), var(--pc-acento));
}
.acceso__avatar--grande { width: 64px; height: 64px; margin: 0 auto 12px; font-size: 1.2rem; }

.acceso .volver { margin: -8px 0 4px; min-height: 40px; font-weight: 600; }
.acceso .volver:hover { color: var(--pc-acento); }
.acceso .pin { gap: 14px; margin-bottom: 26px; }
.acceso .pin span { width: 14px; height: 14px; border: 2px solid var(--pc-linea); transition: background .12s, transform .12s; }
.acceso .pin span[data-lleno] { background: var(--pc-acento); border-color: var(--pc-acento); transform: scale(1.1); }
.acceso .teclado { gap: 12px 18px; max-width: 300px; margin: 0 auto; }
.acceso .teclado button {
  height: 64px; border-radius: 50%; aspect-ratio: 1; width: 64px; justify-self: center;
  background: var(--pc-tarjeta-2); border: 1px solid var(--pc-linea); font-size: 1.5rem; font-weight: 700;
  transition: background .12s, color .12s, border-color .12s;
}
.acceso .teclado button:hover { border-color: var(--pc-acento); color: var(--pc-acento); }
.acceso .teclado button:active { background: var(--pc-acento); border-color: var(--pc-acento); color: #fff; }
.acceso .aviso {
  border: 0; border-radius: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--pc-mal) 12%, transparent); color: var(--pc-mal);
}
@media (max-width: 480px) {
  .acceso { padding: 16px; align-items: start; padding-top: max(28px, 6vh); }
  .acceso__caja { padding: 26px 18px 22px; border-radius: 16px; }
  .acceso .teclado button { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .acceso .personas button, .acceso .pin span, .acceso .teclado button { transition: none; }
}

/* ── Secciones 2.0 (10-oct) ──────────────────────────────────
 * Las pantallas de siempre (Inicio, Datos, Mi negocio, Entrenar…)
 * dentro del marco del Panel Central: mismas tarjetas, títulos,
 * campos, botones en píldora y pestañas como fichas. Solo cambia el
 * aspecto; el HTML y el comportamiento son los mismos. Todo va bajo
 * `body.tema-central .pc-lienzo`, así que `modulos.diseno = "clasico"`
 * sigue viéndose como antes. */

/* Fuera del 2.0, el ícono de las métricas y las barras no se dibujan. */
.metrica__icono, .consumo__pista { display: none; }

body.tema-central .pc-lienzo .grupo,
body.tema-central .pc-lienzo .tarjeta,
body.tema-central .pc-lienzo .estado,
body.tema-central .pc-lienzo .interruptor-agente,
body.tema-central .pc-lienzo .confirmar {
  background: var(--pc-tarjeta);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--pc-sombra);
  padding: 22px 24px;
}
body.tema-central .pc-lienzo .estado,
body.tema-central .pc-lienzo .interruptor-agente { border-left: 5px solid var(--pc-bien); }
body.tema-central .pc-lienzo .estado[data-tono="aviso"],
body.tema-central .pc-lienzo .interruptor-agente[data-encendido="false"] { border-left-color: var(--pc-aviso); }
body.tema-central .pc-lienzo .estado[data-tono="mal"] { border-left-color: var(--pc-mal); }
body.tema-central .pc-lienzo .confirmar--peligro { box-shadow: inset 0 0 0 1px var(--pc-mal), var(--pc-sombra); }

/* Títulos: los rótulos en mayúsculas sueltas pasan a ser títulos
   normales, como "Clientes" u "Hoy en todos los agentes". */
body.tema-central .pc-lienzo .grupo h2,
body.tema-central .pc-lienzo .seccion-titulo h2,
body.tema-central .pc-lienzo .consumo__titulo {
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--texto);
}
body.tema-central .pc-lienzo .seccion-titulo { border-top: 0; padding-top: 0; margin: 30px 0 14px; }
body.tema-central .pc-lienzo .seccion-titulo span { font-size: .88rem; }
body.tema-central .pc-lienzo .estado h2,
body.tema-central .pc-lienzo .interruptor-agente h2 { font-size: 1.1rem; }

/* La cabecera ya dice de quién es el panel, por dónde atiende y desde
   cuándo: la ficha de Inicio lo repetía justo debajo. */
body.tema-central .pc-lienzo .ficha { display: none; }

/* Campos */
body.tema-central .pc-lienzo .campo input[type="text"],
body.tema-central .pc-lienzo .campo input[type="tel"],
body.tema-central .pc-lienzo .campo input[type="number"],
body.tema-central .pc-lienzo .campo input[type="date"],
body.tema-central .pc-lienzo .campo textarea,
body.tema-central .pc-lienzo .campo select,
body.tema-central .pc-lienzo .buscador input[type="search"],
body.tema-central .pc-lienzo .chat textarea {
  min-height: 50px;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--pc-tarjeta-2);
  border: 1px solid var(--pc-linea);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
body.tema-central .pc-lienzo .campo textarea { min-height: 96px; }
body.tema-central .pc-lienzo .campo :is(input, textarea, select):focus,
body.tema-central .pc-lienzo .buscador input[type="search"]:focus,
body.tema-central .pc-lienzo .chat textarea:focus {
  outline: none;
  border-color: var(--pc-acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-acento) 20%, transparent);
}
body.tema-central .pc-lienzo .campo > label,
body.tema-central .pc-lienzo .buscador label { font-size: .92rem; font-weight: 650; color: var(--texto); }
body.tema-central .pc-lienzo .campo__ayuda { font-size: .85rem; margin-top: 6px; }
body.tema-central .pc-lienzo .campo__vacio {
  border-left: 3px solid var(--pc-aviso); border-radius: 0 10px 10px 0; font-size: .88rem;
  background: color-mix(in srgb, var(--pc-aviso) 9%, transparent);
}
body.tema-central .pc-lienzo .campo__guardado { color: var(--pc-bien); font-size: .82rem; }

/* Botones en píldora */
body.tema-central .pc-lienzo .boton-principal {
  min-height: 52px; border-radius: 999px; font-size: 1rem;
  background: var(--pc-acento); border-color: var(--pc-acento); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pc-acento) 26%, transparent);
  transition: filter .15s;
}
body.tema-central .pc-lienzo .boton-principal:hover:not(:disabled) { background: var(--pc-acento); filter: brightness(1.06); }
body.tema-central .pc-lienzo .boton-principal:disabled { box-shadow: none; }
body.tema-central .pc-lienzo .boton--compacto { min-height: 44px; padding: 0 22px; }
body.tema-central .pc-lienzo .boton-secundario {
  min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--pc-linea); background: var(--pc-tarjeta); color: var(--texto); font-weight: 600;
}
body.tema-central .pc-lienzo .boton-secundario:hover { border-color: var(--pc-acento); color: var(--pc-acento); }
body.tema-central .pc-lienzo .boton-peligro { border-radius: 999px; background: transparent; border-color: var(--pc-mal); color: var(--pc-mal); font-weight: 700; }
body.tema-central .pc-lienzo .boton-peligro:hover { background: color-mix(in srgb, var(--pc-mal) 10%, transparent); }

/* Opciones (Sí/No, tipo de filtro…) y pestañas: como las fichas del Panel Central */
body.tema-central .pc-lienzo .opciones button,
body.tema-central .pc-lienzo .pestana {
  min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--pc-linea); background: var(--pc-tarjeta); color: var(--texto);
  font-size: .95rem; font-weight: 600;
}
body.tema-central .pc-lienzo .opciones button:hover,
body.tema-central .pc-lienzo .pestana:hover:not(:disabled) { border-color: var(--pc-acento); }
body.tema-central .pc-lienzo .opciones button[aria-pressed="true"],
body.tema-central .pc-lienzo .pestana[aria-selected="true"] {
  background: var(--pc-acento); border-color: var(--pc-acento); color: #fff;
}
body.tema-central .pc-lienzo .pestanas { gap: 8px; margin-bottom: 14px; }

/* Avisos y etiquetas */
body.tema-central .pc-lienzo .mensaje { border: 0; border-radius: 12px; font-size: .95rem; }
body.tema-central .pc-lienzo .mensaje[data-tono="mal"] { background: color-mix(in srgb, var(--pc-mal) 11%, transparent); color: var(--pc-mal); }
body.tema-central .pc-lienzo .mensaje[data-tono="bien"] { background: color-mix(in srgb, var(--pc-bien) 11%, transparent); color: var(--pc-bien); }
body.tema-central .pc-lienzo .mensaje[data-tono="aviso"] { background: var(--pc-tarjeta); box-shadow: var(--pc-sombra); border-left: 4px solid var(--pc-acento); }
body.tema-central .pc-lienzo .etiqueta { border: 0; font-size: .8rem; padding: 3px 10px; }
body.tema-central .pc-lienzo .etiqueta[data-estado="viva"] { color: var(--pc-bien); background: color-mix(in srgb, var(--pc-bien) 14%, transparent); }
body.tema-central .pc-lienzo .etiqueta[data-estado="vencida"] { color: var(--texto-suave); background: var(--pc-tarjeta-2); }
body.tema-central .pc-lienzo .etiqueta[data-estado="futura"] { color: var(--pc-aviso); background: color-mix(in srgb, var(--pc-aviso) 14%, transparent); }
body.tema-central .pc-lienzo .registros li { border-bottom-color: var(--pc-linea); }
body.tema-central .pc-lienzo .pausadas { border-radius: 0 10px 10px 0; }

/* Métricas = mosaicos del Panel Central (ícono en círculo lavanda) */
body.tema-central .pc-lienzo .metricas { display: flex; flex-wrap: wrap; gap: 18px; }
body.tema-central .pc-lienzo .metricas > .metrica { flex: 1 1 160px; min-width: 0; }
body.tema-central .pc-lienzo .metrica {
  background: var(--pc-tarjeta); border: 0; border-radius: 10px; box-shadow: var(--pc-sombra);
  padding: 22px 14px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
body.tema-central .pc-lienzo .metrica__icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 8px; color: #fff;
  background: radial-gradient(circle at 30% 25%, var(--pc-acento-2), var(--pc-acento));
}
body.tema-central .pc-lienzo .metrica__icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.tema-central .pc-lienzo .metrica__titulo { font-size: .95rem; font-weight: 700; color: var(--texto); }
body.tema-central .pc-lienzo .metrica__valor { font-size: 1.6rem; font-weight: 800; margin-top: 2px; }
body.tema-central .pc-lienzo .metrica__valor.sin-dato { font-size: .95rem; font-weight: 500; }
body.tema-central .pc-lienzo .metrica__comparacion { font-size: .85rem; margin-top: 2px; }
body.tema-central .pc-lienzo .metrica__comparacion[data-signo="mas"] { color: var(--pc-bien); }
body.tema-central .pc-lienzo .metrica__comparacion[data-signo="menos"] { color: var(--pc-aviso); }

/* Consumo: el mes en mosaicos y los desgloses con barra */
body.tema-central .pc-lienzo .consumo-resumen { margin-bottom: 20px; }
body.tema-central .pc-lienzo .consumo-resumen .consumo__grande { margin: 2px 0 0; font-size: 1.6rem; font-weight: 800; }
body.tema-central .pc-lienzo .consumo-resumen .consumo__nota { margin: 14px 0 0; color: var(--texto-suave); }
body.tema-central .pc-lienzo .consumo__lista li { border-bottom-color: var(--pc-linea); }
body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) {
  display: grid; grid-template-columns: minmax(110px, 220px) minmax(0, 1fr) auto; align-items: center; gap: 14px;
}
body.tema-central .pc-lienzo .consumo__pista { display: block; height: 10px; border-radius: 999px; background: var(--pc-tarjeta-2); overflow: hidden; }
body.tema-central .pc-lienzo .consumo__relleno { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pc-acento-2), var(--pc-acento)); }

/* Tablas de Datos */
body.tema-central .pc-lienzo .tabla-hoja { border: 0; border-radius: 12px; box-shadow: var(--pc-sombra); background: var(--pc-tarjeta); }
body.tema-central .pc-lienzo .tabla-hoja thead th { background: var(--pc-tarjeta-2); color: var(--texto-suave); font-size: .75rem; }
body.tema-central .pc-lienzo .tabla-hoja :is(th, td) { border-bottom-color: var(--pc-linea); }
body.tema-central .pc-lienzo .tabla-hoja :is(th, td):first-child { border-right-color: var(--pc-linea); }

/* Mi negocio: las tarjetas a todo el ancho, una debajo de otra, y los
   campos de cada tarjeta en dos columnas LEÍDAS POR FILAS. No vuelve
   el problema del 17-sep (dos columnas de tarjetas: el Tab saltaba de
   la de la izquierda a la de la derecha y la página subía de golpe):
   aquí el foco va a la derecha y baja, en el orden en que se lee. */
body.tema-central .pc-lienzo .grupos { max-width: none; gap: 22px; }
@media (min-width: 1100px) {
  body.tema-central .pc-lienzo .grupos .grupo {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start;
  }
  body.tema-central .pc-lienzo .grupos .grupo > :not(.campo) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body.tema-central .pc-lienzo .grupo,
  body.tema-central .pc-lienzo .tarjeta,
  body.tema-central .pc-lienzo .estado,
  body.tema-central .pc-lienzo .interruptor-agente { padding: 18px 16px; }
  body.tema-central .pc-lienzo .metricas { gap: 12px; }
  body.tema-central .pc-lienzo .metricas > .metrica { flex-basis: calc(50% - 6px); }
  body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) { grid-template-columns: minmax(0, 1fr) auto; }
  body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) .consumo__pista { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  body.tema-central .pc-lienzo :is(.boton-principal, .campo input, .campo textarea) { transition: none; }
}

/* Ajustes tras ver las capturas (10-oct) */
body.tema-central .pc-lienzo .grupo + .grupo,
body.tema-central .pc-lienzo .grupo + .tarjeta,
body.tema-central .pc-lienzo .tarjeta + .grupo { margin-top: 18px; }
body.tema-central .pc-lienzo .grupos .grupo + .grupo { margin-top: 0; }
body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) { grid-template-columns: minmax(110px, 220px) minmax(0, 1fr) 140px; }
body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) .consumo__monto { text-align: right; }
/* La lista de la derecha (Promociones, Lo que sabe, Datos, Entrenar)
   también va en su tarjeta, como la de la izquierda. */
body.tema-central .pc-lienzo .columna-lateral {
  background: var(--pc-tarjeta); border-radius: 12px; box-shadow: var(--pc-sombra); padding: 22px 24px;
}
body.tema-central .pc-lienzo .columna-lateral .seccion-titulo { margin-top: 0; }
@media (max-width: 640px) {
  body.tema-central .pc-lienzo .consumo__lista li:has(.consumo__pista) { grid-template-columns: minmax(0, 1fr) auto; }
  body.tema-central .pc-lienzo .columna-lateral { padding: 18px 16px; }
}

/* La columna principal de Datos (formulario) y de Entrenar (chat) en su
   tarjeta, igual que Promociones y Lo que sabe, que ya usan .grupo. */
body.tema-central .pc-lienzo .columna-principal > :is(form, .chat) {
  background: var(--pc-tarjeta); border-radius: 12px; box-shadow: var(--pc-sombra); padding: 22px 24px;
}
@media (max-width: 640px) {
  body.tema-central .pc-lienzo .columna-principal > :is(form, .chat) { padding: 18px 16px; }
}

/* Teléfono: en el panel del cliente el círculo con la inicial ocupaba
   una línea entera solo (el nombre ya no cabe a su lado). */
@media (max-width: 640px) {
  .pc-seccion .pc-cabeza__lado:has(> .pc-quien:only-child) { display: none; }
}
body.tema-central .pc-lienzo .campo__etiqueta { font-size: .92rem; font-weight: 650; color: var(--texto); }

/* Conversaciones del dueño (10-oct): la misma vista del Panel Central. */
.conversaciones__cabeza { justify-content: space-between; margin-bottom: 14px; }
.conversaciones__cabeza .pc-sub { margin: 0; flex: 1 1 320px; }

/* Ubicar en el ERP (10-oct): número de ficha de Recepción (R-xxxx) y teléfono como en el ERP. */
.esperando__ficha { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; font-weight: 700; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--pc-tarjeta-2, rgba(0,0,0,.05)); color: var(--texto); }
.esperando__ficha .esperando__copiar { min-height: 26px; padding: 2px 9px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.esperando__canal { font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--pc-acento); background: color-mix(in srgb, var(--pc-acento) 14%, transparent); }
.esperando__ubicar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.esperando__ubicar .esperando__tel { color: var(--texto); font-weight: 700; font-size: 1rem; }
.esperando__sin-tel { color: var(--texto-suave); font-size: .88rem; font-style: italic; }
.esperando__copiar { border: 1px solid var(--pc-linea, rgba(0,0,0,.12)); background: transparent; color: var(--texto); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; min-height: 30px; }
.esperando__copiar:hover { border-color: var(--pc-acento); color: var(--pc-acento); }