/* ══════════════════════════════════════════════════════════════════
   WIdeTech Booking · Frontend CSS
   Temas: light (default) | dark | custom (via CSS vars desde admin)
══════════════════════════════════════════════════════════════════ */

/* ── Tema LIGHT ────────────────────────────────────────────────── */
:root, #wtb-box[data-theme="light"] {
    --wtb-primary:        #4f46e5;
    --wtb-primary-h:      #4338ca;
    --wtb-btn-text:       #ffffff;
    --wtb-ocupado:        #ef4444;
    --wtb-r-modal:        14px;
    --wtb-r-btn:          8px;
    --wtb-shadow:         0 24px 60px rgba(0,0,0,.18);
    --wtb-font:           inherit;
    --wtb-fs-titulo:      1.15rem;
    --wtb-fs-label:       .83rem;
    --wtb-fs-input:       .93rem;
    --wtb-fs-btn:         .97rem;
    --wtb-fw-titulo:      700;
    --wtb-fw-btn:         700;
    --wtb-fw-label:       600;
    /* Calendar */
    --wtb-cal-bg:         #ffffff;
    --wtb-cal-hbg:        #f8f9fc;
    --wtb-cal-htx:        #1e293b;
    --wtb-cal-bor:        #e2e8f0;
    --wtb-cal-today-bg:   #fff8e1;
    --wtb-cal-today-c:    #f59e0b;
    --wtb-cal-now:        #ef4444;
    --wtb-cal-hover:      #f1f0ff;
    --wtb-cal-txt:        #334155;
    --wtb-cal-r:          12px;
    /* Modal light */
    --wtb-m-bg:           #ffffff;
    --wtb-m-txt:          #0f172a;
    --wtb-m-sub:          #64748b;
    --wtb-m-bor:          #f1f5f9;
    --wtb-m-inp-bg:       #f9fafb;
    --wtb-m-inp-bor:      #e5e7eb;
    --wtb-m-inp-txt:      #0f172a;
    --wtb-m-close-bg:     #f1f5f9;
    --wtb-m-close-c:      #64748b;
    --wtb-m-step-c:       #818cf8;
    --wtb-time-free-bg:   #ffffff;
    --wtb-time-free-bor:  #e5e7eb;
    --wtb-time-free-txt:  #334155;
    --wtb-time-dis-bg:    #f8fafc;
    --wtb-time-dis-c:     #cbd5e1;
    --wtb-slot-info-bg:   #f0fdf4;
    --wtb-slot-info-bor:  #bbf7d0;
    --wtb-slot-info-c:    #15803d;
    --wtb-hint-bg:        linear-gradient(135deg,#eff6ff,#f5f3ff);
    --wtb-hint-bor:       #c7d2fe;
    --wtb-hint-c:         #3730a3;
}

/* ── Tema DARK ─────────────────────────────────────────────────── */
#wtb-box[data-theme="dark"] {
    --wtb-m-bg:           #1e1e2e;
    --wtb-m-txt:          #e2e8f0;
    --wtb-m-sub:          #94a3b8;
    --wtb-m-bor:          #2d2d3f;
    --wtb-m-inp-bg:       #2a2a3e;
    --wtb-m-inp-bor:      #3d3d55;
    --wtb-m-inp-txt:      #e2e8f0;
    --wtb-m-close-bg:     #2d2d3f;
    --wtb-m-close-c:      #94a3b8;
    --wtb-m-step-c:       #818cf8;
    --wtb-time-free-bg:   #2a2a3e;
    --wtb-time-free-bor:  #3d3d55;
    --wtb-time-free-txt:  #e2e8f0;
    --wtb-time-dis-bg:    #22223a;
    --wtb-time-dis-c:     #475569;
    --wtb-slot-info-bg:   #1a2e1a;
    --wtb-slot-info-bor:  #166534;
    --wtb-slot-info-c:    #4ade80;
    --wtb-shadow:         0 24px 60px rgba(0,0,0,.5);
}

/* ── Calendario DARK (cuando el tema del wrap es dark) ─────────── */
#wtb-wrap[data-theme="dark"] {
    --wtb-cal-bg:         #1e1e2e;
    --wtb-cal-hbg:        #16162a;
    --wtb-cal-htx:        #e2e8f0;
    --wtb-cal-bor:        #2d2d3f;
    --wtb-cal-today-bg:   #2a2412;
    --wtb-cal-today-c:    #f59e0b;
    --wtb-cal-now:        #f87171;
    --wtb-cal-hover:      #2d2a4a;
    --wtb-cal-txt:        #94a3b8;
    --wtb-hint-bg:        linear-gradient(135deg,#1e1b4b,#1a1a2e);
    --wtb-hint-bor:       #3730a3;
    --wtb-hint-c:         #a5b4fc;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT BASE
══════════════════════════════════════════════════════════════════ */
#wtb-wrap { font-family: var(--wtb-font); max-width:100%; }

/* ── Hint bar ──────────────────────────────────────────────────── */
#wtb-hint-bar {
    background    : var(--wtb-hint-bg);
    border        : 1px solid var(--wtb-hint-bor);
    border-radius : 10px;
    padding       : 11px 16px;
    margin-bottom : 14px;
    font-size     : .88rem;
    color         : var(--wtb-hint-c);
    font-weight   : 500;
    font-family   : var(--wtb-font);
}

