@arquimedes.co/eureka-forms 3.0.72 → 3.0.73-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,462 +1,540 @@
1
+ /* ================= In the form: a loose control, like the file step ================= */
1
2
  .container {
2
3
  max-width: 100%;
3
4
  box-sizing: border-box;
5
+ display: flex;
6
+ flex-direction: column;
7
+ padding: 5px 10px 0;
8
+ color: var(--eureka-text, #293241);
4
9
  }
5
-
6
- .card {
7
- border: 1px solid var(--eureka-outline, #d9dee6);
8
- border-radius: 16px;
10
+ .label {
11
+ font-size: 16px;
12
+ margin-left: 8px;
13
+ margin-bottom: 5px;
14
+ user-select: none;
15
+ }
16
+ .description {
17
+ font-size: 0.75rem;
18
+ line-height: 1.66;
19
+ margin-left: 14px;
20
+ margin-top: -4px;
21
+ color: var(--eureka-description, #787878);
9
22
  overflow: hidden;
10
- background: var(--eureka-bg, #fff);
11
- box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
12
- transition: opacity 0.15s ease;
13
- /* La columna derecha queda a la medida de su contenido (calendario ~360px, personas ~420px) */
14
- max-width: 700px;
15
- margin: 0 auto;
23
+ text-overflow: ellipsis;
16
24
  }
17
- /* En el paso final el contenido es una sola columna: la tarjeta se angosta aún más */
18
- .cardFinal {
19
- max-width: 560px;
25
+ .control {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 10px;
29
+ margin: 5px 0 3px 10px;
20
30
  }
21
- .xfade {
22
- opacity: 0;
31
+ .note {
32
+ font-size: 0.75rem;
33
+ line-height: 1.66;
34
+ margin: 4px 0 0 14px;
35
+ color: var(--eureka-description, #787878);
23
36
  }
24
- .book {
25
- display: grid;
26
- grid-template-columns: 280px 1fr;
27
- min-height: 400px;
37
+ .note b {
38
+ color: var(--eureka-text, #293241);
28
39
  }
29
-
30
- /* ---------- Left: who + details + progress ---------- */
31
- .who {
32
- padding: 22px 20px;
33
- border-right: 1px solid var(--eureka-outline, #eceff3);
40
+ .errorMsg {
41
+ font-size: 0.75rem;
42
+ line-height: 1.66;
43
+ margin: 5px 0 0 14px;
44
+ color: var(--eureka-error, #cc2936);
45
+ }
46
+ .loadError {
34
47
  display: flex;
35
- flex-direction: column;
36
- gap: 16px;
37
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 4%, #fff);
48
+ align-items: center;
49
+ flex-wrap: wrap;
50
+ gap: 10px;
38
51
  }
39
- .brand {
52
+
53
+ /* Reserved / confirmed */
54
+ .booked {
40
55
  display: flex;
41
56
  align-items: center;
42
- gap: 11px;
57
+ gap: 12px;
58
+ margin: 5px 0 3px 8px;
43
59
  }
44
- .avatar {
45
- width: 46px;
46
- height: 46px;
47
- border-radius: 50%;
48
- background: var(--eureka-primary, #3d5a7f);
49
- color: #fff;
50
- display: grid;
51
- place-items: center;
52
- font-weight: 800;
53
- font-size: 17px;
60
+ .bookedIcon {
54
61
  flex: none;
62
+ width: 34px;
63
+ height: 34px;
64
+ border-radius: 17px;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ color: var(--eureka-primary, #3d5a7f);
69
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 10%, transparent);
55
70
  }
56
- .brandName {
57
- margin: 0;
58
- font-size: 16px;
59
- font-weight: 800;
60
- color: var(--eureka-text, #293241);
61
- }
62
- .brandRole {
63
- margin: 2px 0 0;
64
- font-size: 12.5px;
65
- color: #787878;
71
+ .bookedIconOk {
72
+ color: #3d7a4f;
73
+ background: rgba(61, 122, 79, 0.12);
66
74
  }
67
- .meta {
75
+ .bookedText {
76
+ flex: 1 1 auto;
77
+ min-width: 0;
68
78
  display: flex;
69
79
  flex-direction: column;
70
- gap: 11px;
80
+ gap: 2px;
81
+ }
82
+ .bookedMain,
83
+ .bookedSub {
84
+ white-space: nowrap;
85
+ overflow: hidden;
86
+ text-overflow: ellipsis;
87
+ font-variant-numeric: tabular-nums;
88
+ }
89
+ .bookedMain {
90
+ font-size: 14px;
91
+ font-weight: 700;
92
+ }
93
+ .bookedSub {
94
+ font-size: 12px;
95
+ color: #787878;
71
96
  }
72
- .row {
97
+
98
+ /* ================= The picker: one fixed card for every step ================= */
99
+ .card {
100
+ width: 720px;
101
+ height: 540px;
102
+ max-height: calc(100dvh - 32px);
103
+ box-sizing: border-box;
73
104
  display: flex;
74
- align-items: center;
75
- gap: 10px;
76
- font-size: 13px;
105
+ flex-direction: column;
106
+ overflow: hidden;
107
+ border: 1px solid #e5e7eb;
108
+ border-radius: 16px;
109
+ background: var(--eureka-bg, #fff);
77
110
  color: var(--eureka-text, #293241);
111
+ font-size: 14px;
78
112
  }
79
- .ic {
80
- color: var(--eureka-primary, #3d5a7f);
81
- width: 16px;
82
- text-align: center;
113
+
114
+ .header {
115
+ height: 64px;
83
116
  flex: none;
84
- }
85
- .pill {
86
- display: inline-flex;
117
+ box-sizing: border-box;
118
+ padding: 0 16px 0 24px;
119
+ border-bottom: 1px solid #e5e7eb;
120
+ display: flex;
87
121
  align-items: center;
88
- gap: 6px;
89
- font-size: 12px;
90
- font-weight: 700;
91
- padding: 3px 10px;
92
- border-radius: 20px;
93
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 10%, #fff);
94
- color: var(--eureka-primary, #3d5a7f);
122
+ gap: 12px;
95
123
  }
96
-
97
- .sum {
124
+ .headText {
125
+ flex: 1 1 auto;
126
+ min-width: 0;
98
127
  display: flex;
99
128
  flex-direction: column;
100
- gap: 8px;
101
- border-top: 1px solid var(--eureka-outline, #eceff3);
102
- padding-top: 14px;
129
+ gap: 2px;
130
+ }
131
+ .title {
132
+ margin: 0;
133
+ font-size: 16px;
134
+ font-weight: 800;
135
+ line-height: 1.2;
136
+ white-space: nowrap;
137
+ overflow: hidden;
138
+ text-overflow: ellipsis;
103
139
  }
104
- .srow {
140
+ .meta {
105
141
  display: flex;
106
142
  align-items: center;
107
- gap: 9px;
143
+ gap: 14px;
108
144
  font-size: 13px;
109
145
  color: #787878;
110
146
  }
111
- .dot {
112
- width: 18px;
113
- height: 18px;
114
- border-radius: 50%;
115
- border: 1.5px dashed var(--eureka-outline, #d9dee6);
116
- flex: none;
117
- display: grid;
118
- place-items: center;
119
- font-size: 10px;
120
- color: transparent;
121
- }
122
- .srowOn {
123
- color: var(--eureka-text, #293241);
124
- font-weight: 600;
147
+ .metaItem {
148
+ display: inline-flex;
149
+ align-items: center;
150
+ gap: 5px;
151
+ font-variant-numeric: tabular-nums;
125
152
  }
126
- .srowOn .dot {
153
+ .close,
154
+ .iconBtn {
155
+ flex: none;
127
156
  border: none;
128
- background: #2e9367;
129
- color: #fff;
130
- }
131
-
132
- .lock {
133
- margin-top: auto;
134
- font-size: 12px;
157
+ background: transparent;
158
+ padding: 0;
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ cursor: pointer;
135
163
  color: #787878;
136
- background: #fff7ed;
137
- border: 1px solid #f4d9b0;
138
- border-radius: 9px;
139
- padding: 8px 10px;
140
- }
141
- .lock b {
142
- color: #b7791f;
164
+ font-family: inherit;
143
165
  }
144
-
145
- /* ---------- Right: breadcrumb + one pane at a time ---------- */
146
- .right {
147
- padding: 18px 22px 22px;
148
- min-width: 0;
149
- display: flex;
150
- flex-direction: column;
166
+ .close {
167
+ width: 36px;
168
+ height: 36px;
169
+ border-radius: 18px;
170
+ }
171
+ .close:hover,
172
+ .iconBtn:hover {
173
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, transparent);
174
+ }
175
+ .close:focus-visible,
176
+ .iconBtn:focus-visible,
177
+ .step:focus-visible,
178
+ .option:focus-visible,
179
+ .day:focus-visible,
180
+ .hour:focus-visible,
181
+ .sumChange:focus-visible {
182
+ outline: 2px solid var(--eureka-primary, #3d5a7f);
183
+ outline-offset: 2px;
151
184
  }
152
185
 
186
+ /* Stepper */
153
187
  .stepper {
188
+ height: 44px;
189
+ flex: none;
190
+ box-sizing: border-box;
191
+ padding: 0 24px;
154
192
  display: flex;
155
193
  align-items: center;
156
- gap: 8px;
157
- font-size: 12.5px;
158
- color: #787878;
159
- margin-bottom: 20px;
160
- flex-wrap: wrap;
194
+ gap: 10px;
195
+ font-size: 13px;
196
+ overflow: hidden;
161
197
  }
162
198
  .stepGroup {
163
199
  display: inline-flex;
164
200
  align-items: center;
165
- gap: 8px;
201
+ gap: 10px;
202
+ flex: none;
166
203
  }
167
- .stepItem {
204
+ .step {
168
205
  display: inline-flex;
169
206
  align-items: center;
170
207
  gap: 7px;
171
- border: none;
172
- background: none;
173
208
  padding: 0;
174
- font: inherit;
175
- color: inherit;
176
- cursor: default;
209
+ border: none;
210
+ background: transparent;
211
+ font-family: inherit;
212
+ font-size: 13px;
213
+ color: #787878;
214
+ white-space: nowrap;
177
215
  }
178
- .stepNum {
179
- width: 20px;
180
- height: 20px;
181
- border-radius: 50%;
182
- display: grid;
183
- place-items: center;
184
- font-size: 11px;
185
- font-weight: 800;
186
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
187
- color: #9aa3b0;
188
- flex: none;
216
+ .step:disabled {
217
+ cursor: default;
189
218
  }
190
219
  .stepDone {
191
220
  color: var(--eureka-text, #293241);
221
+ font-weight: 600;
192
222
  cursor: pointer;
193
223
  }
194
- .stepDone .stepNum {
195
- background: #2e9367;
196
- color: #fff;
197
- }
198
224
  .stepOn {
199
225
  color: var(--eureka-text, #293241);
200
226
  font-weight: 700;
201
227
  }
202
- .stepOn .stepNum {
228
+ .stepNum {
229
+ width: 22px;
230
+ height: 22px;
231
+ flex: none;
232
+ box-sizing: border-box;
233
+ border-radius: 11px;
234
+ border: 1px solid #b8b8b8;
235
+ color: #787878;
236
+ font-size: 11px;
237
+ font-weight: 800;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: center;
241
+ }
242
+ .stepDone .stepNum {
243
+ border: none;
203
244
  background: var(--eureka-primary, #3d5a7f);
204
245
  color: #fff;
205
246
  }
247
+ .stepOn .stepNum {
248
+ border: 2px solid var(--eureka-primary, #3d5a7f);
249
+ color: var(--eureka-primary, #3d5a7f);
250
+ }
206
251
  .stepSep {
207
- width: 22px;
252
+ width: 24px;
208
253
  height: 1px;
209
- background: var(--eureka-outline, #d9dee6);
254
+ background: #e5e7eb;
210
255
  }
211
256
 
212
- .pane {
213
- flex: 1;
214
- animation: erk-booking-fadein 0.22s ease;
257
+ /* Body: the only part that changes between steps, and the only one that scrolls */
258
+ .body {
259
+ flex: 1 1 auto;
260
+ min-height: 0;
261
+ box-sizing: border-box;
262
+ padding: 16px 24px;
263
+ overflow: auto;
264
+ display: flex;
265
+ flex-direction: column;
266
+ animation: fadeIn 120ms ease;
215
267
  }
216
- @keyframes erk-booking-fadein {
268
+ @keyframes fadeIn {
217
269
  from {
218
270
  opacity: 0;
219
- transform: translateY(4px);
220
271
  }
221
272
  to {
222
273
  opacity: 1;
223
- transform: none;
224
274
  }
225
275
  }
226
-
276
+ .pane {
277
+ display: flex;
278
+ flex-direction: column;
279
+ gap: 16px;
280
+ }
281
+ .question {
282
+ display: flex;
283
+ flex-direction: column;
284
+ gap: 4px;
285
+ }
227
286
  .q {
228
- margin: 0 0 4px;
229
- font-size: 17px;
230
- font-weight: 800;
231
- color: var(--eureka-text, #293241);
232
- text-wrap: balance;
287
+ margin: 0;
288
+ font-size: 16px;
289
+ font-weight: 700;
290
+ line-height: 1.25;
233
291
  }
234
292
  .qsub {
235
- margin: 0 0 18px;
293
+ margin: 0;
236
294
  font-size: 13px;
237
295
  color: #787878;
238
296
  }
239
297
 
240
- /* step: person */
241
- .persons {
242
- display: flex;
243
- flex-direction: column;
244
- gap: 10px;
245
- max-width: 420px;
298
+ /* Type and person options */
299
+ .options {
300
+ display: grid;
301
+ grid-template-columns: repeat(2, minmax(0, 1fr));
302
+ gap: 12px;
246
303
  }
247
- .pcard {
304
+ .option {
248
305
  display: flex;
249
306
  align-items: center;
250
307
  gap: 12px;
251
- border: 1px solid var(--eureka-outline, #d9dee6);
252
- border-radius: 12px;
253
- padding: 11px 14px 11px 11px;
254
- background: #fff;
255
- cursor: pointer;
308
+ box-sizing: border-box;
309
+ height: 64px;
310
+ padding: 0 14px;
311
+ border-radius: 10px;
312
+ border: 1px solid #b8b8b8;
313
+ background: var(--eureka-bg, #fff);
256
314
  text-align: left;
257
- width: 100%;
258
- font: inherit;
315
+ font-family: inherit;
316
+ color: var(--eureka-text, #293241);
317
+ cursor: pointer;
259
318
  }
260
- .pcard:hover {
319
+ .option:hover {
261
320
  border-color: var(--eureka-primary, #3d5a7f);
262
321
  }
263
- .pcardOn {
264
- border-color: var(--eureka-primary, #3d5a7f);
265
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
266
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--eureka-primary, #3d5a7f) 12%, transparent);
267
- }
268
- .pav {
269
- width: 38px;
270
- height: 38px;
271
- border-radius: 50%;
272
- background: #c9d4e2;
273
- color: #2b415d;
274
- display: grid;
275
- place-items: center;
276
- font-weight: 800;
277
- font-size: 13px;
322
+ .optionAny {
323
+ border-style: dashed;
324
+ }
325
+ .optionOn,
326
+ .optionOn:hover {
327
+ border: 2px solid var(--eureka-primary, #3d5a7f);
328
+ padding: 0 13px;
329
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 6%, var(--eureka-bg, #fff));
330
+ }
331
+ .avatar {
278
332
  flex: none;
333
+ width: 36px;
334
+ height: 36px;
335
+ border-radius: 18px;
336
+ background: #98c1d9;
337
+ color: #293241;
338
+ font-size: 13px;
339
+ font-weight: 800;
340
+ display: flex;
341
+ align-items: center;
342
+ justify-content: center;
279
343
  }
280
- .pcardAny .pav {
281
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
344
+ .avatarAny {
345
+ background: #f0f0f0;
282
346
  color: var(--eureka-primary, #3d5a7f);
283
347
  }
284
- .pinfo {
348
+ .optionText {
349
+ flex: 1 1 auto;
350
+ min-width: 0;
285
351
  display: flex;
286
352
  flex-direction: column;
353
+ gap: 1px;
287
354
  }
288
- .pn {
355
+ .optionTitle,
356
+ .optionSub {
357
+ white-space: nowrap;
358
+ overflow: hidden;
359
+ text-overflow: ellipsis;
360
+ }
361
+ .optionTitle {
289
362
  font-size: 14px;
290
363
  font-weight: 700;
291
- color: var(--eureka-text, #293241);
292
364
  }
293
- .pr {
365
+ .optionSub {
294
366
  font-size: 12px;
295
367
  color: #787878;
296
368
  }
297
- .chk {
298
- margin-left: auto;
299
- color: #2e9367;
300
- font-weight: 800;
301
- visibility: hidden;
302
- }
303
- .pcardOn .chk {
304
- visibility: visible;
369
+ .optionAside {
370
+ flex: none;
371
+ font-size: 13px;
372
+ font-weight: 600;
373
+ color: #787878;
374
+ font-variant-numeric: tabular-nums;
305
375
  }
306
- .tdur {
307
- margin-left: auto;
376
+ .optionCheck {
308
377
  flex: none;
309
- font-size: 12px;
310
- font-weight: 700;
311
378
  color: var(--eureka-primary, #3d5a7f);
312
- white-space: nowrap;
313
379
  }
314
- .tdur + .chk {
315
- margin-left: 0;
380
+
381
+ /* Two columns: calendar | hours, summary | details */
382
+ .split {
383
+ flex: 1 1 auto;
384
+ min-height: 0;
385
+ display: flex;
386
+ gap: 24px;
316
387
  }
317
388
 
318
- /* step: day (month grid) */
319
- .monthWrap {
320
- max-width: 360px;
389
+ /* Month calendar */
390
+ .calendar {
391
+ flex: none;
392
+ width: 300px;
393
+ display: flex;
394
+ flex-direction: column;
395
+ gap: 8px;
321
396
  }
322
397
  .monthHead {
398
+ height: 32px;
323
399
  display: flex;
324
400
  align-items: center;
325
401
  justify-content: space-between;
326
- margin-bottom: 8px;
327
402
  }
328
403
  .monthTitle {
329
- font-size: 13.5px;
404
+ font-size: 14px;
330
405
  font-weight: 700;
331
- color: var(--eureka-text, #293241);
332
406
  }
333
- .monthNav button {
334
- border: none;
335
- background: none;
336
- color: #787878;
337
- cursor: pointer;
338
- font-size: 15px;
339
- padding: 2px 8px;
340
- border-radius: 6px;
407
+ .monthNav {
408
+ display: flex;
409
+ gap: 2px;
341
410
  }
342
- .monthNav button:hover {
343
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
411
+ .iconBtn {
412
+ width: 32px;
413
+ height: 32px;
414
+ border-radius: 16px;
344
415
  }
345
- .mgrid {
416
+ .dow,
417
+ .days {
346
418
  display: grid;
347
- grid-template-columns: repeat(7, 1fr);
348
- gap: 4px;
349
- font-variant-numeric: tabular-nums;
419
+ grid-template-columns: repeat(7, minmax(0, 1fr));
420
+ gap: 2px;
350
421
  }
351
- .mdow {
352
- text-align: center;
353
- font-size: 10px;
422
+ .dow {
423
+ font-size: 11px;
354
424
  font-weight: 700;
355
- color: #9aa3b0;
356
- padding-bottom: 2px;
425
+ color: #787878;
426
+ text-align: center;
357
427
  }
358
- .mday {
359
- position: relative;
360
- aspect-ratio: 1;
361
- display: grid;
362
- place-items: center;
363
- font-size: 13px;
428
+ .days {
429
+ font-variant-numeric: tabular-nums;
430
+ }
431
+ .day {
432
+ width: 36px;
433
+ height: 36px;
434
+ margin: 0 auto;
435
+ box-sizing: border-box;
436
+ border-radius: 18px;
364
437
  border: none;
365
- background: none;
366
- border-radius: 9px;
367
- cursor: pointer;
368
- font: inherit;
438
+ background: transparent;
439
+ padding: 0;
440
+ font-family: inherit;
441
+ font-size: 13px;
442
+ color: #a0a0a0;
443
+ display: flex;
444
+ align-items: center;
445
+ justify-content: center;
446
+ cursor: default;
369
447
  }
370
- .mdayFree {
448
+ .dayFree {
449
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, transparent);
371
450
  color: var(--eureka-text, #293241);
372
451
  font-weight: 600;
452
+ cursor: pointer;
373
453
  }
374
- .mdayFree::after {
375
- content: '';
376
- position: absolute;
377
- bottom: 5px;
378
- width: 4px;
379
- height: 4px;
380
- border-radius: 50%;
381
- background: #2e9367;
454
+ .dayFree:hover {
455
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 16%, transparent);
382
456
  }
383
- .mdayFree:hover {
384
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
457
+ .dayToday {
458
+ border: 1px solid #b8b8b8;
385
459
  }
386
- .mdayNone {
387
- color: #c8ced7;
388
- cursor: default;
389
- }
390
- .mdaySel {
460
+ .dayOn {
391
461
  background: var(--eureka-primary, #3d5a7f);
392
462
  color: #fff;
393
463
  font-weight: 700;
464
+ cursor: pointer;
394
465
  }
395
- .mdaySel::after {
396
- content: '';
397
- position: absolute;
398
- bottom: 5px;
399
- width: 4px;
400
- height: 4px;
401
- border-radius: 50%;
402
- background: #fff;
466
+ .calNote {
467
+ margin: 4px 0 0;
468
+ font-size: 12px;
469
+ color: #787878;
403
470
  }
404
471
 
405
- /* step: hour */
406
- .slots {
407
- display: grid;
408
- grid-template-columns: repeat(3, 1fr);
409
- gap: 9px;
410
- max-width: 380px;
472
+ /* Hours of the day */
473
+ .hours {
474
+ flex: 1 1 auto;
475
+ min-width: 0;
476
+ min-height: 0;
477
+ display: flex;
478
+ flex-direction: column;
479
+ gap: 10px;
480
+ }
481
+ .hoursHead {
482
+ min-height: 36px;
483
+ display: flex;
484
+ flex-direction: column;
485
+ justify-content: center;
486
+ gap: 2px;
487
+ }
488
+ .hoursTitle {
489
+ font-size: 14px;
490
+ font-weight: 700;
411
491
  }
412
- .slot {
413
- border: 1px solid var(--eureka-outline, #d9dee6);
414
- background: #fff;
492
+ .hoursSub {
493
+ font-size: 12px;
494
+ color: #787878;
495
+ }
496
+ .hourList {
497
+ flex: 1 1 auto;
498
+ min-height: 0;
499
+ overflow: auto;
500
+ display: flex;
501
+ flex-direction: column;
502
+ gap: 8px;
503
+ padding-right: 4px;
504
+ }
505
+ .hour {
506
+ flex: none;
507
+ height: 40px;
508
+ box-sizing: border-box;
415
509
  border-radius: 10px;
416
- padding: 11px 0;
417
- font-size: 13.5px;
418
- font-weight: 600;
510
+ border: 1px solid #b8b8b8;
511
+ background: var(--eureka-bg, #fff);
419
512
  color: var(--eureka-primary, #3d5a7f);
420
- cursor: pointer;
421
- font-variant-numeric: tabular-nums;
422
513
  font-family: inherit;
514
+ font-size: 14px;
515
+ font-weight: 600;
516
+ font-variant-numeric: tabular-nums;
517
+ cursor: pointer;
423
518
  }
424
- .slot:hover {
519
+ .hour:hover {
425
520
  border-color: var(--eureka-primary, #3d5a7f);
426
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 7%, #fff);
427
521
  }
428
- .slotSel {
522
+ .hourOn,
523
+ .hourOn:hover {
524
+ border-color: var(--eureka-primary, #3d5a7f);
429
525
  background: var(--eureka-primary, #3d5a7f);
430
526
  color: #fff;
431
- border-color: var(--eureka-primary, #3d5a7f);
432
527
  }
433
- .slotTaken {
434
- color: #c3c9d2;
435
- border-style: dashed;
436
- cursor: not-allowed;
528
+ .hourTaken,
529
+ .hourTaken:hover {
530
+ border: 1px dashed #b8b8b8;
531
+ color: #a0a0a0;
437
532
  text-decoration: line-through;
533
+ cursor: not-allowed;
438
534
  }
439
- .slotGroup + .slotGroup {
440
- margin-top: 12px;
441
- }
442
- .slotGroupTitle {
443
- margin: 0 0 6px;
444
- font-size: 12px;
445
- font-weight: 600;
446
- color: #787878;
447
- text-transform: uppercase;
448
- letter-spacing: 0.04em;
449
- }
450
- .firstTag {
451
- display: block;
452
- margin-top: 2px;
453
- font-size: 10px;
454
- font-weight: 500;
455
- opacity: 0.8;
456
- }
457
- .tz {
458
- margin: 0 0 10px;
459
- font-size: 12px;
535
+ .empty {
536
+ margin: 0;
537
+ font-size: 13px;
460
538
  color: #787878;
461
539
  }
462
540
  .retry {
@@ -465,182 +543,281 @@
465
543
  flex-wrap: wrap;
466
544
  gap: 10px;
467
545
  font-size: 13px;
468
- color: #d0473f;
469
- padding: 12px 0;
546
+ color: #cc2936;
470
547
  }
471
- .empty {
472
- font-size: 13px;
473
- color: #787878;
474
- padding: 12px 0;
548
+ .alert {
549
+ padding: 8px 12px;
550
+ border-radius: 10px;
551
+ background: rgba(204, 41, 54, 0.08);
552
+ color: #cc2936;
553
+ font-size: 12px;
554
+ line-height: 1.4;
475
555
  }
476
556
 
477
- /* step: confirm — the left summary expands into a centered stacked column */
478
- .bookFinal {
557
+ /* Reservar: summary panel + details */
558
+ .summary {
559
+ flex: none;
560
+ width: 300px;
561
+ box-sizing: border-box;
562
+ align-self: flex-start;
563
+ padding: 16px;
564
+ border-radius: 10px;
565
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 5%, transparent);
479
566
  display: flex;
480
567
  flex-direction: column;
568
+ gap: 14px;
481
569
  }
482
- .bookFinal .right {
483
- order: 1;
484
- flex: none;
570
+ .overline {
571
+ margin: 0;
572
+ font-size: 12px;
573
+ font-weight: 700;
574
+ letter-spacing: 0.04em;
575
+ text-transform: uppercase;
576
+ color: #787878;
485
577
  }
486
- .bookFinal .who {
487
- order: 2;
488
- flex: 1;
489
- border-right: none;
490
- border-top: 1px solid var(--eureka-outline, #eceff3);
491
- padding: 24px 20px;
492
- gap: 18px;
493
- align-items: center;
578
+ .sumRow {
579
+ display: flex;
580
+ align-items: flex-start;
581
+ gap: 10px;
494
582
  }
495
- .bookFinal .who > * {
496
- width: 100%;
497
- max-width: 440px;
583
+ .sumIcon {
584
+ flex: none;
585
+ display: flex;
586
+ margin-top: 1px;
587
+ color: var(--eureka-primary, #3d5a7f);
498
588
  }
499
- .bookFinal .lock {
500
- margin-top: 4px;
589
+ .sumText {
590
+ flex: 1 1 auto;
591
+ min-width: 0;
592
+ display: flex;
593
+ flex-direction: column;
594
+ gap: 1px;
595
+ }
596
+ .sumTitle {
597
+ font-size: 13px;
598
+ font-weight: 700;
501
599
  }
502
- .bookFinal .right {
503
- padding-bottom: 10px;
600
+ .sumSub {
601
+ font-size: 12px;
602
+ color: #787878;
603
+ font-variant-numeric: tabular-nums;
504
604
  }
505
- .paneFinal {
605
+ .sumChange {
506
606
  flex: none;
607
+ border: none;
608
+ background: transparent;
609
+ padding: 0;
610
+ font-family: inherit;
611
+ font-size: 12px;
612
+ font-weight: 700;
613
+ color: var(--eureka-primary, #3d5a7f);
614
+ cursor: pointer;
507
615
  }
508
- .paneFinal .qsub {
509
- margin-bottom: 0;
616
+ .sumChange:hover {
617
+ text-decoration: underline;
510
618
  }
511
-
512
- /* ---------- Bottom bar: navigation ---------- */
513
- .navbar {
619
+ .side {
620
+ flex: 1 1 auto;
621
+ min-width: 0;
514
622
  display: flex;
515
- align-items: center;
623
+ flex-direction: column;
516
624
  gap: 14px;
517
- padding: 14px 22px;
518
- border-top: 1px solid var(--eureka-outline, #eceff3);
519
- background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 3%, #fff);
520
625
  }
521
- .navSummary {
522
- flex: 1;
626
+ .known {
627
+ display: flex;
628
+ flex-direction: column;
629
+ box-sizing: border-box;
630
+ padding: 2px 14px;
631
+ border: 1px solid #e5e7eb;
632
+ border-radius: 10px;
633
+ }
634
+ .knownRow {
635
+ display: flex;
636
+ align-items: center;
637
+ gap: 10px;
638
+ padding: 10px 0;
639
+ }
640
+ .knownRow + .knownRow {
641
+ border-top: 1px solid #e5e7eb;
642
+ }
643
+ .knownIcon {
644
+ flex: none;
645
+ color: var(--eureka-primary, #3d5a7f);
646
+ }
647
+ .knownValue {
648
+ flex: 1 1 auto;
523
649
  min-width: 0;
524
650
  font-size: 13px;
525
- color: #787878;
526
651
  overflow: hidden;
527
652
  text-overflow: ellipsis;
528
- white-space: nowrap;
529
653
  }
530
- .navSummary b {
531
- color: var(--eureka-text, #293241);
654
+ .knownFrom {
655
+ flex: none;
656
+ font-size: 11px;
657
+ color: #787878;
532
658
  }
533
- .navHl {
534
- color: var(--booking-accent, #ee6c4d);
535
- font-weight: 800;
659
+ .fineprint {
660
+ margin: 0;
661
+ font-size: 12px;
662
+ color: #787878;
536
663
  }
537
- /* Contacto: vive en la columna del paso final, apilado como el resto del resumen */
538
- .cfields {
664
+ .info {
539
665
  display: flex;
540
- flex-direction: column;
541
- gap: 10px;
542
- }
543
- .err {
666
+ align-items: flex-start;
667
+ gap: 8px;
668
+ box-sizing: border-box;
669
+ padding: 10px 12px;
670
+ border-radius: 10px;
671
+ background: rgba(152, 193, 217, 0.18);
544
672
  font-size: 12px;
545
- color: #d0473f;
546
- margin-top: 6px;
673
+ line-height: 1.4;
674
+ }
675
+ .infoIcon {
676
+ flex: none;
677
+ margin-top: 1px;
678
+ color: var(--eureka-primary, #3d5a7f);
547
679
  }
548
680
 
549
- /* entry card — trigger and booked summary share the wizard card aesthetic */
550
- .entry {
681
+ /* Footer */
682
+ .footer {
683
+ height: 68px;
684
+ flex: none;
685
+ box-sizing: border-box;
686
+ padding: 0 24px;
687
+ border-top: 1px solid #e5e7eb;
551
688
  display: flex;
552
689
  align-items: center;
553
- gap: 13px;
554
- border: 1px solid var(--eureka-outline, #d9dee6);
555
- border-radius: 16px;
556
- padding: 14px 18px;
557
- background: var(--eureka-bg, #fff);
558
- box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
559
- max-width: 560px;
690
+ gap: 12px;
560
691
  }
561
- .entryInfo {
562
- flex: 1;
563
- display: flex;
564
- flex-direction: column;
565
- gap: 2px;
692
+ .footSummary {
693
+ flex: 1 1 auto;
566
694
  min-width: 0;
695
+ display: flex;
696
+ align-items: center;
697
+ gap: 8px;
698
+ font-size: 13px;
699
+ color: #787878;
700
+ white-space: nowrap;
701
+ overflow: hidden;
567
702
  }
568
- .entryLabel {
569
- font-size: 14.5px;
703
+ .chip {
704
+ flex: none;
705
+ display: inline-flex;
706
+ align-items: center;
707
+ height: 22px;
708
+ padding: 0 8px;
709
+ border-radius: 6px;
710
+ background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 10%, transparent);
711
+ color: var(--eureka-primary, #3d5a7f);
712
+ font-size: 12px;
570
713
  font-weight: 700;
571
- color: var(--eureka-text, #293241);
714
+ font-variant-numeric: tabular-nums;
572
715
  }
573
- .entrySub {
574
- font-size: 12.5px;
575
- color: #787878;
716
+ .chipAccent {
717
+ background: color-mix(in srgb, var(--booking-accent, #ee6c4d) 14%, transparent);
718
+ color: color-mix(in srgb, var(--booking-accent, #ee6c4d) 78%, #000);
576
719
  }
577
- .bookedIcon {
578
- width: 46px;
579
- height: 46px;
580
- border-radius: 50%;
581
- background: #2e9367;
582
- color: #fff;
583
- display: grid;
584
- place-items: center;
585
- font-weight: 800;
586
- font-size: 17px;
720
+ .footHint {
721
+ overflow: hidden;
722
+ text-overflow: ellipsis;
723
+ }
724
+ .footActions {
587
725
  flex: none;
726
+ display: flex;
727
+ gap: 12px;
588
728
  }
589
- .bookedMain {
590
- font-size: 13.5px;
591
- font-weight: 600;
592
- color: var(--eureka-text, #293241);
729
+ .primaryAction {
730
+ flex: none;
593
731
  }
594
732
 
595
733
  @media (prefers-reduced-motion: reduce) {
596
- .pane {
734
+ .body {
597
735
  animation: none;
598
736
  }
599
- .card {
600
- transition: none;
601
- }
602
737
  }
603
738
 
604
- /* responsive */
739
+ /* ================= Phones: a full-screen sheet ================= */
605
740
  @media (max-width: 760px) {
606
- .book {
607
- grid-template-columns: 1fr;
608
- min-height: 0;
741
+ .card {
742
+ width: 100%;
743
+ height: 100dvh;
744
+ max-height: none;
745
+ border: none;
746
+ border-radius: 0;
609
747
  }
610
- .who {
611
- border-right: none;
612
- border-bottom: 1px solid var(--eureka-outline, #eceff3);
748
+ .header {
749
+ height: 60px;
750
+ padding: 0 8px 0 16px;
613
751
  }
614
- .lock {
615
- margin-top: 4px;
752
+ .stepper {
753
+ height: 42px;
754
+ padding: 0 16px;
755
+ gap: 8px;
756
+ font-size: 12px;
616
757
  }
617
- .right {
618
- padding: 16px 16px 20px;
758
+ .stepGroup {
759
+ gap: 8px;
619
760
  }
620
- .persons,
621
- .monthWrap {
622
- max-width: none;
761
+ .stepSep {
762
+ width: 16px;
623
763
  }
624
- .slots {
625
- max-width: none;
764
+ .step:not(.stepOn) .stepLabel {
765
+ display: none;
626
766
  }
627
- .navbar {
628
- flex-wrap: wrap;
767
+ .body {
768
+ padding: 8px 16px 16px;
629
769
  }
630
- .navSummary {
631
- flex-basis: 100%;
632
- white-space: normal;
770
+ .options {
771
+ grid-template-columns: minmax(0, 1fr);
633
772
  }
634
- }
635
- @media (max-width: 400px) {
636
- .slots {
637
- grid-template-columns: repeat(2, 1fr);
773
+ .split {
774
+ flex: none;
775
+ flex-direction: column;
776
+ gap: 14px;
638
777
  }
639
- .stepper {
640
- font-size: 11.5px;
641
- gap: 5px;
778
+ .calendar,
779
+ .summary {
780
+ width: 100%;
781
+ align-self: stretch;
642
782
  }
643
- .stepSep {
644
- width: 12px;
783
+ .monthHead {
784
+ height: 40px;
785
+ }
786
+ .iconBtn {
787
+ width: 44px;
788
+ height: 44px;
789
+ border-radius: 22px;
790
+ }
791
+ .day {
792
+ width: 40px;
793
+ height: 40px;
794
+ border-radius: 20px;
795
+ font-size: 14px;
796
+ }
797
+ .hourList {
798
+ flex: none;
799
+ overflow: visible;
800
+ display: grid;
801
+ grid-template-columns: repeat(3, minmax(0, 1fr));
802
+ padding-right: 0;
803
+ }
804
+ .hour {
805
+ height: 44px;
806
+ }
807
+ .footer {
808
+ height: auto;
809
+ padding: 12px 16px 20px;
810
+ flex-direction: column;
811
+ align-items: stretch;
812
+ gap: 10px;
813
+ }
814
+ .footSummary:empty {
815
+ display: none;
816
+ }
817
+ .footActions {
818
+ gap: 10px;
819
+ }
820
+ .primaryAction {
821
+ flex: 1 1 auto;
645
822
  }
646
823
  }