/* Botones flotantes de galería: iconos limpios, centrados y sin emojis */
.floating-gallery-actions {
    position: fixed;
    z-index: 70;
    right: max(.9rem, env(safe-area-inset-right));
    bottom: calc(5.1rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: center;
    pointer-events: none;
}

.floating-gallery-actions button,
.floating-gallery-actions .floating-custom-link,
.floating-gallery-actions .floating-camera-button,
.floating-gallery-actions .compact-floating-upload {
    pointer-events: auto;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 3.45rem !important;
    height: 3.45rem !important;
    min-width: 3.45rem !important;
    min-height: 3.45rem !important;
    max-width: 3.45rem !important;
    max-height: 3.45rem !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.36) !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2)) !important;
    box-shadow: 0 16px 34px rgba(29,18,44,.24) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    cursor: pointer;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.floating-gallery-actions button:active {
    transform: scale(.94);
}

.floating-gallery-actions button span {
    display: none !important;
}


.floating-gallery-actions .floating-custom-link {
    text-decoration: none !important;
    background: linear-gradient(135deg, var(--camera-accent, #5F3BF5), var(--camera-accent-2, #8067f7)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.38) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--camera-accent, #5F3BF5) 34%, transparent) !important;
}

.floating-gallery-actions .floating-custom-link img {
    display: block;
    width: 62%;
    height: 62%;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.16));
}

.floating-gallery-actions .floating-custom-link svg {
    display: block;
    width: 46%;
    height: 46%;
    fill: currentColor;
}

.floating-camera-button::before {
    content: '';
    display: block;
    width: 1.72rem;
    height: 1.72rem;
    background: #fff;
    transform: translateY(.01rem);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.1c.25-.55.8-.9 1.4-.9h4c.6 0 1.15.35 1.4.9L16.25 7H19a3 3 0 0 1 3 3v6.25a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h2.75L8.6 5.1ZM12 9.25a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5Zm0 1.85a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8Zm6.2-.85a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.1c.25-.55.8-.9 1.4-.9h4c.6 0 1.15.35 1.4.9L16.25 7H19a3 3 0 0 1 3 3v6.25a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V10a3 3 0 0 1 3-3h2.75L8.6 5.1ZM12 9.25a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5Zm0 1.85a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8Zm6.2-.85a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compact-floating-upload::before,
.compact-floating-upload::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.72rem;
    height: .18rem;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%);
}

.compact-floating-upload::after {
    width: .18rem;
    height: 1.72rem;
}

/* Cámara: interfaz social, limpia y estable */
.camera-drawer {
    --camera-accent: var(--gallery-button, var(--event-primary));
    --camera-accent-2: color-mix(in srgb, var(--camera-accent) 76%, #ffffff 24%);
    --camera-accent-soft: color-mix(in srgb, var(--camera-accent) 26%, transparent);
}
.camera-drawer[hidden],
.camera-stage [hidden] {
    display: none !important;
}

.camera-screen-flash {
    position: fixed;
    inset: 0;
    z-index: 220;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    transition: opacity .08s ease;
}

.camera-drawer.is-screen-flashing .camera-screen-flash {
    opacity: .96;
}

.camera-drawer.is-screen-light-on .camera-screen-flash {
    opacity: .72;
    transition: opacity .16s ease;
}

.camera-drawer {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #050506;
}

.camera-backdrop {
    position: absolute;
    inset: 0;
    background: #050506;
}

.camera-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    width: 100%;
    max-width: 520px;
    height: 100svh;
    min-height: 100svh;
    padding: calc(.85rem + env(safe-area-inset-top)) .85rem calc(.95rem + env(safe-area-inset-bottom));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: #050506;
    box-shadow: none;
}

.camera-panel .eyebrow,
.camera-panel h2,
.camera-copy,
.camera-form label:not(.camera-caption) {
    display: none;
}

.camera-close,
.camera-switch,
.camera-flash {
    position: fixed;
    top: calc(.8rem + env(safe-area-inset-top));
    z-index: 160;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.48);
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
}

.camera-close {
    left: .85rem;
    padding-bottom: .15rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
}

.camera-switch {
    right: .85rem;
}

.camera-flash {
    right: 4.22rem;
}

.camera-flash svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: currentColor;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

.camera-flash.is-active {
    color: #17130c;
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.62);
    box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 0 0 .16rem color-mix(in srgb, var(--camera-accent) 42%, transparent);
}

.camera-flash.is-screen-flash::after {
    content: '';
    position: absolute;
    right: .46rem;
    bottom: .45rem;
    width: .46rem;
    height: .46rem;
    border-radius: 999px;
    background: var(--camera-accent);
    box-shadow: 0 0 0 2px rgba(255,255,255,.75);
}


.camera-switch svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.camera-switch:disabled { opacity: .45; }
.camera-stage video.is-front-camera { transform: scaleX(-1); }

