/* ==========================================================================
   Identidad de marca Emerinails - se carga solo desde el layout "demo".
   Todo va colgado de body.marca para no tocar el resto del sitio.
   Referencia: identidad-de-marca-emeri.html (paleta, tipografia, proporciones)
   ========================================================================== */

:root {
    /* Marca */
    --color-primary: #EE3A72;
    --color-primary-strong: #C8174F;
    --color-primary-hover: #A8123F;
    --color-secondary: #FB9378;
    --color-soft-pink: #FBC9D6;
    --color-soft-peach: #FFDCCF;
    --gradient-brand: linear-gradient(135deg, #EE3A72 0%, #F4687A 50%, #FB9378 100%);

    /* Neutros */
    --color-text: #3A1428;
    --color-text-light: #7A5266;
    --color-background: #FFF6F2;
    --color-line: #F1DCD8;

    /* Semanticos */
    --color-success: #1F7A52;
    --color-warning: #9A5B00;
    --color-error: #C0262D;

    /* Tipografia */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'DM Sans', system-ui, sans-serif;

    --color-naranja: #FFA16B;
    --color-naranja-hover: #FF8F52;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    --radius-card: 20px;
    --shadow-card: 0 1px 0 rgba(58, 20, 40, .08), 0 10px 28px rgba(58, 20, 40, .07);
}

/* ---------- Base ---------- */
html body.marca {
    background-color: var(--color-background) !important;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
}

body.marca h1,
body.marca h2,
body.marca h3,
body.marca h4,
body.marca h5,
body.marca .marca-display {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    color: var(--color-text);
    line-height: 1.15;
}

body.marca :where(a:not(.btn):not(.marca-btn)) {
    color: var(--color-primary-strong);
}

body.marca :where(a:not(.btn):not(.marca-btn)):hover {
    color: var(--color-primary-hover);
}

body.marca .text-muted {
    color: var(--color-text-light) !important;
}

body.marca :focus-visible {
    outline: 2px solid var(--color-primary-strong);
    outline-offset: 2px;
}

body.marca footer,
body.marca footer a {
    color: var(--color-text-light) !important;
}

/* ---------- Hero con degrade de marca ---------- */
.marca-hero {
    position: relative;
    /* background: var(--gradient-brand); */
    color: #fff;
    text-align: center;
    min-height: 140px;
    /* padding: 36px 0 72px; */
    margin-bottom: 76px;
}

.marca-logo {
    position: absolute;
    z-index: 100;
    left: 16px;
    bottom: -60px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff url('/themes/img/logo_nuevo.jpg') center / cover no-repeat;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 10px 28px rgba(58, 20, 40, .28);
}

@media (min-width: 576px) { .marca-logo { left: calc(50% - 258px); } }
@media (min-width: 768px) { .marca-logo { left: calc(50% - 348px); } }
@media (min-width: 992px) { .marca-logo { left: calc(50% - 468px); } }
@media (min-width: 1200px) { .marca-logo { left: calc(50% - 558px); } }
@media (min-width: 1400px) { .marca-logo { left: calc(50% - 648px); } }

.marca-spark {
    letter-spacing: .5em;
    font-size: 20px;
    color: #fff;
    opacity: .9;
    margin-bottom: 4px;
}

.marca-spark-pie {
    color: var(--color-secondary);
    opacity: 1;
}

/* ---------- Tarjetas ---------- */
body.marca .marca-card,
body.marca .card {
    background: #fff;
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
}

body.marca .card-header {
    background: var(--color-soft-peach);
    border-bottom: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-weight: 700;
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
}

body.marca .card-footer {
    background: var(--color-background);
    border-top: 1px solid var(--color-line);
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
}

/* ---------- Botones ---------- */
body.marca .marca-btn,
body.marca .demo-btn-primario {
    font-weight: 700;
    border: 2px solid transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}

body.marca .marca-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}

body.marca .marca-btn-primario,
body.marca .demo-btn-primario,
body.marca .btn-primary {
    background-color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: #fff;
}

body.marca .marca-btn-primario:hover,
body.marca .demo-btn-primario:hover,
body.marca .btn-primary:hover,
body.marca .demo-btn-primario:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

