/* CRM Sodaise · estilo Crea Studio (tema oscuro, sin compilación) */
:root {
    /* Paleta Crea Studio */
    --bg: #0A0B0F; --bg-2: #0F1015; --s1: #13151B; --s2: #191C24; --s3: #20242E;
    --line: #242833; --line-2: #2E3340;
    --tx: #ECEDF1; --tx-2: #B4B8C4; --mu: #7D8291;
    --ac: #FF6A3D; --ac-2: #FF8F6B; --ac-soft: rgba(255, 106, 61, .14);
    --vi: #8B7CFF; --vi-soft: rgba(139, 124, 255, .14);
    --f-ui: 'Inter', system-ui, sans-serif;
    --f-dp: 'Bricolage Grotesque', 'Inter', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Nombres que usan las vistas del CRM */
    --marca: var(--ac); --marca-txt: #fff; --marca-suave: var(--ac-soft);
    --color-marca: var(--ac);
    --fondo: var(--bg); --panel: var(--s1); --panel-2: var(--s2); --hover: var(--s2);
    --borde: var(--line); --borde-2: var(--line-2);
    --texto: var(--tx); --texto-2: var(--tx-2); --tenue: var(--mu); --tenue2: #5f6472;
    --lateral: var(--bg-2); --lateral-txt: var(--tx-2);
    --ok: #34D399; --error: #F87171; --aviso: #FBBF24;
    --ok-suave: rgba(52, 211, 153, .13); --error-suave: rgba(248, 113, 113, .13); --aviso-suave: rgba(251, 191, 36, .13); --info-suave: rgba(96, 165, 250, .13);
    --radio: 14px; --sombra: 0 10px 30px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--f-ui); color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
