/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Cuenta y administración en clave editorial

   Va después de kachai-editorial.css en account.html y admin.html. La
   estructura de panel.css no se toca: navegación a la izquierda, secciones
   a la derecha. Cambia la piel —papel, serif, cobre— y la marca pasa a ser
   la misma K de partículas que en el chat.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Barra lateral ──────────────────────────────────────────────── */
.p-side {
  background-color: var(--w-barra) !important;
  border-right: 1px solid var(--w-linea) !important;
  padding: 24px 18px !important;
}
.p-brand { gap: 12px; padding-bottom: 6px; }
.p-brand__mark {
  width: 30px !important; height: 22px !important;
  font-size: 0 !important; color: transparent !important;
  -webkit-mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  mask: url('/assets/img/kachai-mark-reference-transparent.png') center / contain no-repeat;
  background: var(--w-tinta) !important;
  border-radius: 0 !important;
}
.p-brand__name { font-family: var(--fuente) !important; font-weight: 600 !important; letter-spacing: .17em !important; }
.p-brand__sub, .p-nav__label {
  font-family: var(--ed-serif) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
  color: var(--w-tinta-3) !important;
}
.p-nav__item { border-radius: 4px !important; }
.p-nav__item:hover { background: var(--w-hover) !important; color: var(--w-tinta) !important; }
.p-nav__item.is-on {
  background: var(--w-hover) !important;
  color: var(--w-tinta) !important;
  box-shadow: inset 2px 0 0 var(--ed-cobre) !important;
  border-color: transparent !important;
}
.p-nav__item.is-on .ms { color: var(--ed-cobre) !important; }

/* ── 2. Encabezado de sección ──────────────────────────────────────── */
.p-main { padding: 40px 44px 70px !important; }
.p-head { padding-bottom: 22px; margin-bottom: 28px !important; border-bottom: 1px solid var(--w-linea); }
.p-head h1 {
  font: 400 clamp(32px, 3.4vw, 46px)/1.08 var(--ed-serif) !important;
  letter-spacing: -.04em !important;
}
.p-head p { font: 16px/1.5 var(--ed-serif) !important; color: var(--w-tinta-3) !important; margin-top: 10px !important; }

/* ── 3. Cifras ─────────────────────────────────────────────────────── */
/* Cada cifra lleva un filete superior; se alternan cobre, petróleo y
   salvia como las tarjetas de la biblioteca de la referencia. */
.p-card {
  background: var(--w-panel) !important;
  border: 1px solid var(--w-linea) !important;
  border-top: 2px solid var(--ed-cobre) !important;
  border-radius: 4px !important;
  padding: 18px 18px 16px !important;
}
.p-card:nth-child(3n+2) { border-top-color: var(--ed-petroleo) !important; }
.p-card:nth-child(3n) { border-top-color: var(--ed-salvia) !important; }
.p-card__label { font: 400 9.5px var(--ed-serif) !important; letter-spacing: .2em !important; color: var(--w-tinta-3) !important; }
/* Georgia sólo trae cifras de estilo antiguo: el 0 se lee como una "o".
   Las cifras de datos van en sans tabular; el serif queda para los textos. */
.p-card__value {
  font: 300 30px/1.15 var(--fuente) !important;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--w-tinta) !important;
}

/* ── 4. Paneles, tablas y medidores ────────────────────────────────── */
.p-panel {
  background: var(--w-panel) !important;
  border: 1px solid var(--w-linea) !important;
  border-radius: 6px !important;
  padding: 22px 22px 18px !important;
}
.p-panel__title { font: 400 21px var(--ed-serif) !important; letter-spacing: -.02em; }
.p-panel__title .ms { color: var(--ed-cobre) !important; }
.p-meter__fill { background: var(--ed-cobre) !important; }
.p-meter__fill.is-hot { background: var(--peligro) !important; }
.p-bars__bar { background: var(--ed-petroleo) !important; }
.p-bars__bar:nth-child(odd) { background: var(--ed-cobre) !important; }
.p-table th {
  font: 400 9.5px var(--ed-serif) !important;
  letter-spacing: .18em !important;
  color: var(--w-tinta-3) !important;
  background: var(--w-papel) !important;
}
.p-table tbody tr:hover { background: var(--w-hover) !important; }
.p-tag { border-radius: 2px !important; }
.p-tag--admin { color: var(--ed-cobre) !important; border-color: color-mix(in srgb, var(--ed-cobre) 40%, transparent) !important; }
.p-tag--ok { color: var(--ed-salvia) !important; border-color: color-mix(in srgb, var(--ed-salvia) 40%, transparent) !important; }
.p-tag--warn { color: var(--aviso) !important; border-color: color-mix(in srgb, var(--aviso) 40%, transparent) !important; }

/* ── 5. Controles ──────────────────────────────────────────────────── */
.p-btn { border-radius: 3px !important; }
.p-btn:hover { border-color: var(--ed-cobre) !important; }
.p-btn--primary {
  background: var(--ed-tinta-cta) !important;
  border-color: var(--ed-tinta-cta) !important;
  color: var(--ed-papel-cta) !important;
}
.p-btn--primary:hover { background: var(--ed-cobre) !important; border-color: var(--ed-cobre) !important; color: #fff8ed !important; }
.p-field__label { font: 400 9.5px var(--ed-serif) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--w-tinta-3) !important; }
.p-field input, .p-field textarea, .p-field select, .p-search {
  background: var(--w-papel) !important;
  border: 1px solid var(--w-linea-2) !important;
  border-radius: 3px !important;
  color: var(--w-tinta) !important;
}
.p-field input:focus, .p-field textarea:focus, .p-field select:focus, .p-search:focus-within {
  border-color: var(--ed-cobre) !important;
  box-shadow: 0 0 0 3px var(--ed-cobre-suave);
}
.p-check input { accent-color: var(--ed-cobre) !important; }
.p-table select, .p-main select {
  background: var(--w-papel) !important;
  color: var(--w-tinta) !important;
  border: 1px solid var(--w-linea-2) !important;
  border-radius: 3px !important;
  color-scheme: light dark;
}
.p-period { border-radius: 2px !important; font-family: var(--ed-serif) !important; letter-spacing: .16em !important; }
.p-period.is-on { background: var(--w-tinta) !important; border-color: var(--w-tinta) !important; color: var(--w-papel) !important; }
.p-msg { border-radius: 4px !important; }
.p-msg--ok { color: var(--ed-salvia) !important; background: color-mix(in srgb, var(--ed-salvia) 9%, transparent) !important; border-color: color-mix(in srgb, var(--ed-salvia) 30%, transparent) !important; }
.p-empty { font: 18px/1.5 var(--ed-serif); color: var(--w-tinta-3); }
.p-main a:not(.p-btn) { color: var(--ed-cobre); }

@media (max-width: 760px) {
  .p-main { padding: 26px 20px 60px !important; }
}