/* =========================================================================
   Telecomatik Booking — frontend widget
   ========================================================================= */
.tkb-widget {
	max-width: 1080px;
	margin: 0 auto;
	color: #F4F8FF;
	font-family: 'Inter', system-ui, sans-serif;
}

.tkb-banner {
	padding: 1rem 1.25rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
	font-size: 0.98rem;
	line-height: 1.5;
}
.tkb-banner--success { background: rgba(28,228,255,.10); border: 1px solid rgba(28,228,255,.35); color: #1CE4FF; }
.tkb-banner--warning { background: rgba(255,196,80,.10); border: 1px solid rgba(255,196,80,.35); color: #FFD27A; }
.tkb-banner--error   { background: rgba(255,99,99,.10);  border: 1px solid rgba(255,99,99,.35);  color: #FF8E8E; }

.tkb-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1.2fr;
	gap: 1.5rem;
	background: rgba(18,36,63,0.55);
	border: 1px solid rgba(28,228,255,0.18);
	border-radius: 20px;
	padding: clamp(1.25rem,2.5vw,2rem);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 22px 60px rgba(5,13,26,0.4);
}
@media (max-width: 980px) { .tkb-grid { grid-template-columns: 1fr; } }

.tkb-step {
	display:flex; align-items:center; gap:.6rem;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 1rem;
}
.tkb-step span {
	display:inline-flex; align-items:center; justify-content:center;
	width:26px; height:26px; border-radius:999px;
	background: linear-gradient(135deg,#1CE4FF 0%,#2A8FFF 100%);
	color:#050D1A; font-size:.85rem; font-weight:700;
}

/* ---------- Calendario ---------- */
.tkb-calendar {
	background: rgba(10,22,40,0.55);
	border: 1px solid rgba(168,184,204,0.12);
	border-radius: 14px;
	padding: 0.75rem;
}
.tkb-cal__head {
	display:flex; justify-content:space-between; align-items:center;
	margin-bottom:.75rem; font-weight:600;
}
.tkb-cal__head button {
	background: transparent; border:0; color:#1CE4FF; cursor:pointer;
	font: inherit; font-weight:600; padding:.25rem .5rem; border-radius:8px;
	transition: background .15s ease;
}
.tkb-cal__head button:hover:not(:disabled) { background: rgba(28,228,255,.10); }
.tkb-cal__head button:disabled { opacity:.3; cursor:not-allowed; }

.tkb-cal__grid {
	display:grid; grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.tkb-cal__dow {
	text-align:center; font-size:.75rem; color:#7a8da3; padding:.4rem 0;
	letter-spacing: 0.05em; text-transform:uppercase;
}
.tkb-cal__day {
	aspect-ratio: 1 / 1;
	display:flex; align-items:center; justify-content:center;
	border-radius: 8px;
	background: transparent; border: 0; color: #E4ECF7;
	cursor: pointer; font: inherit; font-size:.95rem;
	transition: background .15s ease, color .15s ease, transform .12s ease;
}
.tkb-cal__day:hover:not(:disabled):not(.is-selected) {
	background: rgba(28,228,255,.10); color: #1CE4FF;
}
.tkb-cal__day.is-today { box-shadow: inset 0 0 0 1px rgba(28,228,255,.45); }
.tkb-cal__day.is-selected {
	background: linear-gradient(135deg,#1CE4FF 0%,#2A8FFF 100%);
	color: #050D1A; font-weight: 700;
}
.tkb-cal__day:disabled, .tkb-cal__day.is-empty { opacity: .25; cursor: default; }

.tkb-tz { color:#7a8da3; font-size:.85rem; margin-top:.6rem; text-align:center; }

/* ---------- Slots ---------- */
.tkb-slots { display:flex; flex-wrap:wrap; gap:.5rem; }
.tkb-slots__empty, .tkb-slots__loading { color:#7a8da3; font-size:.95rem; padding:.5rem 0; }
.tkb-slot {
	background: rgba(10,22,40,0.7);
	color:#E4ECF7;
	border:1px solid rgba(168,184,204,.18);
	border-radius:10px;
	padding:.5rem .85rem;
	cursor:pointer;
	font:inherit; font-size:.92rem; font-weight:500;
	transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.tkb-slot:hover { border-color:#1CE4FF; }
.tkb-slot.is-selected {
	background: linear-gradient(135deg,#1CE4FF 0%,#2A8FFF 100%);
	color:#050D1A; border-color:transparent; font-weight:700;
}

/* ---------- Formulario ---------- */
.tkb-form { display:flex; flex-direction:column; gap:.85rem; }
.tkb-field { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
.tkb-field > span, .tkb-field > legend {
	color:#E4ECF7; font-weight:600; font-size:.85rem;
}
.tkb-field input[type=text],
.tkb-field input[type=email],
.tkb-field input[type=tel],
.tkb-field textarea,
.tkb-field select {
	background: rgba(10,22,40,0.7);
	color:#F4F8FF;
	border:1px solid rgba(168,184,204,.18);
	border-radius:10px;
	padding:.65rem .8rem; font:inherit; font-size:.95rem;
	transition: border-color .15s ease, box-shadow .15s ease;
	font-family: inherit;
}
.tkb-field input:focus, .tkb-field textarea:focus, .tkb-field select:focus {
	outline:none; border-color:#1CE4FF;
	box-shadow:0 0 0 3px rgba(28,228,255,.18);
}
.tkb-field textarea { min-height: 90px; resize: vertical; }

.tkb-gateways { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.tkb-gateway {
	display:flex; align-items:center; gap:.6rem;
	padding:.55rem .8rem;
	background: rgba(10,22,40,0.55);
	border:1px solid rgba(168,184,204,.18);
	border-radius:10px;
	cursor:pointer; font-size:.95rem;
	transition: border-color .15s ease, background .15s ease;
}
.tkb-gateway:hover { border-color: rgba(28,228,255,.45); }
.tkb-gateway input[type=radio] { accent-color:#1CE4FF; }
.tkb-gateway input[type=radio]:checked + span { color:#1CE4FF; font-weight:600; }

.tkb-consent { flex-direction:row; align-items:flex-start; gap:.6rem; font-size:.88rem; color:#A8B8CC; }
.tkb-consent input[type=checkbox] { margin-top:2px; accent-color:#1CE4FF; }

.tkb-summary {
	padding:.75rem 1rem;
	background: rgba(28,228,255,.06);
	border:1px solid rgba(28,228,255,.18);
	border-radius:10px;
	font-size:.95rem;
	color:#cfd9e6;
}
.tkb-summary strong { color:#1CE4FF; }

.tkb-submit {
	display:inline-block;
	background: linear-gradient(135deg,#1CE4FF 0%,#2A8FFF 100%);
	color: #050D1A !important;
	border:0; border-radius:999px;
	padding:.95rem 1.5rem;
	font:inherit; font-weight:700; font-size:1rem;
	cursor:pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 8px 24px rgba(28,228,255,.28);
}
.tkb-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow:0 12px 32px rgba(28,228,255,.4); }
.tkb-submit:disabled { opacity:.45; cursor:not-allowed; }

.tkb-feedback {
	margin-top:.5rem; padding:.75rem 1rem; border-radius:10px;
	font-size:.92rem; display:none;
}
.tkb-feedback.is-error   { display:block; background:rgba(255,99,99,.10); border:1px solid rgba(255,99,99,.35); color:#FF8E8E; }
.tkb-feedback.is-success { display:block; background:rgba(28,228,255,.10); border:1px solid rgba(28,228,255,.35); color:#1CE4FF; }

.tkb-postback {
	margin-top:1.5rem; padding:1.5rem;
	background: rgba(28,228,255,.08);
	border:1px solid rgba(28,228,255,.3);
	border-radius:14px;
}
.tkb-postback h3 { margin:0 0 .5rem; color:#1CE4FF; }
.tkb-postback p  { margin:0; color:#cfd9e6; }
.tkb-postback--cancel { background: rgba(255,196,80,.10); border-color: rgba(255,196,80,.3); }
.tkb-postback--cancel h3 { color:#FFD27A; }

/* ---------- Admin status badges (estilos compartidos) ---------- */
.tkb-status {
	display:inline-block; padding:.2rem .6rem;
	border-radius:999px; font-size:.8rem; font-weight:600;
}
.tkb-status--tkb_confirmed { background:#d2f7df; color:#0f5132; }
.tkb-status--tkb_pending   { background:#fff3cd; color:#856404; }
.tkb-status--tkb_cancelled { background:#f8d7da; color:#842029; }
.tkb-status--tkb_refunded  { background:#cfe2ff; color:#084298; }