/* CRM Web: pensado primero para celular (se suma a portal.css). Los componentes se adaptan a su propio ancho (@container). */
.frescura { margin: -.25rem 0 1.25rem; font-size: .85rem; }
.grupo { margin: 1.5rem 0; }
.grupo h2 { display: flex; gap: .5rem; align-items: center; margin: 0 0 .65rem; }
.grupo-vencidas h2 { color: var(--error); }
.cuenta { background: var(--papel-2); color: var(--suave); border-radius: 999px; padding: .05rem .6rem; font-size: .8rem; font-weight: 700; }
.grupo-vencidas .cuenta { background: var(--error-fondo); color: var(--error); }
.monto { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Lista de actividades / oportunidades: tarjeta que cambia a columnas cuando tiene espacio */
.item-envoltura { container-type: inline-size; }
.item {
  display: block; padding: .85rem 1rem; margin-block-end: .6rem; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); color: inherit; text-decoration: none; box-shadow: var(--sombra);
}
.item-enlace { display: grid; gap: .2rem; min-block-size: 44px; transition: border-color .15s, box-shadow .15s; }
.item-enlace:hover, .item-enlace:active { border-color: var(--marca); }
.item-titulo { font-weight: 600; margin: 0 0 .2rem; }
.item p { margin: 0; }
.item-error { border-color: color-mix(in srgb, var(--error) 45%, var(--linea)); background: color-mix(in srgb, var(--error-fondo) 55%, var(--papel)); }
.item-pendiente { border-style: dashed; }
.tipo { display: inline-block; background: var(--marca-suave); color: var(--marca); border-radius: 6px; padding: 0 .45rem; font-size: .75rem; font-weight: 700; margin-inline-end: .3rem; }
.num { font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .item-enlace { grid-template-columns: 2fr 2fr 1fr; align-items: center; gap: 1rem; }
  .item-enlace .suave:last-child { grid-column: 1 / -1; }
}

/* Captura */
.accion { margin: .5rem 0; }
.accion > summary { cursor: pointer; list-style: none; display: inline-flex; }
.accion > summary::-webkit-details-marker { display: none; }
.accion[open] > summary { margin-block-end: .5rem; }
.boton.chico { padding: 0 .9rem; font-size: .88rem; min-block-size: max(var(--objetivo), 2.2rem); }
.form-corto { display: flex; gap: .5rem; margin-block-start: .4rem; flex-wrap: wrap; }
.form-corto input[type=text] { flex: 1 1 14rem; min-inline-size: 0; }
.peligro > summary { color: var(--error); }
.estado.pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.grupo select, .grupo input, .tarjeta select, .tarjeta input { max-inline-size: 100%; }

