/* Ventanas emergentes unificadas de TokkiNovel. */

/* El botón de "Novela terminada" es la referencia para todas las X. */
.tokki-completed-popup__close,
.tokki-notifications-popup-close,
.tokki-library .tokki-library-filter-close,
.tokki-novel-info-close,
.tokki-profile-modal-close,
.tokki-comment-report-close,
.tokki-role-rules-close,
.tokki-novel-subpanel-close,
.tokki-notes-close,
.tokki-chapter-note-box header button[data-tokki-chapter-note-close],
.tokki-chapter-link-dialog .tokki-link-dialog-close,
.tokki-chapter-color-dialog .tokki-link-dialog-close,
#tokki-recommendation-form .tokki-link-dialog-close,
.tokki-writer-options-close,
.tokki-note-close,
.tokki-rating-modal-close {
	display: inline-flex !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #858289 !important;
	font-family: Arial, sans-serif !important;
	font-size: 26px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transform: none !important;
	transition: color .18s ease !important;
}

.tokki-completed-popup__close:hover,
.tokki-completed-popup__close:focus,
.tokki-completed-popup__close:active,
.tokki-notifications-popup-close:hover,
.tokki-notifications-popup-close:focus,
.tokki-library .tokki-library-filter-close:hover,
.tokki-library .tokki-library-filter-close:focus,
.tokki-novel-info-close:hover,
.tokki-novel-info-close:focus,
.tokki-profile-modal-close:hover,
.tokki-profile-modal-close:focus,
.tokki-comment-report-close:hover,
.tokki-comment-report-close:focus,
.tokki-role-rules-close:hover,
.tokki-role-rules-close:focus,
.tokki-novel-subpanel-close:hover,
.tokki-novel-subpanel-close:focus,
.tokki-notes-close:hover,
.tokki-notes-close:focus,
.tokki-chapter-note-box header button[data-tokki-chapter-note-close]:hover,
.tokki-chapter-note-box header button[data-tokki-chapter-note-close]:focus,
.tokki-link-dialog-close:hover,
.tokki-link-dialog-close:focus,
.tokki-writer-options-close:hover,
.tokki-writer-options-close:focus,
.tokki-note-close:hover,
.tokki-note-close:focus,
.tokki-rating-modal-close:hover,
.tokki-rating-modal-close:focus {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	outline: none !important;
}

/* Base del modal de Filtros de Biblioteca para ventanas equivalentes. */
.tokki-novel-info-sheet,
.tokki-profile-modal-box,
.tokki-role-rules-panel {
	box-sizing: border-box !important;
	width: min(620px, calc(100% - 36px)) !important;
	max-height: min(760px, calc(100dvh - 48px)) !important;
	padding: 24px !important;
	overflow-y: auto !important;
	border: 1px solid #313034 !important;
	border-radius: 24px !important;
	background: #1A191D !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
	color: #D2D1D5 !important;
	overscroll-behavior: contain;
}

.tokki-novel-info-sheet h2,
.tokki-profile-modal-box h2,
.tokki-role-rules-panel h2 {
	color: #E6E6E7 !important;

	line-height: 1.2 !important;
}

.tokki-profile-modal,
.tokki-role-rules-modal,
.tokki-comment-report-dialog {
	z-index: 2147483000 !important;
}

.tokki-profile-modal-box {
	position: relative;
}

.tokki-profile-modal-box > h2 {
	margin: 0 42px 22px 0 !important;
	text-align: left !important;
}

.tokki-profile-modal-close {
	top: 24px !important;
	right: 24px !important;
}

.tokki-profile-modal-handle,
.tokki-role-rules-handle {
	display: none;
}

.tokki-role-rules-panel {
	scrollbar-width: thin;
	scrollbar-color: #4A474E #222124;
}

.tokki-role-rules-panel::-webkit-scrollbar {
	width: 8px;
}

.tokki-role-rules-panel::-webkit-scrollbar-track {
	background: #222124;
	border-radius: 999px;
}

.tokki-role-rules-panel::-webkit-scrollbar-thumb {
	border: 2px solid #222124;
	border-radius: 999px;
	background: #4A474E;
}

.tokki-role-rules-panel::-webkit-scrollbar-thumb:hover {
	background: #656169;
}

.tokki-role-rules-panel > header {
	margin-bottom: 22px;
}

/* Reportar comentario adopta la base central en escritorio. */
@media (min-width: 769px) {
	.tokki-comment-report-modal {
		width: min(620px, calc(100% - 36px)) !important;
		max-width: none !important;
		max-height: min(760px, calc(100dvh - 48px)) !important;
		padding: 24px !important;
		border: 1px solid #313034 !important;
		border-radius: 24px !important;
		background: #1A191D !important;
		box-shadow: 0 24px 70px rgba(0, 0, 0, .48) !important;
	}

	.tokki-comment-report-modal h3 {

		line-height: 1.2 !important;
}
}

/* Enlaces y colores copian la caja de Crear nota de capítulo. */
.tokki-chapter-link-dialog .tokki-link-dialog-box,
.tokki-chapter-color-dialog .tokki-link-dialog-box,
#tokki-recommendation-form .tokki-link-dialog-box {
	width: min(470px, 100%) !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 1px solid #424045 !important;
	border-radius: 18px !important;
	background: #222124 !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .62) !important;
}

.tokki-chapter-link-dialog .tokki-link-dialog-head,
.tokki-chapter-color-dialog .tokki-link-dialog-head,
#tokki-recommendation-form .tokki-link-dialog-head {
	margin: 0 0 20px !important;
	padding: 20px 22px 16px !important;
	border-bottom: 1px solid #313034 !important;
}

.tokki-chapter-link-dialog .tokki-link-dialog-box > label,
.tokki-chapter-link-dialog .tokki-link-dialog-box > p,
.tokki-chapter-link-dialog .tokki-link-dialog-actions,
.tokki-chapter-color-dialog .tokki-link-dialog-box > label,
.tokki-chapter-color-dialog .tokki-color-palette,
.tokki-chapter-color-dialog .tokki-custom-color-row,
.tokki-chapter-color-dialog .tokki-link-dialog-box > p,
#tokki-recommendation-form .tokki-link-dialog-box > label,
#tokki-recommendation-form .tokki-link-dialog-box > p,
#tokki-recommendation-form .tokki-link-dialog-actions,
#tokki-recommendation-form .tokki-color-palette,
#tokki-recommendation-form .tokki-custom-color-row {
	margin-right: 22px !important;
	margin-left: 22px !important;
}

.tokki-chapter-link-dialog .tokki-link-dialog-actions,
#tokki-recommendation-form .tokki-link-dialog-actions {
	margin-bottom: 22px !important;
}

.tokki-chapter-color-dialog .tokki-link-dialog-box,
#tokki-recommendation-form .tokki-color-dialog .tokki-link-dialog-box {
	max-height: min(620px, calc(100dvh - 36px)) !important;
	padding-bottom: 22px !important;
	overflow-y: auto !important;
}

@media (max-width: 768px) {
	/* En estas hojas móviles el cierre es por arrastre o pulsando fuera. */
	.tokki-notifications-popup-close,
	.tokki-library .tokki-library-filter-close,
	.tokki-novel-info-close,
	.tokki-profile-modal-close,
	.tokki-role-rules-close {
		display: none !important;
	}

	/* El tirador real es el elemento añadido; elimina la copia decorativa antigua. */
	.tokki-role-rules-panel::before {
		display: none !important;
		content: none !important;
	}

	/* Los paneles equivalentes usan la hoja inferior de Biblioteca. */
	.tokki-novel-info-sheet,
	.tokki-profile-modal-box,
	.tokki-role-rules-panel {
		position: fixed !important;
		top: auto !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: 100% !important;
		max-width: none !important;
		max-height: min(86dvh, 760px) !important;
		margin: 0 !important;
		padding: 12px 20px max(20px, env(safe-area-inset-bottom)) !important;
		border-right: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-radius: 26px 26px 0 0 !important;
		transform: translateY(105%);
		transition: transform .24s ease !important;
	}

	.tokki-role-rules-panel {
		animation: none !important;
	}

	.tokki-novel-info-modal-root.is-open .tokki-novel-info-sheet,
	.tokki-profile-modal.is-open .tokki-profile-modal-box,
	.tokki-role-rules-modal:not([hidden]) .tokki-role-rules-panel {
		transform: translateY(0);
	}

	.tokki-novel-info-sheet.is-dragging,
	.tokki-profile-modal-box.is-dragging,
	.tokki-role-rules-panel.is-dragging {
		transition: none !important;
	}

	.tokki-novel-info-handle,
	.tokki-library-filter-panel-handle,
	.tokki-profile-modal-handle,
	.tokki-role-rules-handle {
		display: block !important;
		width: 100% !important;
		height: 28px !important;
		margin: -6px 0 4px !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: linear-gradient(#424045, #424045) center / 48px 4px no-repeat !important;
		cursor: grab;
		touch-action: none;
	}

	.tokki-profile-modal {
		align-items: flex-end !important;
		padding: 0 !important;
	}

	.tokki-profile-modal-box > h2,
	.tokki-role-rules-panel h2,
	.tokki-novel-info-sheet h2 {

}

	.tokki-profile-modal-close {
		top: 24px !important;
		right: 20px !important;
	}

	/* Notificaciones replica dimensiones, borde y tirador de Biblioteca. */
	.tokki-notifications-popup {
		max-height: min(86dvh, 760px) !important;
		border-radius: 26px 26px 0 0 !important;
		background: #1A191D !important;
	}

	.tokki-notifications-popup-handle {
		width: 100% !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background: linear-gradient(#424045, #424045) center / 48px 4px no-repeat !important;
		cursor: grab;
		touch-action: none;
	}

	.tokki-notifications-popup-header {
		padding: 6px 20px 18px !important;
	}

	/* El tirador ocupa su propia franja; las acciones comparten una fila. */
	.tokki-notifications-popup .tokki-notifications-popup-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.tokki-notifications-popup .tokki-notifications-popup-buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 10px;
		min-width: 0;
	}

	.tokki-notifications-popup .tokki-notifications-popup-buttons button {
		max-width: none;
		white-space: nowrap;
		font-size: clamp(11px, 3.2vw, 14px);
	}

	.tokki-notifications-popup-header h2 {

}

	/* Respaldo frente al teclado virtual y pantallas especialmente bajas. */
	.tokki-chapter-color-dialog .tokki-link-dialog-box,
	#tokki-recommendation-form .tokki-color-dialog .tokki-link-dialog-box {
		max-height: calc(100dvh - 32px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}
}

/* El cuerpo propio impide que el formulario global expanda el enlace al borde. */
#tokki-recommendation-form #tokki-link-dialog .tokki-link-dialog-body {
	width: 100%;
	padding: 0 22px 22px;
	box-sizing: border-box;
}

#tokki-recommendation-form #tokki-link-dialog .tokki-link-dialog-body > label {
	display: block !important;
	width: auto !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
	color: #D2D1D5 !important;
	font-size: 14px !important;
	font-weight: 700;
}

#tokki-recommendation-form #tokki-link-dialog .tokki-link-dialog-body > input[type="url"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	box-sizing: border-box !important;
}

#tokki-recommendation-form #tokki-link-dialog .tokki-link-dialog-body > .tokki-link-dialog-error {
	margin: 8px 0 0 !important;
}

#tokki-recommendation-form #tokki-link-dialog .tokki-link-dialog-body > .tokki-link-dialog-actions {
	margin: 22px 0 0 !important;
}
/* Evita el destello azul de selección táctil sin ocultar el foco de teclado. */
html,
body,
body * {
	-webkit-tap-highlight-color: transparent !important;
}