body.marca .demo-btn-primario:disabled,
body.marca .btn-primary:disabled {
    background-color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: #fff;
    opacity: .5;
}

body.marca .marca-btn-contorno {
    background: transparent;
    border-color: var(--color-primary-strong);
    color: var(--color-primary-strong);
}

body.marca .marca-btn-contorno:hover {
    background: var(--color-soft-peach);
    color: var(--color-primary-strong);
}

body.marca .marca-btn-suave {
    background: var(--color-soft-pink);
    color: var(--color-text);
}

body.marca .marca-btn-suave:hover {
    background: var(--color-soft-peach);
    color: var(--color-text);
}

body.marca .btn-instagram,
body.marca .btn-instagram:hover {
    background: var(--color-text);
    animation: none;
    color: #fff;
}

body.marca .btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-text-light);
    --bs-btn-hover-bg: var(--color-soft-peach);
    --bs-btn-hover-border-color: var(--color-text-light);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-active-bg: var(--color-soft-pink);
    --bs-btn-active-border-color: var(--color-text-light);
    --bs-btn-active-color: var(--color-text);
    background-color: #fff;
    border-color: var(--color-text-light);
    color: var(--color-text);
}

body.marca .btn-outline-secondary:hover {
    background-color: var(--color-soft-peach);
    color: var(--color-text);
}

body.marca .btn-link {
    color: var(--color-primary-strong);
}

/* ---------- Offcanvas del turno ---------- */
body.marca .offcanvas {
    background: var(--color-background);
    color: var(--color-text);
}

body.marca .marca-oc-header {
    background: var(--color-soft-peach);
    border-bottom: 1px solid var(--color-line);
}

body.marca .marca-oc-footer {
    background: var(--color-soft-peach);
    border-top: 1px solid var(--color-line);
}

body.marca .offcanvas-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-weight: 700;
    font-size: 20px !important;
    color: var(--color-text);
}

body.marca .demo-pasotxt {
    color: var(--color-text-light);
}

.demo-offcanvas-turno {
    width: 90% !important;
    max-width: 1600px;
}

.demo-offcanvas-turno .demo-sticky {
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.demo-paso0 {
    max-width: 480px;
}

.demo-bloque {
    display: block;
}

.demo-flex {
    display: flex;
}

/* Stepper (escritorio) */
.demo-stepper li {
    color: var(--color-text-light);
    padding-bottom: 2px;
}

.demo-stepper li.activo {
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary-strong);
}

.demo-stepper li.hecho {
    color: var(--color-primary-strong);
}

/* Profesionales */
body.marca .gray:hover {
    border-bottom-color: var(--color-soft-pink);
}

body.marca .vendedor:not(.gray) {
    border-bottom-color: transparent;
}

#offcanvas-turno .vendedor:not(.gray) .rounded-circle {
    outline: 3px solid var(--color-primary-strong);
    outline-offset: 2px;
}

#offcanvas-turno .vendedor input:focus-visible + label {
    outline: 2px solid var(--color-primary-strong);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Categorias y servicios */
.demo-categoria {
    color: var(--color-primary-strong);
    border-bottom: 1px solid var(--color-soft-pink);
    position: sticky;
    top: -1rem;
    z-index: 10;
    background: var(--color-background);
    padding: .5rem .25rem;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-weight: 700;
}

.demo-servicio label {
    display: block;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 16px;
    padding: .75rem .75rem .75rem 2.25rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.demo-servicio label:hover {
    border-color: var(--color-soft-pink);
}

.demo-servicio label:has(.form-check-input:checked) {
    border-color: var(--color-primary-strong);
    background-color: rgba(251, 201, 214, .35);
}

.demo-servicio .form-check-input {
    border-radius: 50%;
}

.demo-servicio .form-check-input:focus-visible {
    outline: 2px solid var(--color-primary-strong);
    outline-offset: 2px;
}

.demo-servicio .servicio-nombre {
    font-weight: 500;
}

/* Horarios */
#offcanvas-turno .days input[type="radio"] + label {
    border: 1px solid var(--color-soft-pink);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text);
    text-shadow: none;
    padding: 10px 12px;
}

