/* Marketing Cascep — panel operativo.
   Diseño: encabezado con plataforma y cuenta, pestañas fijas, tarjetas con franja de semáforo.
   Todos los colores salen de estas variables (modo claro y oscuro). */
:root {
  --fondo: #f3f5f9; --superficie: #ffffff; --superficie2: #f7f8fc; --tinta: #121829; --suave: #5a6377; --linea: #dde2ec;
  --acento: #2545d3; --acento-tinta: #ffffff; --acento-suave: #e7ebfc;
  --bien: #12804c; --bien-suave: #e2f4ea; --atencion: #a86a10; --atencion-suave: #fbf0dc; --mal: #c2352b; --mal-suave: #fbe5e2; --info: #3d5a99; --info-suave: #e8edf7;
  --titulos: "Sora", ui-sans-serif, system-ui, sans-serif;
  --texto: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0c1019; --superficie: #151b28; --superficie2: #1a2131; --tinta: #e7ebf4; --suave: #97a1b6; --linea: #273049;
    --acento: #7f95ff; --acento-tinta: #0c1019; --acento-suave: #1e2750;
    --bien: #3fcf8e; --bien-suave: #14301f; --atencion: #efb24a; --atencion-suave: #33270f; --mal: #ff7d70; --mal-suave: #3a1714; --info: #9cb2e6; --info-suave: #1c2540;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fondo: #0c1019; --superficie: #151b28; --superficie2: #1a2131; --tinta: #e7ebf4; --suave: #97a1b6; --linea: #273049;
    --acento: #7f95ff; --acento-tinta: #0c1019; --acento-suave: #1e2750;
    --bien: #3fcf8e; --bien-suave: #14301f; --atencion: #efb24a; --atencion-suave: #33270f; --mal: #ff7d70; --mal-suave: #3a1714; --info: #9cb2e6; --info-suave: #1c2540;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font: 15px/1.5 var(--texto); -webkit-text-size-adjust: 100%; padding-bottom: env(safe-area-inset-bottom, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--superficie); }
h1, h2, h3 { font-family: var(--titulos); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 1.15rem; } h2 { font-size: 1.12rem; } h3 { font-size: 1rem; }
a { color: var(--acento); }
img { max-width: 100%; }
.contenedor { max-width: 1140px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.principal { padding-block: 16px 64px; display: flex; flex-direction: column; gap: 14px; }
.small { font-size: .85rem; } .muted { color: var(--suave); } .num { font-variant-numeric: tabular-nums; }
.minw { min-width: 0; } .col { display: flex; flex-direction: column; gap: 6px; }
.txt-mal { color: var(--mal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- encabezado y pestañas */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.cab { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding-block: 12px; }
.marca { display: flex; align-items: center; gap: 10px; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--acento); color: var(--acento-tinta); display: grid; place-items: center; font: 700 .95rem var(--titulos); flex: 0 0 auto; }
.cab-der { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.plataformas { display: flex; gap: 4px; background: var(--superficie2); border: 1px solid var(--linea); border-radius: 10px; padding: 3px; }
.plataformas button { border: 0; background: none; color: var(--suave); font: 600 .84rem var(--texto); padding: 6px 11px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.plataformas button.on { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--bien); } .punto.apagado { background: var(--suave); opacity: .5; }
.cuenta-sel select { min-width: 0; max-width: 260px; font-weight: 600; }
.pestanas { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; border: 0; background: none; color: var(--suave); font: 600 .9rem var(--texto); padding: 12px 11px; border-bottom: 2px solid transparent; cursor: pointer; }
.tabs button.on { color: var(--acento); border-bottom-color: var(--acento); }

/* ---------- bloques */
.cabecera-seccion { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tarjeta.compacta { gap: 6px; padding: 10px 14px; }
.tarjeta.foco { box-shadow: 0 0 0 2px var(--acento); }
.franja-bien { border-left: 4px solid var(--bien); } .franja-atencion { border-left: 4px solid var(--atencion); } .franja-mal { border-left: 4px solid var(--mal); } .franja-info { border-left: 4px solid var(--info); }
.titulo-tarjeta { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pills-der { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fila.izq { justify-content: flex-start; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dos > * { min-width: 0; }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; } }
.nota { display: flex; gap: 10px; align-items: flex-start; background: var(--info-suave); color: var(--info); border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.nota b { color: var(--tinta); } .nota a { color: var(--acento); }
.nota.atencion { background: var(--atencion-suave); color: var(--atencion); }
.vacio { padding: 28px 16px; text-align: center; color: var(--suave); border: 1px dashed var(--linea); border-radius: var(--radio); }
.aviso-error { background: var(--mal-suave); color: var(--mal); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cargando { display: flex; gap: 10px; align-items: center; color: var(--suave); padding: 22px 4px; }
.giro { width: 16px; height: 16px; border: 2px solid var(--linea); border-top-color: var(--acento); border-radius: 50%; animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro { animation: none; } }
.grupo { margin-top: 6px; }

/* ---------- indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.kpi .lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); font-weight: 600; }
.kpi .val { font: 600 1.45rem var(--titulos); margin-top: 2px; }
.kpi .sub { font-size: .8rem; color: var(--suave); }
.sube { color: var(--bien); font-weight: 600; } .baja { color: var(--mal); font-weight: 600; }
.semaforo-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.sem { border: 0; border-radius: 99px; padding: 6px 12px; font: 600 .84rem var(--texto); cursor: pointer; }
.s-bien { background: var(--bien-suave); color: var(--bien); } .s-atencion { background: var(--atencion-suave); color: var(--atencion); } .s-mal { background: var(--mal-suave); color: var(--mal); } .s-info { background: var(--info-suave); color: var(--info); } .s-neutro { background: var(--superficie2); color: var(--suave); border: 1px solid var(--linea); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: .77rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.p-bien { background: var(--bien-suave); color: var(--bien); } .p-atencion { background: var(--atencion-suave); color: var(--atencion); } .p-mal { background: var(--mal-suave); color: var(--mal); } .p-info { background: var(--info-suave); color: var(--info); } .p-neutro { background: var(--superficie2); color: var(--suave); border: 1px solid var(--linea); }
.meta { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: .83rem; color: var(--suave); }
.meta b { color: var(--tinta); font-weight: 600; }
.progreso { height: 6px; background: var(--superficie2); border: 1px solid var(--linea); border-radius: 99px; overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--acento); }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.m { background: var(--superficie2); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.m .l { font-size: .7rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.m .v { font-weight: 700; font-size: 1.02rem; } .m .v.chica { font-size: .86rem; } .m .d { font-size: .76rem; }
.caja-ia { background: var(--acento-suave); border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.caja-ia .h { font-weight: 700; color: var(--acento); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.caja-ia p { margin: 0 0 4px; }
.reco { margin-top: 4px; }
.caja-aviso { background: var(--atencion-suave); color: var(--atencion); border-radius: 9px; padding: 9px 11px; font-size: .87rem; }
.caja-opt { border: 1px solid var(--linea); background: var(--superficie2); border-radius: 10px; padding: 9px 12px; font-size: .88rem; }
.estrella { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--atencion-suave); border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.estrella > span:first-child { font-size: 1.1rem; }
.estrella .minw { flex: 1 1 240px; }
.lista-puntos { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento); font: inherit; cursor: pointer; text-align: left; }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: 5px 12px; font-size: .88rem; margin: 0; }
.dl dt { color: var(--suave); } .dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- botones y formularios */
.botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { font: 600 .88rem var(--texto); border-radius: 9px; padding: 8px 13px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--acento); }
.btn.pri { background: var(--acento); color: var(--acento-tinta); border-color: var(--acento); }
.btn.peligro { color: var(--mal); border-color: var(--mal-suave); }
.btn.fantasma { background: transparent; }
.btn.opt { border-color: var(--acento); color: var(--acento); } .btn.opt.on { background: var(--acento-suave); }
.btn.chico { padding: 5px 10px; font-size: .82rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: var(--superficie); color: var(--suave); font: 600 .82rem var(--texto); padding: 6px 10px; cursor: pointer; }
.seg button.on { background: var(--acento-suave); color: var(--acento); }
.seg .cuenta { opacity: .7; font-weight: 500; }
input[type=text], input[type=search], input[type=url], input[type=date], input[type=number], input[type=password], input:not([type]), select, textarea {
  width: 100%; font: inherit; font-size: .92rem; color: var(--tinta); background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; }
textarea { resize: vertical; min-height: 80px; }
input.corto { width: 76px; display: inline-block; padding: 6px 8px; }
label { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--linea); background: var(--superficie); border-radius: 99px; padding: 6px 11px; font: 500 .84rem var(--texto); color: var(--tinta); cursor: pointer; }
.chip:hover { border-color: var(--acento); color: var(--acento); }

/* ---------- borradores */
.anillo { --v: 50; --c: var(--acento); width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--superficie2) 0); display: grid; place-items: center; flex: 0 0 auto; }
.anillo span { width: 46px; height: 46px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font: 700 1rem var(--titulos); }
.etiqueta { margin-bottom: 5px; }
.etapas { display: flex; flex-wrap: wrap; gap: 6px; }
.etapa { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 7px; }
.vista-previa { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
@media (max-width: 520px) { .vista-previa { grid-template-columns: 92px 1fr; } }
.miniatura { aspect-ratio: 1 / 1; max-width: 100%; border-radius: 9px; background: linear-gradient(150deg, var(--acento), #0f7b6c) center / cover no-repeat; display: grid; place-items: center; text-align: center; color: #fff; font-size: .72rem; font-weight: 700; padding: 6px; }
.miniatura.v916 { aspect-ratio: 9 / 16; } .miniatura.v169 { aspect-ratio: 16 / 9; align-self: start; }
.copy { background: var(--superficie2); border-radius: 9px; padding: 8px 10px; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.observaciones { display: flex; flex-direction: column; gap: 8px; }
.obs { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.obs .t { font-weight: 700; font-size: .92rem; }
.obs.critico { border-left: 4px solid var(--mal); } .obs.aviso { border-left: 4px solid var(--atencion); } .obs.sugerencia { border-left: 4px solid var(--info); }
.obs.hecha { opacity: .62; border-left: 4px solid var(--bien); } .obs.hecha-bien { border-left: 4px solid var(--bien); }
.caja-fix { display: flex; flex-direction: column; gap: 8px; background: var(--superficie2); border-radius: 9px; padding: 10px; }
.lista-chk { display: flex; flex-direction: column; gap: 8px; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 9px; border: 1px solid var(--linea); border-radius: 9px; font-size: .9rem; cursor: pointer; }
.chk input { margin-top: 4px; flex: 0 0 auto; }
.chk.apagado { opacity: .6; }
.rec { font-size: .74rem; font-weight: 700; color: var(--bien); }
.sug { border-radius: 9px; padding: 10px 12px; font-size: .88rem; background: var(--superficie2); }

/* ---------- tablas y gráficos */
.tabla, .desliza { overflow-x: auto; }
.tabla { border: 1px solid var(--linea); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
td.ajusta { white-space: normal; min-width: 220px; text-align: left; }
th { background: var(--superficie2); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 700; background: var(--superficie2); }
.grafico { width: 100%; min-width: 520px; display: block; }
.hb { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hbr { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 44px; gap: 8px; align-items: center; }
.hbt { height: 8px; background: var(--superficie2); border: 1px solid var(--linea); border-radius: 99px; overflow: hidden; }
.hbt i { display: block; height: 100%; background: var(--acento); }
.cmp-fila { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.cmp-fila:last-child { border-bottom: 0; }
.cmp-fila .v { font-weight: 700; font-variant-numeric: tabular-nums; } .cmp-fila .gana { color: var(--bien); }
.barra { height: 5px; border-radius: 99px; margin-top: 3px; max-width: 100%; }

/* ---------- asistente */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.msg { padding: 9px 12px; border-radius: 12px; font-size: .9rem; max-width: 88%; overflow-wrap: anywhere; }
.msg.u { align-self: flex-end; background: var(--acento); color: var(--acento-tinta); }
.msg.a { align-self: flex-start; background: var(--superficie2); border: 1px solid var(--linea); }
.asistente { display: flex; gap: 8px; }
.asistente input { flex: 1; min-width: 0; }
.mic { flex: 0 0 auto; width: 44px; border-radius: 9px; border: 1px solid var(--linea); background: var(--superficie); color: var(--acento); cursor: pointer; display: grid; place-items: center; }
.mic.escuchando { background: var(--mal); color: #fff; border-color: var(--mal); }

/* ---------- ventana y aviso */
.modal-fondo { position: fixed; inset: 0; background: rgba(8, 12, 22, .55); z-index: 60; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.modal { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; width: 100%; max-height: 88vh; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.modal-texto p { margin: 0 0 6px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--tinta); color: var(--fondo); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; z-index: 70; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.toast[data-tipo=error] { background: var(--mal); color: #fff; }

/* ---------- ingreso */
.ingreso { max-width: 380px; margin: 8vh auto 0; width: 100%; }
.ingreso .marca { margin-bottom: 6px; }
.texto { max-width: 62ch; margin: 0; }

/* Selector de periodo */
.periodo { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; padding: 10px 14px; }
.periodo label { display: flex; flex-direction: column; gap: 4px; }
.periodo select, .periodo input { min-width: 0; }
.periodo-rango { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.periodo > .small.muted { flex: 1 1 240px; }

/* Ingreso: ver contraseña y recuperar */
.campo-clave { position: relative; display: flex; }
.campo-clave input { flex: 1; padding-right: 92px; }
.campo-clave .ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--acento, #8ea2ff); font: inherit; font-size: 13px; cursor: pointer; padding: 6px 8px; }
.ingreso .enlace-pie { background: none; border: 0; color: var(--acento, #8ea2ff); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 4px 0; align-self: center; }
.txt-bien { color: var(--bien); }