/* ==========================================================
   Datsool — Consola de Mi cuenta y apps tipo CRM
   Se carga después de neural.css en las páginas PHP.
   Paleta CX Neural: marino #172A35, marfil #F2F0E9, turquesa #55B8A5,
   azul #2C6AA0, coral #D99A78, azul datos #A6B8C7.
   ========================================================== */
.consola-cuenta, .buzon-publico {
  --c-marino: #172A35; --c-marino-2: #1F3744; --c-marfil: #F2F0E9; --c-turquesa: #55B8A5; --c-turquesa-texto: #2A7466;
  --c-azul: #2C6AA0; --c-coral: #D99A78; --c-datos: #A6B8C7; --c-borde: #E0DED6; --c-fondo: #F5F4EF;
  --c-lateral: 248px; --c-lateral-fondo: #FBFAF6;
  background: var(--c-fondo);
}
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura: menú lateral + área de trabajo ---------- */
.consola { display: grid; grid-template-columns: var(--c-lateral) minmax(0, 1fr); min-height: calc(100vh - 72px); background: linear-gradient(90deg, var(--c-lateral-fondo) var(--c-lateral), transparent 0); }
/* Menú lateral claro: papel un tono más claro que el área de trabajo, con línea fina */
.consola-lateral {
  position: sticky; top: 72px; align-self: start; height: calc(100vh - 72px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem .9rem;
  background: var(--c-lateral-fondo); color: var(--tinta); border-right: 1px solid var(--c-borde);
}
.cl-cuenta { display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem 1rem; border-bottom: 1px solid var(--c-borde); }
.cl-cuenta strong { display: block; color: var(--c-marino); font: 700 .95rem/1.2 var(--display); }
.cl-cuenta small { font: .7rem var(--mono); letter-spacing: .04em; color: var(--gris); }
.cl-avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; background: rgba(85,184,165,.18); color: var(--c-turquesa-texto); font: 800 .9rem var(--display); }
.cl-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.cl-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: 9px; color: #3C4E58; text-decoration: none; font-size: .95rem; font-weight: 600; }
.cl-item small { display: block; font-size: .74rem; font-weight: 400; line-height: 1.3; color: var(--gris); margin-top: .05rem; }
.cl-item .ico { color: #7A8B93; }
.cl-item:hover { background: rgba(23,42,53,.045); color: var(--c-marino); }
.cl-item[aria-current="page"] { background: #fff; color: var(--c-marino); box-shadow: 0 1px 2px rgba(23,42,53,.06), inset 3px 0 0 var(--c-turquesa); }
.cl-item[aria-current="page"] .ico { color: var(--c-turquesa-texto); }
.cl-ayuda { margin-top: auto; display: flex; gap: .7rem; align-items: flex-start; padding: .9rem; border-radius: 10px; background: rgba(85,184,165,.09); border: 1px solid rgba(85,184,165,.25); color: var(--tinta); text-decoration: none; font-size: .85rem; }
.cl-ayuda strong { display: block; color: var(--c-marino); }
.cl-ayuda small { color: var(--gris); }
.cl-ayuda .ico { color: var(--c-turquesa-texto); }
.cl-ayuda:hover { background: rgba(85,184,165,.15); color: var(--tinta); }
/* Pestañas de la Wiki */
.wiki-pestanas { display: flex; gap: .3rem; border-bottom: 1px solid var(--c-borde); overflow-x: auto; scrollbar-width: none; }
.wiki-pestanas::-webkit-scrollbar { display: none; }
.wiki-pestanas a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; margin-bottom: -1px; color: var(--gris); text-decoration: none; font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; white-space: nowrap; flex: none; }
.wiki-pestanas a:hover { color: var(--c-marino); }
.wiki-pestanas a[aria-current="page"] { color: var(--c-marino); border-bottom-color: var(--c-turquesa); }
.wiki-pestanas .ico { width: 16px; height: 16px; }
.consola-trabajo { padding: clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.6rem) 3rem; display: grid; gap: 1.2rem; align-content: start; min-width: 0; }
.consola-trabajo > .aviso { margin: 0; }
.consola-etiqueta { margin: 0; font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.consola-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.pie-consola { padding: 1rem 0; }
.pie-consola .legal { margin: 0; border: 0; padding: 0; }

/* Paneles */
.panel { background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; padding: 1.2rem 1.3rem; min-width: 0; }
.panel h2 { font: 700 1.05rem/1.3 var(--display); margin: 0; letter-spacing: -.01em; }
.panel-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.panel-cabeza a { font-size: .88rem; }
.panel > .tenue { margin: 0 0 .8rem; }
.consola-cuenta .siguiente-paso { margin: 1rem 0 0; border-radius: 10px; padding: 1rem 1.2rem; }
.btn-chico { padding: .5rem .95rem; font-size: .88rem; gap: .45rem; }
.claro .btn-chico.btn-verde::after { display: none; }

/* ---------- Inicio ---------- */
.bienvenida { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 14px; background: var(--c-marino); color: var(--c-marfil); }
.bienvenida h1 { color: var(--c-marfil); font-size: clamp(2rem, 4vw, 2.8rem); margin: .4rem 0 .8rem; }
.bienvenida .consola-etiqueta { color: #9FB0B8; }
.frase-dia { margin: 0; padding-left: 1rem; border-left: 3px solid var(--c-turquesa); font-size: 1.08rem; line-height: 1.5; color: #D5DEE2; max-width: 52ch; }
.bienvenida-arte { aspect-ratio: 4 / 3; margin: 0; opacity: .95; background: none; }
.indicadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.indicador { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; color: var(--tinta); text-decoration: none; }
a.indicador:hover { border-color: var(--c-turquesa); color: var(--tinta); }
.indicador span { font: 500 .7rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.indicador strong { font: 800 1.8rem/1.1 var(--display); }
.indicador small { color: var(--gris); font-size: .82rem; }
.journey-consola { margin: 0; gap: .6rem; }
.journey-consola .journey-etapa { border-radius: 10px; padding: .85rem .8rem; }
.journey-consola .journey-etapa strong { font-size: .98rem; }
.journey-consola .journey-desc { font-size: .8rem; }
.journey-consola .journey-num { width: 28px; height: 28px; font-size: .8rem; }
.cc-mini { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.cc-mini-total { font: 800 2.6rem/1 var(--display); color: var(--tinta); margin-right: .4rem; }
.cc-mini small { color: var(--gris); font-size: .85rem; }
.barras-areas { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.barras-areas li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2.2rem; gap: .7rem; align-items: center; font-size: .88rem; }
.barras-areas b { text-align: right; font-variant-numeric: tabular-nums; }
.barras-areas .es-prioridad .barra-motivo i { background: var(--c-coral); }
.lista-paginas { list-style: none; margin: 0; padding: 0; }
.lista-paginas li + li { border-top: 1px solid #EEEDE7; }
.lista-paginas a { display: flex; align-items: center; gap: .8rem; padding: .7rem .2rem; color: var(--tinta); text-decoration: none; }
.lista-paginas a:hover { background: #FAF9F5; }
.lista-paginas a > .ico { color: var(--c-turquesa-texto); }
.lista-paginas strong { display: block; font-weight: 600; }
.lista-paginas small { display: block; color: var(--gris); font-size: .84rem; }
.lista-paginas a > span:nth-child(2) { flex: 1; min-width: 0; }
.fila-meta { flex: none; font: .7rem var(--mono); color: var(--gris); letter-spacing: .03em; text-align: right; max-width: 15rem; }
.lista-paginas strong { font-size: .97rem; }
/* En columnas angostas la fecha de revisión baja debajo del título */
.consola-rejilla .lista-paginas a { flex-wrap: wrap; align-items: flex-start; }
.consola-rejilla .lista-paginas a > span:nth-child(2) { flex: 1 1 calc(100% - 2.4rem); }
.consola-rejilla .fila-meta { flex-basis: 100%; max-width: none; text-align: left; padding-left: 2.1rem; margin-top: -.3rem; }

/* ---------- Lanzador de apps ---------- */
.lanzador { display: grid; gap: .8rem; }
.lanzador-grande { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.cxms-pronto { margin: 0; font-size: .9rem; }
.app-mosaico { position: relative; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--c-borde); border-radius: 12px; background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.app-mosaico:hover { border-color: var(--c-turquesa); box-shadow: 0 8px 24px -16px rgba(23,42,53,.4); color: var(--tinta); transform: translateY(-1px); }
.app-mosaico-texto { flex: 1; min-width: 0; }
.app-mosaico strong { display: block; font: 700 1rem var(--display); }
.app-mosaico-texto span { display: block; color: var(--gris); font-size: .84rem; line-height: 1.4; }
.app-dato { flex: none; font: .7rem var(--mono); color: var(--c-turquesa-texto); letter-spacing: .03em; }
.lanzador-grande .app-mosaico { flex-direction: column; align-items: flex-start; padding: 1.4rem; min-height: 210px; }
.lanzador-grande .app-icono { width: 52px; height: 52px; border-radius: 14px; }
.lanzador-grande .app-icono .ico { width: 26px; height: 26px; }
.lanzador-grande .app-mosaico strong { font-size: 1.2rem; }
.lanzador-grande .app-dato { margin-top: auto; }
.app-icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--c-marino); color: var(--c-turquesa); }
.chip-reco, .chip-plus { flex: none; font: 500 .62rem var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; color: var(--c-turquesa-texto); background: rgba(85,184,165,.14); }
.chip-plus { color: var(--c-marfil); background: var(--c-marino); }
.lanzador-grande .chip-reco { position: absolute; top: 1.2rem; right: 1.2rem; }

/* ---------- Barra de app ---------- */
.app-barra { display: grid; gap: .5rem; }
.app-migas { margin: 0; font-size: .82rem; color: var(--gris); }
.app-migas a { color: var(--gris); }
.app-migas a:hover { color: var(--tinta); }
.app-barra-fila { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.app-barra .app-icono { width: 48px; height: 48px; border-radius: 12px; }
.app-barra .app-icono .ico { width: 24px; height: 24px; }
.app-titulo { flex: 1; min-width: 14rem; }
.app-titulo h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; letter-spacing: -.02em; }
.app-titulo p { margin: .15rem 0 0; color: var(--gris); font-size: .92rem; }
.app-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; overflow: hidden; }
.app-stats > div { padding: .85rem 1.1rem; border-left: 1px solid #EEEDE7; display: flex; flex-direction: column; gap: .15rem; }
.app-stats > div:first-child { border-left: 0; }
.app-stats span { font: 500 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.app-stats strong { font: 800 1.45rem/1.1 var(--display); color: var(--tinta); }
.app-stats .stat-alerta strong { color: #A0532F; }
.app-cuerpo { display: grid; gap: 1.2rem; }
.app-cuerpo.con-lateral { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.app-lateral h2 { margin-bottom: .2rem; }
.app-herramientas { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pestanas { display: flex; gap: .2rem; flex-wrap: wrap; border-bottom: 1px solid var(--c-borde); }
.pestanas a { display: inline-flex; gap: .4rem; align-items: center; padding: .55rem .8rem; color: var(--gris); text-decoration: none; font-size: .9rem; font-weight: 500; box-shadow: inset 0 -2px 0 transparent; }
.pestanas a b { font: 500 .7rem var(--mono); padding: .05rem .4rem; border-radius: 999px; background: #EFEEE8; color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); }
.buscador-app { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--c-borde); border-radius: 8px; background: #FAF9F5; color: var(--gris); }
.buscador-app input { border: 0; background: none; font: inherit; font-size: .9rem; color: var(--tinta); outline: none; width: 12rem; }
.sugerencia-app { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 12px; background: rgba(85,184,165,.1); border: 1px solid rgba(85,184,165,.35); }
.sugerencia-app p { margin: 0; flex: 1; }
.sugerencia-app .app-icono { width: 34px; height: 34px; border-radius: 9px; }
.vacio-app { text-align: center; padding: 2.5rem 1rem; display: grid; justify-items: center; gap: .6rem; }
.vacio-app h2 { font-size: 1.3rem; }
.vacio-app p { margin: 0; }

/* Tabla tipo CRM */
.tabla-app { margin: 0; }
.tabla-app th { font: 500 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); background: #FAF9F5; padding: .6rem .6rem; }
.tabla-app td { vertical-align: middle; font-size: .9rem; padding: .7rem .6rem; }
.tabla-app th:last-child, .tabla-app td:last-child { text-align: left; }
.tabla-app .celda-texto { min-width: 220px; }
.tabla-app td:first-child { white-space: nowrap; }
.fila-enlace { cursor: pointer; }
.fila-enlace:hover td { background: #FAF9F5; }
.fila-actual td { background: rgba(85,184,165,.08); }
.tipo { font-size: .84rem; white-space: nowrap; }
.tabla-app .c-comp { white-space: nowrap; }
.tipo-motivo { display: none; color: var(--gris); font-size: .8rem; padding-left: 1.05rem; }
/* Con poco ancho, el motivo pasa debajo del tipo para que quepa toda la tabla */
@media (max-width: 1560px) and (min-width: 701px) {
  #tabla-bitacora th:nth-child(3), #tabla-bitacora .c-motivo { display: none; }
  .tipo-motivo { display: block; }
}
.tabla-app .c-comp small { display: block; font: 500 .66rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.tipo-queja::before, .tipo-sugerencia::before, .tipo-felicitacion::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.tipo-queja::before { background: var(--c-coral); } .tipo-sugerencia::before { background: var(--c-azul); } .tipo-felicitacion::before { background: var(--c-turquesa); }
.persona { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; }
.persona i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: normal 700 .62rem var(--display); background: #E7ECEE; color: var(--tinta); }
.celda-tarde { color: #A0532F !important; font-weight: 600; }
.estado { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font: 500 .7rem var(--mono); letter-spacing: .03em; white-space: nowrap; border: 1px solid var(--c-borde); color: var(--tinta); background: #fff; }
.estado-abierta, .estado-pendiente { background: rgba(217,154,120,.16); border-color: rgba(217,154,120,.5); color: #8A4B2C; }
.estado-proceso, .estado-curso { background: rgba(44,106,160,.1); border-color: rgba(44,106,160,.35); color: #2C6AA0; }
.estado-cerrada, .estado-hecha { background: rgba(85,184,165,.14); border-color: rgba(85,184,165,.45); color: #2A7466; }
.barras-motivos { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .55rem; }
.barras-motivos li { display: grid; grid-template-columns: 7.5rem 1fr 1.6rem; gap: .6rem; align-items: center; font-size: .88rem; }
.barras-motivos b { text-align: right; font-variant-numeric: tabular-nums; }
.barra-motivo, .avance { height: 8px; border-radius: 99px; background: rgba(23,42,53,.07); overflow: hidden; }
.barra-motivo i, .avance i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #55B8A5, #2C6AA0); }
.solo-movil { display: none; }

/* ---------- Panel lateral (crear / editar) ---------- */
.panel-lateral { position: fixed; inset: 0; z-index: 90; }
.panel-lateral[hidden] { display: none; }
.panel-fondo { position: absolute; inset: 0; background: rgba(23,42,53,.38); opacity: 0; transition: opacity .2s; }
.panel-caja { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(23,42,53,.45); transform: translateX(100%); transition: transform .22s ease; }
.panel-lateral.abierto .panel-fondo { opacity: 1; }
.panel-lateral.abierto .panel-caja { transform: none; }
.panel-lateral-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--c-borde); }
.panel-lateral-cabeza h2 { margin: .2rem 0 0; font-size: 1.25rem; }
.panel-cerrar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--tinta); }
.panel-cerrar:hover { background: #F2F1EC; color: var(--tinta); }
.panel-caja > form, .panel-caja > .aviso { margin: 0; padding: 1.2rem 1.4rem; overflow-y: auto; flex: 1; }
.panel-caja > .aviso { flex: none; margin: 1rem 1.4rem 0; padding: .8rem 1rem; }
.panel-lateral-pie { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; padding: .9rem 1.4rem; border-top: 1px solid var(--c-borde); background: #FAF9F5; }
.panel-lateral-pie form { margin-right: auto; }
.btn-peligro { color: #A0532F !important; }
body.con-panel { overflow: hidden; }
.formulario-ancho { max-width: none; gap: 1rem; }
.campos-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.campos-fila.campos-2 { grid-template-columns: 1fr 1fr; }
.campo .textarea-corta { min-height: 84px; }
.panel-caja .campo textarea { min-height: 110px; }
.campo input[type=range] { padding: 0; accent-color: var(--c-turquesa); border: 0; background: none; box-shadow: none; }
.campo legend { font-weight: 600; margin-bottom: .45rem; padding: 0; }
.opciones-chip { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones-chip label { cursor: pointer; position: relative; }
.opciones-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; }
.opciones-chip span { display: inline-block; padding: .4rem .95rem; border: 1.5px solid var(--c-borde); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9rem; }
.opciones-chip input:checked + span { background: var(--c-marino); border-color: var(--c-marino); color: var(--c-marfil); }
.opciones-chip input:focus-visible + span { outline: 2px solid var(--c-turquesa-texto); outline-offset: 2px; }

/* ---------- Tablero del plan ---------- */
.tablero { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .4rem; }
.tablero-columna { background: #EEEDE6; border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; min-height: 280px; transition: background .15s; }
.tablero-columna.sobre { background: rgba(85,184,165,.18); }
.tablero-columna > header { display: flex; justify-content: space-between; align-items: center; padding: .1rem .3rem; }
.tablero-columna h2 { font: 600 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0; color: var(--tinta); }
.tablero-columna h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; background: var(--c-datos); }
.col-curso h2::before { background: var(--c-azul); } .col-hecha h2::before { background: var(--c-turquesa); } .col-pendiente h2::before { background: var(--c-coral); }
.tablero-columna header b { font: 500 .72rem var(--mono); color: var(--gris); }
.tablero-lista { display: grid; gap: .6rem; align-content: start; flex: 1; }
.tarjeta-mejora { background: #fff; border: 1px solid var(--c-borde); border-radius: 10px; padding: .85rem .9rem; display: grid; gap: .5rem; cursor: grab; }
.tarjeta-mejora:hover { border-color: var(--c-turquesa); }
.tarjeta-mejora.arrastrando { opacity: .45; }
.tarjeta-mejora h3 { font: 600 .95rem/1.35 var(--display); margin: 0; }
.tarjeta-mejora h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta-mejora h3 a:hover { text-decoration: underline; }
.tarjeta-area { justify-self: start; font: 500 .62rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--c-turquesa-texto); }
.tarjeta-indicador { margin: 0; font-size: .82rem; color: var(--gris); }
.tarjeta-mejora footer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .78rem; color: var(--gris); }
.tarjeta-pct { margin-left: auto; font: 500 .72rem var(--mono); color: var(--tinta); }
.avance-rapido { display: flex; gap: .8rem; border-top: 1px dashed var(--c-borde); padding-top: .45rem; }
.avance-rapido .btn-texto { font-size: .8rem; padding: 0; }
.tablero-agregar { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem; border: 1.5px dashed #CFCDC4; border-radius: 10px; color: var(--gris); text-decoration: none; font-size: .88rem; }
.tablero-agregar:hover { border-color: var(--c-turquesa); color: var(--tinta); }

/* ---------- Plantillas ---------- */
.plantillas-datos { background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; padding: .8rem 1rem; justify-content: flex-start; margin: 0; }
.plantillas-datos .ayuda { margin: 0; flex-basis: 100%; }
.campo-linea { display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 600; }
.campo-linea input { font: inherit; font-weight: 400; padding: .45rem .7rem; border: 1px solid var(--c-borde); border-radius: 8px; background: #FAF9F5; min-width: 12rem; color: var(--tinta); }
.campo-linea input:focus { outline: none; border-color: var(--c-turquesa-texto); }
.dos-paneles { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.lista-plantillas { padding: .6rem; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.grupo-lista h2 { font: 600 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: .8rem .6rem .35rem; display: flex; gap: .5rem; align-items: center; }
.grupo-lista ul { list-style: none; margin: 0; padding: 0; }
.grupo-lista a { display: flex; align-items: center; gap: .55rem; padding: .48rem .6rem; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: .9rem; }
.grupo-lista a .ico { width: 16px; height: 16px; color: var(--gris); }
.grupo-lista a:hover { background: #F5F4EF; }
.grupo-lista a[aria-current="true"] { background: rgba(85,184,165,.14); font-weight: 600; }
.grupo-lista a[aria-current="true"] .ico { color: var(--c-turquesa-texto); }
.plantilla { display: grid; gap: 1rem; padding: 1.4rem 1.5rem; }
.plantilla-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.plantilla-cabeza h2 { font-size: 1.35rem; margin: .2rem 0; }
.plantilla-cabeza .tenue { margin: 0; }
.plantilla-texto { margin: 0; padding: 1.1rem 1.2rem; background: #F7F6F1; border: 1px solid var(--c-borde); border-radius: 10px; font: .98rem/1.6 var(--cuerpo); color: var(--tinta); white-space: pre-wrap; word-break: break-word; }
.claro .btn-copiar.copiado { background: var(--c-turquesa); border-color: var(--c-turquesa); color: var(--c-marino); }
.plantilla-guia { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--gris); }

/* ---------- Base de conocimiento (wiki) ---------- */
.wiki { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.wiki-arbol { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; font-size: .9rem; padding-right: .4rem; border-right: 1px solid var(--c-borde); }
.wiki-arbol-inicio { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem; margin-bottom: .4rem; border-radius: 8px; color: var(--tinta); font-weight: 700; text-decoration: none; }
.wiki-arbol-inicio.activo, .wiki-arbol-inicio:hover { background: rgba(85,184,165,.12); color: var(--tinta); }
.wiki-espacio summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 8px; font-weight: 600; }
.wiki-espacio summary::-webkit-details-marker { display: none; }
.wiki-espacio summary:hover { background: #EFEEE8; }
.wiki-espacio summary span:nth-child(2) { flex: 1; }
.wiki-espacio summary b { font: 500 .68rem var(--mono); color: var(--gris); }
.wiki-espacio ul { list-style: none; margin: .1rem 0 .5rem 1.15rem; padding-left: .7rem; border-left: 1px solid var(--c-borde); }
.wiki-espacio li a { display: block; padding: .32rem .5rem; border-radius: 6px; color: #3E525C; text-decoration: none; line-height: 1.35; }
.wiki-espacio li a:hover { background: #EFEEE8; color: var(--tinta); }
.wiki-espacio li a[aria-current="page"] { background: rgba(85,184,165,.16); color: var(--tinta); font-weight: 600; }
.espacio-marca { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; font: 800 .7rem var(--display); color: #fff; }
.espacio-marca.grande { width: 52px; height: 52px; border-radius: 12px; font-size: 1.3rem; }
.m-teal { background: var(--c-turquesa); color: var(--c-marino); } .m-azul { background: var(--c-azul); } .m-coral { background: var(--c-coral); color: var(--c-marino); }
.m-datos { background: var(--c-datos); color: var(--c-marino); } .m-marino { background: var(--c-marino); } .m-arena { background: #CDBFA4; color: var(--c-marino); }
.wiki-contenido { min-width: 0; display: grid; gap: 1.2rem; align-content: start; }
.wiki-portada h1 { margin: 0 0 .3rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.wiki-portada .tenue { margin: 0 0 1rem; }
.buscador-wiki { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border: 1.5px solid var(--c-borde); border-radius: 10px; background: #fff; color: var(--gris); }
.buscador-wiki:focus-within { border-color: var(--c-turquesa-texto); box-shadow: 0 0 0 3px rgba(42,116,102,.12); }
.buscador-wiki input { flex: 1; border: 0; outline: none; font: inherit; font-size: 1.02rem; color: var(--tinta); background: none; }
.wiki-titulo { font: 600 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: .4rem 0 .7rem; }
.espacios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
.espacio { display: grid; gap: .35rem; align-content: start; padding: 1.1rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; color: var(--tinta); text-decoration: none; }
.espacio:hover { border-color: var(--c-turquesa); color: var(--tinta); }
.espacio .espacio-marca { width: 34px; height: 34px; border-radius: 9px; font-size: .95rem; margin-bottom: .2rem; }
.espacio strong { font: 700 1rem var(--display); }
.espacio > span:not(.espacio-marca) { color: var(--gris); font-size: .85rem; line-height: 1.4; }
.espacio small { font: .7rem var(--mono); color: var(--gris); letter-spacing: .03em; margin-top: .2rem; }
.espacio small b { color: var(--c-turquesa-texto); font-weight: 500; }
.espacio-cabeza { display: flex; gap: 1rem; align-items: center; }
.espacio-cabeza h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.espacio-cabeza .tenue { margin: .2rem 0 0; }
.wiki-pagina { background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; padding: clamp(1.3rem, 3vw, 2.4rem); display: grid; gap: 1rem; }
.wiki-pagina h1 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.02em; }
.wiki-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font: .74rem var(--mono); color: var(--gris); letter-spacing: .02em; padding-bottom: 1rem; border-bottom: 1px solid #EEEDE7; }
.sello-revision { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(85,184,165,.13); color: var(--c-turquesa-texto); }
.sello-revision .ico { width: 14px; height: 14px; }
.sello-revision.por-revisar { background: rgba(217,154,120,.16); color: #8A4B2C; }
.wiki-resumen { margin: 0; font-size: 1.1rem; color: #3E525C; }
.wiki-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 2rem; align-items: start; }
.wiki-cuerpo .prosa { max-width: 70ch; }
.wiki-indice { position: sticky; top: 100px; font-size: .86rem; }
.wiki-ayuda { margin: 0; font-size: .92rem; color: var(--gris); }

/* ---------- Mis datos dentro de la consola ---------- */
.consola-cuenta .portal-datos { margin: 0; }
.consola-cuenta .portal-tarjeta { border-radius: 12px; }

/* ---------- Avisos y piezas del panel de administración ---------- */
.aviso-alerta { background: rgba(217,154,120,.16); color: #8A4B2C; border: 1px solid rgba(217,154,120,.45); }
.kpis-4 { grid-template-columns: repeat(4, 1fr); }
.revision-editor { margin: .5rem 0; padding: 1.2rem 1.4rem; display: grid; gap: .8rem; }
.revision-editor legend { padding: 0 .4rem; }

/* ---------- Pantallas medianas y celular ---------- */
@media (max-width: 1200px) {
  .app-cuerpo.con-lateral { grid-template-columns: 1fr; }
  .wiki-cuerpo { grid-template-columns: 1fr; }
  .wiki-indice { display: none; }
  .lanzador-grande, .espacios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .kpis-4 { grid-template-columns: repeat(2, 1fr); }
  .consola { grid-template-columns: 1fr; background: none; }
  /* El menú lateral se vuelve una barra que se desliza de lado */
  .consola-lateral { position: sticky; top: 62px; z-index: 40; height: auto; flex-direction: row; align-items: center; padding: .5rem .8rem; gap: .5rem; overflow-x: auto; }
  .cl-cuenta, .cl-ayuda { display: none; }
  .consola-lateral nav { flex: 1; }
  .cl-menu { display: flex; gap: .2rem; }
  .cl-menu > li { flex: none; }
  .consola-lateral { border-right: 0; border-bottom: 1px solid var(--c-borde); }
  .cl-menu { justify-content: space-between; }
  .cl-item { padding: .5rem .7rem; white-space: nowrap; font-size: .86rem; }
  .cl-item small { display: none; }
  .cl-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-turquesa); }
  .consola-rejilla, .dos-paneles, .wiki { grid-template-columns: 1fr; }
  .lista-plantillas, .wiki-arbol { position: static; max-height: none; }
  .wiki-arbol { border-right: 0; border-bottom: 1px solid var(--c-borde); padding-bottom: .6rem; }
  .indicadores { grid-template-columns: repeat(2, 1fr); }
  .journey-consola { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  .bienvenida { grid-template-columns: 1fr; }
  .bienvenida-arte { display: none; }
  .tablero { grid-template-columns: repeat(4, minmax(250px, 80vw)); }
}
@media (max-width: 700px) {
  .sugerencia-app { flex-wrap: wrap; }
  .sugerencia-app p { flex-basis: calc(100% - 3.2rem); }

  .lanzador-grande, .espacios { grid-template-columns: 1fr; }
  .lanzador-grande .app-mosaico { min-height: 0; }
  .campos-fila, .campos-fila.campos-2 { grid-template-columns: 1fr; }
  .fila-meta { display: none; }
  .buscador-app { width: 100%; }
  .buscador-app input { width: 100%; }
  .barras-areas li { grid-template-columns: minmax(0, 8rem) 1fr 2rem; }
  /* Bitácora: cada registro es una tarjeta en vez de una fila ancha */
  .tabla-app thead { display: none; }
  .tabla-app, .tabla-app tbody { display: block; }
  .tabla-app tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "fecha estado" "texto texto"; gap: .3rem .8rem; padding: .9rem .2rem; border-bottom: 1px solid var(--c-borde); }
  .tabla-app td { border: 0; padding: 0; text-align: left !important; }
  .tabla-app .c-fecha { grid-area: fecha; }
  .tabla-app .c-estado { grid-area: estado; }
  .tabla-app .c-texto { grid-area: texto; min-width: 0; }
  .tabla-app .c-tipo, .tabla-app .c-motivo, .tabla-app .c-resp, .tabla-app .c-comp { display: none; }
  .tabla-app .solo-movil { display: block; margin-top: .25rem; font-size: .84rem; color: var(--gris); }
  .panel-lateral-pie { flex-wrap: wrap; }
}

/* ---------- Micelio en la consola ---------- */
/* El menú es un hilo: una hifa vertical une los íconos y el activo late */
.cl-menu { position: relative; }
.cl-menu::before { content: ""; position: absolute; left: calc(.75rem + 8px); top: 1.3rem; bottom: 1.3rem; width: 1.5px; background: linear-gradient(180deg, rgba(85,184,165,.15), rgba(85,184,165,.55) 50%, rgba(85,184,165,.15)); border-radius: 2px; }
.cl-item .ico { position: relative; z-index: 1; border-radius: 50%; background: var(--c-lateral-fondo); box-shadow: 0 0 0 4px var(--c-lateral-fondo); }
.cl-item:hover .ico { background: #F3F2EC; box-shadow: 0 0 0 4px #F3F2EC; }
.cl-item[aria-current="page"] .ico { background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(85,184,165,.28); }
.micelio-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.micelio-svg .hifa { fill: none; stroke: rgba(85,184,165,.45); stroke-width: 1.2; stroke-linecap: round; }
.micelio-svg .hifa-fina { fill: none; stroke: rgba(85,184,165,.28); stroke-width: .8; stroke-linecap: round; }
.micelio-svg .espora { fill: #55B8A5; opacity: .55; }
.micelio-svg .espora-coral { fill: #D99A78; opacity: .7; }
.micelio-svg .pulso { fill: #55B8A5; filter: drop-shadow(0 0 4px rgba(85,184,165,.9)); }
.consola-lateral { position: sticky; }
.cl-micelio { position: relative; flex: 1; min-height: 90px; margin: 0 -.9rem; }

/* ---------- CXM (estilo mesa de ayuda) ---------- */
.cxms { position: relative; display: grid; gap: 1.6rem; }
.cxms > .micelio-svg { z-index: 0; }
.cxms-apps, .cxms-mesa { position: relative; z-index: 1; }
.cxms-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.cxms-app { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; color: var(--tinta); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.cxms-app:hover { border-color: rgba(85,184,165,.6); box-shadow: 0 6px 18px rgba(23,42,53,.07); transform: translateY(-1px); }
.cxms-app > span:nth-child(2) { flex: 1 1 calc(100% - 42px - .8rem); min-width: 0; }
.cxms-app strong { display: block; font: 700 1rem var(--display); color: var(--c-marino); }
.cxms-app small { display: block; color: var(--gris); font-size: .84rem; line-height: 1.4; }
.cxms-app .app-dato { flex: 1 1 auto; padding-left: calc(42px + .8rem); align-self: center; }
.cxms-app .chip-reco { align-self: center; }
.cxms-app-pronto { background: transparent; border-style: dashed; }
.cxms-app-pronto .app-icono { background: rgba(85,184,165,.12); color: var(--c-turquesa-texto); }
.cxms-mesa { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cxms-vistas { padding: 1rem .7rem; }
.cxms-vistas .consola-etiqueta { padding: 0 .6rem .5rem; }
.cxms-vistas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.cxms-vistas a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .6rem; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: .92rem; font-weight: 600; }
.cxms-vistas a small { display: block; font-weight: 400; font-size: .75rem; color: var(--gris); }
.cxms-vistas a b { font: 600 .78rem var(--mono); color: var(--gris); min-width: 1.6rem; text-align: center; padding: .1rem .35rem; border-radius: 999px; background: #F1F0EA; }
.cxms-vistas a:hover { background: #F7F6F1; }
.cxms-vistas a[aria-current="page"] { background: rgba(85,184,165,.12); color: var(--c-marino); }
.cxms-vistas a[aria-current="page"] b { background: var(--c-marino); color: #fff; }
.cxms-vistas a.vista-alerta b { background: rgba(217,154,120,.25); color: #8A4B2C; }
.cxms-cola .app-herramientas h2 { margin: 0; font-size: 1.15rem; }
.cxms-cola .app-herramientas p { margin: 0; font-size: .82rem; }
.tabla-cola .c-texto a { color: var(--c-marino); font-weight: 600; text-decoration: none; }
.tabla-cola .c-texto small { display: block; color: var(--gris); font-size: .8rem; }
.tabla-cola .c-estado { white-space: nowrap; }
.letra-estado { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 .72rem var(--mono); border: 1px solid var(--c-borde); vertical-align: middle; }
.estado-texto { margin-left: .45rem; font-size: .82rem; color: var(--gris); }
.letra-estado.estado-pausa { background: #EEF1F3; color: #5C6F79; border-color: #D5DDE1; }
.chip-app { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; background: #F1F0EA; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip-app .ico { width: 14px; height: 14px; }
.tabla-cola .c-comp { white-space: nowrap; }
.tabla-cola .c-comp small { display: block; font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.tabla-cola .c-mov { white-space: nowrap; font-size: .82rem; }
@media (max-width: 1500px) { .tabla-cola th:last-child, .tabla-cola .c-mov { display: none; } }
.menu-nuevo { position: relative; }
.menu-nuevo summary { list-style: none; cursor: pointer; }
.menu-nuevo summary::-webkit-details-marker { display: none; }
.menu-nuevo > div { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; width: 280px; padding: .4rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; box-shadow: 0 14px 34px rgba(23,42,53,.14); }
.menu-nuevo a { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .7rem; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.menu-nuevo a:hover { background: #F5F4EF; }
.menu-nuevo a .ico { margin-top: .15rem; color: var(--c-turquesa-texto); }
.menu-nuevo strong { display: block; font-size: .92rem; }
.menu-nuevo small { color: var(--gris); font-size: .8rem; }
@media (max-width: 1100px) {
  .cxms-mesa { grid-template-columns: 1fr; }
  .cxms-vistas ul { display: flex; overflow-x: auto; gap: .3rem; }
  .cxms-vistas li { flex: none; }
  .cxms-vistas a small { display: none; }
}
@media (max-width: 700px) {
  .tabla-cola tr { grid-template-areas: "estado comp" "texto texto"; }
  .tabla-cola .c-estado { grid-area: estado; }
  .tabla-cola .c-comp { grid-area: comp; display: block !important; text-align: right !important; }
  .tabla-cola .c-app, .tabla-cola .c-resp, .tabla-cola .c-mov { display: none; }
  .cl-menu::before { display: none; }
  .cl-micelio { display: none; }
  .menu-nuevo > div { right: auto; left: 0; }
  .cl-item { padding: .5rem .55rem; gap: .45rem; }
}

/* ---------- Clientes ---------- */
.persona-grande { gap: .6rem; text-decoration: none; color: var(--c-marino); font-weight: 600; font-size: .92rem; }
.persona-grande i { width: 32px; height: 32px; font-size: .72rem; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); flex: none; }
.persona-grande small { display: block; font-weight: 400; font-size: .78rem; color: var(--gris); }
.chip-etiqueta { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font: 600 .7rem var(--mono); letter-spacing: .03em; background: #F1F0EA; color: #4A5B64; white-space: nowrap; }
.chip-etiqueta.e-vip { background: rgba(44,106,160,.12); color: #2C6AA0; }
.chip-etiqueta.e-frecuente { background: rgba(85,184,165,.16); color: #2A7466; }
.chip-etiqueta.e-en-riesgo { background: rgba(217,154,120,.22); color: #8A4B2C; }
.chip-etiqueta.e-nuevo { background: rgba(166,184,199,.3); color: #3E5566; }
.liga-contacto { display: inline-flex; align-items: center; gap: .3rem; margin-top: .2rem; font-size: .78rem; color: var(--c-turquesa-texto); text-decoration: none; }
.liga-contacto .ico { width: 13px; height: 13px; }
.tabla-desplazable .liga-contacto { display: flex; width: max-content; }
.ficha { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ficha-datos { display: grid; gap: .8rem; justify-items: start; }
.ficha-avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); font: 800 1.3rem var(--display); }
.ficha-datos dl { margin: 0; display: grid; gap: .1rem; width: 100%; }
.ficha-datos dt { font: 500 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); margin-top: .5rem; }
.ficha-datos dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.ficha-notas { width: 100%; padding-top: .8rem; border-top: 1px solid var(--c-borde); }
.ficha-notas p:last-child { margin: .3rem 0 0; font-size: .9rem; }
.ficha-cuerpo { display: grid; gap: 1.2rem; min-width: 0; }
.app-stats .stat-texto { font-size: 1.05rem; padding-top: .3rem; }
.tabla-app .num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.monto-ingreso { color: #2A7466 !important; }
.monto-gasto { color: #A0532F !important; }
.campo-contacto select { font-weight: 600; }

/* ---------- Finanzas ---------- */
.selector-mes { display: inline-flex; align-items: center; gap: .9rem; justify-self: start; padding: .35rem .5rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 10px; }
.selector-mes a, .selector-mes span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; text-decoration: none; color: var(--c-marino); font-weight: 700; }
.selector-mes a:hover { background: #F1F0EA; }
.selector-mes span { color: #C9CCC6; }
.selector-mes strong { font: 700 .98rem var(--display); min-width: 9.5rem; text-align: center; }
.app-stats small { font-size: .74rem; color: var(--gris); }
.app-stats small.sube { color: #2A7466; } .app-stats small.baja { color: #A0532F; }
.leyenda { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--gris); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: .4rem; }
.l-ingreso, .b-ingreso { background: linear-gradient(180deg, #55B8A5, #2A7466); }
.l-gasto, .b-gasto { background: linear-gradient(180deg, #E5B396, #D99A78); }
.grafica-meses { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; height: 190px; padding-top: .6rem; }
.mes-col { display: grid; grid-template-rows: 1fr auto; gap: .4rem; text-decoration: none; color: var(--gris); border-radius: 8px; padding: .3rem .2rem; }
.mes-col:hover { background: #F7F6F1; }
.mes-col.actual { background: rgba(85,184,165,.08); color: var(--c-marino); font-weight: 700; }
.mes-col .barras { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; border-bottom: 1px solid var(--c-borde); }
.mes-col .barras i { width: min(18px, 40%); min-height: 2px; border-radius: 4px 4px 0 0; }
.mes-col small { text-align: center; font: 500 .72rem var(--mono); text-transform: capitalize; }
.barras-categorias li { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
.barras-categorias b { font-size: .8rem; white-space: nowrap; }
.barras-categorias .barra-motivo i { background: linear-gradient(90deg, #E5B396, #D99A78); }
.nota-finanzas { margin: .8rem 0 0; font-size: .86rem; }

/* ---------- Buzón QR ---------- */
.buzon-intro { display: grid; gap: 1rem; }
.pasos-buzon { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pasos-buzon li { counter-increment: paso; padding: 1rem; border: 1px dashed rgba(85,184,165,.5); border-radius: 12px; display: grid; gap: .2rem; }
.pasos-buzon li::before { content: counter(paso); font: 700 .8rem var(--mono); color: var(--c-turquesa-texto); }
.pasos-buzon span { color: var(--gris); font-size: .88rem; }
.buzon-rejilla { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.buzon-lado { display: grid; gap: 1.2rem; }
.cartel-buzon { text-align: center; padding: 2rem 1.6rem 1.4rem; background: linear-gradient(180deg, #fff 60%, #F6F5F0); border: 1px solid var(--c-borde); }
.cartel-negocio { margin: 0; font: 600 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-turquesa-texto); }
.cartel-buzon h2 { margin: .4rem 0 .2rem; font-size: 1.7rem; color: var(--c-marino); }
.cartel-sub { margin: 0 0 1rem; color: var(--gris); }
.cartel-qr { width: min(240px, 100%); margin: 0 auto; padding: .5rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--c-borde), 0 10px 26px rgba(23,42,53,.08); }
.cartel-qr svg { display: block; width: 100%; height: auto; }
.cartel-pie { margin: 1rem 0 .3rem; font-size: .84rem; color: var(--tinta); }
.cartel-datsool { margin: 0; font: 500 .68rem var(--mono); color: var(--gris); }
.enlace-buzon code { display: block; padding: .7rem .8rem; border-radius: 8px; background: #F5F4EF; font: .82rem var(--mono); overflow-wrap: anywhere; white-space: normal; }
.acciones-buzon { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.form-cambiar { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--c-borde); }
.mensajes-buzon { list-style: none; margin: 0; padding: 0; }
.mensajes-buzon li + li { border-top: 1px solid #EEEDE7; }
.mensajes-buzon a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .75rem .2rem; color: var(--tinta); text-decoration: none; }
.mensajes-buzon a:hover { background: #FAF9F5; }
.mensaje-texto small { display: block; color: var(--gris); font-size: .78rem; }
@media print {
  body.consola-cuenta * { visibility: hidden; }
  body.consola-cuenta .cartel-buzon, body.consola-cuenta .cartel-buzon * { visibility: visible; }
  body.consola-cuenta .cartel-buzon { position: absolute; inset: 0 0 auto 0; margin: 0 auto; width: 15cm; border: 2px solid #172A35; box-shadow: none; padding: 1.5cm 1cm; }
  .cartel-buzon h2 { font-size: 30pt; }
  .cartel-qr { width: 9cm; box-shadow: none; }
}

/* Formulario público del buzón */
.buzon-publico { background: var(--c-fondo, #F5F4EF); min-height: 100vh; display: flex; flex-direction: column; }
.buzon-caja { width: min(560px, 100% - 32px); margin: 2rem auto 1rem; padding: 1.8rem 1.6rem; background: #fff; border: 1px solid #E0DED6; border-radius: 18px; box-shadow: 0 18px 40px rgba(23,42,53,.07); }
.buzon-caja h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); margin: .2rem 0 .3rem; }
.buzon-negocio { margin: 0; font: 600 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #2A7466; }
.buzon-caja .formulario { margin-top: 1.2rem; }
.caritas { display: flex; gap: .4rem; }
.caritas label { cursor: pointer; position: relative; }
.caritas input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; }
.caritas span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 1px solid #E0DED6; font-size: 1.5rem; filter: grayscale(.7); transition: transform .12s, filter .12s; }
.caritas input:checked + span { filter: none; border-color: #55B8A5; background: rgba(85,184,165,.12); transform: scale(1.08); }
.caritas input:focus-visible + span { outline: 2px solid #2A7466; outline-offset: 2px; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.buzon-gracias { text-align: center; display: grid; justify-items: center; gap: .4rem; padding: 1rem 0; }
.buzon-pie { text-align: center; padding: 1rem; font: .74rem var(--mono); }
.buzon-pie a { color: #6B7B83; text-decoration: none; }

@media (max-width: 1000px) {
  .ficha, .buzon-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tabla-clientes .c-correo, .tabla-clientes .c-etiqueta, .tabla-clientes .c-compras { display: none; }
  .tabla-clientes tr { grid-template-areas: "texto tickets" "tel tel"; }
  .tabla-clientes .c-texto { grid-area: texto; } .tabla-clientes .c-tickets { grid-area: tickets; display: block; } .tabla-clientes .c-tel { grid-area: tel; display: block; color: var(--gris); font-size: .84rem; }
  .tabla-finanzas tr { grid-template-areas: "fecha monto" "texto texto"; }
  .tabla-finanzas .c-monto { grid-area: monto; display: block; }
  .tabla-finanzas .c-cat, .tabla-finanzas .c-cliente, .tabla-finanzas .c-metodo { display: none; }
  .tabla-ficha tr { grid-template-areas: "fecha estado" "texto texto"; }
  .pasos-buzon { grid-template-columns: 1fr; }
  .mensajes-buzon a { grid-template-columns: 1fr auto; }
  .mensajes-buzon .tipo { display: none; }
  .grafica-meses { height: 150px; gap: .2rem; }
}

/* ---------- Recorrido guiado (tour.js) ---------- */
/* Botón del menú para abrir o repetir el recorrido */
.cl-tour { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .75rem; border: 1px dashed rgba(85,184,165,.55); border-radius: 9px; background: transparent; color: #3C4E58; font: 600 .9rem var(--cuerpo); text-align: left; cursor: pointer; }
.cl-tour small { display: block; font-size: .74rem; font-weight: 400; color: var(--gris); }
.cl-tour .ico { color: var(--c-turquesa-texto); }
.cl-tour:hover { background: rgba(85,184,165,.09); border-style: solid; color: var(--c-marino); }
.cl-tour:hover .ico { transform: rotate(35deg); }
.cl-tour .ico { transition: transform .4s cubic-bezier(.3,1.4,.5,1); }

.tour { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s; }
.tour.abierto { opacity: 1; }
.tour[hidden] { display: none; }
.tour-bloqueo { position: absolute; inset: 0; pointer-events: auto; }
/* El foco: un hueco en la capa oscura que se desliza de un lugar a otro */
.tour-foco { position: fixed; box-shadow: 0 0 0 200vmax rgba(16,33,43,.6); outline: 2px solid var(--c-turquesa); outline-offset: 0; transition: left .55s cubic-bezier(.65,0,.25,1), top .55s cubic-bezier(.65,0,.25,1), width .55s cubic-bezier(.65,0,.25,1), height .55s cubic-bezier(.65,0,.25,1), border-radius .55s, outline-color .3s; }
.tour-foco::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(85,184,165,.55); animation: tour-late 2.2s ease-out infinite; }
.tour-foco.sin-destino { outline-color: transparent; }
.tour-foco.sin-destino::after { display: none; }
@keyframes tour-late { 0% { box-shadow: 0 0 0 0 rgba(85,184,165,.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(85,184,165,0); } }
.tour-hifa { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; }
.th-hifa { fill: none; stroke: var(--c-turquesa); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(85,184,165,.7)); }
.th-hifa.crece { animation: tour-crece .5s ease-out both; }
@keyframes tour-crece { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.th-espora { fill: var(--c-turquesa); stroke: #fff; stroke-width: 1.5; animation: tour-espora .5s .35s cubic-bezier(.3,1.6,.5,1) both; }
.th-raiz { fill: var(--c-turquesa); }
.th-pulso { fill: #fff; filter: drop-shadow(0 0 4px rgba(85,184,165,1)); }
@keyframes tour-espora { from { transform: scale(0); transform-box: fill-box; transform-origin: center; } to { transform: scale(1); transform-box: fill-box; transform-origin: center; } }

/* La tarjeta */
.tour-tarjeta { position: fixed; left: 0; top: 0; width: min(350px, calc(100vw - 28px)); pointer-events: auto; padding: 1.05rem 1.15rem 1rem; border-radius: 14px; background: #fff; color: var(--tinta); border: 1px solid var(--c-borde); box-shadow: 0 18px 50px rgba(16,33,43,.28), 0 2px 6px rgba(16,33,43,.12); transition: transform .55s cubic-bezier(.65,0,.25,1), opacity .2s; outline: none; }
.tour-tarjeta.cambiando { opacity: 0; }
.tour-tarjeta.cambiando > * { transform: translateY(4px); }
.tour-tarjeta > * { transition: transform .25s ease-out; }
.tour-tarjeta.es-portada { width: min(540px, calc(100vw - 28px)); padding: 0 1.6rem 1.4rem; overflow: hidden; border-radius: 18px; }
.tour-tarjeta.es-portada .tour-arte { height: 150px; margin: 0 -1.6rem 1.1rem; }
.tour-tarjeta.es-portada h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.15; margin: .5rem 0 .65rem; letter-spacing: -.01em; }
.tour-tarjeta.es-portada .tour-texto { font-size: 1.05rem; line-height: 1.55; }
.tour-tarjeta.es-portada .tour-pie { margin-top: 1.2rem; }
@media (max-height: 640px) { .tour-tarjeta.es-portada .tour-arte { height: 104px; } }
.tour-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tour-contador { font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-turquesa-texto); }
.tour-x { border: 0; background: transparent; color: var(--gris); font-size: 1.35rem; line-height: 1; width: 30px; height: 30px; margin: -.35rem -.5rem 0 0; border-radius: 50%; cursor: pointer; }
.tour-x:hover { background: var(--c-fondo); color: var(--c-marino); }
.tour-tarjeta h2 { margin: .35rem 0 .45rem; font: 800 1.12rem/1.25 var(--display); color: var(--c-marino); }
.tour-texto { font-size: .92rem; line-height: 1.5; color: #3C4E58; }
.tour-texto b { color: var(--c-marino); }
.tour-lista { margin: 0 0 .5rem; padding-left: 1.05rem; display: grid; gap: .2rem; }
.tour-pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .9rem; flex-wrap: wrap; }
.tour-botones { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.tour-botones .btn { white-space: nowrap; }
.tour-btn-texto { border: 0; background: transparent; padding: .5rem .7rem; border-radius: 999px; font: 600 .88rem var(--cuerpo); color: var(--gris); cursor: pointer; }
.tour-btn-texto:hover { background: var(--c-fondo); color: var(--c-marino); }
.tour-pasos { display: block; flex: none; }
.tp-hilo { stroke: var(--c-borde); stroke-width: 1.5; }
.tp-hilo-hecho { stroke: var(--c-turquesa); stroke-width: 1.5; transition: d .4s; }
.tp-pendiente { fill: #fff; stroke: var(--c-datos); stroke-width: 1.2; }
.tp-hecho { fill: var(--c-turquesa); }
.tp-actual { fill: var(--c-turquesa); stroke: rgba(85,184,165,.35); stroke-width: 4; }
/* Portada: el micelio crece desde un nodo */
.tour-arte { height: 96px; margin: 0 -1.15rem .8rem; background: radial-gradient(ellipse at 50% 60%, #1F3744, var(--c-marino)); }
.tour-arte svg { width: 100%; height: 100%; display: block; }
.ta-hifa { fill: none; stroke: var(--c-turquesa); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; animation: tour-crece 1.1s ease-out forwards; }
.ta-espora { fill: var(--c-turquesa); animation: tour-espora .6s cubic-bezier(.3,1.6,.5,1) both; }
.ta-espora.coral { fill: var(--c-coral); }
.ta-centro { fill: var(--c-marfil); stroke: var(--c-turquesa); stroke-width: 3; animation: tour-nucleo 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tour-nucleo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

@media (max-width: 1000px) {
  /* En la barra de arriba, el recorrido es un botón redondo con solo la brújula */
  .cl-tour { width: 38px; height: 38px; flex: none; padding: 0; justify-content: center; border-radius: 50%; }
  .cl-tour span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cl-tour .ico { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
  /* En celular caben las cuatro secciones con su nombre, la guía y los mensajes sin encimarse */
  .consola-lateral { padding: .45rem .5rem; gap: .3rem; }
  .cl-menu { gap: 0; }
  .cl-item { padding: .5rem .5rem; font-size: .84rem; }
  .cl-item .ico { display: none; }
  .cl-tour, .consola-lateral .cl-ayuda { width: 36px; height: 36px; }
}
@media (max-width: 700px) {
  /* En celular la tarjeta es una hoja que sube desde abajo */
  .tour-tarjeta.hoja { left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 18px 18px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); animation: tour-hoja .35s cubic-bezier(.2,.9,.3,1); }
  @keyframes tour-hoja { from { transform: translateY(30%); } to { transform: translateY(0); } }
  .tour-pasos { max-width: 42vw; }
}
@media (prefers-reduced-motion: reduce) {
  .tour, .tour-foco, .tour-tarjeta, .tour-tarjeta > * { transition: none; }
  .tour-foco::after, .th-hifa.crece, .th-espora, .ta-hifa, .ta-espora, .ta-centro, .tour-tarjeta.hoja { animation: none; }
  .ta-hifa { stroke-dashoffset: 0; }
}

/* Pedir ClienteCheck Pro o ayuda desde la cuenta (interes.php) */
.interes { max-width: 640px; margin-top: 1rem; }
.interes h2 { margin: .2rem 0 .5rem; }
.interes .app-icono { margin-bottom: .6rem; }
.interes-botones { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.interesados .lista-simple li { align-items: center; gap: 1rem; }

.cxm-mesa { position: relative; }

/* ---------- Mensajes con Datsool ---------- */
.cl-ayuda { position: relative; }
.cl-ayuda[aria-current="page"] { background: rgba(85,184,165,.16); }
.cl-nuevo { color: var(--c-turquesa-texto); font-weight: 700; }
.cl-punto { position: absolute; top: .7rem; right: .7rem; width: 9px; height: 9px; border-radius: 50%; background: var(--c-coral); box-shadow: 0 0 0 3px rgba(217,154,120,.25); }
.aviso-mensaje { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(85,184,165,.12); border: 1px solid rgba(85,184,165,.4); color: var(--tinta); text-decoration: none; }
.aviso-mensaje .ico { color: var(--c-turquesa-texto); }
.aviso-mensaje span { flex: 1; }
.aviso-mensaje b { color: var(--c-turquesa-texto); }
.mensajeria { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.mensajeria.sin-lista { grid-template-columns: minmax(0, 720px); }
.conversaciones ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .2rem; }
.conversaciones a { position: relative; display: block; padding: .65rem 1.6rem .65rem .7rem; border-radius: 9px; color: var(--tinta); text-decoration: none; }
.conversaciones a strong { display: block; font-size: .92rem; }
.conversaciones a small { display: block; font-size: .76rem; color: var(--gris); margin-top: .1rem; }
.conversaciones a:hover { background: var(--c-fondo); }
.conversaciones a[aria-current="page"] { background: #fff; box-shadow: 0 1px 2px rgba(23,42,53,.06), inset 3px 0 0 var(--c-turquesa); }
.conversaciones .cl-punto { top: 50%; margin-top: -4px; right: .6rem; }
.hilo { display: grid; gap: .9rem; }
.hilo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hilo-cabeza h2 { margin: 0; }
.hilo-cabeza p { margin: .2rem 0 0; }
.burbujas { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-height: 52vh; overflow-y: auto; }
.burbuja { max-width: min(560px, 88%); padding: .7rem .9rem; border-radius: 14px; background: var(--c-fondo); border: 1px solid var(--c-borde); }
.burbuja p { margin: .25rem 0 0; line-height: 1.5; }
.burbuja-autor { font: .7rem var(--mono); letter-spacing: .03em; color: var(--gris); }
.burbuja.de-ti { justify-self: end; background: var(--c-marino); border-color: var(--c-marino); color: var(--c-marfil); border-bottom-right-radius: 4px; }
.burbuja.de-ti .burbuja-autor { color: var(--c-datos); }
.burbuja.de-datsool { border-bottom-left-radius: 4px; background: #fff; box-shadow: inset 3px 0 0 var(--c-turquesa); }
.hilo-espera { margin: 0; font-size: .86rem; }
.hilo-responder { display: flex; gap: .6rem; align-items: flex-end; border-top: 1px solid var(--c-borde); padding-top: .9rem; }
.hilo-responder textarea { flex: 1; min-height: 2.8rem; resize: vertical; }
.btn .ico { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .mensajeria { grid-template-columns: 1fr; }
  /* En la barra de arriba, Mensajes es un botón redondo junto al recorrido */
  .consola-lateral .cl-ayuda { display: flex; width: 38px; height: 38px; flex: none; margin: 0; padding: 0; justify-content: center; align-items: center; border-radius: 50%; }
  .consola-lateral .cl-ayuda span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consola-lateral .cl-ayuda .ico { width: 20px; height: 20px; }
  .consola-lateral .cl-ayuda .cl-punto { top: 0; right: 0; }
  .burbujas { max-height: none; }
}
@media (max-width: 480px) { .hilo-responder { flex-direction: column; align-items: stretch; } }

/* ---------- Equipo: personas, roles y permisos ---------- */
.equipo-rejilla { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.2rem; align-items: stretch; margin-bottom: 1.2rem; }
.equipo-stats { align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.codigo-empresa .tenue { font-size: .86rem; margin: .4rem 0 0; }
.codigo-grande { margin: .35rem 0 0; font: 500 1.9rem var(--mono); letter-spacing: .12em; color: var(--c-marino); }
.codigo-empresa form { display: inline-flex; }
.codigo-empresa .btn-texto { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; }
.codigo-empresa .btn-texto .ico { width: 16px; height: 16px; }
.chip-rol { display: inline-block; padding: .14rem .6rem; border-radius: 999px; font: 600 .72rem var(--mono); letter-spacing: .03em; background: #F1F0EA; color: #4A5B64; white-space: nowrap; }
.chip-rol.rol-dueno { background: var(--c-marino); color: var(--c-marfil); }
.chip-rol.rol-admin { background: rgba(44,106,160,.12); color: var(--c-azul); }
.chip-rol.rol-colaborador { background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); }
.tabla-equipo .c-apps { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 180px; }
.tabla-equipo td.c-apps { display: table-cell; }
.tabla-equipo .c-apps .chip-app { margin: 0 .25rem .25rem 0; }
.tabla-equipo .c-accion { text-align: right !important; white-space: nowrap; }
.tabla-equipo .c-texto small { display: block; color: var(--gris); font-size: .8rem; }
.en-linea { display: inline-flex; align-items: center; gap: .6rem; }
.equipo-vacio { padding: .2rem 1rem 1rem; margin: 0; }
.opciones-rol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.opcion-rol { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .8rem; border: 1px solid var(--c-borde); border-radius: 10px; cursor: pointer; background: #fff; }
.opcion-rol:has(input:checked) { border-color: var(--c-turquesa); box-shadow: 0 0 0 3px rgba(85,184,165,.16); }
.opcion-rol input { margin-top: .25rem; accent-color: var(--c-turquesa-texto); }
.opcion-rol strong { display: block; font-size: .92rem; }
.opcion-rol small { display: block; color: var(--gris); font-size: .8rem; line-height: 1.35; }
.opcion-rol.deshabilitada { opacity: .55; cursor: not-allowed; }
.casillas-permisos { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; margin: .4rem 0; }
.chip-atajo { border: 1px solid var(--c-borde); background: #fff; border-radius: 999px; padding: .2rem .65rem; margin: 0 .25rem .3rem 0; font: 600 .76rem var(--cuerpo); color: var(--c-marino); cursor: pointer; }
.chip-atajo:hover { border-color: var(--c-turquesa); }
.campo-codigo { font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; font-size: 1.15rem; }
@media (max-width: 900px) { .equipo-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .opciones-rol, .casillas-permisos { grid-template-columns: 1fr; }
  .tabla-equipo tr { grid-template-areas: "texto rol" "apps apps" "accion accion"; }
  .tabla-equipo .c-rol { grid-area: rol; }
  .tabla-equipo td.c-apps { grid-area: apps; display: block; }
  .tabla-equipo .c-accion { grid-area: accion; text-align: left !important; }
  .tabla-equipo .c-mov { display: none; }
}

/* ---------- Caja y ventas ---------- */
.corte-cabeza { margin: 1rem 0 .8rem; }
.corte-cabeza h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.corte-dia input { height: 40px; border-radius: 10px; border: 1px solid var(--c-borde); padding: 0 .7rem; font: 500 .9rem var(--mono); background: #fff; color: var(--c-marino); }
.corte-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; margin-top: 1.2rem; }
.corte-lado { display: grid; gap: 1.2rem; }
.corte-lado h2 { font-size: 1rem; margin: 0 0 .7rem; }
.barras-corte li { grid-template-columns: minmax(0, 6.5rem) 1fr auto; }
.lista-top { margin: 0; padding: 0; list-style: none; counter-reset: top; }
.lista-top li { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid #EFEDE6; font-size: .92rem; counter-increment: top; }
.lista-top li span::before { content: counter(top) ". "; color: var(--gris); font-family: var(--mono); }
.lista-top b { font-family: var(--mono); font-weight: 500; }
.tabla-ventas .c-fecha b { font-family: var(--mono); font-weight: 500; }
.tabla-ventas .c-fecha small, .tabla-ventas .c-texto small { display: block; color: var(--gris); font-size: .78rem; }
.tabla-ventas .c-total, .tabla-productos .c-total { font-family: var(--mono); white-space: nowrap; }
.tabla-ventas .c-accion { text-align: right !important; }
.venta-cancelada td { color: var(--gris); }
.venta-cancelada .c-total { text-decoration: line-through; }
.punto-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .5rem; vertical-align: -1px; background: var(--acento, #55B8A5); }
.c-turquesa { --acento: #55B8A5; } .c-azul { --acento: #2C6AA0; } .c-coral { --acento: #D99A78; }
.c-marino { --acento: #172A35; } .c-arena { --acento: #C9B48A; } .c-lila { --acento: #9C8CC0; }
.colores-caja { display: flex; gap: .6rem; flex-wrap: wrap; }
.colores-caja label { position: relative; cursor: pointer; display: inline-flex; }
.colores-caja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.colores-caja .punto-color { width: 30px; height: 30px; margin: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px transparent; }
.colores-caja input:checked + .punto-color { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-marino); }
.colores-caja input:focus-visible + .punto-color { outline: 2px solid var(--c-azul); outline-offset: 4px; }
.abrir-caja { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--c-marino); color: var(--c-marfil); text-decoration: none; margin-bottom: 1.2rem; }
.abrir-caja .ico { width: 34px; height: 34px; }
.abrir-caja strong { display: block; font-size: 1.2rem; }
.abrir-caja small { color: #9FB0B8; }
.abrir-caja b { margin-left: auto; font-size: 1.4rem; }
@media (max-width: 900px) { .corte-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .tabla-ventas tr { grid-template-areas: "fecha total" "texto texto" "estado accion"; }
  .tabla-ventas .c-total { grid-area: total; text-align: right !important; }
  .tabla-ventas .c-estado { grid-area: estado; }
  .tabla-ventas .c-accion { grid-area: accion; }
  .tabla-productos tr { grid-template-areas: "texto total" "tipo estado"; }
  .tabla-productos .c-total { grid-area: total; }
  .tabla-productos .c-tipo { display: block; grid-area: tipo; color: var(--gris); font-size: .85rem; }
}

/* ---------- Tareas ---------- */
.filtro-persona { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-weight: 600; font-size: .9rem; }
.filtro-persona select { height: 38px; border-radius: 10px; border: 1px solid var(--c-borde); padding: 0 .6rem; background: #fff; font: inherit; }
.tareas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tarea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .8rem 1rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; }
.tarea.es-urgente { border-left: 4px solid var(--c-coral); }
.tarea.es-tarde { background: #FFFBF8; }
.tarea-check button, .tarea-check.hecha { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #C5CDD1; background: #fff; color: transparent; cursor: pointer; padding: 0; }
.tarea-check button:hover { border-color: var(--c-turquesa); color: var(--c-turquesa); }
.tarea-check .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.tarea-check.hecha { border-color: var(--c-turquesa); background: var(--c-turquesa); color: #fff; cursor: default; }
.tarea-texto { text-decoration: none; color: var(--c-marino); min-width: 0; }
.tarea-texto strong { display: block; font-size: .96rem; }
.tarea-texto small { display: block; color: var(--gris); font-size: .84rem; margin-top: .1rem; }
.estado-t-hecha .tarea-texto strong { color: var(--gris); text-decoration: line-through; text-decoration-color: rgba(94,110,118,.5); }
.tarea-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.tarea-meta form { display: inline; }
.tarea-meta .btn-texto { font-size: .84rem; padding: 0; }
.tarea-meta a.chip-app { text-decoration: none; color: inherit; }
.chip-limite { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font: 500 .74rem var(--mono); background: #F1F0EA; color: #4A5B64; white-space: nowrap; }
.chip-limite.hoy { background: rgba(44,106,160,.12); color: var(--c-azul); }
.chip-limite.tarde { background: rgba(217,154,120,.22); color: #8A4B2C; }
.chip-urgente { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font: 600 .72rem var(--mono); background: var(--c-coral); color: #fff; }
fieldset.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
@media (max-width: 700px) {
  .tarea { grid-template-columns: auto minmax(0, 1fr); }
  .tarea-meta { grid-column: 2; justify-content: flex-start; }
}

/* ---------- Desempeño ---------- */
.segmentos { display: inline-flex; border: 1px solid var(--c-borde); border-radius: 10px; overflow: hidden; background: #fff; }
.segmentos a { padding: .45rem .8rem; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--c-marino); }
.segmentos a + a { border-left: 1px solid var(--c-borde); }
.segmentos a[aria-current="page"] { background: var(--c-marino); color: var(--c-marfil); }
.desempeno-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; margin-top: 1.2rem; }
.persona-desempeno { display: flex; flex-direction: column; gap: .9rem; }
.anillo-fila { display: flex; align-items: center; gap: 1rem; }
.anillo { width: 78px; height: 78px; flex: none; }
.anillo circle { fill: none; stroke-width: 5; }
.anillo-fondo { stroke: #EDEBE4; }
.anillo-valor { stroke: var(--c-turquesa); stroke-linecap: round; }
.anillo-valor.bajo { stroke: var(--c-coral); }
.anillo text { font: 500 10px var(--mono); fill: var(--c-marino); }
.anillo text.anillo-pie { font-size: 4.6px; letter-spacing: .04em; fill: var(--gris); }
@media (max-width: 520px) { .wiki-pestanas a { padding: .55rem .6rem; font-size: .88rem; } }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; flex: 1; }
.cifras div { min-width: 0; }
.cifras dt { font: 500 .64rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.cifras dd { margin: .1rem 0 0; font-weight: 800; font-size: 1.15rem; }
.cifras dd small { font-weight: 500; font-size: .78rem; color: var(--gris); }
.cifra-alerta dd { color: #A4552F; }
.cifras-linea { padding-top: .8rem; border-top: 1px solid #EFEDE6; }
.cifras-linea dd { font-size: .95rem; }
.persona-desempeno footer { display: flex; justify-content: space-between; gap: .8rem; font-size: .86rem; font-weight: 600; margin-top: auto; }
.persona-desempeno .barra-motivo { display: block; }
.nota-desempeno { font-size: .82rem; margin-top: 1.2rem; }
.chip-app.chip-exporta { background: #FBEFE6; color: #8A4B2A; border-color: #F0D5C2; }
.panel-lateral-pie .btn-texto { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.panel-lateral-pie .btn-texto .ico { width: 15px; height: 15px; }
/* Productos de la caja: ícono por tipo de producto */
.icono-producto { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--acento, #55B8A5) 16%, #fff); color: color-mix(in srgb, var(--acento, #55B8A5) 70%, #172A35); }
.icono-producto .ico { width: 20px; height: 20px; }
.producto-con-icono { display: inline-flex; align-items: center; gap: .6rem; }
.tabla-productos .c-total small { display: block; font-size: .76rem; color: var(--gris); }
.iconos-caja { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .45rem; }
.iconos-caja label { position: relative; display: grid; place-items: center; cursor: pointer; }
.iconos-caja input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.iconos-caja .icono-producto { width: 42px; height: 42px; box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s; }
.iconos-caja input:checked + .icono-producto { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-marino); }
.iconos-caja input:focus-visible + .icono-producto { outline: 2px solid var(--c-azul); outline-offset: 3px; }
.chip-atajo small { color: var(--gris); font-weight: 500; }
.mayoreo summary { cursor: pointer; font-weight: 700; color: var(--c-marino); padding: .3rem 0; }
.mayoreo[open] summary { margin-bottom: .5rem; }
.ajustes-caja { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.ajustes-caja h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.ajustes-caja p { margin: 0; max-width: 52ch; }
.opciones-segmento { display: inline-flex; padding: .25rem; gap: .25rem; border-radius: 12px; background: var(--c-fondo, #F2F0E9); border: 1px solid var(--c-borde); }
.opciones-segmento label { position: relative; cursor: pointer; }
.opciones-segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opciones-segmento span { display: block; padding: .5rem .9rem; border-radius: 9px; font-weight: 700; font-size: .88rem; color: var(--gris); }
.opciones-segmento input:checked + span { background: var(--c-marino); color: #fff; }
.opciones-segmento input:focus-visible + span { outline: 2px solid var(--c-azul); outline-offset: 2px; }
.tabla-ventas .c-texto small .ico { width: 13px; height: 13px; vertical-align: -2px; }
.tabla-ventas .c-texto small { display: flex; align-items: center; gap: .3rem; }

/* ---------- Fotos, Mi empresa, ficha del empleado y reportes ---------- */
.con-foto { overflow: hidden; padding: 0 !important; }
.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.cl-avatar.con-foto { background: #fff; border: 1px solid var(--c-borde); }
.pestana-numero { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: #C7825E; color: #fff; font: 700 .68rem var(--display); }
.estado-nuevo { background: rgba(217,154,120,.16); border-color: rgba(217,154,120,.5); color: #8A4B2C; }
.estado-visto { background: rgba(44,106,160,.1); border-color: rgba(44,106,160,.35); color: #2C6AA0; }
.estado-resuelto { background: rgba(85,184,165,.14); border-color: rgba(85,184,165,.45); color: #2A7466; }

.empresa-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.empresa-rejilla > fieldset { border: 1px solid var(--c-borde); margin: 0; display: grid; gap: .9rem; }
.empresa-rejilla > fieldset[disabled] { opacity: .85; }
.empresa-rejilla h2 { font-size: 1.15rem; margin: 0; }
.empresa-pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.empresa-logo { display: flex; align-items: center; gap: 1rem; }
.empresa-logo .ayuda { margin: .35rem 0 0; }
.empresa-logo .btn-texto { margin-top: .2rem; }
.logo-vista { width: 84px; height: 84px; flex: none; border-radius: 16px; display: grid; place-items: center; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); font: 800 1.6rem var(--display); border: 1px solid var(--c-borde); }
.logo-vista.redonda { border-radius: 50%; }
.subir-foto { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.subir-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.subir-foto:focus-within { outline: 2px solid var(--c-azul); outline-offset: 2px; }
.valores-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }

.nuestra-guia h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
.guia-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.guia-rejilla p { margin: .25rem 0 0; font-size: 1rem; line-height: 1.45; }
.chips-valores { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.chips-valores span { padding: .3rem .75rem; border-radius: 999px; background: rgba(85,184,165,.14); color: var(--c-turquesa-texto); font-weight: 700; font-size: .85rem; }

.rh-resumen h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.rh-resumen .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0; }
.rh-resumen .cifras div { min-width: 0; }
.rh-resumen dt { font-size: .78rem; color: var(--gris); }
.rh-resumen dd { margin: .15rem 0 0; font: 800 1.2rem var(--display); color: var(--tinta); }
.rh-resumen dd.rh-cumples { font-size: .92rem; font-weight: 600; }
.rh-resumen > p { margin: .7rem 0 0; }

.ficha-rejilla { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ficha-persona { text-align: center; display: grid; justify-items: center; gap: .3rem; }
.ficha-persona h2 { font-size: 1.2rem; margin: .4rem 0 0; }
.ficha-persona > p { margin: 0; }
.ficha-foto { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); font: 800 2rem var(--display); }
.ficha-datos { width: 100%; text-align: left; margin: .8rem 0 0; display: grid; gap: .1rem; }
.ficha-datos div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--c-borde); font-size: .9rem; }
.ficha-datos dt { color: var(--gris); font-size: .8rem; }
.ficha-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ficha-datos small { display: block; font-weight: 400; color: var(--gris); font-size: .78rem; }
.ficha-columna { display: grid; gap: 1rem; min-width: 0; }
.ficha-columna fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; min-width: 0; }
.ficha-columna h2 { font-size: 1.1rem; margin: 0; }
.ficha-privado { border: 1px dashed rgba(217,154,120,.7); background: rgba(217,154,120,.06); border-radius: 10px; padding: .8rem 1rem; display: grid; gap: .7rem; }
.ficha-privado .consola-etiqueta { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.ficha-privado .ico { width: 14px; height: 14px; }
.lista-emergencia { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.lista-emergencia li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--c-borde); border-radius: 10px; font-size: .9rem; }
.lista-emergencia span { color: var(--gris); }
.chips-intereses { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }

.reportes-titulo { font-size: 1rem; margin: .6rem 0 0; }
.mis-reportes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mis-reportes li { border: 1px solid var(--c-borde); border-radius: 10px; padding: .6rem .8rem; }
.mis-reportes p { margin: 0 0 .25rem; }
.respuesta-reporte { background: rgba(85,184,165,.1); border-radius: 8px; padding: .45rem .6rem; margin-top: .4rem !important; }
.lista-reportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.reporte { display: grid; gap: .55rem; }
.reporte header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.reporte p { margin: 0; }
.reporte-texto { line-height: 1.5; white-space: normal; }
.reporte-pie { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; }
.reporte-pie select { width: auto; padding: .45rem 2rem .45rem .7rem; border: 1px solid var(--c-borde); border-radius: 8px; background-color: #fff; font: inherit; font-size: .88rem; }
.persona-anonima i { background: #EDE6F1; color: #6B4E7A; }

@media (max-width: 1000px) {
  .empresa-rejilla, .ficha-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .valores-campos { grid-template-columns: 1fr 1fr; }
  .lista-reportes { grid-template-columns: minmax(0, 1fr); }
  .lista-emergencia li { grid-template-columns: 1fr auto; }
  .lista-emergencia li span { grid-row: 2; }
  .logo-vista { width: 68px; height: 68px; font-size: 1.3rem; }
}
.ficha-datos div { justify-self: stretch; width: 100%; box-sizing: border-box; }
#ficha fieldset .campos-fila { margin-top: .45rem; gap: .5rem; }

/* ---------- Chat del equipo ---------- */
.chat { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.chat-salas { padding: .6rem; display: grid; gap: .15rem; max-height: calc(100dvh - 210px); overflow-y: auto; position: sticky; top: 1rem; }
.chat-salas a { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-radius: 9px; color: var(--tinta); text-decoration: none; min-width: 0; }
.chat-salas a:hover { background: var(--c-fondo); }
.chat-salas a[aria-current="page"] { background: var(--c-fondo); box-shadow: inset 3px 0 0 var(--c-turquesa); }
.chat-salas .persona i { width: 34px; height: 34px; font-size: .74rem; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); }
.chat-sala-texto { flex: 1; min-width: 0; }
.chat-sala-texto strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sala-texto small { display: block; font-size: .76rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-numero { min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #C7825E; color: #fff; font: 700 .7rem var(--display); display: inline-grid; place-items: center; }
.chat-numero[hidden] { display: none; }
.chat-separador { margin: .7rem .6rem .2rem; }
i.chat-todos { background: var(--c-marino) !important; color: var(--c-marfil) !important; }
i.chat-todos .ico { width: 18px; height: 18px; }
.chat-hilo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; }
.chat-cabeza { padding: .8rem 1.1rem; border-bottom: 1px solid var(--c-borde); }
.chat-cabeza .persona-grande { color: var(--tinta); }
.chat-cabeza .persona-grande i { width: 38px; height: 38px; }
.chat-mensajes { height: max(200px, calc(100dvh - 365px)); overflow-y: auto; padding: 1rem 1.1rem; background: var(--c-fondo); scroll-behavior: auto; }
.chat-mensajes:focus-visible { outline: 2px solid var(--c-azul); outline-offset: -2px; }
.chat-mensajes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.chat-anteriores { display: block; margin: 0 auto .8rem; }
.chat-vacio { text-align: center; margin: 2rem 0; }
.chat-dia { justify-self: center; margin: .7rem 0 .3rem; padding: .15rem .7rem; border-radius: 999px; background: #fff; border: 1px solid var(--c-borde); font: 500 .7rem var(--mono); color: var(--gris); letter-spacing: .03em; }
.chat-mensaje { display: flex; align-items: flex-end; gap: .45rem; max-width: min(620px, 86%); }
.chat-mensaje .persona i { width: 28px; height: 28px; font-size: .64rem; background: rgba(85,184,165,.16); color: var(--c-turquesa-texto); }
.chat-globo { background: #fff; border: 1px solid var(--c-borde); border-radius: 14px 14px 14px 4px; padding: .45rem .75rem .35rem; min-width: 0; }
.chat-globo strong { display: block; font-size: .76rem; color: var(--c-turquesa-texto); }
.chat-globo p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: .95rem; }
.chat-globo time { display: block; text-align: right; font: .66rem var(--mono); color: var(--gris); margin-top: .1rem; }
.chat-mensaje.mio { justify-self: end; }
.chat-mensaje.mio .chat-globo { background: var(--c-marino); border-color: var(--c-marino); color: var(--c-marfil); border-radius: 14px 14px 4px 14px; }
.chat-mensaje.mio time { color: var(--c-datos); }
.chat-escribir { display: flex; gap: .5rem; align-items: flex-end; padding: .8rem 1.1rem 0; border-top: 1px solid var(--c-borde); }
.chat-escribir textarea { flex: 1; resize: none; min-height: 2.75rem; max-height: 160px; padding: .65rem .8rem; border: 1px solid var(--c-borde); border-radius: 10px; font: inherit; line-height: 1.4; }
.chat-escribir textarea:focus { outline: 2px solid var(--c-turquesa); outline-offset: 0; border-color: transparent; }
.chat-ayuda { font-size: .72rem; margin: .3rem 1.1rem .7rem; }
.chat-hilo > .aviso { margin: 0 1.1rem .8rem; }
@media (max-width: 900px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-salas { position: static; display: flex; overflow-x: auto; max-height: none; gap: .3rem; scrollbar-width: none; }
  .chat-salas a { flex: none; max-width: 210px; }
  .chat-separador { display: none; }
  .chat-mensajes { height: max(240px, calc(100dvh - 530px)); }
}
@media (max-width: 520px) {
  .chat-escribir .btn span { display: none; }
  .chat-ayuda { display: none; }
  .chat-mensaje { max-width: 92%; }
  .chat-salas .chat-sala-texto small { display: none; }
}
@media (max-height: 700px) and (min-width: 901px) { .chat-ayuda { display: none; } .chat-escribir { padding-bottom: .8rem; } .chat-mensajes { height: max(200px, calc(100dvh - 335px)); } }

/* ---------- CXM: apps como módulos de trabajo ---------- */
.segmentos button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; font: 600 .85rem var(--display); color: var(--c-marino); background: none; border: 0; cursor: pointer; }
.segmentos button + button { border-left: 1px solid var(--c-borde); }
.segmentos button[aria-pressed="true"] { background: var(--c-marino); color: var(--c-marfil); }
.segmentos button .ico { width: 16px; height: 16px; }
.cxm { position: relative; display: grid; gap: 1rem; }
.cxm-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.cxm-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cxm-elegir[hidden] { display: none; }
.cxm-elegir label { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--gris); }
.cxm-elegir select { padding: .4rem 2rem .4rem .6rem; border: 1px solid var(--c-borde); border-radius: 8px; font: 600 .88rem var(--display); color: var(--c-marino); background-color: #fff; }
.cxm-elegir .btn-texto { font-size: 1.1rem; padding: .2rem .4rem; }
.cxm-mesa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.modulo { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; border: 1px solid var(--c-borde); border-radius: 12px; overflow: hidden; min-width: 0; position: relative; }
.modulo[hidden] { display: none; }
.modulo-cabeza { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem .8rem; border-bottom: 1px solid var(--c-borde); min-width: 0; }
.modulo-cabeza .app-icono { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.modulo-cabeza .app-icono .ico { width: 16px; height: 16px; }
.modulo-cabeza h2 { margin: 0; font: 700 .98rem var(--display); color: var(--c-marino); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modulo-cabeza .app-dato { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.modulo-acciones { margin-left: auto; display: flex; gap: .2rem; flex: none; }
.modulo-boton { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--gris); cursor: pointer; }
.modulo-boton:hover, .modulo-boton:focus-visible { background: var(--c-fondo); border-color: var(--c-borde); color: var(--c-marino); }
.modulo-boton[aria-pressed="true"] { background: var(--c-marino); color: var(--c-marfil); }
.modulo-boton .ico { width: 17px; height: 17px; }
.modulo-marco { display: block; width: 100%; height: max(380px, calc(100dvh - 300px)); border: 0; background: var(--c-fondo); }
.cxm-mesa.dividida .modulo[data-lado="a"] { order: 1; }
.cxm-mesa.dividida .modulo[data-lado="b"] { order: 2; }
.cxm-mesa.dividida .modulo-marco { height: max(420px, calc(100dvh - 250px)); }
.modulo.enfocado { position: fixed; inset: .7rem; z-index: 400; box-shadow: 0 0 0 100vmax rgba(23,42,53,.5), 0 20px 50px rgba(0,0,0,.25); }
.modulo.enfocado .modulo-marco { height: 100%; }
body.cxm-enfoque { overflow: hidden; }
.cxm-pie { margin: 0; font-size: .85rem; }
@media (max-width: 1000px) {
  .cxm-mesa, .cxm-mesa.dividida { grid-template-columns: minmax(0, 1fr); }
  .modulo-marco, .cxm-mesa.dividida .modulo-marco { height: max(420px, 70dvh); }
  .modulo.enfocado { inset: 0; border-radius: 0; }
}
@media (max-width: 520px) { .modulo-cabeza .app-dato, .modulo-cabeza .chip-reco { display: none; } .segmentos button { padding: .45rem .6rem; } }

/* Una app dentro de un módulo: solo el área de trabajo */
body.en-modulo { background: var(--c-fondo); }
body.en-modulo .encabezado, body.en-modulo .consola-lateral, body.en-modulo .pie, body.en-modulo .saltar, body.en-modulo .cl-mostrar { display: none !important; }
body.en-modulo .consola { grid-template-columns: minmax(0, 1fr); min-height: 0; background: none; }
body.en-modulo .consola-trabajo { padding: .9rem 1rem 1.5rem; gap: .9rem; }
body.en-modulo .app-barra .app-icono, body.en-modulo .app-titulo p { display: none; }
body.en-modulo .app-titulo { min-width: 8rem; }
body.en-modulo .app-titulo h1 { font-size: 1.15rem; }
body.en-modulo .app-barra-fila { gap: .6rem; }
body.en-modulo .app-migas { display: none; }
html:has(body.en-modulo) { font-size: 14px; }

/* Celular: sombras en las orillas del menú deslizable para que se note que hay más opciones */
@media (max-width: 1000px) {
  .consola-lateral { scroll-behavior: smooth; scrollbar-width: none; }
  .consola-lateral::-webkit-scrollbar { display: none; }
  .consola-lateral.hay-der { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .consola-lateral.hay-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
  .consola-lateral.hay-izq.hay-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}

/* Aviso para confirmar el correo, arriba del área de trabajo */
.aviso-verificar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; padding: .75rem 1rem; border: 1px solid #E8C9A8; background: #FBF1E6; border-radius: 12px; }
.aviso-verificar p { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .93rem; color: var(--c-tinta, #172A35); }
.aviso-verificar .ico { width: 20px; height: 20px; flex: none; stroke: #B5652F; fill: none; stroke-width: 1.6; margin-top: .1rem; }
.chip-riesgo { display: inline-block; font-size: .74rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: #FBE7DC; color: #9A4A22; vertical-align: middle; }

/* Inventario dentro del panel de producto */
.inventario-panel { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--c-borde); }
.inventario-panel h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.inventario-mov .opciones-segmento { margin-bottom: .6rem; }
.lista-inventario { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .1rem; }
.lista-inventario li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--c-borde); font-size: .9rem; }
.lista-inventario small { display: block; color: var(--c-gris, #5E6B72); font-size: .8rem; }
.lista-inventario b.mas { color: #2A7466; } .lista-inventario b.menos { color: #9A4A22; }
.panel-cabeza-acciones { display: inline-flex; gap: .4rem; flex-wrap: wrap; font-size: .9rem; }
.aviso-alerta { background: #FBF1E6; border: 1px solid #E8C9A8; color: #6B3A17; }
td .chip-riesgo { display: table; margin: .2rem 0 0 auto; }

/* ---------- Apps conectadas ---------- */
/* Home: salud del negocio */
.salud .panel-cabeza h2 { display: inline-flex; align-items: center; gap: .5rem; }
.salud .panel-cabeza h2 .ico { width: 20px; height: 20px; color: var(--c-turquesa-texto); }
.salud-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.salud-numeros a { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border-radius: 12px; background: var(--c-fondo); color: inherit; text-decoration: none; }
.salud-numeros a:hover { background: #EEECE5; }
.salud-numeros span { font: 500 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.salud-numeros strong { font: 800 1.55rem/1.1 var(--display); }
.salud-numeros strong small { font: 600 .85rem var(--cuerpo); color: var(--gris); }
.salud-numeros > a > small { color: var(--gris); font-size: .8rem; }
.salud-numeros .sube { color: var(--c-turquesa-texto); }
.salud-numeros .baja { color: #A0532F; }
.salud-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.salud-lista a { display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: 10px; border: 1px solid var(--c-borde); color: inherit; text-decoration: none; font-weight: 600; font-size: .93rem; }
.salud-lista a:hover { border-color: var(--c-marino); }
.salud-lista i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-datos); }
.salud-lista span { flex: 1; min-width: 0; }
.salud-lista b { color: var(--gris); }
.salud-alta i { background: #C8643A; }
.salud-media i { background: #E2A93B; }
.salud-buena i { background: var(--c-turquesa); }
.salud-ok { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--c-turquesa-texto); font-weight: 600; }
.salud-ok .ico { width: 20px; height: 20px; }

/* Bitácora: calificación y responder con plantilla */
.chip-calif { display: inline-block; font: 600 .74rem var(--mono); padding: .05rem .45rem; border-radius: 999px; background: #E3F2EE; color: #22665A; vertical-align: 1px; }
.chip-calif.calif-1, .chip-calif.calif-2 { background: #FBE7DC; color: #9A4A22; }
.chip-calif.calif-3 { background: #F6EED8; color: #74591A; }
.responder-cliente { border: 1px solid var(--c-borde); border-radius: 12px; background: var(--c-fondo); padding: 0 1rem; }
.responder-cliente summary { display: flex; align-items: center; gap: .5rem; padding: .8rem 0; cursor: pointer; font-weight: 700; color: var(--c-turquesa-texto); }
.responder-cliente summary .ico { width: 18px; height: 18px; }
.responder-cliente[open] { padding-bottom: 1rem; }
.responder-cliente .campo { margin-bottom: .8rem; }
.responder-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.responder-acciones .ayuda { margin: 0; flex-basis: 100%; }

/* Clientes: tarjeta de sellos y sugerencias en la ficha */
.ficha-datos .tarjeta-sellos { display: block; width: 100%; box-sizing: border-box; grid-template-columns: none; border-top: 0; margin-top: .4rem; padding: .9rem 1rem; border-radius: 12px; background: var(--c-fondo); }
.tarjeta-sellos p { margin: 0 0 .5rem; font-size: .9rem; }
.sellos-puntos { display: flex; flex-wrap: wrap; gap: .3rem; }
.sellos-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-datos); }
.sellos-puntos i.lleno { background: var(--c-turquesa); border-color: var(--c-turquesa); }
.tarjeta-sellos.listo { background: #FBF1E6; }
.tarjeta-sellos.listo .sellos-puntos i.lleno { background: var(--c-coral); border-color: var(--c-coral); }
.ficha-sugerencia { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .8rem; }
.ficha-sugerencia > .ico { flex: none; width: 20px; height: 20px; }
.ficha-sugerencia > span { flex: 1; min-width: 14rem; }
/* Caja y ventas: ajustes de lealtad y encuesta */
.ajustes-lealtad summary { display: flex; cursor: pointer; list-style: none; }
.ajustes-lealtad summary::-webkit-details-marker { display: none; }
.ajustes-lealtad summary > span { display: flex; flex-direction: column; gap: .15rem; }
.ajustes-lealtad summary strong { font-size: 1.05rem; }
.ajustes-lealtad summary small { color: var(--gris); }
.ajustes-lealtad summary::after { content: "Configurar"; margin-left: auto; align-self: center; font-weight: 700; font-size: .88rem; color: var(--c-turquesa-texto); }
.ajustes-lealtad[open] summary::after { content: "Cerrar"; }
.ajustes-lealtad form { margin-top: 1rem; }

/* Nómina */
.tabla-nomina td { vertical-align: middle; }
.tabla-nomina input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--c-turquesa); }
.tabla-nomina .monto-nomina { width: 9rem; padding: .45rem .6rem; border: 1px solid var(--c-borde); border-radius: 8px; text-align: right; font-family: var(--mono); }
.lista-nomina { list-style: none; margin: 0; padding: 0; }
.lista-nomina > li { border-bottom: 1px solid var(--c-borde); }
.lista-nomina summary { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; cursor: pointer; }
.lista-nomina summary b { font-family: var(--mono); white-space: nowrap; }
.lista-nomina ul { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 1rem; }
.lista-nomina ul li { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .92rem; color: var(--gris); }
.lista-nomina form { margin: 0 0 .8rem 1rem; }
@media (max-width: 700px) { .tabla-nomina .monto-nomina { width: 6.5rem; } }

/* Mi plan (cuenta/planes.php) */
.plan-actual { display: grid; gap: 1rem; margin-top: 1rem; }
.plan-actual-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.plan-actual-cabeza h2 { margin: .1rem 0 .2rem; font-size: 1.6rem; }
.plan-actual-cabeza p { margin: 0; }
.plan-actual .app-stats strong small { font-size: .8rem; font-weight: 500; color: var(--gris); }
.planes-cuenta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.plan-tarjeta { display: flex; flex-direction: column; gap: .5rem; }
.plan-tarjeta h3 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.2rem; }
.plan-tarjeta p { margin: 0; }
.plan-tarjeta .lista-check { margin: .4rem 0 .6rem; flex: 1; }
.plan-tarjeta.es-actual { border-color: var(--c-turquesa, #55B8A5); box-shadow: 0 0 0 1px var(--c-turquesa, #55B8A5) inset; }
.plan-precio { font-size: 1.7rem; font-weight: 800; color: var(--c-tinta, #172A35); }
.plan-precio small { font-size: .82rem; font-weight: 500; color: var(--gris); }
.plan-anual { font-size: .86rem; }
.plan-pedir { display: grid; gap: .7rem; justify-items: start; }
.plan-consultoria { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.plan-consultoria h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.plan-consultoria p { margin: 0; max-width: 60ch; }
.plan-pago { margin: 1rem 0 0; font-size: .9rem; max-width: 80ch; }
.equipo-stats .btn-texto { font-size: .8rem; padding: 0; }
@media (max-width: 900px) { .planes-cuenta { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================
   Mi cuenta v3 (31 oct 2026): menú con grupos desplegables, menú lateral que se oculta,
   Home con el logo de la empresa, camino delgado que late y accesos a las apps más usadas,
   letras más grandes en toda la consola
   ========================================================== */

/* ---------- Letras más grandes ---------- */
/* En laptops de pantalla baja el sitio reduce el rem (neural.css); en la consola no:
   ahí se trabaja muchas horas y se tiene que leer cómodo */
@media (min-width: 881px) and (max-height: 800px) {
  html:has(body.consola-cuenta) { font-size: 16px; }
}
.consola-etiqueta { font-size: .78rem; }
.panel h2 { font-size: 1.22rem; }
.panel-cabeza a { font-size: .95rem; }
.cl-item { font-size: 1.02rem; }
.cl-item small { font-size: .8rem; }
.cl-cuenta strong { font-size: 1.02rem; }
.cl-cuenta small { font-size: .76rem; }
.bienvenida h1 { font-size: clamp(2.2rem, 4.2vw, 3.1rem); }
.frase-dia { font-size: 1.15rem; }
.indicador span, .salud-numeros span { font-size: .78rem; }
.indicador strong { font-size: 2.15rem; }
.indicador small, .salud-numeros > a > small { font-size: .9rem; }
.salud-numeros strong { font-size: 1.85rem; }
.salud-lista a { font-size: 1rem; }
.app-titulo h1 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); }
.app-titulo p { font-size: 1rem; }
.app-migas { font-size: .9rem; }
.app-stats span { font-size: .74rem; }
.app-stats strong { font-size: 1.75rem; }
.app-stats small { font-size: .82rem; }
.app-dato { font-size: .78rem; }
.app-mosaico strong { font-size: 1.1rem; }
.app-mosaico-texto span { font-size: .92rem; }
.tabla-app td { font-size: .97rem; }
.wiki-pestanas a { font-size: 1rem; }
.lista-paginas strong { font-size: 1.05rem; }
.lista-paginas small { font-size: .9rem; }
.barras-areas li { font-size: .95rem; }
.cc-mini-total { font-size: 2.8rem; }
.modulo-cabeza h2 { font-size: 1.1rem; }
.tarea-texto strong { font-size: 1.04rem; }
.tarea-texto small { font-size: .9rem; }
.corte-cabeza h2 { font-size: 1.65rem; }
.corte-lado h2 { font-size: 1.15rem; }
.plan-tarjeta h3 { font-size: 1.35rem; }
.plan-precio { font-size: 2.1rem; }
.btn-chico { font-size: .94rem; }

/* ---------- Menú lateral: grupos desplegables ---------- */
.cl-grupo-cabeza { display: flex; align-items: center; gap: .2rem; }
.cl-grupo-cabeza .cl-item { flex: 1; min-width: 0; }
.cl-item.en-grupo { color: var(--c-marino); }
.cl-item.en-grupo .ico { color: var(--c-turquesa-texto); }
.cl-desplegar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--gris); cursor: pointer; }
.cl-desplegar:hover, .cl-desplegar:focus-visible { background: rgba(23,42,53,.06); color: var(--c-marino); }
.cl-desplegar .ico { width: 16px; height: 16px; transition: transform .2s ease; }
.cl-grupo.abierto .cl-desplegar .ico { transform: rotate(180deg); }
/* Lo de adentro se despliega suave */
.cl-sub { list-style: none; margin: 0; padding: 0 0 0 1.9rem; display: grid; gap: .1rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; }
.cl-grupo.abierto .cl-sub { max-height: 32rem; opacity: 1; padding-top: .2rem; padding-bottom: .35rem; }
.cl-subitem { position: relative; display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; color: #3C4E58; text-decoration: none; font-size: .95rem; font-weight: 500; }
.cl-subitem::before { content: ""; position: absolute; left: -.95rem; top: 50%; width: .7rem; height: 1.5px; background: rgba(85,184,165,.45); }
.cl-subitem .ico { width: 16px; height: 16px; color: #7A8B93; }
.cl-subitem span { flex: 1; min-width: 0; }
.cl-subitem:hover { background: rgba(23,42,53,.045); color: var(--c-marino); }
.cl-subitem[aria-current="page"] { background: #fff; color: var(--c-marino); font-weight: 700; box-shadow: 0 1px 2px rgba(23,42,53,.06), inset 3px 0 0 var(--c-turquesa); }
.cl-subitem[aria-current="page"] .ico { color: var(--c-turquesa-texto); }
.cl-cuenta-num { flex: none; min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--c-coral); color: #fff; font: 700 .75rem/1.4 var(--cuerpo); text-align: center; }

/* ---------- Ocultar el menú lateral ---------- */
.cl-cuenta { position: relative; padding-right: 1.9rem; }
.cl-cuenta > span:nth-child(2) { flex: 1; min-width: 0; }
.cl-cuenta .cl-ocultar { position: absolute; top: .1rem; right: -.2rem; width: 30px; height: 30px; }
.cl-ocultar, .cl-mostrar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--gris); cursor: pointer; flex: none; }
.cl-ocultar:hover, .cl-ocultar:focus-visible { background: rgba(23,42,53,.06); color: var(--c-marino); }
.cl-mostrar { display: none; }
.consola.lateral-oculto { grid-template-columns: 0 minmax(0, 1fr); background: none; }
.consola.lateral-oculto .consola-lateral { visibility: hidden; padding: 0; border: 0; overflow: hidden; }
.consola.lateral-oculto .cl-mostrar { display: grid; position: fixed; left: .8rem; top: 84px; z-index: 45; background: #fff; border-color: var(--c-borde); box-shadow: 0 6px 18px -10px rgba(23,42,53,.5); color: var(--c-marino); }
.consola.lateral-oculto .cl-mostrar .ico { transform: scaleX(-1); }
.consola.lateral-oculto .consola-trabajo { padding-left: clamp(3.6rem, 4vw, 4.4rem); }
.consola.lateral-anima { transition: grid-template-columns .22s ease; }
@media (max-width: 1000px) {
  .cl-ocultar, .consola .cl-mostrar, .consola.lateral-oculto .cl-mostrar { display: none; }
  .consola.lateral-oculto { grid-template-columns: 1fr; }
  .consola.lateral-oculto .consola-lateral { visibility: visible; padding: .5rem .8rem; border-bottom: 1px solid var(--c-borde); }
  .consola.lateral-oculto .consola-trabajo { padding-left: clamp(1rem, 3vw, 2.6rem); }
  /* En la barra de arriba, el grupo abierto muestra sus opciones en la misma fila */
  .cl-grupo { display: flex; align-items: center; }
  .cl-grupo-cabeza { flex: none; }
  .cl-desplegar { width: 26px; }
  .cl-sub { display: flex; gap: .15rem; max-height: none; max-width: 0; padding: 0; opacity: 0; transition: max-width .25s ease, opacity .2s ease; }
  .cl-grupo.abierto .cl-sub { max-width: 80rem; padding: 0 .4rem 0 0; opacity: 1; }
  .cl-sub > li { flex: none; }
  .cl-subitem { white-space: nowrap; padding: .45rem .6rem; font-size: .9rem; background: rgba(85,184,165,.08); }
  .cl-subitem::before { display: none; }
  .cl-subitem[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-turquesa); }
}
@media (max-width: 480px) { .cl-subitem .ico { display: none; } }

/* ---------- Home: banner con el logo de la empresa ---------- */
.bienvenida-logo { justify-self: end; width: min(200px, 100%); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px rgba(85,184,165,.18), 0 0 46px rgba(85,184,165,.32); }
.bienvenida-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bienvenida-lado { display: grid; gap: .5rem; justify-items: center; }
.bienvenida-lado .bienvenida-arte { width: 100%; }
.bienvenida-subir { display: inline-flex; align-items: center; gap: .45rem; color: #CFE2DD; font-size: .88rem; text-decoration: none; border-bottom: 1px dashed rgba(207,226,221,.5); }
.bienvenida-subir:hover { color: #fff; }
.bienvenida-subir .ico { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .bienvenida-logo { order: -1; justify-self: start; width: 76px; border-radius: 14px; box-shadow: 0 0 0 4px rgba(85,184,165,.2); }
  .bienvenida-lado { display: none; }
}

/* ---------- Home: tu camino con Datsool, delgado y siempre latiendo ---------- */
.camino { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem 1.6rem; padding: .75rem 1.1rem; border-radius: 14px; background: #fff; border: 1px solid rgba(85,184,165,.45); animation: camino-late 2.8s ease-in-out infinite; }
@keyframes camino-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(85,184,165,0), 0 0 0 rgba(85,184,165,0); } 50% { box-shadow: 0 0 0 4px rgba(85,184,165,.14), 0 0 26px rgba(85,184,165,.28); } }
.camino-titulo h2 { margin: 0; font: 700 1.05rem/1.2 var(--display); color: var(--c-marino); max-width: 8.2rem; }
.camino-titulo .consola-etiqueta { display: block; margin-top: .15rem; }
.camino-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.camino-etapas li { position: relative; display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--gris); }
/* La línea entre etapas: llena hasta donde vas */
.camino-etapas li::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: #E5E3DB; z-index: 0; }
.camino-etapas li:first-child::before { display: none; }
.camino-etapas li.hecha::before, .camino-etapas li.actual::before { background: var(--c-turquesa); }
.camino-etapas i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #D5D3CA; }
.camino-etapas .hecha i { background: var(--c-turquesa); border-color: var(--c-turquesa); color: #fff; }
.camino-etapas .hecha i .ico { width: 11px; height: 11px; stroke-width: 3; }
.camino-etapas .hecha { color: var(--c-turquesa-texto); }
.camino-etapas .actual { color: var(--c-marino); font-weight: 800; }
.camino-etapas .actual i { background: var(--c-turquesa); border-color: #fff; box-shadow: 0 0 0 2px var(--c-turquesa); animation: camino-punto 1.8s ease-out infinite; }
@keyframes camino-punto { 0% { box-shadow: 0 0 0 2px var(--c-turquesa), 0 0 0 0 rgba(85,184,165,.6); } 70% { box-shadow: 0 0 0 2px var(--c-turquesa), 0 0 0 12px rgba(85,184,165,0); } 100% { box-shadow: 0 0 0 2px var(--c-turquesa), 0 0 0 0 rgba(85,184,165,0); } }
.camino-paso { display: flex; align-items: center; gap: 1rem; max-width: 30rem; }
.camino-paso p { margin: 0; font-size: .92rem; line-height: 1.35; color: var(--tinta); }
.camino-paso .consola-etiqueta { display: block; color: var(--c-turquesa-texto); margin-bottom: .1rem; }
.camino-paso .btn { flex: none; white-space: nowrap; }
/* En pantallas medianas cabe en una sola línea: el texto del paso queda en el botón (title) */
@media (max-width: 1500px) and (min-width: 701px) { .camino-paso p { display: none; } .camino { gap: .8rem 1.2rem; } }
@media (max-width: 700px) {
  .camino { grid-template-columns: minmax(0, 1fr); padding: .8rem .9rem; }
  .camino-titulo h2 { max-width: none; }
  /* En celular solo se lee el nombre de la etapa en la que vas */
  .camino-etapas li span { visibility: hidden; }
  .camino-etapas li.actual span { visibility: visible; white-space: nowrap; font-size: .85rem; }
  .camino-paso { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .camino, .camino-etapas .actual i { animation: none; } }

/* ---------- Home: tus apps más usadas ---------- */
.accesos .panel-cabeza { margin-bottom: .6rem; }
.accesos h2 { margin: 0; font: 700 1.22rem/1.3 var(--display); }
.accesos-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.acceso { display: flex; align-items: center; gap: .9rem; padding: .95rem 1.05rem; border-radius: 14px; background: #fff; border: 1px solid var(--c-borde); color: var(--tinta); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.acceso:hover { color: var(--tinta); border-color: var(--c-turquesa); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(23,42,53,.55); }
.acceso .app-icono { width: 46px; height: 46px; border-radius: 12px; }
.acceso .app-icono .ico { width: 22px; height: 22px; }
.acceso-texto { flex: 1; min-width: 0; }
.acceso strong { display: block; font: 700 1.1rem/1.25 var(--display); color: var(--c-marino); }
.acceso small { display: block; margin-top: .15rem; font: .8rem var(--mono); color: var(--c-turquesa-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acceso b { color: var(--gris); font-size: 1.2rem; transition: transform .15s; }
.acceso:hover b { transform: translateX(3px); color: var(--c-turquesa-texto); }
@media (max-width: 900px) { .accesos-fila { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CXM: sin pantalla de carga, los módulos aparecen en un instante ---------- */
.cxm-mesa .modulo { animation: modulo-entra .2s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes modulo-entra { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.modulo-marco { transition: opacity .15s ease; }
.modulo-marco.cargando { opacity: .35; }
/* Enfoque: una X clara para salir */
.modulo-salir { display: none; }
.modulo.enfocado .modulo-salir { display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .75rem 0 .55rem; border: 0; border-radius: 9px; background: var(--c-marino); color: var(--c-marfil); font: 700 .9rem var(--cuerpo); cursor: pointer; }
.modulo.enfocado .modulo-salir:hover { background: #22404F; }
.modulo.enfocado .modulo-salir .ico { width: 18px; height: 18px; }
.modulo.enfocado { animation: modulo-enfoca .18s ease-out; }
@keyframes modulo-enfoca { from { opacity: .6; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cxm-mesa .modulo, .modulo.enfocado { animation: none; } }

/* ---------- Mi empresa: pestañas Perfil · Equipo · Chat ---------- */
.pestanas-empresa { margin-bottom: .2rem; }
.pestanas-empresa + .wiki-pestanas { margin-top: -.4rem; }
.pestanas-empresa .pestana-numero, .wiki-pestanas .pestana-numero { margin-left: .2rem; }

/* ---------- Inventario y catálogo ---------- */
.inventario-resumen { margin-bottom: 0; }

/* ---------- Mi plan: interruptor mensual / anual que cambia los precios al instante ---------- */
.periodo-planes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.periodo-planes h2 { margin: 0; font: 700 1.3rem var(--display); }
.periodo-planes .opciones-segmento span { font-size: .95rem; padding: .55rem 1.1rem; }
.periodo-ahorro { margin-left: .35rem; padding: .1rem .45rem; border-radius: 999px; background: rgba(85,184,165,.18); color: var(--c-turquesa-texto); font-size: .75rem; }
.opciones-segmento input:checked + span .periodo-ahorro { background: var(--c-turquesa); color: var(--c-marino); }
.plan-precio [data-precio-anual], .planes-cuenta.ver-anual .plan-precio [data-precio-mensual] { display: none; }
.planes-cuenta.ver-anual .plan-precio [data-precio-anual] { display: inline; }
.plan-anual [data-anual-nota] { display: none; }
.planes-cuenta.ver-anual .plan-anual [data-mensual-nota] { display: none; }
.planes-cuenta.ver-anual .plan-anual [data-anual-nota] { display: inline; }
.plan-cambiar { display: grid; gap: .5rem; }
.plan-cambiar .btn { justify-content: center; }
.plan-cambiar .ayuda { margin: 0; font-size: .85rem; color: var(--gris); }
.plan-por-pagar { border-left: 4px solid var(--c-coral); }

/* ---------- Mi plan: confirmación, resultado, prueba temporal y cambio esperando pago ---------- */
.planes-cuenta [data-solo-anual], .planes-cuenta.ver-anual [data-solo-mensual] { display: none; }
.planes-cuenta.ver-anual [data-solo-anual] { display: inline; }
.lista-cambio { list-style: none; margin: .3rem 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.lista-cambio li { position: relative; padding-left: 1.6rem; line-height: 1.4; }
.lista-cambio li::before { position: absolute; left: 0; top: .02rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; font: 700 .75rem/1 var(--mono, monospace); }
.lista-cambio.gana li::before { content: "+"; background: rgba(85,184,165,.2); color: #2A7466; }
.lista-cambio.pierde li::before { content: "–"; background: rgba(217,154,120,.22); color: #8A4B2C; }
.plan-dialogo { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; border: 0; border-radius: 18px; padding: 1.5rem 1.6rem; background: #FFFFFF; color: #172A35; box-shadow: 0 24px 60px rgba(23,42,53,.28); }
.plan-dialogo::backdrop { background: rgba(23,42,53,.45); backdrop-filter: blur(2px); }
.plan-dialogo h3 { margin: 0 0 .8rem; font: 700 1.3rem var(--display); }
.plan-dialogo-sub { margin: .6rem 0 .1rem; font: 600 .78rem var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; color: #5B6B74; }
.plan-dialogo-caja { margin: .5rem 0; padding: .7rem .9rem; border-radius: 12px; background: #F2F0E9; font-size: .93rem; line-height: 1.45; }
.plan-dialogo .casilla { margin: .8rem 0 0; }
.plan-dialogo-botones { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.plan-resultado { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1rem; border: 1px solid rgba(85,184,165,.55); background: linear-gradient(135deg, rgba(85,184,165,.14), rgba(166,184,199,.12)); animation: plan-entra .5s ease-out both; outline: none; scroll-margin-top: 90px; }
.plan-resultado-pendiente { border-color: rgba(217,154,120,.6); background: linear-gradient(135deg, rgba(217,154,120,.14), rgba(242,240,233,.6)); }
.plan-resultado-bajo { border-color: #CBD3D8; background: #F7F6F1; }
.plan-resultado h2 { margin: 0 0 .4rem; font: 700 1.45rem var(--display); }
.plan-resultado p { margin: .2rem 0 .5rem; }
.plan-resultado-icono { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: #55B8A5; color: #172A35; animation: plan-pulso 1.6s ease-out 2; }
.plan-resultado-pendiente .plan-resultado-icono { background: #D99A78; }
.plan-resultado-bajo .plan-resultado-icono { background: #A6B8C7; }
.plan-resultado-icono .ico { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 2.2; }
.plan-pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0; padding: 0; }
.plan-pasos li { counter-increment: paso; display: grid; gap: .15rem; padding: .7rem .8rem; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid #DCE2E5; font-size: .9rem; }
.plan-pasos li::before { content: counter(paso); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: #E4E9EC; font: 700 .78rem var(--mono, monospace); }
.plan-pasos li.hecho::before { content: "✓"; background: #55B8A5; color: #172A35; }
.plan-pasos span { color: #5B6B74; font-size: .85rem; }
.plan-espera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; border-left: 4px solid #D99A78; }
.plan-espera h2 { margin: .35rem 0 .3rem; font-size: 1.15rem; }
.plan-espera p { margin: 0; }
.plan-espera-botones { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.plan-espera-botones form { margin: 0; }
.chip-espera, .chip-prueba { display: inline-block; margin: 0; padding: .18rem .55rem; border-radius: 999px; font: 600 .66rem var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.chip-espera { background: rgba(217,154,120,.22); color: #8A4B2C; }
.chip-prueba { background: rgba(44,106,160,.13); color: #2C6AA0; }
.plan-en-espera { border-color: #D99A78; box-shadow: 0 0 0 1px #D99A78 inset; }
.plan-recien { animation: plan-brilla 1.8s ease-out 1; }
.plan-prueba { margin-top: 1rem; border-left: 4px solid #2C6AA0; display: grid; gap: .9rem; }
.plan-prueba-cabeza { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.plan-prueba-cabeza h2 { margin: .4rem 0 .3rem; font: 700 1.35rem var(--display); }
.plan-prueba-cabeza p { margin: 0; max-width: 62ch; }
.plan-prueba-dias { flex: none; display: grid; justify-items: center; padding: .6rem .9rem; border-radius: 14px; background: rgba(44,106,160,.1); color: #2C6AA0; }
.plan-prueba-dias strong { font: 800 2rem/1 var(--display); }
.plan-prueba-dias span { font-size: .8rem; }
.barra-prueba { height: 8px; border-radius: 999px; background: #E4E9EC; overflow: hidden; }
.barra-prueba span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55B8A5, #2C6AA0); }
.plan-prueba-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.plan-prueba-columnas h3 { margin: 0 0 .3rem; font-size: 1rem; }
.plan-prueba .aviso { margin: 0; }
.texto-alerta { color: #8A4B2C; font-weight: 600; }
.plan-fin { display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: 14px; background: #FBF1E6; border: 1px solid #E8C9A8; color: #172A35; }
.plan-fin > .ico { flex: none; width: 22px; height: 22px; stroke: #B5652F; fill: none; stroke-width: 1.6; }
.plan-fin p { margin: .3rem 0; }
.plan-fin ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.plan-fin-botones { display: flex; gap: .8rem; align-items: center; }
.pausa-lugar { max-width: 40rem; margin: 3rem auto; }
@keyframes plan-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes plan-pulso { 0% { box-shadow: 0 0 0 0 rgba(85,184,165,.55); } 100% { box-shadow: 0 0 0 16px rgba(85,184,165,0); } }
@keyframes plan-brilla { 0% { box-shadow: 0 0 0 0 rgba(85,184,165,.6); } 100% { box-shadow: 0 0 0 18px rgba(85,184,165,0); } }
@media (prefers-reduced-motion: reduce) { .plan-resultado, .plan-resultado-icono, .plan-recien { animation: none; } }
@media (max-width: 700px) {
  .plan-pasos, .plan-prueba-columnas { grid-template-columns: minmax(0, 1fr); }
  .plan-resultado { flex-direction: column; }
  .plan-prueba-cabeza { flex-direction: column-reverse; }
  .plan-dialogo-botones .btn { flex: 1; justify-content: center; }
}
.aviso-prueba-registro { margin: 0; padding: .7rem .9rem; border-radius: 12px; background: rgba(44,106,160,.08); border: 1px solid rgba(44,106,160,.25); font-size: .9rem; line-height: 1.45; }
.pausa-lugar h1 { font: 700 1.9rem/1.15 var(--display); margin: 0 0 1rem; letter-spacing: -.01em; }
/* ---------- CXM personalizable (cxm.js): cualquier número de apps, en el orden y tamaño que
   elija cada persona; columnas y alto de fila se calculan según cuántas hay a la vista ---------- */
.cxm-barra { justify-content: space-between; }
.cxm-personalizar-btn { display: inline-flex; align-items: center; gap: .45rem; }
.cxm-personalizar-btn .ico { width: 16px; height: 16px; }
.cxm-personalizar-btn[aria-expanded="true"] { background: var(--c-marino); color: var(--c-marfil); border-color: var(--c-marino); }
.cxm-resumen { margin: 0; font-size: .85rem; }
.cxm-mesa[data-cols] { grid-template-columns: repeat(var(--cxm-cols, 2), minmax(0, 1fr)); grid-auto-rows: var(--cxm-fila, 420px); grid-auto-flow: row; }
.cxm-mesa[data-cols] .modulo { height: 100%; }
.cxm-mesa[data-cols] .modulo-marco { height: 100%; }
.cxm-mesa[data-cols] .modulo.enfocado { height: auto; }
.cxm-panel { position: relative; z-index: 2; display: grid; gap: 1rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--c-borde); border-radius: 14px; box-shadow: 0 10px 30px rgba(23,42,53,.08); }
.cxm-panel[hidden] { display: none; }
.cxm-panel-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cxm-panel-cabeza h2 { margin: 0 0 .2rem; font: 700 1.1rem var(--display); color: var(--c-marino); }
.cxm-panel-cabeza p { margin: 0; font-size: .88rem; color: var(--gris); max-width: 60ch; }
.cxm-listos { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.cxm-listos > span { font-size: .8rem; font-weight: 600; color: var(--gris); margin-right: .2rem; }
.chip-boton { padding: .35rem .75rem; border: 1px solid var(--c-borde); border-radius: 999px; background: #fff; font: 600 .82rem var(--display); color: var(--c-marino); cursor: pointer; }
.chip-boton:hover, .chip-boton:focus-visible { border-color: rgba(85,184,165,.7); background: rgba(85,184,165,.08); }
.cxm-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: .5rem; }
.cxm-lista li { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border: 1px solid var(--c-borde); border-radius: 10px; background: var(--c-fondo); min-width: 0; touch-action: none; }
.cxm-lista li.apagada { opacity: .6; background: transparent; border-style: dashed; }
.cxm-lista li.arrastrando { opacity: 1; box-shadow: 0 8px 22px rgba(23,42,53,.16); border-color: rgba(85,184,165,.8); background: #fff; }
.cxm-asa { display: grid; gap: 3px; padding: .45rem .3rem; cursor: grab; flex: none; }
.cxm-asa i { display: block; width: 12px; height: 2px; border-radius: 2px; background: var(--gris); opacity: .6; }
li.arrastrando .cxm-asa { cursor: grabbing; }
.cxm-ver { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; font: 600 .9rem var(--display); color: var(--c-marino); cursor: pointer; }
.cxm-ver > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxm-ver input { width: 18px; height: 18px; accent-color: var(--c-marino); flex: none; }
.cxm-ver .app-icono { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.cxm-ver .app-icono .ico { width: 15px; height: 15px; }
.cxm-lista select { flex: none; padding: .3rem 1.6rem .3rem .5rem; border: 1px solid var(--c-borde); border-radius: 8px; font: 600 .8rem var(--display); color: var(--c-marino); background-color: #fff; }
.cxm-mover { display: flex; flex: none; }
.cxm-mover .modulo-boton { width: 28px; height: 28px; font-size: .95rem; }
.cxm-panel-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.cxm-columnas { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.cxm-columnas > span { font-size: .8rem; font-weight: 600; color: var(--gris); }
.cxm-columnas .segmentos button { padding: .35rem .7rem; }
.cxm-guardado { font-size: .8rem; }
.cxm-agregar { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .9rem 1rem; border: 1.5px dashed rgba(85,184,165,.6); border-radius: 12px; background: rgba(85,184,165,.05); font: 600 .9rem var(--display); color: var(--c-turquesa-texto); cursor: pointer; position: relative; z-index: 1; }
.cxm-agregar[hidden] { display: none; }
.cxm-agregar:hover, .cxm-agregar:focus-visible { background: rgba(85,184,165,.12); }
.cxm-agregar .ico { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .cxm-resumen { width: 100%; }
  .cxm-lista li { flex-wrap: wrap; }
  .cxm-ver { flex-basis: calc(100% - 40px); }
  .cxm-lista select { margin-left: 32px; }
  .cxm-mover { margin-left: auto; }
  .cxm-panel { padding: 1rem; }
}
/* En módulos angostos (3 columnas) se prioriza el nombre de la app sobre su dato */
.cxm-mesa[data-cols] .modulo { container-type: inline-size; }
@container (max-width: 420px) { .modulo-cabeza .app-dato, .modulo-cabeza .chip-reco { display: none; } }
/* ---------- Entrar con Google ---------- */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; max-width: 26rem;
  background: #fff; color: #1f1f1f; border: 1px solid #c8ccd0; border-radius: 999px; padding: .75rem 1.2rem;
  font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-google:hover, .btn-google:focus-visible { background: #f6f8fa; color: #1f1f1f; border-color: #9aa1a8; }
.btn-google svg { flex: none; }
.separador-o { display: flex; align-items: center; gap: .8rem; max-width: 26rem; margin: .4rem 0 .2rem; color: var(--tenue, #6b7177); font-size: .9rem; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }