/* 06 · Diseño (Ola 2) · pendientes por cliente, lotes, carga */

/* tarjeta de cliente en Pendientes: misma cáscara que los lotes, sin flecha */
.grupo.tarea.m-diseno { border-left-color: var(--primary); }
.lote-toggle.v2.estatico { cursor: default; }
.lote-toggle.v2.estatico:hover { background: transparent; }
.clientes-diseno { display: flex; flex-direction: column; gap: 8px; }

/* chips de conteo */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--borde);
        background: var(--papel); font: 600 12px var(--fuente-ui); color: var(--texto); white-space: nowrap; }
.chip b { font-weight: 800; }
.chip.cero { color: var(--g400); background: transparent; border-style: dashed; }
.chip.abrible:not(.cero) { cursor: pointer; }
.chip.abrible:not(.cero):hover { filter: brightness(.96); }
.chip.crear:not(.cero)      { color: var(--primary-dark); background: var(--primary-light); border-color: rgba(77, 74, 157, .35); }
.chip.ajuste:not(.cero)     { color: var(--aviso); background: var(--aviso-suave); border-color: var(--aviso); }
.chip.revision:not(.cero)   { color: var(--acento); background: var(--acento-suave); border-color: var(--acento); }
.chip.aprobar:not(.cero)    { color: #0F766E; background: rgba(20, 184, 166, .12); border-color: rgba(20, 184, 166, .45); }
.chip.inpage:not(.cero)     { color: #7C3AED; background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .4); }
.chip.comentario:not(.cero) { color: var(--error); background: var(--error-suave); border-color: var(--error); }
.chip.nuevo:not(.cero)      { color: var(--bien); background: var(--bien-suave); border-color: var(--bien); }
.chip.lote:not(.cero)       { color: var(--g600); background: var(--g50); }

/* estados de ficha dentro de las listas */
.badge.estado-ficha { font-size: 11px; letter-spacing: .02em; }
.badge.estado-ficha.sin_material { color: var(--g500); }
.badge.estado-ficha.en_trafico, .badge.estado-ficha.creando { color: var(--primary-dark); background: var(--primary-light); border-color: rgba(77, 74, 157, .35); }
.badge.estado-ficha.revision_interna, .badge.estado-ficha.revision_desarrollo { color: var(--acento); background: var(--acento-suave); border-color: var(--acento); }
.badge.estado-ficha.por_aprobar { color: #0F766E; background: rgba(20, 184, 166, .12); border-color: rgba(20, 184, 166, .45); }
.badge.estado-ficha.ajustar, .badge.estado-ficha.corregir { color: var(--aviso); background: var(--aviso-suave); border-color: var(--aviso); }
.badge.estado-ficha.aprobado { color: var(--bien); background: var(--bien-suave); border-color: var(--bien); }

/* lotes */
.grupo.tarea.m-lote-en_trafico { border-left-color: var(--g400); }
.grupo.tarea.m-lote-creando { border-left-color: var(--primary); }
.grupo.tarea.m-lote-revision { border-left-color: var(--acento); }
.grupo.tarea.m-lote-revision_desarrollo { border-left-color: var(--error); }
.grupo.tarea.m-lote-completado { border-left-color: var(--bien); opacity: .85; }
.badge.estado-lote { font-weight: 800; }
.badge.estado-lote.revision { color: var(--acento); background: var(--acento-suave); border-color: var(--acento); }
.badge.estado-lote.revision_desarrollo { color: var(--error); background: var(--error-suave); border-color: var(--error); }
.badge.estado-lote.creando { color: var(--primary-dark); background: var(--primary-light); border-color: rgba(77, 74, 157, .35); }
.badge.estado-lote.completado { color: var(--bien); background: var(--bien-suave); border-color: var(--bien); }
.badge.tipo { font-family: var(--mono); }
.badge.disenadora { color: var(--texto); }
.badge.disenadora.vacia { color: var(--g400); border-style: dashed; }
.badge.vence { color: var(--g600); }
.badge.vence.hoy { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-suave); }
.badge.vence.tarde { color: var(--error); border-color: var(--error); background: var(--error-suave); }
.comentarios-lote { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.comentarios-lote li { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--papel); }
.pubs-zona h4 { margin: 10px 0 6px; font-size: 13px; color: var(--tenue); }

/* carga */
table.carga-diseno td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.carga-diseno td.error { color: var(--error); font-weight: 700; }
table.carga-diseno tr.tenue td { color: var(--g400); }
table.carga-diseno .etiqueta { margin-left: 6px; }

/* ---- ver como ---- */
.ver-como { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--g50); font-size: 13px; }
.ver-como svg { width: 15px; height: 15px; color: var(--tenue); }
.ver-como select.campo { padding: 3px 8px; font-size: 13px; }
.acciones-pantalla { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }

/* ---- esfuerzo por ficha ---- */
.esfuerzo-wrap { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.esfuerzo-wrap svg { width: 14px; height: 14px; color: var(--tenue); }
select.campo.esfuerzo { padding: 3px 6px; font-size: 12px; max-width: 170px; }
.badge.team { font-family: var(--mono); font-weight: 800; letter-spacing: .04em; }

/* ---- cajón (panel lateral) ---- */
.cajon-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 60; display: flex; justify-content: flex-end; }
.cajon { width: min(560px, 96vw); height: 100%; background: var(--fondo); box-shadow: var(--sombra-modal); display: flex; flex-direction: column; animation: cajon-entra .18s ease-out; }
.cajon.ancho { width: min(760px, 96vw); }
@keyframes cajon-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cajon-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borde); background: var(--papel); }
.cajon-cabecera h2 { margin: 0; font-size: 15px; }
.cajon-cuerpo { flex: 1; overflow: auto; padding: 14px 18px; }
.cajon-pie { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--borde); background: var(--papel); }
.campo-form { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 13px; }
.campo-form > span { font-weight: 700; }
.campo-form small { color: var(--tenue); }
.campo-form .campo { width: 100%; }
.propuesta { margin: -4px 0 12px; }
.candidatas { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.candidatas li { padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--papel); }
.candidatas li.mejor { border-color: var(--bien); background: var(--bien-suave); }
.candidatas .etiqueta { margin-left: 8px; color: var(--bien); border-color: var(--bien); }

/* ---- grupos por entrega dentro del cajón ---- */
.grupos-entrega { display: flex; flex-direction: column; gap: 8px; }
.grupo-entrega { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); padding: 6px 10px; }
.grupo-entrega-cabecera { display: flex; align-items: center; gap: 8px; }
.grupo-entrega-toggle { flex: 1; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; text-align: left; font: 600 13px var(--fuente-ui); color: var(--texto); cursor: pointer; padding: 4px 0; }
.grupo-entrega-toggle .flecha { display: inline-block; transition: transform .15s; color: var(--tenue); }
.grupo-entrega-toggle.abierto .flecha { transform: rotate(90deg); }
.grupo-entrega .pubs { margin-top: 6px; }
.grupo-entrega > .boton.mini { margin: 6px 0 2px; }
.pub .marcar { display: flex; align-items: center; padding-right: 6px; }
.pub .marcar input { width: 16px; height: 16px; }
.pub.ocupada { opacity: .6; }
.etiqueta.lote { color: var(--primary-dark); border-color: rgba(77, 74, 157, .35); background: var(--primary-light); }
.boton.peligro { color: var(--error); border-color: var(--error); }
.boton.peligro:hover:not(:disabled) { background: var(--error-suave); color: var(--error); }
/* la fila con casilla: una columna más a la izquierda, y en el cajón el info va más angosto */
.pub:has(> .marcar) { grid-template-columns: auto minmax(200px, 1fr) 180px auto; }
.cajon .pub { grid-template-columns: minmax(200px, 1fr) 200px auto; gap: 6px 14px; padding: 8px 10px; }
.cajon .pub:has(> .marcar) { grid-template-columns: auto minmax(200px, 1fr) 200px auto; }

