/* =====================================================================
   WebMed · theme.css
   Tema visual tipo shadcn sobre Bootstrap 3. Se carga ULTIMO y redefine
   navbar, panels, formularios, botones, tablas, modales y el calendario.
   No requiere cambios de markup: todo se aplica sobre las clases existentes.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
	--ground: #f5f7f8;
	--surface: #ffffff;
	--surface-2: #f0f3f5;
	--ink: #16191d;
	--ink-2: #3a4148;
	--muted: #5a626b;
	--hair: #e3e7ea;
	--hair-2: #cfd6db;
	--accent: #0f6f8a;
	--accent-ink: #ffffff;
	--accent-hover: #0c5b71;
	--accent-soft: #e3f2f6;
	--accent-soft-ink: #0b5065;
	--ring: rgba(15, 111, 138, 0.3);
	--ok: #177245;
	--ok-bg: #dff5e8;
	--wait: #9a5b0c;
	--wait-bg: #fdf0d5;
	--off: #a12a2a;
	--off-bg: #fbe3e3;
	--off-hover: #8a1f1f;
	--r: 10px;
	--r-sm: 7px;
	--shadow: 0 1px 2px rgba(20, 30, 40, 0.05), 0 1px 3px rgba(20, 30, 40, 0.06);
	--shadow-md: 0 8px 24px -8px rgba(20, 30, 40, 0.16);
	--nav-h: 62px;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
html, body { height: auto; min-height: 100%; }
body {
	background: var(--ground) !important;
	background-image: none !important;
	color: var(--ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding-top: var(--nav-h);
}
@media (min-width: 768px) { body { font-size: 15px; } }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }
h1, h2, h3, h4, h5 { font-family: inherit; color: var(--ink); text-wrap: balance; }
h4 { font-weight: 600; font-size: 1.05rem; }
hr { border-top: 1px solid var(--hair); }
*:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Navbar ---------- */
.navbar.navbar-default {
	background: var(--surface);
	border: none;
	border-bottom: 1px solid var(--hair);
	border-radius: 0;
	box-shadow: none;
	min-height: var(--nav-h);
	margin-bottom: 0;
}
.navbar.navbar-default .navbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	float: left;
	height: var(--nav-h);
	padding: 8px 15px;
	white-space: nowrap;
	font-size: 1.1rem;
	color: var(--ink);
}
.navbar-brand > img { height: 42px; max-height: 42px; width: auto; display: block; }
@media (max-width: 767px) {
	.navbar.navbar-default .navbar-brand { padding: 8px 10px; max-width: calc(100% - 70px); gap: 8px; font-size: 1rem; }
	.navbar-brand > img { height: 34px; max-height: 34px; }
}
.navbar.navbar-default .navbar-nav > li > a {
	color: var(--muted);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 10px 12px;
	margin: 11px 2px;
	line-height: 20px;
	border-radius: var(--r-sm);
	text-shadow: none;
	transition: background 0.12s, color 0.12s;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus,
.navbar.navbar-default .navbar-nav > .open > a,
.navbar.navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-default .navbar-nav > .open > a:focus {
	background: var(--surface-2);
	color: var(--ink);
	box-shadow: none;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
	background: var(--surface-2);
	color: var(--ink);
	box-shadow: none;
}
.navbar.navbar-default .navbar-nav > li > a .glyphicon { color: var(--muted); margin-right: 2px; }
.navbar.navbar-default .navbar-nav > .active > a .glyphicon { color: var(--accent); }
.navbar .caret { color: var(--muted); }
.navbar.navbar-default .navbar-toggle {
	margin-top: 13px;
	border: 1px solid var(--hair-2);
	border-radius: var(--r-sm);
	background: var(--surface);
}
.navbar.navbar-default .navbar-toggle:hover,
.navbar.navbar-default .navbar-toggle:focus { background: var(--surface-2); }
.navbar.navbar-default .navbar-toggle .icon-bar { background: var(--ink-2); }
.dropdown-menu {
	border: 1px solid var(--hair);
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
	padding: 6px;
	min-width: 220px;
}
.dropdown-menu > li > a {
	color: var(--ink);
	padding: 9px 10px;
	border-radius: var(--r-sm);
	font-size: 0.95rem;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-menu .divider { background: var(--hair); margin: 6px 0; }
@media (max-width: 991px) {
	.navbar.navbar-default .navbar-collapse { border-top: 1px solid var(--hair); background: var(--surface); }
	.navbar.navbar-default .navbar-nav > li > a { margin: 2px 8px; }
	.navbar.navbar-default .navbar-nav .open .dropdown-menu > li > a { color: var(--ink-2); padding: 8px 24px; }
}


/* Navbar colapsado (hamburguesa) tambien en tablet, hasta 991px */
@media (min-width: 768px) and (max-width: 991px) {
	.navbar-header { float: none; }
	.navbar-left, .navbar-right { float: none !important; }
	.navbar-toggle { display: block; }
	.navbar-collapse { border-top: 1px solid var(--hair); box-shadow: none; }
	.navbar-fixed-top { top: 0; border-width: 0 0 1px; }
	.navbar-collapse.collapse { display: none !important; }
	.navbar-nav { float: none !important; margin: 7.5px -15px; }
	.navbar-nav > li { float: none; }
	.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }
	.collapse.in { display: block !important; }
	.navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; }
}

