/**
 * TabManager — estilos base de frontend. Usa exclusivamente clases con
 * prefijo .tm- para no chocar con el theme ni otros plugins. Los valores
 * de color/tamaño/espaciado que dependen de la configuración de cada
 * tabla se generan dinámicamente (ver TM_Design::generate_css) e
 * imprimen en <style id="tm-appearance-css">; este archivo solo define
 * estructura y comportamiento común a todas las tablas.
 */
.tm-table-wrap {
	position: relative;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tm-table-wrap * { box-sizing: border-box; }

.tm-table__back-link { display: inline-block; margin-bottom: 12px; text-decoration: none; color: inherit; font-size: 13px; opacity: .8; }
.tm-table__back-link:hover { opacity: 1; text-decoration: underline; }

.tm-table__not-found { text-align: center; padding: 40px 20px; }
.tm-table__not-found p { font-size: 15px; margin-bottom: 16px; }

.tm-table__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tm-table__search-input { border: none; background: transparent; width: 100%; height: 100%; }

/* Filtros: horizontales por defecto en escritorio (punto 22), responsive
   por breakpoint (punto 23) — nunca verticales como comportamiento
   principal en desktop. */
.tm-table__filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin-bottom: 14px; }
.tm-table__filter-range { display: flex; gap: 4px; align-items: center; flex: 0 1 auto; }
.tm-table__filter-range input { width: 90px; }
.tm-table__filters > select, .tm-table__filters > input, .tm-table__filters > .tm-table__filter-range { flex: 0 1 190px; min-width: 160px; max-width: 240px; }
.tm-table__filters > .tm-table__filter-clear { flex: 0 0 auto; }
.tm-table__filter-clear { background: transparent; border: none; color: #5b6270; text-decoration: underline; cursor: pointer; font-size: 13px; align-self: center; }
.tm-table__filters select, .tm-table__filters input { box-sizing: border-box; }
.tm-table__filters select:disabled, .tm-table__filters input:disabled { cursor: not-allowed; }
.tm-table__actions-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; vertical-align: middle; white-space: nowrap; }
.tm-table__actions-inline .tm-table__icon-btn { margin: 0; }

@media (max-width: 1024px) and (min-width: 681px) {
	.tm-table__filters[data-tm-component="filters"] { display: grid !important; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.tm-table__filters[data-tm-component="filters"] { display: flex !important; flex-direction: column !important; }
	.tm-table__filters select, .tm-table__filters input { width: 100%; }
}

.tm-table { width: 100%; border-collapse: separate; }
.tm-table thead th { text-align: left; text-transform: uppercase; letter-spacing: 0.03em; }
.tm-table__row td { vertical-align: middle; border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; }
.tm-table__row td:first-child { border-left: 1px solid #eef0f3; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.tm-table__row td:last-child { border-right: 1px solid #eef0f3; border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.tm-table__row.is-active-record { outline: 2px solid #2a6df4; animation: tm-pulse 1.4s ease-in-out 2; }
.tm-table__row.is-draft { opacity: 0.6; }
@keyframes tm-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(42,109,244,0.15); } }

.tm-badge { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; margin: 2px; }
.tm-badge--yes { background: #e5f7ea; color: #1c7a34; }
.tm-badge--no { background: #fbeaea; color: #a33131; }

.tm-table__button, .tm-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
	border: none;
}
.tm-table__button--sm { padding: 5px 10px; font-size: 12px; }
.tm-table__button--ghost { background: transparent; color: #333; border: 1px solid #ccc; }
.tm-table__icon-btn { background: transparent; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; }

.tm-table__pagination { display: flex; margin-top: 16px; }
.tm-table__page-btn { border: 1px solid; cursor: pointer; }

.tm-table__empty { text-align: center; }

/* Modo edición del botón "Habilitar edición" del constructor visual. */
.tm-design-toggle {
	position: absolute; top: -14px; right: 0; z-index: 10;
	font-size: 12px; padding: 6px 12px; border-radius: 6px; border: 1px solid #dcdfe4;
	background: #fff; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.tm-table-wrap:hover .tm-design-toggle,
.tm-table-wrap.tm-design-mode .tm-design-toggle { opacity: 1; }

/* Modal */
.tm-modal { position: fixed; inset: 0; display: none; z-index: 100000; align-items: center; justify-content: center; }
.tm-modal.is-open { display: flex; }
.tm-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.tm-modal__box { position: relative; background: #fff; border-radius: 12px; padding: 28px 24px 24px; width: 92%; max-width: 480px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.tm-modal__close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; }
.tm-modal__close:hover { color: #222; }
.tm-modal__title { margin-top: 0; margin-bottom: 18px; }
.tm-form__field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.tm-form__field input, .tm-form__field select, .tm-form__field textarea { padding: 9px 11px; border: 1px solid #dcdfe4; border-radius: 8px; font-size: 14px; }
.tm-form__field.has-error input, .tm-form__field.has-error select, .tm-form__field.has-error textarea { border-color: #c0392b; }
.tm-form__error { color: #c0392b; font-size: 12px; min-height: 14px; }
.tm-form__current-file { font-size: 12px; color: #5b6270; margin: 2px 0 0; }
.tm-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.tm-form__submit { position: relative; }
.tm-form__submit.is-loading .tm-form__submit-text { visibility: hidden; }
.tm-form__submit.is-loading .tm-form__spinner {
	position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
	animation: tm-spin .6s linear infinite;
}
.tm-form__spinner { display: none; }
.tm-form__submit.is-loading .tm-form__spinner { display: block; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* Responsive: en móvil, cada fila se convierte en tarjeta. */
@media (max-width: 680px) {
	.tm-table thead { display: none; }
	.tm-table, .tm-table tbody, .tm-table__row, .tm-table__row td { display: block; width: 100%; }
	.tm-table__row { margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; border: 1px solid #eef0f3; }
	.tm-table__row td { border: none !important; padding: 6px 0; }
	.tm-table__row td::before { content: attr(data-label) ": "; font-weight: 600; color: #5b6270; margin-right: 4px; }
	.tm-table__row td.tm-table__actions::before { content: ''; }
	.tm-table__toolbar { flex-direction: column; align-items: stretch; }
}
