/* ============================================================================
   Rollplanner — Invita y Ayuda (collab.css)
   ----------------------------------------------------------------------------
   Casa (26-09-2026): sin bordes, sin filetes, sin hairlines. Las superficies
   son islas (luz del tema por la esquina superior izquierda, rejilla de 26 px,
   corte diagonal abajo a la derecha); las pestañas van sobre un rail con
   indicador que se dibuja; los campos son una línea que se enciende al
   enfocar; los estados (invitaciones, envíos) son puntos encendidos; el
   badge de embajador es un chip con hexágono; el selector de plataforma es un
   segmento. Requiere tokens.css y components.css cargados antes.
   ========================================================================== */
    .col-page {
        position: relative;
        overflow-x: clip;
        max-width: 880px;
        margin: 0 auto;
        padding: 40px 24px 80px;
        font-family: var(--rp-font);
    }
    .col-page::before {
        content: 'ROLLPLANNER';
        position: absolute;
        top: -4px; right: -120px; left: auto;
        z-index: 0;
        font-family: var(--rp-font);
        font-size: clamp(48px, 8vw, 86px);
        font-weight: 900; font-style: italic;
        line-height: 0.8; letter-spacing: -3px;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255,255,255,0.038);
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
    }
    .col-page > * { position: relative; z-index: 1; }

    .col-header-bar {
        display: flex; align-items: center; gap: 14px;
        flex-wrap: wrap; row-gap: 8px;
    }
    .col-page-title {
        margin: 0;
        font-family: var(--rp-font);
        font-size: clamp(30px, 4.4vw, 42px);
        font-weight: 900; font-style: italic;
        text-transform: uppercase;
        letter-spacing: var(--rp-ls-display);
        line-height: 1;
        color: var(--rp-text);
    }
    .col-slash {
        width: 1px; height: 22px; flex: 0 0 auto;
        background: rgba(255,255,255,0.2);
        transform: skewX(-18deg);
    }
    /* Eyebrow de la casa: punto encendido + mayúsculas 10/800/3 */
    .col-tag {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow);
        text-transform: uppercase;
        color: var(--theme-color, #b33131);
    }
    .col-tag::before { content: none; display: none; }
    .col-accent-line {
        width: 48px; height: 3px;
        margin: 16px 0 0;
        background: var(--theme-color, #b33131);
        box-shadow: 0 0 12px color-mix(in srgb, var(--theme-color, #b33131) 50%, transparent);
    }
    .col-lede {
        margin: 18px 0 0;
        font-size: 14px; font-weight: 300; line-height: 1.7;
        color: var(--rp-text-3);
        max-width: 60ch;
    }
    .col-lede b {
        font-weight: 700; font-style: italic;
        color: var(--rp-text);
    }

    /* ── Rail de pestañas (receta .rp-tabs) ── */
    .col-tabs {
        position: relative;
        display: flex;
        gap: 24px;
        margin: 40px 0 0;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        isolation: isolate;
    }
    .col-tabs::-webkit-scrollbar { display: none; }
    .col-tabs::after {
        content: '';
        position: absolute; left: 0; right: 0; bottom: 0;
        height: 1px;
        background: rgba(255,255,255,0.07);
        z-index: -1;
        pointer-events: none;
    }
    .col-tab {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex; align-items: baseline; gap: 8px;
        padding: 9px 0 12px;
        background: none; border: none;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        text-transform: uppercase; letter-spacing: var(--rp-ls-eyebrow);
        color: var(--rp-text-3);
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease;
    }
    .col-tab:hover { color: var(--rp-text-2); }
    .col-tab:focus-visible { outline: none; color: var(--rp-text); }
    .col-tab-num {
        font-size: 10px; font-weight: 800; font-style: italic;
        letter-spacing: 0;
        color: rgba(255,255,255,0.26);
        transition: color 0.2s ease;
    }
    .col-tab--on { color: var(--rp-text); }
    .col-tab--on::after {
        content: '';
        position: absolute; left: 0; right: 0; bottom: 0;
        height: 2px;
        background: var(--theme-color, #b33131);
        box-shadow: 0 0 10px var(--theme-color, #b33131);
        transform-origin: left;
        animation: colTabIn 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }
    @keyframes colTabIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .col-tab--on .col-tab-num { color: var(--theme-color, #b33131); }

    /* ── Panel = isla (receta .rp-isle) ── */
    .col-panel {
        --isle-c: var(--theme-color, #b33131);
        position: relative;
        overflow: hidden;
        padding: 34px 30px 38px;
        border: none;
        border-radius: 0;
        clip-path: var(--rp-cut, polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%));
        background:
            radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px,
            radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in srgb, var(--isle-c) 22%, transparent) 0%, transparent 70%),
            rgba(255,255,255,0.035);
        animation: colPaneIn 0.3s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }
    .col-panel[hidden] { display: none; }
    .col-panel > * { position: relative; z-index: 1; }
    @keyframes colPaneIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }

    .col-panel-title {
        margin: 0 0 12px;
        font-size: clamp(20px, 2.6vw, 26px);
        font-weight: 900; font-style: italic;
        text-transform: uppercase;
        letter-spacing: var(--rp-ls-title);
        line-height: 1.12;
        color: var(--rp-text);
    }
    .col-panel-desc {
        margin: 0 0 28px;
        font-size: 13px; font-weight: 300; line-height: 1.7;
        color: var(--rp-text-3);
        max-width: 62ch;
    }
    .col-panel-desc b {
        font-weight: 700; font-style: italic;
        color: color-mix(in srgb, var(--theme-color, #b33131) 45%, #fff);
    }

    /* ── Campos en línea (receta .rp-field--line sobre .stg-*) ── */
    .col-form .stg-row { padding: 10px 0; }
    .col-form .stg-row + .stg-row { border-top: none; }
    .col-field { display: block; padding: 10px 0; }
    .col-field + .col-field { border-top: none; }
    .col-field .stg-lbl {
        margin-bottom: 2px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase;
        color: var(--rp-text-3);
    }
    .col-page .stg-input,
    .col-page .stg-input:hover,
    .col-page .stg-input:focus {
        height: auto;
        padding: 6px 0 8px;
        border: none; border-radius: 0;
        box-shadow: none; outline: none;
        color: var(--rp-text);
        font-size: 14px;
        background:
            linear-gradient(var(--theme-color, #b33131), var(--theme-color, #b33131)) left bottom / 0% 1px no-repeat,
            linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)) left bottom / 100% 1px no-repeat;
        transition: background-size 0.3s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }
    .col-page .stg-input:focus { background-size: 100% 1px, 100% 1px; }
    .col-page .stg-input::placeholder { color: var(--rp-text-3); font-style: italic; font-weight: 300; }
    .col-page textarea.stg-input {
        min-height: 118px;
        line-height: 1.6;
        resize: vertical;
    }
    .col-page input.stg-input[type="datetime-local"] {
        color-scheme: dark;
        max-width: 260px;
    }
    .col-actions {
        display: flex; align-items: center; justify-content: flex-end;
        gap: 16px; flex-wrap: wrap;
        padding-top: 18px; margin-top: 6px;
    }
    .col-limit {
        flex: 1 1 auto; min-width: 0;
        font-size: 11px; font-weight: 500; line-height: 1.4;
        color: rgba(255,255,255,0.35);
    }

    .col-thanks {
        animation: colPop 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }
    @keyframes colPop {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }
    .col-thanks-hd {
        font-size: 24px; font-weight: 900; font-style: italic;
        text-transform: uppercase; letter-spacing: var(--rp-ls-title);
        color: color-mix(in srgb, var(--theme-color, #b33131) 75%, #fff);
        margin-bottom: 16px;
    }
    .col-thanks p {
        margin: 0 0 14px;
        font-size: 13px; font-weight: 300; line-height: 1.75;
        color: var(--rp-text-3);
        max-width: 62ch;
    }
    .col-thanks-foot {
        display: flex; align-items: center; gap: 13px;
        margin-top: 20px;
    }
    .col-thanks-end {
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label); font-weight: 600; font-style: normal;
        text-transform: uppercase; letter-spacing: var(--rp-ls-eyebrow);
        color: var(--rp-text);
    }

    .col-invite-row {
        display: flex; align-items: flex-end; gap: 14px;
        padding: 0 0 16px;
    }
    .col-invite-row .col-field { flex: 1 1 auto; min-width: 0; padding: 0; }

    .col-privacy {
        margin: 0 0 26px;
        font-size: 10.5px; line-height: 1.5;
        color: rgba(255,255,255,0.3);
    }

    /* Enlace de referido: isla pequeña con corte de 9 px, sin líneas */
    .col-link-row {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 14px;
        background: rgba(255,255,255,0.04);
        clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
    }
    .col-link {
        flex: 1 1 auto; min-width: 0;
        font-family: var(--rp-font);
        font-size: 12.5px; font-weight: 500;
        color: var(--rp-text-2);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .col-glyph {
        flex: 0 0 auto;
        background: none; border: none; padding: 4px;
        color: var(--rp-text); opacity: 0.6; cursor: pointer;
        line-height: 0;
        transition: opacity 0.2s ease, transform 0.15s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .col-glyph:hover { opacity: 1; color: var(--theme-color, #b33131); }
    .col-glyph:active { transform: scale(0.9); }
    .col-glyph svg { width: 17px; height: 17px; display: block; }
    .col-glyph--wa { display: none; }
    body.col-touch .col-glyph--wa { display: block; }

    .col-progress-wrap { padding: 22px 0 6px; }
    .col-progress-top {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 12px; margin-bottom: 9px;
    }
    .col-progress-label {
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase;
        color: var(--rp-text-3);
    }
    .col-progress-count {
        font-size: 15px; font-weight: 900; font-style: italic;
        color: var(--rp-text);
        font-variant-numeric: tabular-nums;
    }
    .col-progress {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }
    .col-progress-block {
        height: 8px;
        background: rgba(255,255,255,0.07);
        transition: background 0.35s ease, box-shadow 0.35s ease;
    }
    .col-progress-block--on {
        background: var(--theme-color, #b33131);
        box-shadow: 0 0 10px color-mix(in srgb, var(--theme-color, #b33131) 55%, transparent);
    }
    .col-progress-block:last-child {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
    }

    /* Invitaciones: filas sin línea, estado como punto encendido */
    .col-invites { margin-top: 22px; }
    .col-invite {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; padding: 11px 0;
        animation: colPop 0.4s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }
    .col-invite:nth-child(2) { animation-delay: 70ms; }
    .col-invite:nth-child(3) { animation-delay: 140ms; }
    .col-invite:nth-child(4) { animation-delay: 210ms; }
    .col-invite:nth-child(5) { animation-delay: 280ms; }
    .col-invite:nth-child(n+6) { animation-delay: 350ms; }
    .col-invite-mail {
        min-width: 0; flex: 1 1 auto;
        font-size: 12.5px; font-weight: 500;
        color: var(--rp-text-2);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .col-invite-state {
        --dot-c: rgba(255,255,255,0.22);
        flex: 0 0 auto;
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase;
        color: var(--rp-text-3);
    }
    .col-invite-state::before {
        content: '';
        width: 7px; height: 8px; flex: none;
        background: var(--dot-c); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-invite-state svg { display: none; }
    .col-invite-state--sent { --dot-c: rgba(255,255,255,0.22); color: var(--rp-text-3); }
    .col-invite-state--signed { --dot-c: rgba(255,255,255,0.55); color: var(--rp-text-2); }
    .col-invite-state--converted { --dot-c: var(--rp-success, #22c55e); color: var(--rp-success, #22c55e); }
    .col-invite-state--counted { --dot-c: var(--rp-success, #22c55e); color: var(--rp-text-3); }
    .col-empty {
        padding: 14px 0;
        font-size: 12px; color: rgba(255,255,255,0.3);
    }

    /* Plataforma: segmento (receta .rp-seg) */
    .col-amb-opts {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 4px;
        padding: 2px;
        background: rgba(255,255,255,0.05);
        border-radius: var(--rp-radius-sm, 6px);
    }
    .col-amb-opt {
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm);
        font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow);
        text-transform: uppercase;
        padding: 6px 12px;
        border: none;
        border-radius: var(--rp-radius-sm, 6px);
        background: none;
        color: var(--rp-text-3);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.25s ease, background 0.25s ease;
    }
    .col-amb-opt:hover { color: var(--rp-text); }
    .col-amb-opt--on {
        color: #000;
        background: #fff;
    }
    .col-page input.stg-input[type="number"] { max-width: 200px; }
    .col-deal {
        margin: 6px 0 10px;
        padding: 18px 20px;
        background: rgba(0,0,0,0.22);
        clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
    }
    .col-deal-hd {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm);
        font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow);
        text-transform: uppercase;
        color: color-mix(in srgb, var(--theme-color, #b33131) 70%, #fff);
        margin-bottom: 12px;
    }
    .col-deal-hd::before {
        content: '';
        width: 8px; height: 9px; flex: none;
        background: var(--theme-color, #b33131); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-deal ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: var(--rp-fs-sm);
        font-weight: 300;
        color: var(--rp-text-3);
        line-height: 1.65;
    }
    .col-deal li { position: relative; padding-left: 20px; }
    .col-deal li::before {
        content: '';
        position: absolute; left: 0; top: 8px;
        width: 8px; height: 9px;
        background: var(--theme-color, #b33131); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-deal li + li { margin-top: 6px; }
    .col-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin: 16px 0 2px;
        font-size: var(--rp-fs-sm);
        color: var(--rp-text-2);
        line-height: 1.5;
        cursor: pointer;
    }
    .col-check input {
        width: 16px;
        height: 16px;
        margin: 2px 0 0;
        accent-color: var(--theme-color, #b33131);
        flex: none;
    }
    .col-hint {
        display: block;
        margin-top: 5px;
        font-size: var(--rp-fs-xs);
        color: var(--rp-text-3);
        line-height: 1.5;
    }
    .col-amb-state {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 20px;
        margin-bottom: 18px;
        background: rgba(0,0,0,0.22);
        clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
        font-size: var(--rp-fs-sm);
        font-weight: 300;
        line-height: 1.6;
        color: var(--rp-text-2);
    }
    /* Badge de embajador: chip con hexágono (receta .rp-chip + .rp-hex) */
    .col-amb-badge {
        --chip: var(--theme-color, #b33131);
        display: inline-flex; align-items: center; gap: 8px;
        padding: 3px 10px 3px 4px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm);
        font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow);
        text-transform: uppercase;
        color: var(--rp-text-2);
        background: rgba(255,255,255,0.05);
        border-radius: var(--rp-radius-sm, 6px);
        flex: none;
        white-space: nowrap;
    }
    .col-amb-badge::before {
        content: '';
        width: 21px; height: 23px; flex: none;
        background: var(--chip);
        -webkit-mask: var(--rp-hex) center / contain no-repeat;
                mask: var(--rp-hex) center / contain no-repeat;
        filter: drop-shadow(0 0 5px var(--chip));
    }
    .col-amb-badge--wait {
        --chip: rgba(255,255,255,0.14);
        color: var(--rp-text-3);
    }
    .col-amb-badge--wait::before { filter: none; }

    /* Toasts: isla flotante pequeña (misma receta que .toast de rp-modal.css) */
    .col-toasts {
        position: fixed; top: 20px; right: 20px;
        z-index: 99998;
        display: flex; flex-direction: column; gap: 10px;
        pointer-events: none;
    }
    .col-toasts .toast {
        --toast-accent: var(--theme-color, #b33131);
        position: relative;
        padding: 12px 22px 12px 14px;
        color: var(--rp-text); font-family: var(--rp-font);
        display: flex; align-items: center; gap: 12px;
        min-width: 240px; max-width: 340px;
        font-size: 12.5px; line-height: 1.45;
        background:
            radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 26px 26px,
            radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in srgb, var(--toast-accent) 26%, transparent) 0%, transparent 70%),
            rgba(12,12,16,0.9);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
                backdrop-filter: blur(18px) saturate(1.4);
        clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
        filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
        animation: colToastIn 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }
    .col-toasts .toast::before {
        content: '';
        width: 7px; height: 8px; flex: none;
        background: var(--toast-accent); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-toasts .toast-success { --toast-accent: var(--rp-success, #22c55e); }
    .col-toasts .toast-error { --toast-accent: var(--rp-error, #ff6b6b); }
    .col-toasts .toast-warning { --toast-accent: var(--rp-warning, #e6a817); }
    @keyframes colToastIn {
        from { opacity: 0; transform: translateX(30px); }
        to   { opacity: 1; transform: none; }
    }

    .col-loading {
        padding: 60px 0;
        text-align: center;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label);
        font-weight: 600; letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase;
        color: rgba(255,255,255,0.3);
    }

    .col-panel-hd {
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }
    .col-panel-hd-txt { flex: 1 1 auto; min-width: 0; }
    .col-mascot {
        flex: 0 0 auto;
        margin-top: 2px;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .col-mascot svg {
        display: block;
        height: 104px; width: auto;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
    }
    /* ── Mascotas: bucles con sentido (miran, asienten, saludan); se paran con
       prefers-reduced-motion al final del fichero ── */
    .cm-skin { fill: #ffffff; }
    .cm-eye-l { fill: #141414; }
    .cm-eye-r { fill: #b33131; }
    .cm-eye {
        transform-box: fill-box; transform-origin: center;
        animation: cmEyes 4.2s ease-in-out infinite;
    }
    @keyframes cmEyes {
        0%, 100% { transform: translate(3px, -1px); }
        50%      { transform: translate(-3px, -1px); }
    }
    .cm-face {
        transform-box: fill-box; transform-origin: center;
        animation: cmTilt 4.2s ease-in-out infinite;
    }
    @keyframes cmTilt {
        0%, 100% { transform: rotate(-6deg); }
        50%      { transform: rotate(6deg); }
    }

    .col-mascot--bug .cm-face { animation-duration: 5.2s; }
    .col-mascot--bug .cm-eye { animation-name: cmEyesUp; animation-duration: 5.2s; }
    @keyframes cmEyesUp {
        0%, 100% { transform: translate(5px, -5px); }
        50%      { transform: translate(1px, -3px); }
    }
    .cm-cloud {
        fill: rgba(0,0,0,0.26);
        stroke: rgba(255,255,255,0.14);
        stroke-width: 1.5;
    }
    .cm-bub { fill: rgba(255,255,255,0.16); animation: cmBub 2.8s ease-in-out infinite; }
    .cm-bub--2 { animation-delay: 0.22s; }
    @keyframes cmBub {
        0%, 100% { opacity: 0.25; }
        45%      { opacity: 1; }
    }
    .cm-nut {
        fill: none;
        stroke: rgba(255,255,255,0.85);
        stroke-width: 5;
        transform-box: fill-box; transform-origin: center;
        animation: cmNut 5.2s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
    }
    @keyframes cmNut {
        0%, 34%   { transform: rotate(0deg); }
        58%, 100% { transform: rotate(60deg); }
    }
    .cm-q {
        font-family: var(--rp-font);
        font-size: 30px; font-weight: 900; font-style: italic;
        text-anchor: middle;
        fill: var(--theme-color, #b33131);
        transform-box: fill-box; transform-origin: center;
        animation: cmQ 2.8s var(--rp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) infinite;
    }
    @keyframes cmQ {
        0%   { opacity: 0; transform: translateY(6px) scale(0.4) rotate(-14deg); }
        18%  { opacity: 1; transform: translateY(0) scale(1.12) rotate(7deg); }
        32%  { transform: translateY(-1px) scale(1) rotate(-3deg); }
        70%  { opacity: 1; transform: translateY(-3px) scale(1); }
        100% { opacity: 0; transform: translateY(-9px) scale(0.85); }
    }

    .cm-wave {
        fill: none;
        stroke: var(--theme-color, #b33131);
        stroke-width: 5.4;
        stroke-linecap: round;
        opacity: 0;
        animation: cmWave 2.1s ease-out infinite;
    }
    .cm-wave--2 { animation-delay: 0.26s; }
    .cm-wave--1 { animation-delay: 0.52s; }
    @keyframes cmWave {
        0%   { opacity: 0; }
        14%  { opacity: 0.95; }
        72%  { opacity: 0.2; }
        100% { opacity: 0; }
    }
    .col-mascot--idea .cm-face { animation-name: cmLean; animation-duration: 3.4s; }
    @keyframes cmLean {
        0%, 100% { transform: rotate(-2deg); }
        50%      { transform: rotate(-12deg); }
    }
    .col-mascot--idea .cm-eye { animation-name: cmEyesL; animation-duration: 3.4s; }
    .col-mascot--idea.is-listening .cm-wave { animation-duration: 0.9s; }
    .col-mascot--idea.is-listening .cm-face { animation-duration: 1.4s; }
    .col-mascot--idea.is-listening .cm-eye { animation-duration: 1.4s; }

    .cm-nod { animation-name: cmNod; animation-duration: 3.2s; }
    @keyframes cmNod {
        0%, 100% { transform: rotate(-4deg) translateY(0); }
        50%      { transform: rotate(5deg) translateY(-7px); }
    }
    .cm-nod--b { animation-delay: 0.5s; animation-duration: 3.9s; }
    .cm-nod--c { animation-delay: 1s; animation-duration: 3.5s; }
    .cm-look-r .cm-eye { animation-name: cmEyesR; }
    @keyframes cmEyesR {
        0%, 100% { transform: translate(6px, 0); }
        50%      { transform: translate(3px, -2px); }
    }
    .cm-look-l .cm-eye { animation-name: cmEyesL; }
    @keyframes cmEyesL {
        0%, 100% { transform: translate(-6px, 0); }
        50%      { transform: translate(-3px, -2px); }
    }
    .cm-look-down .cm-eye { animation-name: cmEyesD; }
    @keyframes cmEyesD {
        0%, 100% { transform: translate(-3px, 4px); }
        50%      { transform: translate(3px, 4px); }
    }
    .cm-chat circle {
        fill: var(--theme-color, #b33131);
        animation: cmChat 1.7s ease-in-out infinite;
    }
    .cm-chat circle:nth-child(2) { animation-delay: 0.2s; }
    .cm-chat circle:nth-child(3) { animation-delay: 0.4s; }
    @keyframes cmChat {
        0%, 100% { opacity: 0.16; }
        40%      { opacity: 1; }
    }

    .cm-royal {
        transform-box: fill-box; transform-origin: 50% 72%;
        animation: cmProud 3.8s ease-in-out infinite;
    }
    @keyframes cmProud {
        0%, 100% { transform: rotate(-3.5deg) translateY(0); }
        50%      { transform: rotate(3.5deg) translateY(-3px); }
    }
    .cm-crown {
        fill: url(#cmGold);
        filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rp-coach, #d4a04b) 40%, transparent));
    }
    .cm-spark {
        fill: var(--rp-coach, #d4a04b);
        transform-box: fill-box; transform-origin: center;
        animation: cmSpark 3.8s ease-in-out infinite;
    }
    @keyframes cmSpark {
        0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
        28%      { opacity: 1; transform: scale(1) rotate(40deg); }
        56%      { opacity: 0; transform: scale(0.4) rotate(80deg); }
    }

    @media (max-width: 768px) {
        .col-page {
            --rp-header-pad-x: 16px;
            padding: 0 16px 64px;
        }
        .col-page::before { display: none; }
        .col-header-bar { gap: 12px; }
        .col-header-bar .col-slash,
        .col-tag { display: none; }
        .col-accent-line { margin-top: 2px; }
        .col-lede { margin-top: 14px; font-size: 13.5px; }
        .col-tabs { gap: 18px; margin-top: 30px; padding-right: 8px; }
        .col-tab { font-size: var(--rp-fs-label-sm); letter-spacing: var(--rp-ls-eyebrow); }
        .col-panel { padding: 26px 18px 30px; }
        .col-actions { flex-direction: column; align-items: stretch; gap: 12px; }
        .col-actions .rp-btn { width: 100%; }
        .col-limit { order: 2; text-align: center; }
        .col-invite-row { flex-direction: column; align-items: stretch; gap: 12px; }
        .col-invite-row .rp-btn { width: 100%; }
        .col-invite { flex-wrap: wrap; gap: 6px; }
        .col-deal, .col-amb-state { padding: 14px 16px; }
        .col-toasts { top: auto; bottom: 20px; left: 14px; right: 14px; }
        .col-toasts .toast { max-width: none; }
        .col-panel-hd { flex-wrap: wrap; gap: 0; }
        .col-mascot {
            order: -1; width: 100%;
            display: flex; justify-content: flex-end;
            margin: 0 0 4px;
        }
        .col-mascot svg { height: 76px; }
    }

    /* ── Ayuda: lo que has enviado ── */
    .col-sent { margin-top: 4px; }
    .col-sent-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 16px;
        padding: 13px 0;
        animation: colPop 0.4s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }
    .col-sent-row:nth-child(2) { animation-delay: 70ms; }
    .col-sent-row:nth-child(3) { animation-delay: 140ms; }
    .col-sent-row:nth-child(4) { animation-delay: 210ms; }
    .col-sent-row:nth-child(5) { animation-delay: 280ms; }
    .col-sent-row:nth-child(n+6) { animation-delay: 350ms; }
    .col-sent-title {
        min-width: 0;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label); font-weight: 600; font-style: normal; line-height: 1.4;
        text-transform: uppercase; letter-spacing: var(--rp-ls-eyebrow);
        color: var(--rp-text);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .col-sent-meta {
        grid-column: 1;
        font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
        color: rgba(255,255,255,0.35);
    }
    /* La nota de respuesta: punto delante en vez de filete lateral */
    .col-sent-note {
        grid-column: 1 / -1;
        position: relative;
        margin-top: 4px;
        padding-left: 18px;
        font-size: 12.5px; font-weight: 300; line-height: 1.6;
        color: var(--rp-text-3);
        max-width: 62ch;
    }
    .col-sent-note::before {
        content: '';
        position: absolute; left: 0; top: 7px;
        width: 7px; height: 8px;
        background: rgba(255,255,255,0.35); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-sent-state {
        --dot-c: rgba(255,255,255,0.22);
        grid-column: 2; grid-row: 1 / span 2;
        align-self: start;
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label-sm); font-weight: 600;
        letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase;
        color: var(--rp-text-3);
        white-space: nowrap;
    }
    .col-sent-state::before {
        content: '';
        width: 7px; height: 8px; flex: none;
        background: var(--dot-c); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-sent-state svg { display: none; }
    .col-sent-state--new { --dot-c: var(--theme-color, #b33131); color: var(--rp-text-3); }
    .col-sent-state--new::before { animation: colDotPulse 1.6s ease-in-out infinite; }
    .col-sent-state--accepted { --dot-c: var(--rp-success, #22c55e); color: var(--rp-success, #22c55e); }
    .col-sent-state--rejected { --dot-c: rgba(255,255,255,0.18); color: rgba(255,255,255,0.3); }
    .col-sent-state--rejected::before { box-shadow: none; }
    @keyframes colDotPulse {
        0%, 100% { opacity: 0.5; transform: scale(0.9); }
        50%      { opacity: 1; transform: scale(1.15); }
    }

    /* ── Ayuda: otras vías ── */
    .col-support {
        margin-top: 44px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 18px 32px;
    }
    .col-support-item { min-width: 0; }
    .col-support-hd {
        display: flex; align-items: center; gap: 10px;
        font-family: var(--rp-font-label);
        font-size: var(--rp-fs-label); font-weight: 600; font-style: normal;
        text-transform: uppercase; letter-spacing: var(--rp-ls-eyebrow);
        color: var(--rp-text);
        margin-bottom: 6px;
    }
    .col-support-hd::before {
        content: '';
        width: 7px; height: 8px; flex: none;
        background: var(--theme-color, #b33131); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
    .col-support-item p {
        margin: 0;
        font-size: 12.5px; font-weight: 300; line-height: 1.65;
        color: var(--rp-text-3);
    }
    .col-support-item a {
        color: color-mix(in srgb, var(--theme-color, #b33131) 45%, #fff);
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .col-support-item a:hover {
        color: var(--rp-text);
        text-shadow: 0 0 12px color-mix(in srgb, var(--theme-color, #b33131) 60%, transparent);
    }
    .col-thanks-link {
        display: inline-block; margin-top: 4px;
        font-size: var(--rp-fs-btn-sm); font-weight: 700; font-style: italic; letter-spacing: var(--rp-ls-btn-sm); text-transform: uppercase;
        color: var(--rp-text-3);
        background: none; border: 0; padding: 6px 1px; cursor: pointer;
        font-family: var(--rp-font-label);
        transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .col-thanks-link:hover {
        color: var(--rp-text);
        text-shadow: 0 0 14px color-mix(in srgb, var(--theme-color, #b33131) 60%, transparent);
    }

    /* ── Invita: enlace al programa público ── */
    .col-amb-more {
        margin: -14px 0 22px;
        font-size: 12.5px; font-weight: 300; line-height: 1.6;
        color: var(--rp-text-3);
    }
    .col-amb-more a {
        color: color-mix(in srgb, var(--theme-color, #b33131) 45%, #fff);
        font-weight: 600; text-decoration: none;
        transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .col-amb-more a:hover {
        color: var(--rp-text);
        text-shadow: 0 0 12px color-mix(in srgb, var(--theme-color, #b33131) 60%, transparent);
    }
    @media (max-width: 768px) {
        .col-sent-row { grid-template-columns: 1fr; }
        .col-sent-state { grid-column: 1; grid-row: auto; margin-top: 4px; }
    }

    /* ── Movimiento reducido: paneles, filas, indicador, toasts y mascotas ── */
    @media (prefers-reduced-motion: reduce) {
        .col-panel, .col-thanks, .col-invite, .col-sent-row, .col-toasts .toast,
        .col-tab--on::after, .col-sent-state--new::before { animation: none !important; }
        .col-mascot svg * { animation: none !important; }
        .cm-wave, .cm-q, .cm-spark { opacity: 0.85; }
        .col-page .stg-input, .col-amb-opt, .col-progress-block { transition: none; }
    }