/* ---------- Layout ---------- */
.form-container { padding: 2rem 0 3rem; }
@media (max-width: 767px) { .form-container { padding: 1rem 0 2.5rem; } }
.container { max-width: 1040px; }

/* ---------- Panel → tarjeta ---------- */
.panel, .panel-default {
	background: var(--surface);
	border: 1px solid var(--hair);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	margin-top: 0;
	margin-bottom: 1.25rem;
}
.panel-default > .panel-heading {
	background: var(--surface);
	color: var(--ink);
	border: none;
	border-bottom: 1px solid var(--hair);
	border-radius: var(--r) var(--r) 0 0;
	padding: 16px 20px;
	font-size: 1.18rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.panel-default > .panel-heading .glyphicon { color: var(--accent); margin-right: 6px; font-size: 0.95em; }
.panel-heading::after { content: ""; display: table; clear: both; }
.panel-heading .btn {
	height: 34px;
	line-height: 32px;
	padding: 0 12px;
	font-size: 0.85rem;
	font-weight: 500;
	margin: -5px 0 -5px 10px;
	white-space: nowrap;
}
.panel-heading .btn .glyphicon { color: var(--muted); font-size: 0.85em; margin-right: 2px; }
.panel-body { padding: 20px; }
.panel-footer {
	background: var(--surface-2);
	border-top: 1px solid var(--hair);
	border-radius: 0 0 var(--r) var(--r);
	color: var(--ink-2);
	font-size: 0.98rem;
	padding: 12px 20px;
}
@media (max-width: 767px) {
	.panel-default > .panel-heading { padding: 14px 16px; font-size: 1.02rem; }
	.panel-body { padding: 16px; }
}

/* ---------- Formularios: apilados, legibles ---------- */
.form-horizontal .form-group { margin-left: 0; margin-right: 0; margin-bottom: 1rem; }
.form-horizontal .form-group > [class*="col-"] {
	float: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
}
.form-horizontal .control-label,
.control-label, label {
	text-align: left;
	padding-top: 0;
	margin-bottom: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ink);
}
.form-control {
	height: 44px;
	padding: 0 12px;
	font-size: 16px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--hair-2);
	border-radius: var(--r-sm);
	box-shadow: none;
	transition: border-color 0.12s, box-shadow 0.12s;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.form-control[disabled], .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
textarea.form-control { height: auto; padding: 10px 12px; }
select.form-control[size], select.form-control[multiple] {
	height: auto;
	padding: 6px;
}
select.form-control[size] option, select.form-control[multiple] option {
	padding: 10px 12px;
	border-radius: 6px;
	margin: 2px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}