.camera-stage {
    position: relative;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: min(100%, 430px);
    max-height: calc(100svh - 16rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(circle at center, #1b1b1f 0%, #0b0b0d 70%);
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.camera-stage::before {
    content: 'CÁMARA';
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.25);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .82rem;
    letter-spacing: .16em;
}

.camera-stage video,
.camera-stage canvas,
.camera-stage img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050506;
}

.camera-warning {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    color: #fff;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .92rem;
    line-height: 1.35;
}

.camera-warning p { margin: 0; }
.camera-warning button {
    width: 100%;
    margin-top: .7rem;
    padding: .68rem .8rem;
    color: #171319;
    background: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 900;
}

.camera-mode-tabs {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    width: min(100%, 430px);
    margin: .72rem auto .25rem;
    padding: .22rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.camera-mode-tabs button {
    min-height: 2.25rem;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: transparent;
    font-weight: 900;
    letter-spacing: .02em;
}

.camera-mode-tabs button.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.camera-filters {
    grid-row: 3;
    display: flex;
    gap: .55rem;
    width: calc(100% + 1.7rem);
    margin: .55rem -.85rem .65rem;
    padding: .2rem .85rem .42rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.camera-filters::-webkit-scrollbar { display: none; }

.camera-filters button {
    flex: 0 0 auto;
    min-width: 4.8rem;
    padding: .66rem .9rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-weight: 800;
}

.camera-filters button.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.camera-form {
    grid-row: 4;
    margin: 0;
}

.camera-caption {
    display: none !important;
    margin: 0 0 .72rem !important;
    padding: .72rem .8rem .82rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 1.35rem;
    background: rgba(255,255,255,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.camera-panel.has-capture .camera-caption {
    display: grid !important;
    gap: .42rem;
}

.camera-caption > span {
    display: block;
    padding-left: .18rem;
    color: rgba(255,255,255,.72) !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .74rem !important;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.camera-caption input {
    width: 100%;
    min-height: 3rem;
    padding: .74rem 1rem;
    color: #fff;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1rem;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .95rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.camera-caption input:focus {
    border-color: rgba(255,255,255,.38);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--camera-accent) 34%, transparent), 0 10px 25px rgba(0,0,0,.18);
}

.camera-caption input::placeholder { color: rgba(255,255,255,.45); }

.camera-actions {
    display: grid;
    grid-template-columns: 1fr 5rem 1fr;
    align-items: center;
    gap: .72rem;
    padding: 0;
    background: transparent;
}

.camera-actions .button {
    min-height: 3.05rem;
    border-radius: 999px;
    font-weight: 900;
}

.camera-actions [data-camera-capture] {
    grid-column: 2;
    width: 5rem;
    height: 5rem;
    min-height: 5rem;
    padding: 0;
    border: .34rem solid rgba(255,255,255,.88);
    color: transparent;
    background: #fff;
    box-shadow: inset 0 0 0 .32rem #050506, 0 18px 40px rgba(0,0,0,.32);
    font-size: 0;
}

.camera-actions [data-camera-retake] {
    grid-column: 1;
    color: #fff;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
}

.camera-actions [data-camera-submit] {
    grid-column: 3;
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
}

.camera-actions [data-camera-submit]:disabled { opacity: .45; }
.camera-actions [hidden] { display: none !important; }

.camera-panel.is-video-mode .camera-actions [data-camera-capture]::after {
    content: '';
    display: block;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 0 0 .18rem rgba(255,255,255,.16), 0 10px 24px var(--camera-accent-soft);
}

.camera-panel.is-video-mode .camera-actions [data-camera-capture].is-recording::after {
    width: 1.62rem;
    height: 1.62rem;
    border-radius: .48rem;
    background: #fff;
    box-shadow: 0 0 0 .22rem var(--camera-accent-soft), 0 8px 22px rgba(0,0,0,.24);
    animation: rq-record-pulse .8s ease-in-out infinite alternate;
}

.camera-panel.is-recording .camera-stage::after {
    content: 'GRABANDO';
    position: absolute;
    z-index: 4;
    top: .85rem;
    left: .85rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

@keyframes rq-record-pulse {
    from { transform: scale(.86); opacity: .72; }
    to { transform: scale(1); opacity: 1; }
}

.camera-form .form-status {
    min-height: 1.1rem;
    margin-top: .45rem;
    color: rgba(255,255,255,.88);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .82rem;
}

.camera-form .form-status.success { color: #d9ffe9; }
.camera-form .form-status.error { color: #ffd8d8; }

body.camera-drawer-open { overflow: hidden; }

@media (max-width: 760px) {
    .floating-gallery-actions {
        right: max(.85rem, env(safe-area-inset-right));
        bottom: calc(5.15rem + env(safe-area-inset-bottom));
        left: auto;
        gap: .68rem;
    }

    .floating-gallery-actions button,
    .floating-gallery-actions .floating-custom-link,
    .floating-gallery-actions .floating-camera-button,
    .floating-gallery-actions .compact-floating-upload {
        width: 3.38rem !important;
        height: 3.38rem !important;
        min-width: 3.38rem !important;
        min-height: 3.38rem !important;
        max-width: 3.38rem !important;
        max-height: 3.38rem !important;
    }


    .floating-camera-button::before {
        width: 1.68rem;
        height: 1.68rem;
    }

    .compact-floating-upload::before { width: 1.65rem; }
    .compact-floating-upload::after { height: 1.65rem; }
    .camera-panel { max-width: none; }
    .camera-stage { border-radius: 24px; }
}

@media (max-height: 720px) {
    .camera-stage {
        aspect-ratio: 3 / 4;
        max-height: calc(100svh - 14rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 22px;
    }

    .camera-mode-tabs { margin-top: .5rem; }
    .camera-filters { margin-top: .42rem; margin-bottom: .42rem; }

    .camera-actions [data-camera-capture] {
        width: 4.55rem;
        height: 4.55rem;
        min-height: 4.55rem;
    }
}

/* Cámara premium v5: más limpia, estilo social y sin menús raros al tocar */
.camera-drawer,
.camera-panel,
.camera-panel * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.camera-panel input,
.camera-panel textarea {
    -webkit-touch-callout: default;
    user-select: text;
}

.camera-panel {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    gap: .45rem;
}

.camera-stage {
    width: min(100%, 440px);
    max-height: calc(100svh - 18.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 1px solid rgba(255,255,255,.12);
}

.camera-stage video,
.camera-stage img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.camera-mode-tabs {
    order: 1;
    width: min(100%, 420px);
    margin-top: .62rem;
}

.camera-mode-tabs button {
    font-size: .95rem;
}

.camera-filters {
    width: min(100% + 1.7rem, 520px);
    justify-self: center;
    margin-top: .35rem;
    margin-bottom: .25rem;
}

.camera-filters button {
    min-width: auto;
    padding: .64rem 1rem;
    font-size: .95rem;
}

.camera-form {
    width: min(100%, 430px);
    justify-self: center;
}

.camera-actions {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .8rem;
}

.camera-actions [data-camera-capture] {
    grid-column: 1;
}

.camera-actions [data-camera-submit] {
    display: none;
}

.camera-panel.has-capture {
    grid-template-rows: minmax(0, 1fr) auto;
}

.camera-panel.has-capture .camera-form {
    grid-row: 2;
}

.camera-panel.has-capture .camera-mode-tabs,
.camera-panel.has-capture .camera-filters {
    display: none;
}

.camera-panel.has-capture .camera-caption {
    margin-bottom: .85rem !important;
    padding: .78rem .82rem .9rem;
    border-radius: 1.3rem;
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.065));
}

.camera-caption > span {
    opacity: .8;
}

.camera-caption input {
    min-height: 3.15rem;
    padding: .78rem 1.05rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.16);
}

.camera-panel.has-capture .camera-actions {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.camera-panel.has-capture .camera-actions [data-camera-retake],
.camera-panel.has-capture .camera-actions [data-camera-submit] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    grid-column: auto;
    width: 100%;
    min-height: 3.35rem;
    font-size: 1.02rem;
}

.camera-panel.has-capture .camera-actions [data-camera-submit] {
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--camera-accent) 35%, transparent);
}

.camera-panel.has-capture .camera-actions [data-camera-submit]:disabled {
    display: none !important;
}

.camera-panel.has-capture .camera-actions [data-camera-capture] {
    display: none !important;
}

.camera-panel.is-video-mode:not(.has-capture) .camera-actions [data-camera-capture] {
    background: rgba(255,255,255,.98);
    box-shadow: inset 0 0 0 .32rem #050506, 0 0 0 .18rem rgba(255,255,255,.2), 0 18px 40px rgba(0,0,0,.34);
}

.camera-panel.is-video-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
}

.camera-panel.is-video-mode.is-recording:not(.has-capture) .camera-actions [data-camera-capture] {
    border-color: rgba(255,255,255,.95);
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: inset 0 0 0 .32rem #050506, 0 0 0 .2rem var(--camera-accent-soft), 0 0 34px var(--camera-accent-soft), 0 18px 40px rgba(0,0,0,.34);
}

.camera-form .form-status {
    margin-top: .55rem;
    min-height: 1.2rem;
    color: rgba(255,255,255,.78);
}

.camera-warning button {
    cursor: pointer;
}

@media (max-width: 760px) {
    .camera-panel {
        padding: calc(.72rem + env(safe-area-inset-top)) .72rem calc(.8rem + env(safe-area-inset-bottom));
        gap: .38rem;
    }

    .camera-close,
    .camera-switch {
        width: 2.9rem;
        height: 2.9rem;
    }

    .camera-stage {
        width: min(100%, 430px);
        max-height: calc(100svh - 17.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 25px;
    }

    .camera-mode-tabs {
        margin-top: .55rem;
    }

    .camera-filters {
        padding-bottom: .32rem;
    }

    .camera-actions [data-camera-capture] {
        width: 4.85rem;
        height: 4.85rem;
        min-height: 4.85rem;
    }
}

@media (max-height: 760px) {
    .camera-stage {
        aspect-ratio: 3 / 4;
        max-height: calc(100svh - 15.8rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .camera-mode-tabs button,
    .camera-filters button {
        min-height: 2.1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .camera-panel.has-capture .camera-caption {
        padding: .6rem .68rem .72rem;
    }
}


/* Ajuste fino: video y controles usan el color del evento, sin cuadro rojo tosco */
.camera-drawer .camera-mode-tabs button.is-active,
.camera-drawer .camera-filters button.is-active,
.camera-drawer .camera-actions [data-camera-submit] {
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2)) !important;
}
.camera-drawer .camera-caption input:focus {
    border-color: color-mix(in srgb, var(--camera-accent) 60%, #fff 20%) !important;
    box-shadow: 0 0 0 3px var(--camera-accent-soft), 0 10px 25px rgba(0,0,0,.18) !important;
}
.camera-drawer .camera-actions [data-camera-capture] {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.camera-drawer .camera-actions [data-camera-capture]:active {
    transform: scale(.94);
}
.camera-drawer .camera-form .form-status {
    font-weight: 700;
}


/* Boomerang en cámara */
.camera-mode-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.camera-mode-tabs button[data-camera-mode="boomerang"] {
    position: relative;
}

.camera-panel.is-boomerang-mode .camera-stage::after {
    content: '∞';
    position: absolute;
    right: .85rem;
    top: .85rem;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,255,255,.28);
    font-weight: 900;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 430px) {
    .camera-mode-tabs button {
        font-size: .82rem;
        padding-inline: .25rem;
    }
}

/* Boomerang tipo historia v2 */
.camera-boomerang-progress {
    --boomerang-progress: 0%;
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .85rem;
    z-index: 5;
    height: .26rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.22);
    opacity: 0;
    transform: translateY(.35rem);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.camera-boomerang-progress span {
    display: block;
    width: var(--boomerang-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #fff, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 0 18px var(--camera-accent-soft);
    transition: width .08s linear;
}

.camera-panel.is-boomerang-mode.is-recording .camera-boomerang-progress {
    opacity: 1;
    transform: translateY(0);
}

.camera-panel.is-boomerang-mode:not(.has-capture) .camera-actions [data-camera-capture] {
    border-color: rgba(255,255,255,.96);
    background: rgba(255,255,255,.98);
    box-shadow: inset 0 0 0 .32rem #050506, 0 0 0 .18rem rgba(255,255,255,.24), 0 18px 42px rgba(0,0,0,.36);
}

.camera-panel.is-boomerang-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    content: '∞';
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    color: #fff;
    background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.55), transparent 33%), linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    font-size: 2.05rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 .18rem rgba(255,255,255,.16), 0 12px 28px var(--camera-accent-soft);
}

.camera-panel.is-boomerang-mode.is-recording:not(.has-capture) .camera-actions [data-camera-capture]::after {
    animation: rq-record-pulse .48s ease-in-out infinite alternate;
}

.camera-panel.is-boomerang-mode.is-recording .camera-stage::after {
    content: 'BOOMERANG';
    top: .85rem;
    right: .85rem;
    left: auto;
    width: auto;
    height: auto;
    padding: .42rem .72rem;
    border-radius: 999px;
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(255,255,255,.28);
    font-size: .68rem;
    letter-spacing: .12em;
}

.camera-panel.has-capture.is-boomerang-mode .camera-actions [data-camera-retake]::before {
    content: '↺ ';
}


/* Layout tipo historia */
.camera-layout-guide,
.camera-layout-picker {
    display: none;
}

.camera-panel.is-layout-mode .camera-layout-guide {
    position: absolute;
    inset: .52rem;
    z-index: 2;
    display: grid;
    gap: .36rem;
    pointer-events: none;
}

.camera-panel.is-layout-mode .camera-layout-guide[data-layout-count="2"] {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.camera-panel.is-layout-mode .camera-layout-guide[data-layout-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.08fr .92fr;
}

.camera-panel.is-layout-mode .camera-layout-guide[data-layout-count="3"] .camera-layout-cell:first-child {
    grid-column: 1 / -1;
}

.camera-panel.is-layout-mode .camera-layout-guide[data-layout-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.camera-layout-cell {
    position: relative;
    overflow: hidden;
    border: 1.8px solid rgba(255,255,255,.72);
    border-radius: 17px;
    background: rgba(0,0,0,.08);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), 0 10px 24px rgba(0,0,0,.16);
    background-size: cover;
    background-position: center;
}

.camera-layout-cell::before {
    content: attr(data-layout-index);
    position: absolute;
    left: .58rem;
    top: .52rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.46);
    border: 1px solid rgba(255,255,255,.26);
    font-size: .74rem;
    font-weight: 900;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.camera-layout-cell.is-next {
    border-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 .18rem var(--camera-accent-soft), 0 14px 32px rgba(0,0,0,.22);
}

.camera-layout-cell.is-filled::after {
    content: '✓';
    position: absolute;
    right: .58rem;
    top: .52rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0,0,0,.2);
}

.camera-panel.is-layout-mode:not(.has-capture) .camera-layout-picker {
    position: absolute;
    left: 50%;
    bottom: .78rem;
    z-index: 5;
    display: flex;
    gap: .42rem;
    padding: .28rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(0,0,0,.42);
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
    transform: translateX(-50%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.camera-layout-picker button {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.12);
    font-weight: 900;
    cursor: pointer;
}

.camera-layout-picker button.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 8px 20px var(--camera-accent-soft);
}

.camera-panel.is-layout-mode .camera-stage::after {
    content: 'LAYOUT';
    position: absolute;
    right: .85rem;
    top: .85rem;
    z-index: 4;
    width: auto;
    height: auto;
    padding: .42rem .72rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(255,255,255,.28);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.camera-panel.is-layout-mode:not(.has-capture) .camera-actions [data-camera-capture] {
    border-color: rgba(255,255,255,.96);
    background: rgba(255,255,255,.98);
    box-shadow: inset 0 0 0 .32rem #050506, 0 0 0 .18rem rgba(255,255,255,.24), 0 18px 42px rgba(0,0,0,.36);
}

.camera-panel.is-layout-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    content: '▦';
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    color: #fff;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.5), transparent 34%), linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 .18rem rgba(255,255,255,.16), 0 12px 28px var(--camera-accent-soft);
}

.camera-panel.has-capture.is-layout-mode .camera-actions [data-camera-retake]::before {
    content: '↺ ';
}

@media (max-width: 430px) {
    .camera-mode-tabs {
        gap: .34rem;
    }
    .camera-mode-tabs button {
        font-size: .72rem;
        padding-inline: .14rem;
    }
    .camera-panel.is-layout-mode .camera-layout-guide {
        gap: .28rem;
        inset: .42rem;
    }
    .camera-layout-cell {
        border-radius: 14px;
    }
}

/* Layout v3: estilo Instagram, sin líneas negras y con preview vivo en el cuadro activo */
.camera-actions [data-camera-capture] {
    display: grid !important;
    place-items: center !important;
}

.camera-mode-tabs button[data-camera-mode="boomerang"] {
    white-space: nowrap;
}

.camera-panel.is-layout-mode .camera-stage > [data-camera-video] {
    opacity: 0 !important;
}

.camera-panel.is-layout-mode .camera-layout-guide {
    inset: 0 !important;
    gap: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    background: #000 !important;
}

.camera-layout-cell {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #000 !important;
    background-size: cover !important;
    background-position: center !important;
}

.camera-layout-cell.is-pending {
    background: rgba(0,0,0,.78) !important;
}

.camera-layout-cell.is-next {
    background: #000 !important;
    box-shadow: none !important;
}

.camera-layout-cell::before,
.camera-layout-cell.is-filled::after,
.camera-panel.is-layout-mode .camera-stage::after {
    display: none !important;
}

.camera-layout-live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #000;
}

.camera-layout-live.is-front-camera {
    transform: scaleX(-1);
}

.camera-panel.is-layout-mode:not(.has-capture) .camera-actions [data-camera-capture]::after,
.camera-panel.is-boomerang-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    display: grid !important;
    place-items: center !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--camera-accent) !important;
    line-height: 1 !important;
}

.camera-panel.is-layout-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    content: '▦' !important;
    font-size: 2rem !important;
}

