/* Identidad gráfica Habilidosamente: papel cálido, morado, fucsia, Fraunces + Poppins */
:root {
  --morado: #6B2C8C;
  --hondo: #3D1552;
  --fucsia: #E5267F;
  --tinta: #221A26;
  --gris: #6E6473;
  --papel: #FBF8F6;
  --lila: #F4EDF8;
  --linea: #E6DCEA;
  --wa: #1FBE5F;

  --bg: var(--papel);
  --panel: #ffffff;
  --ink: var(--tinta);
  --ink-2: #4a3f4f;
  --ink-3: var(--gris);
  --line: var(--linea);
  --line-2: #f1eaf4;
  --brand: var(--morado);
  --brand-2: var(--lila);
  --ok: #1a8a55;
  --ok-2: #e5f5ec;
  --warn: #a8640a;
  --warn-2: #fdf1dc;
  --bad: #c41f63;
  --bad-2: #fde7f0;
  --violet: var(--morado);
  --violet-2: var(--lila);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(61, 21, 82, .04), 0 10px 30px -18px rgba(61, 21, 82, .18);
  --shadow-lg: 0 18px 50px -22px rgba(61, 21, 82, .28);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .72, .18, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--morado); text-decoration: none; }
a:hover { color: var(--fucsia); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-family: var(--serif); font-weight: 500; color: var(--tinta); letter-spacing: -.01em; }
h1 { font-size: 32px; letter-spacing: -.02em; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h1 em, h2 em, h3 em, .serif-em { font-style: italic; color: var(--morado); font-weight: 400; }
p { margin: 0 0 8px; }
b, strong { font-weight: 600; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.right { text-align: right; }
.hidden { display: none !important; }
::selection { background: rgba(229, 38, 127, .18); }

/* Etiqueta tipo "eyebrow" de la marca */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fucsia); margin-bottom: 8px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* Layout */
.layout { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--hondo); color: #d9c9e2; padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 3px;
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(229, 38, 127, .16), transparent 60%), radial-gradient(90% 50% at 100% 100%, rgba(107, 44, 140, .55), transparent 70%); }
.brand { color: #fff; padding: 2px 8px 22px; display: flex; gap: 11px; align-items: center; text-decoration: none !important; }
.brand img { width: 38px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.brand .bn { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.1; color: #fff; }
.brand .bs { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #c9b3d6; margin-top: 3px; }
.side a.nav { display: flex; align-items: center; gap: 11px; color: #d9c9e2; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 13.5px; transition: background .2s var(--ease), color .2s; position: relative; }
.side a.nav .ic { width: 18px; height: 18px; flex: none; opacity: .85; }
.side a.nav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.side a.nav.on { background: rgba(255, 255, 255, .11); color: #fff; }
.side a.nav.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--fucsia); }
.side .sep { flex: 1; }
.side .who { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 10px 0; font-size: 12.5px; color: #c9b3d6; }
.side .who b { color: #fff; display: block; font-size: 13.5px; font-weight: 500; }
.side .who a { color: #d9c9e2; }
.side .who a:hover { color: #fff; }
.ia-pill { margin: 8px 6px; font-size: 12px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #eadff0; display: flex; gap: 8px; align-items: center; }
.ia-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 3px rgba(31, 190, 95, .2); }
.main { padding: 30px 40px 70px; min-width: 0; max-width: 1440px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.head .sub { color: var(--ink-3); margin-top: 6px; font-size: 14px; }
.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--fucsia); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .ficha, .g3, .g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 12px; }
  .brand { padding-bottom: 6px; width: 100%; }
  .side a.nav.on::before { display: none; }
  .side .sep, .side .who, .ia-pill { display: none; }
  .main { padding: 18px 16px 50px; }
  h1 { font-size: 26px; }
  .ficha, .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > .ch { padding: 16px 20px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card > .cb { padding: 18px 20px; }
.card + .card { margin-top: 18px; }
.grid > .card + .card { margin-top: 0; }
.kpi { padding: 20px 22px; transition: transform .25s var(--ease), box-shadow .25s; position: relative; overflow: hidden; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi .n { font-family: var(--serif); font-size: 40px; font-weight: 500; margin-top: 6px; line-height: 1; color: var(--tinta); }
.kpi .l { color: var(--gris); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.kpi.accent { background: var(--hondo); border-color: var(--hondo); }
.kpi.accent .n { color: #fff; font-style: italic; }
.kpi.accent .l { color: #d9c9e2; }
.kpi.accent::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(229, 38, 127, .45), transparent 70%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); padding: 9px 18px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .2s, border-color .2s, transform .15s var(--ease), box-shadow .2s; }
.btn:hover { border-color: #d3c2dc; background: var(--lila); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.btn.primary:hover { background: var(--hondo); border-color: var(--hondo); color: #fff; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; box-shadow: 0 10px 26px -10px rgba(31, 190, 95, .55); }
.btn.wa:hover { background: #18a952; color: #fff; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-2); border-color: #f6c4d8; }
.btn.danger.fill { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn.ia { background: var(--lila); border-color: #e3d2ee; color: var(--morado); }
.btn.ia:hover { background: var(--morado); border-color: var(--morado); color: #fff; }

/* Forms */
label.f { display: block; margin-bottom: 14px; }
label.f > span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
input, select, textarea { font: inherit; color: inherit; width: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px rgba(107, 44, 140, .14); }
textarea { min-height: 84px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--morado); }
input[type=range] { accent-color: var(--fucsia); padding: 0; border: 0; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.fs { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 6px; margin: 0 0 18px; background: #fff; }
.fs legend { font-family: var(--serif); font-size: 17px; font-weight: 500; padding: 0 8px; }

/* Tables */
.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fcfafd; white-space: nowrap; }
table.t td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.click { cursor: pointer; transition: background .15s; }
table.t tr.click:hover td { background: #fbf7fd; }
table.t tr.sel td { background: var(--lila); }
.empty { padding: 44px 16px; text-align: center; color: var(--ink-3); font-family: var(--serif); font-style: italic; font-size: 16px; }
.empty a { font-family: var(--sans); font-style: normal; font-size: 14px; }

/* Badges */
.b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.b.ok { background: var(--ok-2); color: var(--ok); }
.b.warn { background: var(--warn-2); color: var(--warn); }
.b.bad { background: var(--bad-2); color: var(--bad); }
.b.info { background: var(--lila); color: var(--morado); }
.b.violet { background: var(--morado); color: #fff; }
.score { display: inline-flex; align-items: center; gap: 9px; min-width: 116px; }
.score .bar { flex: 1; height: 6px; background: var(--line-2); border-radius: 9px; overflow: hidden; min-width: 50px; }
.score .bar i { display: block; height: 100%; border-radius: 9px; }
.score b { font-family: var(--serif); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; width: 28px; text-align: right; }
.big-score { font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1; font-style: italic; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { border: 0; background: none; font: inherit; font-size: 13.5px; padding: 11px 14px; cursor: pointer; color: var(--gris); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; transition: color .2s; }
.tabs button:hover { color: var(--tinta); }
.tabs button.on { color: var(--tinta); border-bottom-color: var(--fucsia); }
.tabs button .c { background: var(--line-2); border-radius: 99px; padding: 1px 8px; font-size: 11px; margin-left: 6px; }
.tabs button.on .c { background: var(--fucsia); color: #fff; }

/* Funnel */
.funnel { display: flex; gap: 6px; flex-wrap: wrap; }
.funnel span { font-size: 11.5px; background: var(--lila); border-radius: 999px; padding: 3px 10px; color: var(--ink-2); }
.funnel span b { color: var(--morado); }

/* Dropzone */
.drop { border: 1.5px dashed #d6c4e0; border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-2); background: linear-gradient(180deg, #fff, #fcf9fd); cursor: pointer; transition: .2s var(--ease); }
.drop:hover, .drop.over { border-color: var(--fucsia); background: #fdf3f8; }
.drop b { color: var(--morado); }
.progress { height: 6px; background: var(--line-2); border-radius: 9px; overflow: hidden; margin-top: 12px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--morado), var(--fucsia)); width: 0; transition: width .2s; }

/* Barra de selección masiva */
.bulk { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--hondo); color: #fff; border-radius: 999px; margin-bottom: 14px; flex-wrap: wrap; box-shadow: var(--shadow-lg); }
.bulk select { width: auto; padding: 6px 10px; color: var(--ink); border-radius: 999px; }
.bulk .btn:not(.wa) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.bulk .btn:not(.wa):hover { background: rgba(255, 255, 255, .2); }

/* Banners */
.banner { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.banner.ia { background: var(--lila); color: var(--hondo); border: 1px solid #e7d8f0; }
.banner.warn { background: var(--warn-2); color: #7a4a00; }
.banner.bad { background: var(--bad-2); color: #8d1446; }
.spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Listas */
ul.clean { margin: 0; padding-left: 18px; }
ul.clean li { margin-bottom: 5px; }
ul.clean li::marker { color: var(--fucsia); }
dl.kv { display: grid; grid-template-columns: 105px 1fr; gap: 8px 12px; margin: 0; }
dl.kv dt { color: var(--ink-3); font-size: 12px; }
dl.kv dd { margin: 0; word-break: break-word; }
.req { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.req:last-child { border-bottom: 0; }
.req .ic { font-size: 15px; line-height: 1.3; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 9px 0 9px 20px; border-left: 1px solid var(--linea); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--fucsia); border: 2px solid #fff; }
.section-t { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--fucsia); font-weight: 600; margin: 16px 0 8px; }

/* Calificación */
.rating { display: flex; gap: 5px; }
.rating label { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--linea); border-radius: 50%; cursor: pointer; font-weight: 500; color: var(--ink-2); transition: .15s; }
.rating label:hover { border-color: var(--morado); }
.rating input { display: none; }
.rating label:has(input:checked) { background: var(--morado); border-color: var(--morado); color: #fff; }
.comp { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(160px, 1.4fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.comp b { font-weight: 500; }
.choice { display: flex; gap: 8px; flex-wrap: wrap; }
.choice label { border: 1px solid var(--linea); border-radius: 999px; padding: 8px 16px; cursor: pointer; display: flex; gap: 7px; align-items: center; transition: .15s; }
.choice label:has(input:checked) { border-color: var(--morado); background: var(--lila); color: var(--hondo); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(34, 26, 38, .5); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: 6vh 16px; z-index: 50; overflow-y: auto; animation: fade .2s; }
.modal { background: #fff; border-radius: 18px; width: min(640px, 100%); box-shadow: 0 30px 80px -20px rgba(61, 21, 82, .45); animation: up .3s var(--ease); }
.modal.lg { width: min(920px, 100%); }
.modal .mh { padding: 18px 24px; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; }
.modal .mb { padding: 20px 24px; }
.modal .mf { padding: 14px 24px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; gap: 8px; background: #fcfafd; border-radius: 0 0 18px 18px; }
.x { border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--gris); line-height: 1; }
.x:hover { color: var(--fucsia); }
@keyframes fade { from { opacity: 0; } }

/* Avisos */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--tinta); color: #fff; padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg); max-width: 420px; animation: up .25s var(--ease); font-size: 13.5px; }
.toast.bad { background: var(--bad); border-radius: 14px; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .lado { background: var(--hondo); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background-image: radial-gradient(80% 60% at 0% 0%, rgba(229, 38, 127, .25), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(107, 44, 140, .7), transparent 70%); }
.login .lado .frase { font-family: var(--serif); font-size: 46px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; max-width: 520px; }
.login .lado .frase em { color: #f3a9cd; font-weight: 400; }
.login .lado .eyebrow { color: #f3a9cd; }
.login .forma { display: grid; place-items: center; padding: 32px 20px; }
.login form { width: min(380px, 100%); }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login .lado { padding: 32px 24px; } .login .lado .frase { font-size: 30px; } }

/* WhatsApp */
.wa-prev { background: #e8fbe9; border-radius: 12px 12px 12px 4px; padding: 11px 14px; white-space: pre-wrap; font-size: 13.5px; border: 1px solid #c9eecd; }
.cita-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }

/* Informe imprimible */
.informe { background: #fff; max-width: 860px; margin: 0 auto 40px; padding: 48px 56px; color: var(--tinta); font-size: 13.5px; box-shadow: var(--shadow-lg); border-radius: 6px; }
.informe h1 { font-size: 30px; }
.informe h2 { font-size: 13px; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); text-transform: uppercase; letter-spacing: .14em; color: var(--fucsia); font-family: var(--sans); font-weight: 600; }
.informe table { width: 100%; border-collapse: collapse; }
.informe td, .informe th { border: 1px solid var(--linea); padding: 7px 10px; text-align: left; vertical-align: top; }
.informe th { background: var(--lila); font-weight: 500; color: var(--hondo); }
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .informe { padding: 0; max-width: none; box-shadow: none; }
}