/* ============================================================
   KASITHA · kx-stitch-dash.css · v1 (v18.72v)
   Piel de la maqueta (móvil+PC) para Screens.Dashboard, scope .kxd.
   Acompaña a kx-stitch-dash.js. Rollback: quitar link+script.
   ============================================================ */

/* --- Cabecera: saludo en serif, como la maqueta --- */
.kxd .dash-header{background:transparent;padding-top:14px}
.kxd .dash-title{font:600 30px/1.12 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.kxd .dash-sub{font:400 14.5px/1.55 var(--sans);color:var(--ink-soft);max-width:340px}
.kxd .dash-actions .ic-btn{color:#5c534a}

/* --- Stats: tarjetas blancas, número granate en serif --- */
.kxd .stats-grid{gap:12px;margin:14px 0 4px}
.kxd .stat-c{background:var(--paper);border:1px solid var(--hairline);border-radius:16px;
  padding:16px 8px 13px;box-shadow:0 1px 2px rgba(30,22,15,.04)}
.kxd .stat-c .n{font:600 26px var(--serif);color:var(--accent-deep)}
.kxd .stat-c .l{font:600 10px var(--sans);letter-spacing:.09em;color:var(--ink-mute)}

/* --- Títulos de sección en serif con icono de línea --- */
.kxd .h-section{font:600 19px var(--serif);letter-spacing:0;color:var(--ink)}
.kxd .kxd-hico{display:inline-flex;width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.kxd .kxd-hico .kxd-ico{width:20px;height:20px}

/* --- Vacío de matches: tarjeta blanca con ilustración y CTA píldora --- */
.kxd .kxd-empty{background:var(--paper);border:1px solid var(--hairline);border-style:solid;
  border-radius:22px;padding:34px 22px 30px;box-shadow:0 10px 30px -18px rgba(30,22,15,.18)}
.kxd .kxd-illo{display:flex;align-items:center;justify-content:center;width:132px;height:132px;
  margin:0 auto 18px;border-radius:50%;background:#f9e9ea;color:var(--accent-deep)}
.kxd .kxd-illo svg{width:52px;height:52px}
.kxd .kxd-empty-t{display:block;font:600 20px var(--serif);color:var(--ink);margin:0 0 8px}
.kxd .kxd-empty-p{font:400 14.5px/1.6 var(--sans);color:var(--ink-soft);max-width:320px;margin:0 auto 18px}
.kxd .kxd-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;
  max-width:none;margin:0 auto;background:var(--accent);color:#fff;border:0;border-radius:99px;
  padding:14px 26px;font:700 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(200,35,60,.55)}
.kxd .kxd-cta:hover{background:var(--accent-deep)}

/* --- ¿Sabías que?: tarjeta rosada con bombilla granate --- */
.kxd .kxd-sabias{background:#fdf0ea;border:1px solid #f3dccf;border-radius:18px;padding:16px 16px 10px;margin-top:26px}
.kxd .kxd-sabias .bs-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kxd .kxd-bulb{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent-deep);color:#fff;flex:0 0 auto}
.kxd .kxd-bulb svg{width:17px;height:17px}
.kxd .kxd-sabias .bs-title{font:600 18px var(--serif);color:var(--ink);margin:0;flex:1}
.kxd .kxd-sabias .bs-more{font:700 11.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.kxd .kxd-sabias .sabias-item{background:none;border:0;box-shadow:none;border-radius:0;padding:8px 2px 10px}
.kxd .kxd-sabias .sabias-fact{color:var(--ink-soft)}

/* --- Escritorio: dos columnas (contenido | sabías que) --- */
.kxd .kxd-cols{display:block}
@media (min-width:960px){
  /* width:100% es crítico: en un hijo de flex-column, margin auto lateral
     lo encoge al contenido (la cabecera salía a 384px) */
  .kxd .dash-header,.kxd .stats-grid{max-width:1010px;width:100%;margin-left:auto;margin-right:auto}
  #app .kxd .tab-content,#app .kxd .stats-grid{max-width:1010px}
  .kxd .dash-title{font-size:38px}
  .kxd .stats-grid{gap:18px}
  .kxd .stat-c{text-align:left;padding:18px 20px 15px}
  .kxd .stat-c .n{font-size:32px}
  .kxd .kxd-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;
    margin-top:8px}
  .kxd .kxd-side{position:sticky;top:18px}
  .kxd .kxd-sabias{margin-top:0}
  .kxd .kxd-empty{padding:56px 30px 46px}
  .kxd .kxd-illo{width:170px;height:170px}
}

/* --- Cabecera reestructurada (v1b): marca+acciones arriba, saludo debajo --- */
.kxd .kxd-header{display:block;padding-bottom:6px}
.kxd .kxd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kxd .kxd-top .nav-brand{font-size:21px;color:var(--accent-deep)}
.kxd .kxd-header .dash-greeting{max-width:none}
.kxd .kxd-header .dash-actions{gap:8px}

/* --- ¿Sabías que?: encabezado en dos niveles para que respire --- */
.kxd .kxd-sabias .bs-head{flex-wrap:wrap;row-gap:2px}
.kxd .kxd-sabias .bs-more{flex-basis:100%;margin-left:44px;font-size:10.5px}
@media (min-width:960px){
  .kxd .kxd-sabias .bs-more{flex-basis:auto;margin-left:auto}
}

/* --- v1d: icono con aire en cabeceras sin gap propio --- */
.kxd .kxd-hico{margin-right:7px;vertical-align:-4px}
/* En móvil el aside apila justo tras los matches, antes de servicios */
.kxd .kxd-sabias{margin-top:16px}
@media (min-width:960px){.kxd .kxd-sabias{margin-top:0}}

/* --- v18.74aj · Móvil: cabecera y stats pegadas a los bordes ---
   El core da a .dash-header margin:0 -22px (para su antiguo degradado a
   sangre) y a .stats-grid padding lateral 0 en móvil; sin un padre con
   padding, saludo y tarjetas quedaban tocando los bordes. Se alinean a
   los 22px del resto del contenido. Rollback: borrar este bloque. --- */
@media (max-width:959px){
  .kxd .dash-header{margin-left:0;margin-right:0;padding-left:22px;padding-right:22px}
  .kxd .stats-grid{padding-left:22px;padding-right:22px}
}