.camera-panel.is-boomerang-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    content: '∞' !important;
    font-size: 2.45rem !important;
}

.camera-panel.is-video-mode .camera-actions [data-camera-capture]::after {
    margin: auto !important;
}

@media (max-width: 430px) {
    .camera-mode-tabs button[data-camera-mode="boomerang"] {
        font-size: .68rem !important;
        letter-spacing: 0 !important;
    }
}

/* Layout v5: el cuadro activo muestra exactamente lo que se va a capturar */
.camera-panel.is-layout-mode .camera-layout-guide {
    gap: 1px !important;
    background: rgba(255,255,255,.16) !important;
}

.camera-layout-cell,
.camera-layout-cell.is-next,
.camera-layout-cell.is-pending {
    background-color: rgba(0,0,0,.08) !important;
}

.camera-layout-cell.is-pending {
    background: rgba(0,0,0,.08) !important;
}

.camera-layout-cell.is-next {
    outline: 2px solid rgba(255,255,255,.78) !important;
    outline-offset: -2px !important;
    z-index: 2;
}

.camera-layout-live {
    background: transparent !important;
}

.camera-layout-live:not(.is-muted) {
    filter: none;
    opacity: 1;
}

.camera-layout-live.is-muted {
    transform: scale(1.08);
    opacity: .92;
}