/* Verificación en dos pasos: el QR necesita margen blanco (quiet zone) para que los lectores lo reconozcan */
.qr { background: #fff; padding: 20px; inline-size: max-content; max-inline-size: 100%; border: 1px solid var(--linea); border-radius: 12px; margin: .5rem 0 1rem; }
.qr svg { inline-size: 240px; block-size: 240px; max-inline-size: 100%; display: block; }
.clave { font-size: 1.15rem; letter-spacing: .08em; word-break: break-all; user-select: all; background: var(--papel-2); padding: .35rem .6rem; border-radius: 8px; }

/* Cifras clave arriba de Mi día (estilo app móvil) */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-block-end: .5rem; }
.kpi { display: grid; gap: .1rem; padding: .8rem .9rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); text-decoration: none; color: var(--texto); }
.kpi .num { font-size: clamp(1.5rem, 1rem + 3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.kpi .etq { color: var(--suave); font-size: .82rem; font-weight: 500; }
.kpi-vencidas .num { color: var(--error); }
.kpi-hoy .num { color: var(--marca); }
.kpi:hover { border-color: var(--marca); }
.grupo { scroll-margin-block-start: 8rem; }

/* Grupos colapsables (Mi día, Capturas): el título es el botón */
details.grupo > summary { list-style: none; cursor: pointer; display: block; min-block-size: var(--objetivo); border-radius: 10px; }
details.grupo > summary::-webkit-details-marker { display: none; }
details.grupo > summary h2 { margin: 0; }
details.grupo > summary h2::after { content: ""; margin-inline-start: auto; inline-size: .55rem; block-size: .55rem; border-inline-end: 2px solid var(--suave); border-block-end: 2px solid var(--suave); transform: rotate(45deg); transition: transform .15s; }
details.grupo[open] > summary h2::after { transform: rotate(225deg); }
details.grupo > summary + * { margin-block-start: .65rem; }

/* Actividad compacta: texto a la izquierda y botón "Hecha" a la derecha */
.item-actividad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.item-actividad .item-cuerpo { flex: 1 1 16rem; min-inline-size: 0; }
.item-actividad .accion { margin: 0; }
.item-actividad .accion[open] { flex-basis: 100%; }
.item-ok { opacity: .85; }

/* Detalle de oportunidad: acciones de registro como fichas en una fila (antes eran 3 botones apilados) */
.acciones-oportunidad { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.acciones-oportunidad > h2 { flex: 0 0 100%; margin-block-end: .15rem; }
.acciones-oportunidad > .accion { margin: 0; }
.acciones-oportunidad > .accion[open] { flex: 0 0 100%; order: 1; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-block-size: max(var(--objetivo), 2.5rem); padding: 0 1rem 0 .8rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca); font-weight: 600; font-size: .92rem; cursor: pointer; list-style: none; border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.chip::-webkit-details-marker { display: none; }
.chip:hover { border-color: var(--marca); }
.chip .ico { inline-size: 1.1rem; block-size: 1.1rem; }
details[open] > .chip { background: var(--marca); color: var(--marca-texto); }
.chip-peligro { background: var(--error-fondo); color: var(--error); }
.peligro > .chip-peligro:hover { border-color: var(--error); }
details.peligro[open] > .chip-peligro { background: var(--error); color: #fff; }
.acciones-oportunidad .accion > .tarjeta { margin-block-start: .5rem; max-inline-size: none; }

/* Chip con el nombre de la oportunidad dentro de las listas */
.item .suave a { display: inline-block; padding: 0 .5rem; border-radius: 6px; background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.item .suave a:hover { text-decoration: none; background: color-mix(in srgb, var(--marca) 18%, var(--marca-suave)); }

/* ---- Gráficas de Equipo (sin librerías): una sola tonalidad de la marca, etiquetas directas, tabla disponible en "Ver tabla" ---- */
.grafica { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); margin-block-end: .6rem; container-type: inline-size; }
.hero-dato { display: grid; margin-block-end: .85rem; }
.hero-num { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hero-etq { color: var(--suave); font-size: .88rem; }
.muestra { display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 3px; margin-inline: .15rem .25rem; vertical-align: -.05rem; }
.muestra-monto { background: color-mix(in srgb, var(--marca) 30%, var(--papel-2)); }
.muestra-pond { background: var(--marca); }
.muestra-gris { background: var(--linea); }
.leyenda { margin: .75rem 0 0; font-size: .8rem; color: var(--suave); }

/* Barras horizontales */
.hbar { display: grid; grid-template-columns: minmax(5.5rem, 28%) 1fr auto; align-items: center; gap: .6rem; padding-block: .3rem; }
.hbar-etq { font-size: .88rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hbar-etq small { color: var(--suave); font-weight: 500; margin-inline-start: .2rem; }
.hbar-pista { position: relative; block-size: .85rem; border-radius: 0 6px 6px 0; }
.hbar-barra, .hbar-ponderado { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); min-inline-size: 2px; border-radius: 0 4px 4px 0; }
.hbar-barra { background: color-mix(in srgb, var(--marca) 30%, var(--papel-2)); }
.hbar-ponderado { background: var(--marca); }
.hbar-cuota .hbar-barra { background: var(--marca); }
.hbar-cuota .hbar-barra.logrado { background: var(--ok); }
.hbar-cuota .hbar-pista { background: var(--papel-2); border-radius: 6px; }
.hbar-cuota .hbar-barra { border-radius: 6px; }
.hbar-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; text-align: end; min-inline-size: 3.2rem; }
.hbar-val .ico { inline-size: 1rem; block-size: 1rem; color: var(--ok); vertical-align: -.15rem; stroke-width: 2.4; }
@container (inline-size < 22rem) { .hbar { grid-template-columns: 1fr auto; } .hbar-etq { grid-column: 1 / -1; } .hbar-pista { grid-column: 1; } }

/* Columnas por mes */
.columnas { display: flex; gap: .5rem; align-items: stretch; justify-content: space-around; }
.col { flex: 1 1 0; max-inline-size: 5rem; display: grid; grid-template-rows: auto 9rem auto; justify-items: center; gap: .3rem; }
.col-val { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.col-pista { position: relative; inline-size: 100%; max-inline-size: 2.6rem; }
.col-barra, .col-pond { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--h); min-block-size: 2px; border-radius: 6px 6px 0 0; }
.col-barra { background: color-mix(in srgb, var(--marca) 30%, var(--papel-2)); }
.col-pond { background: var(--marca); }
.col-etq { font-size: .8rem; color: var(--suave); text-transform: capitalize; }

/* Dona de win rate */
.dona-fila { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.dona { --p: 0; position: relative; inline-size: 8.5rem; aspect-ratio: 1; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--marca) calc(var(--p) * 1%), var(--linea) 0); }
.dona::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: var(--papel); }
.dona > span { position: relative; }
.dona-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.dona-etq { font-size: .75rem; color: var(--suave); }
.dona-datos p { margin: .2rem 0; }

/* Tabla de respaldo plegada */
details.ver-tabla { margin-block: .5rem 1rem; }
details.ver-tabla > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-block-size: var(--objetivo); color: var(--suave); font-size: .88rem; font-weight: 600; }
details.ver-tabla > summary::-webkit-details-marker { display: none; }
details.ver-tabla > summary::before { content: "▸"; margin-inline-end: .4rem; transition: transform .15s; }
details.ver-tabla[open] > summary::before { transform: rotate(90deg); }
details.ver-tabla > summary:hover { color: var(--marca); }