/* ============================================================
   STYLES.CSS - Mi Lista de Novios
   Archivo único optimizado para producción
   Arquitectura CSS basada en principios SOLID
   ============================================================ */

/* ============================================================
   00 - FONTS
   ============================================================ */
/* Philosopher Regular */
@font-face {
    font-display: swap;
    font-family: "Philosopher";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/philosopher/philosopher-regular-webfont.woff2") format("woff2"),
         url("../fonts/philosopher/philosopher-regular-webfont.woff") format("woff");
}


/* ============================================================
   PAGE - ORGANIZADOR DE MESAS
   ============================================================ */
body.table-organizer-page {
    --table-organizer-border: rgba(86, 179, 194, 0.3);
}

.table-organizer-page .profile-hero__avatar {
    background:
        linear-gradient(135deg, rgba(86, 179, 194, 0.2), rgba(126, 220, 167, 0.28)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 249, 250, 0.92));
}

.table-organizer {
    display: grid;
    gap: var(--space-lg);
}

.table-organizer__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.table-organizer__stat {
    border: 1px solid var(--table-organizer-border);
    background:
        radial-gradient(circle at top right, rgba(126, 220, 167, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 252, 253, 0.98));
    box-shadow: 0 14px 24px rgba(0, 83, 89, 0.08);
    padding: var(--space-md);
    display: grid;
    gap: 0.35rem;
}

.table-organizer__stat-label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #59B7C0;
}

.table-organizer__stat-value {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1;
    color: #005359;
}

.table-organizer__stat-note {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: rgba(0, 83, 89, 0.68);
}

.table-organizer__layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.table-organizer__sidebar,
.table-organizer__main {
    display: grid;
    gap: var(--space-lg);
}

.table-organizer__panel,
.table-organizer__canvas-card,
.table-organizer__guest-pool {
    border-color: var(--table-organizer-border);
}

.table-organizer__source-list {
    display: grid;
    gap: 0.85rem;
}

.table-organizer__source-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid var(--table-organizer-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
}

.table-organizer__source-icon,
.table-organizer__tool-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.16), rgba(126, 220, 167, 0.28));
    color: #005359;
    font-size: 1.1rem;
}

.table-organizer__source-copy {
    display: grid;
    gap: 0.2rem;
}

.table-organizer__source-copy strong,
.table-organizer__tool strong,
.table-organizer__mock-table strong,
.table-organizer__canvas-note strong,
.table-organizer__guest-name {
    color: #005359;
}

.table-organizer__source-copy p,
.table-organizer__tool p,
.table-organizer__canvas-note span {
    margin: 0;
    color: rgba(0, 83, 89, 0.68);
    line-height: 1.5;
    font-size: var(--font-size-sm);
}

.table-organizer__tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.table-organizer__tool {
    border: 1px solid var(--table-organizer-border);
    background:
        radial-gradient(circle at top right, rgba(86, 179, 194, 0.16), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    min-height: 12.4rem;
    padding: 0.95rem;
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.table-organizer__canvas-head,
.table-organizer__guest-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.table-organizer__canvas-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.table-organizer__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--table-organizer-border);
    background: rgba(247, 252, 253, 0.9);
}

.table-organizer__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(0, 83, 89, 0.78);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.table-organizer__legend-dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 83, 89, 0.22);
}

.table-organizer__legend-dot--table {
    background: linear-gradient(135deg, #F7EFD3 0%, #FFF9E6 100%);
}

.table-organizer__legend-dot--hall {
    background: #EEF7F8;
}

.table-organizer__legend-dot--accent {
    background: #005359;
    border-color: #005359;
}

.table-organizer__legend-dot--guest {
    background: #7EDCA7;
    border-color: rgba(126, 220, 167, 0.4);
}

.table-organizer__canvas-shell {
    border: 1px solid var(--table-organizer-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 249, 250, 0.92));
    padding: var(--space-md);
    overflow: auto;
}

.table-organizer__canvas {
    min-width: 760px;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(86, 179, 194, 0.22);
    background:
        linear-gradient(rgba(86, 179, 194, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 179, 194, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.98));
    background-size: 28px 28px, 28px 28px, cover;
}

.table-organizer__canvas::before {
    content: "Base del salon";
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgba(86, 179, 194, 0.28);
    background: rgba(255, 255, 255, 0.92);
    color: #005359;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__stage,
.table-organizer__lounge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 83, 89, 0.18);
    background: rgba(255, 255, 255, 0.88);
    color: #005359;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__stage {
    top: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    min-width: 11rem;
    background: #005359;
    border-color: #005359;
    color: #FFFFFF;
}

.table-organizer__lounge--left {
    left: 1.5rem;
    bottom: 1.5rem;
}

.table-organizer__lounge--right {
    right: 1.5rem;
    bottom: 1.5rem;
}

.table-organizer__path {
    position: absolute;
    border-color: rgba(89, 183, 192, 0.45);
    border-style: dashed;
}

.table-organizer__path--horizontal {
    left: 12%;
    right: 12%;
    top: 9.5rem;
    border-top-width: 2px;
}

.table-organizer__path--vertical {
    top: 7.5rem;
    bottom: 4.8rem;
    left: 50%;
    border-left-width: 2px;
}

.table-organizer__mock-table {
    position: absolute;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.4rem;
    border: 2px solid rgba(0, 83, 89, 0.55);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(180deg, #FFF7DB 0%, #F8F0D1 100%);
    box-shadow: 0 18px 30px rgba(0, 83, 89, 0.12);
    text-align: center;
}

.table-organizer__mock-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.62);
}

.table-organizer__mock-table--rect {
    width: 13rem;
    height: 19rem;
}

.table-organizer__mock-table--round {
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
}

.table-organizer__mock-table--principal {
    top: 10rem;
    left: 50%;
    transform: translateX(-50%);
}

.table-organizer__mock-table--left {
    top: 13rem;
    left: 8rem;
}

.table-organizer__mock-table--right {
    top: 13rem;
    right: 8rem;
}

.table-organizer__canvas-note {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    width: min(19rem, calc(100% - 3rem));
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(86, 179, 194, 0.24);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 24px rgba(0, 83, 89, 0.08);
}

.table-organizer__guest-search {
    min-width: min(280px, 100%);
}

.table-organizer__guest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.table-organizer__guest-card {
    border: 1px solid var(--table-organizer-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    padding: 0.95rem;
    display: grid;
    gap: 0.7rem;
}

.table-organizer__guest-head,
.table-organizer__guest-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.table-organizer__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.58rem;
    border: 1px solid rgba(86, 179, 194, 0.26);
    background: rgba(255, 255, 255, 0.96);
    color: rgba(0, 83, 89, 0.74);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__badge--accent {
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.18), rgba(126, 220, 167, 0.28));
    color: #005359;
}

.table-organizer__badge--soft {
    background: rgba(126, 220, 167, 0.12);
    border-color: rgba(126, 220, 167, 0.24);
}

@media screen and (max-width: 1199px) {
    .table-organizer__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-organizer__layout {
        grid-template-columns: 1fr;
    }

    .table-organizer__sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .table-organizer__stats,
    .table-organizer__sidebar,
    .table-organizer__tool-grid,
    .table-organizer__guest-grid {
        grid-template-columns: 1fr;
    }

    .table-organizer__canvas-head,
    .table-organizer__guest-toolbar {
        align-items: stretch;
    }

    .table-organizer__canvas-actions {
        width: 100%;
    }

    .table-organizer__canvas-actions .profile__button {
        flex: 1 1 0;
    }

    .table-organizer__canvas-shell {
        padding: 0.75rem;
    }

    .table-organizer__canvas {
        min-width: 540px;
        min-height: 520px;
    }

    .table-organizer__stage {
        min-width: 9.5rem;
    }

    .table-organizer__mock-table--rect {
        width: 11rem;
        height: 16rem;
    }

    .table-organizer__mock-table--round {
        width: 9rem;
        height: 9rem;
    }

    .table-organizer__mock-table--left {
        left: 4.5rem;
    }

    .table-organizer__mock-table--right {
        right: 4.5rem;
    }
}

@media screen and (max-width: 575px) {
    .table-organizer__stats {
        grid-template-columns: 1fr;
    }

    .table-organizer__guest-search {
        min-width: 100%;
    }

    .table-organizer__canvas {
        min-width: 460px;
        min-height: 470px;
    }

    .table-organizer__mock-table--principal {
        top: 9.5rem;
    }

    .table-organizer__mock-table--left,
    .table-organizer__mock-table--right {
        top: 12.5rem;
    }

    .table-organizer__lounge--left,
    .table-organizer__lounge--right {
        bottom: 1rem;
    }
}

/* Philosopher Italic */
@font-face {
    font-display: swap;
    font-family: "Philosopher";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/philosopher/philosopher-italic-webfont.woff2") format("woff2"),
         url("../fonts/philosopher/philosopher-italic-webfont.woff") format("woff");
}

/* Philosopher Bold */
@font-face {
    font-display: swap;
    font-family: "Philosopher";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/philosopher/philosopher-bold-webfont.woff2") format("woff2"),
         url("../fonts/philosopher/philosopher-bold-webfont.woff") format("woff");
}

/* Philosopher Bold Italic */
@font-face {
    font-display: swap;
    font-family: "Philosopher";
    font-style: italic;
    font-weight: 700;
    src: url("../fonts/philosopher/philosopher-bolditalic-webfont.woff2") format("woff2"),
         url("../fonts/philosopher/philosopher-bolditalic-webfont.woff") format("woff");
}

/* ============================================================
   01 - DESIGN TOKENS
   ============================================================ */
:root {
    /* HUE TOKENS */
    --hue-primary: 188deg;
    --hue-secondary: 146deg;
    --hue-neutral: 210deg;
    --hue-success: 150deg;
    --hue-info: 200deg;
    --hue-alert: 35deg;
    --hue-danger: 355deg;

    /* COLOR PRIMITIVES */
    --color-primary-500: hsla(var(--hue-primary), 47%, 55%, 1);
    --color-primary-25: hsla(var(--hue-primary), 66%, 58%, 0.25);

    --color-secondary-500: hsla(var(--hue-secondary), 57%, 68%, 1);

    /* NEUTRAL SCALE */
    --color-neutral-50: hsla(var(--hue-neutral), 20%, 98%, 1);
    --color-neutral-100: hsla(var(--hue-neutral), 15%, 95%, 1);
    --color-neutral-200: hsla(var(--hue-neutral), 10%, 89%, 1);
    --color-neutral-300: hsla(var(--hue-neutral), 8%, 80%, 1);
    --color-neutral-400: hsla(var(--hue-neutral), 6%, 65%, 1);
    --color-neutral-500: hsla(var(--hue-neutral), 5%, 50%, 1);
    --color-neutral-600: hsla(var(--hue-neutral), 6%, 35%, 1);
    --color-neutral-700: hsla(var(--hue-neutral), 8%, 25%, 1);
    --color-neutral-800: hsla(var(--hue-neutral), 10%, 15%, 1);
    --color-neutral-900: hsla(var(--hue-neutral), 15%, 8%, 1);
    --color-neutral-950: hsla(var(--hue-neutral), 20%, 4%, 1);

    /* SUCCESS SCALE */
    --color-success-600: hsla(var(--hue-success), 100%, 35%, 1);
    --color-success-500: hsla(var(--hue-success), 85%, 45%, 1);
    --color-success-300: hsla(var(--hue-success), 60%, 65%, 1);
    --color-success-200: hsla(var(--hue-success), 40%, 75%, 1);

    /* INFO SCALE */
    --color-info-600: hsla(var(--hue-info), 100%, 45%, 1);
    --color-info-500: hsla(var(--hue-info), 90%, 55%, 1);
    --color-info-300: hsla(var(--hue-info), 70%, 70%, 1);
    --color-info-200: hsla(var(--hue-info), 50%, 80%, 1);

    /* ALERT SCALE */
    --color-alert-600: hsla(var(--hue-alert), 52%, 44%, 1);
    --color-alert-500: hsla(var(--hue-alert), 75%, 50%, 1);
    --color-alert-300: hsla(var(--hue-alert), 96%, 80%, 1);
    --color-alert-200: hsla(var(--hue-alert), 93%, 88%, 1);

    /* DANGER SCALE */
    --color-danger-600: hsla(var(--hue-danger), 80%, 55%, 1);
    --color-danger-500: hsla(var(--hue-danger), 75%, 65%, 1);
    --color-danger-300: hsla(var(--hue-danger), 65%, 75%, 1);
    --color-danger-200: hsla(var(--hue-danger), 55%, 85%, 1);

    /* SPACING SCALE */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* TYPOGRAPHY SCALE */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 3rem;

    --font-weight-regular: 400;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* BORDER RADIUS SCALE */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* SHADOW SCALE */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);

    /* TRANSITION SCALE */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Z-INDEX SCALE */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    interpolate-size: allow-keywords;
}

/* ============================================================
   02 - RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    line-height: inherit;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

p, span, strong, em, small {
    font-size: inherit;
    line-height: inherit;
}

ul, ol, li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    appearance: none;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: inherit;
}

button:disabled {
    cursor: not-allowed;
}

input, textarea, select, button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    appearance: none;
    line-height: inherit;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: 0;
    border-top: 1px solid;
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

legend {
    padding: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

[hidden] {
    display: none !important;
}

/* ============================================================
   03 - BASE
   ============================================================ */
body {
    font-family: "Philosopher", Georgia, "Times New Roman", serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-50);
}

::selection {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-50);
}

::-moz-selection {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-50);
}

:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-400);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-500);
}

h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

p {
    line-height: var(--line-height-relaxed);
}

strong, b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--font-size-sm);
}

a {
    transition: color var(--transition-fast);
}

a:hover {
    opacity: 1;
}

code, pre {
    font-family: "Courier New", Courier, monospace;
    font-size: var(--font-size-sm);
}

pre {
    overflow-x: auto;
    padding: var(--space-md);
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-md);
}

/* ============================================================
   04 - LAYOUT
   ============================================================ */
.container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
}

h2 {
    padding-left: 1.75rem;
    position: relative;
    color: #005359;
}

h2::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #E66491;
    /* transform: translateX(50%) translateY(-50%); */
    transform: translateY(-50%) rotate(45deg);
    top: calc(50% - 2px);
    left: 0px;
    margin: 0px;
}

@media (max-width: 1344px) {
    .container {
        width: calc(100% - 4rem);
        max-width: calc(1140px - 4rem);
    }
}

@media (max-width: 1024px) {
    .container {
        width: calc(100% - 4rem);
        max-width: calc(1024px - 4rem);
    }
}

@media (max-width: 767px) {
    .container {
        width: calc(100% - 2rem);
        max-width: calc(767px - 2rem);
    }
}

@media (max-width: 360px) {
    .container {
        width: calc(100% - 2rem);
        max-width: calc(360px - 2rem);
    }
}

.container--narrow {
    max-width: 768px;
}

.container--wide {
    max-width: 1400px;
}

.container--fluid {
    max-width: 100%;
}

.section {
    padding-block: var(--space-2xl);
}

.section--sm {
    padding-block: var(--space-2xl);
}

.section--lg {
    padding-block: 5rem;
}

.grid {
    display: grid;
    gap: var(--space-md);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid--2, .grid--3, .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid--3, .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.flex {
    display: flex;
}

.flex--center {
    justify-content: center;
    align-items: center;
}

.flex--between {
    justify-content: space-between;
    align-items: center;
}

.flex--column {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

.stack > * + * {
    margin-top: var(--space-md);
}

.stack--sm > * + * {
    margin-top: var(--space-sm);
}

.stack--lg > * + * {
    margin-top: var(--space-lg);
}

.stack--xl > * + * {
    margin-top: var(--space-xl);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.cluster--sm {
    gap: var(--space-sm);
}

.cluster--lg {
    gap: var(--space-lg);
}

/* ============================================================
   05 - UTILITIES
   ============================================================ */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.mx-auto { margin-inline: auto; }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-bold { font-weight: var(--font-weight-bold); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.text-primary { color: var(--color-primary-500); }
.text-secondary { color: var(--color-secondary-500); }
.text-success { color: var(--color-success-500); }
.text-info { color: var(--color-info-500); }
.text-alert { color: var(--color-alert-500); }
.text-danger { color: var(--color-danger-500); }

.bg-primary { background-color: var(--color-primary-500); }
.bg-secondary { background-color: var(--color-secondary-500); }
.bg-neutral-50 { background-color: var(--color-neutral-50); }
.bg-neutral-100 { background-color: var(--color-neutral-100); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
    .visible-mobile { display: none !important; }
}

/* ============================================================
   06 - COMPONENTS
   ============================================================ */
/* ===== BUTTONS ===== */
.btn {
    --hover-distance: 10px;
    border: none;
    color: white;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 2;
    --offset: 30px;
    font-size: 24px;
    padding: 0.75rem 2.5rem;
    padding-bottom: calc(0.75rem + 10px);
    padding-right: calc(2.5rem + 10px);
    filter: drop-shadow(0 20px 10px hsla(188, 47%, 20%, .2));
}

.btn:after {
    clip-path: polygon(
        calc(var(--offset) + 2px) 2px,
        calc(100% - var(--offset) - 11px) 2px,
        calc(100% - 13px) calc(50% - 5px),
        calc(100% - var(--offset) - 11px) calc(100% - 12px),
        calc(var(--offset) + 2px) calc(100% - 12px),
        3px calc(50% - 5px)
    );
    z-index: -1;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: hsla(0, 0%, 100%, 0);
    transform: translate(0px, 0px);
    transition: all .2s ease-in-out;
}

.btn.btn-secondary {
    color: #59B7C0;;
}

.btn.btn-secondary:after {
    background-color: #fff;
}

.btn:before {
    clip-path: polygon(
        calc(var(--offset) + 1px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 10px) calc(50% - 5px),
        calc(100% - var(--offset) - 10px) calc(100% - 10px),
        calc(var(--offset) + 1px) calc(100% - 10px),
        0 calc(50% - 5px)
    );
    z-index: -2;
    content: '';
    position: absolute;
    inset: 0px;
    background: linear-gradient(-45deg, #56B3C2 0%, #7EDCA7 50%, #56B3C2 100%);
    background-size: 200%;
    transform: translate(0px, 0px);
    transition: all .3s ease-in-out;
    filter: drop-shadow(0 0 30px black);
    animation: alternate btn-glow 3s ease-in-out infinite;
}

@keyframes btn-glow {
    0% {
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.02);
    }
    100% {
        background-position: 0% 50%;
        transform: scale(1);
    }
}
.btn:hover {
    color: #59B7C0;
    transform: scale(1.025);
}

.btn:hover:after {
    background-color: hsla(0, 0%, 100%, 1);
}

.btn:hover:before {
    clip-path: polygon(
        calc(var(--offset) + 1px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 0px) calc(50% + 3px),
        calc(100% - var(--offset) - 0px) calc(100% - 0px),
        calc(var(--offset) + 13px) calc(100% - 0px),
        0 calc(50% - 5px)
    );
}


/* Base button styles */
/* 
.btn-16,
.btn-20,
.btn-24 {
    --hover-distance: 10px;
    border: none;
    color: black;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    background-color: white;
}


.btn-16 {
    --offset: 20px;
    font-size: 16px;
    padding: 0.5rem 2rem;
    padding-bottom: calc(0.5rem + 10px);
    padding-right: calc(2rem + 10px);
}

.btn-16:after {
    clip-path: polygon(
        calc(var(--offset) + 2px) 2px,
        calc(100% - var(--offset) - 11px) 2px,
        calc(100% - 13px) calc(50% - 5px),
        calc(100% - var(--offset) - 11px) calc(100% - 12px),
        calc(var(--offset) + 2px) calc(100% - 12px),
        3px calc(50% - 5px)
    );
    z-index: -1;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: YELLOW;
    opacity: 0.7;
    transform: translate(0px, 0px);
}

.btn-16:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 10px) calc(50% - 5px),
        calc(100% - var(--offset) - 10px) calc(100% - 10px),
        calc(var(--offset) + 1px) calc(100% - 10px),
        0 calc(50% - 5px)
    );
    z-index: -2;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: rgb(34, 51, 238);
    transform: translate(0px, 0px);
    transition: all .3s ease-in-out;
}

.btn-16:hover:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 0px) calc(50% + 5px),
        calc(100% - var(--offset) - 0px) calc(100% - 0px),
        calc(var(--offset) + 11px) calc(100% - 0px),
        0 calc(50% - 5px)
    );
}


.btn-20 {
    --offset: 25px;
    font-size: 20px;
    padding: 0.625rem 2.25rem;
    padding-bottom: calc(0.625rem + 10px);
    padding-right: calc(2.25rem + 10px);
}

.btn-20:after {
    clip-path: polygon(
        calc(var(--offset) + 2px) 2px,
        calc(100% - var(--offset) - 11px) 2px,
        calc(100% - 13px) calc(50% - 5px),
        calc(100% - var(--offset) - 11px) calc(100% - 12px),
        calc(var(--offset) + 2px) calc(100% - 12px),
        3px calc(50% - 5px)
    );
    z-index: -1;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: YELLOW;
    opacity: 0.7;
    transform: translate(0px, 0px);
}

.btn-20:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 10px) calc(50% - 5px),
        calc(100% - var(--offset) - 10px) calc(100% - 10px),
        calc(var(--offset) + 1px) calc(100% - 10px),
        0 calc(50% - 5px)
    );
    z-index: -2;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: rgb(34, 51, 238);
    transform: translate(0px, 0px);
    transition: all .3s ease-in-out;
}

.btn-20:hover:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 0px) calc(50% + 5px),
        calc(100% - var(--offset) - 0px) calc(100% - 0px),
        calc(var(--offset) + 11px) calc(100% - 0px),
        0 calc(50% - 5px)
    );
}


.btn-24 {
    --offset: 30px;
    font-size: 24px;
    padding: 0.75rem 2.5rem;
    padding-bottom: calc(0.75rem + 10px);
    padding-right: calc(2.5rem + 10px);
}

.btn-24:after {
    clip-path: polygon(
        calc(var(--offset) + 2px) 2px,
        calc(100% - var(--offset) - 11px) 2px,
        calc(100% - 13px) calc(50% - 5px),
        calc(100% - var(--offset) - 11px) calc(100% - 12px),
        calc(var(--offset) + 2px) calc(100% - 12px),
        3px calc(50% - 5px)
    );
    z-index: -1;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: YELLOW;
    opacity: 0.7;
    transform: translate(0px, 0px);
}

.btn-24:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 10px) calc(50% - 5px),
        calc(100% - var(--offset) - 10px) calc(100% - 10px),
        calc(var(--offset) + 1px) calc(100% - 10px),
        0 calc(50% - 5px)
    );
    z-index: -2;
    content: '';
    position: absolute;
    inset: 0px;
    background-color: rgb(34, 51, 238);
    transform: translate(0px, 0px);
    transition: all .3s ease-in-out;
}

.btn-24:hover:before {
    clip-path: polygon(
        calc(var(--offset) - 0px) 0,
        calc(100% - var(--offset) - 10px) 0,
        calc(100% - 0px) calc(50% + 3px),
        calc(100% - var(--offset) - 0px) calc(100% - 0px),
        calc(var(--offset) + 11px) calc(100% - 0px),
        0 calc(50% - 5px)
    );
} */


/* ===== HEADER ===== */
.header {
    background-color: var(--color-neutral-50);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: 100%;
    max-width: 1140px;
    left: 50%;
    transform: translateX(-50%);
    top: 16px;
    height: 85px;
    z-index: 99999;
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
    background: hsla(0, 0%, 100%, 0.75);
    backdrop-filter: blur(10px);
    border-left: 1px solid hsla(0, 0%, 100%, 0.76);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.76);
    border-right: 1px solid hsla(0, 0%, 100%, 0.76);
    display: flex;
    align-items: center;
}

.header_landing {
    background-color: var(--color-neutral-50);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
}

.header_landing .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: var(--space-md);
}

.header_landing .container img {
    width: 350px;
}

body.is-scroll-locked .header {
    transform: translateX(calc(-50% - var(--scrollbar-comp, 0px) / 2));
}

.header:after {
    position: absolute;
    content: '';
    top: 0px;
    width: 100%;
    height: 5px;
    background-color: red;
    transform: translateY(-100%);
    background: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-md);
    padding-inline: var(--space-md);
}

.header .container img {
    width: 200px;
}

.header__right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    justify-content: flex-end;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header .container nav.header__nav > ul {
    display: flex;
    gap: var(--space-lg);

}

.header .container nav.header__nav ul li a svg{
    height: 16px;
    transition: all .3s ease-in-out;
}

.header .container nav.header__nav >  ul > li {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    position: relative;
}

.header .container nav.header__nav >  ul > li a {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    color: #005359;
    padding-block: .5rem;
    width: max-content;
    position: relative;
}

.header .container nav.header__nav >  ul > li a.header__nav-link--danger {
    color: #E66491;
}

.header .container nav.header__nav >  ul > li a.header__nav-link--active {
    color: #56B3C2;
}

.header .container nav.header__nav >  ul > li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-normal);
}

.header .container nav.header__nav >  ul > li a.header__nav-link--active::after {
    transform: scaleX(1);
}

.header .container nav.header__nav ul li .header__subnav-arrow svg {
    height: 16px;
    transition: all .3s ease-in-out;
}

.header__toggle {
    display: none;
}

.header .container nav.header__nav ul.header__subnav {
    display: block;
    position: absolute;
    top: calc(50%);
    pointer-events: none;
    opacity: 0;
    left: 0;
    z-index: var(--z-dropdown);
    background: hsla(0, 0%, 100%, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid hsla(0, 0%, 100%, 0.76);
    box-shadow: var(--shadow-sm);
    transition: all .3s ease-in-out;
}

.header .container nav.header__nav ul.header__subnav li {
    width: 100%;
}

.header .container nav.header__nav ul.header__subnav li a {
    /* background-color: red; */
    width: 100%;
    min-width: max-content;
    padding: 1rem 1rem;
    transition: all .3s ease-in-out;
}

.header .container nav.header__nav ul.header__subnav li a.header__subnav-link--active {
    background-color: hsla(185, 45%, 55%, 0.22);
    color: #005359;
}

.header .container nav.header__nav ul.header__subnav li a:hover {
    background-color: hsla(339, 72%, 65%, 0.7);
    color: #fff;
}

.header .container nav.header__nav > ul > li a:hover {
    color: #E66491;
}

.header .container nav.header__nav > ul > li:hover .header__subnav {
    top: calc(100%);
    pointer-events: all;
    opacity: 1;
}

.header .container nav.header__nav > ul > li:hover .header__subnav-arrow svg {
    transform: rotate(180deg);
}

.header .container nav.header__nav > ul > li:hover .header__subnav-arrow svg    {
    fill: #E66491;
}

.header .container nav.header__nav > ul > li:hover > ul {
    display: block;
}


@media (max-width: 1344px) {
    .header .container img {
        width: 200px;
    }
}

@media (max-width: 1200px) {
    .header {
        max-width: calc(100% - 4rem);
    }
}

@media (max-width: 1100px){
    .header .container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
    }

    .header .container nav.header__nav {
        position: fixed;
        left: -2rem;
        min-height: calc(100vh - 120px);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        right: 0px;
        width: 100vw;
        bottom: calc(-100vh + 84px + 16px); /* 85px es la altura del header, 16px es la distancia top del header*/
        background-color: hsla(0, 0%, 100%, 1);
        backdrop-filter: blur(10px);
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: all .3s ease-in-out;
    }

    .header .container nav.header__nav.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
        
    }

    .header__toggle {
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        position: relative;
    }

    .header__toggle:after,
    .header__toggle:before {
        position: absolute;
        content: '';
        height: 2px;
        width: 100%;
        background-color: #59B7C0;
        transition: all .3s ease-in-out;
    }

    .header__toggle:after {
        top: calc(((100%/6) * 2) - 1px);
    }

    .header__toggle:before {
        top: calc(((100%/6) * 4) - 1px);
        width: 70%;
        right: 0px;
    }

    /* .header__toggle.active {    
        background-color: #56d8ff58;
    } */

    .header__toggle.active:after, 
    .header__toggle.active:before {
        top: calc(((100%/6) * 3) - 1px);
        background-color: #E64AA0;
    }

    .header__toggle.active:after{
        transform: rotate(45deg);
    }

    .header__toggle.active:before{
        transform: rotate(-45deg);
        width: 100%;
    }


    .header .container nav.header__nav ul {
        flex-direction: column;
        gap: 0px;
    }

    .header .container nav.header__nav > ul > li {
        border-bottom: 1px solid hsla(184, 100%, 17%, 0.2);
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav {
        width: 100%;
        display: grid;
        grid-template-columns: auto 73px;
        grid-gap: 0px;
        align-items: center;
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav .header__subnav--arrow {
        transform: rotate(0deg);
    }
    .header .container nav.header__nav > ul > li:hover .header__subnav-arrow svg {
        transform: rotate(0deg);
        color: #005359;
        stroke: currentColor;
        fill: none;
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav.active .header__subnav-arrow {
        background-color: #E66491;
        color: #FFFFFF;
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav.active .header__subnav-arrow svg {
        transform: rotate(180deg);
        color: #FFFFFF;
        stroke: currentColor;
        fill: none;
    }

    .header .container nav.header__nav ul li.header__nav-has-subnav .header__subnav {
        grid-column: auto / span 2;
        position: static;
        box-shadow: none;
        border: none;
        /* border-top: 1px solid hsla(184, 100%, 17%, 0.2); */
        background: none;
        backdrop-filter: none;
        opacity: 1;
        pointer-events: all;
        transition: all .3 ease-in-out;
        background: #FFF8FA;
        box-shadow: inset 0 0 15px hsla(339, 72%, 65%, 0.4);
        height: 0px;
        overflow: hidden;
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav.active .header__subnav {
        height: auto;
    }

    .header .container nav.header__nav ul li .header__subnav-arrow {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 73px;
        aspect-ratio: 1 / 1;
        width: 73px;
        border-left: 1px solid hsla(184, 100%, 17%, 0.2);
        background: #FFFFFF;
        color: #005359;
    }

    .header .container nav.header__nav ul li .header__subnav-arrow svg{
        height: 24px;
        width: 24px;
        display: block;
        color: inherit;
        stroke: currentColor;
        fill: none;
    }

    .header .container nav.header__nav ul li a {
        padding: 1.5rem 2rem;
        width: 100%;
    }

    .header .container nav.header__nav ul li .header__subnav li a {
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 1024px) {
    .header {
        height: 70px;
        max-width: calc(100% - 4rem);
    }

    .header .container {
        margin: 0px;
    }

    .header .container img {
        width: 250px;
    }

    .header .container nav.header__nav {
        left: -2rem;
        min-height: calc(100vh - 100px);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        right: 0px;
        width: 100vw;
        bottom: calc(-100vh + 70px + 16px); /* 85px es la altura del header, 16px es la distancia top del header*/
        background-color: hsla(0, 0%, 100%, 1);
        backdrop-filter: blur(10px);
    }
}

@media (max-width: 767px) {
    .header {
        display: flex;
        align-items: center;
        height: 60px;
        max-width: calc(100% - 2rem);
    }

    .header .container {
        margin: 0px;
    }

    .header .container img {
        width: 200px;
    }

    .header .container nav.header__nav {
        left: -1rem;
        min-height: calc(100vh - 90px);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        right: 0px;
        width: 100vw;
        bottom: calc(-100vh + 60px + 16px); /* 85px es la altura del header, 16px es la distancia top del header*/
        background-color: hsla(0, 0%, 100%, 1);
        backdrop-filter: blur(10px);
    }

    .header .container nav.header__nav ul li a {
        padding: 1rem 1rem;
        width: 100%;
    }

    .header .container nav.header__nav > ul > li.header__nav-has-subnav {
        grid-template-columns: auto 56px;
    }

    .header .container nav.header__nav ul li .header__subnav-arrow {
        height: 56px;
        width: 56px;
        border-left: 1px solid hsla(184, 100%, 17%, 0.2);
    }

    .header .container nav.header__nav ul li .header__subnav li a {
        padding: 1rem 1rem;
    }
    
}

@media (max-width: 360px) {
    .header .container img {
        width: 180px;
    }
}




/* ===== MAIN ===== */
.main {
    min-height: 100dvh;
}

/* ===== SECTIONS ===== */
/*
   Section: Banner Inicio
   Estilos específicos de la sección Banner de Inicio
*/
.banner-inicio {
    background: 
        linear-gradient(180deg, 
            hsla(187, 100%, 99%, 0.8) 0%,
            hsla(185, 85%, 97%, 0.85) 85%,
            hsla(185, 84%, 94%, 1) 100%
        ),
        url('../img/banner-fondo.webp');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #E66491;
    position: relative;
    padding-top: 150px;
}

/* Solo en landing.html - rombo animado al final del banner */
body.page-landing .banner-inicio:before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 48.45%;
    transform: translateX(-50%) translateY(50%) rotate(45deg);
    transform-origin: center center;
    width: 50px;
    height: 50px;
    border: 1px solid #E66491;
    box-sizing: border-box;
    z-index: 1;
    animation: in-out 5s ease-in-out infinite;  /* ← Aquí se aplica la animación */
}

body.page-landing .banner-inicio:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%) rotate(45deg);
    transform-origin: center center;
    width: 20px;
    height: 20px;
    background-color: #E66491;
    z-index: 2;
}


/* === Lista vacía === */
.gift-list__empty {
    padding: 3rem 1.5rem;
}

.gift-list__empty-card {
    border: 1.5px dashed #d4a0b5;
    border-radius: 20px;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    background: none;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.gift-list__empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f7dce8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    color: #c2547a;
}

.gift-list__empty-content h4 {
    font-size: 1.06rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--color-text, #1a1a1a);
}

.gift-list__empty-content p {
    font-size: 0.9rem;
    color: #888;
    margin: 0;
}

.gift-list__empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.gift-list__empty-tip {
    background: #fce8f0;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 0.82rem;
    color: #a8446a;
    margin-top: 0.25rem;
}

.gift-list__empty-tip span {
    font-weight: 600;
    color: #8b3258;
}



.banner-inicio .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.banner-inicio .container .banner-inicio__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
}

.banner-inicio .container .banner-inicio__texto h1{
    font-size: 64px;
    text-align: left;
    color: #005359;
}

.banner-inicio .container .banner-inicio__texto p{
    font-size: 24px;
    text-align: left;
    text-wrap: balance;
    color: #3B4849;
    margin-bottom: 16px;
}

/* BUSCADOR  */
.banner-inicio__buscador {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    border: 1px solid #E66491;
    background-color: #FFFFFF;
}

.banner-inicio__buscador--title {
    background-color: #FFF8FA;
    padding: 12px 12px 12px 48px;
    border-right: 1px solid #E66491;
}

.banner-inicio__buscador--title:before {
    content: '';
    position: absolute;
    top: 50%;
    left:4px;
    transform: translateX(0%) translateY(-50%) rotate(45deg) scale(0.5);
    transform-origin: center center;
    width: 40px;
    height: 40px;
    border: 1px solid #E66491;
    z-index: 1;
    animation: in-out 5s ease-in-out infinite;
}

.banner-inicio__buscador--title:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateX(50%) translateY(-50%) rotate(45deg) scale(0.7);
    transform-origin: center center;
    width: 20px;
    height: 20px;
    background-color: #E66491;
    z-index: 2;
    
}

@keyframes in-out {
    0%, 100% {
        transform: translateX(0%) translateY(-50%) rotate(45deg) scale(.6);
    }
    50% {
        transform: translateX(0%) translateY(-50%) rotate(45deg) scale(0.5);
    }   
} 

.banner-inicio__buscador--title > h4 {
    font-size: 20px;
    line-height: 1em;
    min-width: max-content;
    color: #005359;
}

.banner-inicio__buscador--form input {
    background-color: #FFFFFF;
    padding: 12px 64px 12px 24px;
    font-size: 20px;
    min-width: 370px;
    line-height: 1em;
    height: 100%;
}
.banner-inicio__buscador--form input::placeholder {
    color: hsla(185, 29%, 43%, 0.7);
}

.banner-inicio__buscador--form input:focus {
    outline: none;
    outline: 2px solid #E66491;
}

.banner-inicio__buscador--form button {
    background: linear-gradient(
        135deg,
        rgba(230, 74, 160, 0.8) 0%,
        rgba(230, 74, 160, 0.8) 100%
    );
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    padding: 12px;
    font-size: 20px;
    position: absolute;
    right: 0px;
    top: 50%;
    /* height: 100%; */
    cursor: pointer;
    transition: all 0.3s ease;
    /* transform: rotate(45deg); */
    transform: translateY(-50%) translateX(50%) rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.banner-inicio__buscador--form button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 150%;
    height: 150%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    transform: translateX(-100%) rotate(45deg);
    animation: shine 3s ease-in-out infinite;
}

.banner-inicio__buscador--form button:hover {
    transform: translateY(-50%) translateX(50%) rotate(45deg) scale(1.1);
    background: linear-gradient(
        135deg,
        rgba(230, 74, 160, 0.8) 0%,
        rgba(230, 74, 160, 0.8) 100%
    );
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* .banner-inicio__buscador--form button:active {
    transform: rotate(45deg) scale(1.05);
} */

.banner-inicio__buscador--form button svg {
    height: 24px;
    width: 24px;
    fill: #FFFFFF;
    transform: rotate(-45deg);
}

@media screen and (max-width: 767px){
    .banner-inicio {
        padding-bottom: 0px;
    }

    .banner-inicio .container {
        padding-bottom: 16px;
        position: relative;
    }

    .banner-inicio .container:before {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%) translateY(50%) rotate(45deg);
        width: 40px;
        height: 40px;
        border: 1px solid #E66491;
        z-index: 1;
        animation: in-out 5s ease-in-out infinite;
    }

    .banner-inicio .container:after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%) translateY(50%) rotate(45deg);
        transform-origin: center center;
        width: 20px;
        height: 20px;
        background-color: #E66491;
        z-index: 2;
        
    }

    @keyframes in-out {
        0%, 100% {
            transform: translateX(-50%) translateY(50%) rotate(45deg) scale(1);
        }
        50% {
            transform: translateX(-50%) translateY(50%) rotate(45deg) scale(0.7);
        }   
    } 

    .banner-inicio__buscador {
        width: 100%;
        flex-direction: column;
        width: 100%;
        position: static;
        transform: translateX(0) translateY(0);
        background-color: #FFF8FA;
        border-bottom: 0px;
        padding-block: 12px;
        padding-bottom: 4px;
    }

    .banner-inicio__buscador--title {
        width: 100%;
        border-right: none;
        border-bottom: 0px solid #E66491;
        padding: 16px;
        padding-top: 20px;
        justify-content: center;
        border-bottom: 0px;
    }

    .banner-inicio__buscador--title:before,
    .banner-inicio__buscador--title:after {
        display: none;
    }

    .banner-inicio__buscador--title h4 {
        text-align: center;
    }

    .banner-inicio__buscador--form {
        padding: 24px;
        padding-top: 0px;
        padding-right: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
    }

    .banner-inicio__buscador--form input {
        width: 100%;
        min-width: unset;
        padding: 16px;
        font-size: 16px;
        border: 1px solid hsla(185, 45%, 55%, 0.5);

    }

    .banner-inicio__buscador--form button {
        position: static;
        transform: rotate(45deg) translateY(0) translateX(0);
        margin-top: 16px;
        height: inherit;
        margin: 0px;
        position: absolute;
        top: 0%;
        right: 20px;
    }

    .banner-inicio__buscador--form button:hover {
    transform: translateY(0%) translateX(0%) rotate(45deg) scale(1.1);
    }
}



.banner-inicio .container .banner-inicio__texto p span {
    font-weight: 900;
}


.banner-inicio .container .banner-inicio__imagen {
    width: 50%;
}

[id="1-registrate"]{
    animation : float 3.25s ease-in-out infinite;
}

[id="2-invita"]{
    animation : float 3.5s ease-in-out infinite;
}


[id="3-invita"]{
    animation : float 3.75s ease-in-out infinite;
}

[id="4-disfruta"]{
    animation : float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(10px);
    }
}
[id="1-circle"]{
    animation : zoom-in-out 4s ease-in-out infinite;
    transform-origin: center center;
}

[id="4-disfruta-circle-picture"]{
    animation : zoom-in-out 4s ease-in-out infinite;
    transform-origin: center center;
}


@keyframes zoom-in-out {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.025);
    }
}

[id="2-crea-tu-lista-touch"]{
    animation: touch-scale 3.5s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes touch-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
}

@media (max-width: 1344px){ 
    .banner-inicio .container .banner-inicio__texto h1{
        font-size: 56px;
    }

    .banner-inicio .container .banner-inicio__texto p{
        font-size: 24px;
    }
}

@media (max-width: 767px){
    .banner-inicio .container {
        flex-direction: column;
        gap: 32px;
    }

    .banner-inicio .container .banner-inicio__texto,
    .banner-inicio .container .banner-inicio__imagen {
        width: 100%;
        align-items: center;
    }

    .banner-inicio .container .banner-inicio__texto h1{
        font-size:48px;
        text-align: center;
    }

    .banner-inicio .container .banner-inicio__texto p{
        font-size: 24px;
        text-align: center;
    }
}

@media screen and (max-width: 767px){
    .banner-inicio .container .banner-inicio__texto h1{
        font-size: 40px;
        margin-bottom: .5rem;
    }

    .banner-inicio .container .banner-inicio__texto p{
        font-size: 20px;
        line-height: 1.3;
        text-align: center;
    }
}


/* 
   Section: Nosotros
   Estilos específicos de la sección Nosotros
*/

.nosotros {
    background: #fff;
    padding-top: 80px;
}
.nosotros .container {
    display: grid;
    grid-template-columns: 65% 35%;
    gap: 24px;
}

@media (max-width: 1024px) {
    .nosotros .container {
        grid-template-columns: 1fr;
    }
}

.nosotros__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-xl);
}

.nosotros__video .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.nosotros__video:hover .video-thumbnail {
    transform: scale(1.05);
}

.nosotros__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(45deg) ;
    width: 80px;
    height: 80px;
    border-radius: 0%;
    background: linear-gradient(
        135deg,
        rgba(230, 74, 160, 0.4) 0%,
        rgba(230, 74, 160, 0.4) 100%
    );
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 767px) {
    .nosotros {
        padding-top: 24px;
    }
    .video-play-btn {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 360px) {
    .video-play-btn {
        width: 50px;
        height: 50px;
    }
}

/* SHINE o BRILLO BOTÓN PLAY */
.video-play-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 150%;
    height: 150%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    transform: translateX(-100%) rotate(45deg);
    animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
    background: linear-gradient(
        135deg,
        rgba(230, 74, 160, 0.4) 0%,
        rgba(230, 74, 160, 0.4) 100%
    );
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.video-play-btn:active {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
}

.video-play-btn svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: translateX(2px) translateY(-2px) rotate(-45deg);
}

.nosotros__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-md);
    width: calc(100% - 24px);
}

@media (max-width: 1024px) {
    .nosotros__info {
        width: 100%;
    }
}

/* Accordion Styles */
.accordion {
    /* margin-top: var(--space-2xl); */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    
}

.accordion-item {
    border: 1px solid hsla(185, 45%, 55%, 0.3);
    background: linear-gradient(
        90deg,
        rgba(86, 179, 194, 0.2) 0%,
        rgba(126, 220, 167, 0.2) 50%,
        rgba(86, 179, 194, 0.2) 100%
    );
    background: white;
    background-size: 200% 100%;
    background-position: 0% 0%;
    border-radius: 0px;
    transition: background-position 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    width: 100%;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(
        90deg,
        
        #EEFEFF 0%,
        #EEFEFF 50%,
        rgba(86, 179, 194, 0.2) 51%,
        rgba(126, 220, 167, 0.2) 75%,
        rgba(86, 179, 194, 0.2) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    border: none;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: #005359;
    text-align: left;
    border-radius: 0px;
    transition: background-position 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-header span {
    flex: 1;
    color: #005359;
    font-size: 16px;
    transition: .3s ease-in-out;
}

.accordion-icon {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: #E66491;
    width: 20px;
    height: 20px;
}

.accordion-item.active {
    background-position: 100% 0%;
    border: 1px solid hsla(185, 45%, 55%, 1);
    border-image: linear-gradient(90deg, rgba(126, 220, 167, 1) 0%,  rgba(86, 179, 194, 1) 100%) 1;
}

.accordion-item.active .accordion-icon {
    stroke: white;
}

.accordion-item.active .accordion-header span {
    color: white;
}

.accordion-header[aria-expanded="true"] {
    background: linear-gradient(
        90deg,
        #EEFEFF 0%,
        #EEFEFF 50%,
        rgba(126, 220, 167, 1) 50%,
        rgba(86, 180, 194, 1) 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0%;
    color: white;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.accordion-content > div {
    overflow: hidden;
}

.accordion-item.active .accordion-content {
    grid-template-rows: 1fr;
}

.accordion-content p {
    padding: 16px;
    color: #4D878C;
    line-height: var(--line-height-relaxed);
    margin: 0;
    font-size: 16px;
}


/* 
   Section: Cómo Funciona
   Estilos específicos de la sección Cómo Funciona
*/

.como-funciona {
    background: 
        radial-gradient( 
            #fff 0%,
            #EFFEFF 100%
        );

        padding-block: 48px;
        padding-top: 72px;
}

.como-funciona .container h2 {
    font-size: 40px;
    text-align: center;
    margin-bottom: 16px;
    padding: 0px 0px;
    text-wrap: balance;
    &:after {
        display: none;
    }
}

.como-funciona .container > p {
    text-align: center;
    font-size: 24px;
    color: #3B4849;
    text-wrap: balance;
}

@media (max-width: 767px){
    .como-funciona .container h2 {
        font-size: 32px;
        line-height: 1.1em;
        margin-bottom: 8px;
    }

    .como-funciona .container > p {
        font-size: 20px;
        padding: 0px 16px;
        line-height: 1.3em;
    }
}

.steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding-block: 48px;
}

.steps__col-1 > div,
.steps__col-3 > div{
    margin-bottom: 130px;
    width: max-content; 
}

.steps__col-1 > div:last-child{
    margin-bottom: 0px;
}

.steps__col-3 > div:last-child{
    margin-bottom: 0px;
}

.steps__col-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.steps__card {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 0x;
    /* max-width: 250px; */
}

.steps__card .steps__card--info {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 16px;
    border-radius: 0px;
    background-color: #fff;
    border: 1px solid hsla(185, 64%, 32%, 0.35);
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
}


.steps__card .steps__card--info svg {
    width: 32px;
    fill: #59B7C0;
}

.steps__card .steps__card--info h3 {
    font-size: 24px;
    color: #005359;
}

.steps__card .steps__card--img {
    min-width: 190px;
    width: 190px;
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    img {
        width: 100%;
        height: auto;
    }
}

.steps__text{
    height: 130px;
    /* background-color: rgb(255, 242, 0); */
    display: flex;
    align-items: center;
    max-width: 50%;
    p {
        display: inline-block;
        text-wrap: balance;
        color:  #005359;
        
    }
}

.steps__col-1 {
    .steps__text {
        justify-content: flex-end;
        text-align: right;
    }
}

.steps__col-2 {
    width: max-content;
    padding: 24px;
    padding-top: 48px;
}

.steps .steps__col-2 .steps__number {
    background: #E66491;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 220px;
    transform: rotate(45deg);
    position: relative;
}

.steps .steps__col-2 .steps__number::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px solid #E66491;
    z-index: -1;
}

.steps .steps__col-2 .steps__number::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 177px;
    top: calc(100% + 10px);
   right: calc(0px - 10px);
   transform-origin: top center;
    background: #E66491;
    transform: rotate(-45deg);
}

.steps .steps__col-2 .steps__number:last-of-type {
    margin-bottom: 0px;
    &::after {
        display: none;
    }
}

.steps .steps__col-2 .steps__number span {
    font-size: 27px;
    transform: rotate(-45deg);
    color: white;
}

@media (min-width: 1024px){
    .steps__mobile-card {
        display: none;
    }

    .steps__mobile-p {
        display: none;
    }
}

@media (max-width: 1024px){
    .steps__col-1 {
        display: none;
    }

    .steps__text {
        display: none;
    }

    .steps__card .steps__card--info {
        gap: 0px;
        max-width: 230px;

        svg {
            margin-bottom: 4px;
        }

        h3 {
            margin-bottom: 4px;
        }

        p {
            text-align: left;
            line-height: 1.2em;
            text-wrap: balance;
            color:  #005359a9;
        }
    }

    .steps__card .steps__card--img {
        height: 160px;
        img {
            height: 100%;
            object-fit: cover;
        }
    }


    .steps__col-2 {
        padding-top: 64px;
    }

    .steps .steps__col-2 .steps__number {
        margin-bottom: 250px;
    }

    .steps .steps__col-2 .steps__number::after {
        height: 207px;
    }

}

@media (max-width: 580px){
    .steps {
        gap: 12px;
    }

    .steps__card {
        flex-direction: column-reverse;
        min-width: 0px;
        max-width: 250px;
        width: 150px;
    }

    .steps__card .steps__card--img {
        min-width: inherit;
        height: 130px;
        width: 100%;
    }

    .steps__card .steps__card--info {
        width: 100%;
        max-width: 210px;
        min-width: inherit;

        svg {
            width: 24px;
            margin-bottom: 8px;
        }

        h3 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        p {
            text-align: left;
            line-height: 1.2em;
            text-wrap: balance;
            color:  #005359a9;
            font-size: 16px;
        }
    }

     .steps__col-2 {
        padding-top: 114px;
    }

    .steps .steps__col-2 .steps__number {
        width: 30px;
        height: 30px;
        margin-bottom: 370px;
    }

    .steps .steps__col-2 .steps__number::before {
        width: 50px;
        height: 50px;
    }

    .steps .steps__col-2 .steps__number::after {
        top: calc(100% + 10px);
        height: 330px;
        right: calc(0px - 10px);
    }


    .steps .steps__col-2 .steps__number span {
        font-size: 20px;
    }




}

.mas-de {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mas-de__users {
    display: flex;
    img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid transparent;
        background: 
            linear-gradient(white, white) padding-box,
            linear-gradient(90deg, #56B3C2 0%, #7EDCA7  100%) border-box;
    }

    img:nth-child(2){
        margin-inline: -16px;
    }
}

.mas-de {
    p {
        font-size: 24px;
        color: #3B4849;
        margin-bottom: 16px;
        text-align: center;
        text-wrap: balance;
    }
}

@media (max-width: 767px){
    .mas-de__users {
        margin-bottom: 16px;
    }

    .mas-de {
        p {
            font-size: 20px;
            padding: 0px 16px;
            line-height: 1.3em;
        }
    }
}

/* 
   Section: Testimonios
   Estilos específicos de la sección Testimonios
*/

.testimonios {
    background: 
        linear-gradient(
            180deg, 
            hsla(184, 100%, 97%, 0.75) 0%, 
            hsla(180, 100%, 98%, 0.88) 82%, 
            hsla(0, 0%, 100%, 1) 100%), 
            url('../img/testimonios-fondo.webp');

    background-size: cover;
    background-position: center;
}

.testimonios .container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    padding-block: 48px;

    h2 {
        margin-left: -28px;
    }
}



.testimonios__content--box {
    position: sticky;
    top: 120px;
}

.testimonios__content--info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.testimonios__matrimonios {
    margin-top: 48px;
    padding: 32px;
    background: #fff;
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    
    img {
        width: 200px;
        margin-bottom: 16px;
    }

    p {
        margin-bottom: 16px;
        color: #3B4849;
    }

    p:last-of-type {
        margin-bottom: 0px;
    }
}

.testimonios__matrimonios--stars {
    display: flex;
    margin-bottom: 16px;

    svg {
        width: 22px;
        fill: #FFD700;
        margin-right: 4px;
    }
}

.testimonios__comments {
    column-count: 2;
    column-gap: 24px;
}

.testimonios__comment-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.testimonios__comment {
    padding: 24px;
    background: hsla(0, 0%, 100%, 0.2);
    backdrop-filter: blur(7px);
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    position: relative;
    transition: all .3s ease-in-out;
    z-index: 2;
    break-inside: avoid;
    margin-bottom: 24px;
}

.testimonios__comment:hover {
    background: white;
}

.testimonios__comment:before {
    position: absolute;
    content: '';
    inset: -1px;
    background-color: white;
    z-index: -1;
    opacity: 0;
    border: 1px solid transparent;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) border-box;
    transition: all .2s ease-in-out;
}

.testimonios__comment:hover:before {
    opacity: 1;
}

.testimonios__comment:after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
    inset: 0px;
    z-index: -2;
    transform: translate(0px, 0px);
    opacity: 0;
    transition: all .3s ease-in-out;
    filter: blur(20px);
    transform-origin: 0% 0%;
}

.testimonios__comment:hover:after {
    opacity: 1;
    transform: translate(12px, 12px);
    filter: blur(0px);
}

.testimonios__comment--name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 16px;

    img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 12px;
    }

    p{
        color: #3B4849;
        font-weight: bold;
    }
}

.testimonios__comment--text {
    font-size: 16px;
    color: #727D7E;
    margin-bottom: 16px;
}

.testimonios__comment--cta a {
    display: flex;
    gap: 0px;
    color: #E66491;
    position: relative;
    width: max-content;
    transition: all .3s ease-in-out;

    svg {
        width: 16px;
    }
}

.testimonios__comment--cta a:before {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    background-color: #E66491;
    bottom: 0;
    transition: all .3s ease-in-out;
}

.testimonios__comment--cta a:hover {
    gap: 4px;
}

.testimonios__comment--cta a:hover:before {
    width: 100%;
}

@media (max-width: 1344px){
    .testimonios .container {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 1024px){
    .testimonios .container {
        grid-template-columns: 1fr;
    }

    .testimonios__content--info {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
        align-items: center;
    }

    .testimonios__content--info h2 {
        text-align: center;
        margin-bottom: 0px;
        padding: 0px 0px;
        margin-left: 0px!important;
        text-wrap: balance;

        &:after {
            display: none;
        }
    }

    .testimonios__content--info p {
        text-align: center; 
        text-wrap: balance;
        font-size: 20px;
    }
}

@media (max-width: 767px){
    .testimonios__comments {
        column-count: 1;
    }
}


/* 
   Section: Beneficios
   Estilos específicos de la sección Beneficios
*/
.beneficios {
    background: #fff;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEFEFF 100%);
}

.beneficios .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    & > h2 {
        font-size: 40px;
        text-align: center;
        margin-bottom: 16px;
        padding: 0px 0px;
        text-wrap: balance;
        &:after {
            display: none;
        }
    }

    & > p {
        text-align: center;
        font-size: 24px;
        color: #3B4849;
        text-wrap: balance;
    }   
}

.beneficios__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-block: 48px;
}

@media (max-width: 1024px){
    .beneficios__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .beneficios__img img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .beneficios__img img {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 580px){
    .beneficios__list {
        grid-template-columns: 1fr;
    }
}

.beneficios__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: all .3s ease-in-out;
}

.beneficios__item:before {
    position: absolute;
    content: '';
    inset: 0px;
    z-index: 2;
    background: #ffffff;
    opacity: 1;
    transition: all .3s ease-in-out;
    border: 1px solid hsla(0, 0%, 100%, 1);
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) border-box;
}

.beneficios__item:hover:before {
    border: 1px solid hsla(0, 0%, 100%, 0);
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) border-box;
}

.beneficios__item:after {
    transition: all .3s ease-in-out;
    position: absolute;
    content: '';
    inset: 0px;
    z-index: 0;
    filter: blur(20px);
    opacity: 0;
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
    transform: translate(0px, 0px);
}

.beneficios__item:hover:after {
    transform: translate(12px, 12px);
    filter: blur(0px);
    opacity: 1;
}

.beneficios__item > div {
    position: relative;
    z-index: 2;
    width: 100%;
}

.beneficios__header {
    /* padding: 16px; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.beneficios__header img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.beneficios__header h3 {
    font-size: 20px;
    color: #005359;
}

.beneficios__img img {
    height: 170px;
    object-fit: cover;
}

.beneficios__info {
    padding: 24px;

    p {
        color: #727D7E;
        font-size: 16px;
        text-align: left;
        line-height: 1.5em;
    }
}

.beneficios__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    p {
        max-width: 600px;
        font-size: 24px;
        text-align: center;
        color: #3B4849;

        span {
            img {
                width: 105px;
                display: inline;
            }
        }
    }
}

@media (max-width: 767px){
    .beneficios .container > h2 {
        font-size: 32px;
        line-height: 1.1em;
        margin-bottom: 8px;
    }

    .beneficios .container > p {
        font-size: 20px;
        padding: 0px 16px;
        line-height: 1.3em;
    }

    .beneficios__cta p {
        font-size: 20px;

        span {
            img {
                width: 90px;
            }
        }
    }
}


/* 
   Section: Marcas
   Estilos específicos de la sección Marcas
*/
.marcas {
    background: #ffffff;
}

.marcas .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (max-width: 1024px){
    .marcas .container {
        flex-direction: column;
    }

    .marcas__title {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .marcas__title > h2 {
        text-align: center!important;
        
        br {
            display: none;
        }
    }
}


.marcas__title {
    h2 {
        font-size: 32px;
        text-align: left;
        margin-bottom: 0px;
        padding: 0px 0px;
        text-wrap: balance;
        font-weight: normal;
        &:after {
            display: none;
        }
    }
}

.marcas__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding-block: 48px;
    flex-wrap: wrap;
}

.marcas__logo img {
    max-height: 45px;
}

/*
Section: Contacto
Estilos específicos de la sección Contacto
*/

.contacto {
    background: linear-gradient(45deg, hsla(339, 72%, 65%, 0.20) 50%, hsla(0, 0%, 100%, 0.9) 100%), url('../img/fondo-contacto.webp');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    padding-block: 48px;
    padding-top: 72px;
}

.contacto .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.contacto__redes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: hsla(184, 18%, 48%, 0.3);
    border: 1px solid hsla(0, 0%, 100%, .25);
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    backdrop-filter: blur(15px);
    padding: 24px;
    width: 100%;;
}   

.contacto__redes h2 {
    color: white;
    font-size: 48px;
}

.contacto__redes p {
    color: white;
    font-size: 24px;
}
.contacto__redes ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.contacto__redes ul li {
    width: 100%;
}

.contacto__redes ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
    font-size: 18px;
    transition: all .3s ease-in-out;
    position: relative;
    width: max-content;
    padding: 16px;
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    width: 100%;

    div {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        fill: #fff;
        transition: all .3s ease-in-out;
    }
}

.contacto__redes ul li a:hover {
    background: #fff;
    color: #005359;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

    svg {
        fill: #005359;
    }
}

.contacto__formulario {
    background: hsla(184, 18%, 48%, 0.3);
    border: 1px solid hsla(0, 0%, 100%, .25);
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    backdrop-filter: blur(15px);
    margin-bottom: 35px;
}

#contacto-formulario {
    scroll-margin-top: 118px;
}

.contacto__formulario--titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);   
    padding: 1rem;
}

.contacto__formulario--titulo svg {
    width: 32px;
    fill: #fff;
}

.contacto__formulario--titulo h2:before, 
.contacto__formulario--titulo h2:after {
    display: none;
}

.contacto__formulario--titulo h2 {
    padding: 0px;
    font-size: 32px;
    color: white;
    font-weight: bold;
}

.contacto__formulario--form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    position: relative;
    width: 460px;
    padding-bottom: 64px;
}

.contacto__formulario--form input,
.contacto__formulario--form textarea {
    padding: 12px 24px;
    color: #ffffff;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.7);
    border-right: 1px solid hsla(0, 0%, 100%, 0.7);
}

.contacto__formulario--form textarea {
    min-height: 170px;
}

.contacto__formulario--form input::placeholder,
.contacto__formulario--form textarea::placeholder {
    color: hsla(0, 0%, 100%, 0.50);
}

.contacto__formulario--form input:focus,
.contacto__formulario--form textarea:focus {
    background: hsla(0, 0%, 100%, 0.15);
    background: hsla(184, 18%, 48%, 0.4);
    outline-offset: 0px;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    outline: 1px solid #7CDAA9;
    box-shadow: 0px 0px 10px #7CDAA9;
}

.contacto__formulario--form button {
    position: absolute;
    bottom: 0px;
    left: 50%;
    min-width: max-content;
    transform: translateX(-50%) translateY(calc(50% + 6px));
}

.contacto__formulario--form button:hover {
    transform: translateX(-50%) translateY(calc(50% + 0px));
}

@media (max-width: 1024px){
    #contacto-formulario {
        scroll-margin-top: 102px;
    }

    .contacto .container {
        flex-direction: column;
    }

    .contacto__redes h2 {
        color: white;
        font-size: 32px;
    }

    .contacto__redes p {
        color: white;
        font-size: 16px;
    }

    .contacto__redes ul li a {
        font-size: 16px;
        padding: 12px;

        div span {
            display: inline;
            width: unset;
            word-break: break-word;
            overflow-wrap: break-word;
        }
    }

    .contacto__formulario {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
    }

    .contacto__formulario--form {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px){
    #contacto-formulario {
        scroll-margin-top: 86px;
    }
}

/* 
   Section: Banner Cierre
   Estilos específicos de la sección Banner de Cierre
*/

.banner-cierre {
    display: flex;
    justify-content: center;
    align-items: center;
    background: 
        linear-gradient(180deg, 
            hsla(187, 100%, 99%, 0.8) 0%,
            hsla(185, 85%, 97%, 0.85) 85%,
            hsla(185, 84%, 94%, 1) 100%
        ),
        url('../img/fondo-banner-cierre.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* border-top: 1px solid #E66491; */
    position: relative;
    padding-block: 48px;
    min-height: 500px;
}

.banner-cierre .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
}

.banner-cierre h3 {
    color: #005359;
    font-size: 48px;
    font-weight: bold;
    text-wrap: balance;
}

.banner-cierre p {
    color: #3B4849;
    font-size: 24px;
    text-wrap: balance;
}   

@media (max-width: 767px){
    .banner-cierre h3 {
        font-size: 32px;
        line-height: 1.2em;
    }

    .banner-cierre p {
        font-size: 20px;
        padding: 0px 16px;
        line-height: 1.5em;
    }
}   
/* ===== FOOTER ===== */
.footer {
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) 1;
    background-color: #005359;
    color: #FFFFFF;
    padding-block: 37px;
}

.footer .container {
    display: flex;
    justify-content: space-between;
}

.footer__left {
    display: flex;
    flex-direction: column;

    p {
        font-size: 16px;
    }

    a {
        color: #8CB1B4;
        position: relative;
        width: max-content;

        &:after {
            content: '';
            position: absolute;
            width: 0%;
            height: 1px;
            background-color: #8CB1B4;
            bottom: -1px;
            left: 0;
            transition: all .3s ease-in-out;
        }
        &:hover:after {
            width: 100%;
        }
    }
}

.footer__right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    a {
        
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(90deg, #56b4c200 0%, #7edca700 50%, #ffffff 50%, #ffffff 100%);
        background-size: 200% 100%;
        background-position: 0% 0%;
        transition: background-position 0.3s ease-in-out;
        width: max-content;
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
    }

    a svg {
        width: 24px;
        height: 24px;
        fill: #FFFFFF;
        transition: all 0.3s ease-in-out;
    }

    a:hover {
        background-position: 100% 0%;
    }

    a:hover svg {
        fill: #005359;
        transform: scale(1.2);
    }

}



#float-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    width: max-content;
    transform: translateX(-50%) translateY(100px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    filter: blur(10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#float-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    filter: blur(0);
}


@media (max-width: 580px){
    .footer .container {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer__left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__right {
        gap: 16px;
    }
}
/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    img {
        page-break-inside: avoid;
        max-width: 100% !important;
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    .header, .footer {
        display: none;
    }
}

.registro {
    background: linear-gradient(45deg, hsla(0, 0%, 100%, 1) 50%,  hsla(0, 0%, 100%, 0.2) 100%),  url("../img/fondo-registro.webp");
    background-size: cover;
    background-attachment: fixed;
}

/* Página de Registros  */
.registro .container {
    /* padding-block: 48px; */
    padding-top: 150px;
    padding-bottom: 48px;
    display: flex;
    justify-content: center;
    gap: 24px;
    min-height: 100dvh;
}

@media (max-width: 1344px) {
    .registro .container {
        width: calc(100% - 4rem);
        max-width: calc(1140px - 0rem);
    }
}

.registro__col--1 {
    width:45%;
}

.registro__col--2 {
    width:55%;
}

.registro__form {
    position: sticky;
    top: 150px;
}

.registro__form--container {
    background: #FFFFFF;
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    /* padding: 32px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    
}

.registro__steps {
    background-color: #005359;
    /* background-color: #0bd0de; */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    padding-top: calc(24px + 7px);
    position: relative;
    min-height: 160px;

    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 7px;
        background: linear-gradient(to right, #56B3C2 0%, #7EDCA7 100%);
        top: 0;
        left: 0;
        right: 0;
        z-index: 2;
        transform: translateY(0%);
    }
}

.registro__bar {
    --value: 33; /* porcentaje: 2 de 3 ≈ 66% */
    max-width: 85px;
    width: 85px;
    min-width: 85px;
    max-height: 85px;
    height: 85px;
    min-height: 85px;
    border-radius: 50%;
    background-color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: background 1s ease-in-out;
    background:
    conic-gradient(
        from 0deg,
        #FFFFFF 0% calc(100% - var(--value) * 1%),
        #6ee7b7 calc(100% - var(--value) * 1%) 100%
    );
    
    span {
        z-index: 2;
        color: white;
        font-size: 20px;
        b {
            color: #6ee7b7;
        }
    }
}

.registro__bar:before {
    content: '';
    position: absolute;
    width: 70px;
    height: 70px;
    /* border: 2px solid white; */
    border-radius: 50%;
    background-color: #005359;
}

.registro__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    display: none;
    opacity: 0;
    animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.registro__steps--info {
    display: flex;
    flex-direction: column;
    justify-content: center;

     h2 {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 32px;
        padding-left: 0px;
        gap: 10px;

        &:before,
        &:after {
            display: none;
        }

        svg {
            width: 32px;
            fill: #fff;

        }
    }

    p {
        color: #A7BDBF;
        font-size: 18px;
        line-height: 1.4em;
    }
}

.registro__step.registro__step--active {
    display: flex;
    opacity: 1;
    animation: fadeIn 0.4s ease-in-out forwards;
}

.registro__field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

label {
    display: none;
    color: hsl(183, 17%, 35%);
}

.registro__in{
    display: flex;
    align-items: center;
    background-color: #59B7C0;
    position: relative;

    svg {
        /* box-sizing: content-box; */
        width: 24px;
        height: 100%;
        fill: #ffffff;
        padding: 4px;

    }

    input, select, textarea {
        flex: 1;
        padding: 12px 16px;
        background-color: white;
        border: 1px solid #ccc;
        border-top: transparent;
        border-left: transparent;
        border-left: none;
        font-size: 16px;
        outline-offset: -2px;
        outline: 2px solid transparent;
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    input:focus, select:focus, textarea:focus {
        outline: 2px solid #59B7C0;
    }

    .show-hidden {
        /* background-color: red; */
        position: absolute;
        right: 0px;
        top: 0px;
        width: 48px;
        height: 100%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: greenyellow; */
        
        svg {
            fill: #7A9FA1;
            min-width: 28px;
        }
    }

    .arrow {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 48px;
        height: 100%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;

        svg {
            fill: #7A9FA1;
            min-width: 28px;
        }
    }

}

.registro__field .registro__field--error {
    color: #E66491;
    font-size: 12px;
    font-weight: regular;
    display: none;
    margin-top: 4px;
    line-height: 12px;
}

.registro__field.error .registro__in {
    background-color: #E66491;

    input {
        border-color: #E66491;
    }

    input:focus {
        outline: 2px solid #E66491;
    }
}

.registro__field.error .registro__field--error {
    display: block;
}

.registro__field.success {
    .registro__in {
        background-color: #7EDCA7;

        input {
            border-color: #7EDCA7;
        }

        input:focus {
            outline: 2px solid #7EDCA7;
        }
    }
}

.registro__field.label-on {
    label {
        display: block;
    }
}

.registro__field.terminos .registro__in {
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;

    a {
        text-decoration: underline;
    }
}

.registro__field.terminos input[type="checkbox"]{
    appearance: none;
    width: 20x;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    border-radius: 4px;
    padding: 0px;
    border: 2px solid #7CDAA9;
    border: 1px solid #ABD1D5;
    background: #F5FEFF;
    box-shadow: 0 2px 6px rgba(124,218,169,0.15);
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    margin: 0;
    position: relative;
    outline: 1px;
}

.registro__field.terminos input[type="checkbox"]:checked {
    background: #7CDAA9;
    border-color: #7CDAA9;
}

.registro__field.terminos input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(50% - 1px); 
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.registro__buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;

    [type="submit"]{
        display: none;
    }

    button {
        min-width: 180px;
    }
}

.registro__col--2 {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: repeat(8, 1fr);
}

.registro__counter {
    grid-column: 1/6;
    grid-row: 1/2;

    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #FEF6F9;
    border: 1px solid hsla(189, 27%, 76%, 0.5);
    padding: 16px;
    box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);

    .registro__profiles {
        display: flex;

        img {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            margin-left: -15px;
            border: 2px solid #E66491;
        }

        img:nth-child(1){
            margin-left: 0px;
        }

    }

    p.registro__counter--text {
        color: #005359;
        width: 50%;
        line-height: 1.3em;
    }
}

.registro__security {
    grid-column: 6/9;
    grid-row: 1/2;

    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background-color: #FEF6F9;
    background-color: #F7FDFA;
    border: 1px solid hsla(189, 27%, 76%, 0.5);
    padding: 16px;
    box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);
}

.registro__security > div {
    display: flex;
    align-items: center;
    gap: 8px;

    

    svg {
        width: 32px;
        fill: #7CDAA9;
    }

    & > p {
        color: #005359;
        width: 100%;
        line-height: 1.3em;
        font-size: 16px;
    }
}

.registro__testimonio {
    grid-column: 1/5;
    grid-row: 2/5;

    display: flex;
    flex-direction: column;
    gap: 12px;

    .registro__testimonio--card {
        background-color: #F5FEFF;
        border: 1px solid hsla(189, 27%, 76%, 0.5);
        padding: 24px;
        box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        height: 100%;

        .registro__testimonio--profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 1;
            transform: translateY(0);
            
            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }

            p {
                font-size: 16px;
                color: #005359;
                font-weight: bold;
            }
        }

        p {
            color: hsla(184, 100%, 17%, 0.7);
            text-wrap: balance;
            text-align: center;
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideUpFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideDownFadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-20px);
        }
    }

    .registro__testimonio--controls {
        display: flex;
        gap: 12px;
        div {
            cursor: pointer;
            display: flex;
            width: 50%;
            background: #F5FEFF;
            border: 1px solid hsla(189, 27%, 76%, 0.5);
            padding: 12px;
            box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);

            svg {
                width: 24px;
                fill: hsla(184, 100%, 17%, 0.4);
            }
        }

        .registro__testimonio--back {
            justify-content: flex-start;
        }

        .registro__testimonio--next {
            justify-content: flex-end;
        }

        div:hover {
            background: linear-gradient(90deg, rgba(126, 220, 167, 1) 0%,  rgba(86, 179, 194, 1) 100%);
        
            svg {
                fill: #fff;
            }
        }
    }
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDownFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.registro__beneficios {
    grid-column: 5/9;
    grid-row: 2/4;

    display: flex;
    flex-direction: column;
    gap: 16px; 
    background-color: #ffffff;
    border: 1px solid hsla(189, 27%, 76%, 0.5);
    padding: 16px;
    box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);

    h3 {
        color: #005359;
        font-size: 16px;
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    ul li {
        display: flex;
        gap: 8px;

        svg {
            width: 24px;
            min-width: 24px;
            fill: #7EDCA7;
        }

        p {
            color: #005359;
            font-size: 14px;
            line-height: 1.3em;
        }
    }
}

.registro__ultimos {
    grid-column: 5/9;
    grid-row: 4/7;


    background-color: #ffffff;
    border: 1px solid hsla(189, 27%, 76%, 0.5);
    padding: 16px;
    box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;

    h3 {
        color: #005359;
        font-size: 16px;
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    ul li a {
        padding: 12px;
        display: flex;
        align-items: center;
        background: #F5FEFF;
        border: 1px solid hsla(185, 45%, 55%, 0.2);
        gap: 12px;
        justify-content: space-between;

        .registro__ultimos--data {
            display: flex;
            align-items: center;
            gap: 12px;

            .registro__ultimos--profile {
                img {
                    width: 36px;
                    height: 36px;
                    min-width: 36px;
                    min-height: 36px;
                    border-radius: 50%;
                }
            }

            .registro__ultimos--info {
                display: flex;
                flex-direction: column;
                gap: 0px; 

                p {
                    font-size: 16px;
                    color: #005359;
                    line-height: 1.3em;
                }

                span {
                    display: inline;
                    font-size: 12px;
                    color: hsla(184, 100%, 17%, 0.7);
                }
            }
        }

        svg {
            width: 16px;
            fill: hsla(184, 100%, 17%, 0.5);
        }

        &:hover {
            background: linear-gradient(90deg, rgba(126, 220, 167, 1) 0%,  rgba(86, 179, 194, 1) 100%);

            .registro__ultimos--data {
                .registro__ultimos--info {
                    p, span {
                        color: white;
                    }
                }
            }

            svg {
                fill: white;
            }
        }
    }


}

.registro__minihero {
    grid-column: 1/5;
    grid-row: 5/7;

    min-height: 120px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    img {
        object-fit: cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.registro__recaudado {
    grid-column: 1/9;
    grid-row: 7/8;

    background-color: #F7FDFA;
    border: 1px solid hsla(189, 27%, 76%, 0.5);
    padding: 16px;
    box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);

    display: flex;
    align-items: center;
    justify-content: space-between;


    .registro__logo {

        img {
            width: 200px;
        }

        p {
            font-size: 12px;
            color: hsla(184, 100%, 17%, 0.7);
        }
    }

    .separador {
        width: 1px;
        height: 100%;
        background-color: hsla(184, 100%, 17%, 0.3);
    }

    .registro__amount {
        display: flex;
        align-items: center;
        gap: 16px;

        .registro__amount--info {
            p {
                font-size: 12px;
                color: hsla(184, 100%, 17%, 0.7);
            }

            h2 {
                color: #005359;
                font-size: 16px;
                padding: 0px;
                &:before, &:after {
                    display: none;
                }
            }

        }
    }

}

.tooltip {
    position: relative;

    & > p {
        background: #59B7C0;
        line-height: 1em;
        width: 20px;
        height: 20px;
        min-height: 20px;
        min-width: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1em;
        font-size: 12px!important;
        color: #fff!important;
        cursor: pointer;

        &:hover {
            background-color: #7EDCA7;
        }
    }


    .tooltip__box {
        position: absolute;
        z-index: 300000000;
        box-sizing: content-box;
        min-width: 100px;
        background-color: #F7FDFA;
        border: 1px solid hsla(189, 27%, 76%, 0.5);
        padding: 16px;
        box-shadow: 0px 10px 20px hsla(184, 100%, 17%, 0.1);
        transition: 0.3s ease-in-out;

        pointer-events: none;
        top: 20px;
        right: 0%;
        transform: translate(-0%, -100%);
        opacity: 0;

        p {
            font-size: 12px;
            line-height: 1.5em;
            color: hsla(184, 100%, 17%, 0.7);
        }
    }

    &:hover {
        .tooltip__box {
            top: -4px;
            right: 0%;
        transform: translate(-0%, -100%);
            opacity: 1;
        }
    }
}

@media (max-width: 1200px) {
    .registro .container {
        gap: 16px;
    }

    .registro__col--2 {
        grid-gap: 16px;
    }
}

@media (max-width: 1150px) {
    .registro .container {
        
        flex-direction: column;
        gap: 64px
    }

    .registro__col--1,
    .registro__col--2 {
        width:100%;
    }
}

@media (max-width: 767px){
    .registro .container {
        padding-top: 100px;
        width: calc(100% - 2rem);
    }

    .registro__testimonio--card {
        min-height: 300px;
    }
}

@media (max-width: 600px) {

    .registro__steps {
        gap: 12px;
        padding:16px;
        padding-top: calc(24px + 5px);
        min-height: 150px;

        &:after {
            height: 5px;
        }
    }

    .registro__bar {
        --value: 33; /* porcentaje: 2 de 3 ≈ 66% */
        max-width: 65px;
        width: 65px;
        min-width: 65px;
        max-height: 65px;
        height: 65px;
        min-height: 65px;
        border-radius: 50%;
        background-color: grey;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        transition: background 1s ease-in-out;
        background:
        conic-gradient(
            from 0deg,
            #FFFFFF 0% calc(100% - var(--value) * 1%),
            #6ee7b7 calc(100% - var(--value) * 1%) 100%
        );
        
        span {
            z-index: 2;
            color: white;
            font-size: 16px;
            b {
                color: #6ee7b7;
            }
        }
    }

    .registro__bar:before {
        content: '';
        position: absolute;
        width: 55px;
        height: 55px;
        /* border: 2px solid white; */
        border-radius: 50%;
        background-color: #005359;
    }

    .registro__steps--info {

        h2 {
            font-size: 24px;
            gap:8px;

            svg {
                width: 24px;
                min-width: 24px;

            }
        }

        p {
            color: #A7BDBF;
            font-size: 16px;
            line-height: 1.2em;
        }
    }

    .registro__step {
        gap: 16px;
        padding: 16px;
    }

    .registro__col--2 {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat(1, 1fr);
        
        & > div {
            grid-column: 1/2!important;
            grid-row: auto;
        }
    }

    .registro__recaudado {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;

        .separador {
            width: 100%;
            height: 1px;
        }
    }
}

@media (max-width: 500px) {

    .registro .container {
        gap: 36px
    }

    .registro__steps {
        flex-direction: column;
        align-items: center;

        .registro__steps--info {
            justify-content: center;
            h2 {
                justify-content: center;
            }
            p{
                text-align: center;
            }
        }
    }
    .registro__buttons {
        flex-direction: column-reverse;
    }
}

/* 
   Section: Gracias
   Estilos especificos de la pagina Gracias
*/
.gracias {
    background:
        linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0.5) 0%,
            hsla(0, 0%, 100%, 0.5) 55%,
            hsla(0, 0%, 100%, 0.5) 100%
        ),
        url('../img/gracias-fondo.webp');
    background-size: cover;
    background-position: center;
}

.gracias .container {
    padding-top: 160px;
    padding-bottom: 80px;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
}

.gracias__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.gracias__card {
    width: min(1140px, 100%);
    background: hsla(0, 0%, 100%, 0.7);
    border: 1px solid hsla(0, 0%, 100%, 0.9);
    box-shadow: 0px 15px 26px rgba(0, 83, 89, 0.15);
    padding: 48px 64px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
}

/* .gracias__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
} */

.gracias__isotipo {
    width: 56px;
    margin: 0 auto 16px;
}

.gracias__card h2 {
    font-size: 36px;
    padding-left: 0;
    margin-bottom: 8px;
    text-align: center;
    text-wrap: balance;
}

.gracias__card h2::after {
    display: none;
}

.gracias__subtitle {
    font-size: 18px;
    color: #3B4849;
    margin-bottom: 24px;
    text-wrap: balance;
}

.gracias__cta {
    display: inline-flex;
    margin: 0 auto 16px;
    font-size: 20px;
    padding: 0.65rem 2.2rem;
    padding-bottom: calc(0.65rem + 10px);
    padding-right: calc(2.2rem + 10px);
}

.gracias__redirect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #005359;
    text-wrap: balance;
}

.gracias__redirect span {
    color: #E66491;
    font-weight: 700;
}

.gracias__progress {
    width: 140px;
    height: 3px;
    background: hsla(0, 0%, 100%, 0.9);
    border-radius: 999px;
    overflow: hidden;
}

.gracias__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #E66491;
    transform-origin: left;
    transform: scaleX(0);
    animation: gracias-progress 10s linear forwards;
}

@keyframes gracias-progress {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.gracias__cards {
    width: min(1140px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.gracias__info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: hsla(0, 0%, 100%, 0.7);
    border: 1px solid hsla(0, 0%, 100%, 0.9);
    box-shadow: 0px 15px 26px rgba(0, 83, 89, 0.15);
    backdrop-filter: blur(10px);
}

.gracias__info-card p {
    font-size: 16px;
    color: #3B4849;
    text-wrap: balance;
}

.gracias__info-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, 0.95);
    border: 1px solid hsla(0, 0%, 100%, 0.9);
    box-shadow: 0px 6px 12px rgba(0, 83, 89, 0.12);
    color: #E66491;
    flex-shrink: 0;
}

.gracias__info-icon svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 1024px) {
    .gracias__card {
        padding: 40px 32px;
    }

    .gracias__card h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .gracias .container {
        padding-top: 140px;
        padding-bottom: 64px;
    }

    .gracias__card {
        padding: 32px 24px;
    }

    .gracias__card h2 {
        font-size: 28px;
    }

    .gracias__subtitle {
        font-size: 16px;
    }

    .gracias__cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .gracias__cta {
        font-size: 18px;
    }

    .gracias__info-card {
        align-items: flex-start;
    }
}

/* 
   Section: Ingresar
   Estilos especificos de la pagina de inicio de sesion
*/
.ingresar {
    background: linear-gradient(45deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.2) 100%), url("../img/fondo-registro.webp");
    background-size: cover;
    background-attachment: fixed;
}

.ingresar .container {
    padding-top: 150px;
    padding-bottom: 80px;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
}

.ingresar__layout {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ingresar__form {
    width: 100%;
}

.ingresar__panel {
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    overflow: hidden;
    margin-bottom: 16px;
}

.ingresar__steps {
    align-items: center;
}

.ingresar__badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) border-box;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ingresar__badge svg {
    width: 28px;
    height: 28px;
    fill: #59B7C0;
}

.ingresar__steps-info h2 {
    text-wrap: balance;
}

.ingresar__steps-info p {
    text-wrap: balance;
}

.ingresar__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.ingresar__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.ingresar__options .registro__field {
    width: auto;
}

.ingresar__remember label {
    cursor: pointer;
    color: #005359;
}

.ingresar__remember input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.ingresar__remember .registro__in {
    gap: 8px;
}

.ingresar__forgot {
    color: #E66491;
    font-size: 14px;
    transition: opacity 0.2s ease-in-out;
}

.ingresar__forgot:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.ingresar__actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.ingresar__actions .btn {
    min-width: 200px;
}

.ingresar__footer {
    margin-top: 12px;
    text-align: center;
    color: #3B4849;
    font-size: 14px;
    text-wrap: balance;
}

.ingresar__footer a {
    color: #E66491;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .ingresar .container {
        padding-top: 140px;
        padding-bottom: 64px;
    }

    .ingresar__layout {
        width: min(520px, 100%);
    }
}

@media (max-width: 560px) {
    .ingresar__actions .btn {
        width: 100%;
    }
}

/* 
   Section: Recuperar
   Estilos especificos de la pagina de recuperacion
*/
.recuperar {
    background: linear-gradient(45deg, hsla(0, 0%, 100%, 1) 50%, hsla(0, 0%, 100%, 0.2) 100%), url("../img/fondo-registro.webp");
    background-size: cover;
    background-attachment: fixed;
}

.recuperar .container {
    padding-top: 150px;
    padding-bottom: 80px;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.recuperar__layout {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
}

.recuperar__toast {
    position: relative;
    margin-top: 12px;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    display: none;
    background: #FFFFFF;
    border: 1px solid rgba(0, 83, 89, 0.1);
    border-left: 8px solid #7CDAA9;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    padding: 0;
    border-radius: 0;
    color: #005359;
    font-size: 16px;
    text-align: left;
    width: min(474px, 100%);
    min-height: 62px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
    align-items: center;
}

.recuperar__toast p {
    margin: 0;
    line-height: 1.35;
    padding: 0 20px;
    flex: 1;
}

.recuperar__toast::before {
    display: none;
}

.recuperar__toast.is-visible {
    display: flex;
    animation: recuperar-toast 10s ease-in-out forwards;
}

@keyframes recuperar-toast {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    6% {
        opacity: 1;
        transform: translateY(0);
    }
    94% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

.recuperar__toast-progress {
    position: absolute;
    left: -8px;
    bottom: -8px;
    width: calc(100% + 8px);
    max-width: 482px;
    height: 3px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.recuperar__toast-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: #7CDAA9;
    transform-origin: left;
    transform: scaleX(0);
    animation: recuperar-toast-progress 10s linear forwards;
}

@keyframes recuperar-toast-progress {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.recuperar__panel {
    width: 100%;
    box-shadow: 0px 10px 20px hsla(185, 46%, 43%, 0.2);
    overflow: hidden;
}

.recuperar__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recuperar__steps {
    align-items: center;
}

.recuperar__badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%) border-box;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recuperar__badge svg {
    width: 28px;
    height: 28px;
    fill: #59B7C0;
}

.recuperar__steps-info h2 {
    text-wrap: balance;
}

.recuperar__steps-info p {
    text-wrap: balance;
}

.recuperar__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.recuperar__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
}

.recuperar__actions .btn {
    min-width: 200px;
}

.recuperar__footer {
    margin-top: 12px;
    text-align: center;
    color: #3B4849;
    font-size: 14px;
    text-wrap: balance;
}

.recuperar__footer a {
    color: #E66491;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .recuperar .container {
        padding-top: 140px;
        padding-bottom: 64px;
    }
}

@media (max-width: 560px) {
    .recuperar__actions .btn {
        width: 100%;
    }
}

/* 
   Section: Dashboard
   Estilos especificos de la pagina Dashboard
*/
body.dashboard-page {
    background:
        radial-gradient(circle at 10% 10%, hsla(188, 47%, 85%, 0.35), transparent 60%),
        radial-gradient(circle at 90% 0%, hsla(146, 57%, 75%, 0.35), transparent 45%),
        linear-gradient(180deg, #F7FDFA 0%, #FFFFFF 60%, #F5FEFF 100%);
}

body.dashboard-page--menu-open {
    overflow: hidden;
}

.dashboard {
    --dashboard-sidebar-width: 280px;
    --dashboard-surface: hsla(0, 0%, 100%, 0.9);
    --dashboard-border: hsla(185, 45%, 55%, 0.2);
    --dashboard-shadow: 0 20px 40px rgba(0, 83, 89, 0.08);
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-3xl: 0px;
    --radius-full: 0px;
    display: grid;
    grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
    gap: var(--space-xl);
    padding: var(--space-xl);
    min-height: 100dvh;
    position: relative;
}

.dashboard__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 83, 89, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    z-index: var(--z-fixed);
}

.dashboard--modal-open .dashboard__overlay {
    opacity: 0;
    pointer-events: none;
}

.dashboard__modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    z-index: var(--z-modal-backdrop);
}

.dashboard__modal.is-open {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.dashboard__modal-overlay {
    position: absolute;
    inset: 0;
    background: hsla(185, 45%, 55%, 0.22);
    opacity: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity var(--transition-normal);
}

.dashboard__modal-card {
    position: relative;
    z-index: var(--z-modal);
    width: min(92vw, 420px);
    max-height: 70dvh;
    background: hsla(0, 0%, 100%, 0.92);
    border: 1px solid var(--dashboard-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dashboard__modal.is-open .dashboard__modal-overlay {
    opacity: 1;
}

.dashboard__modal.is-open .dashboard__modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dashboard[data-modal-active="user"] .dashboard__modal--notify,
.dashboard[data-modal-active="notify"] .dashboard__modal--user {
    pointer-events: none;
    opacity: 0;
}

.dashboard__modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.dashboard__modal--notify .dashboard__modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard__modal .dashboard__modal-header {
    display: flex;
}

.dashboard__sidebar {
    background: var(--dashboard-surface);
    border: 1px solid var(--dashboard-border);
    box-shadow: var(--dashboard-shadow);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: var(--space-xl);
    height: calc(100dvh - (var(--space-xl) + var(--space-xl)));
    z-index: calc(var(--z-fixed) + 1);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.dashboard__sidebar-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 0 0 auto;
}

.dashboard__sidebar-middle {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: var(--space-xs);
    padding-bottom: var(--space-sm);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}

.dashboard__sidebar-bottom {
    flex: 0 0 auto;
}

.dashboard__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.dashboard__brand img {
    width: 160px;
}

.dashboard__mobile-tools {
    display: none;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    width: 100%;
    border: 1px solid var(--dashboard-border);
    background: hsla(0, 0%, 100%, 0.7);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

.dashboard__mobile-actions {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
}

.dashboard__mobile-actions .dashboard__user {
    width: 100%;
}

.dashboard__sidebar-close {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: hsla(185, 45%, 55%, 0.15);
    color: #005359;
    align-items: center;
    justify-content: center;
}

.dashboard__sidebar-close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.dashboard-menu {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.dashboard-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dashboard-menu__link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    color: #005359;
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dashboard-menu__link:hover {
    background: hsla(185, 45%, 55%, 0.15);
}

.dashboard-menu__item--active .dashboard-menu__link {
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
    color: #ffffff;
}

.dashboard-menu__link--danger {
    color: #D34D78;
}

.dashboard-menu__toggle {
    cursor: pointer;
}

.dashboard-menu__chevron {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: hsla(185, 45%, 55%, 0.15);
    transition: transform var(--transition-fast);
}

.dashboard-menu__chevron svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform var(--transition-fast);
}

.dashboard-menu__submenu {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-left: var(--space-md);
    transition: max-height var(--transition-normal);
}

.dashboard-menu__item.is-open .dashboard-menu__submenu {
    max-height: 420px;
    margin-top: var(--space-xs);
}

.dashboard-menu__item.is-open .dashboard-menu__chevron svg {
    transform: rotate(180deg);
}

.dashboard-menu__sublink {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    background: hsla(185, 45%, 55%, 0.08);
    color: #005359;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dashboard-menu__sublink:hover {
    background: hsla(339, 72%, 65%, 0.18);
}

.dashboard__sidebar-card {
    background: #F7FDFA;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    box-shadow: var(--shadow-sm);
}

.dashboard__sidebar-label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #59B7C0;
}

.dashboard__sidebar-value {
    font-size: var(--font-size-3xl);
    color: #005359;
}

.dashboard__progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: hsla(185, 45%, 55%, 0.2);
    overflow: hidden;
}

.dashboard__progress span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
}

.dashboard__sidebar-note {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.dashboard__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--dashboard-surface);
    border: 1px solid var(--dashboard-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--space-xl);
    z-index: var(--z-sticky);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
}

.dashboard__topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.dashboard__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: hsla(185, 45%, 55%, 0.12);
}

.dashboard__menu-toggle span {
    width: 18px;
    height: 2px;
    background: #59B7C0;
    border-radius: var(--radius-full);
}

.dashboard__title h1 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
}

.dashboard__title p {
    font-size: var(--font-size-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #59B7C0;
}

.dashboard__topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    justify-content: flex-end;
    min-width: 260px;
}

.dashboard__search {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    flex: 1;
    min-width: 220px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dashboard__search-icon svg {
    width: 18px;
    height: 18px;
    fill: #59B7C0;
}

.dashboard__search:focus-within {
    border-color: rgba(86, 179, 194, 0.8);
    box-shadow: 0 0 0 2px rgba(86, 179, 194, 0.25);
}

.dashboard__search input {
    width: 100%;
    font-size: var(--font-size-sm);
    outline: none;
}

.dashboard__search--full {
    min-width: 0;
    width: 100%;
}

.dashboard__action {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard__action--soft {
    width: 44px;
    height: 44px;
    background: hsla(0, 0%, 100%, 0.75);
}

.dashboard__action svg {
    width: 18px;
    height: 18px;
    fill: #59B7C0;
}

.dashboard__user {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.dashboard__user-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    text-align: left;
}

.dashboard__topbar-right .dashboard__user-trigger {
    width: auto;
}

.dashboard__user--compact .dashboard__user-trigger {
    padding: 0.5rem 0.75rem;
    justify-content: space-between;
}

.dashboard__avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.dashboard__user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dashboard__user-name {
    font-size: var(--font-size-sm);
    color: #005359;
}

.dashboard__user-role {
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard__user-chevron {
    margin-left: auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #59B7C0;
    transition: transform var(--transition-fast);
}

.dashboard__user-chevron svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.dashboard__user-menu {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    min-width: 220px;
    padding: var(--space-sm);
    border: 1px solid var(--dashboard-border);
    background: hsla(0, 0%, 100%, 0.9);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: var(--z-popover);
}

.dashboard__user-menu--modal {
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: auto;
}

.dashboard__user.is-open .dashboard__user-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dashboard__user.is-open .dashboard__user-chevron {
    transform: rotate(180deg);
}

.dashboard__user-item {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: #FFFFFF;
    color: #005359;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dashboard__modal-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard__modal-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard__modal-title {
    font-size: var(--font-size-base);
    color: #005359;
}

.dashboard__modal-subtitle {
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard__modal-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: hsla(185, 45%, 55%, 0.12);
    color: #005359;
}

.dashboard__modal-close svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.dashboard__user-item:hover {
    background: hsla(339, 72%, 65%, 0.18);
}

.dashboard__user-item--danger {
    color: #D34D78;
    border-top: 1px solid var(--dashboard-border);
    margin-top: var(--space-sm);
    padding-top: calc(0.6rem + var(--space-sm));
    padding-bottom: 0.6rem;
}

.dashboard__notify {
    position: relative;
    display: inline-flex;
}

.dashboard__notify-trigger {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dashboard__notify-trigger--soft {
    width: 44px;
    height: 44px;
    background: hsla(0, 0%, 100%, 0.75);
}

.dashboard__notify-trigger svg {
    width: 20px;
    height: 20px;
    fill: #59B7C0;
}

.dashboard__notify-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #E66491;
    top: 10px;
    right: 10px;
    transform: rotate(45deg);
}

.dashboard__notify-menu {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    width: min(340px, 80vw);
    border: 1px solid var(--dashboard-border);
    background: hsla(0, 0%, 100%, 0.92);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: var(--z-popover);
    min-height: 0;
}

.dashboard__notify-menu--modal {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--space-sm);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: auto;
    min-height: 0;
}

.dashboard__notify.is-open .dashboard__notify-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dashboard__notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--dashboard-border);
}

.dashboard__notify-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.dashboard__notify-title {
    font-size: var(--font-size-base);
    color: #005359;
}

.dashboard__notify-clear {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #005359;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard__notify-clear:hover {
    background: hsla(339, 72%, 65%, 0.12);
    border-color: hsla(339, 72%, 65%, 0.35);
    color: #D34D78;
}

.dashboard__notify-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: hsla(185, 45%, 55%, 0.12);
    color: #005359;
}

.dashboard__notify-close svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.dashboard__notify-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: min(280px, 40vh);
    overflow: auto;
    padding-right: var(--space-xs);
}

.dashboard__notify-menu--modal .dashboard__notify-list {
    max-height: none;
    padding-right: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.dashboard__notify-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-sm);
    padding: 0.75rem;
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    align-items: start;
}

.dashboard__notify-item--unread {
    background: hsla(339, 72%, 65%, 0.08);
    border-color: hsla(339, 72%, 65%, 0.35);
}

.dashboard__notify-item--unread .dashboard__notify-text {
    font-weight: var(--font-weight-bold);
}

.dashboard__notify-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.dashboard__notify-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dashboard__notify-text {
    font-size: var(--font-size-sm);
    color: #005359;
    line-height: 1.35;
}

.dashboard__notify-meta {
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard__notify-meta::before {
    content: "Vista - ";
}

.dashboard__notify-item--unread .dashboard__notify-meta::before {
    content: "Nueva - ";
}

.dashboard__notify-status {
    width: 8px;
    height: 8px;
    background: #7EDCA7;
    margin-top: 6px;
    transform: rotate(45deg);
    border: 2px solid hsla(158, 60%, 60%, 0.35);
}

.dashboard__notify-remove {
    width: 24px;
    height: 24px;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #59B7C0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.dashboard__notify-remove svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.dashboard__notify-remove:hover {
    background: hsla(339, 72%, 65%, 0.12);
    border-color: hsla(339, 72%, 65%, 0.35);
    color: #D34D78;
}

.dashboard__notify-status--alert {
    background: #E66491;
    border-color: hsla(339, 72%, 65%, 0.5);
    box-shadow: 0 0 0 4px hsla(339, 72%, 65%, 0.15);
}

.dashboard__notify-action {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #005359;
    font-size: var(--font-size-sm);
    text-align: center;
    width: 100%;
}

.dashboard__notify-action:hover {
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    border-color: transparent;
}

@media (min-width: 1025px) {
    .dashboard__sidebar-middle {
        scrollbar-width: thin;
        scrollbar-color: rgba(86, 179, 194, 0.6) transparent;
    }

    .dashboard__sidebar-middle::-webkit-scrollbar {
        width: 8px;
    }

    .dashboard__sidebar-middle::-webkit-scrollbar-track {
        background: transparent;
    }

    .dashboard__sidebar-middle::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(86, 179, 194, 0.75) 0%, rgba(126, 220, 167, 0.75) 100%);
    }

    .dashboard__notify-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(86, 179, 194, 0.6) transparent;
    }

    .dashboard__notify-list::-webkit-scrollbar {
        width: 8px;
    }

    .dashboard__notify-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .dashboard__notify-list::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(86, 179, 194, 0.75) 0%, rgba(126, 220, 167, 0.75) 100%);
    }
}

.dashboard__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dashboard__hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.dashboard__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
}

.dashboard__panels {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: var(--space-lg);
}

.dashboard__stack {
    display: grid;
    gap: var(--space-lg);
}

.dashboard__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.dashboard-card {
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 140px;
}

.dashboard-card--hero {
    min-height: 200px;
    background: linear-gradient(160deg, #FFFFFF 0%, #F7FDFA 100%);
}

.dashboard-card--accent {
    background: linear-gradient(160deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
}

.dashboard-card--accent .dashboard-card__value {
    color: #FFFFFF;
}

.dashboard-card--accent .dashboard-card__label,
.dashboard-card--accent .dashboard-card__meta {
    color: rgba(255, 255, 255, 0.8);
}

.dashboard-card--placeholder {
    border-style: dashed;
    text-align: center;
    justify-content: center;
    min-height: 160px;
}

.dashboard-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.dashboard-card__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #59B7C0;
}

.dashboard-card__value {
    font-size: var(--font-size-3xl);
    color: #005359;
    line-height: 1.1;
}

.dashboard-card__meta {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard-card__trend {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-card__trend--up {
    background: hsla(150, 85%, 45%, 0.15);
    color: var(--color-success-600);
}

.dashboard-card__trend--down {
    background: hsla(355, 80%, 55%, 0.15);
    color: var(--color-danger-600);
}

.dashboard-card__progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: hsla(0, 0%, 100%, 0.35);
    overflow: hidden;
}

.dashboard-card__progress span {
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: #FFFFFF;
}

.dashboard-card--hero .dashboard-card__progress {
    background: hsla(185, 45%, 55%, 0.2);
}

.dashboard-card--hero .dashboard-card__progress span {
    background: linear-gradient(90deg, #56B3C2 0%, #7EDCA7 100%);
}

.dashboard-card__chips {
    display: flex;
    gap: var(--space-sm);
}

.dashboard-card__chips span {
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dashboard-panel {
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 220px;
}

.dashboard-panel--soft {
    background: #F7FDFA;
}

.dashboard-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.dashboard-panel__title {
    font-size: var(--font-size-lg);
    color: #005359;
}

.dashboard-panel__action {
    font-size: var(--font-size-sm);
    color: #E66491;
}

.dashboard-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dashboard-panel__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.8rem 1rem;
    border-radius: var(--radius-lg);
    background: #F5FEFF;
    border: 1px solid var(--dashboard-border);
}

.dashboard-panel__item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-panel__item-title {
    font-size: var(--font-size-base);
    color: #005359;
}

.dashboard-panel__item-meta {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
}

.dashboard-panel__badge {
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
    background: hsla(339, 72%, 65%, 0.15);
    color: #E66491;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.dashboard-panel__mini {
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: #F5FEFF;
    border: 1px solid var(--dashboard-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dashboard-panel__mini-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #59B7C0;
}

.dashboard-panel__mini-value {
    font-size: var(--font-size-lg);
    color: #005359;
}

.dashboard-panel__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.dashboard-panel__media-tile {
    height: 90px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, hsla(185, 45%, 55%, 0.2), hsla(146, 57%, 68%, 0.3));
    border: 1px solid var(--dashboard-border);
}

@media (max-width: 1200px) {
    .dashboard {
        --dashboard-sidebar-width: 240px;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }

    .dashboard__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
    }

    .dashboard__overlay {
        display: block;
    }

    .dashboard__sidebar {
        position: fixed;
        top: var(--space-md);
        left: var(--space-md);
        right: var(--space-md);
        height: calc(100dvh - (var(--space-md) + var(--space-md)));
        transform: translateX(-120%);
        transition: transform var(--transition-normal);
        padding: var(--space-sm);
        gap: var(--space-sm);
        overflow: hidden;
    }

    .dashboard--menu-open .dashboard__sidebar {
        transform: translateX(0);
    }

    .dashboard--menu-open .dashboard__overlay {
        opacity: 1;
        pointer-events: all;
    }

    .dashboard--menu-open.dashboard--modal-open .dashboard__overlay {
        opacity: 0;
        pointer-events: none;
    }

    .dashboard__sidebar-close {
        display: inline-flex;
    }

    .dashboard__menu-toggle {
        display: inline-flex;
    }

    .dashboard__mobile-tools {
        display: flex;
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .dashboard__sidebar-top {
        gap: var(--space-sm);
    }

    .dashboard__sidebar-middle {
        padding-right: 0;
    }

    .dashboard__mobile-actions {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .dashboard__mobile-actions .dashboard__user-trigger {
        padding: 0.4rem 0.6rem;
        min-height: 52px;
    }

    .dashboard__notify-trigger--soft {
        width: 52px;
        height: 52px;
    }

    .dashboard__search--full {
        padding: 0.4rem 0.7rem;
    }

.dashboard__mobile-tools .dashboard__user-menu {
    position: static;
    transform: none;
    max-height: 0;
        overflow: hidden;
        opacity: 1;
        pointer-events: none;
        padding: 0;
        margin-top: 0;
        border-width: 0;
        min-width: 0;
    width: 100%;
    transition: max-height var(--transition-normal), padding var(--transition-fast), margin var(--transition-fast);
}

.dashboard__mobile-tools .dashboard__user.is-open .dashboard__user-menu {
        max-height: 45vh;
        pointer-events: auto;
        padding: var(--space-sm);
        margin-top: var(--space-xs);
        border-width: 1px;
    overflow: auto;
}

.dashboard__mobile-tools .dashboard__notify-menu {
    position: static;
        transform: none;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        pointer-events: none;
        padding: 0;
        margin-top: 0;
        border-width: 0;
        min-width: 0;
    width: 100%;
    transition: max-height var(--transition-normal), padding var(--transition-fast), margin var(--transition-fast);
}

.dashboard__mobile-tools .dashboard__notify.is-open .dashboard__notify-menu {
        max-height: 50vh;
        pointer-events: auto;
        padding: var(--space-sm);
        margin-top: var(--space-xs);
        border-width: 1px;
    overflow: hidden;
}

    .dashboard__topbar {
        top: var(--space-lg);
    }

    .dashboard__topbar-right {
        display: none;
    }

    .dashboard-menu__list {
        gap: 6px;
    }

    .dashboard-menu__link {
        padding: 0.6rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    .dashboard-menu__sublink {
        padding: 0.5rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    .dashboard-menu__submenu {
        padding-left: var(--space-sm);
    }

    .dashboard-menu__item.is-open .dashboard-menu__submenu {
        max-height: 800px;
        overflow: visible;
    }

    .dashboard__sidebar-card {
        padding: var(--space-sm);
    }

    .dashboard__sidebar-value {
        font-size: var(--font-size-2xl);
    }

    .dashboard__panels {
        grid-template-columns: 1fr;
    }

    .dashboard__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard__hero {
        grid-template-columns: 1fr;
    }

    .dashboard__topbar-right {
        min-width: 0;
    }
}

@media (max-width: 680px) {
    body.dashboard-page--modal-open {
        overflow: hidden;
    }

    .dashboard {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .dashboard__topbar {
        padding: var(--space-sm) var(--space-md);
    }

    .dashboard__content {
        gap: var(--space-md);
    }

    .dashboard__hero,
    .dashboard__metrics,
    .dashboard__panels,
    .dashboard__cards {
        gap: var(--space-md);
    }

    .dashboard-card,
    .dashboard-panel {
        padding: var(--space-md);
    }

    .dashboard-card {
        gap: var(--space-xs);
        min-height: auto;
    }

    .dashboard-card--hero {
        min-height: auto;
        gap: var(--space-sm);
    }

    .dashboard-card__value {
        line-height: 1;
    }

    .dashboard-card__meta {
        line-height: 1.2;
    }

    .dashboard-card--placeholder {
        min-height: 140px;
    }

    .dashboard__cards,
    .dashboard__metrics {
        grid-template-columns: 1fr;
    }

    .dashboard__user-info {
        display: none;
    }

    .dashboard__mobile-tools .dashboard__user-info {
        display: flex;
    }

    .dashboard__search {
        min-width: 0;
    }

    .dashboard__mobile-tools .dashboard__user-menu,
    .dashboard__mobile-tools .dashboard__notify-menu {
        display: none;
    }

    .dashboard__notify-menu {
        width: 100%;
    }

    .dashboard__notify-list {
        max-height: none;
        padding-right: 0;
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    .dashboard__notify-item {
        grid-template-columns: 32px 1fr auto auto;
        padding: 0.6rem;
    }

    .dashboard__notify-avatar {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-xs);
    }

    .dashboard__notify-action {
        padding: 0.5rem 0.7rem;
        font-size: var(--font-size-xs);
    }

    .dashboard__mobile-tools .dashboard__modal-header {
        display: flex;
    }

    .dashboard__sidebar-card {
        padding: var(--space-sm);
        gap: 2px;
    }

    .dashboard__sidebar-label {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .dashboard__sidebar-value {
        font-size: var(--font-size-xl);
        line-height: 1;
    }

    .dashboard__progress {
        height: 4px;
    }

    .dashboard__sidebar-note {
        font-size: 0.7rem;
    }
}

@media (max-width: 520px) {
    .dashboard__topbar {
        padding: var(--space-md);
    }

    .dashboard__title h1 {
        font-size: var(--font-size-xl);
    }

    .dashboard-panel__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   12 - PROFILE PAGE
   ============================================================ */
body.profile-page {
    --dashboard-border: hsla(185, 45%, 55%, 0.2);
    --header-offset: 101px;
    background:
        radial-gradient(circle at 10% 5%, hsla(188, 47%, 85%, 0.35), transparent 55%),
        radial-gradient(circle at 90% 0%, hsla(146, 57%, 75%, 0.35), transparent 45%),
        linear-gradient(180deg, #F7FDFA 0%, #FFFFFF 60%, #F5FEFF 100%);
}

.profile-page .main {
    padding-top: 0;
}

.profile-hero {
    background:
        linear-gradient(180deg,
            hsla(187, 100%, 99%, 0.9) 0%,
            hsla(185, 85%, 97%, 0.9) 70%,
            hsla(185, 84%, 94%, 1) 100%
        ),
        url('../img/banner-fondo.webp');
    background-size: cover, 115% auto;
    background-position: center top, center 20%;
    background-repeat: no-repeat;
    border-bottom: 1px solid #E66491;
    padding-top: calc(var(--header-offset) + var(--space-lg));
    animation: profile-hero-drift 24s ease-in-out infinite;
}

@keyframes profile-hero-drift {
    0% {
        background-position: center top, center 20%;
    }
    50% {
        background-position: center top, center 55%;
    }
    100% {
        background-position: center top, center 20%;
    }
}

@keyframes profile-hero-drift-x {
    0% {
        background-position: center top, 40% 20%;
    }
    50% {
        background-position: center top, 60% 20%;
    }
    100% {
        background-position: center top, 40% 20%;
    }
}

.profile-hero__card {
    background: hsla(0, 0%, 100%, 0.2);
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 10px 20px hsla(185, 46%, 43%, 0.2);
    padding: var(--space-lg);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
}

.profile-hero__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--dashboard-border);
    background: linear-gradient(135deg, hsla(185, 45%, 55%, 0.15), hsla(146, 57%, 68%, 0.3));
}

.profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.profile-hero__tag {
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #005359;
    border: 1px solid var(--dashboard-border);
    padding: 0.25rem 0.5rem;
    background: hsla(188, 47%, 55%, 0.1);
}

.profile-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
}

.profile-hero__actions .profile__button {
    width: 100%;
    text-align: center;
}

.profile__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.profile__label {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #59B7C0;
}

.profile__label--muted {
    color: #6B7B7C;
    letter-spacing: 0.06em;
    text-transform: none;
}

.profile__input,
.profile__select,
.profile__textarea {
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    padding: 0.55rem 0.75rem;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: #005359;
}

.profile__textarea {
    padding: 0.65rem 0.75rem;
    line-height: var(--line-height-normal);
}

.profile__input-wrap .profile__input {
    width: 100%;
}

.profile__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.profile__input-wrap .profile__input {
    padding-right: 2.75rem;
}

.profile__password-toggle {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #7A9FA1;
    pointer-events: auto;
}

.profile__password-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.profile__password-toggle.is-active {
    color: #59B7C0;
}

.profile__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2359B7C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem;
}

.profile__input--filled {
    background: #EEF1F4;
    border-color: #D7DEE5;
}

.profile__url-input {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.profile__url-prefix {
    background: #F5F7FA;
    border-right: 1px solid var(--dashboard-border);
    color: #005359;
    padding: 0.65rem 0.75rem;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile__input--inline {
    border: 0;
    padding: 0.65rem 0.75rem;
    flex: 1;
}

.profile__url-copy {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: #59B7C0;
    background: transparent;
    cursor: pointer;
    border: 1px solid var(--dashboard-border);
    position: static;
}

.profile__url-copy svg {
    width: 18px;
    height: 18px;
}

.profile__url-copy:hover {
    color: #005359;
    background: hsla(185, 45%, 55%, 0.08);
}

.profile__url-copy--full {
    display: none;
    width: 100%;
    margin-top: var(--space-sm);
    justify-content: center;
    padding: 0.6rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-size-xs);
}

.profile__url-copy--inline {
    width: 36px;
    border-left: 1px solid var(--dashboard-border);
}

.profile__alert {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    padding: 1.1rem 1.5rem 1.1rem 2.25rem;
    border-radius: 0;
    background: #FFFFFF;
    color: #005359;
    font-size: var(--font-size-base);
    border: 1px solid #DCE8EA;
    box-shadow: 0 18px 32px rgba(0, 83, 89, 0.08);
    position: relative;
}

.profile__alert svg {
    display: none;
}

.profile__alert.is-visible {
    display: flex;
}

.profile__alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: #7EDCA7;
}

.profile-toast {
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    background: #FFFFFF;
    color: #005359;
    border: 1px solid #DCE8EA;
    padding: 0.9rem 1.25rem 0.9rem 2rem;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    z-index: 130001;
    width: min(520px, calc(100% - 2rem));
    box-shadow: 0 14px 26px rgba(0, 83, 89, 0.12);
    border-radius: 0;
    position: fixed;
}

.profile-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.profile-toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #7EDCA7;
}

@media (max-width: 640px) {
    .profile-toast {
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    body.budget-page .profile-toast.profile-toast--budget-offset {
        bottom: calc(70px + env(safe-area-inset-bottom));
    }

    body.budget-page .profile-toast.profile-toast--budget-modal-offset {
        bottom: calc(102px + env(safe-area-inset-bottom));
    }
}

.profile__textarea {
    min-height: 120px;
    resize: vertical;
}

.profile__input:focus,
.profile__select:focus,
.profile__textarea:focus {
    outline: 2px solid #59B7C0;
    outline-offset: 1px;
}

.profile__field.is-invalid .profile__input,
.profile__field.is-invalid .profile__textarea,
.profile__field.is-invalid .profile__select {
    border-color: #E66491;
    outline-color: #E66491;
}

.profile__field.is-invalid .profile__label {
    color: #E66491;
}

.profile__error {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: #E66491;
}

.profile-section {
    padding-top: var(--space-lg);
}

.profile__card {
    scroll-margin-top: calc(var(--header-offset) + var(--space-lg));
}

@media (max-width: 900px) {
    .profile-hero__card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-hero__avatar {
        margin: 0 auto;
    }

    .profile-hero__actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .budget-page .profile-hero {
        padding-top: calc(var(--header-offset) + var(--space-md));
    }

    .budget-page .profile-hero__card {
        padding: 1.15rem 1.1rem;
        gap: 0.75rem;
    }

    .budget-page .profile-hero__avatar {
        width: 76px;
        height: 76px;
    }

    .budget-page .profile-hero__info {
        display: grid;
        justify-items: center;
        gap: 0.3rem;
    }

    .budget-page .profile__title {
        font-size: clamp(2rem, 4vw, 2.45rem);
        line-height: 1.02;
    }

    .budget-page .profile__subtitle {
        max-width: 38ch;
        line-height: 1.4;
    }

    .budget-page .profile-hero__actions {
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .budget-page .profile-hero__actions .profile__button {
        width: 100%;
        padding-inline: 1.25rem;
        justify-content: center;
    }
}

@media (max-width: 680px) {
    .profile-page .main {
        padding-top: 0;
    }
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #59B7C0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #E66491;
    transform: rotate(45deg);
}

.breadcrumbs__link {
    color: inherit;
    opacity: 0.8;
}

.breadcrumbs__link:hover {
    opacity: 1;
}

.breadcrumbs__current {
    color: #005359;
}

.profile {
    --profile-tabs-offset: calc(var(--space-lg) + 96px);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.profile__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.profile__title {
    font-size: var(--font-size-2xl);
    color: #005359;
}

.profile__subtitle {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
    max-width: 60ch;
    line-height: 1.5em;
    text-wrap: balance;
}

.profile__body {
    display: grid;
    gap: var(--space-lg);
}

.profile__panels {
    display: grid;
    gap: var(--space-lg);
}

.profile__tabs {
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm);
    border-radius: 0;
    width: 100%;
    position: sticky;
    top: var(--profile-tabs-offset);
    z-index: calc(var(--z-sticky) - 1);
    align-self: start;
    max-width: 100%;
    overflow: hidden;
}

.profile__tabs-list {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: 0;
    scroll-snap-type: x proximity;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.profile__tab {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #005359;
    padding: 0.55rem 0.9rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    scroll-snap-align: center;
}

.profile__tab.is-active {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    border-color: transparent;
}

.profile__tab:focus-visible {
    outline: 2px solid #59B7C0;
    outline-offset: 2px;
}

.profile__panel {
    display: none;
    scroll-margin-top: calc(var(--profile-tabs-offset) + var(--space-md));
}

.profile__panel.is-active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

.profile__card {
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    box-shadow: 0 14px 26px rgba(0, 83, 89, 0.12);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border-radius: 0;
    min-width: 0;
}

.profile__card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__card-title {
    font-size: var(--font-size-lg);
    color: #005359;
    overflow-wrap: anywhere;
}

.profile__card-subtitle {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
    overflow-wrap: anywhere;
}

.profile__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.profile__form-grid--single {
    grid-template-columns: 1fr;
}

.profile__field--full {
    grid-column: 1 / -1;
}

.profile__media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.profile__media-card {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__media-card.is-selected {
    border-color: #59B7C0;
    background: hsla(185, 45%, 55%, 0.08);
}

.profile__media-label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #59B7C0;
}

.profile__media-preview {
    background: #F5F7FA;
    border: 1px solid var(--dashboard-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.profile__media-preview--avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}

.profile__media-preview--banner {
    width: 100%;
    height: 140px;
}

.profile__media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile__media-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.profile__media-upload {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #005359;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--dashboard-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.profile__media-upload svg {
    width: 14px;
    height: 14px;
}

.profile__media-upload:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 83, 89, 0.12);
}

.profile__media-upload:focus-visible {
    outline: 2px solid #59B7C0;
    outline-offset: 2px;
}

.profile__media-upload--avatar {
    right: 0.35rem;
    bottom: 0.35rem;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
}

.profile__media-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.profile__media-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.profile__media-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.profile__media-label i {
    font-size: 1rem;
    color: #59B7C0;
}

.profile__media-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: hsla(184, 100%, 17%, 0.55);
}

.profile__media-meta::before {
    content: "/";
    color: #59B7C0;
}

.profile__media-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #005359;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    cursor: pointer;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}

.profile__media-action i {
    font-size: 0.9rem;
    letter-spacing: 0;
}

.profile__media-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 14px rgba(0, 83, 89, 0.12);
    border-color: #59B7C0;
    color: #59B7C0;
}

.profile__media-action:focus-visible {
    outline: 2px solid #59B7C0;
    outline-offset: 2px;
}

.profile__media-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem;
    border: 1px solid var(--dashboard-border);
    background: hsla(185, 45%, 55%, 0.06);
}

.profile__media-filename {
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.profile__media-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 0;
    color: #D34D78;
    border: 0;
    background: transparent;
    cursor: pointer;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-normal), color var(--transition-normal);
}

.profile__media-clear svg {
    width: 16px;
    height: 16px;
    display: block;
}

.profile__media-card.is-selected .profile__media-clear {
    visibility: visible;
    pointer-events: auto;
}

.profile__media-clear:hover {
    transform: translateY(-1px);
    color: #E66491;
}

.profile__media-clear:focus-visible {
    outline: 2px solid #E66491;
    outline-offset: 2px;
}

.profile__media-card.is-selected .profile__media-file {
    border-color: #59B7C0;
    background: hsla(185, 45%, 55%, 0.12);
}

.profile__media-card.is-selected .profile__media-filename {
    color: #005359;
}

.profile__media-preview--banner {
    height: 160px;
}

.profile__media-preview--avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-inline: auto;
}

.profile__note--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.profile__label--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.profile__label--icon i {
    font-size: 1rem;
    color: #59B7C0;
}

.profile__subsection {
    border: 1px solid var(--dashboard-border);
    background: #F7FBFC;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__subsection-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__subsection-header--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.profile__subsection-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__subsection-title {
    font-size: var(--font-size-lg);
    color: #005359;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.profile__subsection-title i {
    font-size: 1rem;
    color: #59B7C0;
}

.profile__subsection-subtitle {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
}

.profile__form-grid--compact {
    gap: var(--space-sm);
}

.profile__radio-group--pills {
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.profile__radio-group--compact {
    gap: var(--space-xs);
}

.profile__pair-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.profile__pair-card {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.profile__pair-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.profile__radio--pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.profile__radio--pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.profile__radio--pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--dashboard-border);
    border-radius: 999px;
    background: #FFFFFF;
    color: #005359;
    cursor: pointer;
    transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.profile__radio--pill input:checked + span {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 8px 14px rgba(86, 179, 194, 0.25);
}

.profile__button--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.profile__button--icon i {
    font-size: 1rem;
}

.profile-preview {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    overflow: hidden;
}

.profile-preview__banner {
    height: 180px;
    background: #F5F7FA;
}

.profile-preview__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-preview__body {
    position: relative;
    padding: calc(var(--space-lg) + 5.5rem) var(--space-lg) var(--space-lg);
    text-align: center;
    background:
        radial-gradient(circle at 12% 0%, hsla(188, 47%, 85%, 0.25), transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FDFA 100%);
    border-top: 1px solid #E66491;
}

.profile-preview__avatar {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 120px;
    height: 120px;
    border-radius: 0;
    border: none;
    background: transparent;
    border: 1px solid #E66491;
    /* overflow: hidden; */
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.16);
    z-index: 1;
}

.profile-preview__avatar--mask {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-self: center;

    img {
        object-fit: cover;
    }
}

.profile-preview__avatar::before,
.profile-preview__avatar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    pointer-events: none;
    box-sizing: border-box;
}

.profile-preview__avatar::before {
    width: 100%;
    height: 100%;
    border: 1px solid #E66491;
    border-radius: 0;
    z-index: -1;
    animation: avatar-diamond-outline 5s ease-in-out infinite;
}
/* 
.profile-preview__avatar::after {
    width: 75%;
    height: 75%;
    background: #E66491;
    opacity: 0.85;
    border-radius: 0;
    z-index: -2;
    animation: avatar-diamond-core 5s ease-in-out infinite;
} */

.profile-preview__avatar img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: rotate(-45deg) scale(1.42);
}


@keyframes avatar-diamond-outline {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.08);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.16);
    }
}

@keyframes avatar-diamond-core {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.75);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.69);
    }
}

.profile-preview__names {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: #005359;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.profile-preview__eyebrow {
    display: inline-flex;
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #E66491;
    margin-bottom: var(--space-xs);
}

.profile-preview__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #E66491;
    transform: rotate(45deg);
}

.profile-preview__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.profile-preview__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 1.15rem;
    padding-right: 0.9rem;
    border-radius: var(--radius-full);
    corner-shape: bevel;
    border: 1px solid var(--dashboard-border);
    background: hsla(185, 45%, 55%, 0.12);
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #005359;
    line-height: 1.2;
    span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1em;
        font-weight: bold;
        background-color: #59B7C0;
        border-radius: 2rem;
        padding: 0.4rem 0.95rem;
        color: white;
        corner-shape: bevel;
    }
}

.profile-preview__badge i {
    font-size: 0.95rem;
    color: #59B7C0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.profile-preview__message {
    font-size: var(--font-size-sm);
    color: #6B7B7C;
    max-width: 70ch;
    margin: 0 auto;
    line-height: 1.5em;
}

.profile__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.profile__form-grid + .profile__actions,
.profile__form-grid--single + .profile__actions {
    margin-top: var(--space-md);
}

.profile__button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #005359;
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-position var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.profile__button--primary {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #FFFFFF;
    border-color: transparent;
}

.profile__button--ghost {
    background: transparent;
}

.profile__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.12);
    border-color: #59B7C0;
    color: #59B7C0;
}

.profile__button--primary:hover {
    background-position: 100% 50%;
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 16px 24px rgba(86, 179, 194, 0.25);
}

.profile__button:disabled,
.profile__button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.profile__button--primary:disabled,
.profile__button--primary[aria-disabled="true"] {
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.45) 0%, rgba(126, 220, 167, 0.45) 100%);
    color: rgba(255, 255, 255, 0.9);
}

.profile__note {
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
}

.profile__avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.profile__avatar {
    width: 72px;
    height: 72px;
    border: 1px solid var(--dashboard-border);
    background: linear-gradient(135deg, hsla(185, 45%, 55%, 0.15), hsla(146, 57%, 68%, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    color: #005359;
}

.profile__avatar svg {
    width: 32px;
    height: 32px;
    fill: #59B7C0;
}

.profile__submit.btn {
    font-size: 18px;
    padding: 0.5rem 1.6rem;
    padding-bottom: calc(0.5rem + 10px);
    padding-right: calc(1.6rem + 10px);
}

.profile__url {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.profile__link {
    color: #59B7C0;
    font-size: var(--font-size-sm);
    word-break: break-all;
}

.profile__code {
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #005359;
}

.profile__radio-group {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.profile__radio {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: #005359;
}

.profile__radio input {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #C8D6D8;
    border-radius: 50%;
    background: #FFFFFF;
    position: relative;
    margin: 0;

    & ~ span {
        corner-shape: bevel;
        line-height: 1em;
        padding-top: .5rem;
    }
}

.profile__radio input:checked {
    border-color: #59B7C0;
}

.profile__radio input:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #59B7C0;
    transform: translate(-50%, -50%);
}

.profile__radio-group--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

.profile-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-normal), visibility 0s linear var(--transition-normal);
}

.profile-modal.is-open,
.profile-modal.is-closing {
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--transition-normal), visibility 0s linear 0s;
}

.profile-modal.is-open {
    opacity: 1;
}

.profile-modal.is-closing {
    opacity: 0;
}

.profile-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.profile-modal__dialog {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(0, 83, 89, 0.12);
    border-radius: 0;
    width: min(560px, 100%);
    box-shadow: var(--shadow-xl);
    z-index: 1;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 280ms ease, opacity 220ms ease;
}

.profile-modal.is-open .profile-modal__overlay {
    opacity: 1;
}

.profile-modal.is-open .profile-modal__dialog {
    opacity: 1;
    transform: translateY(0);
}

.profile-modal.is-closing .profile-modal__overlay {
    opacity: 0;
}

.profile-modal.is-closing .profile-modal__dialog {
    opacity: 0;
    transform: translateY(20px);
}

.profile-modal__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--dashboard-border);
}

.profile-modal__header h4 {
    font-size: var(--font-size-lg);
    color: #005359;
}

.profile-modal__header--center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.profile-modal__header--center h4 {
    margin: 0;
}

.profile-modal__header--center p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--font-size-sm);
    color: #6B7B7C;
    line-height: 1.5;
}

.profile-modal__body {
    padding: var(--space-lg);
}

.profile-modal__body--stack {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.profile-qr {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-qr svg {
    width: min(280px, 100%);
    height: auto;
}

.profile-modal__footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--dashboard-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.profile-modal--cropper .profile-modal__dialog {
    width: min(920px, 100%);
}

.profile-modal--cropper .profile-modal__body {
    padding: var(--space-md);
}

.profile-cropper {
    width: 100%;
    height: min(70vh, 520px); /* Más alto para banners grandes */
    background: repeating-conic-gradient(#cfd6d9 0% 25%, #e6ebee 0% 50%) 50% / 32px 32px;
    border: 1px solid var(--dashboard-border);
    overflow: visible; /* Permite que el crop-box sea completamente visible */
}

.profile-cropper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-modal--cropper .cropper-view-box {
    outline-color: rgba(230, 100, 145, 0.85);
}

.profile-modal--cropper .cropper-crop-box {
    position: absolute;
}

.profile-modal--cropper.is-avatar .cropper-crop-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom right, rgba(230, 100, 145, 0.5) 0 50%, transparent 50%) top left,
        linear-gradient(to bottom left, rgba(230, 100, 145, 0.5) 0 50%, transparent 50%) top right,
        linear-gradient(to top left, rgba(230, 100, 145, 0.5) 0 50%, transparent 50%) bottom right,
        linear-gradient(to top right, rgba(230, 100, 145, 0.5) 0 50%, transparent 50%) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;
}

.profile-modal--cropper.is-avatar .cropper-crop-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #E66491;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
    pointer-events: none;
    box-sizing: border-box;
    z-index: 3;
}

.profile-modal--cropper .cropper-face {
    background-color: transparent;
}

@media (min-width: 1024px) {
    .profile__body {
        grid-template-columns: 220px 1fr;
        align-items: start;
    }

    .profile {
        --profile-tabs-offset: calc(var(--space-xl) + 96px);
    }

    .profile__tabs-list {
        flex-direction: column;
        overflow: visible;
        padding-bottom: 0;
    }

    .profile__tab {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 900px) {
    .profile__form-grid {
        grid-template-columns: 1fr;
    }

    .profile__media-row {
        grid-template-columns: 1fr;
    }

    .profile__pair-grid {
        grid-template-columns: 1fr;
    }

    .profile__card-header {
        padding: 1rem 1rem 0 1rem;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .list-card__subtitle {
        text-wrap: balance;
        text-align: center;
    }

    .list-card__intro {
        align-items: center;
    }
}

@media (max-width: 680px) {
    .profile__card {
        padding: var(--space-md);
    }

    .profile__tabs {
        padding: var(--space-xs);
    }

    .profile {
        --profile-tabs-offset: calc(var(--space-lg) + 92px);
    }

    .profile__title {
        font-size: var(--font-size-xl);
    }

    .profile__panel {
        display: block;
    }

    .profile-preview__banner {
        height: 140px;
    }

    .profile-preview__body {
        padding: calc(var(--space-lg) + 3.75rem) var(--space-lg) var(--space-lg);
    }

    .profile-preview__avatar {
        width: 96px;
        height: 96px;
        top: -48px;
        border-width: 1px;
    }

    .profile-preview__names {
        font-size: var(--font-size-lg);
    }

    .profile-preview__eyebrow {
        letter-spacing: 0.18em;
    }

    .profile-preview__badge {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.4rem 0.9rem;
        padding-right: 0.7rem;
        line-height: 1.2;
        span {
            font-size: .75rem;
            display: inline-flex;
            align-items: center;
            line-height: 1em;
            padding: 0.35rem 0.8rem;
        }

    }
}

@media (max-width: 540px) {
    body.profile-page {
        --header-offset: 74px;
    }

    .profile-hero {
        padding-top: calc(var(--header-offset) - 6px + 1.5rem);
        background-size: cover, 160% auto;
        background-position: center top, 40% 20%;
        animation: profile-hero-drift-x 26s ease-in-out infinite;
    }

    .profile-hero__card {
        padding: var(--space-md);
        gap: var(--space-sm);
    }

    .profile-hero__avatar {
        width: 64px;
        height: 64px;
    }

    .profile-hero__info {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .breadcrumbs__list {
        justify-content: center;
    }

    .profile__subtitle {
        text-wrap: balance;
    }

    .profile-hero__meta {
        gap: var(--space-xs);
        justify-content: center;
    }

    .profile-hero__actions {
        width: 100%;
    }

    .profile__card {
        padding: var(--space-sm);
    }

    .profile__actions {
        width: 100%;
    }

    .profile__actions .profile__button {
        width: 100%;
        text-align: center;
    }

    .profile__media-grid {
        grid-template-columns: 1fr;
    }

    .profile__media-preview--banner {
        height: 120px;
    }

    .profile__media-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile__media-action {
        width: 100%;
        justify-content: center;
    }

    .profile__media-preview--avatar {
        width: 96px;
        height: 96px;
    }

    .profile__subsection {
        padding: var(--space-sm);
    }

    .profile__subsection-header--inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile__pair-fields {
        grid-template-columns: 1fr;
    }

    .profile__url-input {
        flex-direction: row;
        align-items: stretch;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .profile__url-prefix {
        max-width: 48%;
        flex: 0 1 48%;
        border-right: 1px solid var(--dashboard-border);
        border-bottom: 0;
        font-size: var(--font-size-xs);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .profile__input--inline {
        min-width: 0;
        flex: 1 1 0;
        width: 0;
        font-size: var(--font-size-xs);
        box-sizing: border-box;
    }

    .profile__url-copy {
        height: auto;
        border-top: 0;
        justify-content: center;
        width: 100%;
    }

    .profile__url-copy--inline {
        display: none;
    }

    .profile__url-copy--full {
        display: inline-flex;
        box-sizing: border-box;
        max-width: 100%;
    }

    .profile-toast {
        right: 1rem;
        left: 1rem;
        bottom: 1rem;
    }
}


.list-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
}

.list-card__header .profile__actions {
    justify-self: end;
    flex-shrink: 0;
}

.list-card__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.list-card__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--font-size-lg);
    color: #005359;
}

.list-card__title::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #E66491;
    transform: rotate(45deg);
    display: inline-block;
}

.list-card__subtitle {
    font-size: var(--font-size-sm);
    color: hsla(184, 100%, 17%, 0.6);
}

.profile__button--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gift-preset {
    margin-bottom: var(--space-sm);
}

.gift-preset[hidden] {
    display: none !important;
}

.gift-preset__button {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: clamp(1rem, 1.6vw, 1.25rem);
    border: 1px solid rgba(89, 183, 192, 0.35);
    background:
        radial-gradient(circle at top right, rgba(126, 220, 167, 0.18), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 248, 249, 0.94) 100%);
    color: #005359;
    text-align: left;
    border-radius: 0;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.gift-preset__button:hover {
    transform: translateY(-2px);
    border-color: rgba(89, 183, 192, 0.65);
    box-shadow: 0 14px 24px rgba(0, 83, 89, 0.12);
}

.gift-preset__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(89, 183, 192, 0.32);
    background: #FFFFFF;
    color: #59B7C0;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.gift-preset__content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.gift-preset__content strong {
    font-size: var(--font-size-md);
    color: #005359;
}

.gift-preset__content span {
    color: hsla(184, 100%, 17%, 0.68);
    font-size: var(--font-size-sm);
}

.gift-preset__meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(89, 183, 192, 0.32);
    background: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    color: #005359;
    white-space: nowrap;
}

.gift-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.gift-list.is-empty .gift-list__head,
.gift-list.is-empty .gift-list__summary,
.gift-list.is-empty .gift-list__body {
    display: none;
}

.gift-list__empty {
    display: none;
    position: relative;
    border: 1px dashed rgba(89, 183, 192, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 248, 249, 0.9) 100%);
    padding: calc(var(--space-lg) + 0.2rem);
    border-radius: 0;
    overflow: hidden;
    text-align: center;
}

.gift-list__empty::before,
.gift-list__empty::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    opacity: 0.35;
    pointer-events: none;
}

.gift-list__empty::before {
    width: 140px;
    height: 140px;
    right: -40px;
    top: -60px;
    background: radial-gradient(circle, rgba(126, 220, 167, 0.5) 0%, rgba(126, 220, 167, 0) 70%);
}

.gift-list__empty::after {
    width: 180px;
    height: 180px;
    left: -60px;
    bottom: -90px;
    background: radial-gradient(circle, rgba(230, 100, 145, 0.45) 0%, rgba(230, 100, 145, 0) 70%);
}

.gift-list.is-empty .gift-list__empty {
    display: block;
}

.gift-list__empty-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    border-radius: 0;
}

.gift-list__empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    color: #E66491;
    font-size: 1.8rem;
    box-shadow: 0 12px 22px rgba(0, 83, 89, 0.1);
}

.gift-list__empty-content h4 {
    font-size: var(--font-size-lg);
    color: #005359;
    margin: 0;
}

.gift-list__empty-content p {
    margin: 0;
    color: hsla(184, 100%, 17%, 0.65);
    max-width: 460px;
}

.gift-list__empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.gift-list__empty-tip {
    font-size: var(--font-size-xs);
    color: #005359;
    background: rgba(89, 183, 192, 0.12);
    padding: 0.4rem 0.75rem;
    border-radius: 0;
}

.gift-list__empty-tip span {
    font-weight: var(--font-weight-bold);
}

.gift-list__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.gift-list__head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 120px 160px 72px;
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: hsla(184, 100%, 17%, 0.6);
}

.gift-list__head span {
    display: block;
}

.gift-list__head span:nth-child(2) {
    justify-self: start;
    text-align: left;
    padding-left: 0;
    margin-left: calc(-1 * (28px + var(--space-xs)));
}

.gift-list__head span:nth-child(3) {
    justify-self: center;
    text-align: center;
}

.gift-list__head span:nth-child(4) {
    justify-self: end;
    text-align: right;
    padding-right: 0.65rem;
}
.menu-item-small {
    font-size: 0.92em;
    line-height: 1.1;
    letter-spacing: -0.01em;
}



.gift-list__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 120px 160px 72px;
    gap: var(--space-xs);
    align-items: center;
    padding: var(--space-sm);
    border: 1px solid var(--dashboard-border);
    background: #ECF8F9;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.gift-list__row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: transparent;
}

.gift-list__row:nth-child(odd) {
    background: #ECF8F9;
}

.gift-list__row:hover {
    border-color: rgba(89, 183, 192, 0.6);
    box-shadow: 0 10px 20px rgba(0, 83, 89, 0.12);
}

.gift-list__row.is-dragging {
    opacity: 0.75;
    border-style: dashed;
    border-color: #E66491;
    background: linear-gradient(90deg, rgba(230, 100, 145, 0.12), rgba(255, 255, 255, 0.9));
    box-shadow: 0 18px 32px rgba(0, 83, 89, 0.18);
    transform: scale(1.01);
    z-index: 2;
}

.gift-list__field {
    min-width: 0;
}

.gift-list__field .profile__input {
    width: 100%;
}

.qty-control {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    width: 100%;
}

.qty-control .profile__input {
    border: none;
    text-align: center;
    padding: 0.55rem 0.25rem;
}

.qty-btn {
    height: 100%;
    width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #005359;
    background: rgba(89, 183, 192, 0.12);
    border-right: 1px solid var(--dashboard-border);
    font-weight: var(--font-weight-bold);
    transition: var(--transition-fast);
}

.qty-btn:last-child {
    border-right: none;
    border-left: 1px solid var(--dashboard-border);
}

.qty-btn:hover {
    background: rgba(89, 183, 192, 0.2);
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.money-input {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.65rem;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    width: 100%;
}

.money-input .profile__input {
    border: none;
    padding: 0.55rem 0;
    text-align: right;
    width: 100%;
}

.money-prefix {
    font-size: var(--font-size-xs);
    color: #6B7B7C;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-bold);
}

.gift-name {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
}

.gift-name__input {
    width: 100%;
}

.emoji-picker {
    position: relative;
}

.emoji-picker__toggle {
    width: 36px;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    color: #005359;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: var(--transition-fast);
}

.emoji-picker__toggle:hover {
    border-color: #59B7C0;
    color: #59B7C0;
}

.emoji-picker__toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.emoji-picker__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    max-height: 160px;
    padding: 0.4rem;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 5;
}

.emoji-picker.is-open .emoji-picker__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.emoji-picker__item {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid transparent;
    background: rgba(89, 183, 192, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--transition-fast);
}

.emoji-picker__item:hover {
    border-color: #59B7C0;
    background: rgba(89, 183, 192, 0.2);
}

#gift-create-modal .profile-modal__dialog,
#gift-create-modal .profile-modal__body {
    overflow: visible;
}

#gift-create-modal .emoji-picker__menu {
    z-index: 6;
}
.money-input:focus-within,
.qty-control:focus-within {
    border-color: #59B7C0;
    box-shadow: none;
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
}

.money-input__field:focus-visible,
.qty-control .profile__input:focus-visible {
    outline: none;
}

.gift-list__drag {
    width: 28px;
    height: 28px;
    border: 1px dashed var(--dashboard-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5C7C7E;
    cursor: grab;
}

.gift-list__drag:active {
    cursor: grabbing;
}

.gift-list__actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

.gift-list__icon-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #005359;
    transition: var(--transition-fast);
}

.gift-list__icon-btn:hover {
    border-color: #59B7C0;
    color: #59B7C0;
}

.gift-list__icon-btn--danger {
    color: #E66491;
}

.gift-list__icon-btn--save {
    border-color: #59B7C0;
    background: #59B7C0;
    color: #FFFFFF;
}

.gift-list__icon-btn--save:hover {
    border-color: #3da7b1;
    background: #3da7b1;
    color: #FFFFFF;
}

.gift-list__row.is-editing {
    border-color: #59B7C0;
    background: linear-gradient(90deg, rgba(89, 183, 192, 0.08), #FFFFFF 45%);
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.12);
}

.gift-list__row.is-editing::before,
.gift-list__row:hover::before {
    background: #59B7C0;
}

.gift-list__row.is-editing .gift-list__drag {
    border-color: #59B7C0;
    color: #005359;
}

.gift-list__row.is-editing .gift-list__field--name .profile__input {
    border-color: #59B7C0;
    background: #F8FFFE;
    box-shadow: 0 0 0 1px rgba(89, 183, 192, 0.2);
}

.gift-list__row.is-editing .money-input,
.gift-list__row.is-editing .qty-control {
    border-color: #59B7C0;
    background: #F8FFFE;
}

.gift-list__row:not(.is-editing) .gift-list__field--name .profile__input {
    background: transparent;
    border-color: transparent;
    color: #005359;
}

.gift-list__row:not(.is-editing) .money-input,
.gift-list__row:not(.is-editing) .qty-control {
    background: transparent;
    border-color: transparent;
}

.gift-list__row:not(.is-editing) .qty-btn {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

.gift-list__row:not(.is-editing) .qty-control {
    justify-content: center;
    gap: 0;
}

.gift-list__row:not(.is-editing) .qty-control .profile__input {
    text-align: center;
    color: #6B7B7C;
    font-weight: var(--font-weight-medium);
    background: transparent;
}

.gift-list__row:not(.is-editing) .money-input .profile__input {
    color: #005359;
    font-weight: var(--font-weight-bold);
    background: transparent;
}

.gift-list__row:not(.is-editing) .money-prefix {
    color: #6B7B7C;
}

.gift-list__row:not(.is-editing) .emoji-picker__toggle {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    overflow: hidden;
}

.gift-list__toggle-btn.is-shaking {
    animation: gift-edit-shake 0.45s ease;
}

@keyframes gift-edit-shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.gift-list__summary {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--dashboard-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
}

.gift-list__summary .profile__note {
    margin: 0;
}

.gift-total {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--font-size-base);
    color: #005359;
    font-weight: var(--font-weight-bold);
}

.gift-total span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-size-xs);
    color: #6B7B7C;
    font-weight: var(--font-weight-regular);
}

.gift-total strong {
    font-size: var(--font-size-lg);
    color: #005359;
}

.gift-delete {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    border-radius: 0;
    border: 1px solid rgba(230, 100, 145, 0.2);
    background: linear-gradient(135deg, rgba(230, 100, 145, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.gift-delete__icon {
    width: 58px;
    height: 58px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(230, 100, 145, 0.25);
    color: #E66491;
    font-size: 1.6rem;
    box-shadow: 0 12px 22px rgba(0, 83, 89, 0.12);
}

.gift-delete__title {
    margin: 0;
    font-size: var(--font-size-base);
    color: #005359;
    font-weight: var(--font-weight-bold);
}

.gift-delete__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-xs);
    color: hsla(184, 100%, 17%, 0.6);
}

.gift-delete__summary {
    margin-top: var(--space-md);
    display: grid;
    gap: 0.4rem;
    padding: var(--space-md);
    border-radius: 0;
    border: 1px solid var(--dashboard-border);
    background: #F8FBFB;
}

.gift-delete__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.gift-delete__row span {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
    color: #6B7B7C;
}

.gift-delete__row strong {
    font-size: var(--font-size-base);
    color: #005359;
}

.gift-delete__confirm {
    background: linear-gradient(135deg, #E66491 0%, #F28FAE 100%);
    color: #FFFFFF;
    border-color: transparent;
}

.gift-delete__confirm:hover {
    background: linear-gradient(135deg, #D95582 0%, #E8799F 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 16px 24px rgba(230, 100, 145, 0.25);
}

.gift-fab {
    position: fixed;
    right: 1.25rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 30;
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 20px rgba(0, 83, 89, 0.18);
}

.gift-modal__icon {
    width: 64px;
    height: 64px;
    border-radius: 0;
    background: #ECF8F9;
    color: #59B7C0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-sm);
    font-size: 32px;
}

.gift-modal__options {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.gift-modal__options .profile__button {
    width: 100%;
    justify-content: center;
}

.profile-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--dashboard-border);
    border-radius: 0;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #005359;
    padding: 0;
    line-height: 0;
    transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.profile-modal__close i {
    width: 100%;
    height: 100%;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.profile-modal__close svg {
    width: 16px;
    height: 16px;
    display: block;
}

.profile-modal__close:hover {
    border-color: #59B7C0;
    color: #59B7C0;
    transform: translateY(-1px);
}

.profile-modal__close:focus-visible {
    outline: 2px solid #59B7C0;
    outline-offset: 2px;
}

.profile-modal--wide .profile-modal__dialog {
    width: min(920px, 96vw);
}

.gift-suggestions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.gift-suggestion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 130px auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
}

.gift-suggestion .qty-control,
.gift-suggestion .money-input {
    width: 100%;
    min-width: 0;
}

.gift-suggestion .gift-name {
    min-width: 0;
}

.gift-suggestion .gift-name__input {
    color: #005359;
    font-size: var(--font-size-sm);
}

.gift-suggestion .emoji-picker__menu {
    z-index: 10;
}

@media (max-width: 900px) {
    .gift-list__head {
        display: none;
    }

    .gift-list__summary {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
        position: sticky;
        bottom: calc(3.1rem + env(safe-area-inset-bottom));
        background: #FFFFFF;
        padding: 0.6rem var(--space-sm);
        border: 1px solid var(--dashboard-border);
        box-shadow: 0 10px 18px rgba(0, 83, 89, 0.12);
        z-index: 2;
    }

    .gift-total {
        justify-content: flex-end;
        align-items: center;
    }

    .gift-list__summary .profile__note {
        display: none;
    }

    .gift-list__empty {
        text-align: left;
        padding: var(--space-md);
    }

    .gift-preset__button {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0.85rem;
    }

    .gift-preset__meta {
        min-height: 0;
    }

    .gift-list__empty-card {
        align-items: flex-start;
    }

    .gift-list__empty-actions {
        width: 100%;
    }

    .gift-list__empty-actions .profile__button {
        width: 100%;
        justify-content: center;
    }

    .gift-list__empty-icon {
        align-self: center;
    }

    .gift-delete {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .gift-delete__icon {
        justify-self: flex-start;
    }

    .gift-list__row {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 0.6rem;
        padding: 0.75rem;
        padding-left: calc(0.75rem + 4px); /* Compensate for left border */
        padding-top: calc(0.75rem + 38px);
    }

    .gift-list__drag,
    .gift-list__actions {
        position: absolute;
        top: 0.6rem;
    }

    .gift-list__drag {
        left: calc(0.75rem + 4px); /* Compensate for left border */
    }

    .gift-list__actions {
        right: 0.75rem;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .gift-list__field--name {
        grid-column: 1 / -1;
    }

    .gift-list__field--qty {
        grid-column: 1 / 2;
    }

    .gift-list__field--price {
        grid-column: 2 / 3;
    }

    /* Mobile visual grouping improvements */
    .gift-list__field--qty,
    .gift-list__field--price {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .gift-list__field--qty::before,
    .gift-list__field--price::before {
        font-size: 0.68rem;
        font-weight: var(--font-weight-medium);
        color: #6B7B7C;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .gift-list__field--qty::before {
        content: 'Cantidad';
    }

    .gift-list__field--price::before {
        content: 'Precio';
    }

    /* Visual separator between name and qty/price */
    .gift-list__field--qty,
    .gift-list__field--price {
        padding-top: 0.65rem;
        margin-top: 0.25rem;
        border-top: 1px dashed rgba(89, 183, 192, 0.3);
    }

    /* Subtle border around qty/price controls on mobile */
    .gift-list__row:not(.is-editing) .qty-control,
    .gift-list__row:not(.is-editing) .money-input {
        border: 1px solid rgba(89, 183, 192, 0.2);
        border-radius: var(--radius-sm);
        padding: 0.3rem 0.5rem;
        background: rgba(255, 255, 255, 0.4);
        min-height: 2.2rem;
        display: flex;
        align-items: center;
    }

    .gift-list__row:not(.is-editing) .qty-control .profile__input,
    .gift-list__row:not(.is-editing) .money-input .profile__input {
        padding: 0;
        min-height: auto;
        height: auto;
        line-height: 1.4;
    }

    /* Gift name prominence in non-editing mode */
    .gift-list__row:not(.is-editing) .gift-name__input {
        font-size: 1rem;
        font-weight: var(--font-weight-semibold);
        padding: 0.25rem 0;
    }

    /* Edit mode labels on mobile - slightly more prominent */
    .gift-list__row.is-editing .gift-list__field--qty::before,
    .gift-list__row.is-editing .gift-list__field--price::before {
        color: #005359;
    }

    /* Edit mode separator more visible */
    .gift-list__row.is-editing .gift-list__field--qty,
    .gift-list__row.is-editing .gift-list__field--price {
        border-top-color: rgba(89, 183, 192, 0.45);
    }

    .gift-suggestion {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }

    .gift-suggestion .gift-name {
        grid-column: 1 / -1;
    }

    .gift-suggestion .qty-control {
        grid-column: 1 / 2;
    }

    .gift-suggestion .money-input {
        grid-column: 2 / 3;
    }

    .gift-suggestion .profile__button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .list-card__header {
        display: flex;
        justify-content: center;
        padding: 0.25rem 0.25rem 0.75rem;
    }

    .list-card__intro {
        gap: 0.4rem;
    }

    .list-card__title {
        font-size: 1.05rem;
    }

    .list-card__subtitle {
        font-size: 0.82rem;
        line-height: 1.45;
    }

    .list-card__header .profile__actions {
        justify-self: start;
    }

    .gift-add-btn {
        display: none;
    }

    .gift-fab {
        display: inline-flex;
    }

    .gift-list {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom));
        padding-bottom: 0px;
    }

    .gift-list__body {
        gap: 0.75rem;
    }

    .gift-fab {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        justify-content: center;
        border-radius: 0;
        padding: 0.9rem 1rem;
    }
}

.profile-modal.is-closing {
    pointer-events: none;
}

#gift-suggest-modal .profile-modal__dialog {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

#gift-suggest-modal .profile-modal__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

@media (max-width: 900px) {
    #gift-suggest-modal .profile-modal__dialog {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        margin: 0.5rem;
        width: calc(100% - 1rem);
    }
}

/* ============================================================
   13 - PUBLIC LIST PAGE
   ============================================================ */
body.public-list-page {
    --public-card-border: hsla(185, 45%, 55%, 0.18);
}

.public-list-page .profile-modal__dialog {
    width: min(520px, 92vw);
}

.public-list-page .profile-modal--wide .profile-modal__dialog {
    width: min(680px, 94vw);
}

.public-list-page .profile-modal .profile__input,
.public-list-page .profile-modal .profile__select,
.public-list-page .profile-modal .profile__textarea {
    background: #FDFEFE;
    border-color: rgba(86, 179, 194, 0.45);
    box-shadow: inset 0 0 0 1px rgba(86, 179, 194, 0.12);
}

.public-list-page .profile-modal .profile__input:focus,
.public-list-page .profile-modal .profile__textarea:focus,
.public-list-page .profile-modal .profile__select:focus {
    border-color: rgba(86, 179, 194, 0.8);
}

.public-list-page .profile-modal__header h4,
.public-list-page .profile-modal__header p {
    text-wrap: balance;
}

.public-list-page .profile-modal__header h4 {
    font-size: var(--font-size-xl);
    line-height: 1.3;
}

.public-list-page .profile-modal__header p {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: #6B7B7C;
}

.public-card {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    box-shadow: 0 18px 32px rgba(0, 83, 89, 0.12);
    overflow: visible;
}

.public-list-page .profile-preview {
    border: none;
    box-shadow: none;
}

.public-list-page .profile-preview__eyebrow {
    display: none;
}

.public-list-page .profile-preview__banner {
    height: 220px;
}

.public-list-page .profile-preview__avatar {
    width: 130px;
    height: 130px;
    top: -65px;
}

.public-list-page .profile-preview__body {
    padding: calc(var(--space-lg) + 6rem) var(--space-lg) var(--space-lg);
}

.public-hero {
    padding-top: calc(var(--header-offset) + var(--space-xl));
}

.public-hero__preview-card {
    margin: 0;
}

.public-list {
    padding: var(--space-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-top: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    display: grid;
    gap: var(--space-md);
}

.album-public-page .profile-preview__message {
    max-width: 62ch;
    margin-inline: auto;
    font-size: clamp(0.98rem, 1.15vw, 1.1rem);
    line-height: 1.46;
    text-wrap: balance;
}

.album-public-page .profile-preview__names {
    font-size: clamp(1.82rem, 2.75vw, 2.45rem);
    line-height: 1.12;
}

.album-public-page .profile-preview__upload-button {
    margin-top: var(--space-sm);
    min-width: 210px;
    justify-content: center;
}

.album-public-page .public-list {
    padding-top: var(--space-lg);
}

.public-album-cta {
    border-top: 1px solid var(--dashboard-border);
    padding: clamp(2rem, 3vw, 2.6rem) var(--space-lg);
    background: linear-gradient(135deg, #56B3C2 0%, #3FA99C 100%);
    display: grid;
    justify-items: center;
    gap: 0.84rem;
    text-align: center;
}

.public-album-cta h2 {
    margin: 0;
    color: #FFFFFF;
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 4.2vw, 3rem);
    line-height: 1.1;
}

.public-album-cta__button {
    min-height: 46px;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.88);
    background: #FFFFFF;
    color: #0A6D75;
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.2);
}

.public-album-cta__button:hover {
    border-color: #FFFFFF;
    background: rgba(255, 255, 255, 0.9);
    color: #055E66;
}

.public-album {
    gap: var(--space-lg);
}

.public-album__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: rgba(248, 251, 251, 0.96);
}

.public-album__intro {
    max-width: 62ch;
    margin: 0 auto;
    display: grid;
    gap: 0.42rem;
    text-align: center;
}

.public-album__title {
    margin: 0;
    font-family: var(--font-title);
    color: #0A6D75;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.2;
}

.public-album__text {
    margin: 0;
    color: #4C5F61;
    line-height: 1.45;
    text-wrap: balance;
}

.public-album__grid {
    margin: 0;
}

.public-album__card {
    cursor: pointer;
}

.public-album__card .album-photo-card__media {
    height: 214px;
}

.public-album__card:focus-visible {
    outline: 2px solid rgba(86, 179, 194, 0.65);
    outline-offset: 2px;
}

.public-list__filters {
    display: none;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.public-list__filter {
    min-width: 220px;
}

.gift-list--public {
    margin: 0;
}

.gift-list--public .gift-list__head,
.gift-list--public .gift-list__row {
    grid-template-columns: minmax(0, 1fr) 200px 140px;
}

.gift-list--public .gift-list__head span:nth-child(1) {
    margin-left: 0;
    text-align: left;
}

.gift-list--public .gift-list__head span:nth-child(2) {
    justify-self: center;
    text-align: center;
    margin-left: 0;
}

.gift-list--public .gift-list__head span:nth-child(3) {
    justify-self: end;
    text-align: right;
    padding-right: 0;
}

.gift-list--public .gift-list__head-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gift-list--public .gift-list__head-cell--price {
    justify-content: flex-end;
}

.gift-list__sort {
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #59B7C0;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.gift-list__sort::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid currentColor;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.gift-list__sort[data-dir="desc"]::before {
    transform: rotate(180deg);
}

.gift-list__sort.is-idle {
    opacity: 0.45;
}

.gift-list__sort.is-active {
    opacity: 1;
    border-color: rgba(86, 179, 194, 0.7);
    background: rgba(86, 179, 194, 0.08);
    box-shadow: 0 6px 12px rgba(86, 179, 194, 0.2);
}

.gift-list__sort:focus-visible {
    outline: 2px solid rgba(86, 179, 194, 0.7);
    outline-offset: 2px;
}

.gift-list--public .gift-list__row {
    align-items: center;
    gap: var(--space-sm);
}

.gift-list--public .gift-list__row.is-selected {
    border-color: rgba(86, 179, 194, 0.85);
    background:
        linear-gradient(180deg, rgba(86, 179, 194, 0.1) 0%, rgba(126, 220, 167, 0.12) 100%);
    box-shadow:
        0 8px 16px rgba(86, 179, 194, 0.18),
        inset 0 0 0 1px rgba(86, 179, 194, 0.2);
}

.gift-list--public .gift-list__row.is-selected::before {
    background: linear-gradient(180deg, #56B3C2 0%, #7EDCA7 100%);
    width: 4px;
}

.public-gift__name {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.public-gift__emoji {
    font-size: 1rem;
}

.public-gift__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    font-size: var(--font-size-xxs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7B7C;
}

.public-gift__value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: #005359;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.public-gift__qty {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.public-gift__price {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
    color: #005359;
    text-align: right;
}

.public-gift__amount {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.public-list-page .gift-list__row:not(.is-editing) .qty-control {
    background: #FFFFFF;
    border-color: var(--dashboard-border);
}

.public-list-page .gift-list__row:not(.is-editing) .qty-control .profile__input {
    color: #005359;
    background: #FFFFFF;
}

.public-list-page .gift-list__row:not(.is-editing) .qty-btn {
    opacity: 1;
    pointer-events: auto;
    width: 32px;
    min-width: 32px;
    padding: 0;
    overflow: visible;
    border-right: 1px solid var(--dashboard-border);
}

.public-list-page .gift-list__row:not(.is-editing) .qty-btn:last-child {
    border-right: none;
    border-left: 1px solid var(--dashboard-border);
}

.public-total {
    position: sticky;
    bottom: var(--space-lg);
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    color: #005359;
    background: #FFFFFF;
    border: 1px solid var(--dashboard-border);
    padding: var(--space-md);
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.12);
    width: min(360px, 100%);
    margin-inline: auto;
    z-index: 5;
}

.public-total p {
    font-size: var(--font-size-sm);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    line-height: 1.2;
}

.public-total strong {
    font-size: var(--font-size-lg);
}

.public-total__amount {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.public-total .profile__button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
}

.donation-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(86, 179, 194, 0.45);
    background: linear-gradient(90deg, rgba(86, 179, 194, 0.08) 0%, rgba(126, 220, 167, 0.12) 100%);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #005359;
}

.donation-summary strong {
    font-size: var(--font-size-xl);
    color: #005359;
    letter-spacing: 0;
}

.donation-summary--compact {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "label label"
        "amount currency";
    justify-content: center;
    row-gap: 0.3rem;
    column-gap: 0.35rem;
    text-align: center;
}

.donation-summary--compact span:first-child {
    grid-area: label;
    justify-self: center;
    letter-spacing: 0.14em;
    color: #4F6E70;
}

.donation-summary--compact strong {
    grid-area: amount;
    justify-self: end;
    font-size: var(--font-size-2xl);
}

.donation-summary--compact span:last-child {
    grid-area: currency;
    justify-self: start;
    letter-spacing: 0.12em;
}

@media (max-width: 900px) {
    .public-list__filters {
        display: flex;
        justify-content: stretch;
    }

    .public-list__filter {
        width: 100%;
        min-width: 0;
    }

    .gift-list--public .gift-list__head {
        display: none;
    }

    .gift-list--public .gift-list__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
        align-items: start;
        padding: var(--space-md);
    }

    .public-gift__name {
        grid-column: 1 / -1;
        text-align: center;
        gap: 0.4rem;
    }

    .public-gift__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: block;
        width: 100%;
        text-align: center;
        font-size: var(--font-size-xs);
        letter-spacing: 0.14em;
        color: #6F7F80;
    }

    .public-gift__value {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: #005359;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .public-gift__price {
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: center;
        text-align: center;
        padding: var(--space-sm);
        border: 1px solid var(--dashboard-border);
        background: #FFFFFF;
    }

    .public-gift__qty {
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: center;
        padding: var(--space-sm);
        border: 1px solid var(--dashboard-border);
        background: #FFFFFF;
    }

    .public-gift__qty .public-gift__label,
    .public-gift__price .public-gift__label {
        display: block;
        width: 100%;
        font-size: var(--font-size-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #6F7F80;
        text-align: center;
    }

    .public-list-page .gift-list__row:not(.is-editing) .qty-control {
        max-width: 180px;
        width: 100%;
    }

    .public-gift__amount {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
    }

    .public-gift__amount {
        font-size: var(--font-size-base);
    }

    .public-list-page .gift-list__row:not(.is-editing) .qty-control {
        display: grid;
        padding: 0;
        min-height: auto;
        align-items: center;
    }

    .public-total {
        width: 100%;
    }

    .public-album__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .public-list-page .profile-preview__banner {
        height: 190px;
    }

    .public-list {
        padding: var(--space-md);
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
        padding-inline: var(--space-sm);
    }

    .public-album__title {
        font-size: clamp(1.12rem, 5.4vw, 1.38rem);
    }

    .public-album__grid {
        grid-template-columns: 1fr;
    }

    .public-album__filters {
        grid-template-columns: 1fr;
    }

    .public-album-cta {
        padding: 1.4rem var(--space-sm);
        gap: 0.62rem;
    }

    .public-album-cta h2 {
        font-size: clamp(1.6rem, 10vw, 2.1rem);
    }

    .gift-list--public .gift-list__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "name name"
            "qty price";
        gap: var(--space-sm);
        padding: var(--space-xs) var(--space-sm);
    }

    .public-gift__name {
        grid-area: name;
        text-align: center;
    }

    .public-gift__name .public-gift__label {
        text-align: center;
        display: block;
        width: 100%;
        font-size: var(--font-size-xs);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #7A8B8C;
    }

    .public-gift__value {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .public-gift__qty {
        grid-area: qty;
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        gap: var(--space-xs);
        padding: calc(var(--space-sm) - 0.1rem);
        border: 1px solid var(--dashboard-border);
        background: #FFFFFF;
    }

    .public-gift__qty .public-gift__label {
        width: 100%;
        display: block;
        line-height: 1.2;
        font-size: var(--font-size-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6B7B7C;
        text-align: center;
    }

    .public-list-page .gift-list__row:not(.is-editing) .qty-control {
        width: 100%;
        min-width: 0;
        min-height: 34px;
    }

    .public-gift__price {
        grid-area: price;
        display: grid;
        grid-template-rows: auto auto;
        align-items: center;
        justify-items: center;
        text-align: center;
        gap: var(--space-xs);
        padding: calc(var(--space-sm) - 0.1rem);
        border: 1px solid var(--dashboard-border);
        background: #FFFFFF;
    }

    .public-gift__price .public-gift__label {
        font-size: var(--font-size-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6B7B7C;
        line-height: 1.2;
    }

    .public-gift__amount {
        font-size: var(--font-size-base);
        line-height: 1.2;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .public-list-page .profile-preview__body {
        padding: calc(var(--space-md) + 5.5rem) var(--space-md) var(--space-md);
    }
}

/* ============================================================
   PAGE - PUBLIC CONFIRMATION
   ============================================================ */
body.public-confirm-page {
    --public-confirm-border: rgba(86, 179, 194, 0.28);
}

.public-confirm-hero {
    padding-top: calc(var(--header-offset) + var(--space-xl));
    padding-bottom: calc(var(--space-2xl) + 1rem);
}

.public-confirm-card {
    overflow: hidden;
}

.public-confirm-page .profile-preview__banner {
    height: 248px;
}

.public-confirm-page .profile-preview__body {
    padding: calc(var(--space-lg) + 6rem) var(--space-lg) var(--space-lg);
}

.public-confirm-page .profile-preview__message {
    max-width: 64ch;
}

.public-confirm {
    border-top: 1px solid var(--dashboard-border);
    padding: var(--space-xl) var(--space-lg);
    background:
        radial-gradient(circle at 14% 0%, rgba(86, 179, 194, 0.14), transparent 56%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FCFC 100%);
    display: grid;
    gap: var(--space-lg);
}

.public-confirm__intro {
    max-width: 74ch;
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: 0.45rem;
}

.public-confirm-page .public-confirm__intro::before {
    content: none;
}

.public-confirm__intro h2 {
    margin: 0;
    padding-left: 0;
    color: #005359;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.3;
    text-wrap: balance;
}

.public-confirm-page .public-confirm__intro h2::before {
    content: none;
}

.public-confirm-page .public-confirm__intro h2::after {
    content: none;
}

.public-confirm__intro p {
    margin: 0;
    color: #5D7C7E;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.public-confirm__form {
    width: min(760px, 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--space-md);
}

.public-confirm__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.public-confirm__form .profile__field {
    margin: 0;
}

.public-confirm__form .profile__input,
.public-confirm__form .profile__select,
.public-confirm__form .profile__textarea {
    background-color: #FFFFFF;
    border-color: rgba(86, 179, 194, 0.45);
    box-shadow: inset 0 0 0 1px rgba(86, 179, 194, 0.1);
}

.public-confirm__form .profile__input:focus,
.public-confirm__form .profile__select:focus,
.public-confirm__form .profile__textarea:focus {
    border-color: rgba(86, 179, 194, 0.78);
}

.public-confirm__attendance {
    margin: 0;
    border: 1px solid var(--public-confirm-border);
    background: #FFFFFF;
    padding: var(--space-md);
    display: grid;
    gap: 0.6rem;
}

.public-confirm__attendance[hidden] {
    display: none;
}

/* Fallback visual: oculta restricciones cuando "No podré asistir" está seleccionado. */
.public-confirm__attendance:has(input[name="asistencia"][value="no"]:checked) + [data-diet-toggle-block] {
    display: none;
}

.public-confirm__attendance:has(input[name="asistencia"][value="no"]:checked) + [data-diet-toggle-block] + [data-diet-details] {
    display: none;
}

.public-confirm__attendance legend {
    color: #5B7A7D;
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 0.15rem;
}

.public-confirm__options {
    display: grid;
    gap: 0.5rem;
}

.public-confirm__radio {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: #FFFFFF;
    padding: 0.7rem 0.8rem;
    color: #005359;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.public-confirm__radio:hover {
    border-color: rgba(86, 179, 194, 0.7);
    background: rgba(86, 179, 194, 0.06);
}

.public-confirm__radio input {
    appearance: none;
    margin: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #C8D6D8;
    border-radius: 50%;
    background: #FFFFFF;
    position: relative;
    flex-shrink: 0;
}

.public-confirm__radio input:checked {
    border-color: #59B7C0;
}

.public-confirm__radio input:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #59B7C0;
    transform: translate(-50%, -50%);
}

.public-confirm__radio:focus-within {
    border-color: rgba(86, 179, 194, 0.85);
    box-shadow: 0 0 0 2px rgba(86, 179, 194, 0.24);
}

.public-confirm__attendance--compact {
    margin-top: calc(var(--space-sm) * -0.15);
}

.public-confirm__diet[hidden] {
    display: none;
}

.public-confirm__diet {
    display: grid;
    gap: 0.6rem;
    border: 1px solid rgba(86, 179, 194, 0.38);
    padding: var(--space-sm);
    background: rgba(248, 252, 252, 0.9);
}

.public-confirm__diet-title {
    margin: 0;
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4F6E70;
}

.public-confirm__diet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.public-confirm__diet-grid .guest-chip span {
    width: 100%;
    justify-content: flex-start;
    min-height: 38px;
}

.public-confirm__companions[hidden] {
    display: none;
}

.public-confirm__companions {
    display: grid;
    gap: 0.6rem;
    border: 1px solid rgba(86, 179, 194, 0.38);
    padding: var(--space-sm);
    background: rgba(248, 252, 252, 0.9);
}

.public-confirm__companions-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
}

.public-confirm__companions-list {
    display: grid;
    gap: var(--space-sm);
}

.public-confirm__companion-add.profile__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    min-height: 34px;
    padding: 0.34rem 0.8rem;
    align-self: flex-start;
    margin-top: 0.2rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.public-confirm__companions .guest-companion {
    background: #FFFFFF;
}

.public-confirm__companions .guest-companion__checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.public-confirm__companions .guest-chip span {
    width: 100%;
    justify-content: flex-start;
    min-height: 36px;
}

.public-confirm__submit {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}

@media (max-width: 900px) {
    .public-confirm-page .profile-preview__banner {
        height: 220px;
    }

    .public-confirm {
        padding: var(--space-lg) var(--space-md);
    }

    .public-confirm__diet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .public-confirm-hero {
        padding-top: calc(var(--header-offset) + var(--space-lg));
    }

    .public-confirm__grid {
        grid-template-columns: 1fr;
    }

    .public-confirm__attendance {
        padding: var(--space-sm);
    }

    .public-confirm__diet-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .public-confirm__companions-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .public-confirm__companion-add.profile__button {
        width: 100%;
    }

    .public-confirm__companions .guest-companion__checks {
        grid-template-columns: 1fr;
    }

    .public-confirm-page .profile-preview__body {
        padding: calc(var(--space-md) + 5.5rem) var(--space-md) var(--space-md);
    }

    .public-confirm__intro h2 {
        font-size: 1.36rem;
    }
}

/* ============================================================
   14 - RECEIVED GIFTS PAGE
   ============================================================ */
body.received-gifts-page {
    --received-card-border: rgba(86, 179, 194, 0.3);
    scrollbar-gutter: stable;
}

.received-gifts-page .profile-hero__avatar {
    background: #FFFFFF;
}

.received-gifts-page .profile-hero__avatar img {
    object-position: center;
}

.received-section {
    position: relative;
    padding-top: var(--space-lg);
    padding-bottom: calc(var(--space-2xl) + 1rem);
    z-index: 1;
}

.received-board {
    display: grid;
    gap: var(--space-sm);
}

.received-board__head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 126px 150px;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7B7C;
}

.received-board__head span:last-child {
    text-align: right;
}

.received-board__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.received-item {
    position: relative;
    border: 1px solid var(--dashboard-border);
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.received-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    opacity: 0;
    background: linear-gradient(180deg, #56B3C2 0%, #7EDCA7 100%);
    transition: width 240ms ease, opacity 240ms ease;
    pointer-events: none;
}

.received-item.is-open {
    border-color: var(--received-card-border);
    box-shadow: 0 14px 26px rgba(0, 83, 89, 0.12);
}

.received-item.is-open::before {
    width: 4px;
    opacity: 1;
}

.received-item__summary {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 126px 150px;
    gap: var(--space-sm);
    align-items: center;
    padding: 0.85rem var(--space-md);
    transition: background 260ms ease;
}

.received-item.is-open .received-item__summary {
    border-bottom: 1px solid var(--dashboard-border);
}

@media (hover: hover) {
    .received-item:hover,
    .received-item:focus-within {
        border-color: rgba(86, 179, 194, 0.55);
        box-shadow: 0 14px 28px rgba(0, 83, 89, 0.14);
        transform: translateY(-2px);
    }

    .received-item:hover::before,
    .received-item:focus-within::before {
        width: 4px;
        opacity: 1;
    }

    .received-item:hover .received-item__summary,
    .received-item:focus-within .received-item__summary {
        background: linear-gradient(90deg, rgba(86, 179, 194, 0.08) 0%, rgba(126, 220, 167, 0.08) 100%);
    }

    .received-item.is-open:hover,
    .received-item.is-open:focus-within {
        border-color: var(--received-card-border);
        box-shadow: 0 16px 30px rgba(0, 83, 89, 0.16);
    }
}

.received-item__value {
    min-width: 0;
    color: #52686A;
}

.received-item__value--name {
    color: #084F56;
    font-size: clamp(1.02rem, 1.05vw, 1.12rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: 0.01em;
}

.received-item__value--email {
    color: #637A7C;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.received-item__value--date {
    color: #587073;
    font-weight: 500;
    white-space: nowrap;
}

.received-item__toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.45rem 0.95rem;
    border: 1px solid #59B7C0;
    background: #F8FEFE;
    color: #59B7C0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.received-item__toggle span {
    white-space: nowrap;
}

.received-item__toggle i {
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.received-item__toggle:hover {
    border-color: #2F9DA9;
    color: #2F9DA9;
    background: #F2FBFC;
    box-shadow: 0 8px 14px rgba(47, 157, 169, 0.2);
}

.received-item__toggle[aria-expanded="true"] {
    border-color: transparent;
    color: #FFFFFF;
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    box-shadow: 0 12px 20px rgba(86, 179, 194, 0.3);
}

.received-item__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.received-item__details {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 var(--space-md);
    background:
        radial-gradient(circle at 10% -35%, rgba(86, 179, 194, 0.16), transparent 52%),
        radial-gradient(circle at 95% 130%, rgba(126, 220, 167, 0.16), transparent 56%),
        #F8FCFD;
    border-top: 1px solid rgba(86, 179, 194, 0.2);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

.received-item__details-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 0;
    padding: 0;
    transition: gap 220ms ease, padding 220ms ease;
}

.received-item__details,
.received-item__details-inner,
.received-gifts-wrap {
    scrollbar-width: none;
}

.received-item__details::-webkit-scrollbar,
.received-item__details-inner::-webkit-scrollbar,
.received-gifts-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.received-item.is-open .received-item__details {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
}

.received-item.is-open .received-item__details-inner {
    gap: calc(var(--space-sm) + 0.1rem);
    padding: var(--space-md) 0;
}

.received-message {
    position: relative;
    border: 1px solid rgba(86, 179, 194, 0.28);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.14) 0%, rgba(126, 220, 167, 0.14) 100%);
    padding: calc(var(--space-sm) + 0.05rem);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.received-message::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 4px;
    background: linear-gradient(180deg, #56B3C2 0%, #7EDCA7 100%);
}

.received-message__text {
    border: 1px solid rgba(86, 179, 194, 0.22);
    background: #FFFFFF;
    color: #1F2D2F;
    padding: 0.8rem 0.95rem;
    line-height: 1.45;
    margin-bottom: var(--space-sm);
    box-shadow: 0 8px 14px rgba(0, 83, 89, 0.07);
}

.received-message__reply {
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: var(--font-size-base);
    padding: 0.45rem 0.9rem;
    min-width: 132px;
}

.received-gifts-wrap {
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid #D4DEE0;
    background: #FFFFFF;
}

.received-gifts {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 0;
}

.received-gifts th,
.received-gifts td {
    border-bottom: 1px solid #E1E8EA;
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.received-gifts th {
    font-size: var(--font-size-sm);
    color: #1D2B2D;
}

.received-gifts th:nth-child(1),
.received-gifts td:nth-child(1) {
    text-align: left;
}

.received-gifts th:nth-child(2),
.received-gifts td:nth-child(2) {
    width: 12%;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.received-gifts th:nth-child(3),
.received-gifts th:nth-child(4),
.received-gifts td:nth-child(3),
.received-gifts td:nth-child(4) {
    width: 14%;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.received-gifts td:nth-child(1) {
    overflow-wrap: anywhere;
}

.received-gifts-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-top: 1px solid #DDE6E8;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(86, 179, 194, 0.08) 0%, rgba(126, 220, 167, 0.08) 100%);
}

.received-gifts-total__label {
    color: #4E6365;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.received-gifts-total__value {
    color: #0A6670;
    font-size: calc(var(--font-size-base) + 0.02rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.received-board__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
}

.received-board__download {
    text-transform: none;
    letter-spacing: 0.04em;
    min-width: 200px;
}

.received-gifts-page .profile-modal--wide .profile-modal__dialog {
    width: min(720px, 95vw);
}

.received-reply-modal .profile-modal__dialog {
    border: 1px solid rgba(86, 179, 194, 0.3);
    box-shadow: 0 24px 34px rgba(0, 83, 89, 0.2);
}

.received-reply-modal .profile-modal__header {
    padding-bottom: 0;
}

.received-reply-modal__target {
    margin-top: 0.25rem;
    color: #687A7B;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

.received-reply-modal__target-name {
    color: #0A6670;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.06rem 0.34rem;
    border-radius: 0.22rem;
    background: rgba(86, 179, 194, 0.16);
}

.received-reply-modal .profile__textarea {
    min-height: 130px;
}

.received-reply-modal .profile-modal__footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

.received-reply-modal .profile-modal__footer .profile__button {
    width: 100%;
    justify-content: center;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: var(--font-size-base);
}

@media (max-width: 1024px) {
    .received-board__head {
        display: none;
    }

    .received-item__summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name name"
            "email date"
            "toggle toggle";
        align-items: end;
        column-gap: 0.75rem;
        row-gap: 0.45rem;
    }

    .received-item__value {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        font-size: var(--font-size-sm);
    }

    .received-item__value::before {
        content: attr(data-label);
        font-size: 0.66rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #8A9B9D;
        font-weight: 500;
    }

    .received-item__value--name {
        grid-area: name;
        font-size: calc(var(--font-size-base) + 0.08rem);
    }

    .received-item__value--email {
        grid-area: email;
    }

    .received-item__value--date {
        grid-area: date;
        justify-self: end;
        text-align: right;
        align-items: flex-end;
    }

    .received-item__toggle {
        grid-area: toggle;
        justify-self: stretch;
        margin-top: 0.05rem;
    }
}

@media (max-width: 760px) {
    .received-item__summary {
        padding: 0.75rem;
    }

    .received-item__details {
        padding: 0 0.75rem;
    }

    .received-item.is-open .received-item__details-inner {
        padding: 0.75rem 0;
    }

    .received-gifts-wrap {
        border: 0;
        background: transparent;
        overflow: visible;
        display: grid;
        gap: 0.6rem;
    }

    .received-gifts {
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
    }

    .received-gifts thead {
        display: none;
    }

    .received-gifts tbody {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.6rem;
    }

    .received-gifts tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "gift gift"
            "qty amount"
            "total total";
        gap: 0.38rem 0.65rem;
        padding: 0.7rem;
        border: 1px solid #D4DEE0;
        background: #FFFFFF;
        box-shadow: 0 8px 16px rgba(0, 83, 89, 0.08);
    }

    .received-gifts th,
    .received-gifts td {
        border: 0;
        width: auto;
        padding: 0;
        font-size: var(--font-size-sm);
        text-align: left;
        white-space: normal;
    }

    .received-gifts td:nth-child(1) {
        grid-area: gift;
        font-weight: 600;
        color: #1E2D2F;
        line-height: 1.35;
    }

    .received-gifts td:nth-child(2),
    .received-gifts td:nth-child(3),
    .received-gifts td:nth-child(4) {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.55rem;
        font-variant-numeric: tabular-nums;
    }

    .received-gifts td:nth-child(2) {
        grid-area: qty;
    }

    .received-gifts td:nth-child(3) {
        grid-area: amount;
    }

    .received-gifts td:nth-child(4) {
        grid-area: total;
        padding-top: 0.3rem;
        border-top: 1px solid #E4EBED;
        color: #0A6670;
        font-weight: 600;
    }

    .received-gifts td:nth-child(2)::before,
    .received-gifts td:nth-child(3)::before,
    .received-gifts td:nth-child(4)::before {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #5E7072;
        font-weight: 500;
    }

    .received-gifts td:nth-child(2)::before {
        content: 'Cantidad';
    }

    .received-gifts td:nth-child(3)::before {
        content: 'Monto';
    }

    .received-gifts td:nth-child(4)::before {
        content: 'Total';
    }

    .received-gifts-total {
        border: 1px solid rgba(86, 179, 194, 0.35);
        border-radius: 0;
        background: linear-gradient(90deg, rgba(86, 179, 194, 0.16) 0%, rgba(126, 220, 167, 0.16) 100%);
    }

}

@media (max-width: 560px) {
    .received-item__summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name name"
            "email date"
            "toggle toggle";
        column-gap: 0.55rem;
        row-gap: 0.38rem;
        padding: 0.65rem;
    }

    .received-item__toggle {
        min-height: 38px;
        padding: 0.4rem 0.8rem;
    }

    .received-gifts tbody {
        grid-template-columns: 1fr;
    }

    .received-message__text {
        font-size: var(--font-size-sm);
    }

}

/* ============================================================
   PAGE - CONFIRMAR INVITADOS
   ============================================================ */
body.guest-confirm-page {
    --guest-confirm-border: rgba(86, 179, 194, 0.3);
}

.guest-confirm-page .profile-hero__avatar {
    border-radius: 50%;
    overflow: hidden;
}

.guest-confirm-page .profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guest-confirm {
    gap: var(--space-lg);
}

.guest-confirm__url-input {
    min-height: 44px;
    overflow: visible;
}

.guest-confirm__url-input:focus-within {
    outline: 2px solid #59B7C0;
    outline-offset: 1px;
}

.guest-confirm__url-input .profile__input--inline:focus {
    outline: none;
}

.guest-confirm__copy-trigger {
    width: 42px;
    min-width: 42px;
    border-left: 1px solid var(--dashboard-border);
    background: linear-gradient(180deg, #F9FCFD 0%, #F2F8F8 100%);
    color: #59B7C0;
}

.guest-confirm__copy-trigger i {
    font-size: 1rem;
    line-height: 1;
}

.guest-confirm__copy-trigger:hover {
    color: #005359;
    background: rgba(86, 179, 194, 0.14);
}

.guest-confirm__copy-trigger:focus-visible {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
}

.guest-confirm__companions {
    display: grid;
    gap: 0.45rem;
    border: 1px solid rgba(86, 179, 194, 0.38);
    padding: 0.72rem 0.85rem;
    background: rgba(248, 252, 252, 0.9);
}

.guest-confirm__companions-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
}

.guest-confirm__companions .guest-switch {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
    margin: 0;
}

.guest-confirm__companions-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    padding: 0.12rem 0.38rem;
    border: 1px solid rgba(108, 136, 140, 0.4);
    background: #EFF4F5;
    color: #6D878B;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.guest-confirm__companions-state.is-on {
    border-color: rgba(86, 179, 194, 0.52);
    background: rgba(126, 220, 167, 0.2);
    color: #2F9268;
}

.guest-confirm__companions-help {
    margin: 0;
    color: #C64777;
    font-size: var(--font-size-xs);
    line-height: 1.35;
    transition: color var(--transition-fast);
}

.guest-confirm__companions-help.is-on {
    color: #2F9268;
}

.guest-confirm__card-header {
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--space-md);
}

.guest-confirm__card-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.guest-confirm__toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.48rem;
    margin-top: 0.35rem;
    padding-top: 0.8rem;
    margin-bottom: var(--space-sm);
    border-top: 1px solid rgba(86, 179, 194, 0.22);
    flex-wrap: wrap;
}

.guest-confirm__stats {
    display: flex;
    gap: 0.32rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.guest-confirm__stat {
    border: 1px solid var(--guest-confirm-border);
    background: #FFFFFF;
    box-shadow: none;
    padding: 0;
    min-width: 102px;
    min-height: 42px;
    max-width: 102px;
    display: grid;
    grid-template-columns: 23px 1fr;
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: start;
    column-gap: 0;
    row-gap: 0;
}

.guest-confirm__stat-icon {
    grid-area: icon;
    justify-self: center;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.94rem;
    line-height: 1;
    color: #2D8D97;
    border: 0;
    border-right: 1px solid var(--guest-confirm-border);
    background: rgba(90, 183, 192, 0.08);
}

.guest-confirm__stat-label {
    grid-area: label;
    display: block;
    font-size: 0.54rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    color: #2A5E63;
    margin-bottom: 0;
    line-height: 1.1;
    padding: 0.24rem 0.34rem 0 0.34rem;
    align-self: end;
}

.guest-confirm__stat-value {
    grid-area: value;
    display: inline-flex;
    align-items: center;
    font-size: 1.02rem;
    font-weight: 500;
    color: #005359;
    line-height: 1;
    padding: 0 0.34rem 0.22rem 0.34rem;
}

.guest-confirm__stat--confirmed .guest-confirm__stat-value {
    color: #1E866A;
}

.guest-confirm__stat--confirmed .guest-confirm__stat-icon {
    color: #1E866A;
    border-right-color: var(--guest-confirm-border);
    background: rgba(126, 220, 167, 0.36);
}

.guest-confirm__stat--pending .guest-confirm__stat-value {
    color: #8E6D25;
}

.guest-confirm__stat--pending .guest-confirm__stat-icon {
    color: #8E6D25;
    border-right-color: var(--guest-confirm-border);
    background: rgba(255, 206, 116, 0.36);
}

.guest-confirm__stat--declined .guest-confirm__stat-value {
    color: #A33A66;
}

.guest-confirm__stat--declined .guest-confirm__stat-icon {
    color: #A33A66;
    border-right-color: var(--guest-confirm-border);
    background: rgba(230, 100, 145, 0.3);
}

.guest-confirm__filters {
    margin-left: 0;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    gap: 0.3rem;
    align-items: flex-end;
}

.guest-confirm__search,
.guest-confirm__filter {
    min-width: 0;
    width: auto;
    max-width: none;
}

.guest-confirm__search {
    flex: 1 1 auto;
}

.guest-confirm__search-input .profile__input {
    width: 100%;
}

.guest-confirm__filter {
    flex: 0 0 265px;
}

.guest-confirm__search .profile__label,
.guest-confirm__filter .profile__label {
    display: inline-flex;
    margin-bottom: 0.35rem;
}

.guest-confirm__search-input {
    position: relative;
}

.guest-confirm__search-input i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5E8C91;
    pointer-events: none;
}

.guest-confirm__search-input .profile__input {
    min-height: 40px;
    background-color: #FFFFFF;
    padding-left: 2.05rem;
}

.guest-confirm__filter .profile__select {
    min-height: 40px;
    background-color: #FFFFFF;
}

.guest-confirm__table-wrap {
    border: 1px solid var(--guest-confirm-border);
    border-radius: 0.36rem;
    overflow: auto;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.guest-confirm__table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.guest-confirm__table th,
.guest-confirm__table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--guest-confirm-border);
    text-align: left;
    vertical-align: middle;
}

.guest-confirm__table th {
    background: rgba(86, 179, 194, 0.14);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4F6E70;
}

.guest-confirm__table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.55);
}

.guest-confirm__table tbody tr:hover {
    background: rgba(86, 179, 194, 0.08);
}

.guest-confirm__guest-name {
    color: #004D53;
    font-weight: var(--font-weight-semibold);
    font-size: 1.08rem;
}

.guest-confirm__email {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    max-width: 100%;
}

.guest-confirm__email-text {
    overflow-wrap: anywhere;
}

.guest-confirm__companions-cell {
    font-weight: 600;
    color: #005359;
}

.guest-confirm__copy-btn {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(86, 179, 194, 0.45);
    background: #FFFFFF;
    color: #59B7C0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}

.guest-confirm__copy-btn:hover {
    background: rgba(86, 179, 194, 0.14);
    border-color: #59B7C0;
    color: #005359;
}

.guest-confirm__copy-btn:focus-visible {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: 2px;
}

.guest-confirm__actions {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.36rem;
}

.guest-confirm__table td[data-label="Acciones"] {
    text-align: right;
}

.guest-confirm__action-btn {
    min-height: 30px;
    border: 1px solid rgba(86, 179, 194, 0.42);
    background: #FFFFFF;
    color: #2A6F75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.28rem 0.56rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.guest-confirm__action-btn i {
    font-size: 0.82rem;
}

.guest-confirm__action-btn:hover {
    background: rgba(86, 179, 194, 0.14);
    border-color: rgba(48, 147, 159, 0.8);
    color: #005359;
}

.guest-confirm__action-btn:focus-visible {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: 2px;
}

.guest-confirm__action-btn--delete {
    border-color: rgba(194, 86, 122, 0.45);
    color: #8A3354;
}

.guest-confirm__action-btn--delete:hover {
    background: rgba(230, 100, 145, 0.16);
    border-color: rgba(194, 86, 122, 0.75);
    color: #7A2548;
}

.guest-delete-modal .profile-modal__dialog {
    width: min(560px, calc(100% - 2rem));
}

.guest-delete-modal__hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    border: 1px solid rgba(230, 100, 145, 0.2);
    background: linear-gradient(135deg, rgba(230, 100, 145, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.guest-delete-modal__icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(230, 100, 145, 0.25);
    color: #E66491;
    font-size: 1.6rem;
    box-shadow: 0 12px 22px rgba(0, 83, 89, 0.12);
}

.guest-delete-modal__title {
    margin: 0;
    color: #005359;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.guest-delete-modal__subtitle {
    margin: 0.25rem 0 0;
    color: hsla(184, 100%, 17%, 0.6);
    font-size: var(--font-size-xs);
}

.guest-delete-modal__summary {
    margin-top: var(--space-md);
    display: grid;
    gap: 0.4rem;
    padding: var(--space-md);
    border: 1px solid var(--guest-confirm-border, rgba(86, 179, 194, 0.3));
    background: #F8FBFB;
}

.guest-delete-modal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.guest-delete-modal__row span {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--font-size-xs);
    color: #6B7B7C;
}

.guest-delete-modal__row strong {
    color: #005359;
    font-size: var(--font-size-base);
    overflow-wrap: anywhere;
    text-align: right;
}

.guest-delete-modal__confirm {
    background: linear-gradient(135deg, #E66491 0%, #F28FAE 100%);
    color: #FFFFFF;
    border-color: transparent;
}

.guest-delete-modal__confirm:hover {
    background: linear-gradient(135deg, #D95582 0%, #E8799F 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 16px 24px rgba(230, 100, 145, 0.25);
}

.guest-confirm__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    min-width: 98px;
    border: 1px solid transparent;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guest-confirm__status--confirmed {
    color: #005359;
    background: rgba(126, 220, 167, 0.2);
    border-color: rgba(126, 220, 167, 0.5);
}

.guest-confirm__status--pending {
    color: #005359;
    background: rgba(255, 206, 116, 0.25);
    border-color: rgba(255, 206, 116, 0.65);
}

.guest-confirm__status--declined {
    color: #8A3354;
    background: rgba(230, 100, 145, 0.16);
    border-color: rgba(230, 100, 145, 0.5);
}

.guest-editor-modal .profile-modal__dialog {
    width: min(940px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
}

.guest-editor-modal .profile-modal__body {
    overflow: auto;
    max-height: calc(100vh - 14rem);
    padding-top: 0.9rem;
}

.guest-editor-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.guest-editor-modal__heading {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.guest-editor-modal__icon {
    width: 0.95rem;
    height: 0.95rem;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #E66491;
    transform: rotate(45deg);
}

.guest-editor-modal__icon::after {
    content: "";
    position: absolute;
    width: 0.28rem;
    height: 0.28rem;
    inset: 0;
    margin: auto;
    background: #E66491;
}

.guest-editor-modal__form {
    gap: var(--space-md);
}

.guest-editor-modal__main-card {
    border: 1px solid var(--guest-confirm-border, rgba(86, 179, 194, 0.3));
    padding: var(--space-sm);
    display: grid;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.74);
}

.guest-editor-modal .profile__field {
    gap: 0.42rem;
}

.guest-editor-modal .profile__label {
    letter-spacing: 0.11em;
    color: #59B7C0;
}

.guest-editor-modal .profile__input,
.guest-editor-modal .profile__select,
.guest-editor-modal .profile__textarea {
    min-height: 40px;
    border-color: rgba(86, 179, 194, 0.4);
    background: #FFFFFF;
}

.guest-editor-modal .profile__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2359B7C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem;
}

.guest-editor-modal .profile__textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.35;
}

.guest-editor-modal .profile__input::placeholder,
.guest-editor-modal .profile__textarea::placeholder {
    color: #7A9496;
    opacity: 1;
}

.guest-editor-modal .profile__input:focus,
.guest-editor-modal .profile__select:focus,
.guest-editor-modal .profile__textarea:focus {
    border-color: #59B7C0;
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
    box-shadow: none;
}

.guest-editor-modal__panel {
    border: 1px solid rgba(86, 179, 194, 0.38);
    padding: var(--space-sm);
    background: rgba(248, 252, 252, 0.9);
}

.guest-editor-modal__panel--attendance {
    padding: 0.72rem 0.85rem;
    display: flex;
    align-items: center;
}

.guest-editor-modal__panel--attendance .guest-switch {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.guest-editor-modal__panel-title {
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4F6E70;
    margin-bottom: 0.55rem;
}

.guest-editor-modal__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
}

.guest-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.guest-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.guest-chip span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: #005359;
    font-size: var(--font-size-sm);
    border: 1px solid rgba(86, 179, 194, 0.32);
    background: #FFFFFF;
    padding: 0.35rem 0.55rem;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.guest-chip span::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 1px solid #B9CBCD;
    background: #FFFFFF;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.guest-chip input:checked + span {
    background: rgba(86, 179, 194, 0.2);
    border-color: #59B7C0;
}

.guest-chip input:checked + span::before {
    background: #59B7C0;
    border-color: #59B7C0;
    box-shadow: inset 0 0 0 2px #FFFFFF;
}

.guest-chip input:focus-visible + span {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: 2px;
}

.guest-editor-modal__other {
    margin-top: 0.65rem;
}

.guest-editor-modal__companions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.guest-editor-modal__companions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.guest-editor-modal__companions-head h3 {
    font-size: var(--font-size-md);
    color: #005359;
}

.guest-editor-modal__companions-list {
    display: grid;
    gap: var(--space-sm);
}

.guest-companion {
    border: 1px solid var(--guest-confirm-border);
    padding: var(--space-sm);
    display: grid;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.7);
}

.guest-companion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.guest-companion__head h4 {
    color: #005359;
    font-size: var(--font-size-md);
}

.guest-companion__child {
    display: flex;
}

.guest-companion__diet {
    display: grid;
    gap: var(--space-xs);
    border: 1px solid rgba(86, 179, 194, 0.35);
    padding: 0.6rem;
    background: rgba(248, 252, 252, 0.92);
}

.guest-companion__subtitle {
    color: #005359;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.guest-companion__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.7rem;
}

.guest-companion__other {
    margin-top: 0.15rem;
}

.guest-companion__remove {
    justify-self: start;
    font-size: 0.63rem;
    color: #C64777;
    border-color: rgba(230, 100, 145, 0.65);
    background: rgba(230, 100, 145, 0.12);
}

.guest-companion__remove:hover {
    color: #FFFFFF;
    border-color: #E66491;
    background: #E66491;
    box-shadow: 0 10px 18px rgba(230, 100, 145, 0.28);
}

.guest-companion__remove i {
    margin-right: 0.25rem;
}

.guest-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    min-height: 22px;
}

.guest-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.guest-switch__track {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 22px;
    border: 1px solid rgba(86, 179, 194, 0.45);
    background: #E5ECEE;
    transition: background 0.24s ease, border-color 0.24s ease;
}

.guest-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid #BFCED0;
    background: #FFFFFF;
    transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
}

.guest-switch__text {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    color: #005359;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.guest-switch__input:checked + .guest-switch__track {
    background: rgba(86, 179, 194, 0.24);
    border-color: #59B7C0;
}

.guest-switch__input:checked + .guest-switch__track .guest-switch__thumb {
    transform: translateX(22px);
    background: #59B7C0;
    border-color: #59B7C0;
}

.guest-switch__input:focus-visible + .guest-switch__track {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .guest-confirm__card-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 0 0;
    }

    .guest-confirm__card-header .profile__actions {
        width: 100%;
    }

    .guest-confirm__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .guest-confirm__filters {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .guest-confirm__search,
    .guest-confirm__filter {
        width: 100%;
        max-width: none;
    }

    .guest-confirm__filter {
        flex: 1 1 auto;
    }

    .guest-confirm__stats {
        width: 100%;
        margin-left: 0;
    }

    .guest-confirm__stat {
        flex: 1 1 100px;
        min-width: 100px;
        max-width: none;
        min-height: 40px;
    }

    .guest-confirm__companions-row {
        width: 100%;
        gap: 0.55rem;
    }

    .guest-confirm__companions-state {
        min-width: 1.65rem;
        font-size: 0.72rem;
    }

    .guest-editor-modal__companions-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .guest-companion__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 680px) {
    .guest-confirm-page .profile-hero__actions .profile__button {
        width: 100%;
    }

    .guest-confirm__stats {
        gap: 0.5rem;
    }

    .guest-confirm__stat {
        min-width: 96px;
        min-height: 38px;
    }

    .guest-confirm__filters {
        grid-template-columns: 1fr;
    }

    .guest-confirm__card-header .profile__actions .profile__button {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .guest-confirm__table-wrap {
        border: 0;
        overflow: visible;
        padding: 0;
    }

    .guest-confirm__table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        table-layout: fixed;
    }

    .guest-confirm__table thead {
        display: none;
    }

    .guest-confirm__table tbody {
        display: grid;
        gap: 0.62rem;
    }

    .guest-confirm__table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name status"
            "email email"
            "accomp actions";
        gap: 0.45rem 0.6rem;
        border: 1px solid var(--guest-confirm-border);
        background: #FFFFFF;
        padding: 0.72rem;
    }

    .guest-confirm__table tbody tr[hidden] {
        display: none;
    }

    .guest-confirm__table tbody tr:nth-child(even),
    .guest-confirm__table tbody tr:hover {
        background: #FFFFFF;
    }

    .guest-confirm__table tbody td {
        padding: 0;
        border-bottom: 0;
        min-width: 0;
    }

    .guest-confirm__table tbody td:nth-child(1) {
        grid-area: name;
    }

    .guest-confirm__table tbody td:nth-child(2) {
        grid-area: email;
    }

    .guest-confirm__table tbody td:nth-child(3) {
        grid-area: status;
        justify-self: end;
        align-self: start;
    }

    .guest-confirm__table tbody td:nth-child(4) {
        grid-area: accomp;
        justify-self: start;
    }

    .guest-confirm__table tbody td:nth-child(5) {
        grid-area: actions;
        justify-self: end;
    }

    .guest-confirm__guest-name {
        font-size: 1rem;
        line-height: 1.25;
    }

    .guest-confirm__status {
        min-width: 0;
        font-size: 0.56rem;
        padding: 0.22rem 0.44rem;
    }

    .guest-confirm__table tbody td:nth-child(4) {
        display: inline-flex;
        align-items: center;
        gap: 0.24rem;
        font-size: 0.64rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #5E7D80;
    }

    .guest-confirm__table tbody td:nth-child(4)::before {
        content: "Acomp.";
    }

    .guest-confirm__table tbody td:nth-child(5) .guest-confirm__actions {
        display: inline-flex;
        gap: 0.28rem;
    }

    .guest-confirm__table tbody td:nth-child(5) .guest-confirm__action-btn {
        min-height: 26px;
        width: 26px;
        padding: 0;
    }

    .guest-confirm__table tbody td:nth-child(5) .guest-confirm__action-btn span {
        display: none;
    }

    .guest-confirm__table tbody td:nth-child(2) .guest-confirm__email {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.32rem;
        max-width: 100%;
    }

    .guest-confirm__table tbody td:nth-child(2) .guest-confirm__email-text {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.9rem;
    }

    .guest-confirm__copy-btn {
        width: 24px;
        height: 24px;
    }

    .guest-delete-modal .profile-modal__dialog {
        width: calc(100% - 1rem);
    }

    .guest-delete-modal__hero {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0.62rem;
        padding: 0.6rem;
    }

    .guest-delete-modal__icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .guest-delete-modal__summary {
        padding: 0.62rem;
        margin-top: 0.62rem;
    }

    .guest-delete-modal__row strong {
        font-size: 0.95rem;
    }

    .guest-editor-modal .profile-modal__dialog {
        width: calc(100% - 1rem);
    }

    .guest-editor-modal .profile-modal__body {
        padding: 0.65rem 0.72rem 0.75rem;
        max-height: calc(100vh - 13rem);
    }

    .guest-editor-modal .profile-modal__header {
        padding: 0.72rem 0.72rem;
    }

    .guest-editor-modal .profile-modal__footer {
        padding: 0.72rem;
        gap: 0.5rem;
    }

    .guest-editor-modal__main-card {
        padding: 0.55rem;
        gap: 0.55rem;
    }

    .guest-editor-modal__panel {
        padding: 0.55rem;
    }

    .guest-editor-modal__panel--attendance {
        padding: 0.55rem 0.62rem;
    }

    .guest-companion {
        padding: 0.55rem;
        gap: 0.55rem;
    }
}

/* ============================================================
   PAGE - INVITACION DIGITAL
   ============================================================ */
body.invitation-page {
    --invitation-border: rgba(86, 179, 194, 0.3);
}

.invitation-page .profile-hero__info .profile__subtitle {
    font-size: 1rem;
}

.invitation-builder {
    gap: var(--space-lg);
}

.invitation-start-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.invitation-page .profile__field .profile__input,
.invitation-page .profile__field .profile__textarea,
.invitation-page .profile__field .profile__select {
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.invitation-page .profile__field.is-invalid .profile__input,
.invitation-page .profile__field.is-invalid .profile__textarea,
.invitation-page .profile__field.is-invalid .profile__select {
    border-color: #E66491;
    background: rgba(230, 100, 145, 0.08);
    box-shadow: 0 0 0 1px rgba(230, 100, 145, 0.18) inset;
}

.invitation-page .profile__field.is-invalid .profile__label {
    color: #E66491;
}

.invitation-page .profile__field.is-valid .profile__input,
.invitation-page .profile__field.is-valid .profile__textarea,
.invitation-page .profile__field.is-valid .profile__select {
    border-color: #7EDCA7;
    background: rgba(126, 220, 167, 0.12);
    box-shadow: 0 0 0 1px rgba(126, 220, 167, 0.24) inset;
}

.invitation-page .profile__field.is-valid .profile__label {
    color: #0C5D50;
}

.invitation-page .profile__field .profile__error {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.2;
}

.invitation-landing {
    border-color: var(--invitation-border);
    background:
        radial-gradient(circle at 15% 20%, rgba(126, 220, 167, 0.2), transparent 45%),
        radial-gradient(circle at 85% 0%, rgba(89, 183, 192, 0.2), transparent 45%),
        linear-gradient(135deg, #FFFFFF 0%, #F5FCFD 100%);
    text-align: center;
}

.invitation-landing__content {
    width: min(760px, 100%);
    margin: 0 auto;
    display: grid;
    gap: var(--space-sm);
    justify-items: center;
}

.invitation-landing__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #005359;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
}

.invitation-landing .profile__subtitle {
    margin-inline: auto;
    text-align: center;
    max-width: 52ch;
}

.invitation-landing__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
}

.invitation-wizard {
    border-color: var(--invitation-border);
    gap: var(--space-lg);
    background: linear-gradient(180deg, rgba(0, 83, 89, 0.05) 0%, #FFFFFF 22%);
    overflow: hidden;
}

.invitation-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: 0;
    padding: calc(var(--space-md) + 5px) var(--space-md) var(--space-md);
    list-style: none;
    position: relative;
    background-color: #005359;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.invitation-steps::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right, #56B3C2 0%, #7EDCA7 100%);
}

.invitation-steps__item {
    position: relative;
}

.invitation-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: calc(50% + 1.3rem);
    right: calc(-50% + 1.3rem);
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 0;
}

.invitation-steps__trigger {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    color: #6B7B7C;
    padding: 0;
    cursor: pointer;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.invitation-steps__bullet {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.04);
    color: #D8EAEC;
    position: relative;
    z-index: 1;
    transition: all var(--transition-normal);
}

.invitation-steps__label {
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A7BDBF;
    text-align: center;
    transition: color var(--transition-normal);
}

.invitation-steps__item.is-active .invitation-steps__bullet {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(86, 179, 194, 0.28);
}

.invitation-steps__item.is-active .invitation-steps__label {
    color: #FFFFFF;
}

.invitation-steps__item.is-complete .invitation-steps__bullet {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    border-color: transparent;
    color: transparent;
    position: relative;
    box-shadow: 0 10px 18px rgba(86, 179, 194, 0.24);
}

.invitation-steps__item.is-complete .invitation-steps__bullet::before {
    content: "";
    width: 1.05rem;
    height: 1.05rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'/%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' fill='currentColor'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.invitation-steps__item.is-complete .invitation-steps__label {
    color: #E6F8F6;
}

.invitation-steps__item.is-complete:not(:last-child)::after {
    background: linear-gradient(to right, #56B3C2 0%, #7EDCA7 100%);
}

.invitation-steps__item.is-disabled .invitation-steps__trigger {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.74;
    filter: saturate(0.72);
}

.invitation-steps__item.is-disabled .invitation-steps__bullet {
    border-color: rgba(210, 228, 230, 0.36);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(196, 218, 221, 0.78);
    box-shadow: none;
}

.invitation-steps__item.is-disabled .invitation-steps__label {
    color: rgba(167, 189, 191, 0.72);
}

.invitation-step {
    display: none;
    border-top: 1px solid var(--invitation-border);
    padding-top: var(--space-md);
}

.invitation-step.is-active {
    display: grid;
    gap: var(--space-md);
}

.invitation-step__header {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    text-align: center;
}

.invitation-step__mobile-progress {
    display: none;
    --value: 25;
}

.invitation-step__title {
    font-size: var(--font-size-xl);
    color: #005359;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.invitation-step__title i {
    display: none;
    font-size: 1.1em;
    font-weight: 400;
}

.invitation-step__subtitle {
    max-width: 60ch;
    color: hsla(184, 100%, 17%, 0.65);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    margin: 0;
}

.invitation-step__actions {
    justify-content: space-between;
    align-items: center;
}

.invitation-step__actions .profile__button:last-child {
    margin-left: auto;
}

@media (min-width: 681px) {
    .invitation-wizard {
        gap: 0;
        padding: 0;
        background: #FFFFFF;
        overflow: visible;
    }

    .invitation-steps {
        width: 100%;
        margin: 0;
        border: 0;
        padding: calc(var(--space-md) + 5px) var(--space-lg) var(--space-md);
    }

    .invitation-step {
        border-top: 0;
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .invitation-step__header {
        width: calc(100% + (var(--space-lg) * 2));
        margin-left: calc(var(--space-lg) * -1);
        margin-right: calc(var(--space-lg) * -1);
        margin-bottom: 0;
        margin-top: 0;
        background-color: #005359;
        padding: 1rem var(--space-lg) 1.05rem;
        position: relative;
        justify-items: center;
        text-align: center;
        gap: 0.3rem;
    }

    .invitation-step__header::before {
        content: none;
    }

    .invitation-step__title {
        color: #FFFFFF;
        font-size: clamp(1.75rem, 1.1vw + 1.2rem, 2rem);
    }

    .invitation-step__title i {
        display: inline-flex;
        color: #FFFFFF;
        font-weight: 400;
    }

    .invitation-step__subtitle {
        color: #A7BDBF;
        font-size: 1.1rem;
        line-height: 1.35;
    }
}

@media (min-width: 1025px) {
    .invitation-steps {
        position: sticky;
        top: var(--header-offset);
        z-index: 9000;
    }
}

.invitation-photo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 36vw, 430px);
    gap: 0.62rem;
    align-items: stretch;
    width: 100%;
}

.invitation-upload {
    border: 1px dashed rgba(89, 183, 192, 0.65);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 248, 249, 0.9) 100%);
    width: 100%;
    min-height: 168px;
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.3rem;
    padding: 0.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal), opacity var(--transition-normal);
}

.invitation-upload:hover {
    border-color: #59B7C0;
    box-shadow: 0 12px 20px rgba(0, 83, 89, 0.1);
    transform: translateY(-1px);
}

.invitation-upload.is-upload-disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.64;
    filter: grayscale(0.2);
}

.invitation-upload.is-upload-disabled:hover {
    border-color: rgba(89, 183, 192, 0.65);
    box-shadow: none;
    transform: none;
}

.invitation-upload__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(89, 183, 192, 0.6);
    background: rgba(89, 183, 192, 0.16);
    color: #005359;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invitation-upload__icon i {
    font-size: 0.98rem;
}

.invitation-upload__text {
    color: #005359;
    font-size: 0.97rem;
}

.invitation-upload__filename {
    color: hsla(184, 100%, 17%, 0.6);
    font-size: var(--font-size-xs);
}

.invitation-upload-preview {
    border: 1px solid rgba(89, 183, 192, 0.45);
    background: rgba(245, 252, 253, 0.9);
    padding: 0.34rem;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.22rem;
}

.invitation-upload-preview__title {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4C8E95;
}

.invitation-upload-preview__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(89, 183, 192, 0.35);
    background: #FFFFFF;
}

.invitation-upload__preview-image {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1);
    transform-origin: center;
    transition: transform 120ms linear, object-position 120ms linear;
}

.invitation-upload__actions {
    display: flex;
    gap: 0.34rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.invitation-upload__crop-toggle,
.invitation-upload__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 30px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.58rem;
}

.invitation-upload__crop-toggle i,
.invitation-upload__remove i {
    font-size: 0.9rem;
}

.invitation-upload__crop-panel {
    margin-top: 0;
    border: 1px solid rgba(89, 183, 192, 0.35);
    background: rgba(255, 255, 255, 0.84);
    padding: 0 0.34rem;
    display: grid;
    gap: 0.26rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    border-color: transparent;
    transition: max-height 300ms ease, opacity 300ms ease, margin-top 300ms ease, padding 300ms ease, border-color 300ms ease;
}

.invitation-upload__crop-panel.is-open {
    margin-top: 0.2rem;
    padding: 0.34rem;
    max-height: 240px;
    opacity: 1;
    pointer-events: auto;
    border-color: rgba(89, 183, 192, 0.35);
}

.invitation-upload__crop-field {
    display: grid;
    gap: 0.22rem;
    padding: 0.2rem 0.26rem;
    border: 1px solid transparent;
    transition: border-color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

.invitation-upload__crop-field .profile__label {
    letter-spacing: 0.07em;
    font-size: 0.6rem;
}

.invitation-upload__crop-field.is-enabled {
    border-color: rgba(89, 183, 192, 0.38);
    background: rgba(233, 247, 249, 0.58);
}

.invitation-upload__crop-field.is-disabled {
    opacity: 0.46;
    border-color: rgba(146, 167, 170, 0.24);
    background: rgba(232, 238, 239, 0.48);
}

.invitation-upload__crop-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    background: transparent;
}

.invitation-upload__crop-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(89, 183, 192, 0.7), rgba(126, 220, 167, 0.75));
}

.invitation-upload__crop-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #59B7C0;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(62, 143, 152, 0.45);
    margin-top: -5px;
}

.invitation-upload__crop-range::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(89, 183, 192, 0.7), rgba(126, 220, 167, 0.75));
}

.invitation-upload__crop-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #59B7C0;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 1px rgba(62, 143, 152, 0.45);
}

.invitation-upload__crop-range:disabled {
    cursor: not-allowed;
}

.invitation-upload__crop-range:disabled::-webkit-slider-runnable-track,
.invitation-upload__crop-range:disabled::-moz-range-track {
    background: rgba(130, 156, 160, 0.5);
}

.invitation-upload__crop-range:disabled::-webkit-slider-thumb,
.invitation-upload__crop-range:disabled::-moz-range-thumb {
    background: #9AB1B4;
    box-shadow: 0 0 0 1px rgba(130, 156, 160, 0.4);
}

.invitation-upload__zoom-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 0.32rem;
    align-items: center;
}

.invitation-upload__zoom-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(89, 183, 192, 0.45);
    background: #FFFFFF;
    color: #2A6F75;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
}

.invitation-upload__zoom-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    background: rgba(232, 238, 239, 0.7);
    border-color: rgba(130, 156, 160, 0.46);
    color: #6E8E91;
}

.invitation-upload__zoom-value {
    margin: 0;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5A7B7E;
    text-align: right;
}

.invitation-upload__crop-actions {
    display: flex;
    justify-content: flex-end;
}

.invitation-upload__crop-apply {
    min-height: 28px;
    padding: 0.28rem 0.55rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .invitation-photo-layout {
        grid-template-columns: 1fr;
    }

    .invitation-upload-preview {
        max-width: 360px;
        width: 100%;
        justify-self: center;
    }
}

@media (max-width: 680px) {
    .invitation-upload__actions {
        justify-content: center;
    }

    .invitation-upload__crop-actions {
        justify-content: center;
    }
}

.invitation-preview {
    width: min(560px, 100%);
    margin: 0 auto;
    border: 1px solid var(--invitation-border);
    background: #FFFFFF;
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.12);
}

.invitation-preview__brand {
    background: linear-gradient(135deg, #56B3C2 0%, #3AA8B7 100%);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: center;
}

.invitation-preview__brand img {
    width: min(220px, 62%);
    height: auto;
}

.invitation-preview__body {
    padding: 1.2rem;
    display: grid;
    gap: 0.85rem;
}

.invitation-preview__title {
    text-align: center;
    color: #005359;
    font-size: var(--font-size-lg);
}

.invitation-preview__names {
    text-align: center;
    color: #486F72;
    font-size: 1.08rem;
    font-weight: var(--font-weight-bold);
    text-transform: none;
    letter-spacing: 0.01em;
}

.invitation-preview__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1);
    transform-origin: center;
    transition: transform 120ms linear, object-position 120ms linear;
}

.invitation-preview__image-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(0, 83, 89, 0.12);
}

.invitation-preview__copy {
    display: grid;
    gap: 0.7rem;
}

.invitation-preview__copy p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: #324B4D;
}

.invitation-preview__copy strong {
    color: #005359;
}

.invitation-preview__copy a {
    color: #18BBC2;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

.invitation-preview__signature {
    color: #1E2D2E;
    font-weight: var(--font-weight-bold);
    white-space: pre-line;
}

.invitation-email-tools {
    margin-top: var(--space-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "help actions"
        "status status";
    column-gap: var(--space-md);
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.75rem 0.9rem 0.7rem;
    border: 1px solid rgba(86, 179, 194, 0.26);
    background: linear-gradient(140deg, rgba(240, 249, 250, 0.85) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.invitation-email-tools__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-end;
    align-self: center;
}

.invitation-email-tools__actions .profile__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 12.5rem;
}

.invitation-email-tools__actions .profile__button i {
    font-size: 1rem;
}

.invitation-email-tools__status {
    grid-area: status;
    margin: 0;
    min-height: 0;
}

.invitation-email-tools__status:empty {
    display: none;
}

.invitation-email-tools__help {
    grid-area: help;
    margin: 0;
    max-width: 64ch;
    line-height: 1.4;
    font-size: 0.96rem;
    align-self: center;
}

.invitation-email-tools__status[data-state="success"] {
    color: #0C5D50;
}

.invitation-email-tools__status[data-state="warning"] {
    color: #A36518;
}

.invitation-schedule {
    padding: 0;
}

.invitation-schedule__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #005359;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.invitation-schedule__title i {
    color: #1ABBC2;
    font-size: 1.12em;
}

.invitation-programmed {
    border: 1px solid var(--invitation-border);
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FCFC 100%);
    padding: clamp(0.95rem, 1.7vw, 1.55rem);
    display: grid;
    gap: var(--space-sm);
}

.invitation-programmed__intro {
    text-align: center;
    display: grid;
    gap: 0.2rem;
    justify-items: center;
}

.invitation-programmed__title {
    margin: 0;
    color: #1E2D2E;
    font-size: clamp(1.95rem, 3.45vw, 2.65rem);
    line-height: 1.08;
}

.invitation-programmed__subtitle {
    margin: 0;
    color: #366A6F;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.invitation-programmed__schedule {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 0.42rem;
    color: #1E2D2E;
    font-size: clamp(1.03rem, 1.9vw, 1.36rem);
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;
}

.invitation-programmed__schedule i {
    color: #18BBC2;
    font-size: 1em;
}

.invitation-programmed__count {
    margin: 0;
    text-align: center;
    color: #4C676A;
    font-size: clamp(0.98rem, 1.6vw, 1.18rem);
}

.invitation-programmed__inline-tools {
    display: flex;
    justify-content: center;
}

.invitation-programmed__table-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.invitation-programmed__table-open i {
    font-size: 1rem;
}

.invitation-programmed__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.invitation-programmed__stat {
    min-height: 90px;
    padding: 0.55rem;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.2rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
}

.invitation-programmed__stat strong {
    color: #005359;
    font-size: clamp(1.35rem, 2.1vw, 1.62rem);
    line-height: 1;
    font-weight: var(--font-weight-semibold);
}

.invitation-programmed__stat span {
    color: #1E2D2E;
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    line-height: 1.2;
}

.invitation-programmed__stat--pending {
    background: rgba(255, 206, 116, 0.18);
}

.invitation-programmed__stat--pending strong {
    color: #A47708;
}

.invitation-programmed__stat--sent {
    background: rgba(126, 220, 167, 0.16);
}

.invitation-programmed__stat--sent strong {
    color: #098E56;
}

.invitation-programmed__stat--opened {
    background: rgba(86, 179, 194, 0.16);
}

.invitation-programmed__stat--opened strong {
    color: #0A6670;
}

.invitation-programmed__stat--clicks {
    background: rgba(86, 179, 194, 0.1);
}

.invitation-programmed__stat--clicks strong {
    color: #145A63;
}

.invitation-programmed__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.invitation-programmed__actions .profile__button {
    min-height: 34px;
    min-width: 0;
    width: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.66rem;
    padding: 0.32rem 0.68rem;
    border-color: rgba(86, 179, 194, 0.42);
    color: #2A6F75;
    background: #FFFFFF;
    line-height: 1.1;
}

.invitation-programmed__actions .profile__button:hover {
    background: rgba(86, 179, 194, 0.14);
    border-color: rgba(48, 147, 159, 0.8);
    color: #005359;
}

.invitation-programmed__actions .profile__button.profile__button--primary {
    background: #59B7C0;
    border-color: #59B7C0;
    color: #FFFFFF;
}

.invitation-programmed__actions .profile__button.profile__button--primary:hover {
    background: #48aab4;
    border-color: #48aab4;
    color: #FFFFFF;
}

.invitation-programmed__actions .profile__button i {
    font-size: 0.9rem;
    font-weight: 400;
}

.invitation-programmed__actions .invitation-programmed__button--danger {
    border-color: rgba(194, 86, 122, 0.5);
    color: #8A3354;
}

.invitation-programmed__actions .invitation-programmed__button--danger:hover {
    background: rgba(230, 100, 145, 0.16);
    border-color: rgba(194, 86, 122, 0.78);
    color: #7A2548;
}

.invitation-programmed__note {
    margin: 0;
    text-align: center;
    color: #5E7476;
    font-size: var(--font-size-xs);
    line-height: 1.45;
}

.invitation-recipients-modal .profile-modal__dialog {
    width: min(760px, calc(100% - 2rem));
}

.invitation-recipients-modal .profile-modal__header p {
    color: #5E7476;
    font-size: var(--font-size-xs);
}

.invitation-recipients-modal__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 280px);
    justify-content: start;
}

.invitation-recipients-modal__filter .profile__select {
    min-height: 40px;
    background-color: #FFFFFF;
}

.invitation-recipients-modal__list-wrap {
    border: 1px solid rgba(86, 179, 194, 0.3);
    background: #FFFFFF;
    max-height: 360px;
    overflow: auto;
}

.invitation-recipients-modal__table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.invitation-recipients-modal__table th,
.invitation-recipients-modal__table td {
    padding: 0.72rem 0.9rem;
    border-bottom: 1px solid rgba(86, 179, 194, 0.22);
    text-align: left;
    vertical-align: middle;
}

.invitation-recipients-modal__table th {
    background: rgba(86, 179, 194, 0.14);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: #4F6E70;
}

.invitation-recipients-modal__empty {
    color: #6B7B7C;
    font-size: var(--font-size-sm);
    text-align: center;
}

.invitation-recipient-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.58rem;
    border: 1px solid transparent;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.invitation-recipient-status--pending {
    color: #6B5300;
    background: rgba(255, 206, 116, 0.26);
    border-color: rgba(255, 206, 116, 0.66);
}

.invitation-recipient-status--sent {
    color: #005359;
    background: rgba(126, 220, 167, 0.2);
    border-color: rgba(126, 220, 167, 0.5);
}

.invitation-recipient-status--opened {
    color: #005359;
    background: rgba(86, 179, 194, 0.2);
    border-color: rgba(86, 179, 194, 0.54);
}

.invitation-recipient-status--clicked {
    color: #0A5B63;
    background: rgba(86, 179, 194, 0.14);
    border-color: rgba(86, 179, 194, 0.48);
}

.invitation-delete-modal .profile-modal__dialog {
    width: min(560px, calc(100% - 2rem));
}

.invitation-modal .profile-modal__dialog {
    width: min(680px, 100%);
}

.invitation-modal__header {
    text-align: center;
}

.invitation-modal__body {
    display: grid;
    justify-items: center;
    gap: 0.65rem;
    text-align: center;
}

.invitation-modal__body p {
    margin: 0;
    color: #005359;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.invitation-modal__meta {
    color: hsla(184, 100%, 17%, 0.62);
    font-size: var(--font-size-xs);
}

.invitation-modal__icon {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 999px;
    border: 1px solid rgba(89, 183, 192, 0.6);
    background: rgba(89, 183, 192, 0.15);
    color: #59B7C0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invitation-modal__icon i {
    font-size: 1.35rem;
}

.invitation-modal__icon--warning {
    color: #E66491;
    border-color: rgba(230, 100, 145, 0.5);
    background: rgba(230, 100, 145, 0.12);
}

.invitation-modal__footer {
    justify-content: space-between;
}

.invitation-modal__footer .profile__button {
    flex: 1 1 180px;
    justify-content: center;
    text-align: center;
}

.invitation-page .footer__right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invitation-page .footer__right a i {
    font-size: 1.35rem;
}

@media (max-width: 900px) {
    .invitation-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-sm);
    }

    .invitation-steps__item::after {
        display: none;
    }

    .invitation-page .invitation-step .profile__form-grid {
        grid-template-columns: 1fr;
    }

    .invitation-page .invitation-step .profile__field,
    .invitation-page .invitation-step .profile__field--full {
        grid-column: 1 / -1;
    }

    .invitation-page .invitation-step .profile__input,
    .invitation-page .invitation-step .profile__select,
    .invitation-page .invitation-step .profile__textarea {
        width: 100%;
    }

    .invitation-programmed__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invitation-programmed__actions .profile__button {
        min-width: 172px;
    }
}

@media (max-width: 680px) {
    .invitation-page .profile-hero__info .profile__subtitle {
        font-size: var(--font-size-sm);
        line-height: 1.45;
        max-width: 31ch;
        margin-inline: auto;
    }

    .invitation-page .profile-hero__actions .profile__button {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .invitation-page .profile-hero__actions .profile__button--with-icon {
        justify-content: center;
    }

    .invitation-email-tools__actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        align-self: stretch;
    }

    .invitation-email-tools {
        grid-template-columns: 1fr;
        grid-template-areas:
            "help"
            "actions"
            "status";
        row-gap: 0.45rem;
        padding: 0.7rem 0.6rem 0.65rem;
    }

    .invitation-email-tools__help {
        font-size: 0.92rem;
    }

    .invitation-email-tools__actions .profile__button {
        width: 100%;
        min-width: 0;
    }

    .invitation-programmed {
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .invitation-programmed__title {
        font-size: clamp(1.68rem, 8.4vw, 2.05rem);
    }

    .invitation-programmed__subtitle {
        font-size: 0.96rem;
    }

    .invitation-programmed__schedule {
        font-size: clamp(0.98rem, 4.9vw, 1.24rem);
        justify-self: stretch;
    }

    .invitation-programmed__count {
        font-size: 0.96rem;
    }

    .invitation-programmed__inline-tools {
        display: grid;
        grid-template-columns: 1fr;
    }

    .invitation-programmed__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .invitation-programmed__actions .profile__button {
        width: 100%;
        min-width: 0;
    }

    .invitation-recipients-modal__toolbar {
        grid-template-columns: 1fr;
    }

    .invitation-recipients-modal__list-wrap {
        max-height: 320px;
    }

    .invitation-recipients-modal__table {
        min-width: 420px;
    }

    .invitation-steps {
        display: none;
    }

    .invitation-step {
        padding-top: 0;
        border-top: 0;
        gap: 16px;
    }

    .invitation-step__header {
        width: calc(100% + (var(--space-md) * 2));
        margin-left: calc(var(--space-md) * -1);
        margin-right: calc(var(--space-md) * -1);
        margin-top: calc(var(--space-md) * -1);
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "progress title"
            "progress subtitle";
        justify-items: start;
        align-items: center;
        align-content: center;
        text-align: left;
        column-gap: 12px;
        row-gap: 2px;
        background-color: #005359;
        padding: 14px;
        padding-top: calc(14px + 5px);
        position: relative;
        min-height: 132px;
    }

    .invitation-step__header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(to right, #56B3C2 0%, #7EDCA7 100%);
    }

    .invitation-step__mobile-progress {
        grid-area: progress;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        justify-self: center;
        width: 65px;
        min-width: 65px;
        height: 65px;
        border-radius: 50%;
        position: relative;
        background: conic-gradient(from 0deg, #FFFFFF 0% calc(100% - var(--value) * 1%), #6ee7b7 calc(100% - var(--value) * 1%) 100%);
    }

    .invitation-step__mobile-progress::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background-color: #005359;
    }

    .invitation-step__mobile-progress span {
        position: relative;
        z-index: 1;
        color: #FFFFFF;
        font-size: 16px;
        line-height: 1;
    }

    .invitation-step__mobile-progress b {
        color: #6ee7b7;
    }

    .invitation-step__title {
        grid-area: title;
        color: #FFFFFF;
        font-size: 24px;
        gap: 8px;
    }

    .invitation-step__title i {
        display: inline-flex;
        font-size: 24px;
        color: #FFFFFF;
        font-weight: 400;
    }

    .invitation-step__subtitle {
        grid-area: subtitle;
        max-width: none;
        color: #A7BDBF;
        font-size: 16px;
        line-height: 1.15;
        margin-top: 0;
    }

    .invitation-step__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .invitation-step__actions .profile__button,
    .invitation-step__actions .profile__button:last-child {
        margin-left: 0;
        width: 100%;
    }

    .invitation-programmed__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invitation-modal__footer .profile__button {
        flex-basis: 100%;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .invitation-step__header {
        width: calc(100% + (var(--space-sm) * 2));
        margin-left: calc(var(--space-sm) * -1);
        margin-right: calc(var(--space-sm) * -1);
        margin-top: calc(var(--space-sm) * -1);
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .invitation-step__subtitle {
        grid-column: 2;
        text-align: left;
    }

    .invitation-step__title {
        justify-content: flex-start;
    }
}

/* ============================================================
   PAGE - PREGUNTAS FRECUENTES
   ============================================================ */
.faq-page-body {
    background: linear-gradient(180deg, #F7FBFB 0%, #EDF4F4 100%);
}

.faq-page {
    overflow: visible;
}

.faq-hero {
    position: relative;
    isolation: isolate;
    color: #0D4D53;
    background: #EAF1F1;
    border-bottom: 1px solid rgba(86, 179, 194, 0.35);
    overflow: hidden;
}

.faq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(116deg, rgba(247, 252, 252, 0.92) 0%, rgba(241, 248, 248, 0.86) 42%, rgba(236, 245, 245, 0.78) 100%),
        url("../img/banner-fondo.webp") center / cover no-repeat;
    z-index: -1;
}

.faq-hero::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: 52px;
    right: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 220, 167, 0.26) 0%, rgba(126, 220, 167, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

.faq-hero .container {
    padding-top: calc(104px + 2rem);
    padding-bottom: 2.05rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    justify-items: center;
    align-items: center;
    min-height: clamp(350px, 50vh, 500px);
}

.faq-hero__content {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.faq-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.04rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #4D878C;
    margin-bottom: 0.8rem;
}

.faq-hero h1 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(3rem, 5vw, 4.2rem);
    color: #005359;
    margin-bottom: 1.05rem;
    text-wrap: balance;
    margin-inline: auto;
}

.faq-hero__lead {
    max-width: 42ch;
    font-size: clamp(1.25rem, 2vw, 1.56rem);
    line-height: 1.42;
    color: #224A4E;
    text-wrap: balance;
    margin-inline: auto;
}

.faq-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.65rem;
    flex-wrap: wrap;
}

.faq-page .faq-hero__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --offset: 22px;
    min-width: 270px;
    font-size: 1.18rem;
    line-height: 1.2;
    padding: 0.58rem 1.5rem;
    padding-top: calc(0.58rem + 2px);
    padding-bottom: calc(0.58rem + 11px);
    padding-right: calc(1.5rem + 8px);
    filter: drop-shadow(0 14px 10px rgba(0, 83, 89, 0.18));
}

.faq-page .faq-hero__actions .btn.btn-secondary {
    filter: drop-shadow(0 11px 8px rgba(0, 83, 89, 0.14));
}

.faq-hero__panel {
    position: relative;
    justify-self: start;
    align-self: center;
    width: 100%;
    max-width: 480px;
    border: 1px solid hsla(185, 64%, 32%, 0.35);
    background: linear-gradient(145deg, hsla(0, 0%, 100%, 0.78) 0%, hsla(185, 70%, 98%, 0.62) 100%);
    box-shadow:
        0 12px 24px hsla(185, 46%, 43%, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1rem 0.95rem 0.9rem;
    overflow: hidden;
}

.faq-hero__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        118deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(126, 220, 167, 0.12) 48%,
        rgba(230, 100, 145, 0.12) 100%
    );
    opacity: 0.78;
    pointer-events: none;
    animation: faq-panel-glass-shift 10s ease-in-out infinite alternate;
}

.faq-hero__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #E66491;
}

.faq-hero__panel h2,
.faq-hero__panel ul {
    position: relative;
    z-index: 1;
}

.faq-hero__panel h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0.62rem;
    font-size: 1.44rem;
    line-height: 1.08;
    color: #005359;
}

.faq-hero__panel h2::before,
.faq-hero__panel h2::after {
    content: none !important;
}

.faq-hero__panel-title-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: #E66491;
    transform: rotate(45deg);
}

.faq-hero__panel ul {
    display: grid;
    counter-reset: faq-express-step;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
}

.faq-hero__panel li {
    position: relative;
    border: 1px solid hsla(185, 64%, 32%, 0.35);
    background: hsla(0, 0%, 100%, 0.82);
    box-shadow: 0 8px 16px hsla(185, 46%, 43%, 0.16);
    padding: 1.46rem 0.42rem 0.5rem;
    min-height: 84px;
    color: #005359;
    font-size: 0.84rem;
    line-height: 1.28;
    text-align: center;
    text-wrap: balance;
    z-index: 1;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.faq-hero__panel li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.42rem;
    width: 0.88rem;
    height: 0.88rem;
    background: #59B7C0;
    transform: translateX(-50%) rotate(45deg) scale(1);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.faq-hero__panel li::after {
    content: counter(faq-express-step);
    counter-increment: faq-express-step;
    position: absolute;
    left: 50%;
    top: 0.42rem;
    width: 0.88rem;
    height: 0.88rem;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    font-size: 0.56rem;
    font-weight: var(--font-weight-bold);
    transform: translateX(-50%);
    transition: transform var(--transition-fast);
}

.faq-hero__panel li:hover {
    transform: translateY(-2px);
    border-color: hsla(185, 64%, 32%, 0.56);
    box-shadow: 0 12px 22px hsla(185, 46%, 43%, 0.22);
    background: hsla(0, 0%, 100%, 0.94);
}

.faq-hero__panel li:hover::before {
    transform: translateX(-50%) rotate(45deg) scale(1.08);
    background: #3DA7B1;
}

.faq-hero__panel li:hover::after {
    transform: translateX(-50%) scale(1.03);
}

@keyframes faq-panel-glass-shift {
    0% {
        transform: translateX(-2%) translateY(0);
    }
    100% {
        transform: translateX(2%) translateY(-1%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-hero__panel::before {
        animation: none;
    }

    .faq-hero__panel li,
    .faq-hero__panel li::before,
    .faq-hero__panel li::after {
        transition: none;
    }
}

.faq-content .container {
    padding-block: 1.55rem 3.6rem;
}

.faq-page #faq-calendario {
    scroll-margin-top: 118px;
}

.faq-calendar {
    border: 1px solid rgba(86, 179, 194, 0.44);
    background: #F2F9F9;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.08);
}

.faq-calendar__heading {
    margin-bottom: 0.75rem;
}

.faq-calendar h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    color: #005359;
    margin: 0;
}

.faq-calendar__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.45rem;
}

.faq-calendar__next {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.35;
    color: #1D5E65;
}

.faq-calendar__next strong {
    color: #005359;
}

.faq-calendar__reminder {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(86, 179, 194, 0.45);
    background: #FFFFFF;
    color: #0A6670;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}

.faq-calendar__reminder::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    background: #E66491;
    transform: rotate(45deg);
}

.faq-calendar__reminder:hover {
    border-color: rgba(86, 179, 194, 0.75);
    background-color: #F5FCFC;
    color: #005359;
}

.faq-calendar__note {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #4F7579;
}

.faq-calendar__cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(116px, 1fr));
    gap: 0.65rem;
}

.faq-calendar__card {
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(86, 179, 194, 0.35);
    background: #FFFFFF;
    box-shadow: 0 6px 12px rgba(0, 83, 89, 0.08);
}

.faq-calendar__card.is-current {
    border-color: rgba(86, 179, 194, 0.9);
    background: #F8FEFB;
    box-shadow: 0 9px 16px rgba(0, 83, 89, 0.13);
}

.faq-calendar__card.is-past {
    border-color: rgba(86, 179, 194, 0.2);
    background: #F2F6F6;
    box-shadow: none;
    opacity: 0.66;
    pointer-events: none;
}

.faq-calendar__card.is-past h3 {
    color: #5E8388;
}

.faq-calendar__card.is-past .faq-calendar__date {
    color: #86A2A7;
    border-color: rgba(86, 179, 194, 0.2);
    background: #EDF3F3;
    cursor: default;
}

.faq-calendar__card h3 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    line-height: 1.2;
    color: #005359;
    margin-bottom: 0.24rem;
}

.faq-calendar__card-badge {
    font-size: 0.64rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #FFFFFF;
    background: #59B7C0;
    border-radius: 0;
    padding: 0.22rem 0.42rem;
}

.faq-calendar__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.faq-calendar__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 1.75rem;
    padding: 0.2rem 0.45rem 0.12rem;
    border: 1px solid rgba(86, 179, 194, 0.4);
    border-radius: 0;
    color: #1C6268;
    font-size: 0.84rem;
    line-height: 0.95;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    background: #FFFFFF;
    cursor: help;
}

.faq-calendar__date.is-next {
    color: #FFFFFF;
    border-color: #59B7C0;
    background: #59B7C0;
}

.faq-calendar__date.is-past {
    color: #79959A;
    border-color: rgba(86, 179, 194, 0.26);
    background: #F2F7F7;
    cursor: default;
}

.faq-calendar__future-accordion[hidden] {
    display: none;
}

@media (hover: hover) {
    .faq-calendar__date[data-weekday]::before,
    .faq-calendar__date[data-weekday]::after {
        content: "";
        position: absolute;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast), transform var(--transition-fast);
    }

    .faq-calendar__date[data-weekday]::after {
        content: attr(data-weekday);
        bottom: calc(100% + 8px);
        transform: translate(-50%, 5px);
        padding: 0.34rem 0.48rem;
        border-radius: 0;
        background: #005359;
        color: #FFFFFF;
        font-size: 0.72rem;
        line-height: 1;
        white-space: nowrap;
        text-transform: capitalize;
        box-shadow: 0 8px 14px rgba(0, 83, 89, 0.22);
        z-index: 3;
    }

    .faq-calendar__date[data-weekday]::before {
        bottom: calc(100% + 4px);
        width: 7px;
        height: 7px;
        background: #005359;
        transform: translateX(-50%) rotate(45deg);
        z-index: 2;
    }

    .faq-calendar__date[data-weekday]:hover::before,
    .faq-calendar__date[data-weekday]:hover::after,
    .faq-calendar__date[data-weekday]:focus-visible::before,
    .faq-calendar__date[data-weekday]:focus-visible::after {
        opacity: 1;
    }

    .faq-calendar__date[data-weekday]:hover::after,
    .faq-calendar__date[data-weekday]:focus-visible::after {
        transform: translate(-50%, 0);
    }
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.faq-aside {
    position: sticky;
    top: 130px;
    background: #FFFFFF;
    border: 1px solid rgba(86, 179, 194, 0.38);
    box-shadow: 0 14px 26px rgba(0, 83, 89, 0.12);
    padding: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.faq-aside h3 {
    font-size: 1.35rem;
    color: #005359;
    margin: 0;
}

.faq-aside p {
    color: #4D878C;
    line-height: 1.5;
    margin: 0;
}

.faq-aside__cta.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    --offset: 20px;
    font-size: 1.02rem;
    line-height: 1.2;
    padding: 0.5rem 1.3rem;
    padding-top: calc(0.5rem + 2px);
    padding-bottom: calc(0.5rem + 11px);
    padding-right: calc(1.3rem + 8px);
    margin-top: 0.25rem;
    filter: drop-shadow(0 14px 10px rgba(0, 83, 89, 0.18));
}

.faq-accordion {
    gap: 0.7rem;
}

.faq-accordion .accordion-header {
    padding: 1rem 1.05rem;
    font-size: 1.08rem;
}

.faq-accordion .accordion-header span {
    font-size: 1.1rem;
    line-height: 1.3;
}

.faq-accordion .accordion-content p {
    padding: 0 1rem;
    line-height: 1.45;
}

.faq-accordion .accordion-content p:first-child {
    padding-top: 0.85rem;
}

.faq-accordion .accordion-content p:last-child {
    padding-bottom: 0.85rem;
}

.faq-accordion .accordion-content p + p {
    margin-top: 0.35rem;
}

@media (max-width: 1200px) {
    .faq-calendar__cards {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }
}

@media (max-width: 1024px) {
    .faq-page #faq-calendario {
        scroll-margin-top: 102px;
    }

    .faq-hero .container {
        gap: 0.95rem;
        align-items: center;
        justify-items: center;
        min-height: 0;
    }

    .faq-hero__panel {
        justify-self: start;
        width: 100%;
        max-width: 720px;
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-aside {
        position: static;
    }
}

@media (max-width: 767px) {
    .faq-page #faq-calendario {
        scroll-margin-top: 86px;
    }

    .faq-hero .container {
        padding-top: calc(60px + 16px + 0.9rem);
        padding-bottom: 1.95rem;
    }

    .faq-hero__eyebrow {
        font-size: 0.9rem;
        letter-spacing: 0.065em;
    }

    .faq-hero h1 {
        font-size: 2.35rem;
        line-height: 1.08;
        white-space: normal;
    }

    .faq-hero__lead {
        font-size: 1.04rem;
        line-height: 1.55;
    }

    .faq-content .container {
        padding-block: 1.5rem 2.3rem;
    }

    .faq-layout {
        gap: 0.85rem;
    }

    .faq-accordion {
        order: 1;
    }

    .faq-aside {
        order: 2;
    }

    .faq-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        width: 100%;
    }

    .faq-page .faq-hero__actions .btn {
        --offset: 18px;
        width: 100%;
        min-width: 0;
        font-size: 1.06rem;
        line-height: 1.16;
        padding: 0.58rem 1.2rem;
        padding-top: calc(0.58rem + 3px);
        padding-bottom: calc(0.58rem + 12px);
        padding-right: calc(1.2rem + 8px);
    }

    .faq-hero__panel {
        padding: 0.86rem;
    }

    .faq-hero__panel h2 {
        font-size: 1.22rem;
        margin-bottom: 0.52rem;
    }

    .faq-hero__panel-title-icon {
        width: 10px;
        height: 10px;
        flex-basis: 10px;
    }

    .faq-hero__panel ul {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .faq-hero__panel li {
        min-height: auto;
        text-align: left;
        padding: 0.46rem 0.5rem 0.46rem 1.8rem;
        font-size: 0.84rem;
        line-height: 1.26;
    }

    .faq-hero__panel li::before {
        left: 0.58rem;
        top: 50%;
        width: 0.86rem;
        height: 0.86rem;
        transform: translateY(-50%) rotate(45deg);
    }

    .faq-hero__panel li::after {
        left: 0.58rem;
        top: 50%;
        width: 0.86rem;
        height: 0.86rem;
        font-size: 0.56rem;
        transform: translateY(-50%);
    }

    .faq-aside__cta.btn {
        --offset: 18px;
        font-size: 0.98rem;
        line-height: 1.2;
        padding: 0.48rem 1.1rem;
        padding-top: calc(0.48rem + 2px);
        padding-bottom: calc(0.48rem + 11px);
        padding-right: calc(1.1rem + 8px);
    }

    .faq-calendar {
        padding: 0.9rem;
    }

    .faq-calendar__meta {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .faq-calendar__reminder {
        justify-content: center;
        padding: 0.42rem 0.7rem;
    }

    .faq-calendar__note {
        margin-bottom: 0.7rem;
    }

    .faq-calendar__cards {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 0.6rem;
    }

    .faq-calendar__card {
        padding: 0.5rem 0.52rem;
    }

    .faq-calendar--mobile-compact .faq-calendar__card.is-past {
        display: none;
    }

    .faq-calendar--mobile-compact .faq-calendar__card.is-current {
        grid-column: 1 / -1;
        padding: 0.82rem 0.86rem;
        margin-bottom: 0.2rem;
    }

    .faq-calendar--mobile-compact .faq-calendar__card.is-current h3 {
        margin-bottom: 0.46rem;
        font-size: 1.06rem;
    }

    .faq-calendar--mobile-compact .faq-calendar__card.is-current .faq-calendar__dates {
        gap: 0.44rem;
    }

    .faq-calendar--mobile-compact .faq-calendar__card.is-current .faq-calendar__date {
        min-width: 1.86rem;
        padding: 0.28rem 0.54rem 0.16rem;
    }

    .faq-calendar--mobile-compact .faq-calendar__future-accordion {
        margin-top: 0.6rem;
        border: 1px solid rgba(86, 179, 194, 0.36);
        background: #FFFFFF;
        box-shadow: 0 7px 14px rgba(0, 83, 89, 0.08);
        overflow: hidden;
    }

    .faq-calendar--mobile-compact .faq-calendar__future-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        padding: 0.65rem 0.72rem;
        border: 0;
        background: #F7FCFC;
        color: #005359;
        font-weight: 700;
        font-size: 0.9rem;
        line-height: 1.2;
        text-align: left;
        cursor: pointer;
    }

    .faq-calendar--mobile-compact .faq-calendar__future-toggle svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform var(--transition-fast);
    }

    .faq-calendar--mobile-compact .faq-calendar__future-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .faq-calendar--mobile-compact .faq-calendar__future-panel {
        max-height: 0;
        padding: 0 0.5rem;
        border-top: 0 solid rgba(86, 179, 194, 0.26);
        background: #FFFFFF;
        overflow: hidden;
        opacity: 0;
        transition:
            max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
            opacity 220ms ease,
            padding 220ms ease,
            border-top-width 220ms ease;
    }

    .faq-calendar--mobile-compact .faq-calendar__future-accordion.is-open .faq-calendar__future-panel {
        opacity: 1;
        padding: 0.58rem 0.5rem 0.5rem;
        border-top-width: 1px;
    }

    .faq-calendar--mobile-compact .faq-calendar__future-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 0.5rem;
    }

    .faq-calendar__card h3 {
        font-size: 0.92rem;
    }

    .faq-calendar__date {
        min-width: 1.65rem;
        font-size: 0.8rem;
    }

    .faq-accordion .accordion-header span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .faq-calendar__cards {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .faq-calendar--mobile-compact .faq-calendar__future-cards {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}
/* ============================================================
   PAGE - ÁLBUM DE FOTOS
   ============================================================ */
body.album-page {
    --album-border: rgba(86, 179, 194, 0.32);
    --album-mobile-fab-size: 56px;
    --album-mobile-fab-right: calc(1rem + env(safe-area-inset-right, 0px));
    --album-mobile-fab-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    --album-mobile-reset-size: 34px;
    --album-mobile-reset-gap: 0.46rem;
}

.album-page .profile-section {
    padding-top: calc(var(--space-lg) + 1.1rem);
}

.album-page .profile-hero__avatar {
    border-radius: 50%;
    overflow: hidden;
}

.album-page .profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-profile {
    gap: var(--space-lg);
}

.album-intro {
    text-align: center;
    border: 1px solid var(--album-border);
    background: rgba(255, 255, 255, 0.78);
}

.album-intro__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    color: #0A6D75;
    max-width: 24ch;
    margin-inline: auto;
    text-wrap: balance;
}

.album-intro__text {
    margin: 0.4rem auto 0;
    max-width: 60ch;
    color: #4C5F61;
    text-wrap: balance;
}

.album-intro__toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.26rem;
    border: 1px solid rgba(86, 179, 194, 0.36);
    border-radius: 999px;
    background: #F8FBFB;
    gap: 0.26rem;
}

.album-pill {
    position: relative;
}

.album-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.album-pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 34px;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #4A6669;
    cursor: pointer;
    transition: all 0.2s ease;
}

.album-pill input:checked + span {
    background: rgba(86, 179, 194, 0.16);
    border-color: rgba(86, 179, 194, 0.5);
    color: #005359;
    font-weight: var(--font-weight-semibold);
}

.album-pill span i {
    font-size: 0.96rem;
}

.album-gallery {
    border: 1px solid var(--album-border);
    padding-top: calc(var(--space-lg) * 2);
}

.album-gallery__intro {
    text-align: center;
    margin-bottom: var(--space-md);
}

.album-gallery__intro-actions {
    margin-top: 0.85rem;
    width: min(640px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.album-gallery__intro-actions .album-toolbar__btn {
    width: 100%;
    min-width: 0;
}

.album-gallery__toolbar {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0.6rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: rgba(248, 251, 251, 0.96);
}

.album-gallery__toolbar > * {
    min-width: 0;
}

.album-toolbar__privacy {
    display: grid;
    gap: 0.26rem;
    align-content: end;
    min-width: 0;
}

.album-toolbar__title,
.album-toolbar__filter .profile__label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    min-height: 0.75rem;
    line-height: 1;
    font-size: var(--font-size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #59B7C0;
    white-space: nowrap;
}

.album-toolbar__title {
    font-weight: var(--font-weight-medium);
}

.album-toolbar__title i {
    margin-right: 0.28rem;
    font-size: 0.84rem;
    line-height: 1;
}

.album-toolbar__switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    height: 40px;
    min-height: 40px;
    padding: 0 0.72rem;
    line-height: 1;
    border: 1px solid rgba(86, 179, 194, 0.42);
    background: #FFFFFF;
    color: #005359;
    white-space: normal;
    cursor: pointer;
    width: 100%;
}

.album-toolbar__switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.album-toolbar__switch-box {
    width: 16px;
    height: 16px;
    border: 1px solid #59B7C0;
    background: #FFFFFF;
    flex: 0 0 16px;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.album-toolbar__switch-text {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-toolbar__switch:hover {
    border-color: rgba(48, 147, 159, 0.8);
    background: rgba(86, 179, 194, 0.08);
}

.album-toolbar__switch input:checked + .album-toolbar__switch-box {
    background: #59B7C0;
    border-color: #59B7C0;
    box-shadow: inset 0 0 0 2px #FFFFFF;
}

.album-toolbar__switch input:focus-visible + .album-toolbar__switch-box {
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: 2px;
}

.album-toolbar__filter {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    align-content: end;
    gap: 0.22rem;
}

.album-toolbar__filter .profile__label {
    width: 100%;
    justify-content: flex-start;
    gap: 0.28rem;
}

.album-toolbar__filter .profile__label i {
    font-size: 0.84rem;
    line-height: 1;
}

.album-toolbar__filter .profile__select {
    display: block;
    margin: 0;
    height: 40px;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    border-color: rgba(86, 179, 194, 0.46);
    background-color: #FFFFFF;
    color: #006068;
}

.album-toolbar__filter .profile__select:hover {
    border-color: rgba(86, 179, 194, 0.7);
    background-color: rgba(86, 179, 194, 0.06);
}

.album-toolbar__filter .profile__select:focus {
    border-color: rgba(86, 179, 194, 0.78);
    box-shadow: none;
}

.album-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    height: 40px;
    min-height: 40px;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    border-color: rgba(86, 179, 194, 0.46);
    background: #FFFFFF;
    color: #006068;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.album-toolbar__btn:hover {
    background: rgba(86, 179, 194, 0.13);
    border-color: rgba(86, 179, 194, 0.7);
    color: #005359;
}

.album-toolbar__btn--cta {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #FFFFFF;
    border-color: transparent;
}

.album-toolbar__btn--cta:hover {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    background-position: 100% 50%;
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 16px 24px rgba(86, 179, 194, 0.25);
}

.album-bulk {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    transition: margin-bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-gallery.is-bulk-mode .album-gallery__toolbar {
    margin-bottom: 0;
}

.album-bulk__toggle {
    min-height: 38px;
}

.album-bulk__toggle[aria-pressed="true"] {
    background: rgba(230, 100, 145, 0.16);
    border-color: rgba(230, 100, 145, 0.72);
    color: #8A3354;
}

.album-bulk__toggle[aria-pressed="true"]:hover {
    background: #E66491;
    border-color: #E66491;
    color: #FFFFFF;
}

.album-bulk__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    border: 1px solid transparent;
    background: transparent;
    padding: 0 0.4rem;
    margin-bottom: 0;
    height: 0;
    opacity: 0;
    transform: translateY(-0.2rem);
    overflow: hidden;
    pointer-events: none;
    transform-origin: top center;
    transition: height 0.32s cubic-bezier(0.2, 0.65, 0.2, 1), opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.65, 0.2, 1), margin-bottom 0.32s cubic-bezier(0.2, 0.65, 0.2, 1), border-color 0.24s ease, background-color 0.24s ease;
    will-change: height, opacity, transform, margin-bottom;
}

.album-bulk__panel.is-visible {
    border-color: rgba(86, 179, 194, 0.3);
    background: rgba(248, 251, 251, 0.96);
    padding: 0.34rem 0.4rem;
    margin-bottom: var(--space-md);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.album-bulk__count {
    order: 1;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 0.62rem;
    color: #005359;
    font-size: var(--font-size-sm);
}

.album-bulk__btn {
    min-height: 34px;
    padding: 0.44rem 0.68rem;
}

.album-bulk__preset {
    order: 2;
    border-color: rgba(86, 179, 194, 0.62);
    background: linear-gradient(180deg, rgba(134, 217, 225, 0.2) 0%, rgba(255, 255, 255, 0.98) 100%);
    color: #0A6D75;
    font-weight: var(--font-weight-semibold);
}

.album-bulk__preset--visible {
    order: 2;
}

.album-bulk__preset--all {
    order: 3;
}

.album-bulk__preset--clear {
    order: 4;
}

.album-bulk__preset:hover {
    border-color: rgba(86, 179, 194, 0.82);
    background: linear-gradient(180deg, rgba(134, 217, 225, 0.26) 0%, #FFFFFF 100%);
    color: #055E66;
}

.album-bulk__preset.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 18px rgba(69, 170, 180, 0.24);
}

.album-bulk__preset.is-active:hover {
    border-color: transparent;
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
}

.album-bulk__action {
    order: 10;
    max-width: 0;
    opacity: 0;
    transform: translateX(-0.7rem);
    margin-inline: 0;
    padding-inline: 0;
    border-width: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    transition: max-width 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), margin-inline 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), padding-inline 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), border-width 0.2s ease;
    transition-delay: 0ms;
}

.album-bulk__panel.has-selection .album-bulk__action {
    max-width: 14.5rem;
    opacity: 1;
    transform: translateX(0);
    margin-inline: 0;
    padding-inline: 0.68rem;
    border-width: 1px;
    border-color: rgba(86, 179, 194, 0.34);
    background: #FFFFFF;
    color: #4A6669;
    pointer-events: auto;
    transition-delay: var(--bulk-action-delay, 0ms);
}

.album-bulk__panel [data-album-bulk-download].album-bulk__action {
    order: 10;
    position: relative;
}

.album-bulk__panel [data-album-bulk-private].album-bulk__action {
    order: 11;
}

.album-bulk__panel [data-album-bulk-public].album-bulk__action {
    order: 12;
}

.album-bulk__panel [data-album-bulk-delete].album-bulk__action {
    order: 13;
}

.album-bulk__panel.has-selection [data-album-bulk-download].album-bulk__action {
    margin-left: 0.36rem;
}

.album-bulk__panel.has-selection [data-album-bulk-download].album-bulk__action::before {
    content: '';
    position: absolute;
    left: -0.36rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 1px;
    background: rgba(86, 179, 194, 0.42);
}

.album-bulk__panel.has-selection .album-bulk__btn--danger.album-bulk__action {
    border-color: rgba(194, 86, 122, 0.46);
    color: #8A3354;
    background: #FFFFFF;
}

.album-bulk__panel.has-selection .album-bulk__btn--danger.album-bulk__action:hover {
    border-color: #E66491;
    color: #FFFFFF;
    background: #E66491;
}

.album-bulk__btn--danger {
    border-color: rgba(194, 86, 122, 0.46);
    color: #8A3354;
}

.album-bulk__btn--danger:hover {
    border-color: #E66491;
    color: #FFFFFF;
    background: #E66491;
}

.album-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.15rem;
}

.album-gallery__pagination {
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.album-pagination__pages {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.album-pagination__nav,
.album-pagination__page {
    min-height: 34px;
    padding: 0.44rem 0.72rem;
    border-color: rgba(86, 179, 194, 0.46);
    background: #FFFFFF;
    color: #006068;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.album-pagination__nav i {
    font-size: 1rem;
    line-height: 1;
}

.album-pagination__page {
    min-width: 34px;
    justify-content: center;
    padding-inline: 0.6rem;
}

.album-pagination__page.is-active {
    background: rgba(86, 179, 194, 0.2);
    border-color: rgba(86, 179, 194, 0.72);
    color: #005359;
}

.album-pagination__meta {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 0.45rem;
    color: #4C5F61;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.album-photo-card {
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(86, 179, 194, 0.2);
    background: #FFFFFF;
    box-shadow: 0 15px 25px rgba(5, 57, 64, 0.12);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease;
}

.album-photo-card__media {
    position: relative;
    height: 188px;
    overflow: hidden;
}

.album-photo-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}

.album-photo-card:hover .album-photo-card__media img {
    transform: scale(1.04);
}

.album-photo-card__actions {
    position: absolute;
    top: 0.62rem;
    right: 0.62rem;
    display: flex;
    gap: 0.42rem;
}

.album-photo-card__selector {
    position: absolute;
    top: 2.75rem;
    left: 0.62rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(86, 179, 194, 0.46);
    background: rgba(255, 255, 255, 0.96);
    color: #2A6F75;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(0, 83, 89, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, visibility 0s linear 0.2s;
}

.album-photo-card__selector::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    opacity: 0;
    transform: scale(0.84);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.2s ease;
    pointer-events: none;
}

.album-photo-card__selector i {
    font-size: 1.02rem;
    display: inline-block;
}

.album-gallery.is-bulk-mode .album-photo-card__selector {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.album-gallery.is-bulk-mode .album-photo-card__media img {
    cursor: pointer;
    opacity: 0.36;
    filter: saturate(0.58) brightness(0.88);
    transform: none;
}

.album-gallery.is-bulk-mode .album-photo-card:hover .album-photo-card__media img {
    transform: none;
}

.album-gallery.is-bulk-mode .album-photo-card.is-selected .album-photo-card__media img {
    opacity: 1;
    filter: none;
}

.album-gallery.is-bulk-mode .album-photo-card:not(.is-selected):hover {
    transform: translateY(-2px);
    border-color: rgba(69, 170, 180, 0.58);
    box-shadow: 0 18px 30px rgba(5, 57, 64, 0.16);
}

.album-gallery.is-bulk-mode .album-photo-card:not(.is-selected):hover .album-photo-card__selector {
    transform: translateY(0) scale(1.06);
    border-color: rgba(69, 170, 180, 0.82);
    color: #1F7F89;
    box-shadow: 0 10px 18px rgba(69, 170, 180, 0.26);
}

.album-gallery.is-bulk-mode .album-photo-card:not(.is-selected):hover .album-photo-card__selector::after {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(69, 170, 180, 0.44);
}

.album-gallery.is-bulk-mode .album-photo-card:not(.is-selected):hover .album-photo-card__selector i {
    animation: album-select-hint 0.38s ease;
}

.album-photo-card__selector.is-active {
    background: #45AAB4;
    border-color: #45AAB4;
    color: #FFFFFF;
}

@keyframes album-select-hint {
    0% {
        transform: scale(1);
    }
    38% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

.album-photo-card.is-selected {
    border-color: rgba(69, 170, 180, 0.78);
    box-shadow: 0 18px 26px rgba(69, 170, 180, 0.2);
}

.album-photo-card__action {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(86, 179, 194, 0.46);
    background: rgba(255, 255, 255, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2A6F75;
    box-shadow: 0 8px 14px rgba(0, 83, 89, 0.14);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.album-photo-card__action i {
    font-size: 1.02rem;
}

.album-photo-card__action:hover {
    transform: translateY(-2px) scale(1.03);
}

.album-photo-card__action--download {
    border-color: rgba(86, 179, 194, 0.5);
    color: #2A6F75;
}

.album-photo-card__action--download:hover {
    background: #45AAB4;
    border-color: #45AAB4;
    color: #FFFFFF;
    box-shadow: 0 10px 18px rgba(69, 170, 180, 0.42);
}

.album-photo-card__action--privacy {
    border-color: rgba(86, 179, 194, 0.5);
    color: #2A6F75;
}

.album-photo-card__action--privacy:hover {
    background: #45AAB4;
    border-color: #45AAB4;
    color: #FFFFFF;
    box-shadow: 0 10px 18px rgba(69, 170, 180, 0.42);
}

.album-photo-card__action--privacy.is-private {
    border-color: rgba(194, 86, 122, 0.5);
    color: #8A3354;
}

.album-photo-card__action--privacy.is-private:hover {
    background: #E66491;
    border-color: #E66491;
    color: #FFFFFF;
    box-shadow: 0 10px 18px rgba(230, 100, 145, 0.42);
}

.album-photo-card__action--delete {
    border-color: rgba(194, 86, 122, 0.46);
    color: #8A3354;
}

.album-photo-card__action--delete:hover {
    background: #E66491;
    border-color: #E66491;
    color: #FFFFFF;
    box-shadow: 0 10px 18px rgba(230, 100, 145, 0.42);
}

.album-photo-card__private {
    position: absolute;
    top: 0.62rem;
    left: 0.62rem;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.68rem;
    border-radius: 0;
    background: #E66491;
    color: #FFFFFF;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
}

.album-photo-card__private.is-public {
    background: #56B3C2;
}

.album-photo-card__body {
    padding: 0.88rem 0.9rem 1rem;
}

.album-photo-card__body h4 {
    margin: 0;
    color: #0A7D86;
    font-size: 1.08rem;
    line-height: 1.2;
}

.album-photo-card__body p {
    margin: 0.28rem 0 0;
    color: #4C5F61;
    font-size: 0.82rem;
    line-height: 1.3;
}

.album-gallery__empty {
    margin: 0;
    border: 1px dashed rgba(86, 179, 194, 0.5);
    background: rgba(86, 179, 194, 0.08);
    border-radius: 0.48rem;
    padding: 0.9rem;
    color: #005359;
    text-align: center;
    font-weight: var(--font-weight-semibold);
}

.album-confirm-modal .profile-modal__dialog {
    width: min(560px, calc(100% - 2rem));
}

.album-confirm-modal {
    z-index: 100020;
}

.album-confirm-modal__body {
    text-align: center;
    font-family: var(--font-title);
    font-size: clamp(0.84rem, 0.95vw, 1.06rem);
    line-height: 1.42;
    color: #1E2B2C;
}

.album-confirm-modal__body p {
    margin: 0 auto;
    max-width: 36ch;
    text-wrap: balance;
}

.album-delete-modal__copy {
    display: grid;
    gap: 0.34rem;
    justify-items: center;
}

.album-delete-modal__question {
    margin: 0;
    max-width: none;
    font-size: clamp(1.08rem, 1.35vw, 1.55rem);
    line-height: 1.22;
    font-weight: var(--font-weight-semibold);
    color: #1A2628;
    text-wrap: nowrap;
    white-space: nowrap;
}

.album-delete-modal__warning {
    margin: 0;
    max-width: 44ch;
    font-family: var(--font-title);
    font-size: clamp(0.8rem, 0.95vw, 0.98rem);
    line-height: 1.34;
    font-weight: var(--font-weight-regular);
    color: #5E6F71;
}

.album-delete-modal__preview {
    margin: 0.72rem auto 0;
    width: min(170px, 52vw);
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: #F8FBFB;
    overflow: hidden;
}

.album-delete-modal__preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-confirm-modal__footer {
    justify-content: center;
    gap: 0.6rem;
}

.album-upload-modal .profile-modal__dialog {
    width: min(760px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

.album-public-upload-modal .profile-modal__dialog {
    width: min(680px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
}

.album-upload-modal__body {
    display: grid;
    gap: 1rem;
}

.album-upload-modal .profile-modal__body,
.album-public-upload-modal .profile-modal__body {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}

.album-upload__dropzone {
    width: 100%;
    min-height: 198px;
    border-radius: 0;
    /* Fix iOS/Safari: el borde dashed nativo recorta el lado izquierdo.
       Se usa SVG como background-image para garantizar los 4 lados visibles. */
    border: none;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%233FA99C' stroke-width='2' stroke-dasharray='8 6' stroke-dashoffset='0'/%3E%3C/svg%3E");
    display: grid;
    place-content: center;
    gap: 0.52rem;
    text-align: center;
    color: #005359;
    transition: background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.album-upload__dropzone i {
    font-size: 1.3rem;
}

.album-upload__dropzone strong {
    font-size: 1.15rem;
    line-height: 1.3;
}

.album-upload__dropzone span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #4A6669;
}

.album-upload__dropzone.is-dragover,
.album-upload__dropzone:hover {
    background-color: rgba(86, 179, 194, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%232A96A2' stroke-width='2' stroke-dasharray='8 6' stroke-dashoffset='0'/%3E%3C/svg%3E");
}

.album-upload__files {
    min-height: 42px;
    border: 1px solid var(--album-border);
    border-radius: 0;
    padding: 0.64rem 0.72rem;
    color: #456264;
    background: #F8FBFB;
}

.album-upload__files-meta {
    display: grid;
    gap: 0.3rem;
}

.album-upload__counter {
    margin: 0;
    text-align: right;
    color: #5A8A8E;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.album-upload__counter.is-full {
    color: #0A6D75;
    font-weight: var(--font-weight-semibold);
}

.album-upload__status {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem var(--space-lg) var(--space-md);
    border-top: 1px solid var(--dashboard-border);
    background: #FFFFFF;
}

.album-upload__status[hidden] {
    display: none !important;
}

.album-upload__status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.album-upload__status-text {
    margin: 0;
    color: #2D5A5E;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.album-upload__status-percent {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #3B6A6E;
}

.album-upload__status-track {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #DFE6E9;
}

.album-upload__status-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #56B3C2 0%, #2FA58E 100%);
    transition: width 0.14s linear;
}

.album-upload-modal.is-uploading [data-album-upload-close],
.album-public-upload-modal.is-uploading [data-public-upload-close] {
    pointer-events: none;
    opacity: 0.6;
}

.album-upload__dropzone:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.profile__button.is-loading [data-public-upload-send-icon] {
    animation: album-upload-spin 0.9s linear infinite;
}

@keyframes album-upload-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.album-public-upload-confirm-modal .profile-modal__dialog {
    width: min(540px, calc(100% - 2rem));
}

.album-public-upload-confirm-modal__body {
    padding: 1.6rem var(--space-lg) 1.3rem;
    text-align: center;
}

.album-public-upload-confirm-modal__body p {
    margin: 0;
    font-family: var(--font-title);
    color: #1B2B2D;
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
}

.album-public-upload-confirm-modal__summary {
    margin-top: 0.95rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.52rem;
    overflow-x: auto;
    padding-bottom: 0.08rem;
    scrollbar-width: thin;
}

.album-public-upload-confirm-modal__thumb {
    margin: 0;
    width: 64px;
    aspect-ratio: 1 / 1;
    flex: 0 0 64px;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: #FFFFFF;
    overflow: hidden;
}

.album-public-upload-confirm-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.album-public-upload-confirm-modal__footer {
    justify-content: center;
}

.album-upload__preview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}

.album-upload__preview-item {
    position: relative;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background: #FFFFFF;
    overflow: hidden;
}

.album-upload__preview-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.album-upload__preview-remove {
    position: absolute;
    top: 0.34rem;
    right: 0.34rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(194, 86, 122, 0.5);
    background: rgba(255, 255, 255, 0.94);
    color: #8A3354;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 83, 89, 0.16);
}

.album-upload__preview-remove i {
    font-size: 1rem;
    line-height: 1;
}

.album-upload__preview-remove:hover {
    background: #E66491;
    border-color: #E66491;
    color: #FFFFFF;
}

.album-upload__preview-name {
    margin: 0;
    padding: 0.38rem 0.44rem 0.46rem;
    font-size: 0.72rem;
    line-height: 1.2;
    color: #4A6669;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-share-modal .profile-modal__dialog {
    width: min(640px, calc(100% - 2rem));
}

.album-share-modal__body {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.album-share-modal__body h5 {
    margin: 0;
    font-family: var(--font-title);
    color: #0A6D75;
    font-size: clamp(1.05rem, 2.2vw, 1.8rem);
}

.album-share-modal__body p {
    margin: 0;
    max-width: 46ch;
    color: #425C5F;
}

.album-share__qr-wrap {
    width: 100%;
    display: grid;
    place-items: center;
}

.album-share__qr {
    width: min(280px, 84vw);
    aspect-ratio: 1 / 1;
    border-radius: 0;
    background: #FFFFFF;
    border: 1px solid rgba(86, 179, 194, 0.3);
    display: grid;
    place-items: center;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 83, 89, 0.12);
}

.album-share__qr.is-loading {
    border-color: rgba(86, 179, 194, 0.5);
}

.album-share__qr-loading {
    position: absolute;
    inset: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: #2F6E73;
    background: linear-gradient(180deg, #F8FBFB 0%, #EEF7F6 100%);
}

.album-share__qr-loading[hidden] {
    display: none !important;
}

.album-share__qr-loading strong {
    font-family: var(--font-title);
    font-size: 1.14rem;
    color: #2A6F75;
}

.album-share__qr-skeleton {
    display: block;
    background: linear-gradient(90deg, #DDEFF0 0%, #F7FCFC 50%, #DDEFF0 100%);
    background-size: 220% 100%;
    animation: album-share-skeleton 1.2s linear infinite;
}

.album-share__qr-skeleton--square {
    width: min(132px, 52%);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(86, 179, 194, 0.28);
}

.album-share__qr-skeleton--line {
    width: 74%;
    height: 10px;
}

.album-share__qr-skeleton--line.is-short {
    width: 52%;
}

@keyframes album-share-skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.album-share__qr-canvas {
    width: min(264px, calc(100% - 1rem));
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    justify-self: center;
    align-self: center;
    margin-inline: auto;
    image-rendering: crisp-edges;
}

.album-share__qr-canvas[hidden] {
    display: none !important;
}

.album-share__link-panel {
    width: min(520px, 100%);
    border: 1px solid rgba(86, 179, 194, 0.36);
    background: linear-gradient(180deg, rgba(134, 217, 225, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
    padding: 0.78rem;
    display: grid;
    gap: 0.68rem;
    text-align: left;
}

.album-share__link-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.56rem;
    align-items: start;
}

.album-share__link-icon {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(86, 179, 194, 0.46);
    background: #FFFFFF;
    color: #2A96A2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.album-share__link-icon i {
    font-size: 1rem;
    line-height: 1;
}

.album-share__link-title {
    margin: 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #59B7C0;
}

.album-share__link-hint {
    margin: 0.18rem 0 0;
    color: #4A6669;
    font-size: 0.84rem;
    line-height: 1.35;
}

.album-share__link-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    border: 1px solid rgba(86, 179, 194, 0.38);
    background: #FFFFFF;
}

.album-share__link-row .profile__input {
    border: 0;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    background: transparent;
    color: #005359;
}

.album-share__link-row .profile__input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(89, 183, 192, 0.35);
}

.album-share__copy {
    border: 0;
    border-left: 1px solid rgba(86, 179, 194, 0.38);
    border-radius: 0;
    min-height: 42px;
    padding-inline: 0.95rem;
    background: #FFFFFF;
    color: #006068;
}

.album-share__copy:hover {
    border-color: rgba(86, 179, 194, 0.55);
    background: rgba(86, 179, 194, 0.14);
    color: #005359;
}

.album-mobile-tools-reset {
    position: fixed;
    right: calc(var(--album-mobile-fab-right) + (var(--album-mobile-fab-size) - var(--album-mobile-reset-size)) / 2);
    bottom: calc(var(--album-mobile-fab-bottom) + var(--album-mobile-fab-size) + var(--album-mobile-reset-gap));
    width: var(--album-mobile-reset-size);
    height: var(--album-mobile-reset-size);
    border-radius: 50%;
    border: 1px solid rgba(194, 86, 122, 0.5);
    background: rgba(255, 255, 255, 0.98);
    color: #8A3354;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(138, 51, 84, 0.18);
    z-index: 99989;
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.65, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.album-mobile-tools-reset i {
    font-size: 0.92rem;
    line-height: 1;
}

.album-mobile-tools-reset.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.album-mobile-tools-reset.is-modal-open {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    pointer-events: none;
}

.album-mobile-tools-reset:hover {
    border-color: #E66491;
    background: #FFF6FA;
    color: #E66491;
    box-shadow: 0 10px 18px rgba(230, 100, 145, 0.24);
}

.album-mobile-tools-fab {
    position: fixed;
    right: var(--album-mobile-fab-right);
    bottom: var(--album-mobile-fab-bottom);
    width: var(--album-mobile-fab-size);
    height: var(--album-mobile-fab-size);
    border-radius: 50%;
    border: 1px solid rgba(86, 179, 194, 0.58);
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 24px rgba(0, 83, 89, 0.24);
    z-index: 99990;
    transition: opacity 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
}

.album-mobile-tools-fab i {
    font-size: 1.32rem;
    line-height: 1;
}

.album-mobile-tools-fab.is-selection-mode {
    box-shadow: 0 0 0 3px rgba(126, 220, 167, 0.22), 0 14px 24px rgba(0, 83, 89, 0.28);
}

.album-mobile-tools-fab.has-selection {
    box-shadow: 0 0 0 3px rgba(230, 70, 118, 0.22), 0 16px 26px rgba(0, 83, 89, 0.32);
}

.album-mobile-tools-fab.is-tools-active:not(.has-selection):not(.is-selection-mode) {
    box-shadow: 0 0 0 3px rgba(86, 179, 194, 0.2), 0 16px 26px rgba(0, 83, 89, 0.3);
}

.album-mobile-tools-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px rgba(0, 83, 89, 0.3);
}

.album-mobile-tools-fab.is-modal-open {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    pointer-events: none;
}

.album-mobile-tools-modal .profile-modal__dialog {
    width: min(440px, calc(100% - 1rem));
    max-height: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
}

.album-mobile-tools-modal {
    z-index: 100010;
}

.album-mobile-tools-modal__body {
    padding: 0.72rem;
    overflow-y: auto;
}

.album-mobile-tools-modal__slot {
    display: grid;
    gap: 0.72rem;
}

.album-mobile-tools-modal__slot .album-gallery__toolbar {
    margin: 0;
}

.album-mobile-tools-modal__slot .album-bulk {
    margin: 0;
}

.album-mobile-tools-modal__slot .album-bulk__panel.is-visible {
    margin-bottom: 0;
}

.album-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120000;
    background: rgba(2, 12, 18, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.28s;
}

.album-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

.album-lightbox__top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox.is-open .album-lightbox__top {
    opacity: 1;
    transform: translateY(0);
}

.album-lightbox__counter {
    min-width: 58px;
    min-height: 34px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
}

.album-lightbox__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.36rem;
    border-radius: 999px;
    border: 1px solid rgba(86, 179, 194, 0.35);
    background: rgba(9, 31, 38, 0.62);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 20px rgba(0, 20, 27, 0.34);
}

.album-lightbox__tool {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(89, 183, 192, 0.44);
    background: linear-gradient(160deg, rgba(23, 50, 58, 0.94) 0%, rgba(14, 36, 43, 0.94) 100%);
    color: #D8FAFD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.album-lightbox__tool i {
    font-size: 1.3rem;
}

.album-lightbox__tool--close {
    border-color: rgba(230, 100, 145, 0.52);
    background: linear-gradient(160deg, rgba(207, 73, 96, 0.95) 0%, rgba(163, 37, 54, 0.95) 100%);
    color: #FFFFFF;
}

.album-lightbox__tool.is-active {
    border-color: rgba(126, 220, 167, 0.65);
    background: linear-gradient(140deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(86, 179, 194, 0.35);
}

.album-lightbox__tool.is-active:hover {
    border-color: rgba(126, 220, 167, 0.75);
    background: linear-gradient(140deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
}

.album-lightbox__tool:hover {
    transform: translateY(-1px);
    border-color: rgba(126, 220, 167, 0.55);
    background: linear-gradient(160deg, rgba(28, 70, 80, 0.96) 0%, rgba(14, 50, 58, 0.96) 100%);
    box-shadow: 0 8px 16px rgba(0, 29, 36, 0.4);
}

.album-lightbox__tool--close:hover {
    border-color: rgba(230, 100, 145, 0.8);
    background: linear-gradient(160deg, rgba(226, 84, 113, 0.98) 0%, rgba(163, 37, 54, 0.98) 100%);
    box-shadow: 0 10px 18px rgba(163, 37, 54, 0.44);
}

.album-lightbox__tool:focus-visible {
    outline: 2px solid rgba(126, 220, 167, 0.75);
    outline-offset: 2px;
}

.album-lightbox__tool:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    border-color: rgba(89, 183, 192, 0.22);
    background: linear-gradient(160deg, rgba(20, 39, 45, 0.82) 0%, rgba(15, 31, 36, 0.82) 100%);
    box-shadow: none;
    transform: none;
}

.album-lightbox__tool:disabled:hover {
    border-color: rgba(89, 183, 192, 0.22);
    background: linear-gradient(160deg, rgba(20, 39, 45, 0.82) 0%, rgba(15, 31, 36, 0.82) 100%);
    box-shadow: none;
    transform: none;
}

.album-lightbox__nav:hover {
    background: #14373B;
}

.album-lightbox__stage {
    position: absolute;
    inset: 4.6rem 5.2rem 6.8rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: none;
    opacity: 0;
    transform: scale(0.988);
    transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox.is-open .album-lightbox__stage {
    opacity: 1;
    transform: scale(1);
}

.album-lightbox__stage [data-lightbox-image] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform 0.16s ease;
    transform-origin: center;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    backface-visibility: hidden;
    position: relative;
    z-index: 1;
}

.album-lightbox__ghost {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    z-index: 2;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.album-lightbox.is-zoom-mode .album-lightbox__stage {
    cursor: zoom-in;
}

.album-lightbox.is-zoom-out-mode .album-lightbox__stage {
    cursor: zoom-out;
}

.album-lightbox.is-pan-mode .album-lightbox__stage {
    cursor: grab;
}

.album-lightbox.is-pan-mode .album-lightbox__stage.is-dragging {
    cursor: grabbing;
}

.album-lightbox__stage.is-dragging [data-lightbox-image] {
    transition: none;
}

.album-lightbox__stage [data-lightbox-image].is-entering-next {
    animation: album-lightbox-enter-next 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox__stage [data-lightbox-image].is-entering-prev {
    animation: album-lightbox-enter-prev 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox__ghost.is-exiting-next {
    animation: album-lightbox-exit-next 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox__ghost.is-exiting-prev {
    animation: album-lightbox-exit-prev 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes album-lightbox-enter-next {
    from {
        opacity: 0.22;
        transform: translate3d(14%, 0, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes album-lightbox-enter-prev {
    from {
        opacity: 0.22;
        transform: translate3d(-14%, 0, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes album-lightbox-exit-next {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0.06;
        transform: translate3d(-12%, 0, 0) scale(0.985);
    }
}

@keyframes album-lightbox-exit-prev {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0.06;
        transform: translate3d(12%, 0, 0) scale(0.985);
    }
}

.album-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.96);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.58);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease;
}

.album-lightbox.is-open .album-lightbox__nav {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.album-lightbox__nav i {
    font-size: 2rem;
}

.album-lightbox__nav--prev {
    left: 1rem;
}

.album-lightbox__nav--next {
    right: 1rem;
}

.album-lightbox__caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.82);
    padding: 0.86rem 1rem;
    color: #F3FEFF;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.album-lightbox.is-open .album-lightbox__caption {
    opacity: 1;
    transform: translateY(0);
}

.album-lightbox__caption h4 {
    margin: 0;
    color: #45B7BE;
    font-size: 2rem;
    line-height: 1;
}

.album-lightbox__caption p {
    margin: 0.24rem 0 0;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 980px) {
    .album-gallery__toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .album-bulk__panel {
        flex-basis: 100%;
    }

    .album-toolbar__privacy,
    .album-toolbar__filter {
        min-width: 0;
    }

    .album-toolbar__privacy {
        align-content: initial;
        justify-items: start;
    }

    .album-lightbox__stage {
        inset: 5.2rem 1.2rem 7.8rem;
    }
}

@media (max-width: 680px) {
    .album-mobile-tools-reset {
        display: inline-flex;
    }

    .album-mobile-tools-fab {
        display: inline-flex;
    }

    .album-mobile-tools-modal {
        align-items: center;
        padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    .album-mobile-tools-modal .profile-modal__dialog {
        width: calc(100% - 0.2rem);
        max-height: calc(100dvh - 0.8rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .album-mobile-tools-modal__body {
        padding: 0.68rem 0.88rem 0.82rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        flex: 1 1 auto;
    }

    .album-mobile-tools-modal__slot {
        gap: 0.62rem;
    }

    .album-mobile-tools-modal__slot .album-bulk__panel {
        flex: 0 0 auto;
    }

    .album-page .profile-hero__actions {
        width: 100%;
    }

    .album-page .profile-hero__actions .profile__button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .album-page .profile-hero__actions .profile__button--with-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .album-gallery__intro-actions {
        grid-template-columns: 1fr;
    }

    .album-gallery__intro-actions .album-toolbar__btn {
        width: 100%;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    .album-intro__title {
        max-width: 20ch;
    }

    .album-intro__text {
        max-width: 34ch;
        line-height: 1.32;
    }

    .album-gallery__toolbar {
        grid-template-columns: 1fr;
        padding: 0.48rem;
    }

    .album-gallery__toolbar [data-album-bulk-toggle] {
        order: 10;
    }

    .album-bulk {
        flex-direction: column;
        align-items: stretch;
    }

    .album-bulk__toggle,
    .album-bulk__panel,
    .album-bulk__btn {
        width: 100%;
    }

    .album-bulk__panel {
        gap: 0.36rem;
    }

    .album-bulk__panel.has-selection .album-bulk__action {
        width: 100%;
        max-width: 100%;
    }

    .album-bulk__panel.has-selection [data-album-bulk-download].album-bulk__action {
        margin-left: 0;
    }

    .album-bulk__panel.has-selection [data-album-bulk-download].album-bulk__action::before {
        content: none;
    }

    .album-bulk__count {
        width: 100%;
        padding-inline: 0.4rem;
    }

    .album-toolbar__switch {
        width: 100%;
        justify-content: flex-start;
    }

    .album-toolbar__filter {
        width: 100%;
    }

    .album-toolbar__title,
    .album-toolbar__filter .profile__label {
        font-size: var(--font-size-xs);
    }

    .album-gallery__grid {
        grid-template-columns: 1fr;
    }

    .album-gallery__pagination {
        justify-content: stretch;
    }

    .album-pagination__nav {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }

    .album-pagination__pages {
        width: 100%;
        justify-content: center;
    }

    .album-pagination__meta {
        width: 100%;
        justify-content: center;
    }

    .album-photo-card__media {
        height: 208px;
    }

    .album-photo-card__action {
        width: 34px;
        height: 34px;
    }

    .album-confirm-modal .profile-modal__dialog,
    .album-share-modal .profile-modal__dialog,
    .album-upload-modal .profile-modal__dialog,
    .album-public-upload-modal .profile-modal__dialog {
        width: calc(100% - 1rem);
    }

    .album-upload-modal,
    .album-public-upload-modal {
        align-items: flex-start;
        padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 0.4rem 0.4rem;
    }

    .album-upload-modal .profile-modal__dialog,
    .album-public-upload-modal .profile-modal__dialog {
        width: calc(100% - 0.2rem);
        max-height: calc(100dvh - 0.8rem - env(safe-area-inset-top, 0px));
        display: flex;
        flex-direction: column;
    }

    .album-upload-modal .profile-modal__header--center,
    .album-public-upload-modal .profile-modal__header--center {
        padding: 0.88rem 2.7rem 0.62rem;
        gap: 0.28rem;
    }

    .album-upload-modal .profile-modal__header--center p,
    .album-public-upload-modal .profile-modal__header--center p {
        font-size: 0.92rem;
        line-height: 1.34;
        max-width: 30ch;
    }

    .album-upload-modal .profile-modal__body,
    .album-public-upload-modal .profile-modal__body {
        padding: 0.72rem 0.88rem;
        gap: 0.72rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
        overflow-x: hidden;
    }

    .album-upload__dropzone {
        min-height: 146px;
        gap: 0.38rem;
        padding: 0.72rem;
        box-sizing: border-box;
        width: 100%;
        -webkit-appearance: none;   /* ← elimina estilos nativos de <button> en iOS */
        appearance: none;           /* ← ídem para otros browsers */
        outline: none;
    }

    .album-upload__dropzone i {
        font-size: 1.08rem;
    }

    .album-upload__dropzone strong {
        font-size: 1rem;
        line-height: 1.24;
    }

    .album-upload__dropzone span {
        font-size: 0.92rem;
    }

    .album-upload__files-meta {
        gap: 0.16rem;
    }

    .album-upload__files {
        min-height: 38px;
        padding: 0.54rem 0.64rem;
    }

    .album-upload__counter {
        font-size: 0.68rem;
    }

    .album-upload-modal .profile__form-grid--single,
    .album-public-upload-modal .profile__form-grid--single {
        gap: 0.58rem;
    }

    .album-upload-modal .profile__field,
    .album-public-upload-modal .profile__field {
        gap: 0.22rem;
    }

    .album-upload-modal .profile__label,
    .album-public-upload-modal .profile__label {
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .album-upload-modal .profile__input,
    .album-public-upload-modal .profile__input {
        padding: 0.5rem 0.65rem;
    }

    .album-upload-modal .profile-modal__footer,
    .album-public-upload-modal .profile-modal__footer {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: #FFFFFF;
        padding: 0.6rem 0.88rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
        gap: 0.45rem;
    }

    .album-upload-modal .profile-modal__footer .profile__button,
    .album-public-upload-modal .profile-modal__footer .profile__button {
        flex: 1 1 auto;
        justify-content: center;
    }

    .album-upload__status {
        padding: 0.52rem 0.88rem calc(0.56rem + env(safe-area-inset-bottom, 0px));
        gap: 0.28rem;
    }

    .album-upload__status-text,
    .album-upload__status-percent {
        font-size: 0.82rem;
    }

    .album-share-modal {
        align-items: flex-start;
        padding: calc(0.4rem + env(safe-area-inset-top, 0px)) 0.4rem 0.4rem;
    }

    .album-share-modal .profile-modal__dialog {
        width: calc(100% - 0.2rem);
        max-height: calc(100dvh - 0.8rem - env(safe-area-inset-top, 0px));
        display: flex;
        flex-direction: column;
    }

    .album-share-modal .profile-modal__header--center {
        padding: 0.82rem 2.7rem 0.56rem;
        gap: 0.24rem;
    }

    .album-share-modal .profile-modal__header--center h4 {
        font-size: clamp(1.18rem, 5.1vw, 1.45rem);
        line-height: 1.14;
    }

    .album-share-modal__body {
        padding: 0.72rem 0.88rem;
        gap: 0.72rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        min-height: 0;
    }

    .album-share__qr {
        width: min(248px, 72vw);
    }

    .album-share__qr-canvas {
        width: min(232px, calc(100% - 0.8rem));
    }

    .album-share-modal__body h5 {
        font-size: clamp(1rem, 4.6vw, 1.32rem);
        line-height: 1.2;
    }

    .album-share-modal__body p {
        max-width: 30ch;
        line-height: 1.36;
    }

    .album-share__link-panel {
        gap: 0.56rem;
        padding: 0.62rem;
    }

    .album-share-modal .profile-modal__footer {
        position: sticky;
        bottom: 0;
        z-index: 1;
        background: #FFFFFF;
        padding: 0.55rem 0.88rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    }

    .album-delete-modal__question {
        white-space: normal;
        text-wrap: balance;
    }

    .album-share__link-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        border: 0;
        background: transparent;
    }

    .album-share__copy {
        border: 1px solid rgba(86, 179, 194, 0.38);
        border-radius: 0;
        width: 100%;
    }

    .album-upload__preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .album-public-upload-confirm-modal__thumb {
        width: 56px;
        flex-basis: 56px;
    }

    .album-lightbox__top {
        top: 0.6rem;
        left: 0.6rem;
        right: 0.6rem;
    }

    .album-lightbox__counter {
        min-height: 32px;
        font-size: 0.92rem;
    }

    .album-lightbox__tool {
        width: 40px;
        height: 40px;
    }

    .album-lightbox__tool i {
        font-size: 1.15rem;
    }

    .album-lightbox__nav {
        width: 46px;
        height: 46px;
    }

    .album-lightbox__stage {
        inset: 4.8rem 0.5rem 7.3rem;
    }

    .album-lightbox__caption {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.66rem 0.74rem;
    }

.album-lightbox__caption h4 {
        font-size: 1.5rem;
    }
}

/* ============================================================
   PAGE - ORGANIZADOR DE MESAS / ORIGINAL LAYOUT
   ============================================================ */
.table-organizer-page .main {
    padding-top: 0;
}

.table-organizer-shell {
    padding: var(--space-lg) 0 var(--space-2xl);
}

.table-organizer__frame {
    width: min(1880px, calc(100vw - 28px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    background: #FFFFFF;
    border: 1px solid rgba(86, 179, 194, 0.18);
    box-shadow: 0 18px 36px rgba(0, 83, 89, 0.08);
    min-height: 640px;
}

.table-organizer__layout-sidebar {
    border-right: 1px solid rgba(86, 179, 194, 0.22);
    background: #FFFFFF;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.table-organizer__sidebar-block {
    padding: 0;
    overflow: visible;
}

.table-organizer__sidebar-block--add {
    border-bottom: 1px solid rgba(86, 179, 194, 0.22);
}

.table-organizer__sidebar-block--guests {
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.table-organizer__sidebar-title {
    margin: 0;
    padding: 0.9rem 1.25rem 0.7rem 1.95rem;
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: clamp(2rem, 2vw, 2.55rem);
    line-height: 0.96;
    letter-spacing: -0.03em;
    font-weight: 700;
    text-wrap: balance;
    background: #FFFFFF;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.table-organizer__sidebar-title::before {
    content: "";
    position: absolute;
    left: 0.95rem;
    top: 50%;
    width: 0.78rem;
    height: 0.78rem;
    background: #E66491;
    transform: translateY(-48%) rotate(45deg);
}

.table-organizer__sidebar-title::after {
    content: none;
}

.table-organizer__table-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 0 1.25rem 1rem;
    overflow: visible;
    padding-top: .3rem;
}

.table-organizer__table-action {
    width: 100%;
    min-height: 132px;
    border: 1px solid rgba(86, 179, 194, 0.28);
    border-radius: 0;
    background: #FFFFFF;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.6rem;
    padding: 0.9rem 0.8rem 0.85rem;
    color: #2B2A2A;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    overflow: visible;
}

.table-organizer__table-action svg {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
}

.table-organizer__table-action img {
    height: 76px;
    width: auto;
}

.table-organizer__table-action-copy {
    display: grid;
    gap: 0.18rem;
    text-align: center;
}

.table-organizer__table-action-copy strong {
    color: #005359;
    font-size: 0.84rem;
    line-height: 1.2;
}

.table-organizer__table-action-copy span {
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.72rem;
    line-height: 1.4;
}

.table-organizer__table-action:hover {
    transform: translateY(-1px);
    border-color: #59B7C0;
    box-shadow: 0 12px 22px rgba(0, 83, 89, 0.1);
}

.table-organizer__search-wrap {
    padding: 0 1.25rem 0.95rem;
}

.table-organizer__search-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--dashboard-border);
    border-radius: 0;
    padding: 0.55rem 0.75rem;
    color: #005359;
    font-size: var(--font-size-sm);
    line-height: 1;
    background: #FFFFFF;
    position: relative;
    z-index: 1;
}

.table-organizer__search-input::placeholder {
    color: #7A9496;
    opacity: 1;
}

.table-organizer__search-input:focus {
    border-color: #59B7C0;
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
    box-shadow: none;
}

.table-organizer__guest-list {
    border-top: 1px solid rgba(86, 179, 194, 0.12);
    padding: 0.7rem 0;
    overflow: auto;
    min-height: 340px;
    position: relative;
}

.table-organizer__guest-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.78rem 1.1rem;
    border-bottom: 1px solid rgba(86, 179, 194, 0.12);
    cursor: grab;
    transition: background-color var(--transition-fast);
}

.table-organizer__guest-row:hover {
    background: rgba(86, 179, 194, 0.06);
}

.table-organizer__guest-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.16), rgba(126, 220, 167, 0.28));
    color: #005359;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 0 0 38px;
}

.table-organizer__guest-copy {
    display: grid;
    gap: 0.1rem;
}

.table-organizer__guest-copy strong {
    color: #005359;
    font-size: 0.98rem;
    font-weight: 600;
}

.table-organizer__guest-copy span {
    color: rgba(0, 83, 89, 0.62);
    font-size: 0.82rem;
}

.table-organizer__layout-board {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #FFFFFF;
}

.table-organizer__board-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 1.2rem 1.4rem 0;
}

.table-organizer__pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(28, 39, 76, 0.2);
    border-radius: 0;
    background: #FFFFFF;
    color: #1C274C;
    padding: 0.62rem 0.9rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.table-organizer__pdf-btn:hover {
    border-color: rgba(86, 179, 194, 0.4);
    color: #005359;
}

.table-organizer-page [data-table-pdf-hero].profile__button {
    border-radius: 0;
}

.table-organizer__board-scroll {
    overflow: auto;
    padding: 0.95rem 1.25rem 1.25rem;
    display: flex;
    justify-content: center;
}

.table-organizer__board {
    position: relative;
    width: 920px;
    height: 560px;
    background-image:
        linear-gradient(to right, rgba(204, 204, 204, 0.267) 1px, transparent 1px),
        linear-gradient(rgba(204, 204, 204, 0.267) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #FFFFFF;
}

.table-organizer__table {
    position: absolute;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #FFF7DA 0%, #FFF3C8 100%);
    border: 3px solid rgba(43, 42, 42, 0.78);
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.06);
    overflow: visible;
}

.table-organizer__table--rect {
    border-radius: 16px;
}

.table-organizer__table--round {
    border-radius: 50%;
}

.table-organizer__table-name {
    color: #000000;
    font-family: "Philosopher", serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

.table-organizer__seat {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background: #ADD8E6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2B2A2A;
    font-size: 0.95rem;
    line-height: 1;
}

.table-organizer__seat.is-occupied {
    background: transparent;
}

.table-organizer__seat[title] {
    position: absolute;
}

.table-organizer__seat[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #101010;
    color: #FFFFFF;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.82rem;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.table-organizer__seat[title]:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #101010;
}

@media screen and (max-width: 1199px) {
    .table-organizer__frame {
        grid-template-columns: 360px minmax(0, 1fr);
    }
}

@media screen and (max-width: 991px) {
    .table-organizer__frame {
        width: min(100%, calc(100vw - 24px));
        grid-template-columns: 1fr;
    }

    .table-organizer__layout-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(86, 179, 194, 0.22);
    }

    .table-organizer__guest-list {
        min-height: 220px;
        max-height: 260px;
    }

    .table-organizer__board-toolbar {
        padding: 1rem 1rem 0;
    }

    .table-organizer__board-scroll {
        padding: 0.85rem;
    }
}

@media screen and (max-width: 767px) {
    .table-organizer-page .main {
        padding-top: 0;
    }

    .table-organizer__sidebar-title {
        font-size: 1.9rem;
        padding: 0.85rem 1rem 0.65rem 1.7rem;
    }

    .table-organizer__sidebar-title::before {
        left: 0.8rem;
        width: 0.72rem;
        height: 0.72rem;
    }

    .table-organizer__sidebar-title::after {
        content: none;
    }

    .table-organizer__table-actions,
    .table-organizer__search-wrap {
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-organizer__table-action {
        min-height: 120px;
        padding: 0.8rem 0.65rem;
    }

    .table-organizer__table-action svg {
        width: 68px;
        height: 68px;
    }

    .table-organizer__guest-row {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .table-organizer__board {
        width: 860px;
        height: 540px;
    }
}

@media screen and (max-width: 540px) {
    .table-organizer__frame {
        width: calc(100vw - 16px);
    }

    .table-organizer__table-action {
        min-height: 112px;
    }

    .table-organizer__board {
        width: 820px;
        height: 520px;
    }
}

/* ============================================================
   PAGE - ORGANIZADOR DE MESAS / FUNCTIONAL OVERRIDES
   ============================================================ */
.table-organizer__sidebar-block--guests {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.table-organizer__sidebar-note {
    margin: 0;
    padding: 0 1.25rem 0.7rem;
    color: rgba(0, 83, 89, 0.64);
    font-size: 1rem;
    text-wrap: balance;
    line-height: 1.55;
}

.table-organizer__guest-summary {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0 1.25rem 0.8rem;
    border-top: 1px solid rgba(86, 179, 194, 0.12);
}

.table-organizer__guest-summary strong {
    color: #005359;
    font-size: 1.25rem;
    font-weight: 700;
}

.table-organizer__guest-summary span {
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.84rem;
}

.table-organizer__guest-list {
    min-height: 0;
}

body.table-organizer-is-person-dragging .table-organizer__guest-list {
    background:
        linear-gradient(180deg, rgba(126, 220, 167, 0.08), rgba(86, 179, 194, 0.1)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 250, 0.94));
    box-shadow:
        inset 0 0 0 2px rgba(126, 220, 167, 0.24),
        inset 0 0 32px rgba(126, 220, 167, 0.08);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list::before {
    content: "";
    position: absolute;
    inset: 0.55rem 0.65rem;
    border: 2px dashed rgba(126, 220, 167, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08));
    pointer-events: none;
}

body.table-organizer-is-person-dragging .table-organizer__guest-list::after {
    content: "Suelta aquí para devolver el invitado";
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    padding: 0.42rem 0.68rem;
    border: 1px dashed rgba(126, 220, 167, 0.34);
    background: rgba(255, 255, 255, 0.92);
    color: rgba(0, 83, 89, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.table-organizer__guest-list.is-drop-target {
    background: rgba(86, 179, 194, 0.08);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target {
    background: linear-gradient(180deg, rgba(126, 220, 167, 0.08), rgba(86, 179, 194, 0.1));
    box-shadow: inset 0 0 0 2px rgba(86, 179, 194, 0.24);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target::before {
    border-color: rgba(86, 179, 194, 0.34);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target::after {
    content: "Suelta para devolver a la lista";
    border-color: rgba(86, 179, 194, 0.38);
    color: #005359;
}

body.table-organizer-is-person-dragging .table-organizer__guest-list {
    background:
        linear-gradient(180deg, rgba(126, 220, 167, 0.08), rgba(86, 179, 194, 0.1)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(240, 249, 250, 0.94));
    box-shadow:
        inset 0 0 0 2px rgba(126, 220, 167, 0.24),
        inset 0 0 32px rgba(126, 220, 167, 0.08);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list::before {
    inset: 0.55rem 0.65rem;
    border: 2px dashed rgba(126, 220, 167, 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08));
}

body.table-organizer-is-person-dragging .table-organizer__guest-list::after {
    content: "Suelta aqui para devolver a la lista";
    top: 56%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 2rem), 280px);
    padding: 0.68rem 0.85rem;
    border: 1px solid rgba(126, 220, 167, 0.42);
    background: rgba(255, 255, 255, 0.96);
    color: #005359;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    box-shadow: 0 14px 26px rgba(86, 179, 194, 0.12);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target {
    background:
        linear-gradient(180deg, rgba(126, 220, 167, 0.12), rgba(86, 179, 194, 0.14)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 250, 0.98));
    box-shadow:
        inset 0 0 0 2px rgba(86, 179, 194, 0.34),
        inset 0 0 42px rgba(86, 179, 194, 0.1);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target::before {
    border-color: rgba(86, 179, 194, 0.52);
}

body.table-organizer-is-person-dragging .table-organizer__guest-list.is-drop-target::after {
    content: "Suelta para devolver";
    border-color: rgba(86, 179, 194, 0.46);
    box-shadow: 0 16px 28px rgba(86, 179, 194, 0.16);
}

.table-organizer__guest-row {
    user-select: none;
}

.table-organizer__guest-row,
.table-organizer__seat.is-occupied {
    cursor: grab;
}

.table-organizer__guest-row:active,
.table-organizer__seat.is-occupied:active,
body.table-organizer-is-person-dragging,
body.table-organizer-is-person-dragging .table-organizer__guest-row,
body.table-organizer-is-person-dragging .table-organizer__seat.is-occupied {
    cursor: grabbing !important;
}

.table-organizer__guest-row.is-dragging {
    opacity: 0.36;
}

.table-organizer__guest-empty {
    display: grid;
    gap: 0.18rem;
    padding: 1rem 1.1rem 1.1rem;
    color: rgba(0, 83, 89, 0.7);
}

.table-organizer__guest-empty strong {
    color: #005359;
    font-size: 0.98rem;
}

.table-organizer__guest-empty span {
    font-size: 0.84rem;
    line-height: 1.5;
}

.table-organizer__board-toolbar {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.table-organizer__board-summary {
    margin: 0;
    color: rgba(0, 83, 89, 0.72);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.table-organizer__pdf-btn:disabled {
    opacity: 0.72;
    cursor: wait;
}

.table-organizer__board-scroll {
    padding-top: 0.72rem;
    padding-bottom: 1.5rem;
}

.table-organizer__board {
    width: 1180px;
    min-height: 680px;
    border: 1px solid rgba(86, 179, 194, 0.12);
    overflow: hidden;
}

.table-organizer__board-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    color: rgba(0, 83, 89, 0.62);
    font-size: 1rem;
    text-align: center;
}

.table-organizer__table {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.table-organizer__table.is-dragging {
    z-index: 16;
}

.table-organizer__table-surface {
    position: absolute;
    inset: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    grid-auto-rows: max-content;
    gap: 0.7rem;
    background: linear-gradient(180deg, #574b3a 0%, #4a4032 100%);
    box-shadow: 0 18px 34px rgba(73, 58, 39, 0.18);
    cursor: grab;
    user-select: none;
    z-index: 1;
}

.table-organizer__table.is-dragging .table-organizer__table-surface {
    cursor: grabbing;
}

.table-organizer__table--rectangular .table-organizer__table-surface {
    border-radius: 18px;
}

.table-organizer__table--round .table-organizer__table-surface {
    border-radius: 50%;
    padding-top: 0.3rem;
}

.table-organizer__table-name {
    color: #FFFFFF;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}

.table-organizer__table-meta {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
}

.table-organizer__table-tools {
    display: flex;
    gap: 0.45rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.table-organizer__table:hover .table-organizer__table-tools {
    opacity: 1;
    pointer-events: auto;
}

.table-organizer__table-tool {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #4a4032;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.table-organizer__table-tool--danger {
    color: #9f3a31;
}

.table-organizer__seat {
    position: absolute;
    width: 54px;
    height: 84px;
    padding: 0;
    border: 0;
    background: transparent;
    left: auto;
    top: auto;
    transform: translate(-50%, -50%) rotate(var(--seat-rotation));
    transform-origin: center;
    overflow: visible;
    transition: filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.table-organizer__seat-shell {
    position: absolute;
    inset: 26px 0 0;
    display: block;
    z-index: 2;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.table-organizer__seat-shell::before,
.table-organizer__seat-shell::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 8px;
    border-radius: 999px;
    background: #8b7a63;
}

.table-organizer__seat-shell::before {
    left: 6px;
}

.table-organizer__seat-shell::after {
    right: 6px;
}

.table-organizer__seat-cushion {
    position: absolute;
    inset: 0 12px;
    border-radius: 999px;
    background: #e5d6bf;
    box-shadow: inset 0 0 0 1px rgba(107, 89, 62, 0.16);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.table-organizer__seat-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 54px;
    height: 96px;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.table-organizer__seat-badge-head,
.table-organizer__seat-badge-body {
    position: absolute;
    left: 50%;
    background: linear-gradient(180deg, #a6ecc3 0%, #7edca7 58%, #63c89d 100%);
}

.table-organizer__seat-badge-head {
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2B2A2A;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: auto;
    border: 3px solid #FFFFFF;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
    z-index: 3;
    overflow: visible;
    text-align: center;
}

.table-organizer__seat-badge-text {
    position: relative;
    display: block;
    width: 100%;
    transform: rotate(var(--seat-counter-rotation));
    transform-origin: center;
    line-height: 1;
    text-align: center;
}

.table-organizer__seat-badge-body {
    top: 32px;
    width: 26px;
    height: 56px;
    border-radius: 999px 999px 12px 12px;
    transform: translateX(-50%);
    z-index: 1;
}

.table-organizer__seat-badge-head--ghost,
.table-organizer__seat-badge-body--ghost {
    background: linear-gradient(180deg, rgba(205, 233, 214, 0.92) 0%, rgba(181, 220, 194, 0.88) 58%, rgba(155, 202, 175, 0.84) 100%);
}

.table-organizer__seat-badge-head--ghost {
    color: rgba(0, 83, 89, 0.82);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 14px rgba(86, 179, 194, 0.08);
}

.table-organizer__seat-badge-text--ghost {
    font-size: 1.18rem;
    font-weight: 700;
}

.table-organizer__seat-badge-body--ghost {
    box-shadow: 0 8px 14px rgba(86, 179, 194, 0.06);
}

.table-organizer__seat-badge--ghost {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
}

body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) {
    filter: drop-shadow(0 6px 12px rgba(86, 179, 194, 0.08));
}

body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) .table-organizer__seat-shell {
    transform: scale(1.02);
}

body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) .table-organizer__seat-shell::before,
body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) .table-organizer__seat-shell::after {
    background: #8fb69e;
}

body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) .table-organizer__seat-cushion {
    background: #efe5cf;
    box-shadow:
        inset 0 0 0 1px rgba(86, 179, 194, 0.14),
        0 0 0 6px rgba(126, 220, 167, 0.07);
}

body.table-organizer-is-person-dragging .table-organizer__seat:not(.is-occupied) .table-organizer__seat-badge--ghost {
    opacity: 0.82;
    transform: translateX(-50%) translateY(0);
    animation: table-organizer-seat-awaiting 1.4s ease-in-out infinite alternate;
}

.table-organizer__seat.is-drop-target .table-organizer__seat-cushion {
    box-shadow: inset 0 0 0 2px rgba(86, 179, 194, 0.7), 0 0 0 8px rgba(86, 179, 194, 0.12);
}

body.table-organizer-is-person-dragging .table-organizer__seat.is-drop-target .table-organizer__seat-badge--ghost {
    animation: none;
    filter: saturate(1.1);
}

.table-organizer__board-empty[hidden] {
    display: none;
}

.table-organizer__seat.is-dragging {
    opacity: 0.35;
}

@keyframes table-organizer-seat-awaiting {
    0% {
        transform: translateX(-50%) translateY(2px);
        filter: drop-shadow(0 6px 10px rgba(86, 179, 194, 0.05));
    }

    100% {
        transform: translateX(-50%) translateY(-2px);
        filter: drop-shadow(0 8px 12px rgba(126, 220, 167, 0.09));
    }
}

body.table-organizer-is-person-dragging .table-organizer__seat-badge-head[data-tooltip]:hover::after,
body.table-organizer-is-person-dragging .table-organizer__seat-badge-head[data-tooltip]:hover::before {
    content: none;
}

.table-organizer__seat-badge-head[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) rotate(var(--seat-counter-rotation));
    background: #101010;
    color: #FFFFFF;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.82rem;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    z-index: 6;
}

.table-organizer__seat-badge-head[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) rotate(var(--seat-counter-rotation));
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #101010;
    z-index: 6;
}

.table-organizer__drag-avatar {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 58px;
    height: 98px;
    pointer-events: none;
    z-index: 9999;
}

.table-organizer__drag-avatar-head,
.table-organizer__drag-avatar-body {
    position: absolute;
    left: 50%;
    background: linear-gradient(180deg, #a6ecc3 0%, #7edca7 58%, #63c89d 100%);
}

.table-organizer__drag-avatar-head {
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #FFFFFF;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.16);
    color: #2B2A2A;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    z-index: 2;
    overflow: visible;
}

.table-organizer__drag-avatar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

.table-organizer__drag-avatar-body {
    top: 32px;
    width: 26px;
    height: 58px;
    border-radius: 999px 999px 12px 12px;
    transform: translateX(-50%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.table-organizer-modal__subtitle {
    margin: 0.3rem 0 0;
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.9rem;
    line-height: 1.45;
}

.table-organizer-modal .profile-modal__dialog {
    width: min(940px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    border-radius: 0;
    border: 1px solid rgba(0, 83, 89, 0.12);
    background: #FFFFFF;
    box-shadow: var(--shadow-xl);
}

.table-organizer-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--dashboard-border);
}

.table-organizer-modal__heading h4 {
    margin: 0;
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: clamp(1.9rem, 2.1vw, 2.2rem);
    line-height: 1;
}

.table-organizer-modal__form {
    gap: var(--space-md);
    padding-top: 0.9rem;
    overflow: auto;
    max-height: calc(100vh - 14rem);
}

.table-organizer-modal__grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.3fr);
    gap: var(--space-md);
    align-items: start;
}

.table-organizer-modal .profile__field {
    gap: 0.42rem;
}

.table-organizer-modal .profile__label {
    letter-spacing: 0.11em;
    color: #59B7C0;
}

.table-organizer-modal__select,
.table-organizer-modal__name-input {
    min-height: 40px;
    border-radius: 0;
    border-color: rgba(86, 179, 194, 0.4);
    background-color: #FFFFFF;
    box-shadow: none;
}

.table-organizer-modal__select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2359B7C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2rem;
}

.table-organizer-modal__select:focus,
.table-organizer-modal__name-input:focus {
    border-color: #59B7C0;
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
    box-shadow: none;
}

.table-organizer-modal__panel {
    padding: var(--space-sm);
    border: 1px solid rgba(86, 179, 194, 0.38);
    border-radius: 0;
    background: rgba(248, 252, 252, 0.9);
    box-shadow: none;
}

.table-organizer-modal__panel-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.table-organizer-modal__panel-title {
    margin: 0;
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: 1.25rem;
    line-height: 1;
}

.table-organizer-modal__panel-copy {
    margin: 0;
    color: rgba(0, 83, 89, 0.6);
    font-size: 0.84rem;
    line-height: 1.5;
}

.table-organizer-modal__stepper-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.table-organizer-modal__stepper-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px;
}

.table-organizer-modal__stepper {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: stretch;
    min-height: 40px;
    border: 1px solid rgba(86, 179, 194, 0.4);
    border-radius: 0;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: none;
}

.table-organizer-modal__stepper-btn {
    border: 0;
    background: rgba(248, 252, 252, 0.9);
    color: #005359;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.table-organizer-modal__stepper-btn:hover {
    background: rgba(86, 179, 194, 0.08);
}

.table-organizer-modal__stepper-btn:focus-visible {
    outline: 2px solid #59B7C0;
    outline-offset: -2px;
}

.table-organizer-modal__stepper-input {
    border: 0;
    border-left: 1px solid rgba(86, 179, 194, 0.18);
    border-right: 1px solid rgba(86, 179, 194, 0.18);
    text-align: center;
    min-height: 40px;
    padding: 0.45rem 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: #005359;
    background: transparent;
    appearance: textfield;
    -moz-appearance: textfield;
    border-radius: 0;
}

.table-organizer-modal__stepper-input::-webkit-outer-spin-button,
.table-organizer-modal__stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.table-organizer-modal__stepper:focus-within {
    border-color: #59B7C0;
    outline: 2px solid rgba(89, 183, 192, 0.55);
    outline-offset: -2px;
}

.table-organizer-modal__footer {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
    align-items: center;
}

.table-organizer-modal__submit,
.table-organizer-modal__cancel {
    min-width: 154px;
    border-radius: 0;
}

.table-organizer-modal__cancel {
    background: #FFFFFF;
}

.table-organizer-delete-modal .profile-modal__dialog {
    width: min(540px, calc(100% - 1.5rem));
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 26px 56px rgba(0, 83, 89, 0.18);
}

.table-organizer-delete-modal .profile-modal__header {
    padding: 1.45rem 1.55rem 1.05rem;
    border-bottom: 1px solid rgba(86, 179, 194, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.98));
}

.table-organizer-delete-modal .profile-modal__header h4 {
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.table-organizer-delete-modal .profile-modal__close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(86, 179, 194, 0.24);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    color: #005359;
}

.table-organizer-delete-modal .profile-modal__body {
    display: grid;
    gap: 1rem;
    padding: 1.35rem 1.55rem 1.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.96));
}

.table-organizer-delete-modal .guest-delete-modal__hero {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0.95rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-color: rgba(230, 100, 145, 0.22);
    background:
        linear-gradient(135deg, rgba(230, 100, 145, 0.09) 0%, rgba(255, 255, 255, 0.98) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 251, 0.96));
}

.table-organizer-delete-modal .guest-delete-modal__icon {
    width: 64px;
    height: 64px;
    border-radius: 0;
    box-shadow: none;
}

.table-organizer-delete-modal .guest-delete-modal__content {
    display: grid;
    gap: 0.2rem;
}

.table-organizer-delete-modal .guest-delete-modal__title {
    font-family: "Philosopher", serif;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.table-organizer-delete-modal .guest-delete-modal__subtitle {
    margin-top: 0;
    color: rgba(0, 83, 89, 0.68);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 34ch;
}

.table-organizer-delete-modal .guest-delete-modal__summary {
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.table-organizer-delete-modal .guest-delete-modal__row {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-height: 108px;
    padding: 0.95rem 0.95rem 0.9rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: #FFFFFF;
}

.table-organizer-delete-modal .guest-delete-modal__row span {
    color: rgba(0, 83, 89, 0.58);
}

.table-organizer-delete-modal .guest-delete-modal__row strong {
    font-size: 1.18rem;
    line-height: 1.22;
    text-align: left;
}

.table-organizer-delete-modal .profile-modal__footer {
    padding: 1.15rem 1.55rem 1.4rem;
    border-top: 1px solid rgba(86, 179, 194, 0.14);
    justify-content: flex-end;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.98);
}

.table-organizer-delete-modal .profile-modal__footer .profile__button {
    min-width: 158px;
    border-radius: 0;
}

@media screen and (max-width: 767px) {
    .table-organizer-delete-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 20px));
    }

    .table-organizer-delete-modal .profile-modal__header,
    .table-organizer-delete-modal .profile-modal__body,
    .table-organizer-delete-modal .profile-modal__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-organizer-delete-modal .guest-delete-modal__title {
        font-size: 1.52rem;
    }

    .table-organizer-delete-modal .guest-delete-modal__summary {
        grid-template-columns: 1fr;
    }

    .table-organizer-delete-modal .guest-delete-modal__row {
        min-height: 0;
    }

    .table-organizer-delete-modal .profile-modal__footer {
        flex-direction: column-reverse;
    }

    .table-organizer-delete-modal .profile-modal__footer .profile__button {
        width: 100%;
    }
}

.table-organizer-exporting .table-organizer__table-tools {
    opacity: 0 !important;
    pointer-events: none !important;
}

.table-organizer-exporting .table-organizer__seat,
.table-organizer-exporting .table-organizer__seat-shell,
.table-organizer-exporting .table-organizer__seat-badge,
.table-organizer-exporting .table-organizer__seat-badge-head,
.table-organizer-exporting .table-organizer__seat-badge-body,
.table-organizer-exporting .table-organizer__seat-cushion {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.table-organizer-exporting .table-organizer__seat-shell::before,
.table-organizer-exporting .table-organizer__seat-shell::after,
.table-organizer-exporting .table-organizer__seat-cushion,
.table-organizer-exporting .table-organizer__seat-badge-head,
.table-organizer-exporting .table-organizer__seat-badge-body {
    box-shadow: none !important;
}

.table-organizer__board-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(82vh, 980px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
}

.table-organizer__mobile-layout {
    display: none;
    width: min(100%, calc(100vw - 24px));
    margin: 0 auto;
    gap: 0.8rem;
}

.table-organizer__mobile-head,
.table-organizer__mobile-summary,
.table-organizer__mobile-card {
    border: 1px solid rgba(86, 179, 194, 0.2);
    background: #FFFFFF;
    box-shadow: 0 18px 36px rgba(0, 83, 89, 0.08);
}

.table-organizer__mobile-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
}

.table-organizer__mobile-heading {
    display: grid;
    gap: 0.18rem;
}

.table-organizer__mobile-kicker {
    margin: 0;
    color: #59B7C0;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.table-organizer__mobile-title {
    margin: 0;
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: clamp(1.9rem, 5vw, 2.45rem);
    line-height: 0.96;
}

.table-organizer__mobile-add {
    border: 0;
    border-radius: 0;
    padding: 0.74rem 1.05rem;
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    color: #FFFFFF;
    font-family: "Philosopher", serif;
    font-size: 1.02rem;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 16px 24px rgba(86, 179, 194, 0.24);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.table-organizer__mobile-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 28px rgba(86, 179, 194, 0.28);
}

.table-organizer__mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.82rem 1rem;
}

.table-organizer__mobile-summary-text {
    margin: 0;
    color: rgba(0, 83, 89, 0.72);
    font-size: 0.9rem;
    line-height: 1.4;
}

.table-organizer__mobile-summary-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.table-organizer__mobile-summary-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.48rem 0.8rem;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.14), rgba(126, 220, 167, 0.2));
    color: #005359;
}

.table-organizer__mobile-summary-pill strong {
    font-size: 1.1rem;
    font-weight: 700;
}

.table-organizer__mobile-summary-pill span {
    font-size: 0.8rem;
    color: rgba(0, 83, 89, 0.7);
}

.table-organizer__mobile-summary-pdf {
    padding: 0.5rem 0.82rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.table-organizer__mobile-list {
    display: grid;
    gap: 0.8rem;
}

.table-organizer__mobile-card {
    position: relative;
    overflow: hidden;
    transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.table-organizer__mobile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(86, 179, 194, 0.82), rgba(126, 220, 167, 0.9));
    opacity: 0;
    transition: height 300ms ease, opacity 300ms ease;
}

.table-organizer__mobile-card.is-expanded {
    overflow: visible;
    border-color: rgba(86, 179, 194, 0.34);
    box-shadow: 0 22px 38px rgba(0, 83, 89, 0.12);
    transform: translateY(-1px);
}

.table-organizer__mobile-card.is-expanded::before {
    height: 4px;
    opacity: 1;
}

.table-organizer__mobile-card-head {
    padding: 0.18rem 0.32rem 0;
}

.table-organizer__mobile-card-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    padding: 0.68rem 0.52rem 0.42rem;
    color: inherit;
    text-align: left;
}

.table-organizer__mobile-card-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
}

.table-organizer__mobile-card-title {
    color: #005359;
    font-family: "Philosopher", serif;
    font-size: 1.58rem;
    line-height: 1;
}

.table-organizer__mobile-card-status {
    color: rgba(0, 83, 89, 0.6);
    font-size: 1rem;
    line-height: 1.2;
}

.table-organizer__mobile-card-chevron {
    color: #59B7C0;
    font-size: 1.4rem;
    transition: transform var(--transition-fast);
}

.table-organizer__mobile-card.is-expanded .table-organizer__mobile-card-chevron {
    transform: rotate(180deg);
}

.table-organizer__mobile-card.is-expanded .table-organizer__mobile-card-title {
    color: #00645f;
}

.table-organizer__mobile-card.is-expanded .table-organizer__mobile-card-status {
    color: rgba(0, 100, 95, 0.72);
}

.table-organizer__mobile-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0 0.82rem 0.72rem;
}

.table-organizer__mobile-card-actions {
    display: flex;
    gap: 0.48rem;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
}

.table-organizer__mobile-action {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(86, 179, 194, 0.38);
    border-radius: 0;
    background: #FFFFFF;
    color: #56B3C2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.02rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.table-organizer__mobile-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 18px rgba(0, 83, 89, 0.1);
}

.table-organizer__mobile-action--edit {
    border-color: rgba(73, 110, 149, 0.28);
    color: #496E95;
}

.table-organizer__mobile-action--danger {
    border-color: rgba(230, 100, 145, 0.34);
    color: #E66491;
}

.table-organizer__mobile-card-progress {
    display: grid;
    gap: 0.24rem;
    flex: 1 1 48%;
    max-width: 48%;
    min-width: 108px;
}

.table-organizer__mobile-card-progress-label {
    color: rgba(0, 83, 89, 0.74);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.table-organizer__mobile-card-progress-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: rgba(245, 250, 251, 0.96);
}

.table-organizer__mobile-card-progress-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    height: 100%;
    background: var(--table-load-color, #7EDCA7);
    transition: width 300ms ease, background-color 300ms ease;
}

.table-organizer__mobile-card-body {
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(86, 179, 194, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.96));
}

.table-organizer__mobile-card-body[hidden] {
    display: none;
}

.table-organizer__mobile-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    padding-top: 0.95rem;
}

.table-organizer__mobile-fact:first-child {
    grid-column: 1 / -1;
}

.table-organizer__mobile-fact {
    display: grid;
    gap: 0.14rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid rgba(86, 179, 194, 0.16);
    background: #FFFFFF;
}

.table-organizer__mobile-fact span {
    color: rgba(0, 83, 89, 0.6);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.table-organizer__mobile-fact strong {
    color: #005359;
    font-size: 0.94rem;
    line-height: 1.35;
}

.table-organizer__mobile-guest-block {
    display: grid;
    gap: 0.75rem;
}

.table-organizer__mobile-section-title {
    margin: 0;
    color: #005359;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.table-organizer__mobile-guests {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.table-organizer__mobile-guest {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.72rem 0.78rem;
    border: 1px solid rgba(86, 179, 194, 0.14);
    background: #FFFFFF;
}

.table-organizer__mobile-guest-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.16), rgba(126, 220, 167, 0.28));
    color: #005359;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__mobile-guest-copy {
    display: grid;
    gap: 0.04rem;
    min-width: 0;
}

.table-organizer__mobile-guest-copy strong {
    color: #005359;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.18;
}

.table-organizer__mobile-guest-copy span,
.table-organizer__mobile-empty-copy,
.table-organizer__mobile-empty span {
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.78rem;
    line-height: 1.38;
}

.table-organizer__mobile-guest-copy--assigned {
    gap: 0.16rem;
}

.table-organizer__mobile-guest-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.42rem;
    min-width: 0;
}

.table-organizer__mobile-guest-headline strong {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-organizer__mobile-seat-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 32px;
    padding: 0.18rem 0.4rem;
    border: 1px solid rgba(139, 122, 99, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #7b6952;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__mobile-seat-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    flex: 0 0 auto;
}

.table-organizer__mobile-seat-edit {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(139, 122, 99, 0.24);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.78);
    color: #7b6952;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.table-organizer__mobile-seat-edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(90, 72, 46, 0.1);
}

.table-organizer__mobile-seat-edit.is-active {
    border-color: rgba(86, 179, 194, 0.34);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.14), rgba(126, 220, 167, 0.2));
    color: #005359;
    box-shadow: 0 12px 22px rgba(0, 83, 89, 0.12);
}

.table-organizer__mobile-guest-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.table-organizer__mobile-empty {
    display: grid;
    gap: 0.22rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: #FFFFFF;
    box-shadow: 0 18px 36px rgba(0, 83, 89, 0.08);
}

.table-organizer__mobile-empty strong {
    color: #005359;
    font-size: 1rem;
}

.table-organizer__mobile-card-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 300ms ease;
}

.table-organizer__mobile-card.is-expanded .table-organizer__mobile-card-content {
    grid-template-rows: 1fr;
    overflow: visible;
}

.table-organizer__mobile-card-inner {
    min-height: 0;
    overflow: hidden;
    display: grid;
    gap: 1rem;
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(86, 179, 194, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 253, 0.96));
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.table-organizer__mobile-card.is-expanded .table-organizer__mobile-card-inner {
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
}

.table-organizer__mobile-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.table-organizer__mobile-detail-stack {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.table-organizer__mobile-panel {
    display: grid;
    gap: 0.68rem;
    padding: 0.76rem;
    border: 1px solid rgba(86, 179, 194, 0.16);
    background: #FFFFFF;
}

.table-organizer__mobile-panel--preview {
    align-self: start;
}

.table-organizer__mobile-detail-grid .table-organizer__mobile-panel:not(.table-organizer__mobile-panel--preview) {
    border-color: rgba(139, 122, 99, 0.16);
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(244, 235, 219, 0.82));
}

.table-organizer__mobile-panel--pool {
    border-color: rgba(86, 179, 194, 0.2);
    background: linear-gradient(180deg, rgba(246, 252, 253, 0.98), rgba(233, 247, 244, 0.92));
}

.table-organizer__mobile-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.table-organizer__mobile-panel-note {
    color: rgba(0, 83, 89, 0.6);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table-organizer__mobile-preview-workspace {
    display: grid;
    gap: 0.72rem;
}

.table-organizer__mobile-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.table-organizer__mobile-preview-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 3px;
    min-width: 166px;
    border: 1px solid rgba(86, 179, 194, 0.18);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
}

.table-organizer__mobile-preview-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.18), rgba(126, 220, 167, 0.28));
    box-shadow: 0 10px 20px rgba(0, 83, 89, 0.08);
    transition: transform 300ms ease;
}

.table-organizer__mobile-preview-switch[data-preview-mode="plan"]::before {
    transform: translateX(100%);
}

.table-organizer__mobile-preview-switch-btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: rgba(0, 83, 89, 0.56);
    padding: 0.42rem 0.78rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 300ms ease;
}

.table-organizer__mobile-preview-switch-btn.is-active {
    color: #005359;
}

.table-organizer__mobile-preview-viewport {
    overflow: hidden;
    transition: height 300ms ease;
}

.table-organizer__mobile-preview-track {
    width: 200%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    transition: transform 300ms ease;
}

.table-organizer__mobile-preview-track.is-plan {
    transform: translateX(-50%);
}

.table-organizer__mobile-preview-slide {
    min-width: 0;
}

.table-organizer__mobile-preview {
    display: flex;
    justify-content: center;
    padding: 0.3rem 0 0.1rem;
    border: 1px solid rgba(86, 179, 194, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.98)),
        linear-gradient(90deg, rgba(86, 179, 194, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(86, 179, 194, 0.05) 1px, transparent 1px);
    background-size: auto, 18px 18px, 18px 18px;
}

.table-organizer__mobile-preview-shell {
    position: relative;
}

.table-organizer__mobile-preview-stage {
    position: relative;
    transform-origin: top left;
}

.table-organizer__mobile-plan-preview {
    display: grid;
    gap: 0.62rem;
}

.table-organizer__mobile-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.table-organizer__mobile-plan-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid rgba(87, 75, 58, 0.18);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #574b3a;
    padding: 0.46rem 0.72rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.table-organizer__mobile-plan-edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(73, 58, 39, 0.08);
}

.table-organizer__mobile-plan-edit.is-active {
    border-color: rgba(86, 179, 194, 0.3);
    color: #005359;
    box-shadow: 0 12px 20px rgba(0, 83, 89, 0.1);
}

.table-organizer__mobile-plan-note {
    color: rgba(0, 83, 89, 0.58);
    font-size: 0.76rem;
    line-height: 1.35;
}

.table-organizer__mobile-plan-board-shell {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(86, 179, 194, 0.12);
    touch-action: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.98)),
        linear-gradient(90deg, rgba(86, 179, 194, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(86, 179, 194, 0.05) 1px, transparent 1px);
    background-size: auto, 18px 18px, 18px 18px;
}

.table-organizer__mobile-plan-board-shell.is-editing {
    box-shadow: inset 0 0 0 1px rgba(86, 179, 194, 0.14), 0 14px 24px rgba(0, 83, 89, 0.08);
}

.table-organizer__mobile-plan-board-stage {
    position: relative;
    transform-origin: top left;
    will-change: transform;
}

.table-organizer__mobile-plan-table {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, #574b3a 0%, #4a4032 100%);
    color: rgba(255, 247, 234, 0.88);
    box-shadow: 0 10px 18px rgba(73, 58, 39, 0.14);
    transition: box-shadow 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.table-organizer__mobile-plan-table::before,
.table-organizer__mobile-plan-table::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.table-organizer__mobile-plan-table::before {
    inset: -14px;
    background:
        radial-gradient(circle at center, rgba(218, 248, 239, 0.6) 0%, rgba(218, 248, 239, 0.24) 44%, rgba(218, 248, 239, 0) 76%);
    transform: scale(0.92);
    z-index: -2;
}

.table-organizer__mobile-plan-table::after {
    inset: -8px;
    border: 3px solid rgba(111, 214, 181, 0.88);
    box-shadow: 0 0 0 6px rgba(235, 252, 247, 0.94), 0 16px 28px rgba(0, 83, 89, 0.12);
    transform: scale(0.94);
    z-index: -1;
}

.table-organizer__mobile-plan-table.is-current {
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 5px rgba(111, 214, 181, 0.3), 0 18px 30px rgba(73, 58, 39, 0.2);
    transform: scale(1.08);
}

.table-organizer__mobile-plan-table.is-current::before,
.table-organizer__mobile-plan-table.is-current::after {
    opacity: 1;
    transform: scale(1);
}

.table-organizer__mobile-plan-board-shell.is-editing .table-organizer__mobile-plan-table.is-current {
    background: linear-gradient(180deg, #dff8ee 0%, #c4efdc 54%, #a6e1c5 100%);
    color: #005359;
    border-color: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 6px rgba(111, 214, 181, 0.34), 0 20px 34px rgba(73, 58, 39, 0.24);
}

.table-organizer__mobile-plan-board-shell.is-editing .table-organizer__mobile-plan-table.is-current::after {
    border-color: rgba(126, 220, 167, 0.98);
    box-shadow: 0 0 0 8px rgba(235, 252, 247, 0.98), 0 18px 30px rgba(0, 83, 89, 0.14);
}

.table-organizer__mobile-plan-board-shell.is-editing .table-organizer__mobile-plan-table.is-current .table-organizer__mobile-plan-table-label {
    color: #005359;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.table-organizer__mobile-plan-table--rectangular {
    border-radius: 18px;
}

.table-organizer__mobile-plan-table--round {
    border-radius: 999px;
}

.table-organizer__mobile-plan-board-shell.is-editing .table-organizer__mobile-plan-table {
    cursor: grab;
}

.table-organizer__mobile-plan-table.is-dragging {
    border-color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(180deg, #c9f7d9 0%, #98e7b8 58%, #74cf9d 100%);
    color: #005359;
    box-shadow: 0 0 0 12px rgba(126, 220, 167, 0.16), 0 18px 30px rgba(0, 83, 89, 0.14);
    cursor: grabbing;
    z-index: 3;
}

.table-organizer__mobile-plan-table-label {
    font-family: "Philosopher", serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    pointer-events: none;
}

.table-organizer__mobile-plan-table.is-current .table-organizer__mobile-plan-table-label {
    color: #fffef6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.table-organizer__mobile-plan-caption {
    display: grid;
    gap: 0.12rem;
    text-align: center;
}

.table-organizer__mobile-plan-caption strong {
    color: #005359;
    font-size: 0.92rem;
}

.table-organizer__mobile-plan-caption span {
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.78rem;
    line-height: 1.36;
}

.table-organizer__table--static .table-organizer__table-surface,
.table-organizer__seat--static {
    cursor: default;
}

.table-organizer__table-surface--static {
    pointer-events: none;
}

.table-organizer__seat--static {
    pointer-events: none;
}

.table-organizer__seat--static[title] {
    pointer-events: auto;
}

.table-organizer__seat--static[data-table-mobile-preview-person] {
    cursor: pointer;
}

.table-organizer__seat--static.is-mobile-muted {
    opacity: 0.34;
    filter: saturate(0.7);
}

.table-organizer__seat--static.is-mobile-focus {
    z-index: 0;
    filter: drop-shadow(0 8px 14px rgba(0, 83, 89, 0.08));
}

.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-shell {
    transform: scale(1.03);
}

.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-cushion {
    background: #f2e3cb;
    box-shadow: inset 0 0 0 1px rgba(107, 89, 62, 0.18), 0 0 0 4px rgba(126, 220, 167, 0.22);
}

.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-badge {
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 10px rgba(0, 83, 89, 0.08));
}

.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-badge-head,
.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-badge-body {
    background: linear-gradient(180deg, #a6ecc3 0%, #7edca7 58%, #63c89d 100%);
}

.table-organizer__seat--static.is-mobile-focus .table-organizer__seat-badge-head {
    border-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 0 3px rgba(126, 220, 167, 0.2), 0 8px 14px rgba(0, 83, 89, 0.08);
}

.table-organizer__mobile-assigned-list,
.table-organizer__mobile-pool-list {
    display: grid;
    gap: 0.48rem;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow: auto;
}

.table-organizer__mobile-assigned-item,
.table-organizer__mobile-pool-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.58rem;
    padding: 0.6rem 0.68rem;
    border: 1px solid rgba(86, 179, 194, 0.14);
    background: #FFFFFF;
}

.table-organizer__mobile-assigned-item {
    align-items: start;
    border-color: rgba(139, 122, 99, 0.18);
    background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(245, 236, 222, 0.92));
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.table-organizer__mobile-assigned-item.is-editing {
    border-color: rgba(126, 220, 167, 0.42);
    background: linear-gradient(180deg, rgba(245, 255, 250, 0.99), rgba(228, 248, 236, 0.96));
    box-shadow: 0 14px 24px rgba(48, 143, 112, 0.14);
}

.table-organizer__mobile-assigned-item.is-editing .table-organizer__mobile-guest-avatar {
    background: linear-gradient(135deg, rgba(126, 220, 167, 0.28), rgba(86, 179, 194, 0.22));
    color: #005359;
    box-shadow: 0 10px 18px rgba(86, 179, 194, 0.12);
}

.table-organizer__mobile-assigned-item.is-editing .table-organizer__mobile-guest-copy strong {
    color: #00645f;
}

.table-organizer__mobile-assigned-item.is-editing .table-organizer__mobile-guest-meta {
    color: rgba(0, 100, 95, 0.72);
}

.table-organizer__mobile-assigned-item.is-editing .table-organizer__mobile-seat-tag {
    border-color: rgba(126, 220, 167, 0.42);
    background: rgba(126, 220, 167, 0.16);
    color: #00645f;
}

.table-organizer__mobile-pool-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    border-color: rgba(86, 179, 194, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 251, 0.98));
}

.table-organizer__mobile-assigned-item .table-organizer__mobile-guest-avatar {
    background: linear-gradient(135deg, rgba(229, 214, 191, 0.98), rgba(215, 191, 152, 0.98));
    color: #574b3a;
}

.table-organizer__mobile-pool-item .table-organizer__mobile-guest-avatar {
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.16), rgba(126, 220, 167, 0.28));
    color: #005359;
}

.table-organizer__mobile-seat-controls-wrap {
    grid-column: 2 / -1;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows 300ms ease, opacity 300ms ease, margin-top 300ms ease;
}

.table-organizer__mobile-assigned-item.is-editing .table-organizer__mobile-seat-controls-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.16rem;
}

.table-organizer__mobile-seat-controls {
    min-height: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.24rem;
}

.table-organizer__mobile-seat-btn,
.table-organizer__mobile-pool-add {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(86, 179, 194, 0.26);
    border-radius: 0;
    background: #FFFFFF;
    color: #56B3C2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.table-organizer__mobile-seat-btn {
    border-color: rgba(139, 122, 99, 0.26);
    color: #7b6952;
}

.table-organizer__mobile-pool-add {
    border-color: rgba(86, 179, 194, 0.28);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.14), rgba(126, 220, 167, 0.18));
    color: #005359;
}

.table-organizer__mobile-seat-btn:hover,
.table-organizer__mobile-pool-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.08);
}

.table-organizer__mobile-seat-btn--danger {
    border-color: rgba(230, 100, 145, 0.34);
    color: #E66491;
}

.table-organizer__mobile-pool-add:disabled,
.table-organizer__mobile-seat-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

body.table-organizer-force-board .table-organizer__frame {
    display: grid !important;
    position: fixed;
    top: 0;
    left: -99999px;
    width: 1580px;
    max-width: none;
    z-index: -1;
}

body.table-organizer-force-board .table-organizer__mobile-layout {
    display: none !important;
}

@media screen and (max-width: 1199px) {
    .table-organizer__frame {
        grid-template-columns: 380px minmax(0, 1fr);
    }

    .table-organizer__board {
        width: 1080px;
        min-height: 640px;
    }
}

@media screen and (max-width: 1024px) {
    .table-organizer__frame {
        display: none;
    }

    .table-organizer__mobile-layout {
        display: grid;
    }

    .table-organizer__mobile-card.is-expanded .table-organizer__mobile-panel--preview {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 2.15rem);
        z-index: 2;
    }
}

@media screen and (max-width: 991px) {
    .table-organizer__board-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .table-organizer__board {
        width: 1020px;
        min-height: 620px;
    }
}

@media screen and (max-width: 767px) {
    .table-organizer__mobile-detail-grid {
        grid-template-columns: 1fr;
    }

    .table-organizer__mobile-assigned-list,
    .table-organizer__mobile-pool-list {
        max-height: none;
    }

    .table-organizer__mobile-head {
        align-items: stretch;
        flex-direction: column;
    }

    .table-organizer__mobile-add {
        width: 100%;
        justify-self: stretch;
        text-align: center;
    }

    .table-organizer__mobile-summary-tools {
        width: 100%;
        justify-content: space-between;
    }

    .table-organizer__mobile-card-title {
        font-size: 1.42rem;
    }

    .table-organizer__mobile-card-toolbar {
        padding-left: 0.72rem;
        padding-right: 0.72rem;
    }

    .table-organizer__mobile-card-body {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .table-organizer__mobile-card-inner {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .table-organizer__sidebar-note,
    .table-organizer__guest-summary {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .table-organizer__board {
        width: 960px;
        min-height: 600px;
    }

    .table-organizer__table-name {
        font-size: 1.72rem;
    }

    .table-organizer-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 24px));
        border-radius: 0;
    }

    .table-organizer-modal__header {
        padding: 1.15rem 1.15rem 0.95rem;
    }

    .table-organizer-modal__form {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
        gap: 1rem;
    }

    .table-organizer-modal__grid,
    .table-organizer-modal__stepper-grid {
        grid-template-columns: 1fr;
    }

    .table-organizer-modal__stepper-grid--single {
        max-width: none;
    }

    .table-organizer-modal__footer {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .table-organizer-modal__submit,
    .table-organizer-modal__cancel {
        width: 100%;
    }
}

@media screen and (max-width: 540px) {
    .table-organizer__mobile-layout {
        width: calc(100vw - 16px);
    }

    .table-organizer__mobile-head,
    .table-organizer__mobile-summary,
    .table-organizer__mobile-empty {
        padding-left: 0.88rem;
        padding-right: 0.88rem;
    }

    .table-organizer__mobile-card-toggle {
        padding: 0.6rem 0.4rem 0.38rem;
    }

    .table-organizer__mobile-card-actions {
        gap: 0.42rem;
    }

    .table-organizer__mobile-card-toolbar {
        gap: 0.48rem;
    }

    .table-organizer__mobile-card-progress {
        min-width: 96px;
    }

    .table-organizer__mobile-seat-controls {
        justify-self: end;
    }

    .table-organizer__mobile-assigned-item,
    .table-organizer__mobile-pool-item {
        gap: 0.46rem;
        padding: 0.56rem 0.6rem;
    }

    .table-organizer__mobile-seat-controls-wrap {
        grid-column: 1 / -1;
    }

    .table-organizer__mobile-pool-add {
        grid-column: auto;
        justify-self: end;
        align-self: center;
    }

    .table-organizer__mobile-guest-headline {
        gap: 0.34rem;
    }

    .table-organizer__mobile-preview-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .table-organizer__mobile-preview-switch {
        width: 100%;
        min-width: 0;
    }

    .table-organizer__mobile-plan-head {
        align-items: stretch;
        flex-direction: column;
    }

    .table-organizer__mobile-action {
        width: 42px;
        height: 42px;
    }

    .table-organizer__mobile-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .table-organizer__mobile-fact:first-child {
        grid-column: 1 / -1;
    }

    .table-organizer__board {
        width: 900px;
        min-height: 580px;
    }

    .table-organizer__table-meta {
        font-size: 0.72rem;
    }
}

@media screen and (max-width: 340px) {
    .table-organizer__mobile-facts {
        grid-template-columns: 1fr;
    }

    .table-organizer__mobile-fact:first-child {
        grid-column: auto;
    }

    .table-organizer__mobile-guest-avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .table-organizer__mobile-seat-btn,
    .table-organizer__mobile-pool-add {
        width: 28px;
        height: 28px;
    }

    .table-organizer__mobile-seat-edit {
        width: 26px;
        height: 26px;
    }

    .table-organizer__mobile-seat-tag {
        min-width: 28px;
        padding-left: 0.32rem;
        padding-right: 0.32rem;
    }
}

/* ============================================================
   PAGE - PRESUPUESTO
   ============================================================ */
body.budget-page {
    --budget-border: rgba(86, 179, 194, 0.26);
    --budget-summary-sticky-offset: calc(var(--header-offset) + 16px);
    --budget-summary-card-height: 0px;
    --budget-summary-card-left: 16px;
    --budget-summary-card-width: calc(100vw - 32px);
    --budget-floating-dock-gap: 8px;
    --budget-floating-dock-bottom: calc(16px + env(safe-area-inset-bottom));
}

body.budget-page main {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

.budget-page .profile-hero__avatar {
    background:
        radial-gradient(circle at 30% 20%, rgba(126, 220, 167, 0.28), transparent 38%),
        linear-gradient(135deg, rgba(86, 179, 194, 0.24), rgba(255, 255, 255, 0.92));
}

.budget-planner {
    display: grid;
    gap: var(--space-lg);
}

.budget-overview {
    border: 1px solid var(--budget-border);
    background:
        radial-gradient(circle at top right, rgba(126, 220, 167, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 252, 0.98));
    padding: 0.82rem 0.88rem;
    gap: 0.62rem;
}

.budget-overview__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.budget-overview__copy {
    display: grid;
    gap: 0.22rem;
}

.budget-overview__eyebrow {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #59B7C0;
}

.budget-overview .profile__card-title {
    line-height: 1.08;
}

.budget-overview .profile__card-subtitle {
    font-size: 0.82rem;
    line-height: 1.35;
}

.budget-overview__legend {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.budget-overview__legend-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.5rem;
    border: 1px solid var(--budget-border);
    background: rgba(255, 255, 255, 0.94);
    color: rgba(0, 83, 89, 0.72);
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.budget-overview__legend-item::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
}

.budget-overview__legend-item--planned::before {
    background: rgba(86, 179, 194, 0.35);
}

.budget-overview__legend-item--spent::before {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
}

.budget-overview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.55rem;
}

.budget-stat {
    border: 1px solid var(--budget-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    padding: 0.58rem 0.68rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.58rem;
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.05);
    min-height: 0;
}

.budget-stat__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-size: 0.86rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.budget-stat__content {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.budget-stat__label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.56);
}

.budget-stat__value {
    font-size: clamp(1.08rem, 1.7vw, 1.62rem);
    line-height: 1.02;
    color: #005359;
}

.budget-stat__help {
    margin: 0;
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.74rem;
    line-height: 1.22;
}

.budget-stat--spent {
    border-color: rgba(53, 181, 138, 0.28);
    background:
        radial-gradient(circle at top right, rgba(126, 220, 167, 0.2), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 248, 0.98));
}

.budget-stat--spent .budget-stat__icon {
    border-color: rgba(53, 181, 138, 0.18);
    background: linear-gradient(135deg, rgba(126, 220, 167, 0.22), rgba(53, 181, 138, 0.14));
    color: #1d8e69;
}

.budget-stat--spent .budget-stat__value {
    color: #117457;
}

.budget-stat--pending .budget-stat__value {
    color: #84643d;
}

.budget-stat--pending {
    border-color: rgba(205, 163, 94, 0.3);
    background:
        radial-gradient(circle at top right, rgba(244, 225, 190, 0.34), transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 244, 0.98));
}

.budget-stat--pending .budget-stat__icon {
    border-color: rgba(205, 163, 94, 0.18);
    background: linear-gradient(135deg, rgba(244, 225, 190, 0.54), rgba(205, 163, 94, 0.16));
    color: #9b6a25;
}

.budget-stat--budget .budget-stat__value {
    color: #005359;
}

.budget-stat--budget {
    border-color: rgba(86, 179, 194, 0.3);
    background:
        radial-gradient(circle at top right, rgba(86, 179, 194, 0.16), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 252, 0.98));
}

.budget-stat--budget .budget-stat__icon {
    border-color: rgba(86, 179, 194, 0.18);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.2), rgba(126, 220, 167, 0.12));
    color: #0e7e93;
}

.budget-stat--budget-feature {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.68rem;
    padding: 0.6rem 0.68rem;
    margin-top: 0.2rem;
    background:
        radial-gradient(circle at top right, rgba(86, 179, 194, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 249, 252, 0.98));
}

.budget-stat--budget-feature .budget-stat__icon {
    width: 40px;
    height: 40px;
    font-size: 0.96rem;
}

.budget-stat--budget-feature .budget-stat__value {
    font-size: clamp(1.25rem, 2vw, 1.82rem);
}

.budget-stat__feature-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.82rem;
}

.budget-stat__feature-copy {
    max-width: 38ch;
    font-size: 0.76rem;
    line-height: 1.28;
}

.budget-stat__feature-actions {
    display: flex;
    justify-content: flex-end;
}

.budget-stat__feature-actions .profile__button {
    white-space: nowrap;
}

.budget-stat--available {
    border-color: rgba(23, 118, 154, 0.26);
    background:
        radial-gradient(circle at top right, rgba(103, 196, 229, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 253, 0.98));
}

.budget-stat--available .budget-stat__icon {
    border-color: rgba(23, 118, 154, 0.16);
    background: linear-gradient(135deg, rgba(103, 196, 229, 0.2), rgba(86, 179, 194, 0.12));
    color: #156b95;
}

.budget-stat--available .budget-stat__value {
    color: #125f83;
}

.budget-stat--available.is-over .budget-stat__value,
.budget-stat--available.is-over .budget-stat__help,
.budget-stat--available.is-over .budget-stat__icon {
    color: #E66491;
}

.budget-stat--available.is-over {
    border-color: rgba(230, 100, 145, 0.32);
    background:
        radial-gradient(circle at top right, rgba(230, 100, 145, 0.14), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 249, 0.98));
}

.budget-stat--available.is-over .budget-stat__icon {
    border-color: rgba(230, 100, 145, 0.22);
    background: linear-gradient(135deg, rgba(230, 100, 145, 0.18), rgba(255, 209, 223, 0.3));
}

.budget-progress {
    margin-top: 0.18rem;
    border: 1px solid var(--budget-border);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.62rem 0.68rem;
    display: grid;
    gap: 0.42rem;
}

.budget-progress__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.budget-progress__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.budget-progress__main {
    display: grid;
    gap: 0.18rem;
}

.budget-progress__aside {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
    text-align: right;
}

.budget-progress__label {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.58);
}

.budget-progress__value {
    color: #005359;
    font-size: 1.42rem;
}

.budget-progress__summary,
.budget-progress__note,
.budget-progress__meta {
    margin: 0;
    color: rgba(0, 83, 89, 0.68);
    font-size: 0.77rem;
    line-height: 1.22;
}

.budget-progress__legend {
    justify-content: flex-end;
    gap: 0.34rem;
    margin: 0;
}

.budget-progress__legend .budget-overview__legend-item {
    padding: 0.18rem 0.44rem;
    font-size: 0.57rem;
    letter-spacing: 0.08em;
}

.budget-progress__legend .budget-overview__legend-item::before {
    width: 0.5rem;
    height: 0.5rem;
}

.budget-progress__track {
    position: relative;
    height: 8px;
    border: 1px solid var(--budget-border);
    background: rgba(86, 179, 194, 0.08);
    overflow: hidden;
}

.budget-progress__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    transition: width 280ms ease;
}

.budget-progress__fill--planned {
    background: rgba(86, 179, 194, 0.28);
}

.budget-progress__fill--spent {
    background: linear-gradient(135deg, #56B3C2 0%, #7EDCA7 100%);
    box-shadow: 0 0 18px rgba(126, 220, 167, 0.26);
}

.budget-progress__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.38rem;
}

.budget-progress-stat {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.42rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: rgba(248, 252, 253, 0.88);
}

.budget-progress-stat__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-size: 0.68rem;
}

.budget-progress-stat__content {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.budget-progress-stat__label {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.56);
    line-height: 1.1;
}

.budget-progress-stat__value {
    font-size: clamp(0.92rem, 1.35vw, 1.2rem);
    line-height: 1.02;
    color: #005359;
}

.budget-progress-stat--spent {
    border-color: rgba(53, 181, 138, 0.22);
    background:
        linear-gradient(180deg, rgba(248, 253, 250, 0.96), rgba(244, 252, 248, 0.96));
}

.budget-progress-stat--spent .budget-progress-stat__icon {
    border-color: rgba(53, 181, 138, 0.16);
    background: linear-gradient(135deg, rgba(126, 220, 167, 0.24), rgba(53, 181, 138, 0.12));
    color: #1d8e69;
}

.budget-progress-stat--spent .budget-progress-stat__value {
    color: #117457;
}

.budget-progress-stat--pending {
    border-color: rgba(205, 163, 94, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(255, 250, 244, 0.96));
}

.budget-progress-stat--pending .budget-progress-stat__icon {
    border-color: rgba(205, 163, 94, 0.16);
    background: linear-gradient(135deg, rgba(244, 225, 190, 0.5), rgba(205, 163, 94, 0.14));
    color: #9b6a25;
}

.budget-progress-stat--pending .budget-progress-stat__value {
    color: #84643d;
}

.budget-progress-stat--available {
    border-color: rgba(23, 118, 154, 0.2);
    background:
        linear-gradient(180deg, rgba(246, 251, 254, 0.96), rgba(244, 249, 253, 0.96));
}

.budget-progress-stat--available .budget-progress-stat__icon {
    border-color: rgba(23, 118, 154, 0.14);
    background: linear-gradient(135deg, rgba(103, 196, 229, 0.2), rgba(86, 179, 194, 0.1));
    color: #156b95;
}

.budget-progress-stat--available .budget-progress-stat__value {
    color: #125f83;
}

.budget-progress-stat--available.is-over {
    border-color: rgba(230, 100, 145, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 247, 250, 0.98), rgba(255, 244, 248, 0.98));
}

.budget-progress-stat--available.is-over .budget-progress-stat__icon,
.budget-progress-stat--available.is-over .budget-progress-stat__value {
    color: #E66491;
}

.budget-progress-stat--available.is-over .budget-progress-stat__icon {
    border-color: rgba(230, 100, 145, 0.2);
    background: linear-gradient(135deg, rgba(230, 100, 145, 0.16), rgba(255, 209, 223, 0.26));
}

.budget-progress-stat--real-available {
    border-color: rgba(0, 83, 89, 0.2);
    background:
        linear-gradient(180deg, rgba(245, 251, 252, 0.98), rgba(241, 248, 249, 0.98));
}

.budget-progress-stat--real-available .budget-progress-stat__icon {
    border-color: rgba(0, 83, 89, 0.14);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.18), rgba(0, 83, 89, 0.08));
    color: #005359;
}

.budget-progress-stat--real-available .budget-progress-stat__value {
    color: #005359;
}

.budget-progress-stat--real-available.is-over {
    border-color: rgba(230, 100, 145, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 247, 250, 0.98), rgba(255, 244, 248, 0.98));
}

.budget-progress-stat--real-available.is-over .budget-progress-stat__icon,
.budget-progress-stat--real-available.is-over .budget-progress-stat__value {
    color: #E66491;
}

.budget-progress-stat--real-available.is-over .budget-progress-stat__icon {
    border-color: rgba(230, 100, 145, 0.2);
    background: linear-gradient(135deg, rgba(230, 100, 145, 0.16), rgba(255, 209, 223, 0.26));
}

.budget-overview--simple {
    position: sticky;
    top: var(--budget-summary-sticky-offset);
    z-index: calc(var(--z-sticky) - 1);
    align-self: start;
    padding: 0.82rem 0.92rem;
    gap: 0.64rem;
    background: #fff;
}

.budget-overview--simple .budget-overview__head {
    align-items: flex-start;
    gap: 0.78rem;
}

.budget-overview__metric {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.budget-overview__metric--budget {
    margin-left: auto;
    text-align: right;
}

.budget-overview__metric-label {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.2;
    color: #1f1f1f;
}

.budget-overview__metric-value {
    font-size: clamp(1.58rem, 2.7vw, 2rem);
    line-height: 1;
    color: #111827;
}

.budget-progress--simple {
    margin-top: 0;
    border: 0;
    background: transparent;
    padding: 0;
    gap: 0;
    width: 100%;
}

.budget-progress--simple .budget-progress__track {
    width: 100%;
    box-sizing: border-box;
    height: 16px;
    padding: 2px;
    border-radius: 0;
    border-color: rgba(86, 179, 194, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 22px rgba(0, 83, 89, 0.06);
}

.budget-progress--simple .budget-progress__fill--spent {
    border-radius: 0;
    background:
        linear-gradient(90deg, #56B3C2 0%, #61C3C1 48%, #7EDCA7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 8px 18px rgba(86, 179, 194, 0.28);
}

.budget-progress--simple .budget-progress__fill--spent::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.budget-progress--simple.is-over .budget-progress__fill--spent {
    background: linear-gradient(90deg, #E66491 0%, #F08BB0 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 8px 18px rgba(230, 100, 145, 0.22);
}

.budget-overrun {
    margin: -0.06rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    color: #b84a73;
    font-size: 0.72rem;
    line-height: 1.25;
}

.budget-overrun i {
    flex: 0 0 auto;
    font-size: 0.9rem;
    color: #E66491;
}

.budget-overrun strong {
    color: #9e315b;
}

.budget-preset {
    border: 1px solid var(--budget-border);
    background:
        radial-gradient(circle at top right, rgba(126, 220, 167, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 252, 0.98));
    padding: 0;
}

.budget-preset__button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.82rem;
    padding: 0.95rem 1rem;
    border: 0;
    background: transparent;
    color: #005359;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.budget-preset__button:hover {
    background: rgba(86, 179, 194, 0.06);
    box-shadow: inset 0 0 0 1px rgba(86, 179, 194, 0.12);
}

.budget-preset__button:focus-visible {
    outline: 2px solid rgba(86, 179, 194, 0.4);
    outline-offset: -2px;
}

.budget-preset__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #56B3C2;
    font-size: 1.6rem;
}

.budget-preset__content {
    min-width: 0;
    display: grid;
    gap: 0.14rem;
}

.budget-preset__content strong {
    color: #005359;
    font-size: 1rem;
    line-height: 1.15;
}

.budget-preset__content span {
    color: rgba(0, 83, 89, 0.66);
    font-size: 0.82rem;
    line-height: 1.35;
}

.budget-board {
    border: 1px solid var(--budget-border);
    background:
        radial-gradient(circle at top right, rgba(86, 179, 194, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 253, 0.99));
}

.budget-board__header {
    align-items: flex-start;
    padding: 0;
}

.budget-board__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.budget-board__actions-main,
.budget-board__actions-danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.budget-board__actions-danger {
    margin-left: auto;
}

.budget-board__actions-main {
    min-width: 0;
}

.budget-board__actions .profile__button,
.budget-expense__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.budget-board__actions-danger .profile__button {
    justify-content: flex-end;
}

.budget-mobile-dock {
    position: fixed;
    left: 50%;
    bottom: var(--budget-floating-dock-bottom);
    z-index: calc(var(--z-fixed) - 1);
    width: max-content;
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.4rem;
    border: 1px solid rgba(86, 179, 194, 0.24);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 36px rgba(0, 83, 89, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px);
    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 220ms ease;
    will-change: transform, opacity;
}

.budget-mobile-dock.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.budget-mobile-dock__button {
    min-height: 40px;
    justify-content: center;
    padding: 0.52rem 0.8rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.08);
}

.budget-mobile-dock__button--secondary {
    min-width: 108px;
}

.budget-active-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.95rem 1rem;
    border: 1px solid var(--budget-border);
    background: rgba(255, 255, 255, 0.88);
    margin-bottom: var(--space-md);
}

.budget-active-filters__copy {
    display: grid;
    gap: 0.12rem;
}

.budget-active-filters__label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.58);
}

.budget-active-filters__count {
    color: #005359;
    font-size: var(--font-size-lg);
}

.budget-active-filters__chips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 280px;
}

.budget-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    padding: 0.35rem 0.62rem;
    border: 1px solid rgba(86, 179, 194, 0.22);
    background: rgba(255, 255, 255, 0.96);
    color: rgba(0, 83, 89, 0.76);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.budget-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    font-size: 0.92em;
    line-height: 1;
}

.budget-chip--neutral {
    color: rgba(0, 83, 89, 0.52);
}

.budget-chip--search {
    border-color: rgba(86, 179, 194, 0.3);
    background: rgba(86, 179, 194, 0.12);
    color: #005359;
}

.budget-chip--success {
    border-color: rgba(126, 220, 167, 0.42);
    background: rgba(126, 220, 167, 0.16);
    color: #0a6a4d;
}

.budget-chip--warning {
    border-color: rgba(205, 163, 94, 0.34);
    background: rgba(244, 225, 190, 0.38);
    color: #7b5a26;
}

.budget-chip--category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(0, 83, 89, 0.14);
    background: rgba(0, 83, 89, 0.05);
    color: #005359;
}

.budget-list {
    display: grid;
    gap: 0.62rem;
}

.budget-expense {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(200, 219, 224, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.96));
    box-shadow: inset 3px 0 0 rgba(200, 219, 224, 0.7);
    transition: background var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.budget-expense.is-completed {
    border-color: rgba(126, 220, 167, 0.34);
    background: linear-gradient(180deg, rgba(247, 252, 253, 0.8), rgba(255, 255, 255, 0.94));
    box-shadow: inset 3px 0 0 rgba(126, 220, 167, 0.72);
}

.budget-expense.is-pending {
    border-color: rgba(205, 163, 94, 0.28);
    box-shadow: inset 3px 0 0 rgba(205, 163, 94, 0.7);
}

.budget-expense__status-group {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 68px;
    align-self: center;
    padding: 0.14rem;
    border: 1px solid var(--budget-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
}

.budget-expense__status-group::before {
    content: "";
    position: absolute;
    top: 0.14rem;
    bottom: 0.14rem;
    left: 0.14rem;
    width: calc(50% - 0.14rem);
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(244, 225, 190, 0.36), rgba(255, 255, 255, 0.98));
    box-shadow: 0 8px 16px rgba(205, 163, 94, 0.08);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
    z-index: 0;
}

.budget-expense__status-group--completed::before {
    transform: translateX(0);
    border-color: rgba(126, 220, 167, 0.42);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.12), rgba(126, 220, 167, 0.24));
    box-shadow: 0 8px 16px rgba(53, 181, 138, 0.1);
}

.budget-expense__status-group--pending::before {
    transform: translateX(100%);
    border-color: rgba(205, 163, 94, 0.34);
    background: linear-gradient(135deg, rgba(244, 225, 190, 0.36), rgba(255, 255, 255, 0.98));
    box-shadow: 0 8px 16px rgba(205, 163, 94, 0.08);
}

.budget-expense__status-option {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 28px;
    border: 0;
    background: transparent;
    color: rgba(0, 83, 89, 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.88rem;
    transition: color 260ms ease, opacity 260ms ease, transform 260ms ease;
}

.budget-expense__status-option:hover {
    color: rgba(0, 83, 89, 0.62);
}

.budget-expense__status-option--completed.is-active {
    color: #0a6a4d;
    transform: scale(1.02);
}

.budget-expense__status-option--pending.is-active {
    color: #9b6a25;
    transform: scale(1.02);
}

.budget-expense__status-option:focus-visible {
    outline: none;
    color: #005359;
}

.budget-expense__status-group:focus-within {
    box-shadow: 0 0 0 2px rgba(89, 183, 192, 0.2);
}

.budget-expense__content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-self: center;
}

.budget-expense__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.budget-expense__title-row .budget-chip {
    padding: 0.22rem 0.42rem;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
}

.budget-expense__title {
    color: #005359;
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.06;
    text-align: left;
    transition: color var(--transition-fast), opacity var(--transition-fast), text-decoration-color var(--transition-fast);
}

.budget-expense__title:hover {
    color: #59B7C0;
}

.budget-expense.is-completed .budget-expense__title {
    color: rgba(0, 83, 89, 0.54);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 83, 89, 0.34);
    text-decoration-thickness: 1px;
}

.budget-expense.is-completed .budget-expense__title:hover {
    color: rgba(0, 83, 89, 0.74);
}

.budget-expense.is-completed .budget-expense__content .budget-chip,
.budget-expense.is-completed .budget-expense__amount-value,
.budget-expense.is-completed .budget-expense__action {
    opacity: 0.68;
}

.budget-expense.is-completed .budget-expense__amount-value {
    text-decoration: line-through;
    text-decoration-color: rgba(0, 83, 89, 0.3);
    text-decoration-thickness: 1px;
}

.budget-expense.is-completed .budget-expense__action:hover {
    opacity: 1;
}

.budget-expense__sidebar {
    min-width: 0;
    align-self: center;
}

.budget-expense__toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.budget-expense__amount {
    display: inline-flex;
    align-items: center;
    text-align: right;
}

.budget-expense__amount-value {
    color: #005359;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1;
}

.budget-expense__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

.budget-expense__action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--budget-border);
    background: #FFFFFF;
    color: #005359;
    font-size: 0;
    letter-spacing: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.budget-expense__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 83, 89, 0.08);
    border-color: rgba(86, 179, 194, 0.42);
    color: #59B7C0;
}

.budget-expense__action--danger {
    color: #E66491;
    border-color: rgba(230, 100, 145, 0.28);
}

.budget-expense__action--danger:hover {
    color: #E66491;
    border-color: rgba(230, 100, 145, 0.42);
}

.budget-expense__action i {
    display: block;
    font-size: 0.8rem;
    line-height: 1;
    margin: 0;
}

.budget-empty {
    margin-top: var(--space-sm);
    padding: 2rem 1rem;
    border: 1px dashed rgba(86, 179, 194, 0.32);
    background: rgba(248, 252, 253, 0.98);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
}

.budget-empty__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--budget-border);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.12), rgba(126, 220, 167, 0.18));
    color: #005359;
    font-size: 1.35rem;
}

.budget-empty__title {
    color: #005359;
    font-size: var(--font-size-xl);
}

.budget-empty__copy {
    margin: 0;
    max-width: 52ch;
    color: rgba(0, 83, 89, 0.66);
}

.budget-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-right: 4rem;
}

.budget-modal__heading {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.budget-modal__subtitle {
    margin: 0;
    color: rgba(0, 83, 89, 0.64);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.budget-filter-modal .profile-modal__dialog {
    width: min(460px, 100%);
}

.budget-filter-modal .profile-modal__dialog,
.budget-entry-modal .profile-modal__dialog,
.budget-total-modal .profile-modal__dialog,
.budget-delete-modal .profile-modal__dialog,
.budget-clear-modal .profile-modal__dialog {
    display: flex;
    flex-direction: column;
    max-height: min(calc(100dvh - 32px), 760px);
}

.budget-filter-modal .profile-modal__body,
.budget-entry-modal .profile-modal__body,
.budget-total-modal .profile-modal__body,
.budget-delete-modal .profile-modal__body,
.budget-clear-modal .profile-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.budget-filter-form {
    max-height: none;
    overflow: visible;
}

.budget-filter-group {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--budget-border);
    background: rgba(255, 255, 255, 0.96);
}

.budget-filter-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.budget-filter-group__head h5 {
    color: #005359;
    font-size: 1rem;
}

.budget-filter-group__head span {
    color: rgba(0, 83, 89, 0.58);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.budget-filter-checks,
.budget-filter-categories {
    display: grid;
    gap: 0.55rem;
}

.budget-filter-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.88rem;
    border: 1px solid var(--budget-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.budget-filter-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid rgba(86, 179, 194, 0.34);
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.budget-filter-check:hover {
    border-color: rgba(86, 179, 194, 0.4);
    box-shadow: 0 12px 18px rgba(0, 83, 89, 0.05);
}

.budget-filter-check input:focus-visible {
    outline: 2px solid #56B3C2;
    outline-offset: 2px;
}

.budget-filter-check input:checked {
    border-color: rgba(86, 179, 194, 0.82);
    background-color: #56B3C2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'><path d='M1 5.2L4.2 8.4L11 1.6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    box-shadow: 0 0 0 4px rgba(86, 179, 194, 0.16);
}

.budget-filter-check:has(input:checked) {
    border-color: rgba(86, 179, 194, 0.46);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.14), rgba(126, 220, 167, 0.24));
    box-shadow: 0 14px 22px rgba(0, 83, 89, 0.08);
}

.budget-filter-check:has(input:checked) .budget-filter-check__label {
    color: #005359;
    font-weight: 700;
}

.budget-filter-check__label {
    color: #005359;
    font-size: var(--font-size-sm);
}

.budget-filter-check__count {
    min-width: 28px;
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: rgba(255, 255, 255, 0.96);
    color: rgba(0, 83, 89, 0.66);
    text-align: center;
    font-size: 0.72rem;
}

.budget-filter-check:has(input:checked) .budget-filter-check__count {
    border-color: rgba(86, 179, 194, 0.34);
    background: rgba(255, 255, 255, 0.98);
    color: #005359;
    box-shadow: 0 8px 14px rgba(0, 83, 89, 0.06);
}

.budget-entry-modal .profile-modal__dialog {
    width: min(720px, 100%);
}

.budget-entry-form__grid,
.budget-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.budget-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.95rem 1rem;
    border: 1px solid var(--budget-border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 252, 0.98));
}

.budget-detail-summary__item {
    display: grid;
    gap: 0.18rem;
}

.budget-detail-summary__item span {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.56);
}

.budget-detail-summary__item strong {
    color: #005359;
    font-size: var(--font-size-base);
}

.budget-total-modal .profile-modal__dialog,
.budget-delete-modal .profile-modal__dialog,
.budget-clear-modal .profile-modal__dialog {
    width: min(520px, 100%);
}

.budget-total-modal__note {
    margin: 0;
    color: rgba(0, 83, 89, 0.64);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

@media screen and (max-width: 1199px) {
    .budget-overview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-stat__feature-main {
        gap: 0.8rem;
    }

    .budget-stat__feature-copy {
        max-width: 30ch;
    }
}

@media screen and (max-width: 991px) {
    .budget-overview__head,
    .budget-progress__head,
    .budget-progress__foot,
    .budget-board__header,
    .budget-active-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .budget-active-filters {
        justify-content: flex-start;
        gap: 0.45rem;
        padding: 0.72rem 0.8rem;
    }

    .budget-active-filters__chips {
        flex: 0 0 auto;
        width: 100%;
    }

    .budget-active-filters__clear {
        align-self: flex-start;
    }

    .budget-board {
        padding: 1rem;
        gap: 0.85rem;
    }

    .budget-overview--simple .budget-overview__head {
        flex-direction: row;
        align-items: flex-start;
    }

    .budget-board__actions {
        justify-content: space-between;
        width: 100%;
    }

    .budget-board__actions-danger {
        margin-left: 0;
    }

    .budget-stat--budget-feature {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .budget-stat__feature-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .budget-stat__feature-copy {
        max-width: none;
    }

    .budget-stat__feature-actions {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: flex-start;
    }

    .budget-progress__legend {
        justify-content: flex-start;
    }

    .budget-progress__aside {
        justify-items: start;
        text-align: left;
    }

    .budget-progress__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-expense {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media screen and (max-width: 767px) {
    body.budget-page {
        --budget-summary-sticky-offset: calc(var(--header-offset) + 8px);
        --budget-floating-dock-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .budget-overview__grid,
    .budget-entry-form__grid,
    .budget-detail-summary {
        grid-template-columns: 1fr;
    }

    .budget-overview {
        padding: 0.7rem;
        gap: 0.42rem;
    }

    .budget-overview--simple {
        padding: 0.7rem;
        gap: 0.24rem;
    }

    .budget-overview--simple .budget-overview__head {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.16rem 0.5rem;
        align-items: start;
    }

    .budget-overview--simple .budget-overview__metric {
        gap: 0.08rem;
    }

    .budget-overview--simple .budget-overview__metric--spent {
        justify-items: start;
    }

    .budget-overview--simple .budget-overview__metric--budget {
        margin-left: 0;
        text-align: right;
        justify-items: end;
    }

    .budget-overview--simple .budget-overview__metric-label {
        font-size: 0.62rem;
        line-height: 1;
        white-space: nowrap;
    }

    .budget-overview--simple .budget-overview__metric-value {
        font-size: clamp(0.92rem, 5.8vw, 1.34rem);
    }

    .budget-progress--simple {
        margin-top: -0.02rem;
    }

    .budget-stat--budget-feature {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.48rem;
        padding: 0.52rem 0.54rem;
    }

    .budget-stat--budget-feature .budget-stat__icon {
        width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }

    .budget-stat__feature-actions .profile__button {
        width: 100%;
        justify-content: center;
    }

    .budget-progress__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .budget-progress {
        padding: 0.56rem;
        gap: 0.34rem;
    }

    .budget-progress__legend {
        margin: 0;
    }

    .budget-progress__legend .budget-overview__legend-item {
        padding: 0.16rem 0.38rem;
        font-size: 0.54rem;
    }

    .budget-progress-stat {
        gap: 0.3rem;
        padding: 0.32rem 0.34rem;
    }

    .budget-progress-stat__icon {
        width: 20px;
        height: 20px;
        font-size: 0.58rem;
    }

    .budget-progress-stat__label {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
    }

    .budget-progress-stat__value {
        font-size: clamp(0.84rem, 4vw, 1rem);
    }

    .budget-progress--simple .budget-progress__track {
        height: 10px;
    }

    .budget-overrun {
        margin-top: -0.02rem;
        gap: 0.28rem;
        font-size: 0.66rem;
        line-height: 1.18;
    }

    .budget-overrun i {
        font-size: 0.78rem;
    }

    .budget-board__header {
        gap: 0.4rem;
    }

    .budget-board {
        padding: 0.82rem;
        gap: 0.7rem;
    }

    .budget-board .profile__card-subtitle {
        display: none;
    }

    .budget-preset__button {
        gap: 0.62rem;
        padding: 0.76rem 0.82rem;
    }

    .budget-preset__icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 1.36rem;
    }

    .budget-preset__content strong {
        font-size: 0.9rem;
    }

    .budget-preset__content span {
        font-size: 0.74rem;
    }

    .budget-board__actions {
        width: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        justify-content: flex-start;
    }

    .budget-board__actions-main,
    .budget-board__actions-danger {
        gap: 0.3rem;
    }

    .budget-board__actions-danger {
        margin-left: 0;
    }

    .budget-board__actions [data-budget-modal-open="filter"],
    .budget-board__actions [data-budget-modal-open="add"] {
        display: none;
    }

    .budget-board__actions .profile__button {
        width: auto;
        justify-content: center;
        min-height: 36px;
        padding: 0.45rem 0.58rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .budget-mobile-dock {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.36rem;
        width: min(calc(100vw - 24px), 320px);
        max-width: calc(100vw - 24px);
        padding: 0.36rem;
    }

    .budget-mobile-dock__button {
        min-height: 40px;
        justify-content: center;
        padding: 0.52rem 0.68rem;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .budget-mobile-dock__button--secondary {
        min-width: 108px;
    }

    .budget-filter-modal,
    .budget-entry-modal,
    .budget-total-modal,
    .budget-delete-modal,
    .budget-clear-modal {
        padding: 12px;
    }

    .budget-filter-modal .profile-modal__dialog,
    .budget-entry-modal .profile-modal__dialog,
    .budget-total-modal .profile-modal__dialog,
    .budget-delete-modal .profile-modal__dialog,
    .budget-clear-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 24px));
        max-height: min(calc(100dvh - 24px), 720px);
    }

    .budget-filter-modal .profile-modal__header,
    .budget-entry-modal .profile-modal__header,
    .budget-total-modal .profile-modal__header,
    .budget-delete-modal .profile-modal__header,
    .budget-clear-modal .profile-modal__header {
        padding: 0.8rem 3.6rem 0.8rem 0.9rem;
    }

    .budget-filter-modal .profile-modal__body,
    .budget-entry-modal .profile-modal__body,
    .budget-total-modal .profile-modal__body,
    .budget-delete-modal .profile-modal__body,
    .budget-clear-modal .profile-modal__body {
        padding: 0.74rem 0.9rem 0.9rem;
    }

    .budget-filter-form,
    .budget-entry-form {
        gap: 0.72rem;
    }

    .budget-modal__header {
        gap: 0.8rem;
    }

    .budget-modal__heading {
        gap: 0.24rem;
    }

    .budget-modal__subtitle {
        font-size: 0.86rem;
        line-height: 1.42;
    }

    .budget-filter-group {
        gap: 0.58rem;
        padding: 0.82rem;
    }

    .budget-filter-checks,
    .budget-filter-categories {
        gap: 0.42rem;
    }

    .budget-filter-check {
        gap: 0.6rem;
        padding: 0.62rem 0.68rem;
    }

    .budget-detail-summary {
        padding: 0.76rem 0.82rem;
        gap: 0.42rem;
    }

    .budget-entry-modal .profile__textarea,
    .budget-detail-modal .profile__textarea {
        min-height: 96px;
    }

    .budget-entry-modal .profile-modal__footer,
    .budget-total-modal .profile-modal__footer,
    .budget-delete-modal .profile-modal__footer,
    .budget-clear-modal .profile-modal__footer,
    .budget-filter-modal .profile-modal__footer {
        padding: 0.68rem 0.9rem;
        gap: 0.32rem;
    }

    .budget-active-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.3rem;
        padding: 0.58rem 0.62rem;
        margin-bottom: 0.55rem;
    }

    .budget-active-filters__copy {
        gap: 0.06rem;
    }

    .budget-active-filters__count {
        font-size: 1.08rem;
        line-height: 1.05;
    }

    .budget-active-filters__chips {
        grid-column: 1 / -1;
        width: 100%;
        flex: 0 0 auto;
        gap: 0.24rem;
    }

    .budget-active-filters__clear {
        align-self: start;
        justify-self: end;
        width: auto;
        padding-inline: 0.52rem;
        min-height: 34px;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }

    .budget-chip {
        padding: 0.24rem 0.42rem;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }

    .budget-expense {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        gap: 0.58rem;
        padding: 0.62rem 0.68rem;
        align-items: center;
    }

    .budget-expense__status-group {
        width: 62px;
        padding: 0.12rem;
    }

    .budget-expense__status-option {
        height: 23px;
        font-size: 0.74rem;
    }

    .budget-expense__sidebar {
        min-width: 0;
    }

    .budget-expense__toolbar {
        gap: 0.26rem;
    }

    .budget-expense__content {
        display: block;
    }

    .budget-expense__title-row {
        gap: 0.24rem;
        align-items: center;
    }

    .budget-expense__title {
        font-size: 1.04rem;
        line-height: 1.1;
        flex-basis: 100%;
    }

    .budget-expense__content .budget-chip {
        width: auto;
        justify-content: center;
        padding: 0.18rem 0.28rem;
        font-size: 0.48rem;
        letter-spacing: 0.06em;
    }

    .budget-expense__amount-value {
        font-size: 0.88rem;
    }

    .budget-expense__actions {
        display: flex;
        width: auto;
        gap: 0.22rem;
        flex-wrap: nowrap;
    }

    .budget-expense__action {
        width: 30px;
        min-width: 30px;
        height: 30px;
        padding: 0;
        font-size: 0;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .budget-expense__action i {
        display: block;
        font-size: 0.76rem;
        margin: 0;
        line-height: 1;
    }

    .budget-filter-modal .profile-modal__dialog,
    .budget-entry-modal .profile-modal__dialog,
    .budget-total-modal .profile-modal__dialog,
    .budget-delete-modal .profile-modal__dialog,
    .budget-clear-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 24px));
    }

    .budget-entry-modal .profile-modal__footer .profile__button,
    .budget-total-modal .profile-modal__footer .profile__button,
    .budget-delete-modal .profile-modal__footer .profile__button,
    .budget-clear-modal .profile-modal__footer .profile__button,
    .budget-filter-modal .profile-modal__footer .profile__button {
        width: 100%;
        min-height: 38px;
        padding: 0.48rem 0.7rem;
        font-size: 0.64rem;
    }
}

@media screen and (max-width: 540px) {
    .budget-chip,
    .budget-overview__legend-item {
        width: 100%;
        justify-content: center;
    }

    .budget-active-filters__chips .budget-chip,
    .budget-expense__content .budget-chip,
    .budget-progress__legend .budget-overview__legend-item {
        width: auto;
    }

    .budget-progress-stat__icon {
        display: none;
    }

    .budget-progress-stat {
        grid-template-columns: 1fr;
        gap: 0.12rem;
        padding: 0.34rem 0.32rem;
    }

    .budget-mobile-dock {
        grid-template-columns: 98px minmax(0, 1fr);
        gap: 0.32rem;
        width: min(calc(100vw - 20px), 300px);
        max-width: calc(100vw - 20px);
        padding: 0.32rem;
    }

    .budget-mobile-dock__button {
        min-height: 38px;
        padding: 0.48rem 0.56rem;
        font-size: 0.62rem;
    }

    .budget-filter-modal,
    .budget-entry-modal,
    .budget-total-modal,
    .budget-delete-modal,
    .budget-clear-modal {
        padding: 8px;
    }

    .budget-filter-modal .profile-modal__dialog,
    .budget-entry-modal .profile-modal__dialog,
    .budget-total-modal .profile-modal__dialog,
    .budget-delete-modal .profile-modal__dialog,
    .budget-clear-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 16px));
        max-height: min(calc(100dvh - 16px), 700px);
    }

    .budget-filter-modal .profile-modal__header,
    .budget-entry-modal .profile-modal__header,
    .budget-total-modal .profile-modal__header,
    .budget-delete-modal .profile-modal__header,
    .budget-clear-modal .profile-modal__header {
        padding: 0.72rem 3.2rem 0.72rem 0.78rem;
    }

    .budget-filter-modal .profile-modal__body,
    .budget-entry-modal .profile-modal__body,
    .budget-total-modal .profile-modal__body,
    .budget-delete-modal .profile-modal__body,
    .budget-clear-modal .profile-modal__body {
        padding: 0.64rem 0.78rem 0.78rem;
    }

    .budget-filter-group {
        padding: 0.72rem;
        gap: 0.48rem;
    }

    .budget-filter-check {
        gap: 0.52rem;
        padding: 0.56rem 0.6rem;
    }

    .budget-filter-group__head h5 {
        font-size: 0.94rem;
    }

    .budget-filter-check__label {
        font-size: 0.92rem;
    }

    .budget-preset__button {
        gap: 0.52rem;
        padding: 0.68rem 0.72rem;
    }

    .budget-preset__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 1.2rem;
    }

    .budget-preset__content {
        gap: 0.08rem;
    }

    .budget-preset__content strong {
        font-size: 0.82rem;
    }

    .budget-preset__content span {
        font-size: 0.68rem;
        line-height: 1.28;
    }

    .budget-entry-modal .profile__textarea,
    .budget-detail-modal .profile__textarea {
        min-height: 88px;
    }

    .budget-entry-modal .profile-modal__footer,
    .budget-total-modal .profile-modal__footer,
    .budget-delete-modal .profile-modal__footer,
    .budget-clear-modal .profile-modal__footer,
    .budget-filter-modal .profile-modal__footer {
        padding: 0.62rem 0.78rem;
        gap: 0.28rem;
    }

    .budget-entry-modal .profile-modal__footer .profile__button,
    .budget-total-modal .profile-modal__footer .profile__button,
    .budget-delete-modal .profile-modal__footer .profile__button,
    .budget-clear-modal .profile-modal__footer .profile__button,
    .budget-filter-modal .profile-modal__footer .profile__button {
        min-height: 36px;
        padding: 0.44rem 0.62rem;
        font-size: 0.62rem;
    }

    .budget-board__actions .profile__button {
        min-height: 34px;
        padding: 0.4rem 0.5rem;
        font-size: 0.56rem;
    }

    .budget-active-filters {
        padding: 0.52rem 0.56rem;
        gap: 0.24rem;
    }

    .budget-active-filters__count {
        font-size: 0.96rem;
    }

    .budget-expense {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 0.34rem;
        padding: 0.5rem 0.52rem;
    }

    .budget-expense__status-group {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        width: 30px;
        padding: 0.08rem;
        align-self: start;
    }

    .budget-expense__status-group::before {
        top: 0.08rem;
        right: 0.08rem;
        bottom: auto;
        left: 0.08rem;
        width: auto;
        height: calc(50% - 0.08rem);
    }

    .budget-expense__status-group--completed::before {
        transform: translateY(0);
    }

    .budget-expense__status-group--pending::before {
        transform: translateY(100%);
    }

    .budget-expense__status-option {
        height: 18px;
        font-size: 0.62rem;
    }

    .budget-expense__toolbar {
        display: grid;
        justify-items: end;
        gap: 0.18rem;
    }

    .budget-expense__title {
        font-size: 0.9rem;
    }

    .budget-expense__status-chip {
        display: none;
    }

    .budget-expense__amount {
        width: 100%;
        justify-content: flex-end;
    }

    .budget-expense__amount-value {
        font-size: 0.74rem;
    }

    .budget-expense__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .budget-expense__action {
        width: 26px;
        min-width: 26px;
        height: 26px;
    }

    .budget-expense__action i {
        font-size: 0.7rem;
    }

    .budget-expense__title-row {
        align-items: flex-start;
        flex-direction: row;
    }
}

/* ============================================================
   TASKS PAGE
   ============================================================ */
body.tasks-page {
    --budget-border: rgba(86, 179, 194, 0.26);
    --tasks-border: rgba(86, 179, 194, 0.2);
    --tasks-summary-sticky-offset: calc(var(--header-offset) + 16px);
    --tasks-floating-dock-bottom: calc(16px + env(safe-area-inset-bottom));
}

body.tasks-page main {
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

.tasks-layout {
    display: grid;
    gap: var(--space-lg);
}

.tasks-overview,
.tasks-board {
    border: 1px solid var(--tasks-border);
}

.tasks-overview {
    position: sticky;
    top: var(--tasks-summary-sticky-offset);
    z-index: calc(var(--z-sticky) - 1);
    align-self: start;
    background: #FFFFFF;
    padding: 0.82rem 0.92rem;
    gap: 0.64rem;
}

.tasks-overview__eyebrow {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 0.28rem 0.6rem;
    border: 1px solid rgba(86, 179, 194, 0.18);
    background: rgba(86, 179, 194, 0.08);
    color: #005359;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tasks-overview__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.tasks-overview__metric {
    display: grid;
    gap: 0.18rem;
    padding: 0.75rem 0.82rem;
    border: 1px solid rgba(86, 179, 194, 0.14);
    background: #FFFFFF;
}

.tasks-overview__metric-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.58);
}

.tasks-overview__metric-value {
    color: #005359;
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1;
}

.tasks-progress {
    margin-top: 0;
    border: 0;
    background: transparent;
    padding: 0;
    gap: 0;
    width: 100%;
}

.tasks-progress__track {
    position: relative;
    width: 100%;
    height: 16px;
    padding: 2px;
    border: 1px solid rgba(86, 179, 194, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 22px rgba(0, 83, 89, 0.06);
    overflow: hidden;
}

.tasks-progress__fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #56B3C2 0%, #61C3C1 48%, #7EDCA7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 8px 18px rgba(86, 179, 194, 0.28);
    transition: width 240ms ease;
}

.tasks-progress__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.tasks-progress.is-complete .tasks-progress__fill {
    background: linear-gradient(90deg, #45B690 0%, #7EDCA7 100%);
}

.tasks-overview__summary {
    margin: 0;
    color: #005359;
    font-size: 1rem;
    line-height: 1.45;
}

.tasks-overview__total {
    color: rgba(0, 83, 89, 0.58);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tasks-overview__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tasks-summary-compact {
    display: none;
}

.tasks-summary-compact__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.tasks-summary-compact__metric {
    display: grid;
    gap: 0.04rem;
}

.tasks-summary-compact__label {
    font-size: 0.58rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.56);
}

.tasks-summary-compact__value {
    color: #005359;
    font-size: clamp(0.98rem, 5vw, 1.24rem);
    line-height: 1;
}

.tasks-summary-compact__progress {
    display: grid;
}

.tasks-summary-compact__track {
    position: relative;
    width: 100%;
    height: 10px;
    padding: 2px;
    border: 1px solid rgba(86, 179, 194, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 245, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 8px 18px rgba(0, 83, 89, 0.05);
    overflow: hidden;
}

.tasks-summary-compact__fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #56B3C2 0%, #61C3C1 48%, #7EDCA7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 6px 14px rgba(86, 179, 194, 0.2);
    transition: width 240ms ease;
}

.tasks-summary-compact__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.tasks-summary-compact.is-complete .tasks-summary-compact__fill,
.tasks-summary-compact__progress.is-complete .tasks-summary-compact__fill {
    background: linear-gradient(90deg, #45B690 0%, #7EDCA7 100%);
}

.tasks-summary-compact__summary {
    margin: 0;
    color: rgba(0, 83, 89, 0.76);
    font-size: 0.7rem;
    line-height: 1.2;
}

.tasks-board {
    background: #FFFFFF;
}

.tasks-board__header {
    gap: 0.9rem;
    padding: 0;
}

.tasks-board__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

.tasks-board__actions-main,
.tasks-board__actions-danger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tasks-board__actions-danger {
    margin-left: auto;
}

.tasks-board__actions-main {
    min-width: 0;
}

.tasks-board__actions .profile__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.tasks-board__actions-danger .profile__button {
    justify-content: flex-end;
}

.tasks-mobile-dock {
    position: fixed;
    left: 50%;
    bottom: var(--tasks-floating-dock-bottom);
    z-index: calc(var(--z-fixed) - 1);
    width: max-content;
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.4rem;
    border: 1px solid rgba(86, 179, 194, 0.24);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 36px rgba(0, 83, 89, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px);
    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 220ms ease;
    will-change: transform, opacity;
}

.tasks-mobile-dock.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.tasks-mobile-dock__button {
    min-height: 40px;
    justify-content: center;
    padding: 0.52rem 0.8rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 24px rgba(0, 83, 89, 0.08);
}

.tasks-mobile-dock__button--secondary {
    min-width: 108px;
}

.tasks-active-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.95rem 1rem;
    border: 1px solid var(--tasks-border);
    background: rgba(255, 255, 255, 0.88);
}

.tasks-active-filters__copy {
    display: grid;
    gap: 0.12rem;
}

.tasks-active-filters__label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 83, 89, 0.58);
}

.tasks-active-filters__count {
    color: #005359;
    font-size: var(--font-size-lg);
}

.tasks-active-filters__chips {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 260px;
}

.tasks-active-filters__clear {
    width: auto;
}

.tasks-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.62rem;
    border: 1px solid rgba(86, 179, 194, 0.22);
    background: rgba(255, 255, 255, 0.96);
    color: rgba(0, 83, 89, 0.76);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.tasks-chip i {
    font-size: 0.92em;
    line-height: 1;
}

.tasks-chip--muted {
    color: rgba(0, 83, 89, 0.52);
}

.tasks-chip--soft {
    border-color: rgba(86, 179, 194, 0.18);
    background: rgba(86, 179, 194, 0.08);
    color: #005359;
}

.tasks-chip--search {
    border-color: rgba(86, 179, 194, 0.3);
    background: rgba(86, 179, 194, 0.12);
    color: #005359;
}

.tasks-chip--success {
    border-color: rgba(126, 220, 167, 0.42);
    background: rgba(126, 220, 167, 0.16);
    color: #0a6a4d;
}

.tasks-chip--warning {
    border-color: rgba(205, 163, 94, 0.34);
    background: rgba(244, 225, 190, 0.38);
    color: #7b5a26;
}

.tasks-chip--category {
    border-color: rgba(0, 83, 89, 0.14);
    background: rgba(0, 83, 89, 0.05);
    color: #005359;
}

.tasks-list {
    display: grid;
    gap: 0.82rem;
}

.tasks-group {
    display: grid;
    gap: 0.36rem;
}

.tasks-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tasks-group__title {
    color: #005359;
    font-size: 1.1rem;
}

.tasks-group__count {
    color: rgba(0, 83, 89, 0.62);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tasks-group__items {
    border: 1px solid rgba(200, 219, 224, 0.96);
    background: #FFFFFF;
}

.task-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.54rem;
    align-items: center;
    padding: 0.54rem 0.72rem;
    border-bottom: 1px solid rgba(200, 219, 224, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 253, 0.96));
    box-shadow: inset 3px 0 0 rgba(200, 219, 224, 0.7);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.task-item:last-child {
    border-bottom: 0;
}

.task-item.is-pending {
    border-color: rgba(205, 163, 94, 0.28);
    box-shadow: inset 3px 0 0 rgba(205, 163, 94, 0.7);
}

.task-item.is-completed {
    border-color: rgba(126, 220, 167, 0.34);
    background: linear-gradient(180deg, rgba(247, 252, 253, 0.8), rgba(255, 255, 255, 0.94));
    box-shadow: inset 3px 0 0 rgba(126, 220, 167, 0.72);
}

.task-item__status,
.task-item__body,
.task-item__delete {
    padding: 0;
    font: inherit;
}

.task-item__status,
.task-item__delete {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.task-item__body,
.task-item__delete {
    border: 0;
    background: transparent;
}

.task-item__status {
    border: 1px solid var(--budget-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.98));
    color: rgba(0, 83, 89, 0.38);
    box-shadow: 0 8px 16px rgba(0, 83, 89, 0.04);
}

.task-item__status i,
.task-item__delete i {
    font-size: 1rem;
    line-height: 1;
}

.task-item__status:hover {
    color: rgba(0, 83, 89, 0.62);
    border-color: rgba(86, 179, 194, 0.34);
}

.task-item__delete {
    color: #E66491;
}

.task-item__delete:hover {
    color: #c74975;
}

.task-item__body {
    min-width: 0;
    display: grid;
    gap: 0.22rem;
    text-align: left;
    cursor: pointer;
}

.task-item__title {
    color: rgba(0, 83, 89, 0.9);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.18;
}

.task-item__description {
    color: rgba(0, 83, 89, 0.66);
    font-size: 0.86rem;
    line-height: 1.45;
}

.task-item__meta {
    display: flex;
    align-items: center;
    gap: 0.24rem;
    flex-wrap: wrap;
}

.task-item .tasks-chip {
    padding: 0.16rem 0.38rem;
    border-color: rgba(86, 179, 194, 0.16);
    background: rgba(86, 179, 194, 0.04);
    color: rgba(0, 83, 89, 0.64);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
}

.task-item .tasks-chip i {
    opacity: 0.72;
}

.task-item.is-pending .task-item__status {
    border-color: rgba(205, 163, 94, 0.28);
    color: #9b6a25;
    background: linear-gradient(135deg, rgba(244, 225, 190, 0.22), rgba(255, 255, 255, 0.98));
    box-shadow: 0 8px 16px rgba(205, 163, 94, 0.06);
}

.task-item.is-completed .task-item__status {
    border-color: rgba(126, 220, 167, 0.42);
    color: #0a6a4d;
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.12), rgba(126, 220, 167, 0.24));
    box-shadow: 0 8px 16px rgba(53, 181, 138, 0.1);
}

.task-item.is-completed .task-item__title {
    color: rgba(0, 83, 89, 0.56);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 83, 89, 0.34);
    text-decoration-thickness: 1px;
}

.task-item.is-completed .task-item__description,
.task-item.is-completed .task-item__delete,
.task-item.is-completed .task-item__meta {
    opacity: 0.74;
}

.task-item.is-completed .task-item__delete:hover {
    opacity: 1;
}

.tasks-empty {
    margin-top: var(--space-sm);
    padding: 2rem 1rem;
    border: 1px dashed rgba(86, 179, 194, 0.32);
    background: rgba(248, 252, 253, 0.98);
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.75rem;
}

.tasks-empty__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tasks-border);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.12), rgba(126, 220, 167, 0.18));
    color: #005359;
    font-size: 1.35rem;
}

.tasks-empty__title {
    color: #005359;
    font-size: var(--font-size-xl);
}

.tasks-empty__copy {
    max-width: 48ch;
    color: rgba(0, 83, 89, 0.66);
    line-height: 1.5;
}

.tasks-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.tasks-entry-modal .profile-modal__dialog {
    width: min(720px, 100%);
}

.tasks-detail-modal .profile-modal__dialog {
    width: min(920px, 96vw);
}

.tasks-delete-modal .profile-modal__dialog,
.tasks-clear-modal .profile-modal__dialog {
    width: min(520px, 100%);
}

.tasks-entry-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.tasks-entry-modal .profile__textarea,
.tasks-detail-modal .profile__textarea {
    min-height: 112px;
}

.tasks-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tasks-detail-toolbar__toggle,
.tasks-detail-toolbar__delete {
    border: 1px solid rgba(86, 179, 194, 0.24);
    background: #FFFFFF;
    color: #005359;
}

.tasks-detail-toolbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.68rem 0.9rem;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.tasks-detail-toolbar__toggle i {
    font-size: 1.15rem;
    line-height: 1;
}

.tasks-detail-toolbar__toggle:hover {
    border-color: rgba(86, 179, 194, 0.42);
    color: #59B7C0;
}

.tasks-detail-toolbar__toggle.is-completed {
    border-color: rgba(126, 220, 167, 0.42);
    background: linear-gradient(135deg, rgba(86, 179, 194, 0.1), rgba(126, 220, 167, 0.22));
    color: #0a6a4d;
}

.tasks-detail-toolbar__delete {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #E66491;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tasks-detail-toolbar__delete:hover {
    border-color: rgba(230, 100, 145, 0.42);
    color: #c74975;
}

@media (min-width: 1024px) {
    .tasks-layout {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 767px) {
    body.tasks-page {
        --tasks-summary-sticky-offset: calc(var(--header-offset) + 8px);
        --tasks-floating-dock-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .tasks-page .profile-hero__actions .profile__button--with-icon {
        justify-content: center;
    }

    .tasks-overview {
        display: none;
    }

    .tasks-summary-compact {
        display: grid;
        position: sticky;
        top: var(--tasks-summary-sticky-offset);
        z-index: calc(var(--z-sticky) - 1);
        align-self: start;
        padding: 0.56rem 0.62rem;
        gap: 0.34rem;
        border: 1px solid var(--tasks-border);
        background: #FFFFFF;
    }

    .tasks-overview,
    .tasks-board {
        padding: 0.82rem;
        gap: 0.7rem;
    }

    .tasks-board__header {
        gap: 0.4rem;
    }

    .tasks-board {
        padding: 0.82rem;
        gap: 0.7rem;
    }

    .tasks-board .profile__card-subtitle {
        display: none;
    }

    .tasks-board__actions {
        width: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        justify-content: flex-start;
    }

    .tasks-board__actions-main,
    .tasks-board__actions-danger {
        gap: 0.3rem;
    }

    .tasks-board__actions-danger {
        margin-left: 0;
    }

    .tasks-board__actions [data-task-modal-open="filter"],
    .tasks-board__actions [data-task-modal-open="add"] {
        display: none;
    }

    .tasks-board__actions .profile__button {
        width: auto;
        justify-content: center;
        min-height: 36px;
        padding: 0.45rem 0.58rem;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .tasks-mobile-dock {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.36rem;
        width: min(calc(100vw - 24px), 320px);
        max-width: calc(100vw - 24px);
        padding: 0.36rem;
    }

    .tasks-entry-form__grid {
        grid-template-columns: 1fr;
    }

    .tasks-active-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.32rem;
        padding: 0.58rem 0.62rem;
    }

    .tasks-active-filters__count {
        font-size: 1.08rem;
        line-height: 1.05;
    }

    .tasks-active-filters__chips {
        grid-column: 1 / -1;
        gap: 0.28rem;
    }

    .tasks-active-filters__clear {
        justify-self: end;
    }

    .tasks-chip {
        padding: 0.24rem 0.42rem;
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }

    .tasks-group {
        gap: 0.34rem;
    }

    .tasks-group__title {
        font-size: 0.98rem;
    }

    .tasks-group__count {
        font-size: 0.68rem;
    }

    .task-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.46rem;
        padding: 0.52rem 0.62rem;
    }

    .task-item__status,
    .task-item__delete {
        width: 26px;
        height: 26px;
    }

    .task-item__status i,
    .task-item__delete i {
        font-size: 0.94rem;
    }

    .task-item__title {
        font-size: 0.9rem;
    }

    .task-item__description {
        font-size: 0.78rem;
    }

    .tasks-entry-modal .profile-modal__dialog,
    .tasks-detail-modal .profile-modal__dialog,
    .tasks-delete-modal .profile-modal__dialog,
    .tasks-clear-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 24px));
        max-height: min(calc(100dvh - 24px), 720px);
    }

    .tasks-entry-modal .profile-modal__header,
    .tasks-detail-modal .profile-modal__header,
    .tasks-delete-modal .profile-modal__header,
    .tasks-clear-modal .profile-modal__header {
        padding: 0.8rem 3.6rem 0.8rem 0.9rem;
    }

    .tasks-entry-modal .profile-modal__body,
    .tasks-detail-modal .profile-modal__body,
    .tasks-delete-modal .profile-modal__body,
    .tasks-clear-modal .profile-modal__body {
        padding: 0.74rem 0.9rem 0.9rem;
    }

    .tasks-entry-modal .profile-modal__footer,
    .tasks-detail-modal .profile-modal__footer,
    .tasks-delete-modal .profile-modal__footer,
    .tasks-clear-modal .profile-modal__footer {
        padding: 0.68rem 0.9rem;
        gap: 0.32rem;
    }

    .tasks-entry-modal .profile-modal__footer .profile__button,
    .tasks-detail-modal .profile-modal__footer .profile__button,
    .tasks-delete-modal .profile-modal__footer .profile__button,
    .tasks-clear-modal .profile-modal__footer .profile__button {
        width: 100%;
        min-height: 38px;
        padding: 0.48rem 0.7rem;
        font-size: 0.64rem;
    }

    .tasks-detail-toolbar {
        align-items: stretch;
    }

    .tasks-detail-toolbar__toggle {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.58rem 0.68rem;
        font-size: 0.68rem;
    }

    .tasks-detail-toolbar__delete {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

}

@media (max-width: 540px) {
    .tasks-page .profile__subtitle {
        line-height: 1.45;
    }

    .tasks-chip {
        width: 100%;
        justify-content: center;
    }

    .task-item__meta .tasks-chip,
    .tasks-active-filters__chips .tasks-chip,
    .tasks-overview__meta .tasks-chip {
        width: auto;
    }

    .tasks-entry-modal .profile-modal__dialog,
    .tasks-detail-modal .profile-modal__dialog,
    .tasks-delete-modal .profile-modal__dialog,
    .tasks-clear-modal .profile-modal__dialog {
        width: min(100%, calc(100vw - 16px));
        max-height: min(calc(100dvh - 16px), 700px);
    }

    .tasks-entry-modal .profile-modal__header,
    .tasks-detail-modal .profile-modal__header,
    .tasks-delete-modal .profile-modal__header,
    .tasks-clear-modal .profile-modal__header {
        padding: 0.72rem 3.2rem 0.72rem 0.78rem;
    }

    .tasks-entry-modal .profile-modal__body,
    .tasks-detail-modal .profile-modal__body,
    .tasks-delete-modal .profile-modal__body,
    .tasks-clear-modal .profile-modal__body {
        padding: 0.64rem 0.78rem 0.78rem;
    }

    .tasks-entry-modal .profile-modal__footer,
    .tasks-detail-modal .profile-modal__footer,
    .tasks-delete-modal .profile-modal__footer,
    .tasks-clear-modal .profile-modal__footer {
        padding: 0.62rem 0.78rem;
        gap: 0.28rem;
    }

    .task-item {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 0.38rem;
        padding: 0.48rem 0.54rem;
    }

    .task-item__title {
        font-size: 0.86rem;
    }

    .task-item__description {
        font-size: 0.74rem;
    }
}

/* ── Evitar zoom automático en iOS/Android al hacer foco en inputs ────────────
   El browser hace zoom cuando el font-size del input es < 16px.
   Se fuerza 16px solo en mobile; en desktop el tamaño visual no cambia. */
@media (max-width: 768px) {
    input,
    select,
    textarea,
    .profile__input,
    .profile__select,
    .profile__textarea {
        font-size: 16px !important;
    }
}