/**
 * Panel de gestión de citas (frontend para personal autorizado).
 *
 * Todo se mantiene bajo `.docflow-panel` para no interferir con el tema. El contenedor lleva
 * además la clase de la plantilla activa, `.docflow-panel--{plantilla}` (por defecto
 * `--basic`). Los estilos de abajo son la plantilla «básica» (los valores por defecto); una
 * plantilla nueva se registra con el filtro `docflow_panel_templates` y sobreescribe el aspecto
 * con reglas `.docflow-panel--{su-clave} { … }`, sin cambiar el HTML ni el JS.
 */
.docflow-panel {
	max-width: 1280px;
	margin: 24px auto;
	font-size: 14px;
}

/* El aviso de acceso (login / sin permiso) sí conserva el aspecto de tarjeta. */
.docflow-panel--aviso {
	max-width: 520px;
	margin: 40px auto;
	padding: 24px;
	border: 1px solid #e6e7eb;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 );
	text-align: center;
}

.docflow-panel--aviso .button {
	display: inline-block;
	margin-top: 8px;
	padding: 8px 18px;
	border-radius: 8px;
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.docflow-panel__placeholder {
	margin: 0;
	padding: 40px 0;
	color: #667085;
	text-align: center;
}

/* Cada módulo dentro del panel (separación cuando se cargan varios con modulo="todo"). */
.docflow-panel-modulo + .docflow-panel-modulo {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #eceef1;
}

/* Módulo Citas: toolbar de filtros + búsqueda + nueva. */
.docflow-citas-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.docflow-citas-buscar {
	flex: 1 1 200px;
	min-width: 160px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 13px;
}

.docflow-citas-toolbar select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 38px;
	padding: 0 32px 0 12px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 13px;
	color: #344054;
	font-size: 13px;
	cursor: pointer;
}

.docflow-citas-buscar:focus,
.docflow-citas-toolbar select:focus {
	border-color: #2271b1;
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.12 );
}

/* Filtro fijado desde el bloque: etiqueta de solo lectura «Etiqueta: Valor». */
.docflow-filtro-fijo {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	background: #f9fafb;
	line-height: 38px;
	white-space: nowrap;
}

.docflow-filtro-fijo__k {
	color: #98a2b3;
	font-size: 12px;
}

.docflow-filtro-fijo__v {
	color: #1d2939;
	font-size: 13px;
	font-weight: 500;
}

/* Módulo Resumen: tarjetas numéricas de citas (hoy / este mes). */
.docflow-resumen {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.docflow-resumen-grupos {
	display: flex;
	flex-direction: column;
	gap: 28px;
	transition: opacity 0.15s ease;
}

.docflow-resumen-grupo__titulo {
	margin: 0 0 12px;
	color: #667085;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.docflow-resumen-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 12px;
}

.docflow-resumen-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	background: #fff;
}

.docflow-resumen-card__num {
	color: #1d2939;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.docflow-resumen-card__label {
	color: #667085;
	font-size: 13px;
}

.docflow-citas-nueva {
	height: 38px;
	margin-left: auto;
	padding: 0 16px;
	border: 1px solid #2271b1;
	border-radius: 8px;
	background: #2271b1;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.docflow-citas-nueva:hover {
	border-color: #1d6097;
	background: #1d6097;
}

/* Módulo Citas: lista de filas. */
.docflow-citas-list {
	border: 1px solid #f0f1f4;
	border-radius: 10px;
	overflow: hidden;
}

.docflow-cita-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border-top: 1px solid #f2f4f7;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.docflow-cita-row:first-child {
	border-top: 0;
}

.docflow-cita-row:hover,
.docflow-cita-row:focus {
	background: #f9fafb;
	outline: none;
}

.docflow-cita-row__fecha {
	flex: 0 0 118px;
	color: #1d2939;
	font-size: 13px;
	font-weight: 600;
}

