/**
 * theme.css - Tokens de color (claro/oscuro) y componentes propios del sitio.
 * Los tokens se consumen desde tailwind.config como rgb(var(--c-*) / <alpha>).
 */

:root {
    color-scheme: light;
    --c-background: 255 255 255;
    --c-surface: 250 250 250;
    --c-surface-elevated: 255 255 255;
    --c-surface-hover: 245 241 230;
    --c-border: 230 226 216;
    --c-text: 26 26 26;
    --c-muted: 110 110 110;
    --c-primary: 26 26 26;
    --c-primary-hover: 51 51 51;
    --c-on-primary: 255 255 255;
    --c-credit: 138 109 46;
    --c-on-credit: 255 255 255;
    --c-logo: 192 155 82;
    --c-highlight: 230 206 91;
    --c-on-highlight: 26 26 26;
    --c-save: 21 128 61;
    --c-save-bg: 236 253 244;
    --c-error: 179 38 30;
    --c-error-bg: 251 234 233;
}

html.dark {
    color-scheme: dark;
    --c-background: 12 12 13;
    --c-surface: 22 22 24;
    --c-surface-elevated: 28 28 31;
    --c-surface-hover: 42 38 28;
    --c-border: 47 45 40;
    --c-text: 246 244 239;
    --c-muted: 165 161 150;
    --c-primary: 214 176 96;
    --c-primary-hover: 230 196 120;
    --c-on-primary: 20 17 10;
    --c-credit: 226 190 108;
    --c-on-credit: 20 17 10;
    --c-logo: 226 190 108;
    --c-highlight: 230 206 91;
    --c-on-highlight: 26 26 26;
    --c-save: 124 214 143;
    --c-save-bg: 22 48 30;
    --c-error: 242 139 130;
    --c-error-bg: 56 26 24;
}

body {
    transition: background-color .25s ease, color .25s ease;
}

/* ----- Cards con giro (catálogo de servicios) ----- */
.flip-card {
    perspective: 1600px;
    outline: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

@media (hover: hover) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

.flip-card:focus-visible .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border-radius: 1rem;
}

.flip-face-back {
    transform: rotateY(180deg);
}

.flip-card:focus-visible .flip-face {
    box-shadow: 0 0 0 2px rgb(var(--c-credit));
}

/* Arte de la cara frontal: degradado de marca + patrón sutil */
.service-art {
    background-image:
        radial-gradient(120% 90% at 80% 0%, rgb(var(--art-a) / .85), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, rgb(var(--art-b) / .75), transparent 55%),
        linear-gradient(160deg, rgb(var(--c-text) / .92), rgb(var(--c-text) / .65));
}

html.dark .service-art {
    background-image:
        radial-gradient(120% 90% at 80% 0%, rgb(var(--art-a) / .6), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, rgb(var(--art-b) / .5), transparent 55%),
        linear-gradient(160deg, rgb(10 10 11 / .95), rgb(26 24 18 / .9));
}

.service-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .15) 55%, transparent 100%);
}

.service-art > * {
    position: relative;
    z-index: 1;
}

.service-art-icon {
    position: absolute;
    right: -1.5rem;
    top: 1rem;
    font-size: 11rem !important;
    line-height: 1;
    color: rgb(255 255 255 / .12);
    z-index: 0;
}

/* ----- Detalles finos ----- */
.uve-strike {
    text-decoration: line-through;
    text-decoration-color: rgb(var(--c-error));
    text-decoration-thickness: 2px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ----- Selección de set y extras (Reservar Set) ----- */
.res-set-card:has(input:checked),
.res-extra-card:has(input:checked) {
    border-color: rgb(var(--c-credit));
    background-color: rgb(var(--c-credit) / .07);
}

.res-set-card:has(input:checked) .res-set-check {
    opacity: 1;
}

.res-set-card:focus-within,
.res-extra-card:focus-within {
    box-shadow: 0 0 0 2px rgb(var(--c-credit) / .35);
}