.camera-layout-live.is-front-camera.is-muted {
    transform: scaleX(-1) scale(1.08);
}

.camera-layout-cell.is-filled {
    background-color: transparent !important;
}

/* Importante: ocultamos el video base para que no se vea la cámara completa detrás del layout.
   Solo el slot activo queda claro; los pendientes quedan con blur suave dentro de su propio cuadro. */
.camera-panel.is-layout-mode:not(.has-capture) .camera-stage > [data-camera-video] {
    opacity: 0 !important;
}


/* Flash v1: botón superior y flash de pantalla como respaldo */
@media (max-width: 380px) {
    .camera-flash { right: 3.95rem; }
}


/* Camera polish v1: controles superiores alineados y capture button más limpio */
.camera-close,
.camera-switch,
.camera-flash {
    box-sizing: border-box !important;
    top: calc(.92rem + env(safe-area-inset-top)) !important;
    width: 2.95rem !important;
    height: 2.95rem !important;
    min-width: 2.95rem !important;
    min-height: 2.95rem !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(0,0,0,.46) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
}

.camera-close {
    left: max(.95rem, env(safe-area-inset-left)) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
}

.camera-close::before,
.camera-close::after {
    content: '' !important;
    position: absolute !important;
    width: 1.45rem !important;
    height: .16rem !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 1px 7px rgba(0,0,0,.22) !important;
}