.docflow-cita-row__main {
	display: flex;
	flex-direction: column;
	flex: 2 1 0;
	min-width: 0;
}

.docflow-cita-row__paciente {
	color: #1d2939;
	font-weight: 500;
}

.docflow-cita-row__contacto {
	color: #98a2b3;
	font-size: 12px;
}

.docflow-cita-row__meta {
	display: flex;
	flex-direction: column;
	flex: 2 1 0;
	min-width: 0;
	color: #475467;
	font-size: 13px;
}

.docflow-cita-row__sub {
	color: #98a2b3;
	font-size: 12px;
}

.docflow-cita-row__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.docflow-cita-row__controls .docflow-inline-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	max-width: none;
	height: 32px;
	padding: 0 26px 0 10px;
	border: 1px solid #e4e7ec;
	border-radius: 6px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 12px;
	font-size: 12px;
	cursor: pointer;
}

.docflow-citas-vacio,
.docflow-citas-cargando {
	padding: 36px;
	color: #98a2b3;
	text-align: center;
}

/* Paginación de la lista de citas. */
.docflow-citas-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.docflow-citas-pager:empty {
	display: none;
}

.docflow-citas-pager__info {
	color: #667085;
	font-size: 13px;
}

.docflow-citas-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.docflow-citas-pager__btn:hover:not( :disabled ) {
	border-color: #d0d5dd;
	background: #f9fafb;
}

.docflow-citas-pager__btn:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Detalle de la cita en el modal: la ficha sin doble borde. */
.docflow-cita-modal .docflow-ficha-card {
	border: 0;
	box-shadow: none;
}

/* Ficha de paciente: notas e historial de citas. */
.docflow-ficha-notas {
	margin-top: 12px;
}

.docflow-ficha-notas h3,
.docflow-paciente-historial h3 {
	margin: 0 0 8px;
	color: #667085;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.docflow-ficha-notas p {
	margin: 0;
	color: #344054;
	font-size: 14px;
}

.docflow-paciente-historial {
	margin-top: 20px;
}

.docflow-historial-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #f0f1f4;
	border-radius: 10px;
	overflow: hidden;
}

.docflow-historial-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid #f2f4f7;
	font-size: 13px;
}

.docflow-historial-item:first-child {
	border-top: 0;
}

.docflow-historial-fecha {
	flex: 0 0 118px;
	color: #1d2939;
	font-weight: 600;
}

.docflow-historial-serv {
	flex: 1 1 0;
	min-width: 0;
	color: #475467;
}

@media (max-width: 700px) {
	.docflow-cita-row {
		flex-wrap: wrap;
		gap: 6px 12px;
	}

	.docflow-cita-row__controls {
		width: 100%;
	}
}

/* Barra de filtros del calendario: toolbar limpia con un ícono de embudo sutil. */
.docflow-cal-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.docflow-cal-toolbar::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	margin-right: 2px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E" ) no-repeat center / contain;
}

/* Filtros del calendario: dropdowns minimalistas (sin apariencia nativa, chevron propio). */
#docflow-calendar-filtros select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 38px;
	max-width: 100%;
	margin: 0;
	padding: 0 34px 0 12px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background-color: #fff;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	color: #344054;
	font-size: 13px;
	line-height: 38px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#docflow-calendar-filtros select:hover {
	border-color: #d0d5dd;
}

#docflow-calendar-filtros select:focus {
	border-color: #2271b1;
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.12 );
}

/**
 * Toolbar de FullCalendar (prev/next/hoy + vistas): botones minimalistas, coherentes con los
 * dropdowns. Scoped a `.docflow-panel` para no alterar el calendario del admin (calendar.css es
 * compartido).
 */
.docflow-panel #docflow-calendar .fc .fc-toolbar-title {
	font-size: 18px;
}

.docflow-panel #docflow-calendar .fc .fc-button {
	height: 38px;
	padding: 0 14px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: #344054;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.docflow-panel #docflow-calendar .fc .fc-button:hover {
	border-color: #d0d5dd;
	background: #f9fafb;
	color: #344054;
}