a { color: var(--ac-2); text-decoration: none; }
a:hover { text-decoration: none; color: var(--tx); }
h1 { font: 700 1.6rem/1.15 var(--f-dp); margin: 0; letter-spacing: -.03em; }
h2 { font: 650 1.02rem var(--f-dp); margin: 0; letter-spacing: -.01em; }
h3 { font: 650 .92rem var(--f-dp); margin: 0 0 .4rem; }
small, .tenue { color: var(--tenue); }
code, .mono { font-family: var(--f-mono); font-size: .82em; background: var(--s3); color: var(--tx); padding: .05rem .35rem; border-radius: 5px; }
::selection { background: var(--ac); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2e39; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Estructura ── */
.app { display: flex; min-height: 100vh; }
.lateral { width: 236px; flex: 0 0 236px; background: var(--bg-2); color: var(--lateral-txt); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 14px 12px; gap: 6px; }
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--tx); font: 700 17px var(--f-dp); letter-spacing: -.02em; }
.lateral .logo small { display: block; font: 500 10.5px var(--f-ui); color: var(--mu); letter-spacing: .08em; text-transform: uppercase; }
.isotipo { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 0; background: conic-gradient(from 210deg, var(--ac), #FFB86B, var(--vi), var(--ac)); box-shadow: 0 6px 18px -6px var(--ac); }
.isotipo::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); }
.selector-marca, .marca-chip { margin: 0 0 8px; }
.selector-marca { position: relative; }
.selector-marca::before { content: ''; position: absolute; left: 11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 7px; background: var(--color-marca); pointer-events: none; }
.selector-marca select { width: 100%; background: var(--s1); color: var(--tx); border: 1px solid var(--line); border-radius: 12px; padding: .62rem .7rem .62rem 2.6rem; font: 600 13.5px var(--f-ui); cursor: pointer; }
.selector-marca select:hover { border-color: var(--line-2); }
.marca-chip { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); color: var(--tx); font-weight: 600; font-size: 13.5px; }
.marca-chip .punto { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 10px; }
.menu { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.menu .titulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); padding: 12px 10px 4px; font-weight: 600; }
.menu a { display: flex; align-items: center; gap: 11px; color: var(--tx-2); padding: 8px 10px; border-radius: 10px; font-weight: 500; font-size: 13.5px; position: relative; transition: background .15s, color .15s; }
.menu a:hover { background: var(--s1); text-decoration: none; color: var(--tx); }
.menu a.activo { background: var(--s2); color: var(--tx); }
.menu a.activo::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac); }
.menu .ti { font-size: 1.15rem; opacity: .85; }
.menu .badge { margin-left: auto; }
.usuario { border-top: 1px solid var(--line); padding: 12px 6px 2px; display: flex; align-items: center; gap: .6rem; }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--ac), var(--vi)); color: #fff; display: grid; place-items: center; font: 700 .8rem var(--f-dp); flex: 0 0 34px; }
.usuario .nombre { color: var(--tx); font-weight: 600; font-size: .85rem; }
.usuario .rol { font-size: .72rem; color: var(--mu); }
.usuario form { margin-left: auto; }
.usuario button { background: none; border: 0; color: var(--mu); cursor: pointer; font-size: 1.1rem; border-radius: 8px; padding: 4px 6px; }
.usuario button:hover { background: var(--s2); color: var(--tx); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra { height: 58px; background: rgba(10, 11, 15, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .8rem; padding: 0 1.6rem; position: sticky; top: 0; z-index: 5; }
.barra .franja { width: 4px; height: 24px; border-radius: 3px; background: linear-gradient(180deg, var(--ac), var(--vi)); }
.barra .lugar { font: 650 15px var(--f-dp); letter-spacing: -.01em; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: .6rem; color: var(--mu); font-size: .82rem; }
.barra .derecha select { width: auto; }
.contenido { padding: 1.75rem 2rem 5.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }
.contenido.ancho { max-width: none; }
.encabezado { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.encabezado p { margin: .35rem 0 0; color: var(--mu); }
.encabezado .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.migas { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ac); font-weight: 700; margin-bottom: .4rem; }
.migas a { color: var(--ac); }

/* ── Componentes ── */
.tarjeta { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radio); margin-bottom: 1rem; }
.tarjeta > .cab { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; }
.tarjeta > .cab h2, .tarjeta > .cab h3 { margin: 0; }
.tarjeta > .cab .acciones { margin-left: auto; display: flex; gap: .4rem; }
.tarjeta > .cuerpo { padding: 18px; }
.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kpi { padding: 16px 18px; }
.kpi .etq { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); font-weight: 600; }
.kpi .valor { font: 700 1.9rem/1.1 var(--f-dp); letter-spacing: -.03em; margin-top: .3rem; }
.kpi .det { font-size: .78rem; color: var(--mu); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 38px; border: 1px solid var(--line-2); background: var(--s2); color: var(--tx); padding: 0 15px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: transform .08s, background .15s, border-color .15s; }
.btn:hover { background: var(--s3); border-color: #3a4050; text-decoration: none; color: var(--tx); }
.btn:active { transform: translateY(1px); }
.btn.primario, .btn-primary { background: linear-gradient(180deg, #FF7A50, #F25A2E); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px var(--ac), inset 0 1px 0 rgba(255,255,255,.2); }
.btn.primario:hover, .btn-primary:hover { background: linear-gradient(180deg, #FF8A63, #F96637); color: #fff; }
.btn.peligro { color: var(--error); border-color: rgba(248,113,113,.35); }
.btn.peligro:hover { background: var(--error-suave); }
.btn.chico { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.bloque { width: 100%; }

label.etq, .etq-campo { display: block; font-weight: 600; font-size: .8rem; margin-bottom: .3rem; color: var(--tx-2); }
.campo { margin-bottom: .9rem; }
.campo small { display: block; margin-top: .25rem; font-size: .74rem; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=search], input[type=tel], select, textarea {
    width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: .55rem .7rem; font: inherit; background: var(--bg-2); color: var(--tx);
}
input::placeholder, textarea::placeholder { color: var(--tenue2); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-soft); }
input[type=color] { width: 54px; height: 38px; border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; background: var(--bg-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--ac); }
select option { background: var(--s2); color: var(--tx); }
textarea { min-height: 80px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; cursor: pointer; margin-right: .9rem; color: var(--tx-2); }
.en-linea { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.en-linea > * { flex: 1; min-width: 140px; }
.en-linea > .btn, .en-linea > .fijo { flex: 0 0 auto; min-width: 0; }

table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); font-weight: 600; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: transparent; }
.tabla td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: rgba(255,255,255,.02); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-flex; align-items: center; gap: .3rem; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--s3); color: var(--tx-2); white-space: nowrap; }
.badge.rojo { background: var(--error-suave); color: #FCA5A5; }
.badge.verde { background: var(--ok-suave); color: #6EE7B7; }
.badge.ambar { background: var(--aviso-suave); color: #FCD34D; }
.badge.azul { background: var(--info-suave); color: #93C5FD; }
.badge.morado { background: var(--vi-soft); color: #B4A9FF; }
.badge.marca { background: var(--s2); color: var(--tx); border: 1px solid var(--line-2); }
.badge.marca::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-marca); }
.badge.contador { background: var(--ac); color: #fff; min-width: 20px; justify-content: center; height: 20px; padding: 0 6px; }

.alerta { padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; border: 1px solid; font-size: .86rem; }
.alerta.ok { background: var(--ok-suave); border-color: rgba(52,211,153,.3); color: #A7F3D0; }
.alerta.error { background: var(--error-suave); border-color: rgba(248,113,113,.3); color: #FECACA; }
.alerta.info { background: var(--info-suave); border-color: rgba(96,165,250,.3); color: #BFDBFE; }
.alerta.aviso { background: var(--aviso-suave); border-color: rgba(251,191,36,.3); color: #FDE68A; }
.secreto { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; }
.secreto input { font-family: var(--f-mono); font-size: .8rem; }
.vacio { text-align: center; color: var(--mu); padding: 2.4rem 1rem; }
.vacio .ti { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--tenue2); }
details > summary { cursor: pointer; font-weight: 600; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--mu); }
details[open] > summary::before { content: "▾ "; }
.separador { height: 1px; background: var(--line); margin: 1rem 0; }

/* ── Módulos del panel ── */
.modulo { display: flex; gap: .9rem; padding: 18px; border: 1px solid var(--line); border-radius: var(--radio); background: var(--s1); color: var(--tx); transition: border-color .15s, transform .15s, background .15s; }
.modulo:hover { border-color: var(--line-2); background: var(--s2); text-decoration: none; transform: translateY(-2px); color: var(--tx); }
.modulo .ico { width: 42px; height: 42px; border-radius: 11px; background: var(--ac-soft); color: var(--ac-2); display: grid; place-items: center; font-size: 1.35rem; flex: 0 0 42px; }
.modulo .t { font: 650 15px var(--f-dp); letter-spacing: -.01em; }
.modulo .d { font-size: .8rem; color: var(--mu); margin-top: .15rem; }
.modulo .e { font-size: .74rem; margin-top: .45rem; }

/* ── Bandeja de conversaciones ── */
.bandeja { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; height: calc(100vh - 58px); }
.bandeja .lista { border-right: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.bandeja .filtros { padding: .8rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .55rem; }
.pestanas { display: flex; flex-wrap: wrap; gap: .3rem; }
.pestanas a { font-size: 11.5px; height: 24px; display: inline-flex; align-items: center; padding: 0 .65rem; border-radius: 999px; background: var(--s2); color: var(--tx-2); font-weight: 600; border: 1px solid var(--line); }
.pestanas a:hover { color: var(--tx); border-color: var(--line-2); }
.pestanas a.activo { background: var(--ac-soft); color: var(--ac-2); border-color: rgba(255,106,61,.35); }
.items { overflow-y: auto; flex: 1; }
.item { display: flex; gap: .65rem; padding: .75rem .8rem; border-bottom: 1px solid var(--line); color: var(--tx); }
.item:hover { background: var(--s1); text-decoration: none; color: var(--tx); }
.item.activo { background: var(--s2); box-shadow: inset 3px 0 0 var(--ac); }
.item .ico-canal { width: 34px; height: 34px; border-radius: 10px; background: var(--s3); display: grid; place-items: center; font-size: 1.05rem; color: var(--tx-2); flex: 0 0 34px; }
.item .meta { min-width: 0; flex: 1; }
.item .fila1 { display: flex; gap: .4rem; align-items: center; }
.item .nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .hora { margin-left: auto; font-size: .72rem; color: var(--tenue2); white-space: nowrap; }
.item .fila2 { font-size: .76rem; color: var(--mu); display: flex; gap: .35rem; align-items: center; margin-top: .15rem; }
.chat { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.chat .cab { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.chat .cab .acciones { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.mensajes { flex: 1; overflow-y: auto; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.burbuja { max-width: 72%; padding: .55rem .8rem; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); word-wrap: break-word; }
.burbuja .texto { white-space: pre-wrap; }
.burbuja .quien { font-size: .7rem; font-weight: 700; color: var(--mu); margin-bottom: .1rem; }
.burbuja .pie { font-size: .66rem; color: var(--tenue2); margin-top: .2rem; text-align: right; }
.burbuja.entrante { align-self: flex-start; border-top-left-radius: 4px; }
.burbuja.saliente { align-self: flex-end; background: linear-gradient(180deg, #FF7A50, #F25A2E); color: #fff; border-color: transparent; border-top-right-radius: 4px; }
.burbuja.saliente .quien, .burbuja.saliente .pie { color: rgba(255,255,255,.75); }
.burbuja.saliente.bot { background: linear-gradient(180deg, #9A8CFF, #7A68F5); color: #fff; }
.burbuja.interno { align-self: center; max-width: 85%; background: var(--aviso-suave); border-color: rgba(251,191,36,.3); font-size: .8rem; color: #FDE68A; text-align: center; border-radius: 10px; }
.burbuja.interno.sistema { background: transparent; border: 0; color: var(--mu); font-size: .74rem; padding: .1rem; }
.burbuja.fallido { outline: 2px solid rgba(248,113,113,.6); }
.redactar { border-top: 1px solid var(--line); background: var(--bg-2); padding: .75rem; }
.redactar .modos { display: flex; gap: .3rem; margin-bottom: .5rem; }
.redactar .modos button { border: 1px solid var(--line); background: var(--s2); color: var(--tx-2); height: 26px; padding: 0 .7rem; border-radius: 7px; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; }
.redactar .modos button.activo { background: var(--ac-soft); color: var(--ac-2); border-color: rgba(255,106,61,.35); }
.redactar .modos button.nota.activo { background: var(--aviso-suave); color: #FCD34D; border-color: rgba(251,191,36,.35); }
.redactar form { display: flex; gap: .5rem; align-items: flex-end; }
.redactar textarea { min-height: 44px; max-height: 160px; }
.ficha-lateral { border-left: 1px solid var(--line); background: var(--bg-2); overflow-y: auto; padding: 1.1rem; }
.ficha-lateral .bloque { margin-bottom: 1.2rem; }
.ficha-lateral .dato { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; padding: .25rem 0; }
.ficha-lateral .dato span:first-child { color: var(--mu); }

/* ── Embudo (tablero) ── */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .9rem; overflow-x: auto; padding-bottom: .6rem; }
.columna { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radio); display: flex; flex-direction: column; min-height: 220px; }
.columna .cab { padding: .7rem .8rem; display: flex; align-items: center; gap: .45rem; font: 650 .86rem var(--f-dp); }
.columna .cab .suma { margin-left: auto; font: 600 .74rem var(--f-mono); color: var(--mu); }
.columna .tarjetas { padding: 0 .6rem .6rem; display: flex; flex-direction: column; gap: .5rem; }
.op { background: var(--s1); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; font-size: .82rem; }
.op:hover { border-color: var(--line-2); }
.op .t { font-weight: 600; }
.op form { margin-top: .4rem; }
.op select { padding: .25rem .4rem; font-size: .76rem; }

/* ── Cadena de agentes ── */
.cadena { display: flex; flex-direction: column; gap: .6rem; }
.eslabon { border: 1px solid var(--line); border-radius: var(--radio); background: var(--s1); }
.eslabon > summary { padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem; }
.eslabon > summary::before { content: none; }
.eslabon .orden { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--ac), var(--vi)); color: #fff; display: grid; place-items: center; font: 700 .82rem var(--f-dp); flex: 0 0 28px; }
.eslabon .cuerpo { padding: 0 1rem 1rem; }
.flecha-cadena { text-align: center; color: var(--tenue2); font-size: .8rem; }

/* ── Acceso ── */
.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.acceso .arte { position: relative; overflow: hidden; background: radial-gradient(800px 500px at 15% 10%, rgba(255,106,61,.22), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(139,124,255,.2), transparent 60%), var(--bg-2); border-right: 1px solid var(--line); color: var(--tx-2); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.acceso .arte h1 { font: 700 2.6rem/1.08 var(--f-dp); letter-spacing: -.035em; color: var(--tx); margin-top: 2rem; max-width: 560px; }
.acceso .arte .marcas { display: flex; gap: .6rem; flex-wrap: wrap; }
.acceso .arte .marcas > span { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); border-radius: 999px; padding: .32rem .85rem; font-size: .82rem; color: var(--tx); }
.acceso .formulario { display: grid; place-items: center; padding: 2rem; background: var(--bg); }
.acceso form { width: 100%; max-width: 360px; }

/* ── Paginación ── */
.paginacion { display: flex; gap: .3rem; justify-content: center; padding: .8rem; flex-wrap: wrap; }
.paginacion a, .paginacion span { padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--line); font-size: .8rem; color: var(--tx-2); background: var(--s1); }
.paginacion a:hover { border-color: var(--line-2); color: var(--tx); }
.paginacion .actual { background: var(--ac); color: #fff; border-color: var(--ac); }

/* ── Teléfono dentro de la app ── */
#tel { position: fixed; right: 18px; bottom: 18px; z-index: 50; }
.tel-boton { width: 52px; height: 52px; border-radius: 16px; border: 0; background: linear-gradient(180deg, #FF7A50, #F25A2E); color: #fff; font-size: 1.45rem; cursor: pointer; box-shadow: 0 10px 26px -8px var(--ac); position: relative; }
.tel-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #7D8291; flex: 0 0 10px; }
.tel-boton .tel-punto { position: absolute; right: 2px; top: 2px; border: 2px solid var(--bg); width: 13px; height: 13px; }
.tel-punto.disponible { background: #34D399; } .tel-punto.ocupado { background: #FBBF24; } .tel-punto.ausente { background: #7D8291; } .tel-punto.en-llamada { background: #F87171; }
.tel-panel { position: absolute; right: 0; bottom: 64px; width: 310px; max-height: 70vh; overflow-y: auto; background: var(--s2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--sombra); }
.tel-cab { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.tel-cab select { margin-left: auto; width: auto; padding: .25rem .4rem; font-size: .8rem; }
.tel-entrante, .tel-curso { padding: 1rem .9rem; text-align: center; }
.tel-entrante { background: var(--ac-soft); animation: tel-latido 1.2s ease-in-out infinite; }
@keyframes tel-latido { 50% { background: transparent; } }
.tel-quien { font: 700 1.05rem var(--f-dp); }
.tel-det { font-size: .8rem; color: var(--mu); margin: .2rem 0 .7rem; }
.tel-acc { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.tel-notas { margin-bottom: .6rem; min-height: 54px; font-size: .82rem; }
.tel-aviso { font-size: .74rem; color: var(--aviso); margin-top: .5rem; }
.tel-reposo { padding: .6rem .8rem .8rem; }
.tel-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); margin: .5rem 0 .35rem; font-weight: 600; }
.tel-persona { display: flex; align-items: center; gap: .45rem; padding: .25rem 0; font-size: .84rem; }
.tel-persona .btn { margin-left: auto; }
.tel-marcar { display: flex; gap: .4rem; }
@media (max-width: 760px) { #tel { bottom: 78px; right: 12px; } .tel-panel { width: calc(100vw - 24px); } }

/* ── Celular (app web) ── */
.solo-movil { display: none; }
@media (max-width: 1100px) {
    .bandeja { grid-template-columns: 300px minmax(0, 1fr); }
    .ficha-lateral { display: none; }
    .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .app { flex-direction: column; }
    .lateral { position: fixed; bottom: 0; top: auto; left: 0; right: 0; width: 100%; height: auto; flex-direction: row; z-index: 20; padding: 0; border-right: 0; border-top: 1px solid var(--line); background: rgba(15,16,21,.95); backdrop-filter: blur(10px); }
    .lateral .logo, .lateral .usuario, .lateral .selector-marca, .lateral .marca-chip, .menu .titulo, .menu li.escritorio { display: none; }
    .menu { display: flex; justify-content: space-around; padding: .3rem; overflow: visible; }
    .menu a { flex-direction: column; gap: .1rem; font-size: .64rem; padding: .35rem .4rem; }
    .menu a.activo::before { left: 25%; right: 25%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
    .menu .badge { position: absolute; margin: -4px 0 0 18px; }
    .principal { padding-bottom: 64px; }
    .barra { padding: 0 .8rem; }
    .solo-movil { display: block; }
    .contenido { padding: 1rem; }
    .r2, .r3, .r4 { grid-template-columns: minmax(0, 1fr); }
    .bandeja { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 58px - 64px); }
    .bandeja.con-chat .lista { display: none; }
    .bandeja:not(.con-chat) .chat { display: none; }
    .burbuja { max-width: 88%; }
    html, body { overflow-x: hidden; }
    .principal { width: 100%; overflow-x: hidden; }
    .escritorio-solo { display: none; }
    .chat .cab { padding: .6rem .7rem; }
    .chat .cab .acciones { width: 100%; margin-left: 0; }
    .chat .cab .acciones .btn { padding: 0 .5rem; }
    .mensajes { padding: .8rem; }
    .acceso { grid-template-columns: 1fr; }
    .acceso .arte { display: none; }
    .tabla-responsiva { overflow-x: auto; }
}

/* Logo en pantallas de acceso */
.logo-acceso { display: flex; align-items: center; gap: 10px; font: 700 18px var(--f-dp); letter-spacing: -.02em; color: var(--tx); }
.logo-acceso small { display: block; font: 500 10.5px var(--f-ui); color: var(--mu); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ac); font-weight: 700; margin-bottom: 6px; }

/* ── Gráficas de Inicio ── */
:root { --serie-1: #F25A2E; --serie-2: #3987e5; }
.grafica { position: relative; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica .reja { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.grafica .eje { stroke: var(--line-2); stroke-width: 1; }
.grafica .marca { fill: var(--mu); font: 500 11px var(--f-ui); }
.grafica .nombre { fill: var(--tx-2); font: 500 12px var(--f-ui); }
.grafica .valor { fill: var(--tx); font: 600 12px var(--f-mono); }
.grafica .zona { fill: transparent; cursor: default; }
.grafica .zona.activa { fill: rgba(255,255,255,.035); }
.grafica-globo { position: absolute; z-index: 5; pointer-events: none; background: var(--s3); border: 1px solid var(--line-2); border-radius: 10px; padding: .45rem .65rem; font-size: .78rem; color: var(--tx); box-shadow: var(--sombra); white-space: nowrap; }
.grafica-globo strong { display: block; font: 650 .8rem var(--f-dp); margin-bottom: .15rem; }
.grafica-globo i, .grafica-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; vertical-align: 0; }
.grafica-globo b { font-family: var(--f-mono); }
.grafica-leyenda { display: flex; gap: 1rem; font-size: .78rem; color: var(--tx-2); margin-bottom: .5rem; }
.grafica-tabla { margin-top: .6rem; font-size: .8rem; }
.grafica-tabla summary { font-weight: 600; color: var(--mu); font-size: .76rem; }
.grafica-tabla .tabla td, .grafica-tabla .tabla th { padding: .35rem .6rem; }
.seccion-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mu); font-weight: 600; margin: 1.4rem 0 .6rem; }