.camera-close::before { transform: rotate(45deg) !important; }
.camera-close::after { transform: rotate(-45deg) !important; }

.camera-switch {
    right: max(.95rem, env(safe-area-inset-right)) !important;
}

.camera-flash {
    right: calc(max(.95rem, env(safe-area-inset-right)) + 3.55rem) !important;
}

.camera-flash svg,
.camera-switch svg {
    display: block !important;
    width: 1.48rem !important;
    height: 1.48rem !important;
    margin: 0 !important;
    opacity: 1 !important;
}

.camera-switch svg {
    width: 1.62rem !important;
    height: 1.62rem !important;
    stroke: #fff !important;
    stroke-width: 2.15 !important;
    filter: drop-shadow(0 1px 7px rgba(0,0,0,.3)) !important;
}

.camera-flash svg {
    fill: #fff !important;
    filter: drop-shadow(0 1px 7px rgba(0,0,0,.3)) !important;
}

.camera-flash.is-active {
    color: #17130c !important;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2)) !important;
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.26), 0 0 0 .12rem rgba(255,255,255,.18) !important;
}

.camera-flash.is-active svg { fill: #fff !important; }
.camera-flash.is-screen-flash::after { display: none !important; }

/* Quitamos el tercer círculo/insignia de Boomerang arriba. */
.camera-panel.is-boomerang-mode .camera-stage::after,
.camera-panel.is-boomerang-mode.is-recording .camera-stage::after {
    display: none !important;
    content: none !important;
}

/* Tabs más proporcionados: Boomerang gana aire sin deformar el diseño. */
.camera-mode-tabs {
    grid-template-columns: .82fr .82fr 1.28fr .88fr !important;
    gap: .38rem !important;
}

.camera-mode-tabs button {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    padding-inline: .36rem !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.camera-mode-tabs button[data-camera-mode="boomerang"] {
    font-size: clamp(.78rem, 3.15vw, .95rem) !important;
}

.camera-mode-tabs button[data-camera-mode="boomerang"].is-active {
    padding-inline: .28rem !important;
}

/* Botón central limpio: sin burbuja ni brillo raro en video/boomerang/layout. */
.camera-actions [data-camera-capture] {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 4.9rem !important;
    height: 4.9rem !important;
    min-height: 4.9rem !important;
    padding: 0 !important;
    border: .34rem solid rgba(255,255,255,.94) !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: inset 0 0 0 .32rem #050506, 0 17px 38px rgba(0,0,0,.32) !important;
    overflow: hidden !important;
}

.camera-actions [data-camera-capture]::before {
    content: '' !important;
    position: absolute !important;
    inset: 1.02rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2)) !important;
    box-shadow: none !important;
    transition: border-radius .18s ease, transform .18s ease, inset .18s ease, background .18s ease !important;
}

.camera-panel.is-video-mode .camera-actions [data-camera-capture]::after,
.camera-panel.is-boomerang-mode:not(.has-capture) .camera-actions [data-camera-capture]::after,
.camera-panel.is-layout-mode:not(.has-capture) .camera-actions [data-camera-capture]::after {
    display: none !important;
    content: none !important;
}

.camera-panel.is-video-mode.is-recording:not(.has-capture) .camera-actions [data-camera-capture] {
    background: rgba(255,255,255,.98) !important;
    box-shadow: inset 0 0 0 .32rem #050506, 0 0 0 .18rem var(--camera-accent-soft), 0 17px 38px rgba(0,0,0,.32) !important;
}

.camera-panel.is-video-mode.is-recording:not(.has-capture) .camera-actions [data-camera-capture]::before {
    inset: 1.35rem !important;
    border-radius: .48rem !important;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2)) !important;
    animation: rq-record-pulse .8s ease-in-out infinite alternate !important;
}

.camera-panel.is-boomerang-mode.is-recording:not(.has-capture) .camera-actions [data-camera-capture]::before {
    animation: rq-record-pulse .48s ease-in-out infinite alternate !important;
}