#offcanvas-turno .days input[type="radio"]:not(:checked) + label:hover {
    background: var(--color-soft-peach);
}

#offcanvas-turno .days input[type="radio"]:checked + label {
    background-color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    color: #fff;
    text-shadow: none;
}

#offcanvas-turno .days input[type="radio"]:disabled + label {
    background: var(--color-line);
    color: var(--color-text-light);
}

#offcanvas-turno .days input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--color-primary-strong);
    outline-offset: 2px;
}

.demo-placeholder-calendario {
    border: 2px dashed var(--color-soft-pink);
    border-radius: var(--radius-card);
    color: var(--color-text-light);
    background: rgba(255, 255, 255, .6);
}

/* Calendario (jQuery UI) */
body.marca .ui-datepicker {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 12px;
    font-family: var(--font-body);
    box-shadow: var(--shadow-card);
}

body.marca .ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0;
    color: var(--color-text);
    padding: .4em 0 .6em;
}

body.marca .ui-datepicker .ui-datepicker-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-weight: 700;
    text-transform: capitalize;
}

body.marca .ui-datepicker th {
    color: var(--color-text-light);
    font-weight: 700;
}

body.marca .ui-datepicker td {
    padding: 2px;
}

body.marca .ui-datepicker td .ui-state-default {
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text);
    text-align: center;
    padding: .55em 0;
}

body.marca .ui-datepicker td .ui-state-hover {
    background: var(--color-soft-peach);
}

body.marca .ui-datepicker td .ui-state-highlight {
    box-shadow: inset 0 0 0 2px var(--color-secondary);
    background: transparent;
    color: var(--color-text);
}

body.marca .ui-datepicker td .ui-state-active,
body.marca .ui-datepicker td .ui-state-active.ui-state-hover,
body.marca .ui-datepicker td a.ui-state-active:hover {
    background: var(--color-primary-strong);
    box-shadow: none;
    color: #fff !important;
}

body.marca .ui-datepicker .ui-state-disabled,
body.marca .ui-datepicker .ui-state-disabled .ui-state-default {
    opacity: .35;
}

body.marca .ui-datepicker .ui-datepicker-prev,
body.marca .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

body.marca .ui-datepicker .ui-datepicker-prev:hover,
body.marca .ui-datepicker .ui-datepicker-next:hover {
    background: var(--color-soft-peach);
}

/* ---------- Formularios ---------- */
body.marca .form-control,
body.marca .form-select {
    background-color: #fff;
    border-color: #E8CDD3;
    border-radius: 14px;
    color: var(--color-text);
}

body.marca .form-control:focus,
body.marca .form-select:focus {
    border-color: var(--color-primary-strong);
    box-shadow: 0 0 0 .25rem rgba(200, 23, 79, .18);
}

body.marca .form-floating > label,
body.marca .form-text {
    color: var(--color-text-light);
}

body.marca .input-group-text {
    background: var(--color-soft-peach);
    border-color: #E8CDD3;
    color: var(--color-text);
}

body.marca .form-check-input:checked {
    background-color: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
}

body.marca .form-check-input:focus {
    border-color: var(--color-primary-strong);
    box-shadow: 0 0 0 .25rem rgba(200, 23, 79, .18);
}

body.marca .is-invalid,
body.marca .invalid-feedback {
    border-color: var(--color-error);
    color: var(--color-error);
}

body.marca .form-control.is-invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(192, 38, 45, .18);
}

body.marca .iti__selected-dial-code {
    color: var(--color-text);
}

/* ---------- Estados: siempre color + icono + texto ---------- */
body.marca .alert {
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--color-text);
}

body.marca .alert::before,
body.marca p.text-success::before,
body.marca .card-footer.text-success::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: .5rem;
}

body.marca .alert-warning {
    background: var(--color-soft-peach);
    border-color: #F6C3AE;
}

body.marca .alert-warning::before {
    content: '\f071';
    color: var(--color-warning);
}

body.marca .alert-info {
    background: var(--color-soft-pink);
    border-color: #F5AFC3;
}

body.marca .alert-info::before {
    content: '\f05a';
    color: var(--color-primary-strong);
}