/* ---- usuarios: cuenta y estado de acciones ---- */
.badge.cuenta.con { color: var(--bien); border-color: var(--bien); background: var(--bien-suave); }
.badge.cuenta.sin { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-suave); }
table.usuarios td.acciones { white-space: nowrap; }
table.usuarios .botones-fila { display: flex; gap: 6px; }
table.usuarios .estado-accion { margin-top: 4px; font-size: 12px; color: var(--tenue); white-space: normal; }
table.usuarios .estado-accion.error { color: var(--error); }
table.usuarios tr.inactiva td { color: var(--g400); }

/* ======================= v3 · Catálogo, Asignar, Semana, visor ======================= */
.chip.todas:not(.cero)     { color: var(--texto); background: var(--g50); }
.chip.aprobada:not(.cero)  { color: var(--bien); background: var(--bien-suave); border-color: var(--bien); }
.chip.curso:not(.cero)     { color: var(--acento); background: var(--acento-suave); border-color: var(--acento); }
.chip.retenida:not(.cero)  { color: var(--g600); background: var(--g50); border-style: dashed; }
.badge.estado-ficha.pausado_cliente, .badge.estado-ficha.cancelado { color: var(--g500); border-style: dashed; }
.grupo.tarea.m-diseno.tenue { opacity: .7; }
.filtros .campo.orden { padding: 4px 8px; font-size: 13px; max-width: 220px; }
.toggle .boton.mini.activo, .visor-modos .boton.mini.activo { background: var(--primary); color: #fff; border-color: var(--primary); }

/* capacidad */
.capacidad-equipo { margin: 0 0 12px; }
.capacidad-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.capacidad-cabecera h2 { margin: 0; font-size: 15px; }
.capacidad-cabecera .toggle { display: inline-flex; align-items: center; gap: 4px; }
.capacidad-cabecera .toggle input.campo { padding: 3px 8px; font-size: 13px; }
.capacidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.capacidad { padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--papel); font-size: 13px; }
.capacidad .quien { display: flex; align-items: center; gap: 4px; font-weight: 700; margin-bottom: 6px; }
.capacidad .barra { height: 8px; border-radius: 999px; background: var(--g100, #eef0f4); overflow: hidden; }
.capacidad .relleno { height: 100%; border-radius: 999px; background: var(--bien); transition: width .25s ease; }
.capacidad.alto .relleno { background: var(--aviso); }
.capacidad.lleno .relleno { background: var(--error); }
.capacidad .cifras-cap { margin-top: 5px; font-size: 12px; color: var(--g600); }
.capacidad.compacta { padding: 6px 8px; border: 0; background: transparent; }

/* semana */
.semana-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.semana-nav h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.semana-columnas { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.semana-columna { flex: 0 0 290px; min-width: 290px; display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--g50); scroll-snap-align: start; max-height: calc(100vh - 260px); }
.semana-columna.nadie { border-style: dashed; }
.semana-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: var(--papel); border-radius: var(--radio) var(--radio) 0 0; font-size: 13px; }
.semana-cabecera .quien { display: flex; align-items: center; gap: 4px; font-weight: 800; }
.semana-lotes { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.semana-sub { font: 700 11px var(--fuente-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--g500); padding: 2px 4px; }
.semana-sub.tarde { color: var(--error); }
.semana-lote { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--borde); border-left-width: 4px; border-radius: 8px; background: var(--papel); font: 13px var(--fuente-ui); color: var(--texto); cursor: pointer; }
.semana-lote:hover { box-shadow: var(--sombra, 0 1px 4px rgba(0,0,0,.08)); }
.semana-lote.cerrado { opacity: .7; }
.semana-lote .linea1 { display: flex; align-items: center; gap: 4px; }
.semana-lote .linea2 { color: var(--g600); font-size: 12px; }
.semana-lote .linea3 { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.semana-lote .horas { font-weight: 700; }
.semana-lote .fecha.tarde { color: var(--error); font-weight: 700; }
.semana-lote.m-lote-en_trafico { border-left-color: var(--g400); }
.semana-lote.m-lote-creando { border-left-color: var(--primary); }
.semana-lote.m-lote-revision { border-left-color: var(--acento); }
.semana-lote.m-lote-revision_desarrollo { border-left-color: var(--error); }
.semana-lote.m-lote-completado { border-left-color: var(--bien); }
.semana-pie { padding: 6px 10px; border-top: 1px solid var(--borde); background: var(--papel); border-radius: 0 0 var(--radio) var(--radio); font-size: 12px; }
.cajon .badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.cajon-pie .lote-botones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* visor de ficha indexada */
.visor-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.visor { width: min(1500px, 100%); height: min(92vh, 100%); background: var(--fondo); border-radius: var(--radio); box-shadow: var(--sombra-modal); display: flex; flex-direction: column; overflow: hidden; }
.visor-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--borde); background: var(--papel); font-size: 13px; }
.visor-titulo { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-modos { display: inline-flex; gap: 4px; }
.visor-modos .boton.mini small { opacity: .7; font-weight: 400; }
.visor-barra a.boton { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.visor-barra a.boton svg { width: 13px; height: 13px; }
.visor-zona { flex: 1; overflow: auto; background: var(--g100, #eef0f4); display: flex; justify-content: center; padding: 12px; }
.visor-caja { max-width: 100%; height: 100%; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); transition: width .2s ease; }
.visor-caja[data-modo="movil"], .visor-caja[data-modo="tablet"] { border-radius: 14px; overflow: hidden; }
.visor-marco { width: 100%; height: 100%; border: 0; display: block; }
.visor-nota { margin: 0; padding: 6px 12px; border-top: 1px solid var(--borde); background: var(--papel); }

/* reparto semanal */
.chip.sinmaterial:not(.cero) { color: var(--g500); background: transparent; border-style: dashed; }
.chip.creando:not(.cero) { color: var(--primary-dark); background: transparent; border-color: rgba(77, 74, 157, .35); border-style: dashed; }
.reparto-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.botones-dis { display: flex; flex-wrap: wrap; gap: 6px; }
.botones-dis .boton.mini.activo { background: var(--primary); color: #fff; border-color: var(--primary); }
.reparto-propuesta { margin-top: 10px; }
.reparto-propuesta .capacidades { margin-bottom: 10px; }
table.reparto td .campo { padding: 3px 6px; font-size: 13px; }
table.reparto td .campo.corto { width: 64px; }
table.reparto .etiqueta { margin-left: 6px; }

/* ======================= Customer Success ======================= */
.grupo.tarea.m-cs { border-left-color: var(--acento); }
.chip.sku:not(.cero)       { color: var(--g900); background: var(--g100, #eef0f4); border-color: var(--g400); }
.chip.escalado:not(.cero)  { color: var(--error); background: var(--error-suave); border-color: var(--error); }
.chip.insistir:not(.cero)  { color: var(--aviso); background: var(--aviso-suave); border-color: var(--aviso); }
.chip.decidida:not(.cero)  { color: var(--g600); background: var(--g50); border-style: dashed; }
.chip.sinstock:not(.cero)  { color: #6b4e16; background: #fbf3dc; border-color: #c9a227; }
.etiqueta.sinstock { color: #6b4e16; border-color: #c9a227; background: #fbf3dc; }
.m-cs .cuanto .avance { font-size: 13px; }
.m-cs .cuanto .avance .barra { height: 6px; border-radius: 999px; background: var(--g100, #eef0f4); overflow: hidden; margin: 4px 0 2px; }
.m-cs .cuanto .avance .relleno { height: 100%; border-radius: 999px; background: var(--bien); }
.m-cs .cuanto .avance .relleno.alto { background: var(--aviso); }
.m-cs .cuanto .avance .relleno.lleno { background: var(--error); }
.seccion-cs { margin: 0 0 14px; }
.seccion-toggle { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 4px; border: 0; background: transparent; font: 700 15px var(--fuente-ui); color: var(--texto); cursor: pointer; }
.seccion-toggle .flecha { display: inline-block; transition: transform .15s; color: var(--tenue); }
.seccion-toggle.abierto .flecha { transform: rotate(90deg); }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pestanas .boton.mini.activo { background: var(--primary); color: #fff; border-color: var(--primary); }
table.canales-cs td.aviso { color: var(--aviso); font-weight: 700; }
table.canales-cs td.error { color: var(--error); font-weight: 700; }
.badge.seguimiento.escalado { color: var(--error); border-color: var(--error); background: var(--error-suave); }
.badge.seguimiento.insistir { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-suave); }
.badge.avance { color: var(--bien); border-color: var(--bien); background: var(--bien-suave); font-weight: 800; }
.nota.check { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.tarea-cs { margin: 0 0 12px; }
.tarea-cs h2 { margin: 0 0 4px; font-size: 15px; }
.filas-tarea { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fila-tarea { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: var(--papel); font: 13px var(--fuente-ui); color: var(--texto); cursor: pointer; text-align: left; }
.fila-tarea:hover { border-color: var(--primary); }
.fila-tarea .quien { display: flex; align-items: center; gap: 4px; font-weight: 700; }

/* `hidden` manda sobre cualquier display: que colapsar un grupo o filtrar una fila funcione aunque la clase diga flex/grid */
[hidden] { display: none !important; }

/* enlace indexado desde el lote */
.pub .acciones .enlace-wrap { display: flex; gap: 4px; margin-top: 4px; }
.pub .acciones .campo.enlace { width: 220px; padding: 3px 8px; font-size: 12px; }

/* ficha del cliente (CS): tarjetas por retailer en vez de tabla */
.canales-cs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.canal-cs { padding: 10px 12px; border: 1px solid var(--borde); border-left-width: 4px; border-radius: 8px; background: var(--papel); font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.canal-cs.insistir { border-left-color: var(--aviso); }
.canal-cs.escalado { border-left-color: var(--error); }
.canal-cs .canal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.canal-cs .canal-cabecera .quien { display: flex; align-items: baseline; gap: 6px; }
.canal-cs .avance .barra { height: 6px; border-radius: 999px; background: var(--g100, #eef0f4); overflow: hidden; }
.canal-cs .avance .relleno { height: 100%; border-radius: 999px; background: var(--bien); }
.canal-cs .avance .relleno.alto { background: var(--aviso); }
.canal-cs .avance .relleno.lleno { background: var(--error); }
.canal-cs .cifras-av { margin-top: 4px; font-size: 12px; color: var(--g600); }
.canal-cs .pie-canal { font-size: 12px; }
.chip.implementando:not(.cero) { color: var(--primary-dark); background: var(--primary-light); border-color: rgba(77, 74, 157, .35); }
/* las tarjetas de cliente de CS dejan ver todos los chips */
.m-cs .lote-toggle.v2 .ident { overflow: visible; }
.m-cs .lote-toggle.v2 .como.chips { flex-wrap: wrap; overflow: visible; }
.m-cs .lote-toggle.v2 { align-items: flex-start; }

/* ======================= Supervisión (v2: Dashboard · Semana · Catálogo) ======================= */
.panel-sup { background: var(--papel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.panel-sup h2 { margin: 0; font-size: 15px; }
.panel-sup h3 { margin: 0 0 6px; font-size: 13px; }
.panel-sup .cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-sup .cab .toggle { display: inline-flex; gap: 4px; }
.panel-sup .cab .toggle .boton.mini.activo { background: var(--primary); color: #fff; border-color: var(--primary); }
.panel-sup .cab > .boton:last-child { margin-left: auto; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .dos-columnas { grid-template-columns: 1fr; } }
.chico { font-size: 12px; }

/* embudo */
.embudo { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--g100, #eef0f4); width: 100%; }
.embudo.alta { height: 30px; border-radius: 8px; }
.embudo .seg { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 12px var(--fuente-ui); min-width: 2px; transition: width .3s; }
.e-material { background: var(--g400); }
.e-diseno { background: #7c8dd9; }
.e-aprobar { background: var(--aviso); }
.e-implementar { background: #3fa7d6; }
.e-activo { background: var(--bien); }
.embudo-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 4px; font-size: 12px; }
.embudo-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.embudo-leyenda b { font-weight: 700; }

/* indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 6px; }
.indicadores.chicos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.indicador { background: var(--papel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.indicadores.chicos .indicador { background: var(--g50); padding: 10px 12px; }
.ind-titulo { font-size: 12px; color: var(--g600, #566); text-transform: uppercase; letter-spacing: .03em; }
.ind-valor { font-size: 26px; font-weight: 800; line-height: 1.1; }
.indicador.chico .ind-valor { font-size: 20px; }
.ind-pie { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; }
.ind-pie .delta { display: block; }
.ind-pie .linea { width: 100%; height: 28px; }
.ind-pie .linea { color: var(--primary); flex-shrink: 0; }
.delta.bien { color: var(--bien); font-weight: 700; }
.delta.mal { color: var(--error); font-weight: 700; }
.delta.igual { color: var(--g400); }
.sem-verde { color: var(--bien); } .sem-amarillo { color: var(--aviso); } .sem-rojo { color: var(--error); } .sem-sin { color: var(--g400); }
.etiqueta.mal { color: var(--error); border-color: var(--error); margin-left: 8px; }
span.bien { color: var(--bien); font-weight: 700; } span.mal, p.mal { color: var(--error); }

/* reparto por CS / TEAM */
.reparto { display: flex; flex-direction: column; gap: 10px; }
.reparto-fila { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr minmax(150px, .9fr); gap: 12px; align-items: center; font-size: 13px; }
.reparto-cifras { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.reparto-cifras .etiqueta.mal { margin-left: 0; }
.reparto-fila .quien { align-self: start; }
.motivos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.motivos .etiqueta.mal { margin-left: 0; font-size: 11px; }
@media (max-width: 800px) { .reparto-fila { grid-template-columns: 1fr; } .reparto-cifras { text-align: left; } }

/* semana */
.semana-nav h2 { margin: 0 0 12px; font-size: 18px; }
.vence-grid, .carga-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.vence-bloque { background: var(--g50); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.vence-bloque .boton { margin-top: 8px; }
.lista-simple { margin: 0; padding-left: 18px; }
.lista-simple li { margin: 3px 0; }
.alerta-sup { margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--g400); }
.alerta-sup h3 { margin: 0 0 8px; font-size: 14px; }
.alerta-sup.escalado, .alerta-sup.rebote { border-left-color: var(--error); }
.alerta-sup.por_aprobar, .alerta-sup.sin_envio, .alerta-sup.lote_atrasado { border-left-color: var(--aviso); }

/* catálogo */
.catalogo-sup { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .catalogo-sup { grid-template-columns: 1fr; } }
.grupo-sup { margin: 0 0 18px; }
.grupo-sup-cab { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; }
.grupo-sup-cab > b:last-child { margin-left: auto; }
.grupo-sup > .embudo { margin-bottom: 10px; }
.tarjeta-sup { background: var(--papel); border: 1px solid var(--borde); border-left-width: 5px; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta-sup.tenue { opacity: .7; }
.sem-borde-verde { border-left-color: var(--bien); } .sem-borde-amarillo { border-left-color: var(--aviso); } .sem-borde-rojo { border-left-color: var(--error); } .sem-borde-sin { border-left-color: var(--g400); }
.tarjeta-sup-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tarjeta-sup-cab .quien { font-size: 15px; }
.enlace-plano { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.enlace-plano:hover b { text-decoration: underline; }
.tarjeta-sup-cuerpo { display: grid; grid-template-columns: 1fr 250px; gap: 14px; align-items: start; }
.tarjeta-sup-embudo { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-sup-embudo .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tarjeta-sup-avance { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-sup-avance .grande { font-size: 28px; font-weight: 800; line-height: 1; }
.tarjeta-sup-avance .datos { margin-top: 8px; }
.tarjeta-sup-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 8px; }
.nota-cliente { font-size: 12px; color: var(--g600, #566); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones-sup { display: inline-flex; gap: 6px; margin-left: auto; }
.campo.corto { width: 90px; }
.campo-sup { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; font-size: 13px; }
.campo.orden { max-width: 220px; }

/* lista etiqueta → valor, misma estructura en todas las tarjetas */
dl.datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12px; text-align: left; }
dl.datos dt { color: var(--tenue, #6b7280); white-space: nowrap; }
dl.datos dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; }
dl.datos dd .tenue { font-weight: 400; }
dl.datos dd.bien, dl.datos dd .bien { color: var(--bien); } dl.datos dd .mal { color: var(--error); }
.m-cs .cuanto dl.datos { margin-top: 6px; min-width: 230px; }

/* ======================= Campana de notificaciones ======================= */
.boton-icono.campana { position: relative; }
.boton-icono.campana.con-novedades { color: var(--primary); border-color: var(--primary); }
.campana-globo { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--error); color: #fff; font: 700 11px/18px var(--fuente-ui); text-align: center; }
.campana-panel { position: fixed; z-index: 60; width: min(420px, calc(100vw - 24px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-modal, 0 12px 40px rgba(0,0,0,.25)); overflow: hidden; }
.campana-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); background: var(--g50); }
.campana-cab .boton { margin-left: auto; }
.campana-vacia { padding: 18px 16px; margin: 0; font-size: 13px; }
.campana-lista { overflow-y: auto; display: flex; flex-direction: column; }
.campana-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--borde); background: var(--papel); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.campana-item:hover { background: var(--g50); }
.campana-item.nueva { background: var(--primary-light); }
.campana-item.nueva .campana-titulo { font-weight: 700; }
.campana-icono { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--g100, #eef0f4); color: var(--primary); }
.campana-icono svg { width: 16px; height: 16px; }
.campana-texto { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.campana-detalle { color: var(--g600, #566); }
.campana-pie { font-size: 11px; }

/* ---- Tiendas (0135) ---- */
table.filas.tiendas td { vertical-align: top; }
table.filas.tiendas tr.con-senal td:first-child { box-shadow: inset 3px 0 0 var(--error); }
table.filas.tiendas tr.resaltada td { background: var(--aviso-suave); transition: background .4s; }
table.filas.tiendas tr.abierta td { background: var(--g50); }
table.filas.tiendas td.mal { color: var(--error); font-weight: 700; }
table.filas.tiendas .chips { display: flex; flex-wrap: wrap; gap: 4px; }
table.filas.tiendas .linea { color: var(--primary); display: block; }
tr.detalle-tienda > td { background: var(--g50); padding: 10px 14px 14px; }
.detalle-tienda-cuerpo { display: grid; grid-template-columns: 1fr; gap: 12px; }
.detalle-bloque h3 { margin: 0 0 6px; font-size: 13px; }
@media (min-width: 1100px) { .detalle-tienda-cuerpo { grid-template-columns: minmax(280px, 1fr) 2fr; } }

/* ---- Hoy (0137) ---- */
.fila-hoy { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--papel); margin: 0 0 8px; }
.fila-hoy.con-evidencia { border-left: 3px solid var(--ok, #0F766E); }
.fila-hoy.aplicada { opacity: .6; }
.fila-hoy .acciones { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.etiqueta.ok { color: #0F766E; border-color: rgba(20, 184, 166, .45); background: rgba(20, 184, 166, .12); }

/* ---- Hoy como metas (0138) ---- */
.hoy-cabecera { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; margin: 0 0 14px; }
.hoy-cabecera h2 { margin: 0 0 4px; font-size: 18px; }
.hoy-cabecera p { margin: 0; }
.hoy-racha { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--papel); }
.hoy-racha .racha-n { font-size: 28px; font-weight: 800; line-height: 1; }
.hoy-racha.fuerte .racha-n { color: #0F766E; }
.hoy-anillo { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--g100, #eef0f4) 0); position: relative; }
.hoy-anillo::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--papel); }
.hoy-anillo b { position: relative; font-size: 13px; }
.hoy-metas { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.hoy-meta { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--papel); }
.hoy-meta.cumplida { border-color: rgba(20, 184, 166, .45); background: rgba(20, 184, 166, .06); }
.hoy-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--g400); display: grid; place-items: center; font-weight: 800; color: #0F766E; }
.hoy-meta.cumplida .hoy-check { border-color: #0F766E; background: rgba(20, 184, 166, .15); }
.hoy-titulo { font-size: 15px; margin-bottom: 6px; }
.hoy-meta .barra { height: 8px; border-radius: 999px; background: var(--g100, #eef0f4); overflow: hidden; margin: 0 0 6px; }
.hoy-meta .relleno { height: 100%; border-radius: 999px; background: var(--error); transition: width .4s ease; }
.hoy-meta .relleno.alto { background: var(--aviso); }
.hoy-meta .relleno.ok { background: #0F766E; }
.hoy-detalle { margin: -4px 0 0 46px; }
.hoy-detalle summary { cursor: pointer; font-size: 13px; color: var(--g600, #566); margin-bottom: 8px; }
.hoy-historial { display: flex; gap: 8px; align-items: flex-end; height: 110px; }
.hoy-barra-dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hoy-barra-dia .col { width: 100%; max-width: 46px; min-height: 2px; background: var(--g400); border-radius: 6px 6px 0 0; }
.hoy-barra-dia.ok .col { background: #0F766E; }
@media (max-width: 800px) { .hoy-cabecera { grid-template-columns: 1fr; } .hoy-meta { grid-template-columns: 34px 1fr; } .hoy-accion { grid-column: 2; } }

/* Tiendas: las señales (caída, patrón) van en su propia línea y ninguna pastilla se parte */
.tienda-nombre { white-space: nowrap; }
.tienda-senales { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.tienda-senales .etiqueta.mal { margin-left: 0; white-space: nowrap; }
.sin-corte { white-space: nowrap; }

/* Tiendas en tarjetas (06-11): misma forma en todas, cada número con su etiqueta */
.tiendas-tarjetas { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tienda-tarjeta { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel, #fff); padding: 12px 16px; }
.tienda-tarjeta.con-senal { box-shadow: inset 4px 0 0 var(--error); }
.tienda-tarjeta.resaltada { background: var(--aviso-suave); transition: background .4s; }
.tc-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-quien { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; font-size: 15px; }
.tc-quien .tienda-senales { margin: 0; }
.tc-revision { white-space: nowrap; }
.tc-cuerpo { display: grid; grid-template-columns: 190px 1fr 210px; gap: 18px; align-items: start; }
.tc-et { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin-bottom: 2px; white-space: nowrap; }
.tc-pct { font-size: 24px; line-height: 1.1; }
.tc-linea { color: var(--primary); margin-top: 6px; }
.tc-linea .linea { display: block; }
.tc-datos { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px 16px; }
.tc-num { font-size: 18px; font-variant-numeric: tabular-nums; }
.tc-num.mal { color: var(--error); }
.tc-correos .chips { flex-direction: column; align-items: flex-start; }
.tc-detalle { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borde); }
@media (max-width: 1100px) {
  .tc-cuerpo { grid-template-columns: 1fr; }
  .tc-datos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .tc-correos .chips { flex-direction: row; flex-wrap: wrap; }
}

/* 12-11 · tarjeta del cliente (CS) más baja y sin textos cortados:
   columna derecha más ancha, datos en 2 × 2 y solo los chips con algo */
.m-cs .lote-toggle.v2 .cuanto { width: 400px; white-space: normal; overflow: visible; }
.m-cs .cuanto dl.datos { grid-template-columns: auto 1fr auto auto; gap: 2px 10px; min-width: 0; margin-top: 4px; }
.m-cs .cuanto dl.datos dd { text-align: left; }
.chip.sin-pendientes { color: var(--bien); background: var(--bien-suave); border-color: var(--bien); }
@media (max-width: 900px) {
  .m-cs .lote-toggle.v2 .cuanto { width: auto; }
  .m-cs .cuanto dl.datos { grid-template-columns: auto 1fr; }
}
/* 12-11 · sección «Generar reportes» de la ficha del cliente */
.barra-reporte.generar { justify-content: flex-start; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--g50, #f7f8fa); }
.barra-reporte.generar .titulo-reportes { font-weight: 700; font-size: 13px; margin-right: 4px; }
.barra-reporte.generar .msg-reporte { order: 9; margin-left: auto; margin-right: 0; }
.resumen-impl textarea { width: 100%; min-height: 380px; font-size: 13px; line-height: 1.5; resize: vertical; }