@media (max-width: 430px) {
    .camera-close,
    .camera-switch,
    .camera-flash {
        width: 2.8rem !important;
        height: 2.8rem !important;
        min-width: 2.8rem !important;
        min-height: 2.8rem !important;
        top: calc(.82rem + env(safe-area-inset-top)) !important;
    }
    .camera-switch {
        right: max(.72rem, env(safe-area-inset-right)) !important;
    }
    .camera-flash {
        right: calc(max(.72rem, env(safe-area-inset-right)) + 3.32rem) !important;
    }
    .camera-close {
        left: max(.72rem, env(safe-area-inset-left)) !important;
    }
    .camera-mode-tabs {
        grid-template-columns: .78fr .78fr 1.34fr .88fr !important;
        gap: .26rem !important;
        padding: .18rem !important;
    }
    .camera-mode-tabs button {
        font-size: .78rem !important;
        padding-inline: .16rem !important;
    }
    .camera-mode-tabs button[data-camera-mode="boomerang"] {
        font-size: .74rem !important;
    }
    .camera-actions [data-camera-capture] {
        width: 4.65rem !important;
        height: 4.65rem !important;
        min-height: 4.65rem !important;
    }
}

@media (max-width: 370px) {
    .camera-mode-tabs button { font-size: .72rem !important; }
    .camera-mode-tabs button[data-camera-mode="boomerang"] { font-size: .68rem !important; }
}

/* Temporizador exclusivo para cámara de fotos */
.camera-timer-picker {
    grid-row: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: min(100%, 430px);
    margin: .05rem auto .45rem;
    padding: .28rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.camera-timer-picker[hidden] { display: none !important; }
.camera-timer-picker span {
    flex: 0 0 auto;
    padding: 0 .4rem 0 .55rem;
    color: rgba(255,255,255,.68);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.camera-timer-picker button {
    flex: 1 1 0;
    min-height: 2.05rem;
    border: 0;
    border-radius: 999px;
    color: rgba(255,255,255,.82);
    background: transparent;
    font-weight: 900;
}
.camera-timer-picker button.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--camera-accent), var(--camera-accent-2));
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
}
.camera-countdown {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: clamp(5.6rem, 28vw, 11rem);
    font-weight: 900;
    letter-spacing: -.08em;
    text-shadow: 0 16px 48px rgba(0,0,0,.45);
    background: radial-gradient(circle at center, rgba(0,0,0,.18), rgba(0,0,0,.36));
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    pointer-events: none;
}
.camera-countdown[hidden] { display: none !important; }
.camera-panel.is-timer-running .camera-switch,
.camera-panel.is-timer-running .camera-flash,
.camera-panel.is-timer-running .camera-mode-tabs,
.camera-panel.is-timer-running .camera-filters,
.camera-panel.is-timer-running .camera-timer-picker {
    opacity: .4;
    pointer-events: none;
}
.camera-panel.has-capture .camera-timer-picker { display: none !important; }
@media (max-width: 430px) {
    .camera-timer-picker { gap: .32rem; }
    .camera-timer-picker span { font-size: .68rem; padding-inline: .34rem; }
    .camera-timer-picker button { font-size: .76rem; min-height: 1.9rem; }
}