body.marca .alert-danger {
    background: #FDEAEA;
    border-color: #F3B9BC;
}

body.marca .alert-danger::before {
    content: '\f06a';
    color: var(--color-error);
}

body.marca .text-success {
    color: var(--color-success) !important;
}

body.marca p.text-success::before,
body.marca .card-footer.text-success::before {
    content: '\f058';
}

body.marca .badge.bg-success {
    background-color: var(--color-success) !important;
}

/* ---------- Boton naranja (GiftCard) ---------- */
body.marca .marca-btn-naranja {
    background: var(--color-naranja);
    border-color: var(--color-naranja);
    color: var(--color-text);
}

body.marca .marca-btn-naranja:hover {
    background: var(--color-naranja-hover);
    border-color: var(--color-naranja-hover);
    color: var(--color-text);
}

body.marca .marca-btn-whatsapp {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

body.marca .marca-btn-whatsapp:hover {
    background: #186342;
    border-color: #186342;
    color: #fff;
}

body.marca .marca-btn.marca-btn-inline {
    display: inline-block;
    width: auto;
}

body.marca .marca-btn.marca-btn-chico {
    display: inline-block;
    width: auto;
    padding: 8px 18px;
    font-size: 16px;
}

body.marca .marca-btn:active,
body.marca .demo-btn-primario:active,
body.marca .btn-outline-secondary:active {
    transform: scale(0.97);
}

body.marca .btn-outline-secondary {
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}

/* ---------- Barra de paginas internas ---------- */
.marca-barra {
    background: #fff;
    border-bottom: 1px solid var(--color-line);
    padding: 10px 0;
}

.marca-barra-logo {
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff url('/themes/img/logo_nuevo.jpg') center / cover no-repeat;
    box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(58, 20, 40, .18);
}

/* ---------- Paginas internas ---------- */
.marca-pagina {
    min-height: 60vh;
}

body.marca .marca-titulo-pagina {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    margin: 8px 0 20px;
}

body.marca .marca-subtitulo {
    font-size: 22px;
    font-weight: 700;
    margin: 28px 0 12px;
}

body.marca .marca-card.marca-card-suave {
    background: var(--color-soft-peach);
    box-shadow: none;
}

.marca-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-soft-pink);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.marca-lista {
    display: grid;
    gap: 12px;
}

body.marca .marca-lista-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}

body.marca .marca-lista-item:active {
    transform: scale(0.98);
}

.marca-lista-fecha {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-size: 18px;
    font-weight: 700;
}

.marca-lista-hora {
    display: block;
    color: var(--color-text-light);
    font-size: 15px;
}

.marca-agendar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body.marca .marca-agendar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 132px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}

body.marca .marca-agendar-item:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    body.marca .marca-lista-item:hover,
    body.marca .marca-agendar-item:hover {
        box-shadow: 0 1px 0 rgba(58, 20, 40, .08), 0 14px 32px rgba(58, 20, 40, .12);
        color: var(--color-text);
    }
}

body.marca .marca-pagos-tabs {
    gap: 8px;
    border: 0;
    padding-bottom: 4px;
}

body.marca .marca-pagos-tabs .nav-link {
    background: #fff;
    border: 2px solid var(--color-line);
    border-radius: 14px;
    padding: 8px 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.marca .marca-pagos-tabs .nav-link.active {
    background: #fff;
    border-color: var(--color-primary-strong);
    box-shadow: 0 0 0 3px rgba(200, 23, 79, .15);
}

body.marca .text-warning {
    color: var(--color-warning) !important;
}

body.marca .modal-content {
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-background);
    color: var(--color-text);
}

body.marca .modal-header,
body.marca .modal-footer {
    border-color: var(--color-line);
}

body.marca .modal-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 100, 'WONK' 1;
    font-weight: 700;
}

/* ---------- Reduccion de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    body.marca * {
        animation: none !important;
    }

    body.marca .marca-btn:active,
    body.marca .demo-btn-primario:active,
    body.marca .btn-outline-secondary:active,
    body.marca .marca-lista-item:active,
    body.marca .marca-agendar-item:active {
        transform: none;
    }
}