/* Portal del cliente: todo el CSS, en un solo fichero que el navegador guarda (antes iba dentro de cada componente y viajaba en cada respuesta de Livewire). */
/* ===== components/layouts/cliente.blade.php ===== */
        *, *::before, *::after { box-sizing: border-box; }
        html { -webkit-text-size-adjust: 100%; }
        body.cl { --cl-lateral: clamp(1rem, 4.5vw, 4rem); margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #f7f8fa; color: #111827; font-family: 'DM Sans', 'Roboto', system-ui, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
        [x-cloak] { display: none !important; }
        /* El CSS de utilidades del panel no se carga aquí: los iconos llevan su tamaño por clase y hay que dárselo. */
        .cl svg[class*="w-4"] { width: 1rem; height: 1rem; flex: none; }
        .cl svg[class*="w-3.5"] { width: .875rem; height: .875rem; flex: none; }
        .cl a { color: inherit; }
        .cl-cab { background: #006363; color: #fff; }
        .cl-cab-in { padding: 0 var(--cl-lateral); height: 3.5rem; display: flex; align-items: center; gap: 1rem; }   /* 3,5 rem = 56 px, la altura de la cabecera del Portal del empleado */
        .cl-marca { display: inline-flex; align-items: center; line-height: 0; }
        .cl-marca img { display: block; height: 34px; width: auto; }
        .cl-espacio { flex: 1; }
        .cl-btn { display: inline-flex; align-items: center; gap: .4rem; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: .8rem; border-radius: .6rem; padding: .45rem .8rem; text-decoration: none; }
        .cl-btn-salir { background: rgba(255, 255, 255, .12); color: #fff; }
        .cl-btn-salir:hover { background: rgba(220, 38, 38, .8); }
        .cl-quien { font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .85); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cl-main { flex: 1; width: 100%; padding: 1.5rem var(--cl-lateral) 3rem; }   /* todo el ancho de la pantalla: sin franjas a los lados */
        /* Acceso: el bloque, centrado en la pantalla. */
        .cl-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .cl-centro .cl-acc { width: 100%; margin: 0; }
        /* Móvil: márgenes laterales y verticales generosos para que la tarjeta no toque los bordes. */
        @media (max-width: 30rem) { .cl-centro { padding: 1.5rem 1.5rem 2rem; } .cl-pie { padding: .75rem 1.5rem 1.25rem; } }
        .cl-pie { text-align: center; font-size: .75rem; color: #9ca3af; padding: 1rem; }
        @media (max-width: 40rem) {
            .cl-quien { display: none; }
            .cl-cab-in { gap: .75rem; }
            .cl-main { padding: 1.1rem var(--cl-lateral) 2.5rem; }
        }
    

/* ===== livewire/cliente/proyecto.blade.php ===== */
        /* Título = selector de proyecto (con más de uno) */
        .cl-tit { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 900; color: #0b3d3c; overflow-wrap: break-word; line-height: 1.2; }
        .cl-sub { margin: 0; font-size: .9rem; color: #6b7280; }
        .cl-ts { position: relative; display: block; width: fit-content; max-width: 100%; }
        .cl-ts-btn { display: inline-flex; align-items: center; gap: .6rem; width: max-content; max-width: 100%; border: 0; background: none; padding: .15rem .5rem .15rem .15rem; margin-left: -.15rem; border-radius: .8rem; font: inherit; color: inherit; text-align: left; cursor: pointer; }
        .cl-ts-btn:hover, .cl-ts-btn[aria-expanded="true"] { background: #eceff4; }
        .cl-ts-btn:focus-visible { outline: 2px solid #006363; outline-offset: 1px; }
        /* En pantalla ancha el nombre va en una línea: con el texto partido «a ojo» por la medida del navegador, un nombre corto salía como «ACM / E». Los muy largos sí pueden partirse (`.multi`) y en móvil siempre. */
        .cl-ts-btn .nom { min-width: 0; white-space: nowrap; padding-right: 4px; }
        .cl-ts-btn .nom.multi { white-space: normal; overflow-wrap: break-word; }
        .cl-ts-btn .fl { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #eceff4; color: #0b3d3c; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
        .cl-ts-btn[aria-expanded="true"] .fl { transform: rotate(180deg); background: #fff; }
        .cl-logo { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: #fff; border: 1px solid #e5e7eb; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: .72rem; font-weight: 900; color: #0b3d3c; }
        .cl-logo img { width: 100%; height: 100%; object-fit: contain; }
        .cl-menu { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; width: 24rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; background: #fff; color: #111827; border-radius: 1rem; box-shadow: 0 18px 44px -12px rgba(0, 60, 59, .4); outline: 1px solid rgba(3, 7, 18, .06); padding: .4rem; }
        .cl-menu .tit { padding: .4rem .6rem .25rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; }
        .cl-menu .buscar { position: sticky; top: -.4rem; background: #fff; padding: .2rem .2rem .45rem; margin: 0 0 .1rem; }
        .cl-menu .buscar input { width: 100%; border: 1px solid #d1d5db; border-radius: .6rem; padding: .5rem .7rem; font: inherit; font-size: 1rem; color: #0b3d3c; }
        .cl-menu .buscar input:focus { outline: 2px solid #006363; outline-offset: 1px; border-color: #006363; }
        .cl-menu a { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: .6rem; text-decoration: none; font-size: .9rem; font-weight: 700; color: #0b3d3c; }
        .cl-menu a:hover { background: #f3f4f6; }
        .cl-menu a.on { background: #e6f2f1; }
        .cl-menu a .logo2 { flex: none; width: 1.8rem; height: 1.8rem; border-radius: .5rem; border: 1px solid #e5e7eb; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: .66rem; font-weight: 900; color: #0b3d3c; }
        .cl-menu a .logo2 img { width: 100%; height: 100%; object-fit: contain; }
        .cl-menu a .est { margin-left: auto; flex: none; font-size: .66rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; text-transform: capitalize; }
        .cl-menu .nada { padding: .8rem .6rem; font-size: .85rem; color: #9ca3af; }

        /* Secciones: pestañas con subrayado; en móvil se pueden deslizar si no caben. */
        .cl-nav { display: flex; gap: .25rem; margin: 1.1rem 0 .25rem; border-bottom: 1px solid #e5e7eb; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .cl-nav::-webkit-scrollbar { display: none; }
        .cl-nav button { position: relative; flex: none; display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .7rem 1rem; font-size: .9rem; font-weight: 800; color: #6b7280; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .15s; }
        .cl-nav button:hover { color: #0b3d3c; }
        .cl-nav button::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background .15s; }
        .cl-nav button.on { color: #0b3d3c; }
        .cl-nav button.on::after { background: #006363; }
        @media (max-width: 40rem) {
            .cl-tit { font-size: 1.3rem; }
            .cl-ts { width: 100%; }
            .cl-ts-btn { width: 100%; }
            .cl-ts-btn .nom { flex: 1; white-space: normal; overflow-wrap: break-word; }
            .cl-logo { width: 2rem; height: 2rem; }
            .cl-menu { width: 100%; max-width: none; }
            .cl-nav { margin-left: -1rem; margin-right: -1rem; padding: 0 .5rem; gap: 0; }
            .cl-nav button { padding: .75rem .7rem; font-size: .86rem; }
            .cl-nav button svg { display: none; }
        }
    

/* ===== livewire/cliente/panel.blade.php ===== */
        .cl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
        @media (max-width: 40rem) {
            .cl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
            .cl-kpi.dest, .cl-kpi.mes { grid-column: 1 / -1; }   /* destacado y mes, a todo el ancho; los dos «próximos 7 días», lado a lado */
            .cl-card { padding: 1rem; border-radius: 1rem; }
            .cl-kpi .val { font-size: 1.6rem; }
            .cl-kpi .sub { font-size: .74rem; }
            .cl-dos { gap: .7rem; margin-top: .7rem; }
        }
        /* Gráfica: columnas en pantallas anchas; en móvil, barras horizontales (una fila por mes), que se leen a cualquier ancho. */
        .cl-hbar { display: none; }
        @media (max-width: 40rem) { .cl-barras { display: none; } .cl-hbar { display: grid; } }
        .cl-hbar { gap: .45rem; }
        .cl-hbar .fila { display: grid; grid-template-columns: 3.7rem minmax(0, 1fr) 2.8rem; align-items: center; gap: .6rem; width: 100%; border: 0; background: none; padding: .1rem 0; font-family: inherit; cursor: pointer; text-align: left; }
        .cl-hbar .mes { font-size: .8rem; font-weight: 700; color: #6b7280; }
        .cl-hbar .fila.act .mes { color: #0b3d3c; font-weight: 900; }
        .cl-hbar .pista { height: 1.15rem; border-radius: .4rem; background: #eef0f4; overflow: hidden; }
        .cl-hbar .pista i { display: block; height: 100%; border-radius: .4rem; background: #8fbfbd; }
        .cl-hbar .fila.act .pista i { background: #006363; }
        .cl-hbar .num { font-size: .85rem; font-weight: 800; color: #0b3d3c; text-align: right; font-variant-numeric: tabular-nums; }
        .cl-card { background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06); outline: 1px solid rgba(3, 7, 18, .05); padding: 1.2rem 1.35rem; }
        .cl-kpi .et { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
        .cl-kpi .val { margin-top: .3rem; font-size: 1.9rem; font-weight: 900; color: #0b3d3c; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; }
        .cl-kpi .sub { margin-top: .25rem; font-size: .8rem; color: #6b7280; font-weight: 600; }
        .cl-kpi.dest { background: linear-gradient(145deg, #004a49 0%, #006363 100%); }
        .cl-kpi.dest .et, .cl-kpi.dest .sub { color: rgba(255, 255, 255, .75); }
        .cl-kpi.dest .val { color: #fff; }
        .cl-dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
        @media (max-width: 56rem) { .cl-dos { grid-template-columns: minmax(0, 1fr); } }
        .cl-card h2 { margin: 0 0 .9rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
        .cl-barras text { font-family: inherit; }
        .cl-graf-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .9rem; }
        .cl-graf-cab h2 { margin: 0; }
        .cl-mes-nav { display: inline-flex; align-items: center; gap: .35rem; }
        .cl-mes-et { min-width: 7.5rem; text-align: center; font-size: .85rem; font-weight: 800; color: #0b3d3c; }
        .cl-mes-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0; border: 1px solid #e5e7eb; background: #fff; color: #0b3d3c; border-radius: .55rem; cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 800; }
        .cl-mes-btn.txt { padding: 0 .7rem; }
        .cl-mes-btn:hover:not(:disabled) { background: #e6f2f1; border-color: #7fb5b3; }
        .cl-mes-btn:disabled { opacity: .35; cursor: default; }
        .cl-barras-caja { position: relative; }
        .cl-barras g { outline: none; }
        .cl-tip { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; background: #0b3d3c; color: #fff; border-radius: .7rem; padding: .55rem .75rem; box-shadow: 0 8px 20px rgba(0, 60, 59, .35); font-size: .76rem; }
        .cl-tip b { display: block; margin-bottom: .25rem; font-size: .78rem; }
        .cl-tip div > div { display: flex; justify-content: space-between; gap: 1.2rem; line-height: 1.6; }
        .cl-tip div > div span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
        .cl-tip .tot { border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: .2rem; padding-bottom: .15rem; }
        .cl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
        .cl-lista li { display: flex; gap: .75rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid #f3f4f6; }
        .cl-lista li:last-child { border-bottom: 0; }
        .cl-lista .fecha { flex: none; width: 3.4rem; font-size: .78rem; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
        .cl-lista .tit { font-size: .9rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
        .cl-lista .meta { display: block; margin-top: .1rem; font-size: .75rem; font-weight: 600; color: #6b7280; }
        .cl-punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
        .cl-vacio { font-size: .88rem; color: #9ca3af; }
        .cl-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #f3f4f6; }
        .cl-resumen .et { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
        .cl-resumen .v { margin-top: .15rem; font-size: 1.15rem; font-weight: 900; color: #0b3d3c; font-variant-numeric: tabular-nums; }
        .cl-resumen .s { font-size: .74rem; font-weight: 600; color: #6b7280; }
        .cl-cats { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #f3f4f6; }
        .cl-cats h3 { margin: 0 0 .7rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
        .cl-cat { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 3rem; align-items: center; gap: .7rem; padding: .22rem 0; }
        .cl-cat .nom { font-size: .84rem; font-weight: 700; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .cl-cat .pista { height: .7rem; border-radius: .35rem; background: #eef0f4; overflow: hidden; }
        .cl-cat .pista i { display: block; height: 100%; border-radius: .35rem; background: #4a9f9c; }
        .cl-cat .num { font-size: .84rem; font-weight: 800; color: #0b3d3c; text-align: right; font-variant-numeric: tabular-nums; }
        @media (max-width: 40rem) { .cl-resumen { gap: .5rem; } .cl-resumen .v { font-size: 1rem; } .cl-cat { grid-template-columns: minmax(4rem, 7rem) minmax(0, 1fr) 2.6rem; gap: .5rem; } }
    

/* ===== livewire/cliente/calendario.blade.php ===== */
        .cl-cal-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.25rem; }
        .cl-cal-cab h2 { margin: 0; font-size: 1.25rem; font-weight: 900; color: #0b3d3c; min-width: 11rem; }
        .cl-cal-cab .res { font-size: .85rem; color: #6b7280; font-weight: 600; }
        .cl-cal-cab .esp { flex: 1; }
        /* Calendario editorial: el mes y el recuento van pegados, y «Plan Editorial» a su derecha. */
        .cl-cal-plan { column-gap: .25rem; }
        .cl-cal-plan h2 { min-width: 0; }
        /* «Plan Editorial» lleva el estilo del mes (verde oscuro, negrita 900) pero más grande. */
        .cl-cal-plan .titulo-plan { margin-left: 1.1rem; padding-left: 1.1rem; border-left: 2px solid #d5e5e4; font-size: 1.9rem; font-weight: 900; line-height: 1.1; color: #0b3d3c; letter-spacing: -.02em; }
        .cl-cal-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; background: #fff; color: #0b3d3c; border-radius: .6rem; height: 2.15rem; min-width: 2.15rem; padding: 0 .7rem; font-size: .8rem; font-weight: 800; cursor: pointer; font-family: inherit; }
        .cl-cal-btn:hover { background: #e6f2f1; border-color: #7fb5b3; }
        .cl-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin-top: .9rem; background: #e5e7eb; border-radius: 1rem; overflow: hidden; outline: 1px solid rgba(3, 7, 18, .05); }
        .cl-cal .dow { background: #f9fafb; padding: .5rem; text-align: center; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
        .cl-cal .dia { position: relative; min-height: clamp(5.2rem, calc((100vh - 17rem) / 6), 9rem); background: #fff; padding: .4rem .5rem; text-align: left; border: 0; font-family: inherit; cursor: default; display: block; }
        .cl-cal .dia.vacio { background: #fafafa; }
        .cl-cal button.dia.con { cursor: pointer; }
        .cl-cal button.dia.con:hover { background: #fffbeb; }
        .cl-cal .dia.sel { background: #e6f2f1; box-shadow: inset 0 0 0 2px #006363; }
        .cl-cal .dia .n { font-size: .8rem; font-weight: 800; color: #374151; font-variant-numeric: tabular-nums; }
        .cl-cal .dia.hoy .n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #0a7c7c; color: #fff; }
        .cl-cal .dia .cuenta { position: absolute; right: .45rem; top: .4rem; font-size: .7rem; font-weight: 900; color: #0b3d3c; background: #eceff4; border-radius: 999px; padding: .05rem .45rem; font-variant-numeric: tabular-nums; }
        .cl-cal .dia .puntos { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .45rem; }
        .cl-cal .dia .puntos i { width: .55rem; height: .55rem; border-radius: 50%; }
        @media (max-width: 40rem) {
            .cl-cal .dia { min-height: 3.6rem; padding: .3rem; } .cl-cal .dia .cuenta { display: none; }
            .cl-cal-cab { gap: .4rem .5rem; }
            .cl-cal-cab h2 { order: 1; flex: 1 1 auto; min-width: 0; font-size: 1.1rem; }
            .cl-cal-cab .cl-cal-btn { order: 2; }
            .cl-cal-cab .esp { display: none; }
            .cl-cal-cab .res { order: 3; flex: 1 1 100%; }
            .cl-cal-plan .titulo-plan { order: 0; flex: 1 1 100%; margin-left: 0; padding-left: 0; border-left: 0; font-size: 1.5rem; }
            .cl-card { padding: 1rem; border-radius: 1rem; }
        }
        /* Leyenda: cada tipo es un botón que lo muestra u oculta (como la leyenda de la gráfica del SLA). */
        .cl-leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
        .cl-leyenda button { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 700; color: #374151; cursor: pointer; font-family: inherit; }
        .cl-leyenda button:hover { border-color: #7fb5b3; }
        .cl-leyenda button:focus-visible { outline: 2px solid #006363; outline-offset: 1px; }
        .cl-leyenda button i { width: .65rem; height: .65rem; border-radius: 50%; }
        .cl-leyenda button.off { opacity: .4; text-decoration: line-through; }
        .cl-cal button.dia.con.sin { cursor: default; }
        .cl-cal button.dia.con.sin:hover { background: #fff; }
        .cl-card { background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06); outline: 1px solid rgba(3, 7, 18, .05); padding: 1.2rem 1.35rem; margin-top: 1rem; }
        .cl-card h3 { margin: 0 0 .8rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
        .cl-lista { list-style: none; margin: 0; padding: 0; }
        .cl-lista li { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid #f3f4f6; }
        .cl-lista li:last-child { border-bottom: 0; }
        .cl-lista .tit { font-size: .92rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
        .cl-lista .meta { display: block; margin-top: .1rem; font-size: .76rem; font-weight: 600; color: #6b7280; }
        .cl-punto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
        .cl-est { margin-left: auto; flex: none; font-size: .68rem; font-weight: 800; padding: .12rem .55rem; border-radius: 999px; background: #eceff4; color: #4b5563; }
        .cl-imprimir { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e5e7eb; background: #fff; color: #0b3d3c; border-radius: .6rem; height: 2.15rem; padding: 0 .8rem; font-size: .8rem; font-weight: 800; cursor: pointer; font-family: inherit; }
        .cl-imprimir:hover { background: #e6f2f1; border-color: #7fb5b3; }
        .cl-solo-papel { display: none; }
        @media (max-width: 40rem) { .cl-cal-cab .cl-imprimir { order: 2; } }
        @media print {
            @page { size: A4; margin: 12mm; }
            body * { visibility: hidden !important; }
            .cl-imprimible, .cl-imprimible * { visibility: visible !important; }
            body.cl { background: #fff !important; }
            .cl-imprimible { position: absolute; left: 0; right: 0; top: 0; }
            .cl-sin-papel { display: none !important; }
            .cl-leyenda button.off { display: none !important; }
            .cl-solo-papel { display: block !important; }
            .cl-solo-papel h1 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0b3d3c; }
            .cl-solo-papel p { margin: .15rem 0 .7rem; font-size: .8rem; color: #6b7280; }
            .cl-cal { margin-top: .4rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .cl-cal .dia { min-height: 3.2rem; }
            .cl-cal .dia .cuenta { display: block !important; }
            .cl-dia-lista { break-inside: avoid; margin-top: .55rem; }
            .cl-dia-lista h3 { margin: 0 0 .15rem; font-size: .85rem; font-weight: 800; color: #0b3d3c; }
            .cl-dia-lista ul { list-style: none; margin: 0; padding: 0; }
            .cl-dia-lista li { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; padding: .15rem 0; border-bottom: 1px solid #eee; font-size: .78rem; color: #1f2937; }
            .cl-dia-lista li .est { margin-left: auto; font-size: .68rem; color: #6b7280; }
        }
        .cl-aviso { margin-top: 1rem; font-size: .88rem; color: #b45309; font-weight: 700; }
    

/* ===== livewire/cliente/contenidos.blade.php ===== */
        .cl-ct-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
        .cl-ct-estados { display: inline-flex; background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .2rem; gap: .1rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
        .cl-ct-estados::-webkit-scrollbar { display: none; }
        .cl-ct-estados button { flex: none; display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; border-radius: .45rem; padding: .4rem .8rem; font: inherit; font-size: .84rem; font-weight: 700; color: #4b5563; cursor: pointer; white-space: nowrap; }
        .cl-ct-estados button:hover { background: #f3f4f6; }
        .cl-ct-estados button.on { background: #0a7c7c; color: #fff; }
        .cl-ct-estados .n { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #9ca3af; }
        .cl-ct-estados button.on .n { color: rgba(255, 255, 255, .7); }
        .cl-ct-estados .p { width: .5rem; height: .5rem; border-radius: 999px; background: var(--c); }
        .cl-ct-estados button.on .p { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
        .cl-ct-filtros { display: flex; flex: 1 1 18rem; gap: .5rem; min-width: 0; justify-content: flex-end; }
        .cl-ct-filtros .buscar { position: relative; flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
        .cl-ct-filtros .buscar svg { width: 1rem; height: 1rem; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
        .cl-ct-filtros input { border: 1px solid #d1d5db; border-radius: .6rem; padding: .5rem .75rem; font: inherit; font-size: .9rem; color: #0b3d3c; background: #fff; }
        .cl-ct-filtros input[type="search"] { width: 100%; padding-left: 2.2rem; }
        .cl-ct-filtros input:focus, .cl-ct-filtros select:focus, .cl-ct textarea:focus { outline: 2px solid #006363; outline-offset: 1px; border-color: #006363; }
        .cl-ct-aviso { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; padding: .65rem .9rem; border-radius: .6rem; font-size: .88rem; font-weight: 600; border: 1px solid; }
        .cl-ct-aviso.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
        .cl-ct-aviso.no { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
        .cl-ct-aviso svg { width: 1rem; height: 1rem; }
        .cl-ct-aviso button { margin-left: auto; border: 0; background: none; color: inherit; cursor: pointer; padding: 0 .2rem; opacity: .7; }
        .cl-ct { margin-top: .9rem; background: #fff; border-radius: .9rem; border: 1px solid #e5e7eb; overflow: hidden; transition: opacity .15s; }
        .cl-md-fondo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(6, 40, 39, .55); }
        .cl-md { display: flex; flex-direction: column; width: 100%; max-width: 44rem; max-height: min(90vh, 52rem); background: #fff; border-radius: 1rem; box-shadow: 0 24px 60px -12px rgba(0, 60, 59, .5); outline: none; overflow: hidden; }
        .cl-md-cab { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.4rem .9rem; border-bottom: 1px solid #e5e7eb; }
        .cl-md-cab h3 { margin: 0; flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 900; line-height: 1.3; color: #0b3d3c; overflow-wrap: anywhere; }
        .cl-md-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: none; border-radius: .5rem; color: #6b7280; cursor: pointer; }
        .cl-md-x:hover { background: #f3f4f6; color: #0b3d3c; }
        .cl-md-x svg { width: 1.1rem; height: 1.1rem; }
        .cl-md-datos { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: .8rem 1.4rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
        .cl-md-datos div { min-width: 0; }
        .cl-md-datos dt { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
        .cl-md-datos dd { margin: .1rem 0 0; font-size: .86rem; font-weight: 700; color: #1f2937; display: flex; align-items: center; gap: .4rem; }
        .cl-md-datos dd i { width: .5rem; height: .5rem; border-radius: 999px; background: var(--c); flex: none; }
        .cl-md-datos dd.venc { color: #b91c1c; }
        .cl-md-cuerpo { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem; }
        .cl-md-cuerpo .desc { white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.6; color: #374151; }
        .cl-md-cuerpo .sin { font-size: .88rem; color: #9ca3af; }
        .cl-md-cuerpo h4 { margin: 1.2rem 0 .4rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
        .cl-md-cuerpo .nota { margin: 0 0 .45rem; padding: .5rem .75rem; border-left: 3px solid #7fb5b3; background: #f2f8f8; border-radius: 0 .4rem .4rem 0; font-size: .84rem; color: #374151; white-space: pre-line; overflow-wrap: anywhere; }
        .cl-md-cuerpo .nota small { display: block; color: #6b7280; font-size: .7rem; margin-top: .15rem; }
        .cl-md-rech { margin-top: 1.2rem; }
        .cl-md-rech label { display: block; margin-bottom: .3rem; font-size: .82rem; font-weight: 800; color: #0b3d3c; }
        .cl-md-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .8rem 1.4rem; border-top: 1px solid #e5e7eb; background: #fff; }
        .cl-md-pie .espacio { flex: 1; }
        .cl-ct textarea, .cl-md textarea { width: 100%; border: 1px solid #d1d5db; border-radius: .6rem; padding: .55rem .75rem; font: inherit; font-size: .9rem; color: #0b3d3c; resize: vertical; }
        .cl-md textarea:focus { outline: 2px solid #006363; outline-offset: 1px; border-color: #006363; }
        .cl-md .b { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #d1d5db; background: #fff; color: #0b3d3c; border-radius: .5rem; padding: .5rem .95rem; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
        .cl-md .b svg { width: .9rem; height: .9rem; }
        .cl-md .b:hover { background: #f3f4f6; }
        .cl-md .b.si { background: #0a7c7c; border-color: #0a7c7c; color: #fff; }
        .cl-md .b.si:hover { background: #006363; border-color: #006363; }
        .cl-md .b.no { color: #991b1b; border-color: #e5b4b4; }
        .cl-md .b.no:hover { background: #fef2f2; }
        .cl-md .b:disabled { opacity: .5; cursor: wait; }
        @media (max-width: 40rem) { .cl-md-fondo { padding: 0; align-items: flex-end; } .cl-md { max-width: none; max-height: 92vh; border-radius: 1rem 1rem 0 0; } .cl-md-cab, .cl-md-datos, .cl-md-cuerpo, .cl-md-pie { padding-left: 1rem; padding-right: 1rem; } .cl-md-pie .b { flex: 1; justify-content: center; } }
        .cl-ct-vacio { padding: 2.5rem 1rem; text-align: center; color: #6b7280; font-size: .9rem; }
        .cl-ct-vacio strong { display: block; margin-bottom: .2rem; color: #374151; font-size: 1rem; }
        .cl-ct-mas { display: block; width: 100%; border: 0; border-top: 1px solid #e5e7eb; background: #f9fafb; padding: .65rem; font: inherit; font-size: .82rem; font-weight: 800; color: #0b3d3c; cursor: pointer; }
        .cl-ct-mas:hover { background: #f3f4f6; }
        .cl-ct-pie { margin-top: .6rem; font-size: .8rem; font-weight: 600; color: #6b7280; }
        @media (max-width: 52rem) {
            .cl-ct-filtros { flex-basis: 100%; justify-content: stretch; }
            .cl-ct-filtros .buscar { max-width: none; }
        }
    

/* ===== livewire/cliente/documentos.blade.php ===== */
.cl-dc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.cl-seg { display: inline-flex; background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .2rem; gap: .1rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cl-seg::-webkit-scrollbar { display: none; }
.cl-seg button { flex: none; display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; border-radius: .45rem; padding: .4rem .8rem; font: inherit; font-size: .84rem; font-weight: 700; color: #4b5563; cursor: pointer; white-space: nowrap; }
.cl-seg button:hover { background: #f3f4f6; }
.cl-seg button.on { background: #0a7c7c; color: #fff; }
.cl-seg .n { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #9ca3af; }
.cl-seg button.on .n { color: rgba(255, 255, 255, .7); }
.cl-dc-filtros { display: flex; flex: 1 1 18rem; gap: .5rem; min-width: 0; justify-content: flex-end; }
.cl-dc-filtros .buscar { position: relative; flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.cl-dc-filtros .buscar svg { width: 1rem; height: 1rem; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.cl-dc-filtros input, .cl-dc-filtros select { border: 1px solid #d1d5db; border-radius: .6rem; padding: .5rem .75rem; font: inherit; font-size: .9rem; color: #0b3d3c; background: #fff; }
.cl-dc-filtros input[type="search"] { width: 100%; padding-left: 2.2rem; }
.cl-dc-filtros select { max-width: 13rem; }
.cl-dc-filtros input:focus, .cl-dc-filtros select:focus { outline: 2px solid #006363; outline-offset: 1px; border-color: #006363; }
.cl-dc { margin-top: .9rem; background: #fff; border-radius: .9rem; border: 1px solid #e5e7eb; overflow: hidden; transition: opacity .15s; }
/* Documento, formato, tarea y fecha se ajustan a lo que llevan (con un máximo) y quedan juntos; el ancho que sobra va a la última columna, así que los botones de acción siguen pegados a la derecha. Antes las columnas de texto se estiraban y dejaban un hueco enorme tras el documento y tras la tarea. */
.cl-dc-cab, .cl-dc-fila { display: grid; grid-template-columns: minmax(12rem, 20rem) 4.5rem minmax(14rem, 26rem) 6.5rem minmax(6.5rem, 1fr); align-items: center; gap: 1rem; padding: .65rem 1.1rem; }
.cl-dc-cab { padding-top: .7rem; padding-bottom: .7rem; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-dc-fila { border-bottom: 1px solid #f1f2f4; }
.cl-dc-fila:last-of-type { border-bottom: 0; }
.cl-dc-fila:hover { background: #fafbfb; }
.cl-dc-doc { display: flex; align-items: center; gap: .75rem; min-width: 0; width: 100%; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.cl-dc-doc .ico { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; }
.cl-dc-doc .ico svg { width: 1.1rem; height: 1.1rem; }
.cl-dc-doc .cuerpo { min-width: 0; }
.cl-dc-doc .nom { display: block; font-size: .88rem; font-weight: 800; color: #0b3d3c; overflow-wrap: anywhere; }
.cl-dc-doc .meta { display: block; margin-top: .1rem; font-size: .72rem; font-weight: 600; color: #6b7280; }
.cl-dc-fila .fmt { font-size: .8rem; font-weight: 700; color: #374151; }
.cl-dc-fila .tarea { font-size: .8rem; color: #6b7280; overflow-wrap: anywhere; }
.cl-dc-fila .fecha { font-size: .82rem; font-weight: 700; color: #374151; font-variant-numeric: tabular-nums; }
.cl-dc-fila .acc { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; }
.cl-dc-fila .btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid #e5e7eb; background: #fff; color: #0b3d3c; border-radius: .55rem; text-decoration: none; }
.cl-dc-fila .btn:hover { background: #e6f2f1; border-color: #7fb5b3; }
.cl-dc-fila .btn svg { width: .9rem; height: .9rem; }
.cl-dc-fila .grande { font-size: .68rem; font-weight: 700; color: #b45309; text-align: right; }
.cl-dc-vacio { padding: 2.5rem 1rem; text-align: center; color: #6b7280; font-size: .9rem; }
.cl-dc-vacio strong { display: block; margin-bottom: .2rem; color: #374151; font-size: 1rem; }
.cl-dc-mas { display: block; width: 100%; border: 0; border-top: 1px solid #e5e7eb; background: #f9fafb; padding: .65rem; font: inherit; font-size: .82rem; font-weight: 800; color: #0b3d3c; cursor: pointer; }
.cl-dc-mas:hover { background: #f3f4f6; }
.cl-dc-pie { margin: .6rem 0 0; font-size: .8rem; font-weight: 600; color: #6b7280; }
.cl-dc-ico-g { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: #f3f4f6; display: inline-flex; align-items: center; justify-content: center; }
.cl-dc-ico-g svg { width: 1.3rem; height: 1.3rem; }
.cl-dc-prev { display: block; max-width: 100%; max-height: 20rem; margin: 0 auto; border-radius: .6rem; border: 1px solid #e5e7eb; object-fit: contain; background: #f9fafb; }
.cl-dc-sinprev { display: flex; align-items: center; justify-content: center; min-height: 6rem; border-radius: .7rem; background: #f3f6f6; border: 1px dashed #cdd9d8; color: #6b7280; font-size: .85rem; font-weight: 700; text-align: center; padding: 1rem; }
.cl-md.visor { max-width: min(72rem, 96vw); height: min(92vh, 58rem); }
.cl-md-cuerpo.visor { padding: 0; overflow: hidden; display: flex; min-height: 18rem; background: #eef1f1; }
.cl-dc-zoom { flex: 1; min-width: 0; display: flex; overflow: auto; }
/* Ancho = base × zoom. `margin: 0 auto` y no `justify-content: center`: si el visor es más ancho que la zona, se puede desplazar hasta su borde izquierdo. */
.cl-dc-visor { --base: 70%; position: relative; flex: none; display: flex; margin: 0 auto; width: calc(var(--base) * var(--z, 1)); min-width: 0; }
.cl-dc-visor iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.cl-dc-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #6b7280; background: #f3f6f6; z-index: 1; }
@media (max-width: 40rem) { .cl-md.visor { height: 92vh; max-width: none; } .cl-dc-visor { --base: 100%; } }
.cl-md .b.icono { padding: .5rem .6rem; }
.cl-md .b.icono:disabled { opacity: .4; cursor: not-allowed; }
.cl-md a.b { text-decoration: none; }
@media (max-width: 52rem) {
    .cl-dc-cab { display: none; }
    .cl-dc-fila { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; padding: .8rem; }
    .cl-dc-fila .cl-dc-doc { grid-column: 1 / -1; }
    .cl-dc-fila .fmt, .cl-dc-fila .tarea, .cl-dc-fila .fecha { font-size: .74rem; }
    .cl-dc-fila .tarea { grid-column: 1 / -1; }
    .cl-dc-fila .acc { grid-column: 2; grid-row: 2; }
    .cl-dc-filtros { flex-basis: 100%; justify-content: stretch; }
    .cl-dc-filtros .buscar { max-width: none; }
}

/* ===== livewire/cliente/acceso.blade.php ===== */
        .cl-acc { max-width: 26rem; margin: 3rem auto 0; background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06), 0 18px 44px -20px rgba(0, 60, 59, .25); outline: 1px solid rgba(3, 7, 18, .05); padding: 2rem 1.75rem; }
        .cl-acc h1 { margin: 0; font-size: 1.4rem; font-weight: 900; color: #0b3d3c; }
        .cl-acc p.sub { margin: .35rem 0 1.4rem; font-size: .9rem; color: #6b7280; }
        .cl-acc label { display: block; margin: 1rem 0 .35rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
        .cl-acc input { width: 100%; border: 1px solid #d1d5db; border-radius: .7rem; padding: .7rem .85rem; font-size: 1rem; font-family: inherit; color: #0b3d3c; }
        .cl-acc input:focus { outline: 2px solid #006363; outline-offset: 1px; border-color: #006363; }
        .cl-acc .err { margin-top: .4rem; font-size: .8rem; font-weight: 700; color: #b91c1c; }
        .cl-acc .caja-err { margin-top: 1rem; padding: .65rem .85rem; border-radius: .7rem; background: #fef2f2; border: 1px solid #fecaca; font-size: .85rem; font-weight: 700; color: #b91c1c; }
        .cl-acc button.entrar { width: 100%; margin-top: 1.4rem; border: 0; border-radius: .8rem; background: #0a7c7c; color: #fff; padding: .8rem 1rem; font-size: .95rem; font-weight: 800; font-family: inherit; cursor: pointer; }
        .cl-acc button.entrar:hover { background: #006363; }
        .cl-acc button.entrar:disabled { opacity: .6; cursor: default; }
        .cl-acc .o { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; }
        .cl-acc .o::before, .cl-acc .o::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
        .cl-acc a.google { display: flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 1rem; border: 1px solid #d1d5db; border-radius: .8rem; background: #fff; color: #1f2937; padding: .72rem 1rem; font-size: .95rem; font-weight: 700; text-decoration: none; }
        .cl-acc a.google:hover { background: #f3f4f6; border-color: #9ca3af; }
        .cl-acc a.google:focus-visible { outline: 2px solid #006363; outline-offset: 1px; }
        .cl-acc a.google svg { width: 1.15rem; height: 1.15rem; flex: none; }
        .cl-acc .nota { margin-top: 1.2rem; font-size: .78rem; color: #9ca3af; text-align: center; }
        /* Móvil: tarjeta más compacta y con aire a los lados. Los campos conservan 16 px de letra: por debajo, iOS hace zoom al enfocarlos. */
        @media (max-width: 30rem) {
            .cl-acc { max-width: 21rem; border-radius: 1rem; padding: 1.4rem 1.2rem; }
            .cl-acc h1 { font-size: 1.15rem; }
            .cl-acc p.sub { margin: .3rem 0 1rem; font-size: .82rem; }
            .cl-acc label { margin: .8rem 0 .3rem; font-size: .66rem; }
            .cl-acc input { padding: .6rem .75rem; border-radius: .6rem; }
            .cl-acc .err { font-size: .76rem; }
            .cl-acc .caja-err { margin-top: .8rem; padding: .55rem .7rem; font-size: .8rem; }
            .cl-acc button.entrar { margin-top: 1.1rem; padding: .7rem .9rem; font-size: .9rem; border-radius: .7rem; }
            .cl-acc .nota { margin-top: 1rem; font-size: .74rem; }
        }
    

/* ===== iconos (hoja de símbolos del layout) ===== */
.cl-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; width: 1em; height: 1em; }


/* ===== livewire/cliente/clipping.blade.php ===== */
.cl-cp { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.cl-cp .cl-aviso { margin: 0; }
.cl-cp-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; border-radius: 1.25rem; padding: 1.4rem 1.6rem; color: #fff; background: #006363; box-shadow: 0 1px 2px rgba(0, 60, 59, .12); }
.cl-cp-hero .et { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.cl-cp-hero .nav { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.cl-cp-hero h2 { margin: 0; min-width: 11rem; text-align: center; font-size: 1.8rem; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.cl-cp-hero h2 small { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.cl-cp-hero .nav button { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; cursor: pointer; }
.cl-cp-hero .nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.cl-cp-hero .nav button:disabled { opacity: .35; cursor: default; }
.cl-cp-hero .hoy { margin-top: .6rem; border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .85); text-decoration: underline; cursor: pointer; }
.cl-cp-hero .cifra { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.cl-cp-hero .val { font-size: 3.2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cl-cp-hero .txt { font-size: .85rem; font-weight: 700; color: rgba(255, 255, 255, .8); }
.cl-cp-hero .chip { margin-top: .4rem; display: inline-block; border-radius: 999px; padding: .2rem .7rem; font-size: .75rem; font-weight: 800; background: rgba(255, 255, 255, .16); }
.cl-cp-hero .chip.sube { background: #d7efe9; color: #0b4a40; }
.cl-cp-hero .chip.baja { background: #f6dfdb; color: #7a2a22; }
.cl-cp-vacio { padding: 2.2rem 1rem; text-align: center; color: #6b7280; font-size: .92rem; }
/* Los 12 meses: el mismo selector segmentado de Documentos y Contenidos, a todo el ancho. */
.cl-cp-meses { display: flex; width: 100%; box-sizing: border-box; }
.cl-cp-meses { padding: .3rem; gap: .2rem; }
.cl-cp-meses button { flex: 1 1 0; min-width: 5.2rem; justify-content: center; padding: .6rem .8rem; font-size: .92rem; border-radius: .55rem; }
.cl-cp-meses .n { font-size: .8rem; }
.cl-cp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.cl-cp-tit { margin: 0 0 .9rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.cl-cp-tit.fuera { margin: .6rem 0 .7rem .2rem; }
.cl-cp-donut { display: flex; align-items: center; gap: 1.1rem; }
.cl-cp-donut svg { flex: none; width: 9.2rem; height: 9.2rem; overflow: visible; }
.cl-cp-donut .seg { cursor: pointer; outline: none; transition: stroke-width .15s, opacity .15s; }
.cl-cp-donut .seg:focus-visible { stroke-linecap: butt; filter: drop-shadow(0 0 .6px #0b3d3c); }
.cl-cp-donut .leyenda li { border-radius: .5rem; padding: .15rem .35rem; margin: 0 -.35rem; transition: opacity .15s, background .15s; cursor: default; }
.cl-cp-donut .leyenda li.on { background: #f3f6f6; }
.cl-cp-donut .leyenda li.tenue { opacity: .45; }
.cl-cp-donut .leyenda { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.cl-cp-donut .leyenda li, .cl-cp-lista-canales li { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: #374151; }
.cl-cp-donut .leyenda i, .cl-cp-lista-canales i { flex: none; width: .65rem; height: .65rem; border-radius: 999px; }
.cl-cp-donut .leyenda span, .cl-cp-lista-canales span { flex: 1; font-weight: 700; }
.cl-cp-donut .leyenda b, .cl-cp-lista-canales b { font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-cp-apilada { display: flex; height: 1.1rem; border-radius: .55rem; overflow: hidden; background: #eef0f4; gap: 2px; }
.cl-cp-apilada span { display: block; min-width: 4px; }
.cl-cp-lista-canales { margin: .9rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.cl-cp-lista-canales em { font-style: normal; font-size: .76rem; font-weight: 700; color: #9ca3af; font-variant-numeric: tabular-nums; }
.cl-cp-medios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.cl-cp-medios li { display: flex; align-items: center; gap: .65rem; }
.cl-cp-medios .pos { flex: none; width: 1.5rem; height: 1.5rem; border-radius: .5rem; background: #e6f2f1; color: #0b3d3c; font-size: .75rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.cl-cp-medios .nom { position: relative; flex: 1; min-width: 0; font-size: .84rem; font-weight: 700; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .35rem; }
.cl-cp-medios .nom i { position: absolute; left: 0; bottom: 0; height: .22rem; border-radius: 99px; background: #8fbfbd; }
.cl-cp-medios b { font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; font-size: .84rem; }
.cl-cp-noticias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cl-cp-noticia { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.2rem; }
.cl-cp-noticia header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cl-cp-noticia .sent { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .12rem .65rem; font-size: .7rem; font-weight: 800; background: color-mix(in srgb, var(--c) 18%, white); color: #1f2937; }
.cl-cp-noticia .sent::before { content: ''; width: .5rem; height: .5rem; border-radius: 99px; background: var(--c); }
.cl-cp-noticia time { font-size: .74rem; font-weight: 700; color: #9ca3af; font-variant-numeric: tabular-nums; }
.cl-cp-noticia h4 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; color: #0b3d3c; overflow-wrap: anywhere; }
.cl-cp-noticia h4 a { color: inherit; text-decoration: none; }
.cl-cp-noticia h4 a:hover { color: #006363; text-decoration: underline; }
.cl-cp-noticia footer { margin-top: auto; font-size: .78rem; color: #6b7280; }
.cl-cp-noticia footer b { color: #374151; }
.cl-nota-pie { margin: .8rem 0 0; font-size: .72rem; color: #9ca3af; }

@media (max-width: 40rem) {
    .cl-cp-hero { padding: 1.1rem; }
    .cl-cp-hero h2 { font-size: 1.4rem; min-width: 0; flex: 1; }
    .cl-cp-hero .cifra { align-items: flex-start; }
    .cl-cp-hero .val { font-size: 2.6rem; }
    .cl-cp-meses button { flex: none; min-width: 5rem; }
    .cl-cp-trio, .cl-cp-noticias { grid-template-columns: minmax(0, 1fr); }
    .cl-cp-donut { flex-direction: column; align-items: flex-start; }
}

/* Clipping: mientras llegan los datos (carga en diferido) y al cambiar de mes. */
.cl-cp-hero .et .act { text-transform: none; letter-spacing: 0; font-weight: 700; }
@media (max-width: 64rem) { .cl-cp-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cl-cp-trio > :last-child { grid-column: 1 / -1; } }
.cl-cp-ocupado > :not(.cl-cp-hero):not(.cl-cp-fila), .cl-cp-ocupado .cl-cp-fila > :not(.cl-cp-hero) { opacity: .5; pointer-events: none; transition: opacity .15s; }
.cl-cp .hueco { border-radius: .5rem; background: linear-gradient(90deg, #e9eeee 25%, #f4f7f7 50%, #e9eeee 75%); background-size: 200% 100%; animation: cl-cp-brillo 1.3s linear infinite; }
.cl-cp-esqueleto .hueco { background: linear-gradient(90deg, rgba(255,255,255,.14) 25%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.14) 75%); background-size: 200% 100%; }
.cl-cp .hueco.grande { width: 13rem; height: 2.2rem; margin-top: .45rem; }
.cl-cp .hueco.enorme { width: 7rem; height: 3rem; margin-left: auto; }
.cl-cp .hueco.chico { display: block; width: 3.4rem; height: .9rem; }
.cl-cp .hueco.linea { width: 40%; height: .8rem; margin-bottom: 1rem; }
.cl-cp .hueco.bloque { height: 9rem; }
@keyframes cl-cp-brillo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cl-cp .hueco { animation: none; } }

/* ===== Contenidos: tarjetas horizontales en una columna (imagen y texto primero, título pequeño, red sólo con logo) ===== */
.cl-cn { display: grid; grid-template-columns: minmax(0, 1fr);   /* siempre una columna de tarjetas horizontales, también en monitores anchos */ gap: 1rem; margin-top: .9rem; transition: opacity .15s; }
.cl-cn-ocupado { opacity: .55; transition: opacity .15s; }
.cl-cn-card { display: flex; align-items: stretch; min-width: 0; background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06); outline: 1px solid rgba(3, 7, 18, .05); overflow: hidden; }
.cl-cn-media { position: relative; flex: none; display: block; width: 19rem; min-height: 15rem; padding: 0; border: 0; background: #0b3d3c; overflow: hidden; cursor: zoom-in; }
/* La imagen se ve ENTERA (sea cuadrada, vertical o apaisada) sobre un fondo desenfocado de ella misma, en vez de recortada. */
.cl-cn-media .fondo { position: absolute; inset: -18px; background-size: cover; background-position: center; filter: blur(16px) saturate(1.15); opacity: .85; }
.cl-cn-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cl-cn-media .rota-txt { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #6b7280; }
.cl-cn-media.rota img, .cl-cn-media.rota .fondo { display: none; }
.cl-cn-media.rota .rota-txt { display: flex; }
/* El logo de cada red, siempre en el mismo recuadro y con el mismo tamaño; sin logo, el nombre. */
.cl-red { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: #fff; box-shadow: 0 0 0 1px rgba(3, 7, 18, .1); }
.cl-red img { width: 1.45rem; height: 1.45rem; object-fit: contain; }
.cl-red.texto { width: auto; min-width: 0; height: auto; padding: .28rem .75rem; border-radius: 999px; background: #eef2f2; box-shadow: none; font-size: .78rem; font-weight: 800; color: #0b3d3c; white-space: nowrap; }
.cl-cn-fecha { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .22rem .7rem; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; background: #eef2f2; color: #374151; }
.cl-cn-fecha .cl-i { width: .8rem; height: .8rem; }
.cl-cn-fecha.venc { background: #fde8e6; color: #991b1b; }
.cl-cn-cuerpo { display: flex; flex-direction: column; gap: .85rem; flex: 1; min-width: 0; padding: 1.2rem 1.5rem 1rem; }
.cl-cn-cab { display: flex; align-items: center; gap: .6rem; }
.cl-cn-cab .cl-cn-fecha { margin-left: auto; }
.cl-cn-texto { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; font-size: 1.06rem; line-height: 1.65; color: #111827; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.cl-cn-texto:hover { color: #000; }
.cl-hash { color: #006363; font-weight: 700; }
.cl-url { color: #006363; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.cl-md-cuerpo .desc { font-size: 1.02rem; line-height: 1.7; color: #111827; }
.cl-cn-sintexto { margin: 0; font-size: .88rem; color: #9ca3af; }
.cl-cn-pie { display: flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid #f1f2f4; }
.cl-cn-titulo { flex: 1; min-width: 0; font-size: .74rem; font-weight: 700; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-cn-herr { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.9rem; height: 1.9rem; border: 0; background: none; border-radius: .5rem; color: #6b7280; cursor: pointer; }
.cl-cn-herr:hover { background: #e6f2f1; color: #0b3d3c; }
.cl-cn-herr .cl-i { width: .95rem; height: .95rem; }
.cl-cn-acc { display: inline-flex; align-items: center; gap: .5rem; margin-left: .6rem; }
.cl-cn-acc .est { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #374151; }
.cl-cn-acc .est i { width: .5rem; height: .5rem; border-radius: 99px; background: var(--c); }
.cl-cn-card .b, .cl-ct .b { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #d1d5db; background: #fff; color: #0b3d3c; border-radius: .6rem; padding: .5rem .95rem; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.cl-cn-card .b .cl-i { width: .9rem; height: .9rem; }
.cl-cn-card .b:hover { background: #f3f4f6; }
.cl-cn-card .b.si { background: #0a7c7c; border-color: #0a7c7c; color: #fff; }
.cl-cn-card .b.si:hover { background: #006363; border-color: #006363; }
.cl-cn-card .b.no { color: #991b1b; border-color: #e5b4b4; }
.cl-cn-card .b.no:hover { background: #fef2f2; }
.cl-cn-card .b:disabled { opacity: .5; cursor: wait; }
.cl-cn-mas { margin-top: 1rem; border: 1px solid #e5e7eb; border-radius: .8rem; background: #fff; }
.cl-cn-grande { display: block; max-width: 100%; max-height: 24rem; margin: 0 auto 1rem; border-radius: .8rem; border: 1px solid #e5e7eb; object-fit: contain; background: #f9fafb; }
.cl-md-cab .cl-red { margin-top: .1rem; }
@media (max-width: 48rem) {
    .cl-cn-card { flex-direction: column; }
    .cl-cn-media { width: 100%; aspect-ratio: 4 / 3; }
    .cl-cn-cuerpo { padding: 1rem; }
    .cl-cn-pie { flex-wrap: wrap; }
    .cl-cn-titulo { flex-basis: 100%; order: -1; white-space: normal; padding-bottom: .2rem; }
    .cl-cn-acc { margin-left: auto; }
}

/* ===== Analíticas (redes sociales del proyecto, de VISTA): línea de tiempo, KPIs y evolución ===== */
.cl-an .cl-an-titulo { min-width: 0; text-align: left; }
.cl-an-tiempo { display: flex; flex-direction: column; gap: .9rem; }
.cl-an-tiempo .cl-cp-tit { margin: 0; }
.cl-an-regla { display: flex; flex-direction: column; gap: .5rem; }
/* Dos <input type=range> superpuestos: la pista no recibe clics, sólo las asas. */
.cl-an-pista { position: relative; height: 2rem; }
.cl-an-pista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .45rem; margin-top: -.225rem; border-radius: 999px; background: #e5e7eb; }
.cl-an-pista .banda { position: absolute; top: 50%; height: .45rem; margin-top: -.225rem; border-radius: 999px; background: #0a7c7c; pointer-events: none; }
.cl-an-pista input[type=range] { position: absolute; left: 0; width: 100%; top: 0; height: 2rem; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cl-an-pista input[type=range]::-webkit-slider-runnable-track { background: none; height: 2rem; }
.cl-an-pista input[type=range]::-moz-range-track { background: none; height: 2rem; }
.cl-an-pista input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 1.35rem; height: 1.35rem; margin-top: .325rem; border-radius: 50%; background: #fff; border: .22rem solid #006363; box-shadow: 0 1px 3px rgba(0, 60, 59, .35); cursor: grab; }
.cl-an-pista input[type=range]::-moz-range-thumb { pointer-events: auto; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; border: .22rem solid #006363; box-shadow: 0 1px 3px rgba(0, 60, 59, .35); cursor: grab; }
.cl-an-pista input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
.cl-an-pista input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid #f4a261; outline-offset: 2px; }
.cl-an-marcas { display: flex; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.cl-an-marcas span { min-width: 0; padding-left: .2rem; border-left: 1px solid #e5e7eb; white-space: nowrap; overflow: hidden; }
.cl-an-fechas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; font-size: .8rem; font-weight: 700; color: #4b5563; }
.cl-an-fechas label { display: inline-flex; align-items: center; gap: .45rem; }
.cl-an-fechas input[type=date] { font: inherit; font-weight: 700; color: #111827; border: 1px solid #d1d5db; border-radius: .5rem; padding: .3rem .5rem; background: #fff; }
.cl-an-fechas .en-vivo { margin-left: auto; color: #0a7c7c; font-weight: 800; }
.cl-an-ayuda { margin: 0; font-size: .78rem; color: #9ca3af; }
.cl-an-redes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: start; }
.cl-an-red { margin-top: 0; }
.cl-an-red .cl-cp-tit .nota { text-transform: none; letter-spacing: 0; font-weight: 700; color: #9ca3af; }
.cl-an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .7rem; }
.cl-an-kpi { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .15rem; min-height: 5.6rem; padding: .7rem .8rem; border-radius: .8rem; background: #f6f9f9; }   /* la cifra y su variación, siempre pegadas a la derecha */
.cl-an-kpi .nom { flex: 1 1 auto; align-self: stretch; text-align: left; font-size: .72rem; font-weight: 800; color: #6b7280; line-height: 1.2; }   /* el rótulo se queda arriba y la cifra abajo: en una fila de tarjetas, las cifras quedan a la misma altura aunque un rótulo ocupe dos líneas */
.cl-an-kpi .val { font-size: 1.55rem; font-weight: 900; line-height: 1.1; color: #0b3d3c; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cl-an-kpi .var { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-an-kpi .var.sube { color: #0b6b56; }
.cl-an-kpi .var.baja { color: #b3261e; }
.cl-an-kpi .var.igual, .cl-an-kpi .var.sin { color: #9ca3af; font-weight: 700; }
.cl-an-evo { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #eef0f4; }
.cl-an-evo .tit { display: block; margin-bottom: .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.cl-an-evo .barras { display: flex; align-items: flex-end; gap: .25rem; height: 5.5rem; }
.cl-an-evo .barras button { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; border: 0; padding: 0; background: none; cursor: pointer; }
.cl-an-evo .barras i { display: block; width: 100%; max-width: 1.6rem; border-radius: .3rem .3rem 0 0; background: #b9d6d5; transition: background .12s; }
.cl-an-evo .barras button:hover i { background: #6fb0ae; }
.cl-an-evo .barras button.on i { background: #006363; }
.cl-an-evo .barras button.hueco-dato i { background: repeating-linear-gradient(45deg, #e5e7eb 0 3px, #f3f4f6 3px 6px); height: 100% !important; opacity: .6; }
.cl-an-evo .barras em { font-style: normal; font-size: .62rem; font-weight: 800; color: #9ca3af; line-height: 1; }
@media (max-width: 52rem) {
    .cl-an-redes { grid-template-columns: minmax(0, 1fr); }
    .cl-an-marcas { display: none; }
    .cl-an-fechas .en-vivo { margin-left: 0; flex-basis: 100%; }
    .cl-an .cl-cp-meses { overflow-x: auto; }
}

/* ===== Calendario como Google Calendar: filtros a la izquierda, el mes en el centro y lo del día elegido a la derecha ===== */
.cl-cal-pagina { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 17.5rem; gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
.cl-cal-pagina .cl-cal-cab { margin-top: 0; }
.cl-cal-filtros, .cl-cal-agenda { background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06); outline: 1px solid rgba(3, 7, 18, .05); padding: 1.1rem 1rem; }
.cl-cal-tit { margin: 0 0 .7rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.cl-cal-ayuda { margin: .8rem 0 0; font-size: .75rem; color: #9ca3af; line-height: 1.35; }
/* Los tipos, uno por línea con su color y cuántos hay (como la lista de calendarios de Google). */
.cl-cal-filtros .cl-leyenda { flex-direction: column; flex-wrap: nowrap; gap: .15rem; margin-top: 0; }
.cl-cal-filtros .cl-leyenda button { width: 100%; justify-content: flex-start; border: 0; background: none; border-radius: .6rem; padding: .45rem .5rem; font-size: .84rem; text-align: left; }
.cl-cal-filtros .cl-leyenda button:hover { background: #f3f6f6; }
.cl-cal-filtros .cl-leyenda button i { flex: none; width: .85rem; height: .85rem; border-radius: .25rem; }
.cl-cal-filtros .cl-leyenda button span { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.cl-cal-filtros .cl-leyenda button b { flex: none; font-size: .72rem; font-weight: 800; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-cal-filtros .cl-leyenda button.off { opacity: .5; text-decoration: none; }
.cl-cal-filtros .cl-leyenda button.off span { text-decoration: line-through; }
.cl-cal-filtros .cl-leyenda button.off i { background: #fff !important; box-shadow: inset 0 0 0 2px #cbd5d5; }
/* Lo del día elegido. */
.cl-cal-agenda { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.cl-ag-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .7rem; margin-bottom: .2rem; border-bottom: 1px solid #eef0f4; }
.cl-ag-cab .dow { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.cl-ag-cab .fecha { display: block; margin-top: .1rem; font-size: 1.15rem; font-weight: 900; color: #0b3d3c; line-height: 1.2; }
.cl-ag-cab .cuenta { flex: none; min-width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e6f2f1; color: #0b3d3c; font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-ag-vacio { display: block; font-size: .88rem; color: #9ca3af; line-height: 1.4; }
.cl-ag-cab + .cl-ag-vacio { margin-top: .6rem; }
.cl-cal-agenda .cl-lista li { flex-wrap: wrap; gap: .3rem .6rem; }
.cl-cal-agenda .cl-est { margin-left: 0; }
/* En papel (no hay barras laterales) la leyenda de tipos va debajo del mes. */
.cl-leyenda-papel { display: none; }
@media print { .cl-leyenda-papel { display: flex !important; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-size: .78rem; color: #374151; } .cl-leyenda-papel i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; } .cl-cal-pagina { display: block; margin-top: 0; } }
/* Pantallas medias: la lista de tipos pasa a una fila de etiquetas encima del mes y lo del día debajo. */
@media (max-width: 64rem) {
    .cl-cal-pagina { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .cl-cal-filtros { order: 1; padding: .8rem 1rem; }
    .cl-cal-centro { order: 2; }
    .cl-cal-agenda { order: 3; position: static; max-height: none; }
    .cl-cal-tit, .cl-cal-ayuda { display: none; }
    .cl-cal-filtros .cl-leyenda { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
    .cl-cal-filtros .cl-leyenda button { width: auto; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; }
    .cl-cal-filtros .cl-leyenda button.off { opacity: .4; }
    .cl-cal-filtros .cl-leyenda button.off span { text-decoration: line-through; }
}

.cl-cal-imprimir { width: 100%; justify-content: center; margin-top: 1rem; }
@media (max-width: 64rem) { .cl-cal-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .cl-cal-imprimir { width: auto; margin-top: 0; } }

/* ===== Pantallas anchas: el portal ocupa todo el ancho; los laterales del calendario crecen un poco ===== */
@media (min-width: 100rem) {
    .cl-cal-pagina { grid-template-columns: 14rem minmax(0, 1fr) 20rem; gap: 1.5rem; }
}

/* ===== Listas que tienen SIEMPRE la altura del bloque de su izquierda y, si no caben, se reparten en páginas (clPaginado, public/js/cliente.js) ===== */
/* La tarjeta no aporta alto a su fila: lo pone el bloque vecino (la cuadrícula la estira) y la lista va dentro, recortada a ese alto. */
.cl-dos > .cl-proximo { position: relative; padding: 0; min-height: 22rem; overflow: hidden; }
.cl-proximo-in { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; padding: 1.2rem 1.35rem; }
.cl-pag-zona { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cl-pag-visor { overflow: hidden; }
.cl-pag-visor .cl-lista { position: relative; }
.cl-pag-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .5rem; padding-top: .6rem; border-top: 1px solid #eef0f4; }
.cl-pag-nav .et { min-width: 3.4rem; text-align: center; font-size: .8rem; font-weight: 800; color: #4b5563; font-variant-numeric: tabular-nums; }
.cl-pag-nav button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #e5e7eb; background: #fff; color: #0b3d3c; border-radius: .6rem; cursor: pointer; }
.cl-pag-nav button:hover:not(:disabled) { background: #e6f2f1; border-color: #7fb5b3; }
.cl-pag-nav button:disabled { opacity: .35; cursor: default; }
.cl-pag-nav button:focus-visible { outline: 2px solid #006363; outline-offset: 1px; }
@media (max-width: 56rem) {
    .cl-dos > .cl-proximo { position: static; min-height: 0; overflow: visible; }
    .cl-proximo-in { position: static; }
}
/* Calendario: el día elegido, tan alto como el mes (los filtros de la izquierda siguen a su altura). */
.cl-cal-pagina { align-items: stretch; }
.cl-cal-filtros { align-self: start; }
.cl-cal-agenda { position: relative; top: auto; max-height: none; overflow: hidden; padding: 0; min-height: 22rem; }
.cl-ag-in { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; padding: 1.1rem 1rem; }
.cl-ag-dia { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cl-ag-dia .cl-ag-cab { flex: none; }
@media (max-width: 64rem) {
    .cl-cal-agenda { position: static; min-height: 0; overflow: visible; padding: 1.1rem 1rem; }
    .cl-ag-in { position: static; padding: 0; }
}

/* ===== Clipping: las noticias como línea de tiempo (la más reciente arriba; fecha y hora a la izquierda; un punto del color de su valoración unido al siguiente) ===== */
.cl-cp-linea { list-style: none; margin: .6rem 0 0; padding: 0; }
.cl-cp-linea > li { position: relative; display: grid; grid-template-columns: 4.6rem 1.3rem minmax(0, 1fr); column-gap: .9rem; padding-bottom: 1rem; }
.cl-cp-linea > li:last-child { padding-bottom: 0; }
.cl-cp-linea > li::before { content: ''; position: absolute; left: calc(4.6rem + .9rem + .65rem - 1px); top: 1.65rem; bottom: -1.15rem; width: 2px; background: #d3dede; }
.cl-cp-linea > li:last-child::before { display: none; }
.cl-cp-linea .cuando { grid-column: 1; display: flex; flex-direction: column; align-items: flex-end; padding-top: .85rem; line-height: 1.15; }
.cl-cp-linea .cuando b { font-size: .95rem; font-weight: 900; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-cp-linea .cuando span { margin-top: .1rem; font-size: .76rem; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-cp-linea .punto { grid-column: 2; position: relative; z-index: 1; width: 1.3rem; height: 1.3rem; margin-top: 1rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px #f7f8fa; }
.cl-cp-linea > li > .cl-cp-noticia { grid-column: 3; }
.cl-cp-linea .primera .cl-cp-noticia, .cl-cp-linea > li.primera > .cl-cp-noticia { outline: 2px solid color-mix(in srgb, var(--c) 60%, white); }
.cl-cp-linea > li.primera .punto { box-shadow: 0 0 0 4px #f7f8fa, 0 0 0 6px color-mix(in srgb, var(--c) 45%, white); }
.cl-cp-noticia header { justify-content: flex-start; }
.cl-cp-noticia .reciente { border-radius: 999px; padding: .12rem .65rem; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: #0a7c7c; color: #fff; }
.cl-cp-noticia .solo-movil { display: none; margin-left: auto; }
@media (max-width: 40rem) {
    .cl-cp-linea > li { grid-template-columns: 1.3rem minmax(0, 1fr); column-gap: .7rem; }
    .cl-cp-linea > li::before { left: calc(.65rem - 1px); }
    .cl-cp-linea .cuando { display: none; }
    .cl-cp-linea .punto { grid-column: 1; }
    .cl-cp-linea > li > .cl-cp-noticia { grid-column: 2; }
    .cl-cp-noticia .solo-movil { display: inline; }
}

/* Calendario de VISTA (sección Calendario): un mes de lectura con los eventos como etiquetas de color por tipo. */
.cl-vc-mes .dia { display: flex; flex-direction: column; gap: .2rem; min-height: clamp(6rem, calc((100vh - 19rem) / 6), 10rem); }
.cl-vc-mes .dia .n { align-self: flex-start; }
.cl-vc-chip { display: block; width: 100%; border: 0; border-left: 3px solid color-mix(in srgb, var(--c) 70%, #000); background: var(--c); color: var(--t, #fff); border-radius: .3rem; padding: .2rem .4rem; text-align: left; font: inherit; font-size: .74rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.cl-vc-chip .s { margin-top: .15rem; padding-top: .15rem; border-top: 1px solid color-mix(in srgb, var(--t, #fff) 40%, transparent); font-size: .68rem; font-weight: 500; }
.cl-vc-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-vc-chip .t { white-space: normal; overflow-wrap: anywhere; }
.cl-vc-chip:hover { filter: brightness(.94); }
@media (max-width: 640px) { .cl-vc-mes .dia { min-height: 3.6rem; padding: .3rem; } }
@media print { .cl-vc-chip { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-vc-chip span { white-space: normal; } .cl-vc-mes .dia { min-height: 4.5rem; } }

/* Analíticas: botón de imprimir sobre la línea de tiempo, selector Redes sociales / Analytics y bloque de Google Analytics. */
.cl-an-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cl-an-pestanas { align-self: flex-start; width: max-content; max-width: 100%; margin: 0; }
.cl-ga-dias { display: flex; align-items: flex-end; gap: 2px; height: 6.5rem; }
.cl-ga-dias i { flex: 1 1 0; min-width: 1px; background: #6fb0ae; border-radius: 2px 2px 0 0; }
.cl-ga-dias i:hover { background: #006363; }
.cl-ga-ejes { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .68rem; font-weight: 700; color: #9ca3af; }
.cl-ga-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.cl-ga-lista li { position: relative; display: flex; align-items: baseline; gap: .8rem; padding-bottom: .35rem; font-size: .85rem; }
.cl-ga-lista .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937; font-weight: 600; }
.cl-ga-lista b { flex: none; font-variant-numeric: tabular-nums; color: #0b3d3c; font-weight: 800; }
.cl-ga-lista i { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; background: #b9d6d5; }
@media print { .cl-an .cl-card { break-inside: avoid; box-shadow: none; } .cl-ga-dias i, .cl-ga-lista i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-ga-lista .nom { white-space: normal; } }
.cl-an-ga .cl-an-kpi .val { font-size: 1.35rem; white-space: nowrap; }

/* Imprimir de Analíticas (entre el bloque del periodo y la línea de tiempo) y logos de las redes en los títulos. */
.cl-an-imprimir { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: -.2rem 0 0; }
.cl-an-imprimir .menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 15rem; display: flex; flex-direction: column; gap: .15rem; padding: .8rem; background: #fff; border-radius: .9rem; box-shadow: 0 12px 32px -8px rgba(0, 60, 59, .35); outline: 1px solid rgba(3, 7, 18, .08); }
.cl-an-imprimir .menu .tit { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: .3rem; }
.cl-an-imprimir .menu label { display: flex; align-items: center; gap: .55rem; padding: .35rem .3rem; border-radius: .5rem; font-size: .88rem; font-weight: 700; color: #1f2937; cursor: pointer; }
.cl-an-imprimir .menu label:hover { background: #f3f6f6; }
.cl-an-imprimir .menu input { accent-color: #006363; width: 1rem; height: 1rem; }
.cl-an-imprimir .menu .ir { margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; background: #0a7c7c; color: #fff; border-radius: .6rem; height: 2.3rem; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; }
.cl-an-imprimir .menu .ir:hover { background: #006363; }
.cl-an-imprimir .menu .ir:disabled { opacity: .5; cursor: not-allowed; }
.cl-an-nombre { display: flex; align-items: center; gap: .6rem; }
.cl-an-nombre .nota { text-transform: none; letter-spacing: 0; font-weight: 700; color: #9ca3af; font-size: .74rem; }

/* Dentro de Analíticas el espacio entre bloques lo pone el `gap` de la columna: la tarjeta no suma su propio margen superior. */
.cl-an .cl-card { margin-top: 0; }
.cl-an-nombre .nom { font-size: .95rem; font-weight: 900; letter-spacing: 0; text-transform: none; color: #0b3d3c; }
.cl-cal-filtros .cl-leyenda button img { flex: none; width: 1rem; height: 1rem; object-fit: contain; }

/* Plan: el submenú con píldora deslizante (como el de Dirección de proyecto) y los apartados de lectura. */
.cl-plan { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.cl-plan .cl-card { margin-top: 0; }
.cl-plan-nav { position: relative; align-self: flex-start; max-width: 100%; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(max-content, 1fr)); background: #e8efef; border-radius: .9rem; padding: .25rem; overflow-x: auto; }
.cl-plan-nav button { position: relative; z-index: 1; border: 0; background: none; border-radius: .7rem; padding: .55rem 1.2rem; font: inherit; font-size: .88rem; font-weight: 800; color: #6b7280; cursor: pointer; white-space: nowrap; transition: color .2s; }
.cl-plan-nav button.on { color: #0b3d3c; }
.cl-plan-nav .pildora { position: absolute; z-index: 0; top: .25rem; bottom: .25rem; left: .25rem; width: calc((100% - .5rem) / var(--n)); background: #fff; border-radius: .7rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .16); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.cl-plan-cuerpo { display: flex; flex-direction: column; gap: 1rem; transition: opacity .15s; }
.cl-plan-intro { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-plan-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.cl-plan-doc h3, .cl-plan-grupo h3, .cl-plan-seg h3 { margin: 0 0 .7rem; font-size: 1rem; font-weight: 900; color: #0b3d3c; line-height: 1.3; }
.cl-plan-grupo h3 { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cl-plan-grupo h3 b { font-size: .72rem; font-weight: 800; color: #6b7280; background: #eceff4; border-radius: 999px; padding: .1rem .55rem; }
.cl-prosa { font-size: .9rem; line-height: 1.65; color: #374151; overflow-wrap: anywhere; }
.cl-prosa p { margin: 0 0 .7rem; } .cl-prosa p:last-child { margin-bottom: 0; }
.cl-prosa h5 { margin: 1rem 0 .35rem; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #006363; }
.cl-prosa ul, .cl-prosa ol { margin: 0 0 .7rem; padding-left: 1.25rem; } .cl-prosa li { margin: .2rem 0; }
.cl-prosa strong { color: #0b3d3c; } .cl-prosa a { color: #006363; }
.cl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cl-chips li { background: #e6f2f1; color: #0b3d3c; border-radius: 999px; padding: .28rem .75rem; font-size: .82rem; font-weight: 700; line-height: 1.25; }
.cl-chips.hash li { background: #eef2ff; color: #3730a3; }
.cl-plan-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.cl-plan-lista li { position: relative; padding-left: 1.1rem; font-size: .9rem; font-weight: 600; color: #1f2937; line-height: 1.4; }
.cl-plan-lista li::before { content: ''; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: #0a7c7c; }
.cl-plan-ins summary { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; font-size: .98rem; font-weight: 900; color: #0b3d3c; }
.cl-plan-ins summary::-webkit-details-marker { display: none; }
.cl-plan-ins summary i { flex: none; width: .9rem; height: .9rem; border-radius: .3rem; background: var(--c); }
.cl-plan-ins summary span { flex: 1; min-width: 0; }
.cl-plan-ins summary b { font-size: .72rem; font-weight: 800; color: #6b7280; background: #eceff4; border-radius: 999px; padding: .1rem .55rem; }
.cl-plan-ins .cl-chips { margin-top: .85rem; }
.cl-plan-ins .cl-chips li { background: color-mix(in srgb, var(--c) 14%, #fff); }
.cl-plan-seg p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: #374151; }
.cl-plan-seg p.perfil { color: #6b7280; }
.cl-plan-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin: 0; }
.cl-plan-datos dt { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; } .cl-plan-datos dd { margin: .1rem 0 0; font-weight: 800; color: #0b3d3c; }
@media print { .cl-plan-nav { display: none; } }
.cl-plan-div { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #006363; }

/* Contexto: cabecera con la ficha, índice de capítulos y, por capítulo, sus apartados en tarjetas. */
.cl-plan-cab { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.6rem; border-radius: 1.25rem; color: #fff; background: #006363; box-shadow: 0 1px 2px rgba(0, 60, 59, .12); }
.cl-plan-cab h2 { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
.cl-plan-ficha { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0; }
.cl-plan-ficha dt { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .7); }
.cl-plan-ficha dd { margin: .1rem 0 0; font-size: 1rem; font-weight: 800; }
.cl-plan-indice { display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.cl-plan-indice a { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .3rem .85rem .3rem .4rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; }
.cl-plan-indice a:hover { background: rgba(255, 255, 255, .26); }
.cl-plan-indice a b { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.4rem; border-radius: 999px; background: #fff; color: #006363; font-size: .7rem; font-weight: 900; }
.cl-plan-cap { display: flex; flex-direction: column; gap: .8rem; scroll-margin-top: 1rem; }
.cl-plan-cap-tit { display: flex; align-items: center; gap: .7rem; margin: .6rem 0 0; font-size: 1.15rem; font-weight: 900; color: #0b3d3c; }
.cl-plan-cap-tit b { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.7rem; border-radius: .55rem; background: #e6f2f1; color: #006363; font-size: .78rem; font-weight: 900; }
.cl-plan-doc .cl-chips { margin-top: .2rem; }
.cl-plan-doc h3 { padding-bottom: .55rem; border-bottom: 1px solid #eef0f4; }
.cl-plan-sub { margin-top: .9rem; padding: .8rem 1rem; border-radius: .8rem; background: #f6f9f9; }
.cl-plan-sub h4 { margin: 0 0 .4rem; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: #006363; }
.cl-plan-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .8rem; margin-top: .9rem; }
.cl-plan-subs .cl-plan-sub { margin-top: 0; }
.cl-prosa { max-width: 75ch; }
.cl-plan-tarjetas { grid-auto-flow: row dense; }
@media (max-width: 40rem) { .cl-plan-cab { padding: 1.1rem; } .cl-plan-cab h2 { font-size: 1.2rem; } }
.cl-plan-cap .cl-plan-tarjetas { align-items: stretch; }

/* ═══ Plan, segunda versión: menos huecos y menos texto de golpe. ═══ */
.cl-plan { gap: .8rem; margin-top: 1rem; }
/* Tarjetas en columnas que se rellenan (sin huecos por alturas distintas). */
.cl-plan-masonry { column-width: 23rem; column-gap: .8rem; }
.cl-plan-masonry > * { break-inside: avoid; margin: 0 0 .8rem; }
.cl-plan .cl-card { padding: 1rem 1.15rem; border-radius: 1rem; }
.cl-plan-ctx { display: flex; flex-direction: column; gap: .8rem; }
.cl-plan-cab { gap: .8rem; padding: 1.1rem 1.3rem; border-radius: 1rem; }
.cl-plan-cab h2 { font-size: 1.3rem; }
.cl-plan-indice { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.cl-plan-indice button { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .3rem .85rem .3rem .4rem; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.cl-plan-indice button:hover { background: rgba(255, 255, 255, .26); }
.cl-plan-indice button.on { background: #fff; color: #0b3d3c; }
.cl-plan-indice button b { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.4rem; border-radius: 999px; background: #fff; color: #006363; font-size: .7rem; font-weight: 900; }
.cl-plan-indice button.on b { background: #006363; color: #fff; }
.cl-plan-doc h3, .cl-plan-grupo h3, .cl-plan-seg h3 { margin: 0 0 .55rem; padding-bottom: .45rem; border-bottom: 1px solid #eef0f4; font-size: .92rem; }
.cl-plan-doc .cl-prosa { font-size: .88rem; line-height: 1.55; max-width: none; }
.cl-plan-sub { padding: .65rem .8rem; margin-top: .6rem; }
/* Texto recortado a unas líneas con «Leer más»: el botón sólo sale si el texto no cabe. */
.cl-clamp { position: relative; max-height: 11.5rem; overflow: hidden; }
.cl-clamp.corto { max-height: 5.6rem; }
.cl-clamp.recortado::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.cl-clamp.abierto { max-height: none; }
.cl-mas { margin-top: .5rem; border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 800; color: #006363; cursor: pointer; }
.cl-mas:hover { text-decoration: underline; }
.cl-plan-grupo .cl-chips { margin: 0; }
.cl-chips li { padding: .22rem .65rem; font-size: .8rem; }
.cl-plan-seg h3 { display: flex; align-items: center; gap: .6rem; }
.cl-plan-seg .ini { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; background: #006363; color: #fff; font-size: .85rem; font-weight: 900; }
.cl-plan-seg .cl-chips { margin-top: .6rem; }
.cl-plan-seg p { font-size: .88rem; margin-bottom: .5rem; }

/* Insignias: ámbitos como filtros de colores + buscador + temas agrupados. */
.cl-ins { display: flex; flex-direction: column; gap: .8rem; }
.cl-ins-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.cl-ins-cab .cifra { font-size: .9rem; font-weight: 700; color: #6b7280; }
.cl-ins-cab .cifra b { color: #0b3d3c; font-size: 1.1rem; font-weight: 900; }
.cl-ins-cab .buscar { display: flex; align-items: center; gap: .5rem; min-width: min(100%, 18rem); padding: 0 .8rem; height: 2.3rem; background: #fff; border-radius: 999px; outline: 1px solid rgba(3, 7, 18, .1); color: #6b7280; }
.cl-ins-cab .buscar:focus-within { outline: 2px solid #0a7c7c; }
.cl-ins-cab .buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: .88rem; color: #111827; }
.cl-ins-ambitos { display: flex; flex-wrap: wrap; gap: .45rem; }
.cl-ins-ambitos button { --c: #006363; display: inline-flex; align-items: center; gap: .5rem; border: 0; border-radius: 999px; padding: .38rem .5rem .38rem .8rem; background: #fff; outline: 1px solid rgba(3, 7, 18, .1); color: #1f2937; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .15s, outline-color .15s; }
.cl-ins-ambitos button:hover { background: color-mix(in srgb, var(--c) 10%, #fff); }
.cl-ins-ambitos button .p { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); flex: none; }
.cl-ins-ambitos button i { font-style: normal; min-width: 1.6rem; text-align: center; padding: .08rem .45rem; border-radius: 999px; background: #eceff4; font-size: .72rem; font-weight: 800; color: #4b5563; font-variant-numeric: tabular-nums; }
.cl-ins-ambitos button.on { background: var(--c); outline-color: var(--c); color: #fff; }
.cl-ins-ambitos button.on .p { background: #fff; }
.cl-ins-ambitos button.on i { background: rgba(255, 255, 255, .25); color: #fff; }
.cl-ins-ambitos button.todo { --c: #0b3d3c; padding-left: .9rem; }
.cl-ins-ambitos button.vacio { opacity: .4; }
.cl-ins-grupos { column-width: 22rem; column-gap: .8rem; }
.cl-ins-grupo { --c: #006363; break-inside: avoid; margin: 0 0 .8rem; padding: .9rem 1rem 1rem; background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0, 60, 59, .06); outline: 1px solid rgba(3, 7, 18, .05); border-top: 4px solid var(--c); }
.cl-ins-grupo header { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }
.cl-ins-grupo header .p { width: .8rem; height: .8rem; border-radius: .25rem; background: var(--c); flex: none; }
.cl-ins-grupo h3 { flex: 1; min-width: 0; margin: 0; font-size: .92rem; font-weight: 900; color: #0b3d3c; line-height: 1.25; }
.cl-ins-grupo header i { font-style: normal; font-size: .72rem; font-weight: 800; color: #4b5563; background: #eceff4; border-radius: 999px; padding: .08rem .5rem; }
.cl-ins-grupo .cl-chips li { background: color-mix(in srgb, var(--c) 13%, #fff); }
.cl-ins-vacio { grid-column: 1 / -1; margin: 1rem 0; text-align: center; color: #6b7280; }
.cl-ins-vacio button { border: 0; background: none; color: #006363; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
@media print { .cl-clamp { max-height: none !important; } .cl-clamp::after { display: none !important; } .cl-mas { display: none !important; } }

/* Documentos (Drive): ruta de carpetas y filas con nombre, formato, fecha y tamaño. */
.cl-dr-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; font-size: .9rem; font-weight: 700; }
.cl-dr-ruta button { border: 0; background: none; padding: .15rem .35rem; border-radius: .4rem; font: inherit; color: #062f2e; cursor: pointer; }
.cl-dr-ruta button:hover { background: #e6f2f1; }
.cl-dr-ruta .sep { width: .9rem; height: .9rem; color: #9ca3af; }
.cl-dr-ruta .aqui { padding: .15rem .35rem; color: #5b9a97; font-weight: 900; }
.cl-dr-cab, .cl-dr-fila { display: grid; grid-template-columns: minmax(14rem, 1fr) 8rem 6.5rem 5.5rem 5.5rem; gap: .8rem; align-items: center; }
.cl-dr-cab { padding: .55rem 1rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; border-bottom: 1px solid #eef0f4; }
.cl-dr-fila { padding: .45rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: .85rem; color: #374151; }
.cl-dr-fila:hover { background: #f9fbfb; }
.cl-dr-fila .fecha, .cl-dr-fila .tam { font-variant-numeric: tabular-nums; color: #6b7280; }
.cl-dr-fila .acc { display: flex; justify-content: flex-end; gap: .35rem; }
.cl-dr-fila.carpeta .nom { font-weight: 800; color: #0b3d3c; }
@media (max-width: 52rem) { .cl-dr-cab { display: none; } .cl-dr-fila { grid-template-columns: minmax(0, 1fr) auto; } .cl-dr-fila .fmt, .cl-dr-fila .fecha, .cl-dr-fila .tam { display: none; } }
@media print { .cl-dr-fila .acc { display: none; } .cl-dr-fila { break-inside: avoid; } }

/* Imprimir (botón de cada sección): en papel sólo sale la sección, sin barras de herramientas ni botones. */
.cl-nav .cl-nav-imprimir { margin: .4rem 0 .4rem auto; padding: 0 .85rem; align-self: center; }
@media print {
    .cl-imprimible .cl-imprimir, .cl-imprimible .cl-an-imprimir, .cl-imprimible .cl-cal-btn, .cl-imprimible .cl-mas, .cl-imprimible .cl-plan-nav,
    .cl-imprimible .cl-plan-indice, .cl-imprimible .cl-ins-ambitos, .cl-imprimible .cl-ins-cab .buscar, .cl-imprimible .cl-dc-barra, .cl-imprimible .cl-ct-barra,
    .cl-imprimible .cl-ct-mas, .cl-imprimible .cl-dc-mas, .cl-imprimible .cl-cn-herr, .cl-imprimible .cl-cn-media + .cl-cn-herr, .cl-imprimible select { display: none !important; }
    /* Contexto: todos los capítulos, no sólo el de la pestaña; textos enteros. */
    .cl-plan-cap { display: block !important; margin-bottom: .8rem; }
    .cl-plan-masonry, .cl-ins-grupos { column-gap: .6rem; }
    .cl-plan-masonry > *, .cl-ins-grupo, .cl-card { break-inside: avoid; }
    .cl-imprimible .cl-card { box-shadow: none; outline: 1px solid #e5e7eb; }
    .cl-imprimible .cl-dc, .cl-imprimible .cl-dr-lista { border: 1px solid #e5e7eb; }
}

/* Analytics: evolución en líneas, rosca y tablas */
.cl-lineas .cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; margin-bottom: .6rem; }
.cl-lineas .cab .tit { margin: 0; }
.cl-lineas-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cl-lineas-chips button { font: inherit; font-size: .72rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #4b5563; cursor: pointer; }
.cl-lineas-chips button:hover { border-color: #6fb0ae; color: #006363; }
.cl-lineas-chips button.on { background: #006363; border-color: #006363; color: #fff; }
.cl-lineas-cuerpo { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-rows: 13rem 2rem; column-gap: .5rem; }
.cl-lineas-y { position: relative; grid-column: 1; grid-row: 1; }
.cl-lineas-y span:nth-of-type(1) { transform: translateY(-1.1rem); }
.cl-lineas-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: .66rem; font-weight: 700; color: #9ca3af; font-variant-numeric: tabular-nums; line-height: 1; }
.cl-lineas-zona { position: relative; grid-column: 2; grid-row: 1; cursor: crosshair; touch-action: pan-y; }
.cl-lineas-zona svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-lineas-zona .guia { stroke: #eef0f4; stroke-width: 1; }
.cl-lineas-zona .area { fill: rgba(0, 99, 99, .09); }
.cl-lineas-zona .linea { fill: none; stroke: #006363; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cl-lineas-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: #9ca3af; pointer-events: none; }
.cl-lineas-punto { position: absolute; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; background: #fff; border: .18rem solid #006363; pointer-events: none; }
.cl-lineas-tip { position: absolute; top: .4rem; z-index: 5; margin-left: 1rem; min-width: 13.5rem; padding: .6rem .75rem; border-radius: .7rem; background: #0b3d3c; color: #fff; font-size: .76rem; box-shadow: 0 10px 28px -8px rgba(0, 60, 59, .5); pointer-events: none; }
.cl-lineas-tip.izq { margin-left: 0; transform: translateX(calc(-100% - 1rem)); }   /* el tooltip va a la derecha del cursor; `.izq` sólo cuando a la derecha no cabe */
.cl-lineas-tip strong { display: block; margin-bottom: .35rem; font-size: .74rem; color: #b9d6d5; }
.cl-lineas-tip strong::first-letter { text-transform: uppercase; }
.cl-lineas-tip .fila { display: flex; justify-content: space-between; gap: 1rem; padding: .08rem 0; color: #d1e3e2; }
.cl-lineas-tip .fila b { font-variant-numeric: tabular-nums; color: #fff; }
.cl-lineas-tip .fila.fuerte { color: #fff; font-weight: 800; }
.cl-lineas-x { position: relative; grid-column: 2; grid-row: 2; }
.cl-lineas-x span { position: absolute; top: .8rem; transform: translateX(-50%); font-size: .68rem; font-weight: 700; color: #9ca3af; white-space: nowrap; }
.cl-lineas-x span:first-child { transform: none; }
.cl-lineas-x span:last-child { transform: translateX(-100%); }
.cl-an-aviso { margin-bottom: 1rem; padding: .7rem 1rem; font-size: .82rem; font-weight: 700; color: #92400e; background: #fffbeb; }
.cl-ga-lista em { flex: none; min-width: 3.6rem; text-align: right; font-style: normal; font-size: .75rem; font-weight: 700; color: #9ca3af; font-variant-numeric: tabular-nums; }
.cl-ga-donut { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-block: auto; }
.cl-ga-donut .cl-ga-tabla { align-self: stretch; }
.cl-ga-donut .rosca { position: relative; flex: none; width: 8.5rem; height: 8.5rem; }
.cl-ga-donut .rosca svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cl-ga-donut .rosca circle { fill: none; stroke-width: 5.5; }
.cl-ga-donut .rosca .fondo { stroke: #eef0f4; }
.cl-ga-donut .rosca .seg { cursor: pointer; transition: opacity .15s, stroke-width .15s; }
.cl-ga-donut .rosca .seg.on { stroke-width: 7; }
.cl-ga-donut .rosca .seg.dim { opacity: .3; }
.cl-ga-donut .rosca .centro { position: absolute; inset: 2.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-align: center; pointer-events: none; }
.cl-ga-donut .rosca .centro small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #9ca3af; }
.cl-ga-donut .rosca .centro b { font-size: 1.1rem; line-height: 1.1; letter-spacing: -.01em; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-ga-donut .rosca .centro em { font-style: normal; font-size: .76rem; font-weight: 800; color: #006363; font-variant-numeric: tabular-nums; }
.cl-ga-donut .cl-ga-tabla tbody tr { cursor: default; transition: opacity .15s, background .15s; outline: none; }
.cl-ga-donut .cl-ga-tabla tbody tr.on { background: #f6f9f9; }
.cl-ga-donut .cl-ga-tabla tbody tr.dim { opacity: .45; }
.cl-ga-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cl-ga-tabla th { padding: 0 0 .4rem .6rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; text-align: left; white-space: nowrap; }
.cl-ga-tabla td { padding: .38rem 0 .38rem .6rem; border-top: 1px solid #eef0f4; color: #1f2937; }
.cl-ga-tabla th:first-child, .cl-ga-tabla td:first-child { padding-left: 0; }
.cl-ga-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-ga-tabla td.num { font-weight: 700; color: #0b3d3c; }
.cl-ga-tabla .nom { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cl-ga-tabla .punto { display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem; border-radius: 50%; }
.cl-ga-tabla-ancha { overflow-x: auto; }
.cl-ga-tabla-ancha .cl-ga-tabla .nom { max-width: 28rem; }
@media (max-width: 640px) {
    .cl-ga-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .cl-ga-donut .cl-ga-tabla { justify-self: stretch; }
    .cl-lineas-cuerpo { grid-template-columns: 2.6rem minmax(0, 1fr); }
}
@media print { .cl-lineas-chips { display: none; } .cl-lineas-zona .area, .cl-ga-donut .rosca { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-ga-tabla .nom { white-space: normal; } }

/* Analytics: cifras de los indicadores a la derecha, tabla de páginas con columnas fijas y paginada, y widgets de la misma altura */
.cl-an-red.cl-an-paginas { margin-top: 1.75rem; }
.cl-ga-paginas { table-layout: fixed; min-width: 46rem; }
.cl-ga-paginas col.nom { width: 36%; }
.cl-ga-paginas th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.cl-ga-paginas .nom { max-width: none; }
.cl-ga-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #eef0f4; }
.cl-ga-pag .rango { margin-right: auto; font-size: .76rem; font-weight: 700; color: #9ca3af; font-variant-numeric: tabular-nums; }
.cl-ga-pag button { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .5rem; font: inherit; font-size: .78rem; font-weight: 800; border-radius: .5rem; border: 1px solid #d1d5db; background: #fff; color: #4b5563; cursor: pointer; }
.cl-ga-pag button svg { width: .9rem; height: .9rem; }
.cl-ga-pag button:hover:not(:disabled) { border-color: #6fb0ae; color: #006363; }
.cl-ga-pag button.on { background: #006363; border-color: #006363; color: #fff; }
.cl-ga-pag button:disabled { opacity: .4; cursor: default; }
@media (min-width: 641px) {
    .cl-an-redes { grid-auto-rows: 1fr; align-items: stretch; }
    .cl-an-redes .cl-an-red { display: flex; flex-direction: column; }
}
@media print { .cl-ga-paginas tr[data-fila] { display: table-row !important; } .cl-an-redes { grid-auto-rows: auto; } }

/* Analytics: widgets de tres en tres, con separación visible entre ellos y respecto al resumen */
.cl-an-redes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 0; }
.cl-an-ga ~ .cl-an-redes { margin-top: 1.9rem; }   /* sólo la rejilla de Analytics va separada del resumen que tiene encima */
.cl-an-red.cl-an-paginas { margin-top: 1.9rem; }
@media (max-width: 1100px) { .cl-an-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl-an-redes { grid-template-columns: minmax(0, 1fr); } }

/* Cabecera en una sola fila: resumen del periodo y, al lado, el selector de meses o la línea de tiempo */
.cl-cp-fila { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 1rem; align-items: stretch; }
.cl-cp-fila.analitica { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
.cl-cp-fila.sola { grid-template-columns: minmax(0, 1fr); }
.cl-cp-fila > .cl-cp-hero { align-items: center; padding: 1rem 1.3rem; gap: .8rem 1.2rem; }
.cl-cp-fila > .cl-cp-hero h2 { min-width: 0; font-size: 1.5rem; }
.cl-cp-fila > .cl-cp-hero .val { font-size: 2.4rem; }
.cl-cp-fila > .cl-cp-hero .nav { margin-top: .25rem; }
.cl-cp-fila > .cl-cp-meses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; width: auto; overflow: visible; align-self: stretch; }
.cl-cp-fila > .cl-cp-meses button { min-width: 0; flex-direction: column; gap: 0; padding: .35rem .2rem; font-size: .8rem; line-height: 1.15; }
.cl-cp-fila > .cl-cp-meses .n { font-size: .7rem; }
.cl-cp-fila > .cl-an-tiempo { min-width: 0; }
.cl-cp-fila .cl-an-tiempo .cl-cp-meses button { min-width: 0; padding: .5rem .1rem; font-size: .78rem; }
@media (max-width: 64rem) { .cl-cp-fila, .cl-cp-fila.analitica { grid-template-columns: minmax(0, 1fr); } }

.cl-lineas-guia { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #eef0f4; pointer-events: none; }

/* Analíticas: las pestañas (izquierda) y «Imprimir» (derecha) en una misma línea, pegadas al contenido que viene debajo */
.cl-an-barra { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .9rem 0 -.5rem; }
.cl-an-barra .cl-an-pestanas { margin: 0; }
.cl-an-barra .cl-an-imprimir { margin: 0 0 0 auto; }

/* Analíticas: fila de periodo + línea de tiempo más compacta y proporcionada */
.cl-cp-fila.analitica > .cl-cp-hero { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: .55rem; padding: .9rem 1.2rem; }
.cl-cp-fila.analitica > .cl-cp-hero .mes .nav { margin-top: .15rem; }
.cl-cp-fila.analitica > .cl-cp-hero h2 { text-align: left; font-size: 1.45rem; }
.cl-cp-fila.analitica > .cl-cp-hero .cifra { display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-items: start; gap: .1rem .5rem; }
.cl-cp-fila.analitica > .cl-cp-hero .cifra .val { font-size: 1.9rem; }
.cl-cp-fila.analitica > .cl-cp-hero .cifra .chip { grid-column: 1 / -1; justify-self: start; margin-top: .3rem; }
.cl-cp-fila > .cl-an-tiempo { gap: .55rem; padding: .85rem 1.1rem; }
.cl-cp-fila > .cl-an-tiempo .cl-cp-tit { margin: 0; }
.cl-cp-fila > .cl-an-tiempo .cl-cp-meses { padding: .2rem; }
.cl-cp-fila > .cl-an-tiempo .cl-cp-meses button { padding: .4rem .1rem; }
.cl-cp-fila > .cl-an-tiempo .cl-an-regla { gap: .25rem; }
.cl-cp-fila > .cl-an-tiempo .cl-an-fechas input[type=date] { padding: .2rem .45rem; }

/* Clipping: una sola tarjeta —bloque verde pegado a la izquierda (45 %) y, al lado, los 12 meses en mosaico de 6 × 2 (55 %)— */
.cl-cp-fila.clipping { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 0; overflow: hidden; border-radius: 1.25rem; background: #fff; border: 1px solid #e5e7eb; }
.cl-cp-fila.clipping > .cl-cp-hero { border-radius: 0; box-shadow: none; padding: 1.1rem 1.6rem; }
.cl-cp-mosaico { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .85rem 1.1rem .8rem; }
.cl-cp-mosaico .et { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-cp-mosaico .meses { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(3.2rem, 1fr); gap: .35rem; }
.cl-cp-mosaico .meses button { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .1rem; padding: .45rem .6rem; border: 0; border-radius: .7rem; background: none; cursor: pointer; font: inherit; line-height: 1.15; color: #4b5563; text-align: left; }
.cl-cp-mosaico .meses button b { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.cl-cp-mosaico .meses button span { font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #6b7280; }
.cl-cp-mosaico .meses button i { display: block; width: 100%; height: .25rem; border-radius: 999px; background: #e5e7eb; }
.cl-cp-mosaico .meses button u { display: block; height: 100%; border-radius: 999px; background: #9fc8c6; text-decoration: none; }
.cl-cp-mosaico .meses button:hover { background: #f3f6f6; }
.cl-cp-mosaico .meses button.on { background: #e6f2f1; color: #006363; }
.cl-cp-mosaico .meses button.on span { color: #0b3d3c; }
.cl-cp-mosaico .meses button.on i { background: #c4dfde; }
.cl-cp-mosaico .meses button.on u { background: #006363; }
@media (max-width: 64rem) { .cl-cp-fila.clipping { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .cl-cp-mosaico .meses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media print { .cl-cp-mosaico .meses button u { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ═══ Informes de VISTA en Analíticas (Radar, Destino turístico, Contexto, Personalizado, Actualidad, SERP y GEO) ═══ */
/* Cabecera: el selector de tipo e informe */
.cl-inf-selector { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .85rem 1.1rem; justify-content: center; }
.cl-inf-selector .cl-cp-tit { margin: 0; }
.cl-inf-tipos { align-self: flex-start; }
.cl-inf-runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .35rem; }
.cl-inf-runs button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .45rem .65rem; border: 0; border-radius: .7rem; background: #f6f9f9; cursor: pointer; font: inherit; line-height: 1.15; color: #4b5563; text-align: left; }
.cl-inf-runs button b { font-size: .8rem; font-weight: 800; white-space: nowrap; }
.cl-inf-runs button span { font-size: .7rem; font-weight: 700; color: #6b7280; }
.cl-inf-runs button:hover { background: #eaf1f1; }
.cl-inf-runs button.on { background: #e6f2f1; color: #006363; box-shadow: inset 0 0 0 1px #9fc8c6; }
.cl-inf-runs button.on span { color: #0b3d3c; }
/* Cuerpo */
.cl-inf { display: flex; flex-direction: column; gap: 1.4rem; margin-top: .4rem; }
.cl-inf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.4rem; align-items: stretch; }
.cl-inf-grid.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-inf-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-inf-grid > .ancha, .cl-inf-grid > .cl-inf-ancha { grid-column: 1 / -1; }
.cl-inf-grid > .cl-card { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 64rem) { .cl-inf-grid.dos, .cl-inf-grid.tres { grid-template-columns: minmax(0, 1fr); } }
.cl-inf-aviso { padding: .7rem 1rem; font-size: .82rem; font-weight: 700; color: #92400e; background: #fffbeb; }
/* Texto: HTML limpio de un informe, párrafos y listas */
.cl-inf-prosa { font-size: .9rem; line-height: 1.6; color: #1f2937; min-width: 0; overflow-wrap: anywhere; }
.cl-inf-prosa > :first-child { margin-top: 0; }
.cl-inf-prosa > :last-child { margin-bottom: 0; }
.cl-inf-prosa p { margin: 0 0 .7rem; }
.cl-inf-prosa h1, .cl-inf-prosa h2, .cl-inf-prosa h3, .cl-inf-prosa h4, .cl-inf-prosa h5, .cl-inf-prosa h6 { margin: 1rem 0 .4rem; font-size: .95rem; font-weight: 800; line-height: 1.25; color: #0b3d3c; }
.cl-inf-prosa ul, .cl-inf-prosa ol { margin: 0 0 .7rem; padding-left: 1.2rem; }
.cl-inf-prosa li { margin: .2rem 0; }
.cl-inf-prosa a { color: #006363; text-decoration: underline; }
.cl-inf-prosa blockquote { margin: 0 0 .7rem; padding: .6rem .9rem; border-radius: .7rem; background: #f6f9f9; color: #374151; }
.cl-inf-prosa table { width: 100%; margin: 0 0 .7rem; border-collapse: collapse; font-size: .82rem; }
.cl-inf-prosa th { padding: 0 .6rem .4rem 0; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; text-align: left; }
.cl-inf-prosa td { padding: .38rem .6rem .38rem 0; border-top: 1px solid #eef0f4; }
.cl-inf-texto { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.5; color: #1f2937; }
.cl-inf-puntos { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; color: #1f2937; }
.cl-inf-puntos li { margin: .2rem 0; }
.cl-inf-subbloque { margin: 0 0 .7rem; padding: .7rem .9rem; border-radius: .8rem; background: #f6f9f9; }
.cl-inf-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .55rem .9rem; margin: 0; }
.cl-inf-ficha > div { min-width: 0; }
.cl-inf-ficha > div.ancho { grid-column: 1 / -1; }
.cl-inf-ficha dt { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.cl-inf-ficha dd { margin: .1rem 0 0; font-size: .88rem; color: #1f2937; overflow-wrap: anywhere; }
/* Piezas comunes */
.cl-inf-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.3; background: #eef2f7; color: #334155; white-space: nowrap; }
.cl-inf-chip.ok { background: #e6f2f1; color: #00504f; }
.cl-inf-chip.aviso { background: #fff3dc; color: #8a4b05; }
.cl-inf-chip.mal { background: #fbe4e1; color: #9a2018; }
.cl-inf-chip.gris { background: #f1f2f4; color: #4b5563; }
.cl-inf-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cl-inf-destacado { margin: 0; padding: .8rem 1rem; border-radius: .9rem; background: #f6f9f9; font-size: .88rem; line-height: 1.5; color: #1f2937; }
.cl-inf-cifra { display: flex; align-items: baseline; gap: .5rem; }
.cl-inf-cifra b { font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-cifra span { font-size: .8rem; font-weight: 700; color: #6b7280; }
.cl-inf-nota { margin: 0; font-size: .76rem; color: #9ca3af; }
.cl-inf-tarjeta { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem; border-radius: .9rem; background: #fff; border: 1px solid #e5e7eb; }
.cl-inf-tarjeta h4 { margin: 0; font-size: .92rem; font-weight: 800; line-height: 1.3; color: #0b3d3c; }
.cl-inf-tarjeta p { margin: 0; font-size: .82rem; line-height: 1.45; color: #4b5563; }
.cl-inf-tarjeta .pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .74rem; font-weight: 700; color: #6b7280; }
.cl-inf-lista-tarjetas { display: flex; flex-direction: column; gap: .7rem; }
@media print { .cl-inf-chip, .cl-inf-destacado, .cl-inf-subbloque { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-inf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Submenús de informes: estilos propios de cada uno ═══ */

/* — radar — */
/* Radar reputacional */
.cl-inf-radar-svg { display: block; width: 100%; max-width: 26rem; height: auto; margin: 0 auto; }
.cl-inf-radar-svg text { font-family: inherit; }
.cl-inf-radar-leyenda { justify-content: center; margin-top: .5rem; }
.cl-inf-radar-cabeza > .cl-card { justify-content: flex-start; }
.cl-inf-radar-capa .cl-cp-tit { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cl-inf-radar-capa > * + * { margin-top: .6rem; }
.cl-inf-radar-cuerpo { max-height: 11rem; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.cl-inf-radar-cuerpo.abierto { max-height: none; -webkit-mask-image: none; mask-image: none; }
.cl-inf-radar-mas { align-self: flex-start; padding: .25rem .8rem; border: 0; border-radius: 999px; background: #e6f2f1; color: #00504f; font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.cl-inf-radar-mas:hover { background: #d3e8e6; }
@media print { .cl-inf-radar-cuerpo { max-height: none; -webkit-mask-image: none; mask-image: none; } .cl-inf-radar-mas { display: none; } }

/* — destino — */
/* Informe «Destino turístico» (Analíticas). */
.cl-inf-destino-uni { font-size: .55em; font-weight: 700; color: #6b7280; margin-left: .15em; }
.cl-inf-destino-resumen { margin-top: 1rem; }
.cl-inf-destino-nota { display: block; font-size: .7rem; font-weight: 600; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }

/* Ranking de atractivos */
.cl-inf-destino-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.cl-inf-destino-rank li { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cl-inf-destino-rank .pos { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #e6f2f1; color: #006363; font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-inf-destino-rank .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cl-inf-destino-rank .nom { font-size: .88rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
.cl-inf-destino-rank .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .75rem; }
.cl-inf-destino-rank .meta b { color: #0b3d3c; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-inf-destino-rank .meta em { font-style: normal; color: #6b7280; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-inf-destino-estrellas { position: relative; display: inline-block; font-size: .95rem; line-height: 1; letter-spacing: .05em; white-space: nowrap; }
.cl-inf-destino-estrellas .fondo { color: #d9dee3; }
.cl-inf-destino-estrellas .lleno { position: absolute; left: 0; top: 0; overflow: hidden; color: #c9a227; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cl-inf-destino-tend { flex: none; font-size: .8rem; font-weight: 900; }
.cl-inf-destino-tend.sube { color: #0b6b56; }
.cl-inf-destino-tend.baja { color: #b3261e; }
.cl-inf-destino-tend.igual { color: #6b7280; }

/* Mercados emisores: la variación va coloreada */
.cl-inf-destino-mercados .nom { white-space: normal; }
.cl-inf-destino-var.sube { color: #0b6b56; }
.cl-inf-destino-var.baja { color: #b3261e; }
.cl-inf-destino-var.igual { color: #6b7280; }
.cl-inf-destino-mercados li { padding-bottom: .5rem; }

/* Estacionalidad: 12 barras, la del mes del informe resaltada */
.cl-inf-destino-estac { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .4rem; align-items: end; height: 11rem; }
.cl-inf-destino-estac .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; height: 100%; min-width: 0; padding-top: .2rem; border-radius: .5rem; }
.cl-inf-destino-estac .barra { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.cl-inf-destino-estac .barra i { display: block; width: 100%; border-radius: .35rem .35rem .15rem .15rem; background: #6fb0ae; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cl-inf-destino-estac .ind { font-size: .68rem; font-weight: 800; color: #4b5563; font-variant-numeric: tabular-nums; }
.cl-inf-destino-estac .mes { font-size: .7rem; font-weight: 700; color: #6b7280; text-transform: capitalize; }
.cl-inf-destino-estac .actual { background: #e6f2f1; box-shadow: inset 0 0 0 1px #9fc8c6; }
.cl-inf-destino-estac .actual .barra i { background: #006363; opacity: 1 !important; }
.cl-inf-destino-estac .actual .ind, .cl-inf-destino-estac .actual .mes { color: #006363; }

/* Comparativa */
.cl-inf-destino-comp th.nom { text-align: left; font-weight: 700; }
.cl-inf-destino-comp tr.propio > * { background: #e6f2f1; }
.cl-inf-destino-comp tr.propio th.nom { font-weight: 800; color: #0b3d3c; }
.cl-inf-destino-comp th .cl-inf-chip { margin-left: .5rem; }
.cl-inf-destino-comp td.mejor { font-weight: 900; color: #0b3d3c; }
.cl-inf-destino-comp td.mejor::before { content: "★ "; color: #c9a227; font-size: .8em; }

/* Fortalezas / debilidades */
.cl-inf-destino-puntos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; line-height: 1.45; color: #1f2937; }
.cl-inf-destino-puntos li { position: relative; padding-left: 1.2rem; }
.cl-inf-destino-puntos li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .55rem; height: .55rem; border-radius: 50%; background: #2f8f83; }
.cl-inf-destino-puntos.debil li::before { background: #c0282d; }

@media (max-width: 40rem) {
    .cl-inf-destino-estac { gap: .15rem; height: 9rem; }
    .cl-inf-destino-estac .ind { display: none; }
}
@media print { .cl-inf-destino-estac .actual { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-inf-destino-comp tr.propio > * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* — contexto — */
/* Informe «Contexto» */
.cl-inf-contexto-intro { margin-bottom: .9rem; max-width: 60rem; font-size: .95rem; line-height: 1.7; }
.cl-inf-contexto-marca { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; color: #0b3d3c; }
.cl-inf-contexto-etiqueta { margin: 0 0 .25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .66rem; }
.cl-inf-contexto-propuesta { font-size: .98rem; line-height: 1.65; border-left: 3px solid #0a7c7c; background: #e6f2f1; color: #0b3d3c; }
.cl-inf-contexto-ejes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; counter-reset: eje; }
.cl-inf-contexto-ejes li { position: relative; padding-left: 2.4rem; counter-increment: eje; min-width: 0; }
.cl-inf-contexto-ejes li::before { content: counter(eje); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: #e6f2f1; color: #006363; font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-inf-contexto-eje-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.cl-inf-contexto-eje-cab b { font-size: .92rem; line-height: 1.35; color: #0b3d3c; }
.cl-inf-contexto-ejes p { margin: .25rem 0 0; font-size: .84rem; line-height: 1.55; color: #4b5563; }
.cl-inf-contexto-audiencias { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .9rem; }
.cl-inf-contexto-audiencias .cl-inf-tarjeta { gap: .55rem; }
.cl-inf-contexto-peso { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .3rem; }
.cl-inf-contexto-peso b { min-width: 1.8rem; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; color: #0b3d3c; }
.cl-inf-contexto-barra { flex: 1; height: .5rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.cl-inf-contexto-barra i { display: block; height: 100%; border-radius: 999px; background: #0a7c7c; }
.cl-inf-contexto-tabla td { vertical-align: top; padding-top: .6rem; padding-bottom: .6rem; }
.cl-inf-contexto-tabla td:nth-child(2), .cl-inf-contexto-tabla td:nth-child(3) { min-width: 11rem; }
.cl-inf-contexto-tabla .cl-inf-chip { white-space: normal; }
.cl-inf-contexto-comp { display: block; font-size: .86rem; color: #0b3d3c; }
.cl-inf-contexto-nivel { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; color: #4b5563; white-space: nowrap; }
.cl-inf-contexto-puntos { display: inline-flex; gap: .2rem; }
.cl-inf-contexto-puntos i { width: .6rem; height: .6rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #9ca3af; }
.cl-inf-contexto-puntos i.on { background: #006363; box-shadow: none; }
.cl-inf-contexto-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .cl-inf-contexto-puntos i.on, .cl-inf-contexto-barra i, .cl-inf-contexto-ejes li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* — personalizado — */
/* Submenú «Personalizado» de Analíticas */
.cl-inf-personalizado-resumen { border-left: 4px solid #006363; background: #f6f9f9; }
.cl-inf-personalizado-resumen .cl-inf-prosa { font-size: .95rem; }

.cl-inf-personalizado-serie { display: flex; flex-direction: column; gap: .3rem; }
.cl-inf-personalizado-lienzo { position: relative; height: 13rem; border-bottom: 1px solid #e5e7eb; }
.cl-inf-personalizado-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-inf-personalizado-punto { position: absolute; top: 0; bottom: 0; width: 2rem; margin-left: -1rem; padding: 0; border: 0; background: transparent; cursor: default; }
.cl-inf-personalizado-punto .bola { position: absolute; left: 50%; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; background: #006363; border: 2px solid #fff; opacity: 0; transition: opacity .12s; }
.cl-inf-personalizado-punto .bola.on, .cl-inf-personalizado-punto:focus-visible .bola { opacity: 1; }
.cl-inf-personalizado-punto:focus-visible { outline: 2px solid #006363; outline-offset: -2px; }
.cl-inf-personalizado-tip { position: absolute; top: .2rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .1rem; padding: .35rem .6rem; border-radius: .6rem; background: #0b3d3c; color: #fff; font-size: .78rem; white-space: nowrap; pointer-events: none; z-index: 2; }
.cl-inf-personalizado-tip.izq { transform: translateX(-100%); }
.cl-inf-personalizado-tip strong { font-size: .7rem; color: #9fc8c6; }
.cl-inf-personalizado-tip span { font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-ejex { display: flex; justify-content: space-between; font-size: .7rem; color: #6b7280; }

.cl-inf-personalizado-prog { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; color: #1f2937; }
.cl-inf-personalizado-check li { display: flex; gap: .6rem; align-items: flex-start; }
.cl-inf-personalizado-check .caja { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border: 2px solid #9ca3af; border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #fff; }
.cl-inf-personalizado-check li.hecho .caja { background: #006363; border-color: #006363; }
.cl-inf-personalizado-check li.hecho { color: #4b5563; }
.cl-inf-personalizado-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cl-inf-personalizado-hitos { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid #e5e7eb; display: flex; flex-direction: column; gap: 1rem; }
.cl-inf-personalizado-hitos li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.cl-inf-personalizado-hitos li::before { content: ''; position: absolute; left: -1.2rem; top: .35rem; width: .8rem; height: .8rem; margin-left: -.4rem; border-radius: 50%; background: #9ca3af; border: 2px solid #fff; box-sizing: border-box; }
.cl-inf-personalizado-hitos li.ok::before { background: #2f8f83; }
.cl-inf-personalizado-hitos li.aviso::before { background: #c9a227; }
.cl-inf-personalizado-hitos li.mal::before { background: #c0282d; }
.cl-inf-personalizado-hitos .fecha { min-width: 6rem; font-size: .75rem; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-hitos .tit { flex: 1; min-width: 12rem; font-size: .9rem; font-weight: 600; color: #1f2937; }

.cl-inf-personalizado-dest { border-left: 4px solid #7287a5; }
.cl-inf-personalizado-dest.ok { border-left-color: #2f8f83; background: #e6f2f1; }
.cl-inf-personalizado-dest.aviso { border-left-color: #c9a227; background: #fff3dc; color: #5c3203; }
.cl-inf-personalizado-dest.mal { border-left-color: #c0282d; background: #fbe4e1; color: #7a1a14; }

.cl-inf-personalizado-cita { margin: 0; padding-left: 1rem; border-left: 4px solid #6fb0ae; }
.cl-inf-personalizado-cita blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; font-style: italic; color: #0b3d3c; }
.cl-inf-personalizado-cita figcaption { margin-top: .5rem; font-size: .78rem; color: #6b7280; }
.cl-inf-personalizado-cita figcaption::before { content: '— '; }

@media (max-width: 640px) { .cl-inf-personalizado-lienzo { height: 10rem; } .cl-inf-personalizado-hitos .fecha { min-width: 0; } }
@media print { .cl-inf-personalizado-dest, .cl-inf-personalizado-resumen, .cl-inf-personalizado-check .caja { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-inf-personalizado-tip { display: none !important; } }

/* — actualidad — */
/* Contenidos · Actualidad */
.cl-inf-actualidad-franja { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-bottom: .9rem; }
.cl-inf-actualidad-reparto { min-width: 0; }
.cl-inf-actualidad-leyenda { margin: .7rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.cl-inf-actualidad-leyenda li { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #374151; }
.cl-inf-actualidad-leyenda i { width: .65rem; height: .65rem; border-radius: 999px; flex: none; }
.cl-inf-actualidad-leyenda b { color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-actualidad-leyenda em { font-style: normal; font-size: .74rem; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-actualidad-alerta { margin-top: .6rem; background: #fffbeb; color: #92400e; }
.cl-inf-actualidad-punto { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; }
.cl-inf-actualidad-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cl-inf-actualidad-cab h4 a { color: inherit; text-decoration: none; }
.cl-inf-actualidad-cab h4 a:hover { color: #006363; text-decoration: underline; }
.cl-inf-actualidad-score { flex: none; display: flex; align-items: center; gap: .45rem; width: 7rem; }
.cl-inf-actualidad-score b { min-width: 1.6rem; text-align: right; font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-inf-actualidad-score span { flex: 1; height: .45rem; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.cl-inf-actualidad-score i { display: block; height: 100%; border-radius: 999px; }
.cl-inf-actualidad-score.alto b { color: #1f6b60; } .cl-inf-actualidad-score.alto i { background: #2f8f83; }
.cl-inf-actualidad-score.medio b { color: #8a6a00; } .cl-inf-actualidad-score.medio i { background: #c9a227; }
.cl-inf-actualidad-score.bajo b { color: #4b5563; } .cl-inf-actualidad-score.bajo i { background: #9ca3af; }
.cl-inf-actualidad-angulo { padding: .5rem .7rem; border-radius: .6rem; background: #f6f9f9; }
.cl-inf-actualidad-angulo strong { color: #0b3d3c; }
.cl-inf-actualidad-porque { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: .76rem; font-weight: 800; color: #006363; cursor: pointer; text-decoration: underline; }
.cl-inf-actualidad-razon { font-size: .8rem; color: #4b5563; }
.cl-inf-actualidad-razon-print { display: none; }
.cl-inf-actualidad-semana { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cl-inf-actualidad-semana li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid #eef0f4; font-size: .86rem; }
.cl-inf-actualidad-semana li:first-child { border-top: 0; }
.cl-inf-actualidad-semana .fecha { font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-actualidad-semana .tit { min-width: 0; font-weight: 700; color: #1f2937; }
.cl-inf-actualidad-semana .tit a { color: inherit; }
.cl-inf-actualidad-semana small { display: block; font-weight: 500; color: #6b7280; }
.cl-inf-actualidad-barra { display: inline-block; width: 4rem; height: .4rem; margin-right: .5rem; vertical-align: middle; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.cl-inf-actualidad-barra i { display: block; height: 100%; background: #6fb0ae; }
.cl-inf-actualidad-lectura { white-space: normal; color: #4b5563; font-size: .8rem; }
.cl-inf-actualidad-silencio { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.cl-inf-actualidad-silencio p { margin: .25rem 0 0; font-size: .82rem; color: #4b5563; }
@media (max-width: 640px) {
  .cl-inf-actualidad-franja { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .cl-inf-actualidad-cab { flex-direction: column; gap: .4rem; }
  .cl-inf-actualidad-semana li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .cl-inf-actualidad-semana li .cl-inf-chip { grid-column: 2; justify-self: start; }
}
@media print {
  .cl-inf-actualidad-it { display: flex !important; break-inside: avoid; }
  .cl-inf-actualidad-razon:not(.cl-inf-actualidad-razon-print) { display: none !important; }
  .cl-inf-actualidad-razon-print { display: block; }
  .cl-inf-actualidad-score i, .cl-inf-actualidad-leyenda i, .cl-cp-apilada span, .cl-inf-actualidad-barra i, .cl-inf-actualidad-punto { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* — serp-geo — */
/* SERP y GEO */
.cl-inf-serpgeo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cl-inf-serpgeo-kpis { margin-top: 1rem; }
.cl-inf-serpgeo-kpis .cl-an-kpi { position: relative; }
.cl-inf-serpgeo-barra { display: flex; height: 1.4rem; margin: .2rem 0 1rem; border-radius: .7rem; overflow: hidden; background: #e5e7eb; }
.cl-inf-serpgeo-barra i { display: block; height: 100%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cl-inf-serpgeo-mejores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cl-inf-serpgeo-mejores li { display: flex; align-items: center; gap: .8rem; padding-bottom: .6rem; border-bottom: 1px solid #eef0f4; }
.cl-inf-serpgeo-mejores li:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-inf-serpgeo-mejores .medalla { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e6f2f1; color: #00504f; font-size: .85rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cl-inf-serpgeo-mejores .medalla.top { background: #006363; color: #fff; }
.cl-inf-serpgeo-mejores .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-inf-serpgeo-mejores .txt b { font-size: .88rem; color: #1f2937; overflow-wrap: anywhere; }
.cl-inf-serpgeo-mejores small { font-size: .72rem; font-weight: 600; color: #6b7280; }
.cl-inf-serpgeo-mejores em { flex: none; text-align: right; font-style: normal; font-size: .88rem; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-serpgeo-tabla td, .cl-inf-serpgeo-tabla th { vertical-align: middle; }
.cl-inf-serpgeo-tabla { min-width: 44rem; }
.cl-inf-serpgeo-tabla td.nom small { display: block; font-size: .7rem; font-weight: 600; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }
.cl-inf-serpgeo-tabla th:not(.num) , .cl-inf-serpgeo-tabla td:not(.num) { padding-right: .6rem; }
.cl-inf-serpgeo-cambio { font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-inf-serpgeo-cambio.sube { color: #0b6b56; }
.cl-inf-serpgeo-cambio.baja { color: #b3261e; }
.cl-inf-serpgeo-cambio.igual { color: #6b7280; }
.cl-inf-serpgeo-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.cl-inf-serpgeo-chips .cl-inf-chip { padding: .08rem .5rem; font-size: .66rem; }
.cl-inf-serpgeo-nada { font-size: .74rem; color: #6b7280; }
.cl-inf-serpgeo-asistentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .9rem; }
.cl-inf-serpgeo-asistentes .cl-inf-tarjeta { align-items: flex-start; }
.cl-inf-serpgeo-meter { align-self: stretch; height: .5rem; border-radius: .3rem; background: #e5e7eb; overflow: hidden; }
.cl-inf-serpgeo-meter i { display: block; height: 100%; background: #0a7c7c; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cl-inf-serpgeo-datos { align-self: stretch; display: flex; flex-direction: column; gap: .2rem; margin: .2rem 0 .3rem; }
.cl-inf-serpgeo-datos > div { display: flex; justify-content: space-between; gap: .6rem; font-size: .78rem; }
.cl-inf-serpgeo-datos dt { color: #6b7280; font-weight: 600; }
.cl-inf-serpgeo-datos dd { margin: 0; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-serpgeo-marcas li.propia .nom { color: #00504f; font-weight: 800; }
.cl-inf-serpgeo-marcas li.propia i { background: #006363; }
.cl-inf-serpgeo-marcas .nom { display: flex; align-items: center; gap: .5rem; }
.cl-inf-serpgeo-oportunidades { list-style: none; margin: 0; padding: 0; }
@media (max-width: 40rem) { .cl-inf-serpgeo-mejores li { flex-wrap: wrap; } }
@media print { .cl-inf-serpgeo-tabla tr[data-fila] { display: table-row !important; } .cl-inf-serpgeo-tabla { min-width: 0; } .cl-inf-serpgeo-marcas li.propia i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Informes de VISTA: la línea de tiempo con un punto por informe, y los meses sin informe apagados */
.cl-seg button:disabled { opacity: .38; cursor: default; background: none; }
.cl-inf-tiempo .cl-an-cab { flex-wrap: wrap; }
.cl-inf-pista { position: relative; height: 1.9rem; margin: .1rem .7rem 0; }
.cl-inf-pista .raya { position: absolute; left: 0; right: 0; top: 50%; height: .45rem; margin-top: -.225rem; border-radius: 999px; background: #e5e7eb; }
.cl-inf-pista .punto { position: absolute; top: 50%; width: .85rem; height: .85rem; margin: -.425rem 0 0 -.425rem; padding: 0; border-radius: 50%; border: .16rem solid #fff; background: #6fb0ae; box-shadow: 0 0 0 1px #9fc8c6; cursor: pointer; transition: transform .12s; }
.cl-inf-pista .punto.borrador { background: #c9a227; box-shadow: 0 0 0 1px #e3cf7e; }
.cl-inf-pista .punto:hover { transform: scale(1.3); }
.cl-inf-pista .punto:focus-visible { outline: 2px solid #f4a261; outline-offset: 2px; }
.cl-inf-pista .punto.on { z-index: 2; width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem; border: .24rem solid #fff; background: #006363; box-shadow: 0 0 0 2px #006363, 0 1px 4px rgba(0, 60, 59, .35); }
.cl-inf-tiempo .cl-an-marcas { margin: 0 .7rem; }

/* ═══ Submenús de informes · ronda 2 (gana a lo anterior) ═══ */

/* — radar (v2) — */
/* — radar v2 — gráfico interactivo y resumen con la misma altura que el perfil */
.cl-inf-radar-raiz { display: contents; }   /* el estado de Alpine se comparte con la franja de cifras sin añadir una caja al layout */
.cl-inf-radar-kpi { transition: box-shadow .15s, background .15s; }
.cl-inf-radar-kpi.resalte { box-shadow: 0 0 0 2px #006363; background: #e6f2f1; }

.cl-inf-radar-lienzo { position: relative; }
.cl-inf-radar-svg { max-width: 22rem; }
.cl-inf-radar-eje { cursor: pointer; outline: none; }
.cl-inf-radar-eje:focus-visible .zona { stroke: #006363; stroke-width: 2; stroke-dasharray: 3 2; }
.cl-inf-radar-eje .punto { transition: r .12s; }
.cl-inf-radar-ahora { transform-origin: 160px 140px; animation: cl-inf-radar-entra .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cl-inf-radar-entra { from { transform: scale(.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cl-inf-radar-ahora { animation: none; } .cl-inf-radar-eje .punto, .cl-inf-radar-kpi { transition: none; } }

.cl-inf-radar-tip { min-width: 14rem; max-width: 17rem; margin-left: 1rem; }
.cl-inf-radar-tip .mide { margin: .15rem 0 .4rem; color: #d1e3e2; line-height: 1.35; }
.cl-inf-radar-tip b.sube { color: #8fe0c9; }
.cl-inf-radar-tip b.baja { color: #ffb4ae; }
.cl-inf-radar-tip b.igual { color: #d1e3e2; }

.cl-inf-radar-serie { border: 0; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.cl-inf-radar-serie:focus-visible { outline: 2px solid #006363; outline-offset: 2px; }
.cl-inf-radar-serie.off { background: #fff; color: #6b7280; box-shadow: inset 0 0 0 1px #d1d5db; text-decoration: line-through; }

/* Misma altura en la fila (la del perfil, que no depende del texto); el resumen crece al desplegarse y el perfil no se estira. */
.cl-inf-radar-cabeza { align-items: start; }
.cl-inf-radar-cabeza > .cl-card { height: 26rem; overflow: hidden; }
.cl-inf-radar-cabeza > .cl-inf-radar-resumen.abierto { height: auto; overflow: visible; }
.cl-inf-radar-resumen-cuerpo { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cl-inf-radar-resumen-cuerpo.recorte { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.cl-inf-radar-resumen > .cl-inf-radar-mas { margin-top: .6rem; flex: none; }
@media (max-width: 64rem) { .cl-inf-radar-cabeza > .cl-inf-radar-perfil { height: auto; } }
@media print {
    .cl-inf-radar-cabeza > .cl-card { height: auto; overflow: visible; }
    .cl-inf-radar-resumen-cuerpo { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .cl-inf-radar-resumen > .cl-inf-radar-mas, .cl-inf-radar-tip { display: none; }
    .cl-inf-radar-ahora { animation: none; }
}

/* — destino (v2) — */
/* — destino v2: estacionalidad en líneas — */
.cl-inf-destino-lineas { margin-top: .4rem; }
.cl-inf-destino-lineas .cl-lineas-zona:focus-visible { outline: 2px solid #0a7c7c; outline-offset: 3px; border-radius: .4rem; }
/* Punto de cada mes (HTML, no SVG: el lienzo se estira con preserveAspectRatio="none" y deformaría círculos). */
.cl-inf-destino-pt { position: absolute; width: .45rem; height: .45rem; margin: -.225rem 0 0 -.225rem; border-radius: 50%; background: #006363; pointer-events: none; }
.cl-inf-destino-pt.actual { width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; background: #006363; border: .2rem solid #fff; box-shadow: 0 0 0 2px #006363; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cl-inf-destino-lineas .cl-lineas-x span { text-transform: capitalize; }
.cl-inf-destino-lineas .cl-lineas-x span.actual { color: #006363; font-weight: 800; }
.cl-inf-destino-tip { min-width: 15.5rem; }
.cl-inf-destino-tip .fila b.sube { color: #8fe0c8; }
.cl-inf-destino-tip .fila b.baja { color: #ffb4a8; }
.cl-inf-destino-temp { padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; }
.cl-inf-destino-temp.alta { background: #e6f2f1; color: #004a49; }
.cl-inf-destino-temp.media { background: #f6ecc4; color: #5c4a05; }
.cl-inf-destino-temp.baja { background: #e5e7eb; color: #374151; }
.cl-inf-destino-mesinf { color: #f3d97a; font-weight: 800; }
@media (max-width: 640px) {
    .cl-inf-destino-pt { width: .35rem; height: .35rem; margin: -.175rem 0 0 -.175rem; }
    .cl-inf-destino-lineas .cl-lineas-x span { font-size: .6rem; }
}

/* — contexto (v2) — */
/* — contexto v2 — */
/* Marca: jerarquía nombre > cita > filas con rótulo; misma altura que Ejes (la rejilla estira) */
.cl-inf-contexto-marcacard { display: flex; flex-direction: column; gap: 1.1rem; }
.cl-inf-contexto-marcacard .cl-cp-tit { margin-bottom: 0; }
.cl-inf-contexto-marca { margin: 0; font-size: 1.9rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: #0b3d3c; overflow-wrap: anywhere; }
.cl-inf-contexto-cita { margin: 0; padding: .9rem 1.1rem 1rem; border-left: 4px solid #0a7c7c; background: #e6f2f1; border-radius: 0 .5rem .5rem 0; }
.cl-inf-contexto-cita blockquote { margin: .3rem 0 0; max-width: 62ch; font-size: 1.05rem; font-style: italic; line-height: 1.7; color: #0b3d3c; overflow-wrap: anywhere; }
.cl-inf-contexto-etiqueta { margin: 0; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-inf-contexto-fila { display: flex; flex-direction: column; gap: .4rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.cl-inf-contexto-texto { margin: 0; max-width: 62ch; font-size: .92rem; line-height: 1.7; color: #1f2937; overflow-wrap: anywhere; }
.cl-inf-contexto-valores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.cl-inf-contexto-valores li { padding: .25rem .7rem; border-radius: 999px; background: #e6f2f1; color: #0b3d3c; font-size: .82rem; font-weight: 700; }
/* Competidores: tarjetas */
.cl-inf-contexto-comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.cl-inf-contexto-comp-card { display: flex; flex-direction: column; gap: .7rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; }
.cl-inf-contexto-comp-card header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem; padding-bottom: .6rem; border-bottom: 1px solid #e5e7eb; }
.cl-inf-contexto-comp-card h4 { margin: 0; font-size: 1rem; font-weight: 900; color: #0b3d3c; overflow-wrap: anywhere; }
.cl-inf-contexto-niveles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.cl-inf-contexto-niveles li { display: grid; grid-template-columns: 4.6rem 1fr 3rem; align-items: center; gap: .6rem; font-size: .82rem; }
.cl-inf-contexto-niveles .cn { color: #4b5563; }
.cl-inf-contexto-niveles b { text-align: right; font-size: .78rem; color: #0b3d3c; }
.cl-inf-contexto-fd { display: grid; gap: .8rem; padding-top: .7rem; border-top: 1px solid #e5e7eb; }
.cl-inf-contexto-fd > div { display: flex; flex-direction: column; gap: .35rem; }
.cl-inf-contexto-vin { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cl-inf-contexto-vin li { position: relative; padding-left: 1.05rem; font-size: .83rem; line-height: 1.45; color: #1f2937; overflow-wrap: anywhere; }
.cl-inf-contexto-vin li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .5rem; height: .5rem; border-radius: 50%; background: #2f8f83; }
.cl-inf-contexto-vin.aviso li::before { background: #c9a227; }
@media print { .cl-inf-contexto-vin li::before, .cl-inf-contexto-barra i, .cl-inf-contexto-cita { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-inf-contexto-comp-card { break-inside: avoid; } }

/* — personalizado (v2) — */
/* — personalizado (v2) — */
/* Serie en barras: eje Y a la izquierda, zona con guías y barras, eje X debajo. El tooltip es `.cl-lineas-tip` (a la derecha del cursor). */
.cl-inf-personalizado-sub { margin: -.4rem 0 .8rem; font-size: .8rem; font-weight: 600; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-barras { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 13rem auto; column-gap: .6rem; }
.cl-inf-personalizado-ejey { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; margin: -.45rem 0; font-size: .7rem; line-height: .9rem; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-zona { position: relative; cursor: crosshair; }
.cl-inf-personalizado-guia { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #eef0f4; pointer-events: none; }
.cl-inf-personalizado-guia:first-of-type { border-top-color: #e5e7eb; }
.cl-inf-personalizado-cols { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 4px; }
.cl-inf-personalizado-col { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: flex-end; cursor: crosshair; }
.cl-inf-personalizado-col .barra { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #9fc8c6; transition: background .12s; }
.cl-inf-personalizado-col .barra.max { background: #6fb0ae; }
.cl-inf-personalizado-col.on .barra, .cl-inf-personalizado-col:focus-visible .barra { background: #006363; }
.cl-inf-personalizado-col:focus-visible { outline: 2px solid #006363; outline-offset: 1px; }
.cl-inf-personalizado-ejex { grid-column: 2; display: flex; gap: 4px; margin-top: .35rem; font-size: .68rem; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-ejex span { flex: 1 1 0; min-width: 0; position: relative; height: .9rem; }
.cl-inf-personalizado-ejex span:not(:empty) { overflow: visible; }
.cl-inf-personalizado-ejex span { text-align: center; white-space: nowrap; }
.cl-inf-personalizado-sube { color: #8fe3c0; }
.cl-inf-personalizado-baja { color: #ffaaa3; }
.cl-inf-personalizado-barras .cl-lineas-tip { top: .2rem; width: max-content; }
/* El tooltip anula el `.tip` antiguo (ya no se usa) y desaparece al imprimir; las barras se ven todas. */
@media print { .cl-inf-personalizado-barras .cl-lineas-tip { display: none !important; } .cl-inf-personalizado-col .barra { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 640px) { .cl-inf-personalizado-barras { grid-template-rows: 10rem auto; } .cl-inf-personalizado-ejex { font-size: .6rem; } }

/* Hitos: línea de tiempo vertical compacta (media anchura): título y estado en una fila, fecha debajo. */
.cl-inf-personalizado-hitos { gap: .55rem; padding-left: 1rem; }
.cl-inf-personalizado-hitos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tit chip" "fecha fecha"; gap: .05rem .6rem; align-items: center; }
.cl-inf-personalizado-hitos li::before { left: -1rem; top: .4rem; width: .65rem; height: .65rem; margin-left: -.325rem; }
.cl-inf-personalizado-hitos .tit { grid-area: tit; min-width: 0; font-size: .84rem; line-height: 1.25; }
.cl-inf-personalizado-hitos .cl-inf-chip { grid-area: chip; }
.cl-inf-personalizado-hitos .fecha { grid-area: fecha; min-width: 0; font-size: .7rem; font-weight: 600; }

/* Cita: ocupa la altura de la fila junto a los hitos y se centra en ella. */
.cl-inf-personalizado-cita { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* — actualidad (v2) — */
/* — actualidad v2: «Próximos siete días» compacto a la izquierda y «Recomendación» a la derecha, misma altura — */
.cl-inf-actualidad-fila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: stretch; }
.cl-inf-actualidad-fila.una { grid-template-columns: minmax(0, 1fr); }
.cl-inf-actualidad-fila > .cl-card { min-width: 0; }
.cl-inf-actualidad-semana { max-height: 17rem; overflow-y: auto; padding-right: .3rem; }
.cl-inf-actualidad-semana li { grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .4rem 0; font-size: .82rem; }
.cl-inf-actualidad-semana .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-inf-actualidad-reco { display: flex; flex-direction: column; gap: .6rem; }
.cl-inf-actualidad-reco .cl-inf-destacado { margin: 0; font-size: 1rem; line-height: 1.55; }
.cl-inf-actualidad-reco-fuentes { margin-top: auto; padding-top: .7rem; border-top: 1px solid #eef0f4; }
.cl-inf-actualidad-reco-fuentes .rotulo { display: block; margin-bottom: .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.cl-inf-actualidad-reco-fuentes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.cl-inf-actualidad-reco-fuentes li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .84rem; }
@media (max-width: 64rem) {
  .cl-inf-actualidad-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cl-inf-actualidad-semana li { grid-template-columns: 3rem minmax(0, 1fr); }
  .cl-inf-actualidad-semana li .cl-inf-chip { grid-column: 2; justify-self: start; }
  .cl-inf-actualidad-semana .tit { white-space: normal; }
}
@media print {
  .cl-inf-actualidad-semana { max-height: none; overflow: visible; }
  .cl-inf-actualidad-fila > .cl-card { break-inside: avoid; }
}

/* — serp-geo (v2) — */
/* — serp-geo v2 — */
/* Palabras clave: altura de fila fija (una línea por celda) para que el recuadro no cambie de altura entre páginas. */
.cl-inf-serpgeo-fija { table-layout: fixed; min-width: 46rem; }
.cl-inf-serpgeo-fija col.c-nom { width: 27%; }
.cl-inf-serpgeo-fija col.c-num { width: 8%; }
.cl-inf-serpgeo-fija col.c-int { width: 13%; }
.cl-inf-serpgeo-fija col.c-res { width: auto; }
.cl-inf-serpgeo-fija tbody tr { height: 3.4rem; }
.cl-inf-serpgeo-fija tbody td { height: 3.4rem; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-inf-serpgeo-fija td.nom .pal { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-inf-serpgeo-fija td.nom small { display: block; height: 1rem; line-height: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-inf-serpgeo-fija .cl-inf-serpgeo-chips { flex-wrap: nowrap; overflow: hidden; }
.cl-inf-serpgeo-fija .cl-inf-serpgeo-chips .cl-inf-chip { flex: none; white-space: nowrap; }
.cl-inf-serpgeo-fija tr[data-relleno] td { border-bottom-color: transparent; padding: 0; }

/* Marcas / oportunidades: con las columnas lado a lado, manda la altura de «Marcas más citadas». */
.cl-inf-serpgeo-fila.activa > .cl-inf-serpgeo-marcas-card { align-self: start; }
.cl-inf-serpgeo-fila.activa > .cl-inf-serpgeo-opo { display: flex; flex-direction: column; overflow: hidden; align-self: start; }
.cl-inf-serpgeo-fila.activa .cl-inf-serpgeo-oportunidades { flex: 1 1 0; min-height: 0; overflow: hidden; }
.cl-inf-serpgeo-fila.activa .cl-inf-serpgeo-opo > .cl-ga-pag { flex: none; }

@media print {
  .cl-inf-serpgeo-fija tr[data-relleno] { display: none !important; }
  .cl-inf-serpgeo-fija tbody tr, .cl-inf-serpgeo-fija tbody td { height: auto; }
  .cl-inf-serpgeo-fija td { white-space: normal; }
  .cl-inf-serpgeo-fila .cl-inf-serpgeo-opo { height: auto !important; overflow: visible; display: block; }
  .cl-inf-serpgeo-fila .cl-inf-serpgeo-oportunidades { overflow: visible; }
  .cl-inf-serpgeo-fila .cl-inf-serpgeo-oportunidades > li { display: flex !important; }
  .cl-inf-serpgeo-fila .cl-inf-serpgeo-opo > .cl-ga-pag { display: none !important; }
}

/* SERP y GEO · Oportunidades: la celda con posición absoluta no aporta altura a la fila (manda «Marcas más citadas»), así que medir una vez basta */
.cl-inf-serpgeo-celda { min-width: 0; }
@media (min-width: 64.01rem) {
    .cl-inf-serpgeo-celda.con-marcas { position: relative; }
    .cl-inf-serpgeo-celda.con-marcas > .cl-inf-serpgeo-opo { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; height: auto; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-oportunidades { flex: 1 1 0; min-height: 0; overflow: hidden; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-oportunidades > li { flex: none; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-opo > .cl-ga-pag { flex: none; }
}
@media print {
    .cl-inf-serpgeo-celda.con-marcas { position: static; }
    .cl-inf-serpgeo-celda.con-marcas > .cl-inf-serpgeo-opo { position: static; height: auto !important; overflow: visible; display: block; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-oportunidades { overflow: visible; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-oportunidades > li { display: flex !important; }
    .cl-inf-serpgeo-celda.con-marcas .cl-inf-serpgeo-opo > .cl-ga-pag { display: none !important; }
}

/* SERP y GEO · Oportunidades: copia invisible para medir, y paginación que reserva su sitio */
.cl-inf-serpgeo-opo { position: relative; }
.cl-inf-serpgeo-fantasma { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.cl-inf-serpgeo-pag.sin-paginas { visibility: hidden; }
@media (max-width: 64rem) { .cl-inf-serpgeo-fantasma, .cl-inf-serpgeo-pag { display: none; } }
@media print { .cl-inf-serpgeo-fantasma, .cl-inf-serpgeo-pag { display: none !important; } }

/* SERP y GEO: la fila de marcas/oportunidades nunca es tan baja que no quepan dos oportunidades por página */
@media (min-width: 64.01rem) { .cl-inf-serpgeo-marcas-card { min-height: 24rem; } }

/* ═══ Submenús de informes · ronda 3 (gana a lo anterior) ═══ */

/* — radar (v3) — */
/* — radar v3 — al pulsar un eje, el radar se desplaza a la izquierda y se abre su detalle */
.cl-inf-radar-perfil { display: flex; flex-direction: column; }
.cl-inf-radar-cuerpo-perfil { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); gap: 0; transition: grid-template-columns .35s ease, gap .35s ease; }
.cl-inf-radar-cuerpo-perfil.con-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: .8rem; }
.cl-inf-radar-izq { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cl-inf-radar-eje.fijo .zona { stroke: #006363; stroke-width: 1.5; fill: rgba(0, 99, 99, .12); }

.cl-inf-radar-detalle { min-width: 0; overflow: hidden auto; opacity: 0; visibility: hidden; transition: opacity .25s ease .1s, visibility 0s linear .35s; }
.cl-inf-radar-detalle.vis { opacity: 1; visibility: visible; transition: opacity .25s ease .15s; border-left: 1px solid #e5e7eb; padding-left: .8rem; }
.cl-inf-radar-panel { font-size: .8rem; color: #374151; display: flex; flex-direction: column; gap: .35rem; padding-right: .2rem; }
.cl-inf-radar-panel .cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cl-inf-radar-panel h4 { margin: 0; font-size: .95rem; font-weight: 900; color: #0b3d3c; }
.cl-inf-radar-panel .cerrar { margin-left: auto; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: #eef2f7; color: #334155; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cl-inf-radar-panel .cerrar:hover { background: #dbe3ec; }
.cl-inf-radar-panel .cerrar:focus-visible { outline: 2px solid #006363; outline-offset: 2px; }
.cl-inf-radar-panel p { margin: 0; line-height: 1.45; }
.cl-inf-radar-panel .que { color: #6b7280; }
.cl-inf-radar-panel .fila { display: flex; justify-content: space-between; gap: 1rem; }
.cl-inf-radar-panel .fila b { font-variant-numeric: tabular-nums; color: #0b3d3c; }
.cl-inf-radar-panel b.sube { color: #0b6b56; }
.cl-inf-radar-panel b.baja { color: #b3261e; }
.cl-inf-radar-panel h5 { margin: .5rem 0 0; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.cl-inf-radar-panel ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .2rem; line-height: 1.4; }
.cl-inf-radar-panel .evo { margin: .3rem 0 0; }
.cl-inf-radar-panel .evo figcaption { font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.cl-inf-radar-panel .evo svg { display: block; width: 100%; max-width: 15rem; height: auto; }
.cl-inf-radar-enlace { align-self: flex-start; font-weight: 800; color: #00504f; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .cl-inf-radar-cuerpo-perfil, .cl-inf-radar-detalle, .cl-inf-radar-detalle.vis { transition: none; } }

/* Estrecho: el detalle va debajo del radar */
@media (max-width: 64rem) {
    .cl-inf-radar-cuerpo-perfil, .cl-inf-radar-cuerpo-perfil.con-panel { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .cl-inf-radar-detalle { display: none; }
    .cl-inf-radar-detalle.vis { display: block; border-left: 0; padding-left: 0; border-top: 1px solid #e5e7eb; padding-top: .8rem; }
}
@media print {
    .cl-inf-radar-cuerpo-perfil, .cl-inf-radar-cuerpo-perfil.con-panel { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .cl-inf-radar-detalle { display: block; opacity: 1; visibility: visible; overflow: visible; border-left: 0; padding: 0; transition: none; }
}

/* — personalizado (v3) — */
/* — personalizado (v3) — */
/* Serie en línea: las zonas sensibles (botones) ocupan toda la altura; la línea y el área son un SVG estirado; los puntos, spans posicionados en %. */
.cl-inf-personalizado-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cl-inf-personalizado-pt { position: absolute; width: .42rem; height: .42rem; margin: -.21rem 0 0 -.21rem; border-radius: 50%; background: #006363; pointer-events: none; }
.cl-inf-personalizado-lineas .cl-inf-personalizado-cols { gap: 0; }
.cl-inf-personalizado-lineas .cl-inf-personalizado-ejex { gap: 0; }
.cl-inf-personalizado-lineas .cl-inf-personalizado-col:focus-visible { outline: 2px solid #006363; outline-offset: -2px; }
.cl-inf-personalizado-lineas .cl-lineas-punto { z-index: 1; }
.cl-inf-personalizado-lineas .cl-lineas-cursor { z-index: 0; }
@media print { .cl-inf-personalizado-linea { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cl-inf-personalizado-lineas .cl-lineas-cursor, .cl-inf-personalizado-lineas .cl-lineas-punto { display: none !important; } }

/* Origen: rosca a la izquierda, leyenda-tabla a la derecha y, debajo, tres datos destacados. */
.cl-inf-personalizado-origen { display: flex; flex-direction: column; gap: 1.1rem; }
.cl-inf-personalizado-origen .cl-ga-donut { flex-direction: row; align-items: center; gap: 1.6rem; margin-block: 0; }
.cl-inf-personalizado-origen .cl-ga-donut .rosca { width: 9.5rem; height: 9.5rem; }
.cl-inf-personalizado-origen .cl-ga-donut .rosca .centro { inset: 2.3rem; }
.cl-inf-personalizado-origen .cl-ga-donut .cl-ga-tabla { flex: 1 1 0; min-width: 0; align-self: center; }
.cl-inf-personalizado-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.cl-inf-personalizado-datos .dato { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .65rem .8rem; border-radius: .7rem; background: #f6f9f9; border: 1px solid #e5e7eb; }
.cl-inf-personalizado-datos small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.cl-inf-personalizado-datos b { font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-inf-personalizado-datos em { font-style: normal; font-size: .76rem; line-height: 1.3; color: #4b5563; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
    .cl-inf-personalizado-origen .cl-ga-donut { flex-direction: column; }
    .cl-inf-personalizado-origen .cl-ga-donut .cl-ga-tabla { align-self: stretch; }
    .cl-inf-personalizado-datos { grid-template-columns: minmax(0, 1fr); }
}
@media print { .cl-inf-personalizado-datos .dato { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* — actualidad (v3) — */
/* — actualidad v3: cuatro apartados de idéntico tamaño (2×2, columnas 50/50, filas de la misma altura) — */
.cl-inf-actualidad-cuatro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 19rem; gap: 1rem; }
.cl-inf-actualidad-cuad { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.cl-inf-actualidad-cuad > .cl-cp-tit { flex: none; }
/* Impar: el último ocupa su fila entera, sin hueco. */
.cl-inf-actualidad-cuatro > .cl-inf-actualidad-cuad:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Lo que no cabe, scroll dentro de la tarjeta (enfocable con teclado). */
.cl-inf-actualidad-semana, .cl-inf-actualidad-scroll, .cl-inf-actualidad-reco { overflow-y: auto; }
.cl-inf-actualidad-semana, .cl-inf-actualidad-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.cl-inf-actualidad-reco { justify-content: flex-start; }
.cl-inf-actualidad-reco .cl-inf-destacado { flex: none; }
.cl-inf-actualidad-reco-fuentes { margin-top: .4rem; }
@media (max-width: 64rem) {
  .cl-inf-actualidad-cuatro { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .cl-inf-actualidad-cuad { overflow: visible; }
  .cl-inf-actualidad-semana, .cl-inf-actualidad-scroll, .cl-inf-actualidad-reco { overflow: visible; max-height: none; }
}
@media print {
  .cl-inf-actualidad-cuatro { grid-auto-rows: auto; }
  .cl-inf-actualidad-cuad, .cl-inf-actualidad-semana, .cl-inf-actualidad-scroll, .cl-inf-actualidad-reco { overflow: visible; max-height: none; }
  .cl-inf-actualidad-cuad { break-inside: avoid; }
}

/* Radar con el detalle abierto: el pentágono conserva un tamaño legible (las etiquetas no se encogen a nada) */
.cl-inf-radar-cuerpo-perfil.con-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cl-inf-radar-cuerpo-perfil.con-panel .cl-inf-radar-svg { max-width: none; width: 100%; margin: 0; }

/* Contenidos · Rechazados: botón «Motivo» (a la izquierda de copiar) y su ventana pequeña. */
.cl-cn-motivo { display: inline-flex; align-items: center; gap: .3rem; flex: none; height: 1.9rem; padding: 0 .65rem; border: 1px solid #fecaca; background: #fef2f2; border-radius: 999px; color: #b91c1c; font-size: .76rem; font-weight: 800; cursor: pointer; }
.cl-cn-motivo:hover { background: #fee2e2; }
.cl-cn-motivo .cl-i { width: .85rem; height: .85rem; }
.cl-md.cl-md-motivo { max-width: 26rem; }

/* Analíticas · Prensa: trimestres en columnas, categorías en barras y últimas notas. */
.cl-an-prensa-sub { margin: 1.2rem 0 .6rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.cl-an-prensa-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
.cl-an-prensa-trim { display: flex; align-items: flex-end; gap: .9rem; height: 12rem; }
.cl-an-prensa-trim .col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.cl-an-prensa-trim .n { font-size: .8rem; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-an-prensa-trim .barra { flex: 1; width: 100%; display: flex; align-items: flex-end; background: #f2f8f8; border-radius: .4rem; overflow: hidden; }
.cl-an-prensa-trim .barra i { display: block; width: 100%; background: #006363; border-radius: .4rem .4rem 0 0; min-height: 2px; }
.cl-an-prensa-trim .et { font-size: .72rem; font-weight: 700; color: #6b7280; white-space: nowrap; }
.cl-an-prensa-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cl-an-prensa-cats li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: .7rem; font-size: .8rem; }
.cl-an-prensa-cats .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #1f2937; }
.cl-an-prensa-cats .pista { height: .6rem; background: #f2f8f8; border-radius: 999px; overflow: hidden; }
.cl-an-prensa-cats .pista i { display: block; height: 100%; background: #6fb0ae; border-radius: 999px; }
.cl-an-prensa-cats .val { text-align: right; font-variant-numeric: tabular-nums; color: #374151; font-weight: 700; white-space: nowrap; }
.cl-an-prensa-tabla { overflow-x: auto; }
.cl-an-prensa-tabla table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.cl-an-prensa-tabla th { text-align: left; padding: .5rem .6rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; border-bottom: 1px solid #e5e7eb; }
.cl-an-prensa-tabla td { padding: .55rem .6rem; border-bottom: 1px solid #f0f2f4; color: #1f2937; }
.cl-an-prensa-tabla td:last-child, .cl-an-prensa-tabla th:last-child { white-space: nowrap; }
@media (max-width: 64rem) { .cl-an-prensa-dos { grid-template-columns: minmax(0, 1fr); } }

/* KPIs de cada red: tres por fila; una última fila de dos se reparte al 50 % y una de uno ocupa todo el ancho. */
.cl-an-kpis.cl-an-kpis-red { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cl-an-kpis.cl-an-kpis-red .cl-an-kpi { grid-column: span 2; }
.cl-an-kpis.cl-an-kpis-red.ult-2 .cl-an-kpi:nth-last-child(-n + 2) { grid-column: span 3; }
.cl-an-kpis.cl-an-kpis-red.ult-1 .cl-an-kpi:last-child { grid-column: span 6; }
@media (max-width: 40rem) {
    .cl-an-kpis.cl-an-kpis-red { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-an-kpis.cl-an-kpis-red .cl-an-kpi, .cl-an-kpis.cl-an-kpis-red.ult-2 .cl-an-kpi:nth-last-child(-n + 2) { grid-column: auto; }
    .cl-an-kpis.cl-an-kpis-red.ult-1 .cl-an-kpi:last-child { grid-column: 1 / -1; }
}
a.cl-imprimir { text-decoration: none; }

/* Línea de tiempo: los tres meses con más impresiones, resaltados con una marca que pierde fuerza del 1 al 3 (tinte, filo inferior y puesto). */
.cl-cp-meses button.top { position: relative; }
.cl-cp-meses button.top::after { content: attr(data-puesto); position: absolute; top: .12rem; right: .22rem; font-size: .56rem; font-weight: 900; line-height: 1; color: #006363; }
.cl-cp-meses button.top1 { background: rgba(0, 99, 99, .24); box-shadow: inset 0 -3px 0 #006363; font-weight: 900; }
.cl-cp-meses button.top2 { background: rgba(0, 99, 99, .13); box-shadow: inset 0 -2px 0 rgba(0, 99, 99, .55); }
.cl-cp-meses button.top3 { background: rgba(0, 99, 99, .06); box-shadow: inset 0 -1px 0 rgba(0, 99, 99, .3); }
.cl-cp-meses button.top3::after { opacity: .6; }
.cl-cp-meses button.top.on::after { color: #fff; }
.cl-cp-meses button.top.on { background: #0a7c7c; }

/* Analíticas · «Actualizar»: gira mientras se vuelven a pedir los datos. */
.cl-actualizar:disabled { cursor: progress; opacity: .8; }
.cl-actualizar .girando { animation: cl-gira 1s linear infinite; }
@keyframes cl-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-actualizar .girando { animation: none; } }

/* Analíticas: con «Actualizar» e «Imprimir» a la derecha y muchas pestañas, la barra pasa los botones a la línea de debajo (a la derecha) en vez de apretar las pestañas. */
.cl-an-barra { flex-wrap: wrap; row-gap: .5rem; }
.cl-an-barra .cl-an-imprimir { flex: none; }
.cl-an-imprimir .cl-imprimir { white-space: nowrap; }

/* Acceso: «Mantener la sesión iniciada» (el estilo de los campos del acceso no vale para una casilla). */
.cl-acc label.recordar { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 700; color: #374151; cursor: pointer; }
.cl-acc label.recordar input { width: 1.05rem; height: 1.05rem; flex: none; padding: 0; margin: 0; accent-color: #006363; cursor: pointer; }

/* ===== livewire/cliente/eventos.blade.php ===== */
.cl-ev-lista { padding: 0; }
.cl-ev { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid #eef0f3; }
.cl-ev:last-of-type { border-bottom: 0; }
.cl-ev .fecha { flex: none; min-width: 6.5rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; }
.cl-ev .fecha.sin { color: #9ca3af; font-weight: 600; }
.cl-ev .fecha svg { width: .95rem; height: .95rem; }
.cl-ev .tit { flex: 1 1 14rem; min-width: 0; font-size: .95rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
.cl-ev .cat { flex: none; padding: .12rem .6rem; border-radius: 999px; background: #e6f2f1; color: #0b3d3c; font-size: .74rem; font-weight: 800; }
.cl-ev .est { flex: none; padding: .12rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.cl-ev .est.previstos { background: #fef3c7; color: #92400e; }
.cl-ev .est.cubiertos { background: #dcfce7; color: #166534; }

/* Operaciones: el tablero por columnas */
.cl-op { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: .9rem; margin-top: .9rem; overflow-x: auto; align-items: start; padding-bottom: .4rem; }
.cl-op-col { background: #f3f4f6; border-radius: .8rem; border-top: 4px solid var(--c, #475569); min-width: 0; }
.cl-op-col header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .9rem .5rem; }
.cl-op-col h3 { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #374151; }
.cl-op-col header .n { min-width: 1.6rem; text-align: center; padding: .05rem .5rem; border-radius: 999px; background: #fff; font-size: .76rem; font-weight: 800; color: var(--c, #475569); font-variant-numeric: tabular-nums; }
.cl-op-tareas { display: flex; flex-direction: column; gap: .55rem; padding: 0 .6rem .7rem; }
.cl-op-tarea { background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .65rem .75rem; }
.cl-op-tarea .tit { margin: 0; font-size: .88rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
.cl-op-tarea .pie { margin: .45rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.cl-op-tarea .cat { padding: .08rem .55rem; border-radius: 999px; background: #e6f2f1; color: #0b3d3c; font-size: .7rem; font-weight: 800; }
.cl-op-tarea .fecha { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.cl-op-tarea .fecha svg { width: .85rem; height: .85rem; }
.cl-op-col .vacia { margin: 0; padding: .6rem .3rem; text-align: center; font-size: .82rem; color: #9ca3af; }
@media print { .cl-op { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; } }

/* Prensa: lista de notas con la descripción como protagonista */
.cl-pn { background: #fff; border: 1px solid #e5e7eb; border-radius: .8rem; overflow: hidden; }
.cl-pn-fila { display: flex; align-items: flex-start; gap: 1.1rem; padding: .9rem 1.1rem; border-bottom: 1px solid #eef0f3; }
.cl-pn-fila:last-child { border-bottom: 0; }
.cl-pn-fila .fecha { flex: none; width: 5.6rem; font-size: .84rem; font-weight: 800; color: #0b3d3c; font-variant-numeric: tabular-nums; padding-top: .1rem; }
.cl-pn-fila .cuerpo { flex: 1; min-width: 0; }
.cl-pn-fila .tit { margin: 0 0 .25rem; font-size: .78rem; font-weight: 800; color: #6b7280; overflow-wrap: anywhere; }
.cl-pn-fila .desc { margin: 0; font-size: .93rem; line-height: 1.55; color: #1f2937; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-pn-fila .desc.sin { color: #9ca3af; font-style: italic; }
.cl-pn-fila .mas { margin-top: .35rem; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 800; color: #0f766e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cl-pn-fila .cat { flex: none; padding: .1rem .55rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: .7rem; font-weight: 700; }
.cl-pn-fila .lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; max-width: 10rem; }
.cl-pn-fila .acc { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.cl-pn-fila .acc .mas { margin-top: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .85rem; border: 1px solid #b7d9d6; border-radius: 999px; background: #e6f2f1; color: #0b5f59; text-decoration: none; font-size: .78rem; font-weight: 800; transition: background .15s, color .15s; }
.cl-pn-fila .acc .mas:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.cl-pn-fila .acc .mas svg { width: .8rem; height: .8rem; }
.cl-pn-fila .adj { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: #4b5563; cursor: pointer; }
.cl-pn-fila .adj svg { width: .9rem; height: .9rem; }
.cl-pn-fila .est, .cl-est { display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .6rem; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; font-size: .72rem; font-weight: 800; color: #374151; white-space: nowrap; }
.cl-pn-fila .est i, .cl-est i { width: .5rem; height: .5rem; border-radius: 999px; background: var(--c, #475569); flex: none; }
.cl-pn-fila .ac { font-size: .7rem; font-weight: 800; color: #15803d; }
.cl-pn-fila .ac.cer { color: #6b7280; }
.cl-adj { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cl-adj a { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border: 1px solid #e5e7eb; border-radius: .6rem; text-decoration: none; color: #1f2937; background: #fff; }
.cl-adj a:hover { background: #f9fafb; }
.cl-adj img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .4rem; flex: none; }
.cl-adj .nom { flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
.cl-adj .tam { flex: none; font-size: .74rem; color: #6b7280; }
.cl-pn-desc { font-size: 1rem !important; line-height: 1.7 !important; }
@media (max-width: 640px) { .cl-pn-fila { flex-wrap: wrap; gap: .3rem .8rem; } .cl-pn-fila .fecha { width: auto; } .cl-pn-fila .cuerpo { flex-basis: 100%; order: 3; } .cl-pn-fila .lado { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; } }
@media print { .cl-pn-fila .desc { display: block; -webkit-line-clamp: unset; } }

/* Operaciones: lista, abiertas/cerradas y alta de tareas */
.cl-op-nueva { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: .6rem; padding: .5rem .95rem; background: #0f766e; color: #fff; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.cl-op-nueva:hover { background: #0b5f59; }
.cl-op-nueva svg { width: .95rem; height: .95rem; }
.cl-op-ac { flex: none; font-size: .72rem; font-weight: 800; color: #15803d; }
.cl-op-ac.cer { color: #6b7280; }
.cl-op-tarea.cerrada { opacity: .75; }
.cl-op-form { display: grid; gap: .8rem; }
.cl-op-form label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 800; color: #374151; }
.cl-op-form small { font-weight: 600; color: #9ca3af; }
.cl-op-form input, .cl-op-form textarea, .cl-op-form select { width: 100%; border: 1px solid #d1d5db; border-radius: .5rem; padding: .55rem .7rem; font: inherit; font-size: .9rem; font-weight: 500; color: #1f2937; background: #fff; }
.cl-op-form input:focus, .cl-op-form textarea:focus, .cl-op-form select:focus { outline: 2px solid #7fb5b3; border-color: #0f766e; }
.cl-op-form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cl-op-form .err { margin: 0; font-size: .8rem; font-weight: 700; color: #b91c1c; }
@media (max-width: 560px) { .cl-op-form .dos { grid-template-columns: 1fr; } }

/* Eventos: la fila es un botón que abre la ventana del evento */
button.cl-ev { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #eef0f3; font: inherit; color: inherit; cursor: pointer; }
button.cl-ev:hover { background: #f9fafb; }
button.cl-ev:focus-visible { outline: 2px solid #7fb5b3; outline-offset: -2px; }

/* Eventos: leyenda del calendario */
.cl-ev-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .8rem; font-size: .8rem; font-weight: 700; color: #4b5563; }
.cl-ev-leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.cl-ev-leyenda i { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }

/* Móvil: filas, pestañas, filtros, formularios y ventanas del Portal del cliente */
@media (max-width: 40rem) {
    /* Pestañas de sección: se ve que hay más a la derecha y no ocupa sitio el botón de imprimir */
    .cl-nav { padding-right: 2rem; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
    .cl-nav-imprimir { display: none; }

    /* Filas de Eventos, Operaciones y similares: fecha y estatus arriba, título a todo el ancho y la categoría debajo */
    .cl-ev { gap: .35rem .6rem; padding: .8rem 1rem; align-items: center; }
    .cl-ev .fecha { order: 1; min-width: 0; }
    .cl-ev .est, .cl-ev .cl-est { order: 2; margin-left: auto; }
    .cl-ev .cl-op-ac { order: 2; }
    .cl-ev .tit { order: 3; flex: 1 1 100%; }
    .cl-ev .cat { order: 4; }

    /* Zonas táctiles: botones de filtro y de vista más altos */
    .cl-ct-estados button { min-height: 2.6rem; }
    .cl-op-nueva { min-height: 2.6rem; padding-left: 1rem; padding-right: 1rem; }
    .cl-cal-btn { min-width: 2.6rem; min-height: 2.6rem; }

    /* Los campos a 16 px: con menos, iOS hace zoom al tocarlos y descuadra la página */
    .cl-op-form input, .cl-op-form textarea, .cl-op-form select, .cl-ct-filtros input { font-size: 1rem; }

    /* Barra de filtros y vistas: cada grupo en su línea si no cabe, y el botón de añadir a todo el ancho */
    .cl-ct-barra > * { min-width: 0; max-width: 100%; }
    .cl-op-nueva { flex: 1 1 100%; justify-content: center; }

    /* Calendario del mes: cada evento es una barra de color; el título se recorta y no se enseña la categoría */
    .cl-vc-mes .dia { padding: .25rem .2rem; }
    .cl-vc-chip { padding: .12rem .25rem; font-size: .62rem; border-left-width: 2px; }
    .cl-vc-chip .s { display: none; }
    .cl-vc-chip .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* Prensa: la descripción ocupa todo el ancho y el pie de la nota se reparte */
    .cl-pn-fila { padding: .85rem 1rem; }
    .cl-pn-fila .desc { font-size: .95rem; }

    /* Tablero de Operaciones: una columna casi a ancho completo con la siguiente asomando */
    .cl-op { grid-auto-columns: 82%; scroll-snap-type: x proximity; }
    .cl-op-col { scroll-snap-align: start; }
}

/* Calendarios en móvil: puntos de color por día + agenda del mes (en escritorio no se ven) */
.cl-vc-dots, .cl-vc-agenda { display: none; }
@media (max-width: 40rem) {
    .cl-vc-mes .dia { min-height: 3.2rem; padding: .3rem .1rem; text-align: center; }
    .cl-vc-mes .dia .n { display: block; }
    .cl-vc-mes .dia.hoy .n { margin: 0 auto; }
    .cl-vc-mes .dia.con { cursor: pointer; }
    .cl-vc-mes .dia.con:active { background: #e6f2f1; }
    .cl-vc-mes .cl-vc-chip { display: none; }
    .cl-vc-dots { display: flex; justify-content: center; align-items: center; gap: .2rem; margin-top: .3rem; }
    .cl-vc-dots i { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
    .cl-vc-dots b { font-size: .6rem; font-weight: 800; color: #6b7280; line-height: 1; }

    .cl-vc-agenda { display: block; margin-top: 1rem; }
    .cl-vc-agenda h3 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
    .cl-vc-agenda .grupo { scroll-margin-top: 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .8rem; padding: .7rem .8rem; margin-bottom: .6rem; }
    .cl-vc-agenda .grupo h4 { margin: 0 0 .4rem; font-size: .82rem; font-weight: 800; color: #0b3d3c; }
    .cl-vc-agenda .item { display: grid; grid-template-columns: .45rem minmax(0, 1fr); column-gap: .6rem; align-items: stretch; width: 100%; padding: .5rem 0; border: 0; border-top: 1px solid #f0f2f4; background: none; font: inherit; text-align: left; cursor: pointer; }
    .cl-vc-agenda .item:first-of-type { border-top: 0; }
    .cl-vc-agenda .item i { grid-row: 1 / span 2; border-radius: 3px; background: var(--c, #475569); }
    .cl-vc-agenda .item .t { font-size: .9rem; font-weight: 700; color: #1f2937; overflow-wrap: anywhere; }
    .cl-vc-agenda .item .s { font-size: .76rem; color: #6b7280; }
}

/* Filtros: en escritorio, fila de categorías y vista a la derecha; en móvil, estado en segmentos, vista con iconos y categoría en un desplegable */
.cl-ct-der { margin-left: auto; }
.cl-ct-barra .cl-an-imprimir { margin: 0 0 0 auto; }
.cl-cat-sel { display: none; }
@media (max-width: 40rem) {
    .solo-escritorio { display: none !important; }
    .cl-ct-barra > .seg { display: flex; flex: 1 1 100%; width: 100%; overflow: visible; }
    .cl-ct-barra > .seg button { flex: 1 1 0; justify-content: center; gap: .3rem; padding: .5rem .25rem; font-size: .8rem; }
    .cl-ct-barra > .seg button .p { display: none; }
    .cl-ct-barra > .vista { margin-left: 0; flex: none; }
    .cl-ct-barra > .vista .txt { display: none; }
    .cl-ct-barra > .vista button { padding: .5rem .8rem; }
    .cl-cat-sel { display: block; flex: 1 1 0; min-width: 0; }
    .cl-cat-sel select { width: 100%; min-height: 2.6rem; border: 1px solid #e5e7eb; border-radius: .6rem; padding: 0 2rem 0 .8rem; background: #fff; font: inherit; font-size: 1rem; font-weight: 700; color: #0b3d3c; }
    .cl-ct-barra > .cl-op-nueva { flex: 1 1 0; }
    .cl-ct-barra:has(.cl-op-nueva) .cl-cat-sel { flex-basis: 100%; }
}

/* Calendario en móvil: la leyenda de tipos es una sola fila que se desliza, en vez de ocupar cinco líneas */
@media (max-width: 40rem) {
    .cl-vc .cl-leyenda { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .2rem; }
    .cl-vc .cl-leyenda::-webkit-scrollbar { display: none; }
    .cl-vc .cl-leyenda button { flex: none; min-height: 2.4rem; }
}

/* Analíticas en móvil: los meses de la línea de tiempo en una cuadrícula de 4 columnas con botones grandes, asas más fáciles de coger y fechas a ancho completo */
@media (max-width: 40rem) {
    .cl-an-tiempo .cl-cp-meses, .cl-cp-fila > .cl-an-tiempo .cl-cp-meses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding: .35rem; overflow: visible; }
    .cl-cp-fila .cl-an-tiempo .cl-cp-meses button, .cl-cp-fila > .cl-an-tiempo .cl-cp-meses button, .cl-an .cl-an-tiempo .cl-cp-meses button { min-width: 0; min-height: 2.75rem; padding: .4rem .2rem; justify-content: center; font-size: .92rem; }

    .cl-an-pista { height: 2.8rem; }
    .cl-an-pista input[type=range] { height: 2.8rem; }
    .cl-an-pista input[type=range]::-webkit-slider-runnable-track { height: 2.8rem; }
    .cl-an-pista input[type=range]::-moz-range-track { height: 2.8rem; }
    .cl-an-pista input[type=range]::-webkit-slider-thumb { width: 1.8rem; height: 1.8rem; margin-top: .5rem; }
    .cl-an-pista input[type=range]::-moz-range-thumb { width: 1.2rem; height: 1.2rem; }

    .cl-an-fechas { gap: .5rem; }
    .cl-an-fechas label { flex: 1 1 8rem; flex-direction: column; align-items: stretch; gap: .25rem; }
    .cl-an-fechas input[type=date], .cl-cp-fila > .cl-an-tiempo .cl-an-fechas input[type=date] { width: 100%; box-sizing: border-box; min-height: 2.6rem; padding: .4rem .6rem; font-size: 1rem; }
    .cl-an-fechas .en-vivo { text-align: center; padding-top: .2rem; }

    /* Línea de tiempo de los informes: cada punto con una zona táctil mayor */
    .cl-inf-pista { height: 2.4rem; }
    .cl-inf-pista .punto::after { content: ''; position: absolute; inset: -.7rem; }
}

/* Visor genérico de informes: lo importante se ve primero y, en móvil, las tablas son tarjetas */
.cl-inf-ficha > .rs-destacado dd { font-size: 1.05rem; font-weight: 800; line-height: 1.4; color: #0b3d3c; }
.cl-inf-ficha > .rs-accion { padding: .65rem .8rem; border-radius: .7rem; background: #fffbeb; border: 1px solid #fde68a; }
.cl-inf-ficha > .rs-accion dt { color: #92400e; }
.cl-inf-ficha > .rs-accion dd { color: #78350f; font-weight: 700; }
.cl-inf-tabla td { vertical-align: top; }
@media (max-width: 40rem) {
    .cl-inf-ficha { grid-template-columns: minmax(0, 1fr); }
    .cl-ga-tabla-ancha { overflow: visible; }
    .cl-inf-tabla, .cl-inf-tabla tbody, .cl-inf-tabla tr, .cl-inf-tabla td { display: block; width: 100%; box-sizing: border-box; }
    .cl-inf-tabla thead { display: none; }
    .cl-inf-tabla tr { margin: 0 0 .6rem; padding: .7rem .85rem; border-radius: .8rem; background: #f6f9f9; border: 0; }
    .cl-inf-tabla td { padding: .3rem 0; border: 0; min-width: 0; overflow-wrap: anywhere; white-space: normal; font-size: .88rem; line-height: 1.45; color: #1f2937; }
    .cl-inf-tabla td::before { content: attr(data-label); display: block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
    /* La primera celda (la red, la señal, la pieza…) es el título de la tarjeta */
    .cl-inf-tabla td:first-child { padding-top: 0; font-size: .98rem; font-weight: 800; color: #0b3d3c; }
    .cl-inf-tabla td:first-child::before { display: none; }
    .cl-inf-subbloque { padding: .6rem .75rem; }
}
.cl-inf-ficha dd > .cl-inf-ficha { margin-top: .4rem; padding-left: .7rem; border-left: 2px solid #d5e5e4; }

/* Calendario con muchos tipos: desplegable de filtros con lista marcable */
.cl-filtro { position: relative; margin-top: .8rem; }
.cl-filtro-barra { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.cl-filtro-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.3rem; padding: 0 .85rem; border: 1px solid #e5e7eb; border-radius: .6rem; background: #fff; color: #0b3d3c; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.cl-filtro-btn:hover, .cl-filtro-btn[aria-expanded="true"] { border-color: #7fb5b3; background: #e6f2f1; }
.cl-filtro-btn .n { padding: .08rem .55rem; border-radius: 999px; background: #0f766e; color: #fff; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-filtro-btn .flecha { transition: transform .15s; }
.cl-filtro-btn[aria-expanded="true"] .flecha { transform: rotate(90deg); }
.cl-filtro-reset { border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 800; color: #0f766e; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cl-filtro-panel { position: absolute; z-index: 30; left: 0; top: calc(100% + .4rem); width: min(44rem, 100%); max-height: 24rem; overflow-y: auto; padding: .8rem; background: #fff; border-radius: .9rem; box-shadow: 0 12px 32px -8px rgba(0, 60, 59, .35); outline: 1px solid rgba(3, 7, 18, .08); }
.cl-filtro-panel .acc { display: flex; gap: 1rem; margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid #eef0f3; }
.cl-filtro-panel .acc button { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; font-weight: 800; color: #0f766e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cl-filtro-panel .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .15rem .5rem; }
.cl-filtro-panel .op { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: .6rem; background: none; font: inherit; font-size: .84rem; font-weight: 700; color: #374151; text-align: left; cursor: pointer; }
.cl-filtro-panel .op:hover { background: #f3f6f6; }
.cl-filtro-panel .op .caja { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: .3rem; border: 2px solid var(--c); background: #fff; color: #fff; }
.cl-filtro-panel .op .caja svg { width: .7rem; height: .7rem; opacity: 0; }
.cl-filtro-panel .op.on .caja { background: var(--c); }
.cl-filtro-panel .op.on .caja svg { opacity: 1; }
.cl-filtro-panel .op:not(.on) .nom { color: #9ca3af; }
.cl-filtro-panel .op .nom { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.cl-filtro-panel .op b { flex: none; font-size: .72rem; font-weight: 800; color: #6b7280; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
    .cl-filtro-btn { min-height: 2.6rem; flex: 1 1 auto; justify-content: space-between; }
    .cl-filtro-panel { position: static; width: 100%; max-height: 60vh; margin-top: .5rem; box-shadow: none; outline: 1px solid #e5e7eb; }
    .cl-filtro-panel .op { min-height: 2.6rem; }
}

/* ─── Coordinación → Reuniones (menú propio a la izquierda; lista por días + ficha) ─── */
.cl-co { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.cl-co-menu { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: .6rem; }
.cl-co-menu .tit { padding: .35rem .6rem .5rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.cl-co-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: none; border-radius: .55rem; padding: .55rem .7rem; font: inherit; font-size: .9rem; font-weight: 700; color: #374151; text-align: left; cursor: pointer; }
.cl-co-menu button:hover { background: #f3f4f6; }
.cl-co-menu button.on { background: #e6f2f2; color: #006363; }
.cl-co-cuerpo { min-width: 0; }
.cl-co-reuniones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; margin-top: 1rem; align-items: start; transition: opacity .15s; }
.cl-co-lista { display: flex; flex-direction: column; gap: 1.1rem; }
.cl-co-dia { margin: 0; font-size: 1.02rem; font-weight: 800; color: #0a1414; }
.cl-co-dia span { margin-left: .35rem; font-size: .84rem; font-weight: 500; color: #6b7280; }
.cl-co-fila { display: flex; align-items: center; gap: .9rem; width: 100%; border: 0; border-bottom: 1px solid #eef0f3; background: #fff; padding: .85rem 1.1rem; font: inherit; text-align: left; cursor: pointer; }
.cl-co-fila:last-child { border-bottom: 0; }
.cl-co-fila:hover, .cl-co-fila.on { background: #f4f8f8; }
.cl-co-fila.on { box-shadow: inset 3px 0 0 #006363; }
.cl-co-fila .hora { flex: none; width: 3rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: #0a1414; }
.cl-co-fila .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.cl-co-fila .tit { font-weight: 800; color: #0a1414; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-co-fila .meta { display: flex; flex-wrap: wrap; gap: .15rem .4rem; font-size: .82rem; color: #6b7280; }
.cl-co-fila .meta span { display: inline-flex; align-items: center; gap: .25rem; }
.cl-co-fila .meta .cl-i, .cl-co-ficha .datos .cl-i, .cl-co-chip .cl-i, .cl-co-items .cl-i { width: .95rem; height: .95rem; }
.cl-co-fila .gente { display: flex; align-items: center; gap: .2rem; margin-top: .2rem; }
.cl-co-fila .gente i, .cl-co-gente i { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #e6f2f2; color: #006363; font-size: .62rem; font-style: normal; font-weight: 800; }
.cl-co-fila .gente em { font-size: .75rem; font-style: normal; color: #6b7280; }
.cl-co-tipo { flex: none; display: inline-flex; align-items: center; border-radius: 999px; padding: .15rem .6rem; font-size: .74rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.cl-co-chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .15rem .6rem; font-size: .74rem; font-weight: 700; color: #374151; background: #f3f4f6; }
/* Fija al bajar, con todo el alto de la pantalla y scroll propio: el acta tiene sitio y se lee sin llegar al final de la lista. */
.cl-co-ficha { position: sticky; top: 1rem; height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; padding: 1.3rem 1.4rem; }
.cl-co-ficha .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cl-co-ficha h2 { margin: .7rem 0 .4rem; font-size: 1.4rem; font-weight: 800; line-height: 1.25; color: #0a1414; }
.cl-co-ficha h3 { margin: 1.2rem 0 .6rem; font-size: .92rem; font-weight: 800; color: #0a1414; }
.cl-co-ficha .datos { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .86rem; color: #6b7280; }
.cl-co-ficha .datos span { display: inline-flex; align-items: center; gap: .35rem; }
.cl-co-ficha .vacio { margin: .4rem 0; font-size: .86rem; color: #6b7280; }
.cl-co-gente { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cl-co-gente li { display: flex; align-items: center; gap: .55rem; border: 1px solid #eef0f3; border-radius: .6rem; padding: .45rem .6rem; }
.cl-co-gente i { width: 2rem; height: 2rem; font-size: .72rem; flex: none; }
.cl-co-gente span { display: flex; flex-direction: column; min-width: 0; font-size: .86rem; }
.cl-co-gente b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-co-gente small { color: #6b7280; }
.cl-co-tabs { display: flex; flex-wrap: wrap; gap: .2rem; margin: 1.3rem 0 .9rem; border-bottom: 1px solid #e5e7eb; }
.cl-co-tabs button { margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; padding: .5rem .7rem; font: inherit; font-size: .86rem; font-weight: 700; color: #6b7280; cursor: pointer; }
.cl-co-tabs button.on { border-bottom-color: #006363; color: #006363; }
.cl-co-acta { font-size: .9rem; line-height: 1.55; color: #1f2937; overflow-wrap: anywhere; }
.cl-co-acta h1, .cl-co-acta h2, .cl-co-acta h3, .cl-co-acta h4 { margin: 1rem 0 .4rem; font-size: .95rem; font-weight: 800; }
.cl-co-acta p { margin: 0 0 .6rem; }
.cl-co-acta ul, .cl-co-acta ol { margin: 0 0 .6rem; padding-left: 1.3rem; }
.cl-co-acta blockquote { margin: 0 0 .6rem; padding-left: .8rem; border-left: 3px solid #e5e7eb; color: #4b5563; }
.cl-co-acta a { color: #006363; }
.cl-co-items { margin: 0; padding: 0; list-style: none; }
.cl-co-items li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #eef0f3; font-size: .88rem; }
.cl-co-items li:last-child { border-bottom: 0; }
.cl-co-items .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #1f2937; }
.cl-co-items a.txt { color: #006363; text-decoration: none; }
.cl-co-items a.txt:hover { text-decoration: underline; }
.cl-co-items small { color: #6b7280; }
.cl-co-items .num { text-align: right; font-variant-numeric: tabular-nums; }
.cl-co-comentarios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.cl-co-comentarios li { border-bottom: 1px solid #eef0f3; padding-bottom: .8rem; }
.cl-co-comentarios li:last-child { border-bottom: 0; }
.cl-co-comentarios .quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .3rem; font-size: .86rem; }
.cl-co-comentarios .quien small { color: #6b7280; }
.cl-co-items .caja { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border: 1px solid #d1d5db; border-radius: .3rem; }
.cl-co-items li.hecha .caja { background: #006363; border-color: #006363; color: #fff; }
.cl-co-items li.hecha .txt { color: #6b7280; text-decoration: line-through; }
@media (max-width: 64rem) {
    .cl-co-reuniones { grid-template-columns: minmax(0, 1fr); }
    .cl-co-ficha { position: static; height: auto; overflow: visible; }
}
@media (max-width: 48rem) {
    .cl-co { grid-template-columns: minmax(0, 1fr); }
    .cl-co-menu { position: static; flex-direction: row; overflow-x: auto; }
    .cl-co-menu .tit { display: none; }
    .cl-co-menu button { width: auto; white-space: nowrap; }
}
@media print {
    .cl-co { display: block; }
    .cl-co-ficha { position: static; height: auto; overflow: visible; margin-top: 1rem; }
}

/* ─── Cuenta (cambiar contraseña) e «Invitar al portal» ─── */
.cl-cuenta { display: flex; align-items: center; }
.cl-quien-btn { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; padding: .35rem .5rem; border-radius: .5rem; font: inherit; color: rgba(255, 255, 255, .85); cursor: pointer; }
.cl-quien-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cl-quien-btn:hover .cl-quien { color: #fff; }
.cl-quien-btn .cl-i { width: .95rem; height: .95rem; }
.cl-tit-fila { display: flex; align-items: center; gap: .75rem; }
.cl-tit-fila > .cl-ts, .cl-tit-fila > .cl-tit { flex: 1; min-width: 0; }
.cl-invitar { flex: none; margin-left: auto; }
.cl-invitar-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #006363; cursor: pointer; }
.cl-invitar-btn:hover { border-color: #006363; background: #e6f2f2; }
.cl-invitar-btn .cl-i { width: 1.1rem; height: 1.1rem; }
.cl-md-estrecho { max-width: 30rem; }
.cl-cuenta-quien { margin: 0; font-size: .84rem; line-height: 1.45; color: #6b7280; }
.cl-op-form .req { color: #dc2626; }
.cl-op-form em.err { display: block; font-style: normal; }
.cl-ct-aviso.aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cl-md .cl-ct-aviso { margin-top: 0; }