.camera-panel:not(.has-capture) { grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
.camera-panel:not(.has-capture) .camera-form { grid-row: 5; }


/* Timer fix v2: temporizador compacto y pestañas estables */
.camera-timer-picker {
    grid-row: 4;
    width: auto !important;
    max-width: calc(100% - 1.4rem) !important;
    margin: .12rem auto .34rem !important;
    padding: .2rem !important;
    gap: .18rem !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
.camera-timer-picker span {
    flex: 0 0 auto !important;
    padding: 0 .5rem !important;
    font-size: .6rem !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    color: rgba(255,255,255,.58) !important;
}
.camera-timer-picker button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 2.35rem !important;
    min-height: 1.78rem !important;
    padding: 0 .62rem !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.76) !important;
}
.camera-timer-picker button.is-active {
    color: #fff !important;
    background: var(--camera-accent, #b7a04a) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}
.camera-countdown {
    font-size: clamp(3rem, 18vw, 7.4rem) !important;
    letter-spacing: 0 !important;
    text-shadow: 0 14px 44px rgba(0,0,0,.42) !important;
}
@media (max-width: 430px) {
    .camera-timer-picker {
        max-width: calc(100% - 1rem) !important;
        gap: .14rem !important;
        padding: .18rem !important;
    }
    .camera-timer-picker span {
        padding: 0 .38rem !important;
        font-size: .56rem !important;
    }
    .camera-timer-picker button {
        min-width: 2.05rem !important;
        min-height: 1.62rem !important;
        padding: 0 .48rem !important;
        font-size: .72rem !important;
    }
}
@media (max-width: 360px) {
    .camera-timer-picker span { display: none !important; }
}

/* Guía rápida para invitados nuevos */
.gallery-tutorial-open {
    overflow: hidden;
}
.gallery-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    --gallery-tutorial-hole-top: 0px;
    --gallery-tutorial-hole-left: 0px;
    --gallery-tutorial-hole-right: 100vw;
    --gallery-tutorial-hole-bottom: 100vh;
    --gallery-tutorial-hole-width: 100vw;
    --gallery-tutorial-hole-height: 100vh;
}
.gallery-tutorial-scrim {
    position: fixed;
    background: rgba(15, 9, 30, .38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: auto;
}
.gallery-tutorial-scrim-top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--gallery-tutorial-hole-top, 0px);
}
.gallery-tutorial-scrim-bottom {
    top: var(--gallery-tutorial-hole-bottom, 100vh);
    left: 0;
    right: 0;
    bottom: 0;
}
.gallery-tutorial-scrim-left {
    top: var(--gallery-tutorial-hole-top, 0px);
    left: 0;
    width: var(--gallery-tutorial-hole-left, 0px);
    height: var(--gallery-tutorial-hole-height, 0px);
}
.gallery-tutorial-scrim-right {
    top: var(--gallery-tutorial-hole-top, 0px);
    left: var(--gallery-tutorial-hole-right, 100vw);
    right: 0;
    height: var(--gallery-tutorial-hole-height, 0px);
}
.gallery-tutorial-card {
    position: fixed;
    z-index: 3;
    width: min(292px, calc(100vw - 30px));
    padding: .86rem;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 20px;
    color: var(--gallery-body, #1a1042);
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 58px rgba(22,13,61,.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
    transition: top .18s ease, left .18s ease;
}
.gallery-tutorial-arrow {
    position: absolute;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.78);
    transform: rotate(45deg);
    box-shadow: 0 10px 22px rgba(22,13,61,.10);
}
.gallery-tutorial-card[data-placement="left"] .gallery-tutorial-arrow {
    right: -8px;
    transform: translateY(-50%) rotate(45deg);
    border-left: 0;
    border-bottom: 0;
}
.gallery-tutorial-card[data-placement="right"] .gallery-tutorial-arrow {
    left: -8px;
    transform: translateY(-50%) rotate(45deg);
    border-right: 0;
    border-top: 0;
}
.gallery-tutorial-card[data-placement="top"] .gallery-tutorial-arrow {
    bottom: -8px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 0;
    border-top: 0;
}
.gallery-tutorial-card[data-placement="bottom"] .gallery-tutorial-arrow {
    top: -8px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 0;
    border-bottom: 0;
}
.gallery-tutorial-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .35rem;
}
.gallery-tutorial-topline span {
    color: var(--gallery-button, var(--event-primary, #5f3bf5));
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.gallery-tutorial-topline small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 1.65rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gallery-button, #5f3bf5) 10%, #fff);
    color: var(--gallery-button, #5f3bf5);
    font-size: .68rem;
    font-weight: 950;
}
.gallery-tutorial-card h2 {
    margin: 0 0 .35rem;
    color: var(--gallery-body, #1a1042);
    font-family: var(--gallery-font-heading, inherit);
    font-size: 1.05rem;
    line-height: 1.05;
    letter-spacing: -.045em;
}
.gallery-tutorial-card p {
    margin: 0;
    color: var(--gallery-muted, #6e6686);
    font-size: .82rem;
    line-height: 1.36;
    font-weight: 650;
}
.gallery-tutorial-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: .42rem;
    margin-top: .72rem;
}
.gallery-tutorial-actions button {
    min-height: 2.18rem;
    padding: .54rem .65rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gallery-button, #5f3bf5) 14%, #e9e4f7);
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
.gallery-tutorial-ghost {
    color: var(--gallery-body, #1a1042);
    background: #fff;
}
.gallery-tutorial-main {
    min-width: 5.6rem;
    color: var(--gallery-button-text, #fff);
    background: linear-gradient(135deg, var(--gallery-button, #5f3bf5), color-mix(in srgb, var(--gallery-button, #5f3bf5) 72%, #fff 28%));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--gallery-button, #5f3bf5) 26%, transparent);
}
.gallery-tutorial-lift {
    z-index: 123 !important;
}
.gallery-tutorial-highlight {
    position: relative !important;
    z-index: 124 !important;
    outline: 3px solid rgba(255,255,255,.98) !important;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--gallery-button, #5f3bf5) 38%, transparent), 0 0 0 13px rgba(255,255,255,.32), 0 22px 55px rgba(22,13,61,.36) !important;
    filter: none !important;
    animation: galleryTutorialPulse 1.1s ease-in-out infinite alternate;
}
.floating-gallery-actions.gallery-tutorial-lift .gallery-tutorial-highlight {
    transform: scale(1.08) !important;
}
.gallery-tutorial-help {
    position: fixed !important;
    z-index: 99999 !important;
    left: calc(.95rem + env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(6.8rem + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    place-items: center !important;
    width: 2.95rem !important;
    height: 2.95rem !important;
    min-width: 2.95rem !important;
    min-height: 2.95rem !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--gallery-button, #e8c8c3) 42%, rgba(255,255,255,.72)) !important;
    border-radius: 999px !important;
    color: var(--gallery-button-contrast, #fff) !important;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.62), rgba(255,255,255,0) 36%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--gallery-button, #e8c8c3) 72%, #ffffff 28%),
            color-mix(in srgb, var(--gallery-button, #e8c8c3) 92%, #321c24 8%)
        ) !important;
    box-shadow:
        0 16px 34px rgba(29,18,44,.24),
        inset 0 1px 0 rgba(255,255,255,.52) !important;
    backdrop-filter: blur(12px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
    font: inherit !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}
.gallery-tutorial-help span {
    display: grid !important;
    place-items: center !important;
    transform: translateY(-.03rem);
    width: 100%;
    height: 100%;
    text-shadow: 0 1px 7px rgba(0,0,0,.16);
}
@keyframes galleryTutorialPulse {
    from { transform: scale(1); }
    to { transform: scale(1.035); }
}
@media (max-width: 680px) {
    .gallery-tutorial-card {
        width: min(286px, calc(100vw - 28px));
        border-radius: 20px;
    }
    .gallery-tutorial-actions {
        grid-template-columns: 1fr 1fr auto;
    }
    .gallery-tutorial-actions button {
        padding-left: .45rem;
        padding-right: .45rem;
    }
    .gallery-tutorial-help {
        left: calc(.82rem + env(safe-area-inset-left)) !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(6.5rem + env(safe-area-inset-bottom)) !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
    }
}
@media (max-width: 370px) {
    .gallery-tutorial-card {
        width: min(270px, calc(100vw - 24px));
        padding: .78rem;
    }
    .gallery-tutorial-card h2 { font-size: .98rem; }
    .gallery-tutorial-card p { font-size: .78rem; }
    .gallery-tutorial-actions button { font-size: .72rem; }
}

/* Música ambiental para galería */
.floating-gallery-actions .floating-music-button {
    position: relative;
}
.floating-gallery-actions .floating-music-button::before {
    content: "";
    display: block;
    width: 1.86rem;
    height: 1.86rem;
    background: #fff;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.16));
    transform: translate(.03rem, -.02rem);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.1 18.2a2.95 2.95 0 1 1-1.35-2.48V6.8c0-.53.38-.98.9-1.07l8.55-1.43c.67-.11 1.28.41 1.28 1.09v7.67a2.95 2.95 0 1 1-2.1-2.82V7.35l-6.05 1.01v9.84H9.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.1 18.2a2.95 2.95 0 1 1-1.35-2.48V6.8c0-.53.38-.98.9-1.07l8.55-1.43c.67-.11 1.28.41 1.28 1.09v7.67a2.95 2.95 0 1 1-2.1-2.82V7.35l-6.05 1.01v9.84H9.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.floating-music-button .music-icon,
.floating-gallery-actions .floating-music-button > span:not(.sr-only) {
    display: none !important;
}
.floating-gallery-actions .floating-music-button.is-playing::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.65 5.25h2.65c.54 0 .95.42.95.95v11.6c0 .53-.41.95-.95.95H7.65a.94.94 0 0 1-.95-.95V6.2c0-.53.42-.95.95-.95Zm6.05 0h2.65c.53 0 .95.42.95.95v11.6c0 .53-.42.95-.95.95H13.7a.94.94 0 0 1-.95-.95V6.2c0-.53.42-.95.95-.95Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.65 5.25h2.65c.54 0 .95.42.95.95v11.6c0 .53-.41.95-.95.95H7.65a.94.94 0 0 1-.95-.95V6.2c0-.53.42-.95.95-.95Zm6.05 0h2.65c.53 0 .95.42.95.95v11.6c0 .53-.42.95-.95.95H13.7a.94.94 0 0 1-.95-.95V6.2c0-.53.42-.95.95-.95Z'/%3E%3C/svg%3E");
}
.floating-music-button.is-playing::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 999px;
    opacity: .38;
    animation: galleryMusicPulse 1.7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes galleryMusicPulse {
    0%, 100% { transform: scale(.94); opacity: .18; }
    50% { transform: scale(1.06); opacity: .42; }
}
.gallery-music-toast {
    position: fixed;
    right: clamp(1rem, 4vw, 1.5rem);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6.2rem);
    z-index: 90;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .7rem;
    align-items: center;
    max-width: min(330px, calc(100vw - 2rem));
    padding: .82rem .95rem;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--gallery-button-color, #b69a3a), transparent 62%);
    background: rgba(255,255,255,.88);
    color: var(--gallery-text-color, #1b1438);
    box-shadow: 0 18px 45px rgba(20,15,45,.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.gallery-music-toast[hidden] { display: none; }
.gallery-music-toast > span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    background: var(--gallery-button-color, #b69a3a);
    color: var(--gallery-button-text-color, #fff);
    font-weight: 900;
}
.gallery-music-toast strong {
    font-size: .92rem;
    line-height: 1.15;
}
.gallery-music-toast small {
    color: var(--gallery-muted-color, rgba(27,20,56,.62));
    line-height: 1.25;
}
@media (max-width: 700px) {
    .gallery-music-toast {
        right: 1rem;
        left: 1rem;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5.8rem);
    }
}


/* Corrección definitiva icono música: carácter visible, sin máscara SVG */
.floating-gallery-actions .floating-music-button::before {
    content: "♫" !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    color: #fff !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)) !important;
    transform: none !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 2.05rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}
.floating-gallery-actions .floating-music-button.is-playing::before {
    content: "Ⅱ" !important;
    font-family: Inter, "DM Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 950 !important;
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: transparent !important;
}


/* Tutorial flotante Safari/iPhone fix final */
.gallery-tutorial-help {
    position: fixed !important;
    z-index: 2147483000 !important;
    left: calc(.95rem + env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(6.65rem + env(safe-area-inset-bottom)) !important;
    display: grid !important;
    place-items: center !important;
    width: 2.85rem !important;
    height: 2.85rem !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    color: var(--gallery-button-text, #fff) !important;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.68), rgba(255,255,255,0) 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--gallery-button, #e8c8c3) 68%, #fff 32%), var(--gallery-button, #e8c8c3)) !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    box-shadow: 0 16px 34px rgba(29,18,44,.25), inset 0 1px 0 rgba(255,255,255,.52) !important;
}
.gallery-tutorial-help span {
    pointer-events: none !important;
}
.gallery-tutorial-help:active {
    transform: translateZ(0) scale(.94) !important;
}

/* El botón de ayuda pertenece únicamente a la vista principal de la galería. */
body.camera-drawer-open .gallery-tutorial-help,
body.lightbox-open .gallery-tutorial-help {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   Ayuda contextual de música · Safari y Chrome mobile
   ========================================================= */
.gallery-music-hint {
    position: absolute;
    top: .12rem;
    right: calc(100% + .85rem);
    z-index: 3;
    width: max-content;
    max-width: min(230px, calc(100vw - 6rem));
    padding: .72rem .86rem;
    border: 1px solid rgba(255,255,255,.76);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    color: #211936;
    box-shadow: 0 16px 38px rgba(18,12,38,.22);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateX(8px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
    text-align: left;
}
.gallery-music-hint[hidden] { display: none !important; }
.gallery-music-hint.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.gallery-music-hint::after {
    content: "";
    position: absolute;
    top: 1.08rem;
    right: -.43rem;
    width: .78rem;
    height: .78rem;
    border-top: 1px solid rgba(255,255,255,.76);
    border-right: 1px solid rgba(255,255,255,.76);
    background: rgba(255,255,255,.94);
    transform: rotate(45deg);
}
.gallery-music-hint strong,
.gallery-music-hint span {
    display: block !important;
    color: inherit !important;
    line-height: 1.2 !important;
}
.gallery-music-hint strong {
    margin-bottom: .18rem;
    font-size: .86rem;
    font-weight: 800;
}
.gallery-music-hint span {
    font-size: .78rem;
    font-weight: 500;
    color: rgba(33,25,54,.72) !important;
}
@media (max-width: 760px) {
    .gallery-music-hint {
        right: calc(100% + .72rem);
        max-width: min(210px, calc(100vw - 5.7rem));
        padding: .66rem .78rem;
        border-radius: 15px;
    }
}
@media (max-width: 370px) {
    .gallery-music-hint {
        max-width: 190px;
        padding: .62rem .72rem;
    }
    .gallery-music-hint strong { font-size: .82rem; }
    .gallery-music-hint span { font-size: .74rem; }
}