/* ── Botón Reservar ────────────────────────────────────────────── */
#wtb-btn-wrap { text-align:center; }
.wtb-btn-top  { margin-bottom: 16px; }
.wtb-btn-bottom { margin-top: 20px; }

#wtb-open-btn {
    display       : inline-flex;
    align-items   : center;
    gap           : 8px;
    padding       : 13px 30px;
    background    : var(--wtb-primary);
    color         : var(--wtb-btn-text);
    border        : none;
    border-radius : var(--wtb-r-btn);
    font-size     : 1rem;
    font-weight   : 700;
    font-family   : var(--wtb-font);
    cursor        : pointer;
    box-shadow    : 0 4px 14px rgba(79,70,229,.28);
    transition    : background .2s, transform .15s, box-shadow .2s;
}
#wtb-open-btn:hover { background:var(--wtb-primary-h); transform:translateY(-2px); box-shadow:0 8px 20px rgba(79,70,229,.35); }
#wtb-open-btn:active { transform:translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   FULLCALENDAR OVERRIDES
══════════════════════════════════════════════════════════════════ */
#wtb-wrap .fc {
    background   : var(--wtb-cal-bg);
    border-radius: var(--wtb-cal-r);
    border       : 1px solid var(--wtb-cal-bor);
    overflow     : hidden;
    box-shadow   : 0 2px 12px rgba(0,0,0,.06);
    font-family  : var(--wtb-font);
    color        : var(--wtb-cal-txt);
}
#wtb-wrap .fc .fc-toolbar { background:var(--wtb-cal-hbg); padding:12px 16px; margin:0; border-bottom:1px solid var(--wtb-cal-bor); gap:8px; flex-wrap:wrap; }
#wtb-wrap .fc .fc-toolbar-title { font-size:1rem; font-weight:700; color:var(--wtb-cal-htx); }
#wtb-wrap .fc .fc-button { background:#fff; border:1.5px solid var(--wtb-cal-bor); color:var(--wtb-cal-htx); border-radius:7px!important; padding:5px 12px; font-size:.82rem; font-weight:600; box-shadow:none; transition:all .15s; }
#wtb-wrap .fc .fc-button:hover { background:var(--wtb-cal-hover); border-color:var(--wtb-primary); color:var(--wtb-primary); }
#wtb-wrap .fc .fc-button-primary:not(:disabled).fc-button-active,
#wtb-wrap .fc .fc-button-primary:not(:disabled):active { background:var(--wtb-primary); border-color:var(--wtb-primary); color:#fff; box-shadow:none; }
#wtb-wrap .fc .fc-col-header { background:var(--wtb-cal-hbg); }
#wtb-wrap .fc .fc-col-header-cell { padding:9px 4px; border-color:var(--wtb-cal-bor); }
#wtb-wrap .fc .fc-col-header-cell-cushion { font-size:.78rem; font-weight:700; color:var(--wtb-cal-htx); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
#wtb-wrap .fc .fc-day-today { background:var(--wtb-cal-today-bg)!important; }
#wtb-wrap .fc .fc-timegrid-col.fc-day-today { background:var(--wtb-cal-today-bg)!important; }
#wtb-wrap .fc .fc-day-today .fc-col-header-cell-cushion { color:var(--wtb-cal-today-c); }
/* ── Hora estilo Google Calendar: "9 AM", "10 AM" a la derecha ── */
#wtb-wrap .fc .fc-timegrid-slot-label-cushion {
    font-size   : .72rem;
    font-weight : 400;
    color       : var(--wtb-cal-txt);
    opacity     : .7;
    padding-right: 8px;
    text-align  : right;
    white-space : nowrap;
    letter-spacing: .01em;
}
/* Celda de label de hora: más ancha para "12 PM" etc. */
#wtb-wrap .fc .fc-timegrid-axis {
    width       : 52px !important;
    min-width   : 52px;
}
#wtb-wrap .fc .fc-timegrid-slot-label {
    vertical-align: top;
    padding-top   : 4px;
}
#wtb-wrap .fc td, #wtb-wrap .fc th, #wtb-wrap .fc .fc-scrollgrid { border-color:var(--wtb-cal-bor)!important; }
#wtb-wrap .fc .fc-timegrid-slot { height:2.6em; border-color:var(--wtb-cal-bor)!important; }
#wtb-wrap .fc .fc-highlight { background:var(--wtb-cal-hover)!important; }
#wtb-wrap .fc .fc-timegrid-now-indicator-line { border-color:var(--wtb-cal-now); border-width:2px; }
#wtb-wrap .fc .fc-timegrid-now-indicator-arrow { border-top-color:var(--wtb-cal-now); border-bottom-color:var(--wtb-cal-now); }
#wtb-wrap .fc .fc-daygrid-day-number { font-size:.83rem; font-weight:600; color:var(--wtb-cal-txt); text-decoration:none; }

