/* Colores de marca Capote Business Solutions (logo y capotesolutions.com) */
:root {
  --navy: #080060;
  --navy-dark: #05033b;
  --pink: #ff007a;
  --pink-dark: #d90068;
  --orange: #ff9205;
  --cyan: #16d7e7;
  --gray: #e9eff3;
  --bg: #f4f7fa;
  --card: #fff;
  --text: #1b1a33;
  --muted: #6b7085;
  --border: #dde3ea;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--navy); }
h1 { margin: 0 0 .4rem; font-size: 1.6rem; color: var(--navy); }
h2 { margin-top: 0; font-size: 1.05rem; color: var(--navy); }
h3 { font-size: .95rem; color: var(--navy); margin: 1.4rem 0 .6rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
code { background: var(--gray); padding: .05rem .35rem; border-radius: 4px; }

/* Cabecera */
.topbar { display: flex; align-items: center; gap: 2rem; padding: .6rem 1.5rem; background: #fff; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand img { height: 40px; }
.brand span { color: var(--pink); font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; }
.topbar nav { display: flex; gap: .4rem; flex: 1; }
.topbar nav a { color: var(--navy); text-decoration: none; font-weight: 600; padding: .45rem .8rem; border-radius: 6px; }
.topbar nav a:hover { background: var(--gray); }
.topbar nav a.active { background: var(--navy); color: #fff; }
.who { font-size: .9rem; color: var(--muted); }
.who a { color: var(--navy); }
.brand-stripe { display: flex; height: 4px; }
.brand-stripe i { flex: 1; }
.brand-stripe i:nth-child(1) { background: var(--navy); flex: 6; }
.brand-stripe i:nth-child(2) { background: var(--pink); flex: 2; }
.brand-stripe i:nth-child(3) { background: var(--orange); flex: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.card.wide { grid-column: 1 / -1; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }

/* Formularios */
label { display: block; margin-bottom: .8rem; font-weight: 600; font-size: .9rem; color: var(--navy); }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--text); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); border-color: transparent; }
input:disabled { background: var(--gray); color: var(--muted); }
button, .button { display: inline-block; padding: .6rem 1.2rem; border: 0; border-radius: 8px; background: var(--pink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
button:hover, .button:hover { background: var(--pink-dark); }
button.secondary, .button.secondary { background: var(--navy); }
button.secondary:hover, .button.secondary:hover { background: var(--navy-dark); }
button.full { width: 100%; }
button:disabled { opacity: .45; cursor: not-allowed; background: #9aa0b4; color: #fff; }
button.ghost:disabled { background: transparent; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.section-head h2 { margin: 0; }
.channels { display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; }
.channel { font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.channel.on { background: #e2f8fa; color: #0b5c63; }
.channel.off { background: var(--gray); color: #a0a5b5; text-decoration: line-through; }
.channel-icons span { margin-right: .15rem; }
.channel-icons .off { opacity: .2; filter: grayscale(1); }
.small-btn { padding: .35rem .7rem; font-size: .8rem; }
.inline-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bookmarklet { display: inline-block; margin: .6rem 0; padding: .7rem 1.4rem; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 800; text-decoration: none; cursor: grab; box-shadow: 0 4px 14px rgba(255, 0, 122, .35); }
.steps { padding-left: 1.2rem; }
.steps li { margin-bottom: .6rem; }
kbd { background: var(--gray); border: 1px solid var(--border); border-radius: 4px; padding: 0 .3rem; font-size: .85em; }
.inline-form label { margin: 0; min-width: 160px; }
.inline-form button { margin-bottom: 1px; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.login { max-width: 400px; margin: 3rem auto; }
.login-logo { display: block; width: 180px; margin: 0 auto 1rem; }
.login h1 { text-align: center; }
.login > .muted { text-align: center; }
.accent { color: var(--pink); }

.search-layout { display: grid; grid-template-columns: minmax(300px, 480px) minmax(280px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 760px) { .search-layout { grid-template-columns: 1fr; } }
.hooks { list-style: none; padding: 0; margin: 0; }
.hooks li { display: flex; flex-direction: column; padding: .5rem 0; border-bottom: 1px solid var(--border); }
.hooks li:last-child { border: 0; }
.hooks span { color: var(--pink); font-weight: 600; font-size: .9rem; }

.filters { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; align-items: center; }
.filters select { width: auto; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; text-decoration: none; display: flex; flex-direction: column; }
.stat b { font-size: 1.4rem; color: var(--navy); line-height: 1.2; }
.stat span { font-size: .8rem; color: var(--muted); text-transform: capitalize; }
.stat.active { border-color: var(--pink); box-shadow: inset 0 -3px 0 var(--pink); }

.alert { padding: .65rem .9rem; border-radius: 8px; margin: .6rem 0; }
.alert.ok { background: #e2f8fa; color: #0b5c63; border-left: 4px solid var(--cyan); }
.alert.info { background: #eceaf8; color: var(--navy); border-left: 4px solid var(--navy); }
.alert.error { background: #ffe6f1; color: #9c0049; border-left: 4px solid var(--pink); }
.big-code { font-size: 1.1rem; user-select: all; }

.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--navy); color: #fff; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f7f8fc; }
td.empty { text-align: center; padding: 2rem; color: var(--muted); }
table.kv td:first-child { color: var(--muted); width: 40%; }
table.users td { vertical-align: middle; }

.score { display: inline-block; min-width: 2.4rem; padding: .15rem .45rem; border-radius: 999px; background: var(--gray); color: var(--navy); text-align: center; font-weight: 800; }
.score.warm { background: #fff1dd; color: #b35f00; }
.score.hot { background: var(--pink); color: #fff; }
.score.pending { color: var(--muted); }
.score.big { font-size: 1.5rem; padding: .35rem .9rem; }
.tag { display: inline-block; margin: 0 .3rem .3rem 0; padding: .1rem .5rem; border-radius: 4px; background: var(--gray); font-size: .78rem; }
.tag.pink { background: #ffe0ee; color: var(--pink-dark); font-weight: 700; }
.status { font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; background: var(--gray); white-space: nowrap; font-weight: 600; }
.s-contactado { background: #e2f8fa; color: #0b5c63; }
.s-respondió, .s-reunión { background: #fff1dd; color: #b35f00; }
.s-cliente { background: var(--navy); color: #fff; }
.s-descartado { opacity: .55; }
/* Prioridad */
.prio { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-weight: 800; font-size: .8rem; white-space: nowrap; background: var(--gray); color: var(--navy); }
.prio-hot { background: var(--pink); color: #fff; }
.prio-warm { background: #fff1dd; color: #a85800; }
.prio-low { background: var(--gray); color: var(--muted); }
.prio-pending, .prio-none { background: transparent; color: var(--muted); font-weight: 600; }
.big-prio .prio { font-size: 1.1rem; padding: .35rem 1rem; }
.legend { margin: .2rem 0 1rem; }
.legend summary { cursor: pointer; color: var(--navy); font-weight: 600; font-size: .9rem; list-style: none; }
.legend summary::before { content: "ⓘ "; color: var(--pink); }
.legend-body { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; margin-top: .5rem; font-size: .9rem; }
.legend-levels { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: center; margin: .6rem 0; }
.breakdown { list-style: none; padding: 0; margin: 0 0 .6rem; }
.breakdown li { padding: .3rem 0; border-bottom: 1px dashed var(--border); }
.breakdown b { display: inline-block; min-width: 2.4rem; color: var(--pink); }
.hook { background: #fff6e8; border-radius: 8px; padding: .5rem .7rem; }

/* Barra y vistas */
.nav-cta { background: var(--pink); color: #fff !important; text-decoration: none; font-weight: 700; padding: .45rem .9rem; border-radius: 999px; }
.nav-cta:hover, .nav-cta.active { background: var(--pink-dark); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.segmented { display: inline-flex; background: var(--gray); border-radius: 999px; padding: 3px; }
.segmented a { padding: .4rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--navy); }
.segmented a.active { background: #fff; box-shadow: 0 1px 4px rgba(8, 0, 96, .15); }

/* Mapa estilo Booking */
.map-layout { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 1rem; height: calc(100vh - 230px); min-height: 480px; }
.map-list { overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; padding-right: .3rem; }
.map { border-radius: 12px; border: 1px solid var(--border); z-index: 0; }
.lead-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.lead-card:hover, .lead-card.active { border-color: var(--pink); box-shadow: 0 4px 16px rgba(8, 0, 96, .1); }
.lead-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.lead-card-tags { margin: .35rem 0; }
.pin-wrap { background: none; border: 0; }
.pin { transform: translate(-50%, -100%); background: #fff; color: var(--navy); border: 2px solid var(--navy); border-radius: 999px; padding: 1px 8px; font: 800 12px/1.4 -apple-system, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .12s; }
.pin-hot { background: var(--pink); border-color: var(--pink); color: #fff; }
.pin-warm { background: var(--orange); border-color: var(--orange); color: #fff; }
.pin.active { transform: translate(-50%, -100%) scale(1.3); background: var(--navy); border-color: var(--navy); color: #fff; }
.popup { display: flex; flex-direction: column; gap: .35rem; min-width: 220px; font-size: .85rem; }
.popup .button { align-self: flex-start; color: #fff; margin-top: .2rem; }
@media (max-width: 800px) {
  .map-layout { grid-template-columns: 1fr; height: auto; }
  .map { height: 55vh; order: -1; }
  .map-list { max-height: none; overflow: visible; }
}

/* Modo trabajo */
.queue-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.queue-stats { display: flex; gap: .6rem; }
.queue-stats div { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: .5rem 1rem; text-align: center; }
.queue-stats b { display: block; font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.queue-stats span { font-size: .75rem; color: var(--muted); }
.queue-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .queue-grid { grid-template-columns: 1fr; } }
.queue-name { font-size: 1.3rem; margin: 0; }
.steps-head { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .6rem; }
.steps-head:first-child { margin-top: 0; }
.steps-head h2 { margin: 0; }
.step-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: .9rem; }
.regenerate { margin-bottom: .6rem; }
.regenerate select { width: auto; margin: 0; }
.queue-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
button.big { font-size: 1.05rem; padding: .8rem 1.6rem; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.ghost:hover { background: var(--gray); color: var(--text); }
.empty-state { text-align: center; padding: 3rem 1rem; }
.big-emoji { font-size: 3rem; }

/* Panel */
a.queue-stats { text-decoration: none; }
a.queue-stats:hover div { border-color: var(--pink); }
.kpis { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: .8rem; margin: .8rem 0 1rem; }
@media (max-width: 960px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpi-hero { grid-column: 1 / -1; } }
.kpi { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; text-decoration: none; color: var(--text); }
a.kpi:hover { border-color: var(--pink); }
.kpi span { font-size: .85rem; color: var(--muted); }
.kpi b { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi small { color: var(--muted); font-size: .78rem; }
.kpi-hero { background: var(--navy); border-color: var(--navy); }
.kpi-hero span, .kpi-hero small { color: #cfd0ea; }
.kpi-hero b { color: #fff; font-size: 3rem; }
a.kpi-hero:hover { border-color: var(--pink); box-shadow: inset 0 -4px 0 var(--pink); }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.member { border: 1px solid var(--border); border-radius: 10px; padding: .8rem 1rem; }
.member-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.goal { font-size: .8rem; font-weight: 700; color: var(--muted); }
.goal-ok { color: #0b5c63; }
.meter { height: 8px; border-radius: 999px; background: #e3e2f3; overflow: hidden; margin: .6rem 0; }
.meter i { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.member-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.member-stats b { display: block; font-size: 1.2rem; color: var(--navy); }
.member-stats span { font-size: .75rem; color: var(--muted); }
.panel-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; margin-top: 1rem; align-items: start; }
@media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } }
.colchart { display: grid; grid-template-columns: auto 1fr; gap: .5rem; margin-top: .8rem; }
.colchart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: .72rem; color: var(--muted); padding-bottom: 1.4rem; text-align: right; }
.colchart-plot { display: grid; grid-template-columns: repeat(14, 1fr); height: 200px; border-bottom: 1px solid var(--border); background: linear-gradient(var(--border), var(--border)) top / 100% 1px no-repeat; }
.col { position: relative; display: flex; flex-direction: column; outline: none; cursor: default; }
.col-slot { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.col-slot i { display: block; width: min(24px, 60%); background: var(--navy); border-radius: 4px 4px 0 0; min-height: 0; }
.col-slot em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.col-x { font-size: .65rem; color: var(--muted); text-align: center; height: 1.4rem; line-height: 1.4rem; white-space: nowrap; transform: translateY(1.5rem); position: absolute; bottom: 0; left: 0; right: 0; }
.col:hover .col-slot, .col:focus .col-slot { background: rgba(8, 0, 96, .05); }
.col:hover::after, .col:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% - 1.5rem); left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: .75rem; padding: .3rem .55rem; border-radius: 6px; white-space: nowrap; z-index: 2; pointer-events: none; }
.colchart + p, .colchart ~ details { margin-top: 1.8rem; }
.table-view summary { cursor: pointer; font-size: .85rem; color: var(--navy); }
.funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.funnel-step { background: var(--gray); border-radius: 8px; padding: .5rem; text-align: center; text-decoration: none; color: var(--text); }
.funnel-step:hover { box-shadow: inset 0 -3px 0 var(--pink); }
.funnel-step b { display: block; font-size: 1.3rem; color: var(--navy); }
.funnel-step span { font-size: .72rem; color: var(--muted); }
.feed-title { margin-top: 1.4rem; }
.feed { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow-y: auto; }
.feed li { padding: .45rem 0; border-bottom: 1px solid var(--border); }
.feed li:last-child { border: 0; }

/* Aviso antes de buscar */
.modal { border: 0; border-radius: 16px; padding: 1.8rem 2rem; max-width: 480px; text-align: center; box-shadow: 0 20px 60px rgba(8, 0, 96, .3); }
.modal::backdrop { background: rgba(8, 0, 96, .45); }
.modal h2 { font-size: 1.35rem; margin: .2rem 0 .6rem; }
.modal-emoji { font-size: 2.6rem; }
.modal-actions { justify-content: center; margin-top: 1rem; }

/* Búsquedas */
.stack { display: flex; flex-direction: column; gap: 1rem; }
label.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--muted); }
label.checkbox input { width: auto; margin: 0; }
.estimate { background: var(--gray); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .9rem; }
.estimate.warn { background: #fff1dd; color: #7a4100; }
.jobs { list-style: none; padding: 0; margin: 0; }
.jobs li { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.jobs li:last-child { border: 0; }
.job-status { font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--gray); margin-left: .3rem; }
.js-buscando, .js-analizando { background: #e2f8fa; color: #0b5c63; }
.js-terminada { background: #eceaf8; color: var(--navy); }
.js-error, .js-interrumpida { background: #ffe6f1; color: #9c0049; }
.job-card { max-width: 760px; }
.job-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.progress { height: 10px; background: var(--gray); border-radius: 999px; overflow: hidden; margin: .6rem 0 1rem; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--pink)); transition: width .6s; }
.job-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.job-stats .stat span { text-transform: none; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .25rem 0; }