select.form-control[size] option:checked,
select.form-control[size]:focus option:checked,
select.form-control[multiple] option:checked {
	background: var(--accent-soft) linear-gradient(var(--accent-soft), var(--accent-soft));
	color: var(--accent-soft-ink);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--accent);
}
.help-block { color: var(--muted); font-size: 0.9rem; }
.has-error .form-control { border-color: var(--off); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(161, 42, 42, 0.25); }
.has-error .control-label, .has-error .help-block { color: var(--off); }
.has-success .form-control { border-color: var(--ok); }
.input-group-addon { background: var(--surface-2); border-color: var(--hair-2); color: var(--muted); border-radius: var(--r-sm); }
.input-group-addon.success, .input-group-addon.primary, .input-group-addon.info { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.input-group-addon.warning { background: var(--wait); border-color: var(--wait); color: #fff; }
.input-group-addon.danger { background: var(--off); border-color: var(--off); color: #fff; }
.checkbox label, .radio label { font-weight: 400; color: var(--ink-2); }
.form-group.last { margin-bottom: 0; }

/* ---------- Botones ---------- */
.btn {
	height: 46px;
	padding: 0 18px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 42px;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	box-shadow: none;
	text-shadow: none;
	background-image: none;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	white-space: normal;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-sm, .btn-xs { height: 38px; line-height: 36px; padding: 0 12px; font-size: 0.92rem; }
.btn-lg { height: 50px; line-height: 48px; font-size: 1rem; }
.btn-block + .btn-block { margin-top: 8px; }

.btn.btn-primary, .btn.btn-success, .btn.btn-info,
.btn.btn-primary:focus, .btn.btn-success:focus, .btn.btn-info:focus {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-info:hover,
.btn.btn-primary:active, .btn.btn-success:active, .btn.btn-info:active,
.btn.btn-primary.active, .btn.btn-success.active, .btn.btn-info.active {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-ink);
}
.btn.btn-default, .btn.btn-default:focus, .btn.btn-warning, .btn.btn-warning:focus {
	background: var(--surface);
	border-color: var(--hair-2);
	color: var(--ink);
}
.btn.btn-default:hover, .btn.btn-default:active, .btn.btn-default.active,
.btn.btn-warning:hover, .btn.btn-warning:active {
	background: var(--surface);
	border-color: var(--accent);
	color: var(--accent);
}
.btn.btn-danger, .btn.btn-danger:focus { background: var(--surface); border-color: var(--hair-2); color: var(--off); }
.btn.btn-danger:hover, .btn.btn-danger:active { background: var(--off); border-color: var(--off); color: #fff; }
.btn-link { color: var(--accent); font-weight: 500; }
.btn[disabled], .btn.disabled { opacity: 0.45; box-shadow: none; }

/* ---------- Menú principal (panel.html): tiles ---------- */
.col-md-5ths .btn, .col-md-3 > .btn[onclick] {
	height: auto !important;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 10px;
	line-height: 1.3;
	overflow-wrap: normal;
	hyphens: none;
	word-break: normal;
	background: var(--surface);
	border: 1px solid var(--hair);
	color: var(--ink);
	box-shadow: var(--shadow);
	margin-bottom: 14px;
	transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.col-md-5ths .btn:hover, .col-md-5ths .btn:focus, .col-md-3 > .btn[onclick]:hover, .col-md-3 > .btn[onclick]:focus {
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
	color: var(--ink);
	background: var(--surface);
}
.col-md-5ths .btn .glyphicon, .col-md-3 > .btn[onclick] .glyphicon { color: var(--accent); }
.col-md-5ths .btn-danger .glyphicon, .col-md-3 > .btn-danger[onclick] .glyphicon { color: var(--off); }
.col-md-5ths .btn-danger:hover { border-color: var(--off); }
.col-md-5ths .btn strong, .col-md-3 > .btn[onclick] strong { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.col-md-5ths .btn .glyphicon, .col-md-3 > .btn[onclick] .glyphicon { font-size: 44px !important; }
.col-md-5ths .btn > div, .col-md-3 > .btn[onclick] > div { margin-top: 14px !important; font-size: 1rem !important; }
@media (min-width: 768px) and (max-width: 991px) {
	.col-md-5ths { width: 33.333%; }
	.col-md-3:has(> .btn[onclick]) { width: 50%; float: left; padding: 0 8px; }
}
@media (max-width: 767px) {
	.col-md-5ths { width: 50%; float: left; padding: 0 6px; }
	.col-md-5ths:nth-child(5) { width: 100%; }
	.col-md-5ths .btn, .col-md-3 > .btn[onclick] { min-height: 120px; padding: 18px 8px; }
	.col-md-5ths .btn .glyphicon { font-size: 30px !important; }
}


/* Inicio: la fila de tiles usa todo el ancho de la tarjeta en desktop */
@media (min-width: 992px) {
	.panel-body > .col-sm-offset-1.col-sm-10:has(.col-md-5ths), .panel-body > .col-sm-offset-1.col-sm-10:has(.col-md-3 > .btn[onclick]) { width: 100%; margin-left: 0; }
	.col-md-5ths { padding: 0 8px; }
}

/* ---------- Tablas (ver / cancelar turnos) ---------- */
.table-responsive { border: none; margin-bottom: 0; }
.table {
	margin-bottom: 0;
	font-size: 0.95rem;
	border: 1px solid var(--hair);
	border-radius: var(--r);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.table > thead > tr > th {
	background: var(--surface-2);
	color: var(--muted);
	font-size: 0.71rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--hair);
	padding: 10px 14px;
	vertical-align: middle;
}
.table > tbody > tr > td {
	padding: 13px 14px;
	border-top: 1px solid var(--hair);
	vertical-align: middle;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.table > tbody > tr:first-child > td { border-top: none; }
.table > tbody > tr:hover > td { background: rgba(22, 25, 29, 0.025); }
.table .btn { height: auto; min-height: 38px; line-height: 1.3; padding: 8px 12px; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 767px) {
	.table { border: none; border-radius: 0; overflow: visible; }
	.table, .table > tbody { display: block; width: 100%; }
	.table > thead { display: none; }
	.table > tbody > tr {
		display: block;
		background: var(--surface);
		border: 1px solid var(--hair);
		border-radius: var(--r);
		box-shadow: var(--shadow);
		padding: 12px 14px;
		margin-bottom: 10px;
	}
	.table > tbody > tr > td { display: block; padding: 3px 0; border: none !important; background: none !important; }
	.table > tbody > tr > td:first-child { display: none; } /* columna "#" */
	.table > tbody > tr > td:nth-child(2) { font-weight: 600; font-size: 1rem; color: var(--ink); }
	.table > tbody > tr > td:nth-child(3) { font-weight: 500; color: var(--accent-soft-ink); margin-bottom: 4px; }
	.table > tbody > tr > td:nth-child(n+4) { color: var(--ink-2); font-size: 0.9rem; }
	.table > tbody > tr > td:last-child { padding-top: 10px; }
	.table .btn { width: 100%; }
}

/* ---------- Modales ---------- */
.modal-content {
	border: 1px solid var(--hair);
	border-radius: var(--r);
	box-shadow: var(--shadow-md);
}
.modal-header { border-bottom: 1px solid var(--hair); padding: 16px 20px; }
.modal-title, h1.modal-title, h2.modal-title, h3.modal-title, h4.modal-title {
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: var(--ink);
}
.modal-body { padding: 20px; color: var(--ink-2); }
/* Datos dentro de modales: lead + filas etiqueta/valor */
.modal-body h3 {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 14px;
	color: var(--ink);
}
.modal-body h4 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 10px 0;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
}
.modal-body h4 + h4 { border-top: 1px solid var(--hair); }
.modal-body h4 strong, .modal-body h4 b {
	flex: 0 0 118px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}
.modal-body br { display: none; }
.modal-body br + h4, .modal-body p {
	border-top: none;
	margin-top: 10px;
	padding-top: 12px;
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--muted);
}
.modal-body br + h4 { border-top: 1px dashed var(--hair-2); }

.modal-footer { border-top: 1px solid var(--hair); padding: 14px 20px; }
.modal-footer .btn + .btn { margin-left: 8px; }
.modal .close { opacity: 0.55; text-shadow: none; font-weight: 400; color: var(--ink); }
.modal .close:hover { opacity: 1; }
.modal-backdrop.in { opacity: 0.45; }
@media (min-width: 768px) { .modal-dialog { margin: 60px auto; } }

/* ---------- Alerts / etiquetas ---------- */
.alert {
	position: relative;
	border: none;
	border-radius: var(--r);
	padding: 12px 16px 12px 46px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.alert::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 13px;
	width: 20px;
	height: 20px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.alert-info { background: var(--accent-soft); color: var(--accent-soft-ink); }
.alert-info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.alert-success { background: var(--ok-bg); color: var(--ok); }
.alert-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177245' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.alert-warning { background: var(--wait-bg); color: var(--wait); }
.alert-warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a5b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.alert-danger { background: var(--off-bg); color: var(--off); }
.alert-danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a12a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.label { border-radius: 999px; font-weight: 500; padding: 3px 9px; }
.well { background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: none; }

/* ---------- Sacar turno: pasos, horas, calendario ---------- */
.step-description {
	position: relative;
	background: var(--accent-soft);
	color: var(--accent-soft-ink);
	border: none;
	border-left: none;
	border-radius: var(--r);
	padding: 12px 16px 12px 46px;
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 14px;
}
.step-description::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 13px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.step-description strong, .step-description b { color: var(--ink); font-weight: 600; }
.step-header { color: var(--muted); font-size: 1rem; font-weight: 500; }
.step-header strong { color: var(--ink); font-weight: 600; }
.choosen-especialty, .choosen-professional, .choosen-date { font-weight: 600; color: var(--ink); }
#selectEsp, #selectDoc, #selectPrest {
	font-size: 15px;
	border: 1px solid var(--hair-2);
	border-radius: var(--r-sm);
}
#selectEsp:focus, #selectDoc:focus, #selectPrest:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--ring);
}
.nextStepButton { margin-top: 24px; }

.hourList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 10px;
	width: auto;
	margin: 6px auto 0;
	padding: 0;
}
.hourList li {
	display: inline-block;
	margin: 0;
	padding: 0 14px;
	min-width: 84px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: var(--accent-soft);
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	color: var(--accent-soft-ink);
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}
.hourList li:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.hourList .selectedHour, .hourList .selectedHour:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
}
#hoursContainer { padding: 4px; height: auto; min-height: 0; max-height: none; }

/* jQuery UI datepicker */
#datepicker .ui-datepicker,
.ui-datepicker {
	width: 100%;
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--hair);
	border-radius: var(--r);
	box-shadow: none;
	font-family: inherit;
	font-size: 0.92rem;
}
.ui-datepicker .ui-datepicker-header {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--hair);
	border-radius: 0;
	padding: 6px 0 10px;
	margin-bottom: 4px;
	color: var(--ink);
	font-weight: 600;
}
.ui-datepicker .ui-datepicker-title { font-size: 0.95rem; text-transform: capitalize; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 4px;
	width: 32px;
	height: 32px;
	border: 1px solid var(--hair-2);
	border-radius: var(--r-sm);
	background: var(--surface);
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev { left: 4px; }
.ui-datepicker .ui-datepicker-next { right: 4px; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { border-color: var(--accent); background: var(--surface); }
.ui-datepicker .ui-datepicker-prev .ui-icon, .ui-datepicker .ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-left: 2px solid var(--ink-2);
	border-bottom: 2px solid var(--ink-2);
	transform: translate(-30%, -50%) rotate(45deg);
}
.ui-datepicker .ui-datepicker-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.ui-datepicker table { font-size: inherit; margin: 0; }
.ui-datepicker th { color: var(--muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 0; }
.ui-datepicker td { padding: 2px; }
.ui-datepicker td span, .ui-datepicker td a {
	display: block;
	text-align: center;
	padding: 0;
	height: 40px;
	line-height: 40px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.ui-datepicker td a.ui-state-default:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }
.ui-datepicker td a.ui-state-highlight { border-color: var(--accent); color: var(--accent); }
.ui-datepicker td a.ui-state-active, .ui-datepicker td a.ui-state-active:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
}
.ui-datepicker td.ui-state-disabled span, .ui-datepicker td.ui-datepicker-unselectable span { color: var(--hair-2); }
.ui-datepicker td.ui-datepicker-other-month span { color: var(--hair-2); }
@media (max-width: 767px) {
	.hourList li { flex: 1 1 calc(33.33% - 10px); min-width: 0; padding: 0 6px; }
	.nextStepButton { width: 100%; }
}


/* Sin scroll horizontal, nunca */
html, body { overflow-x: hidden; max-width: 100%; }

/* Titulo de paso (Reserva de turno) en mobile: linea propia, legible */
@media (max-width: 767px) {
	.panel-heading .step-header {
		display: block;
		float: none;
		width: 100%;
		clear: both;
		margin: 10px 0 0;
		padding-top: 10px;
		border-top: 1px dashed var(--hair-2);
		text-align: left;
		font-size: 0.9rem;
		line-height: 1.4;
		color: var(--muted);
	}
	.panel-heading .step-header strong { display: block; color: var(--ink); font-size: 1rem; margin-top: 2px; }
	.panel-heading .btn { margin: -3px 0 -3px 8px; }
}


/* Calendario: colores del tema (specificidad por #datepicker para pisar jQuery UI) */
#datepicker .ui-datepicker, #datepicker.ui-widget-content, #datepicker .ui-widget-content { background: var(--surface); border-color: var(--hair); color: var(--ink); }
#datepicker .ui-widget-header { background: transparent; border: none; border-bottom: 1px solid var(--hair); color: var(--ink); }
#datepicker td span, #datepicker td a,
#datepicker .ui-state-default, #datepicker .ui-widget-content .ui-state-default {
	background: var(--accent-soft);
	background-image: none;
	border: 1px solid transparent;
	color: var(--accent-soft-ink);
	font-weight: 700;
	text-decoration: none;
}
#datepicker td a.ui-state-default:hover { background: var(--accent); color: var(--accent-ink); }
#datepicker .ui-state-highlight, #datepicker .ui-widget-content .ui-state-highlight { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-ink); }
#datepicker .ui-state-active, #datepicker .ui-widget-content .ui-state-active,
#datepicker td a.ui-state-active, #datepicker td a.ui-state-active:hover { background: var(--accent); background-image: none; border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
#datepicker td.ui-state-disabled span, #datepicker td.ui-datepicker-unselectable span, #datepicker td.ui-datepicker-other-month span,
#datepicker .ui-state-disabled .ui-state-default { background: transparent; color: var(--hair-2); font-weight: 500; opacity: 1; }
#datepicker th { color: var(--ink-2); font-size: 0.78rem; font-weight: 700; }
#datepicker .ui-datepicker-title { color: var(--ink); font-weight: 700; }


/* Pie de tarjeta con botones (Volver / Confirmar): no colapsar, alinear y separar */
.panel-footer::after { content: ""; display: table; clear: both; }
.panel-footer:has(.btn) {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px 12px;
	min-height: 0;
}
.panel-footer .btn { float: none !important; margin: 0 !important; }
.panel-footer #backButton { grid-column: 1; justify-self: start; }
.panel-footer #submit-appointment { grid-column: 2; justify-self: center; }
.panel-footer .btn:only-child { grid-column: 2; justify-self: center; }
@media (max-width: 767px) {
	.panel-footer:has(.btn) { grid-template-columns: 1fr; }
	.panel-footer:has(.btn) .btn { grid-column: 1; width: 100% !important; justify-self: stretch; }
	.panel-footer #submit-appointment { grid-row: 1; }
}


/* ---------- Iconos: glyphicons -> Lucide (SVG por mask, heredan color) ---------- */
.glyphicon {
	font-family: inherit !important;
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	top: 0;
	vertical-align: -0.18em;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.glyphicon::before { content: none !important; }
.btn .glyphicon { vertical-align: -0.2em; }
.panel-default > .panel-heading .glyphicon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.glyphicon-arrow-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
.glyphicon-arrow-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.glyphicon-upload { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/svg%3E"); }
.glyphicon-user { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.glyphicon-log-out { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E"); }
.glyphicon-home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E"); }
.glyphicon-refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E"); }
.glyphicon-ok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.glyphicon-log-in { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E"); }
.glyphicon-list { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' x2='21' y1='6' y2='6'/%3E%3Cline x1='8' x2='21' y1='12' y2='12'/%3E%3Cline x1='8' x2='21' y1='18' y2='18'/%3E%3Cline x1='3' x2='3.01' y1='6' y2='6'/%3E%3Cline x1='3' x2='3.01' y1='12' y2='12'/%3E%3Cline x1='3' x2='3.01' y1='18' y2='18'/%3E%3C/svg%3E"); }
.glyphicon-remove { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.glyphicon-info-sign { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.glyphicon-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.glyphicon-time { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.glyphicon-minus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.glyphicon-list-alt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); }

/* ---------- Detalles ---------- */
#username { font-weight: 500; }
.rotating { color: var(--muted); }
#dataLoader { color: var(--muted); padding: 12px 0; }
.text-muted { color: var(--muted); }