.wtb-ev-block { display:flex; align-items:center; gap:3px; padding:3px 7px; font-size:.74em; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:100%; border-radius:4px; }

/* ══════════════════════════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════════════════════════ */
#wtb-modal {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
    align-items:center; justify-content:center;
    z-index:999999; padding:16px; box-sizing:border-box;
}

/* ── Modal box ─────────────────────────────────────────────────── */
#wtb-box {
    background   : var(--wtb-m-bg);
    border-radius: var(--wtb-r-modal);
    padding      : 1.5rem;
    width        : 100%;
    max-width    : 780px;
    position     : relative;
    box-shadow   : var(--wtb-shadow);
    animation    : wtb-in .22s cubic-bezier(.34,1.4,.64,1);
    font-family  : var(--wtb-font);
    color        : var(--wtb-m-txt);
    overflow     : hidden; /* no scroll */
}
@keyframes wtb-in { from{opacity:0;transform:scale(.93) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }

#wtb-close {
    position:absolute; top:12px; right:14px;
    background:var(--wtb-m-close-bg); border:none;
    color:var(--wtb-m-close-c); cursor:pointer;
    width:28px; height:28px; border-radius:50%;
    font-size:1rem; display:flex; align-items:center; justify-content:center;
    transition:all .15s;
}
#wtb-close:hover { opacity:.8; }

#wtb-modal-title {
    margin:0 0 1rem; padding-right:36px;
    font-size:var(--wtb-fs-titulo); font-weight:var(--wtb-fw-titulo);
    color:var(--wtb-m-txt);
    border-bottom:1px solid var(--wtb-m-bor);
    padding-bottom:.75rem;
}

/* ── 2 columnas ────────────────────────────────────────────────── */
#wtb-modal-body {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    margin-bottom:1rem;
}

#wtb-col-left, #wtb-col-right { display:flex; flex-direction:column; gap:12px; }

.wtb-field-group { display:flex; flex-direction:column; gap:5px; }
.wtb-group-label { font-size:.72rem; font-weight:700; color:var(--wtb-m-step-c); text-transform:uppercase; letter-spacing:.07em; }

/* Date picker */
.wtb-date-input {
    width:100%; padding:.6rem .75rem; box-sizing:border-box;
    border:1.5px solid var(--wtb-m-inp-bor); border-radius:8px;
    font-size:var(--wtb-fs-input); font-family:inherit;
    color:var(--wtb-m-inp-txt); background:var(--wtb-m-inp-bg);
    outline:none; cursor:pointer; transition:border-color .2s, box-shadow .2s;
}
.wtb-date-input:focus { border-color:var(--wtb-primary); box-shadow:0 0 0 3px rgba(79,70,229,.12); }

/* Time grid */
#wtb-time-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
    gap:6px; max-height:160px; overflow-y:auto;
    padding:2px; scrollbar-width:thin;
}
.wtb-time-btn {
    padding:8px 4px; border:1.5px solid var(--wtb-time-free-bor); border-radius:7px;
    font-size:.82rem; font-weight:600; font-family:inherit;
    background:var(--wtb-time-free-bg); color:var(--wtb-time-free-txt);
    cursor:pointer; text-align:center; transition:all .15s;
}
.wtb-time-btn.wtb-time-free:hover { border-color:var(--wtb-primary); background:var(--wtb-cal-hover); color:var(--wtb-primary); transform:translateY(-1px); }
.wtb-time-btn.wtb-time-selected { background:var(--wtb-primary); border-color:var(--wtb-primary); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.3); }
.wtb-time-btn.wtb-time-disabled { background:var(--wtb-time-dis-bg); border-color:var(--wtb-time-dis-bg); color:var(--wtb-time-dis-c); cursor:not-allowed; font-size:.75rem; }

.wtb-no-slots { font-size:.84rem; color:var(--wtb-m-sub); text-align:center; padding:12px 4px; margin:0; }

/* Slot info */
#wtb-slot-info {
    font-size:.8rem; font-weight:600; border-radius:7px; padding:7px 10px;
    transition:all .2s;
}
.wtb-slot-info-empty  { display:none!important; }
.wtb-slot-info-selected {
    background:var(--wtb-slot-info-bg); border:1px solid var(--wtb-slot-info-bor);
    color:var(--wtb-slot-info-c); display:block;
}
.wtb-slot-info-selected::before { content:'✅ '; }