.docflow-panel #docflow-calendar .fc .fc-button:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.12 );
}

.docflow-panel #docflow-calendar .fc .fc-button:disabled {
	border-color: #e4e7ec;
	background: #fff;
	opacity: 0.45;
}

/* Vista activa / botón presionado: acento azul tenue. */
.docflow-panel #docflow-calendar .fc .fc-button-primary:not( :disabled ).fc-button-active,
.docflow-panel #docflow-calendar .fc .fc-button-primary:not( :disabled ):active {
	border-color: #2271b1;
	background: #eff4fa;
	color: #2271b1;
	box-shadow: none;
}

/* Grupo de botones (prev/next): segmentos unidos sin doble borde. */
.docflow-panel #docflow-calendar .fc .fc-button-group .fc-button:not( :last-child ) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.docflow-panel #docflow-calendar .fc .fc-button-group .fc-button:not( :first-child ) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/**
 * Calendario minimalista (panel): líneas muy suaves, cabeceras sin relleno, eventos como
 * píldoras planas y tipografía discreta. Scoped a `.docflow-panel` (calendar.css es compartido).
 */
.docflow-panel #docflow-calendar {
	--fc-border-color: #f0f1f4;
	--fc-today-bg-color: #f7faff;
	--fc-neutral-bg-color: #fcfcfd;
	--fc-now-indicator-color: #f04438;
}

/* Cabecera de días / recursos: sin relleno, solo texto muted. */
.docflow-panel #docflow-calendar .fc .fc-col-header-cell {
	background: transparent;
}

.docflow-panel #docflow-calendar .fc .fc-col-header-cell-cushion {
	padding: 10px 6px;
	color: #98a2b3;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Números de día más ligeros. */
.docflow-panel #docflow-calendar .fc .fc-daygrid-day-number {
	color: #667085;
	font-size: 12px;
}

.docflow-panel #docflow-calendar .fc .fc-day-other .fc-daygrid-day-number {
	color: #cdd2db;
}

/* Eventos: píldoras planas y limpias. */
.docflow-panel #docflow-calendar .fc-event {
	padding: 2px 8px;
	border: none;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 500;
}

.docflow-panel #docflow-calendar .fc-event:hover {
	filter: brightness( 0.96 );
}

/* Rejilla horaria: filas con más aire y etiquetas muy discretas. */
.docflow-panel #docflow-calendar .fc .fc-timegrid-slot {
	height: 2.6em;
}

.docflow-panel #docflow-calendar .fc .fc-timegrid-axis-cushion,
.docflow-panel #docflow-calendar .fc .fc-timegrid-slot-label-cushion {
	color: #98a2b3;
	font-size: 11px;
}

/* «Todo el día» en una sola línea: se ensancha el eje (sincroniza toda la columna de horas)
   y se compacta la etiqueta para que quepa sin cortarse. */
.docflow-panel #docflow-calendar .fc .fc-timegrid-axis-frame {
	min-width: 64px;
}

.docflow-panel #docflow-calendar .fc .fc-timegrid-axis-cushion {
	overflow: visible;
	font-size: 9px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Líneas de media hora apenas visibles. */
.docflow-panel #docflow-calendar .fc .fc-timegrid-slot-minor {
	border-top-style: none;
}

/* Modal de alta/edición de cita. */
.docflow-cita-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.docflow-cita-modal.is-open {
	display: block;
}

.docflow-cita-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 16, 24, 40, 0.5 );
}

.docflow-cita-modal__dialog {
	position: relative;
	max-width: 820px;
	margin: 40px auto;
	max-height: calc( 100vh - 80px );
	overflow: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba( 16, 24, 40, 0.25 );
}

.docflow-cita-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eceef1;
}

.docflow-cita-modal__title {
	margin: 0;
	font-size: 18px;
	color: #101828;
}