/* ── Campos formulario ─────────────────────────────────────────── */
.wtb-f { display:flex; flex-direction:column; gap:4px; }
.wtb-f label { font-size:var(--wtb-fs-label); font-weight:var(--wtb-fw-label); color:var(--wtb-m-sub); }
.wtb-f input, .wtb-f textarea {
    width:100%; padding:.55rem .75rem; box-sizing:border-box;
    border:1.5px solid var(--wtb-m-inp-bor); border-radius:8px;
    font-size:var(--wtb-fs-input); font-family:inherit;
    color:var(--wtb-m-inp-txt); background:var(--wtb-m-inp-bg);
    outline:none; transition:border-color .2s, box-shadow .2s;
}
.wtb-f input:focus, .wtb-f textarea:focus { border-color:var(--wtb-primary); background:var(--wtb-m-bg); box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.wtb-f textarea { resize:none; min-height:54px; }

/* ── Form + submit ─────────────────────────────────────────────── */
#wtb-form { display:contents; } /* el botón y msg ya están abajo del grid */

#wtb-submit {
    width:100%; padding:.75rem 1rem; margin-top:.25rem;
    background:var(--wtb-primary); color:var(--wtb-btn-text);
    border:none; border-radius:var(--wtb-r-btn);
    font-size:var(--wtb-fs-btn); font-weight:var(--wtb-fw-btn); font-family:inherit;
    cursor:pointer; letter-spacing:.01em;
    transition:background .2s, transform .1s, box-shadow .2s;
}
#wtb-submit:hover:not(:disabled) { background:var(--wtb-primary-h); box-shadow:0 4px 14px rgba(79,70,229,.35); }
#wtb-submit:active:not(:disabled) { transform:scale(.98); }
#wtb-submit:disabled { opacity:.6; cursor:not-allowed; }

#wtb-msg { margin-top:.6rem; font-size:.86rem; font-weight:500; min-height:1.1em; text-align:center; }
.wtb-msg-success { color:#15803d; }
.wtb-msg-error   { color:#dc2626; }

/* ── Fix bottom padding ──────────────────────────────────────── */
#wtb-box {
    padding-bottom: 1.5rem; /* equal to padding-top */
}

/* ── Responsive: 1 columna en móvil ───────────────────────────── */
@media (max-width: 640px) {
    #wtb-modal { align-items:flex-end; padding:0; }
    #wtb-box {
        border-radius: var(--wtb-r-modal) var(--wtb-r-modal) 0 0;
        max-height   : 92vh;
        overflow-y   : auto;
        padding      : 1.25rem 1.25rem 1.5rem;
    }
    #wtb-modal-body { grid-template-columns:1fr; gap:12px; }
    #wtb-time-grid  { max-height:130px; }
    /* Hide submit inside col-right on mobile - it moves below both columns */
    #wtb-col-right  { padding-bottom: 0; }
}

/* ── Mobile: solo vista Día en FullCalendar ──────────────────── */
@media (max-width: 768px) {
    /* Ocultar botones Mes y Semana en mobile */
    #wtb-wrap .fc .fc-dayGridMonth-button,
    #wtb-wrap .fc .fc-timeGridWeek-button {
        display: none !important;
    }
    /* Ajustar toolbar */
    #wtb-wrap .fc .fc-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
    #wtb-wrap .fc .fc-toolbar-title { font-size: .9rem; }
    #wtb-wrap .fc .fc-button { padding: 5px 10px; font-size: .78rem; }
    /* Columna de horas más estrecha en mobile */
    #wtb-wrap .fc .fc-timegrid-axis { width: 42px !important; min-width: 42px; }
    #wtb-wrap .fc .fc-timegrid-slot-label-cushion { font-size: .65rem; padding-right: 4px; }
}

/* ── Step label icon (📅→SVG, 🕐→SVG) ───────────────────────── */
.wtb-group-label {
    display    : flex;
    align-items: center;
    gap        : 6px;
}
.wtb-lbl-icon {
    width      : 13px;
    height     : 13px;
    flex-shrink: 0;
    color      : var(--wtb-m-step-c);
}

/* ── Event block icon ────────────────────────────────────────── */
.wtb-ev-icon {
    display      : inline-flex;
    align-items  : center;
    margin-right : 4px;
    flex-shrink  : 0;
    vertical-align: middle;
}
.wtb-ev-icon svg { width:12px; height:12px; vertical-align:middle; }
.wtb-ev-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Time button lock icon ───────────────────────────────────── */
.wtb-time-lock { display:inline-flex; align-items:center; margin-left:3px; vertical-align:middle; }
.wtb-time-lock svg { width:10px; height:10px; }