.docflow-cita-modal__close {
	padding: 0 6px;
	border: 0;
	background: none;
	color: #667085;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.docflow-cita-modal__body {
	padding: 20px;
}

.docflow-modal-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.docflow-modal-aviso {
	margin-top: 10px;
	color: #b32d2e;
	font-size: 13px;
}

/**
 * Formulario del modal: minimalista y coherente con los filtros/toolbar. Aplana las secciones
 * (sin tarjetas) y unifica el estilo de inputs, selects y áreas de texto.
 */
.docflow-cita-modal__dialog {
	max-width: 760px;
}

.docflow-cita-modal__head {
	padding: 18px 22px;
}

.docflow-cita-modal__title {
	font-size: 17px;
}

.docflow-cita-modal__body {
	padding: 22px;
}

/* Secciones planas con encabezado discreto. */
.docflow-cita-modal .docflow-form-section {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.docflow-cita-modal .docflow-form-section h2 {
	margin: 0 0 12px;
	color: #98a2b3;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.docflow-cita-modal .docflow-field {
	margin-bottom: 14px;
}

.docflow-cita-modal .docflow-field label {
	margin-bottom: 6px;
	color: #475467;
	font-size: 12px;
	font-weight: 500;
}

/* Controles: borde fino, esquinas suaves, altura uniforme. */
.docflow-cita-modal .docflow-field input,
.docflow-cita-modal .docflow-field select,
.docflow-cita-modal .docflow-field textarea,
.docflow-cita-modal .docflow-telcode__toggle,
.docflow-cita-modal .docflow-tel-num,
.docflow-cita-modal .docflow-fecha,
.docflow-cita-modal .docflow-hora-h,
.docflow-cita-modal .docflow-hora-m {
	height: 38px;
	padding: 0 12px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: none;
	color: #344054;
	font-size: 13px;
	line-height: 38px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.docflow-cita-modal .docflow-field textarea {
	height: auto;
	min-height: 84px;
	padding: 10px 12px;
	line-height: 1.5;
	resize: vertical;
}

.docflow-cita-modal .docflow-field input:focus,
.docflow-cita-modal .docflow-field select:focus,
.docflow-cita-modal .docflow-field textarea:focus,
.docflow-cita-modal .docflow-telcode__toggle:focus,
.docflow-cita-modal .docflow-tel-num:focus,
.docflow-cita-modal .docflow-fecha:focus,
.docflow-cita-modal .docflow-hora-h:focus,
.docflow-cita-modal .docflow-hora-m:focus {
	border-color: #2271b1;
	outline: 0;
	box-shadow: 0 0 0 3px rgba( 34, 113, 177, 0.12 );
}

/* Selects: sin apariencia nativa + chevron propio (igual que los filtros). */
.docflow-cita-modal select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 30px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 13px;
	cursor: pointer;
}

/* Hora/minuto: algo más anchos para acomodar el chevron. */
.docflow-cita-modal .docflow-datetime .docflow-hora-h,
.docflow-cita-modal .docflow-datetime .docflow-hora-m {
	min-width: 68px;
}

/* Error de validación de fecha/hora. */
.docflow-cita-modal .docflow-campo-error {
	margin-top: 6px;
	color: #b42318;
	font-size: 12px;
}

/* Acciones del modal: separadas con un divisor sutil. */
.docflow-cita-modal .docflow-modal-actions {
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid #f0f1f4;
}

.docflow-cita-modal .docflow-modal-actions .button {
	height: 40px;
	padding: 0 18px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 13px;
	font-weight: 600;
	line-height: 38px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.docflow-cita-modal .docflow-modal-actions .button:hover {
	border-color: #d0d5dd;
	background: #f9fafb;
}

.docflow-cita-modal .docflow-modal-actions .button-primary {
	border-color: #2271b1;
	background: #2271b1;
	color: #fff;
}

.docflow-cita-modal .docflow-modal-actions .button-primary:hover {
	border-color: #1d6097;
	background: #1d6097;
}