/**
 * Supplier-Payment / Process Engine — Espacio Vital brand palette.
 * Estilos de tabla de listado, badges por fase, filtros y placeholders.
 *
 * @package WorkActivityTracker
 */

/* ============================================================
   PAGE HEAD inside the App Shell
   ============================================================ */
.wat-sp-page-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.wat-sp-page-head h1 {
	font-size: 1.55rem;
	font-weight: 800;
	color: #0f1a13;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
}
.wat-sp-page-head p {
	color: #6b7a6c;
	font-size: 0.95rem;
}

/* Header enriquecido para la vista de detalle de proceso. */
.wat-sp-detail-head { margin-bottom: 22px; }
.wat-sp-detail-head-main { flex: 1 1 480px; min-width: 0; }
.wat-sp-detail-head-eyebrow {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}
.wat-sp-detail-head-pid {
	font-size: .82rem; font-weight: 800;
	color: #5d7f29;
	letter-spacing: .04em;
	background: rgba(155, 201, 80, 0.14);
	border-radius: 999px;
	padding: 4px 12px;
}
.wat-sp-detail-head-type {
	font-size: .82rem; font-weight: 700;
	color: #6b7a6c;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.wat-sp-detail-head h1 {
	font-size: 1.55rem !important;
	margin: 0 0 12px !important;
	line-height: 1.25;
	word-wrap: break-word;
}
.wat-sp-detail-head-meta {
	display: flex; flex-wrap: wrap; gap: 8px;
}
.wat-sp-detail-head-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 999px;
	font-size: .88rem;
	color: #1e293b;
	font-weight: 500;
	max-width: 100%;
}
.wat-sp-detail-head-chip strong { color: #0f1a13; font-weight: 700; }
.wat-sp-detail-head-chip svg { width: 15px; height: 15px; color: #5d7f29; flex-shrink: 0; }
.wat-sp-detail-head-chip--amount {
	background: linear-gradient(135deg, rgba(155,201,80,0.16), rgba(155,201,80,0.06));
	border-color: rgba(93, 127, 41, 0.25);
	color: #4a651f;
	font-weight: 800;
	font-size: .95rem;
}
.wat-sp-detail-head-actions {
	display: flex; gap: 8px; flex-wrap: wrap;
	flex-shrink: 0;
}
@media (max-width: 720px) {
	.wat-sp-detail-head h1 { font-size: 1.3rem !important; }
	.wat-sp-detail-head-actions { width: 100%; }
	.wat-sp-detail-head-actions .wat-sp-btn { flex: 1; justify-content: center; }
}
.wat-sp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.wat-sp-btn-primary {
	background: #0f1a13;
	color: #fff !important;
}
.wat-sp-btn-primary:hover {
	background: #1a2e1f;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(15, 26, 19, 0.22);
}
.wat-sp-btn-green {
	background: #9bc950;
	color: #0f1a13 !important;
}
.wat-sp-btn-green:hover {
	background: #a8d65e;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(155, 201, 80, 0.4);
}
.wat-sp-btn-ghost {
	background: transparent;
	color: #2b3a30 !important;
	border-color: rgba(15, 26, 19, 0.15);
}
.wat-sp-btn-ghost:hover {
	background: #0f1a13;
	color: #fff !important;
	border-color: #0f1a13;
}

/* ============================================================
   FILTERS
   ============================================================ */
.wat-sp-filters {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr auto;
	gap: 12px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 20px;
}
.wat-sp-filters label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #6b7a6c;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wat-sp-filters input,
.wat-sp-filters select {
	padding: 10px 12px;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	font-size: 0.92rem;
	color: #0f1a13;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
	box-sizing: border-box;
}
.wat-sp-filters input:focus,
.wat-sp-filters select:focus {
	outline: none;
	border-color: #9bc950;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.18);
}
.wat-sp-filters .wat-sp-filter-apply {
	align-self: end;
}
.wat-sp-filter-apply .wat-sp-btn {
	width: 100%;
	justify-content: center;
}

/* ============================================================
   TABLE
   ============================================================ */
.wat-sp-table-wrap {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	overflow: hidden;
}
.wat-sp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.wat-sp-table thead th {
	text-align: left;
	padding: 14px 18px;
	background: #fafaf6;
	border-bottom: 1px solid rgba(15, 26, 19, 0.08);
	font-size: 0.72rem;
	font-weight: 800;
	color: #6b7a6c;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wat-sp-table tbody td {
	padding: 14px 18px;
	border-bottom: 1px solid rgba(15, 26, 19, 0.06);
	color: #2b3a30;
	vertical-align: middle;
}
.wat-sp-table tbody tr:last-child td { border-bottom: none; }
.wat-sp-table tbody tr:hover { background: rgba(155, 201, 80, 0.04); }
.wat-sp-row-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
	color: #6b7a6c;
	font-size: 0.85rem;
	font-weight: 600;
}
.wat-sp-row-title { font-weight: 700; color: #0f1a13; }
.wat-sp-row-sub { font-size: 0.8rem; color: #6b7a6c; margin-top: 2px; }
.wat-sp-row-amount { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f1a13; }
.wat-sp-row-link {
	color: #4a651f !important;
	font-weight: 700;
	text-decoration: none;
}
.wat-sp-row-link:hover { color: #2d3f16 !important; }
.wat-sp-row-delete {
	background: transparent; border: none; cursor: pointer;
	color: #d1d5db; padding: 4px 6px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center;
	margin-left: 6px; vertical-align: middle;
	transition: color .12s ease, background .12s ease;
}
.wat-sp-row-delete:hover { color: #ef4444; background: #fef2f2; }
.wat-sp-row-delete:disabled { opacity: .4; cursor: wait; }

/* Badges (phase / status) */
.wat-sp-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wat-sp-badge-phase {
	background: rgba(155, 201, 80, 0.18);
	color: #4a651f;
}
.wat-sp-badge-status-active    { background: rgba(245, 158, 11, 0.15); color: #92400e; }
.wat-sp-badge-status-completed { background: rgba(34, 197, 94, 0.15); color: #166534; }
.wat-sp-badge-status-cancelled { background: rgba(15, 26, 19, 0.12); color: #2b3a30; }

/* Semáforo de vencimiento */
.wat-sp-semaforo { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.wat-sp-semaforo--green  { background:#dcfce7; color:#166534; }
.wat-sp-semaforo--orange { background:#fef3c7; color:#92400e; }
.wat-sp-semaforo--red    { background:#fee2e2; color:#b91c1c; }
.wat-sp-semaforo--grey   { background:#f3f4f6; color:#6b7280; }

/* Empty state */
.wat-sp-empty {
	background: #fff;
	border: 1px dashed rgba(15, 26, 19, 0.15);
	border-radius: 14px;
	padding: 64px 24px;
	text-align: center;
}
.wat-sp-empty-illu { font-size: 3.4rem; line-height: 1; margin-bottom: 16px; }
.wat-sp-empty h3 { font-size: 1.2rem; margin-bottom: 8px; color: #0f1a13; font-weight: 800; }
.wat-sp-empty p { color: #6b7a6c; margin: 0 auto 20px; max-width: 460px; line-height: 1.55; text-align: center !important; }
.wat-sp-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Pagination */
.wat-sp-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding: 0 4px;
	color: #6b7a6c;
	font-size: 0.88rem;
}
.wat-sp-pagination-links { display: flex; gap: 6px; }
.wat-sp-pagination-links a,
.wat-sp-pagination-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	color: #2b3a30;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.15s ease;
}
.wat-sp-pagination-links a:hover { border-color: #9bc950; color: #0f1a13; }
.wat-sp-pagination-links .is-current {
	background: #0f1a13;
	color: #fff;
	border-color: #0f1a13;
}
.wat-sp-pagination-links .is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ============================================================
   FORM (Nueva solicitud)
   ============================================================ */
.wat-sp-form {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 28px;
}
.wat-sp-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.wat-sp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wat-sp-field-full { grid-column: 1 / -1; }
.wat-sp-field > span {
	font-size: 0.78rem;
	font-weight: 700;
	color: #2b3a30;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wat-sp-field > span em {
	color: #9bc950;
	font-style: normal;
	font-weight: 800;
}
.wat-sp-field input,
.wat-sp-field select,
.wat-sp-field textarea {
	padding: 11px 14px;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	font-size: 0.95rem;
	color: #0f1a13;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}
.wat-sp-field input:focus,
.wat-sp-field select:focus,
.wat-sp-field textarea:focus {
	outline: none;
	border-color: #9bc950;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.18);
}
.wat-sp-field small {
	color: #94a3b8;
	font-size: 0.78rem;
}
.wat-sp-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(15, 26, 19, 0.08);
}
/* Tipo de proceso — tarjetas radio en lugar del select nativo */
.wat-sp-type-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.wat-sp-type-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid rgba(15, 26, 19, 0.12);
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: border-color .12s ease, box-shadow .12s ease;
	width: 100%;
}
.wat-sp-type-card:hover { border-color: #9bc950; }
.wat-sp-type-card.is-selected {
	border-color: #5d7f29;
	background: rgba(155, 201, 80, 0.07);
	box-shadow: 0 0 0 3px rgba(93, 127, 41, 0.14);
}
.wat-sp-type-card-check {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
	color: transparent;
	transition: background .12s ease, border-color .12s ease;
}
.wat-sp-type-card.is-selected .wat-sp-type-card-check {
	background: #5d7f29;
	border-color: #5d7f29;
	color: #fff;
}
.wat-sp-type-card-body { flex: 1; min-width: 0; }
.wat-sp-type-card-body strong { display: block; font-size: .97rem; font-weight: 700; color: #0f1a13; }
.wat-sp-type-card-body span { display: block; font-size: .82rem; color: #6b7a6c; margin-top: 2px; line-height: 1.4; }

/* Dropdown custom (>4 tipos) */
.wat-sp-custom-select { position: relative; }
.wat-sp-custom-select-trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; padding: 12px 16px;
	background: #fff; border: 1.5px solid rgba(15, 26, 19, 0.12); border-radius: 12px;
	font-family: inherit; font-size: .97rem; font-weight: 600; color: #0f1a13;
	cursor: pointer; text-align: left;
	transition: border-color .12s ease;
}
.wat-sp-custom-select-trigger:hover,
.wat-sp-custom-select-trigger[aria-expanded="true"] { border-color: #5d7f29; }
.wat-sp-custom-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.wat-sp-custom-select-trigger svg { flex-shrink: 0; color: #6b7a6c; transition: transform .15s ease; }
.wat-sp-custom-select-dropdown {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	background: #fff; border: 1px solid rgba(15, 26, 19, 0.1);
	border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 26, 19, 0.12);
	z-index: 200; list-style: none; padding: 6px; margin: 0;
	max-height: 280px; overflow-y: auto;
}
.wat-sp-custom-select-dropdown li {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 12px; border-radius: 8px; cursor: pointer;
	transition: background .1s ease;
}
.wat-sp-custom-select-dropdown li:hover { background: #f3f9e8; }
.wat-sp-custom-select-dropdown li.is-selected { background: rgba(93,127,41,0.08); }
.wat-sp-custom-select-dropdown li svg { flex-shrink: 0; color: #5d7f29; }
.wat-sp-custom-select-dropdown li div strong { display: block; font-size: .95rem; font-weight: 700; color: #0f1a13; }
.wat-sp-custom-select-dropdown li div small { display: block; font-size: .78rem; color: #6b7a6c; margin-top: 1px; }
.wat-sp-custom-select-desc { margin: 8px 0 0; font-size: .84rem; color: #6b7a6c; padding: 8px 12px; background: #f3f9e8; border-radius: 8px; }

@media (max-width: 700px) {
	.wat-sp-form-grid { grid-template-columns: 1fr; }
	.wat-sp-form-actions { flex-direction: column-reverse; }
	.wat-sp-form-actions .wat-sp-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   REQUISITION SEARCH (autocomplete dropdown)
   ============================================================ */
.wat-sp-req-search { position: relative; }

/* Input wrap con ícono lupa + spinner + clear */
.wat-sp-req-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.wat-sp-req-icon-search {
	position: absolute;
	left: 13px;
	width: 16px; height: 16px;
	color: #94a3b8;
	pointer-events: none;
	flex-shrink: 0;
}
.wat-sp-req-input-wrap input {
	padding-left: 38px !important;
	padding-right: 60px !important;
}

/* Spinner animado — aparece mientras se busca */
.wat-sp-req-spinner {
	position: absolute;
	right: 38px;
	width: 18px; height: 18px;
	border: 2.5px solid rgba(93, 127, 41, 0.2);
	border-top-color: #5d7f29;
	border-radius: 50%;
	animation: wat-req-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes wat-req-spin { to { transform: rotate(360deg); } }

/* Spinner inline para loading del detalle */
.wat-sp-req-spinner-inline {
	display: inline-block;
	width: 14px; height: 14px;
	border: 2px solid rgba(93, 127, 41, 0.2);
	border-top-color: #5d7f29;
	border-radius: 50%;
	animation: wat-req-spin .7s linear infinite;
	vertical-align: middle;
	margin-right: 8px;
}

.wat-sp-req-clear {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	color: #94a3b8;
	font-size: 1.3rem;
	line-height: 1;
	padding: 4px 6px;
	font-weight: 700;
}
.wat-sp-req-clear:hover { color: #0f1a13; }
.wat-sp-req-results {
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	box-shadow: 0 16px 32px rgba(15, 26, 19, 0.1);
	z-index: 50;
	max-height: 340px;
	overflow-y: auto;
	margin-top: 6px;
}
.wat-sp-req-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding: 12px 16px;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(15, 26, 19, 0.04);
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.12s ease;
}
.wat-sp-req-item:last-child { border-bottom: none; }
.wat-sp-req-item:hover { background: rgba(155, 201, 80, 0.08); }
.wat-sp-req-item-title { font-weight: 700; color: #0f1a13; font-size: 0.92rem; }
.wat-sp-req-item-meta { font-size: 0.78rem; color: #6b7a6c; }
.wat-sp-req-empty {
	padding: 20px 24px;
	text-align: center;
	color: #94a3b8;
	font-size: 0.88rem;
}
.wat-sp-req-error {
	display: flex; align-items: center; gap: 8px;
	padding: 14px 16px;
	color: #b91c1c;
	font-size: .88rem;
	font-weight: 600;
	background: #fef2f2;
	border-radius: 8px;
	margin: 6px;
}
.wat-sp-req-error svg { flex-shrink: 0; color: #ef4444; }
.wat-sp-req-detail-loading {
	display: flex; align-items: center;
	padding: 16px 20px;
	color: #6b7a6c;
	font-size: .92rem;
	background: #f8fafc;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 12px;
	margin-top: 10px;
}
.wat-sp-req-detail-error {
	display: flex; align-items: center; gap: 8px;
	padding: 14px 16px;
	color: #b91c1c;
	font-size: .88rem;
	font-weight: 600;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	margin-top: 10px;
}
.wat-sp-req-detail-error svg { flex-shrink: 0; }

/* ============================================================
   FLASH MESSAGES (post-redirect feedback)
   ============================================================ */
.wat-sp-flash {
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 18px;
	font-size: 0.95rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
.wat-sp-flash-error {
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.25);
	color: #991b1b;
}
.wat-sp-flash-success {
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: #166534;
}
.wat-sp-flash::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.wat-sp-flash-error::before { background: #dc2626; }
.wat-sp-flash-success::before { background: #16a34a; }

/* ============================================================
   DETAIL — phase tabs + content panels + info aside + history
   ============================================================ */
.wat-sp-detail {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}
.wat-sp-detail-main {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	overflow: hidden;
}
.wat-sp-detail-aside { display: flex; flex-direction: column; gap: 16px; }

/* Phase tab bar (horizontal scroll on small screens) */
.wat-sp-tabs {
	display: flex;
	gap: 0;
	padding: 16px 16px 0;
	border-bottom: 1px solid rgba(15, 26, 19, 0.08);
	overflow-x: auto;
	scrollbar-width: thin;
}
.wat-sp-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 120px;
	padding: 6px 14px 18px;
	text-decoration: none;
	color: #6b7a6c;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
	border: none;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	font-family: inherit;
	transition: color 0.15s ease;
}
.wat-sp-tab:hover:not(.is-locked) { color: #0f1a13; }
.wat-sp-tab.is-current { color: #0f1a13; }
.wat-sp-tab.is-current::after {
	content: '';
	position: absolute;
	left: 14px; right: 14px; bottom: -1px;
	height: 3px;
	background: #9bc950;
	border-radius: 2px 2px 0 0;
}
.wat-sp-tab.is-locked { color: #cbd5e1; cursor: not-allowed; }
.wat-sp-tab-step {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.92rem;
	background: #e2e8f0;
	color: #6b7a6c;
	border: 3px solid transparent;
}
.wat-sp-tab.is-approved .wat-sp-tab-step { background: #16a34a; color: #fff; }
.wat-sp-tab.is-rejected .wat-sp-tab-step { background: #dc2626; color: #fff; }
.wat-sp-tab.is-active   .wat-sp-tab-step { background: #9bc950; color: #0f1a13; border-color: rgba(155,201,80,0.3); box-shadow: 0 0 0 4px rgba(155,201,80,0.15); }
.wat-sp-tab.is-skipped  .wat-sp-tab-step { background: #cbd5e1; }
.wat-sp-tab-step svg { width: 18px; height: 18px; }
.wat-sp-tab-label { line-height: 1.2; max-width: 110px; }

/* Phase panels */
.wat-sp-phase-panel { display: none; padding: 28px; }
.wat-sp-phase-panel.is-active { display: block; }
.wat-sp-phase-panel h2 {
	margin: 0 0 4px;
	font-size: 1.2rem;
	color: #0f1a13;
	font-weight: 800;
}
.wat-sp-phase-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: #6b7a6c;
	margin-bottom: 20px;
}
.wat-sp-phase-meta strong { color: #0f1a13; }
.wat-sp-phase-desc {
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.55;
	margin-bottom: 24px;
	padding: 14px 16px;
	background: #fafaf6;
	border-radius: 10px;
	border-left: 3px solid #9bc950;
}

.wat-sp-phase-state-banner {
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 22px;
	font-size: 0.92rem;
	display: flex;
	align-items: center;
	gap: 12px;
}
.wat-sp-phase-state-banner svg { width: 20px; height: 20px; flex-shrink: 0; }
.wat-sp-phase-state-locked  { background: #fafaf6; color: #6b7a6c; border: 1px solid rgba(15, 26, 19, 0.06); }
.wat-sp-phase-state-noperm  { background: rgba(245, 158, 11, 0.08); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.25); }
.wat-sp-phase-state-done    { background: rgba(22, 163, 74, 0.08); color: #166534; border: 1px solid rgba(22, 163, 74, 0.25); }
.wat-sp-phase-state-reject  { background: rgba(220, 38, 38, 0.08); color: #991b1b; border: 1px solid rgba(220, 38, 38, 0.25); }
.wat-sp-phase-state-active  { background: rgba(155, 201, 80, 0.12); color: #4a651f; border: 1px solid rgba(155, 201, 80, 0.35); }

/* Section blocks inside a panel */
.wat-sp-block { margin-top: 24px; }
.wat-sp-block h4 {
	font-size: 0.85rem;
	font-weight: 800;
	color: #2b3a30;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
}

/* Documents list */
.wat-sp-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wat-sp-doc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fafaf6;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 10px;
	font-size: 0.92rem;
}
.wat-sp-doc-item svg { width: 20px; height: 20px; color: #4a651f; flex-shrink: 0; }
.wat-sp-doc-item-name { font-weight: 600; color: #0f1a13; flex: 1; word-break: break-all; }
.wat-sp-doc-item-meta { color: #94a3b8; font-size: 0.78rem; }
.wat-sp-doc-item a { color: #4a651f; font-weight: 700; text-decoration: none; }

/* Upload form */
.wat-sp-upload {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 2px dashed rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	background: #fff;
}
.wat-sp-upload input[type="file"] { flex: 1; font-size: 0.88rem; }

/* Action buttons row */
.wat-sp-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.wat-sp-btn-reject {
	background: #fff;
	color: #991b1b !important;
	border: 1.5px solid rgba(220, 38, 38, 0.4);
}
.wat-sp-btn-reject:hover {
	background: #dc2626;
	color: #fff !important;
	border-color: #dc2626;
}
.wat-sp-action-form {
	margin-top: 18px;
	padding: 18px;
	background: #fafaf6;
	border-radius: 12px;
	border: 1px solid rgba(15, 26, 19, 0.06);
}
.wat-sp-action-form textarea {
	width: 100%;
	min-height: 80px;
	padding: 10px 12px;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.92rem;
	resize: vertical;
	box-sizing: border-box;
}
.wat-sp-action-form textarea:focus {
	outline: none;
	border-color: #9bc950;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.18);
}

/* Info card (aside) */
.wat-sp-info {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 22px;
}
.wat-sp-info h4 {
	font-size: 0.78rem;
	font-weight: 800;
	color: #2b3a30;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 14px;
}
.wat-sp-info-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(15, 26, 19, 0.06);
	font-size: 0.9rem;
}
.wat-sp-info-row:last-child { border-bottom: none; }
.wat-sp-info-row span { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.wat-sp-info-row strong { color: #0f1a13; font-weight: 700; }

/* History timeline */
.wat-sp-history-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: 420px;
	overflow-y: auto;
	position: relative;
}
.wat-sp-history-item {
	display: flex;
	gap: 12px;
	font-size: 0.85rem;
	position: relative;
}
/* Línea vertical conectora del timeline. */
.wat-sp-history-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 32px;
	bottom: -14px;
	width: 2px;
	background: linear-gradient(180deg, rgba(155, 201, 80, 0.4), rgba(155, 201, 80, 0.0));
	z-index: 0;
}
.wat-sp-history-icon {
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	color: #5d7f29;
	background: #f3f9e8;
	z-index: 1;
	box-shadow: 0 0 0 3px #fff;
}
.wat-sp-history-icon svg { width: 15px; height: 15px; }

/* Colores por tipo de evento. */
.wat-sp-history-icon--created   { background: #eef2ff; color: #3730a3; }
.wat-sp-history-icon--approved  { background: rgba(155, 201, 80, 0.22); color: #4a651f; }
.wat-sp-history-icon--rejected  { background: #fef2f2; color: #b91c1c; }
.wat-sp-history-icon--commented { background: #fefce8; color: #854d0e; }
.wat-sp-history-icon--document  { background: #f3f9e8; color: #5d7f29; }
.wat-sp-history-icon--version   { background: #ecfeff; color: #0e7490; }
.wat-sp-history-icon--delete    { background: #fee2e2; color: #991b1b; }
.wat-sp-history-icon--phase     { background: #f0fdf4; color: #166534; }
.wat-sp-history-icon--completed { background: #dcfce7; color: #166534; }
.wat-sp-history-icon--cancelled { background: #fee2e2; color: #991b1b; }

.wat-sp-history-item-content { flex: 1; min-width: 0; }
.wat-sp-history-item-action { color: #0f1a13; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.wat-sp-history-item-detail {
	color: #475569;
	font-size: .82rem;
	margin-top: 2px;
	line-height: 1.4;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wat-sp-history-item-meta { color: #94a3b8; font-size: 0.76rem; margin-top: 4px; }

/* Botón CTA dentro de un .wat-sp-info para abrir el drawer del viewer. */
.wat-sp-info-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 14px;
	padding: 11px 14px;
	background: linear-gradient(135deg, rgba(155, 201, 80, 0.16), rgba(93, 127, 41, 0.08));
	border: 1px solid rgba(93, 127, 41, 0.3);
	border-radius: 10px;
	color: #4a651f;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.wat-sp-info-cta:hover {
	background: #5d7f29;
	color: #fff;
	border-color: #5d7f29;
	transform: translateY(-1px);
}
.wat-sp-info-cta:hover svg { color: #fff; }
.wat-sp-info-cta svg { color: #5d7f29; }

/* ──────────────────────────────────────────────────────────────
 * Drawer: viewer del detalle completo de una requisición Edificar
 * ──────────────────────────────────────────────────────────── */
.wat-sp-req-viewer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	visibility: hidden;
	pointer-events: none;
}
.wat-sp-req-viewer.is-open {
	visibility: visible;
	pointer-events: auto;
}
.wat-sp-req-viewer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 26, 19, 0);
	transition: background .25s ease;
	cursor: pointer;
}
.wat-sp-req-viewer.is-open .wat-sp-req-viewer-backdrop { background: rgba(15, 26, 19, 0.5); }
.wat-sp-req-viewer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(960px, 92vw);
	background: #f4f6f4;
	box-shadow: -10px 0 40px rgba(15, 26, 19, 0.18);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.2,.7,.2,1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.wat-sp-req-viewer.is-open .wat-sp-req-viewer-panel { transform: translateX(0); }
.wat-sp-req-viewer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 22px;
	background: #fff;
	border-bottom: 1px solid rgba(15, 26, 19, 0.08);
	flex-shrink: 0;
}
.wat-sp-req-viewer-title { font-size: 1rem; font-weight: 800; color: #0f1a13; letter-spacing: -0.01em; }
.wat-sp-req-viewer-close {
	background: transparent; border: none; cursor: pointer;
	font-size: 1.8rem; line-height: 1; color: #6b7a6c;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	transition: background .12s ease, color .12s ease;
}
.wat-sp-req-viewer-close:hover { background: #f3f4f6; color: #0f1a13; }
.wat-sp-req-viewer-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px 22px 28px;
}
.wat-sp-req-viewer-card { max-width: none; margin: 0; }
.wat-sp-req-viewer-foot {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px dashed rgba(15, 26, 19, 0.08);
}
body.wat-sp-req-viewer-locked { overflow: hidden; }

@media (max-width: 720px) {
	.wat-sp-req-viewer-panel { width: 100vw; }
	.wat-sp-req-viewer-body { padding: 16px; }
}

/* Responsive: stack aside below main on mobile */
/* ──────────────────────────────────────────────────────────────
 * Mobile responsivo — Process detail + fases + header
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* 1-col grid: aside arriba para dar contexto inmediato */
	.wat-sp-detail { grid-template-columns: 1fr; }
	.wat-sp-detail-aside { order: -1; }   /* Aside (info + historial) primero */
	.wat-sp-detail-main  { order:  0; }
}

@media (max-width: 720px) {
	/* Detail head: stack vertical para evitar espacio vacío entre chips y Volver */
	.wat-sp-page-head.wat-sp-detail-head {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}
	.wat-sp-detail-head-main {
		flex: unset;
		width: 100%;
		min-width: 0;
	}
	.wat-sp-detail-head-actions {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}
	.wat-sp-detail-head-actions .wat-sp-btn {
		flex: 1;
		justify-content: center;
		min-width: 0;
	}

	/* Chips de meta en el header: wrap y tamaño ajustado */
	.wat-sp-detail-head-meta { gap: 6px; }
	.wat-sp-detail-head-chip { font-size: .82rem; padding: 6px 11px; }
	.wat-sp-detail-head-chip--amount { font-size: .9rem; }

	/* Progress stepper: bola más pequeña + texto truncado */
	.wat-sp-step-circle { width: 36px; height: 36px; font-size: .86rem; }
	.wat-sp-step-label { font-size: .7rem; max-width: 72px; }
	.wat-sp-progress-hint { display: none; }

	/* En mobile mostrar TODOS los paneles de fase apilados (sin tabs
	 * ocultos). El usuario hace scroll en lugar de clic en tab. */
	.wat-sp-phase-panel { display: block !important; margin-bottom: 14px; }
	.wat-sp-phase-panel:not(.is-active) { opacity: 0.92; }

	/* Phase header más compacto */
	.wat-sp-phase-panel { padding: 16px 14px; }
	.wat-sp-phase-panel h2 { font-size: 1rem; }

	/* Formulario nueva solicitud: 1 col */
	.wat-sp-form { padding: 18px 16px; }
	.wat-sp-form-grid { grid-template-columns: 1fr !important; }
	.wat-sp-form-actions { flex-direction: column-reverse; }
	.wat-sp-form-actions .wat-sp-btn { width: 100%; justify-content: center; }

	/* Select tipo proceso: asegura full-width y altura táctil */
	.wat-sp-field select { font-size: 1rem; min-height: 48px; padding: 12px 14px; }

	/* Listado de solicitudes: tabla → cards */
	.wat-sp-table thead { display: none; }
	.wat-sp-table tbody td { display: block; padding: 8px 14px; border: none; font-size: .9rem; }
	.wat-sp-table tbody tr {
		display: block;
		border: 1px solid rgba(15, 26, 19, 0.08);
		border-radius: 12px;
		margin-bottom: 10px;
		background: #fff;
		overflow: hidden;
	}
	.wat-sp-table tbody td::before {
		content: attr(data-label);
		display: block;
		font-size: .7rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: #94a3b8;
		margin-bottom: 2px;
	}

	/* Action form (aprobar/rechazar): full width */
	.wat-sp-actions { flex-direction: column; gap: 8px; }
	.wat-sp-actions .wat-sp-btn { width: 100%; justify-content: center; }
	.wat-sp-action-form-title { font-size: .8rem; }

	/* Phase thread (conversación): más compacto */
	.wat-sp-phase-thread-item { flex-direction: column; gap: 8px; }
	.wat-sp-phase-thread-avatar { width: 30px; height: 30px; }
}

/* ============================================================
   REPORTS — KPIs + cards + horizontal bars
   ============================================================ */
.wat-sp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}
.wat-sp-kpi {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wat-sp-kpi-label {
	font-size: 0.74rem;
	font-weight: 700;
	color: #6b7a6c;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.wat-sp-kpi-value {
	font-size: 1.85rem;
	font-weight: 900;
	color: #0f1a13;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-top: 4px;
}
.wat-sp-kpi-sub {
	font-size: 0.78rem;
	color: #94a3b8;
	margin-top: 4px;
}

.wat-sp-report-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.wat-sp-report-card {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 22px 24px;
}
.wat-sp-report-card h3 {
	margin: 0 0 14px;
	font-size: 0.95rem;
	font-weight: 800;
	color: #0f1a13;
	display: flex;
	align-items: center;
	gap: 8px;
}
.wat-sp-report-card h3 small { font-size: 0.78rem; font-weight: 500; }
.wat-sp-report-card .wat-sp-table thead th {
	background: transparent;
	padding: 8px 0;
	border-bottom: 1px solid rgba(15, 26, 19, 0.06);
}
.wat-sp-report-card .wat-sp-table tbody td {
	padding: 8px 4px;
	border-bottom: 1px solid rgba(15, 26, 19, 0.04);
}

.wat-sp-bar {
	height: 8px;
	background: rgba(15, 26, 19, 0.06);
	border-radius: 999px;
	overflow: hidden;
}
.wat-sp-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #9bc950, #5d7f29);
	border-radius: 999px;
	transition: width 0.6s ease;
}

@media (max-width: 760px) {
	.wat-sp-report-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PLACEHOLDER cards (kept for views not built yet)
   ============================================================ */
.wat-sp-placeholder {
	background: linear-gradient(135deg, #f3f9e8 0%, #fff 100%);
	border: 1px solid rgba(155, 201, 80, 0.35);
	border-radius: 16px;
	padding: 40px 36px;
	max-width: 760px;
}
.wat-sp-placeholder-tag {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(155, 201, 80, 0.18);
	color: #4a651f;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 999px;
	margin-bottom: 18px;
}
.wat-sp-placeholder h2 { font-size: 1.65rem; font-weight: 800; color: #0f1a13; margin: 0 0 12px; }
.wat-sp-placeholder > p { color: #6b7a6c; line-height: 1.6; margin: 0 0 24px; font-size: 1rem; }

/* Mobile adjustments */
@media (max-width: 760px) {
	.wat-sp-filters { grid-template-columns: 1fr; }
	.wat-sp-table thead { display: none; }
	.wat-sp-table tbody td { display: block; padding: 8px 14px; border: none; }
	.wat-sp-table tbody tr {
		display: block;
		padding: 14px 8px;
		border-bottom: 1px solid rgba(15, 26, 19, 0.06);
	}
	.wat-sp-table tbody td::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 100px;
		font-weight: 700;
		color: #6b7a6c;
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-right: 8px;
	}
}

/* ──────────────────────────────────────────────────────────────
 * Home /app/ — KPIs personales + paneles
 * ──────────────────────────────────────────────────────────── */
.wat-sp-home { display: flex; flex-direction: column; gap: 22px; margin: 18px 0 32px; }

.wat-sp-home-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.wat-sp-home-kpi {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	padding: 22px 20px;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wat-sp-home-kpi:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(15, 26, 19, 0.08);
	border-color: rgba(155, 201, 80, 0.4);
}
.wat-sp-home-kpi-icon { font-size: 1.6rem; line-height: 1; }
.wat-sp-home-kpi-value { font-size: 2rem; font-weight: 800; line-height: 1; color: #0f1a13; }
.wat-sp-home-kpi-label { font-size: .82rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

.wat-sp-home-kpi--alert { border-color: rgba(239, 68, 68, 0.3); background: linear-gradient(135deg, #fff, #fef2f2); }
.wat-sp-home-kpi--alert .wat-sp-home-kpi-value { color: #b91c1c; }
.wat-sp-home-kpi--cta { background: linear-gradient(135deg, #9bc950, #5d7f29); color: #fff; border-color: transparent; }
.wat-sp-home-kpi--cta .wat-sp-home-kpi-value,
.wat-sp-home-kpi--cta .wat-sp-home-kpi-label { color: #fff; }
.wat-sp-home-kpi--cta .wat-sp-home-kpi-label { opacity: .85; }

.wat-sp-home-panel { background: #fff; border: 1px solid rgba(15, 26, 19, 0.08); border-radius: 14px; padding: 20px 22px; }
.wat-sp-home-panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.wat-sp-home-panel-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f1a13; }
.wat-sp-home-link { color: #5d7f29; text-decoration: none; font-size: .88rem; font-weight: 600; }
.wat-sp-home-link:hover { color: #4a651f; }

.wat-sp-home-list { list-style: none; margin: 8px 0 0; padding: 0; }
.wat-sp-home-list li { border-bottom: 1px solid #f1f5f9; }
.wat-sp-home-list li:last-child { border-bottom: 0; }
.wat-sp-home-list a {
	display: flex; align-items: center; gap: 14px;
	padding: 12px 0; text-decoration: none; color: inherit;
}
.wat-sp-home-list-main { flex: 1; min-width: 0; }
.wat-sp-home-list-main strong { display: block; font-size: .98rem; color: #0f1a13; }
.wat-sp-home-list-sub { font-size: .82rem; color: #64748b; display: block; margin-top: 2px; }
.wat-sp-home-list-meta { display: flex; gap: 10px; align-items: center; }
.wat-sp-home-list-pill {
	display: inline-block; padding: 3px 9px; border-radius: 999px;
	font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	background: #f1f5f9; color: #475569;
}
.wat-sp-home-list-pill--stale { background: #fee2e2; color: #b91c1c; }
.wat-sp-home-list-pill--active { background: #dbeafe; color: #1e40af; }
.wat-sp-home-list-pill--completed { background: #d1fae5; color: #047857; }
.wat-sp-home-list-pill--cancelled { background: #fee2e2; color: #991b1b; }

.wat-sp-home-empty {
	background: #fff;
	border: 1px dashed rgba(15, 26, 19, 0.18);
	border-radius: 14px;
	padding: 40px 24px;
	text-align: center;
}
.wat-sp-home-empty-illu { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.wat-sp-home-empty h3 { margin: 8px 0 6px; font-size: 1.1rem; color: #0f1a13; }
.wat-sp-home-empty p { margin: 0 0 16px; color: #64748b; }

/* ──────────────────────────────────────────────────────────────
 * Notifications feed (/app/notificaciones/)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-notif { padding-bottom: 32px; }
.wat-sp-notif-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 16px; }
.wat-sp-notif-head h1 { margin: 0; flex: 0 0 auto; }
.wat-sp-notif-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 999px; padding: 4px; }
.wat-sp-notif-tabs a {
	padding: 6px 14px; border-radius: 999px;
	color: #475569; text-decoration: none; font-weight: 600; font-size: .85rem;
	display: inline-flex; align-items: center; gap: 6px;
}
.wat-sp-notif-tabs a.is-active { background: #fff; color: #0f1a13; box-shadow: 0 1px 2px rgba(15, 26, 19, .08); }
.wat-sp-notif-badge { background: #ef4444; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 999px; font-weight: 700; }

.wat-sp-notif-list { list-style: none; margin: 0; padding: 0; }
.wat-sp-notif-list li {
	display: flex; align-items: stretch;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 10px;
	margin-bottom: 8px;
	overflow: hidden;
}
.wat-sp-notif-list li.is-unread { border-color: rgba(155, 201, 80, 0.4); background: linear-gradient(90deg, #f3f9e8 0, #fff 80px); }
.wat-sp-notif-row {
	display: flex; flex: 1; align-items: center; gap: 14px;
	padding: 14px 16px; text-decoration: none; color: #0f1a13;
}
.wat-sp-notif-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.wat-sp-notif-main { flex: 1; min-width: 0; }
.wat-sp-notif-main strong { display: block; font-size: .94rem; color: #0f1a13; }
.wat-sp-notif-main p { margin: 3px 0; font-size: .85rem; color: #475569; }
.wat-sp-notif-main time { font-size: .72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; }
.wat-sp-notif-dot { width: 8px; height: 8px; background: #9bc950; border-radius: 999px; flex: 0 0 auto; }
.wat-sp-notif-mark { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid #f1f5f9; }
.wat-sp-notif-mark button {
	background: transparent; border: 0;
	color: #94a3b8; font-size: 18px; cursor: pointer;
	padding: 6px 10px; border-radius: 6px;
}
.wat-sp-notif-mark button:hover { background: #f3f9e8; color: #4a651f; }

/* ──────────────────────────────────────────────────────────────
 * Password reset (/recuperar-contrasena)
 * ──────────────────────────────────────────────────────────── */
.wat-pwd { display: flex; justify-content: center; padding: 48px 16px; min-height: 60vh; }
.wat-pwd-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 18px;
	padding: 36px 32px;
	box-shadow: 0 14px 40px rgba(15, 26, 19, 0.08);
	text-align: center;
}
.wat-pwd-logo { max-height: 56px; margin-bottom: 18px; }
.wat-pwd-brand { font-weight: 800; font-size: 1.1rem; color: #0f1a13; margin-bottom: 14px; letter-spacing: .04em; }
.wat-pwd-card h1 { margin: 6px 0 8px; font-size: 1.5rem; color: #0f1a13; font-weight: 800; }
.wat-pwd-sub { color: #64748b; margin: 0 0 22px; font-size: .94rem; line-height: 1.5; }
.wat-pwd-form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 18px; }
.wat-pwd-form label span {
	display: block; font-size: .82rem; font-weight: 600; color: #475569;
	text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.wat-pwd-form input[type="email"],
.wat-pwd-form input[type="password"],
.wat-pwd-form input[type="text"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font-size: 1rem;
	background: #f9fafb;
	transition: border-color .15s ease, background .15s ease;
}
.wat-pwd-form input:focus {
	outline: none;
	border-color: #9bc950;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.2);
}
.wat-pwd-btn {
	display: inline-block; width: 100%;
	padding: 14px 18px;
	background: #0f1a13;
	color: #fff;
	border: 0; border-radius: 999px;
	font-weight: 700; font-size: 1rem; cursor: pointer;
	margin-top: 6px;
	text-decoration: none; text-align: center;
}
.wat-pwd-btn:hover { background: #4a651f; }
.wat-pwd-alert { padding: 12px 14px; border-radius: 8px; font-size: .86rem; }
.wat-pwd-alert--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.wat-pwd-success { padding: 14px 0 6px; }
.wat-pwd-success-icon { font-size: 3rem; line-height: 1; margin-bottom: 10px; }
.wat-pwd-success p { color: #475569; font-size: .96rem; line-height: 1.55; margin: 8px 0; }
.wat-pwd-hint { color: #94a3b8; font-size: .82rem; }
.wat-pwd-foot { margin: 24px 0 0; }
.wat-pwd-foot a { color: #5d7f29; text-decoration: none; font-size: .88rem; font-weight: 600; }
.wat-pwd-foot a:hover { color: #4a651f; }

/* ──────────────────────────────────────────────────────────────
 * Stepper de progreso (vista detalle)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-progress {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 18px;
}
.wat-sp-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: .92rem; color: #475569; }
.wat-sp-progress-head strong { color: #0f1a13; font-size: 1rem; font-weight: 700; }
.wat-sp-progress-done { color: #047857 !important; }
.wat-sp-progress-pct { font-weight: 800; color: #5d7f29; font-size: 1.1rem; }
.wat-sp-progress-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.wat-sp-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #9bc950, #5d7f29); border-radius: 999px; transition: width .3s ease; }

.wat-sp-progress-hint {
	display: inline-block;
	margin-left: 10px;
	font-size: .82rem;
	color: #94a3b8;
	font-weight: 500;
}
.wat-sp-progress-steps {
	list-style: none; margin: 0; padding: 4px 0 6px;
	display: flex; justify-content: space-between; gap: 8px;
	overflow-x: auto;
}

/* The whole step is a button (clickable to switch panels). */
.wat-sp-step {
	flex: 1; min-width: 92px;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: transparent; border: none; padding: 8px 4px 6px;
	font-family: inherit; cursor: pointer;
	position: relative;
	transition: transform .12s ease;
}
.wat-sp-step:not(.is-locked):hover { transform: translateY(-1px); }
.wat-sp-step:not(.is-locked):hover .wat-sp-step-circle {
	box-shadow: 0 4px 14px rgba(93, 127, 41, 0.18);
}
.wat-sp-step:focus-visible { outline: 2px solid #5d7f29; outline-offset: 2px; border-radius: 8px; }
.wat-sp-step.is-locked { cursor: not-allowed; }

/* Connector line between circles. */
.wat-sp-step:not(:last-child)::after {
	content: ''; position: absolute;
	top: 26px; left: 60%; right: -40%;
	height: 3px; background: #e2e8f0;
	z-index: 0; border-radius: 2px;
}
.wat-sp-step.is-approved:not(:last-child)::after { background: linear-gradient(90deg, #9bc950, #c2dd95); }

.wat-sp-step-circle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid #e2e8f0;
	color: #94a3b8;
	font-weight: 800; font-size: 1.02rem;
	position: relative; z-index: 1;
	transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.wat-sp-step.is-approved .wat-sp-step-circle  {
	background: linear-gradient(135deg, #9bc950, #5d7f29);
	border-color: #5d7f29;
	color: #fff;
	box-shadow: 0 4px 10px rgba(93, 127, 41, 0.22);
}
.wat-sp-step.is-current .wat-sp-step-circle   {
	background: #fff;
	border-color: #5d7f29;
	color: #5d7f29;
	box-shadow: 0 0 0 4px rgba(93, 127, 41, 0.18);
}
.wat-sp-step.is-viewing:not(.is-current) .wat-sp-step-circle {
	border-color: #5d7f29;
	color: #5d7f29;
}
.wat-sp-step.is-rejected .wat-sp-step-circle  { background: #ef4444; border-color: #ef4444; color: #fff; }
.wat-sp-step.is-locked .wat-sp-step-circle    {
	background: #f4f6f4;
	border-color: #d8dcd8;
	color: #94a3b8;
}

/* Locked phases: number is primary, small padlock badge overlays the corner. */
.wat-sp-step-num { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.wat-sp-step-lock {
	position: absolute;
	top: -3px; right: -3px;
	background: #fff;
	border: 1.5px solid #d8dcd8;
	color: #6b7a6c;
	border-radius: 999px;
	width: 18px; height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.wat-sp-step-lock svg { width: 11px; height: 11px; }

.wat-sp-step-label {
	display: block;
	font-size: .82rem; font-weight: 600;
	color: #64748b;
	line-height: 1.25;
	max-width: 110px;
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.wat-sp-step.is-approved .wat-sp-step-label { color: #4a651f; }
.wat-sp-step.is-current  .wat-sp-step-label { color: #0f1a13; font-weight: 800; }
.wat-sp-step.is-rejected .wat-sp-step-label { color: #b91c1c; }
.wat-sp-step.is-locked   .wat-sp-step-label { color: #94a3b8; }

@media (max-width: 720px) {
	.wat-sp-progress-steps { justify-content: flex-start; }
	.wat-sp-step { min-width: 78px; }
	.wat-sp-step-circle { width: 38px; height: 38px; font-size: .92rem; }
	.wat-sp-step:not(:last-child)::after { top: 22px; }
	.wat-sp-step-label { font-size: .72rem; max-width: 80px; }
	.wat-sp-progress-hint { display: none; }
}

/* ──────────────────────────────────────────────────────────────
 * Centro de ayuda (/app/ayuda)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-help { max-width: 920px; }
.wat-sp-help-hero { text-align: center; padding: 32px 16px 24px; }
.wat-sp-help-hero-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; }
.wat-sp-help-hero h1 { margin: 0 0 8px; font-size: 1.8rem; font-weight: 800; color: #0f1a13; }
.wat-sp-help-hero p { color: #475569; max-width: 540px; margin: 0 auto; line-height: 1.55; }

.wat-sp-help-toc {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 24px 0 32px;
}
.wat-sp-help-toc a {
	padding: 8px 14px; border-radius: 999px;
	background: #f3f9e8; color: #4a651f;
	text-decoration: none; font-weight: 600; font-size: .88rem;
	transition: background .15s ease;
}
.wat-sp-help-toc a:hover { background: #9bc950; color: #fff; }

.wat-sp-help-block { margin-bottom: 36px; }
.wat-sp-help-block h2 {
	font-size: 1.2rem; font-weight: 800; color: #0f1a13;
	margin: 0 0 16px; padding-bottom: 8px;
	border-bottom: 2px solid #9bc950;
	display: inline-block;
}

.wat-sp-help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}
.wat-sp-help-card {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 12px;
	padding: 18px 16px;
}
.wat-sp-help-card-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border-radius: 999px;
	background: #9bc950; color: #fff;
	font-weight: 800; font-size: .9rem;
	margin-bottom: 10px;
}
.wat-sp-help-card h3 { margin: 4px 0 6px; font-size: .98rem; color: #0f1a13; font-weight: 700; }
.wat-sp-help-card p { margin: 0; color: #64748b; font-size: .88rem; line-height: 1.5; }

.wat-sp-help-steps {
	list-style: none; margin: 0; padding: 0;
	counter-reset: hstep;
}
.wat-sp-help-steps li {
	counter-increment: hstep;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 10px;
	padding: 14px 16px 14px 56px;
	margin-bottom: 8px;
	position: relative;
	color: #475569;
}
.wat-sp-help-steps li:before {
	content: counter(hstep);
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px;
	background: #f3f9e8; color: #4a651f;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: .88rem;
}
.wat-sp-help-steps strong { color: #0f1a13; }
.wat-sp-help-note {
	background: #fef3c7;
	border-left: 4px solid #f59e0b;
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 14px;
	color: #78350f;
	font-size: .9rem;
}

.wat-sp-help-faq {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 8px;
}
.wat-sp-help-faq summary {
	cursor: pointer;
	font-weight: 600;
	color: #0f1a13;
	list-style: none;
	display: flex; justify-content: space-between; align-items: center;
}
.wat-sp-help-faq summary::-webkit-details-marker { display: none; }
.wat-sp-help-faq summary:after { content: '+'; color: #94a3b8; font-size: 1.2rem; font-weight: 800; }
.wat-sp-help-faq[open] summary:after { content: '−'; }
.wat-sp-help-faq p { margin: 12px 0 0; color: #475569; font-size: .92rem; line-height: 1.6; }

.wat-sp-help-contact {
	background: linear-gradient(135deg, #f3f9e8, #fff);
	border: 1px solid rgba(155, 201, 80, 0.3);
	border-radius: 14px;
	padding: 22px 24px;
	display: flex; align-items: center; gap: 18px;
}
.wat-sp-help-contact-icon { font-size: 2.4rem; line-height: 1; flex: 0 0 auto; }
.wat-sp-help-contact p { margin: 0 0 10px; color: #2b3a30; font-size: .95rem; }

/* ──────────────────────────────────────────────────────────────
 * @menciones dropdown
 * ──────────────────────────────────────────────────────────── */
.wat-sp-mention-dropdown {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(15, 26, 19, 0.16);
	max-height: 260px;
	overflow-y: auto;
	z-index: 2000;
	padding: 4px;
}
.wat-sp-mention-item {
	display: block; width: 100%;
	text-align: left;
	padding: 9px 12px;
	background: transparent;
	border: 0; border-radius: 6px;
	cursor: pointer;
	font-size: .88rem;
	color: #0f1a13;
}
.wat-sp-mention-item.is-active,
.wat-sp-mention-item:hover { background: #f3f9e8; }
.wat-sp-mention-item strong { display: block; font-weight: 600; }
.wat-sp-mention-login { color: #5d7f29; font-size: .8rem; }
.wat-sp-mention-empty { padding: 14px; text-align: center; color: #94a3b8; font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════
   v2 POLISH — unifica el resto de vistas con el look del Home
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
 * Page heads: más respiración, título mayor, breadcrumb sutil
 * ──────────────────────────────────────────────────────────── */
.wat-sp-page-head {
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef2f0;
}
.wat-sp-page-head h1 {
	font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0f1a13;
	margin: 0 0 4px;
}
.wat-sp-page-head p {
	color: #64748b !important;
	font-size: 0.95rem !important;
	margin: 0;
}
.wat-sp-page-head .wat-sp-btn { flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────
 * Filtros: card limpia con shadow sutil
 * ──────────────────────────────────────────────────────────── */
.wat-sp-filters {
	border-radius: 16px !important;
	padding: 20px !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	box-shadow: 0 1px 2px rgba(15, 26, 19, 0.04);
}
.wat-sp-filters label {
	font-size: 0.74rem !important;
	letter-spacing: 0.08em !important;
	color: #64748b !important;
}
.wat-sp-filters input,
.wat-sp-filters select {
	height: 42px;
	padding: 0 14px !important;
	border-radius: 10px !important;
	border-color: #e2e8f0 !important;
	font-size: 0.93rem !important;
	background: #f8fafc !important;
	transition: all .15s ease !important;
}
.wat-sp-filters input:hover,
.wat-sp-filters select:hover { background: #fff !important; border-color: #cbd5e1 !important; }
.wat-sp-filters input:focus,
.wat-sp-filters select:focus { background: #fff !important; }

/* ──────────────────────────────────────────────────────────────
 * Tabla: rows más cómodas + hover marcado
 * ──────────────────────────────────────────────────────────── */
.wat-sp-table-wrap {
	border-radius: 16px !important;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 26, 19, 0.04);
}
.wat-sp-table { font-size: 0.94rem; }
.wat-sp-table thead th {
	padding: 14px 20px !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.1em !important;
	font-weight: 800 !important;
	background: #f9fafb !important;
	color: #6b7a6c !important;
	border-bottom: 1px solid #e5e7eb !important;
}
.wat-sp-table tbody td {
	padding: 16px 20px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	color: #1e293b !important;
}
.wat-sp-table tbody tr {
	transition: background .15s ease;
}
.wat-sp-table tbody tr:hover { background: #fafbfa !important; }
.wat-sp-row-id { color: #94a3b8 !important; font-size: 0.85rem !important; }
.wat-sp-row-title { font-weight: 700 !important; color: #0f1a13 !important; font-size: 0.96rem !important; }
.wat-sp-row-sub { font-size: 0.82rem !important; color: #64748b !important; }
.wat-sp-row-amount { font-size: 0.96rem !important; color: #0f1a13 !important; }

/* Badges/status modernos */
.wat-sp-badge { font-weight: 700 !important; }
.wat-sp-badge-status-active    { background: #dbeafe !important; color: #1e40af !important; }
.wat-sp-badge-status-completed { background: #d1fae5 !important; color: #047857 !important; }
.wat-sp-badge-status-cancelled { background: #fee2e2 !important; color: #991b1b !important; }
.wat-sp-badge-phase { background: #f3f9e8 !important; color: #4a651f !important; }

/* ──────────────────────────────────────────────────────────────
 * Detail: layout + tabs + paneles + history
 * ──────────────────────────────────────────────────────────── */
.wat-sp-detail {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
}
.wat-sp-detail-main, .wat-sp-detail-aside { min-width: 0; }

/* Tabs como segmented control moderno */
.wat-sp-tabs {
	display: flex; flex-wrap: wrap; gap: 4px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 6px;
	margin-bottom: 16px;
	overflow-x: auto;
}
.wat-sp-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px !important;
	border-radius: 10px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	color: #64748b !important;
	background: transparent !important;
	border: 0 !important;
	cursor: pointer;
	white-space: nowrap;
	transition: all .15s ease !important;
}
.wat-sp-tab:hover:not(.is-locked) { background: #f9fafb !important; color: #0f1a13 !important; }
.wat-sp-tab.is-current { background: #0f1a13 !important; color: #fff !important; }
.wat-sp-tab.is-current::after { display: none !important; }
.wat-sp-tab-step {
	width: 24px; height: 24px !important;
	border-radius: 999px !important;
	font-size: 0.78rem !important;
	font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f1f5f9; color: #64748b;
}
.wat-sp-tab.is-current .wat-sp-tab-step { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* Panel de cada fase */
.wat-sp-phase-panel {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 22px 24px;
	box-shadow: 0 1px 2px rgba(15, 26, 19, 0.04);
}

/* Action form (textarea + botones) */
.wat-sp-actions {
	display: flex; gap: 10px; flex-wrap: wrap;
	margin-top: 14px;
}

/* Aside: tarjetas info */
.wat-sp-aside-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 1px 2px rgba(15, 26, 19, 0.04);
}

/* History list polish (legacy rules: las reemplazamos por el timeline de líneas 693+) */

/* ──────────────────────────────────────────────────────────────
 * Notifications feed (consistente con home)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-notif-head h1 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; }
.wat-sp-notif-list li {
	border-radius: 14px !important;
	margin-bottom: 10px !important;
	box-shadow: 0 1px 2px rgba(15, 26, 19, 0.04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wat-sp-notif-list li:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 26, 19, 0.06); border-color: #9bc950 !important; }
.wat-sp-notif-list li.is-unread { border-color: rgba(155, 201, 80, 0.35) !important; }
.wat-sp-notif-row { padding: 16px 20px !important; }
.wat-sp-notif-icon { font-size: 1.7rem !important; }
.wat-sp-notif-main strong { font-size: 0.98rem !important; color: #0f1a13 !important; }
.wat-sp-notif-main p { font-size: .88rem !important; color: #475569 !important; }
.wat-sp-notif-main time { font-size: .72rem !important; color: #94a3b8 !important; }

/* Tabs de notifs como segmented */
.wat-sp-notif-tabs { padding: 5px; gap: 2px; }
.wat-sp-notif-tabs a { padding: 8px 16px; font-size: .9rem; }
.wat-sp-notif-tabs a.is-active { background: #0f1a13; color: #fff; }
.wat-sp-notif-tabs a.is-active:hover { background: #1a2e1f; }

/* ──────────────────────────────────────────────────────────────
 * Centro de ayuda: pulido tipográfico
 * ──────────────────────────────────────────────────────────── */
.wat-sp-help-hero h1 {
	font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.wat-sp-help-hero p { font-size: 1.02rem !important; line-height: 1.65 !important; color: #64748b !important; }

.wat-sp-help-block h2 {
	font-size: 1.2rem !important;
	letter-spacing: -0.01em;
	padding-bottom: 10px !important;
	border-bottom-width: 3px !important;
}

.wat-sp-help-card {
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wat-sp-help-card:hover {
	transform: translateY(-2px);
	border-color: #9bc950 !important;
	box-shadow: 0 12px 24px rgba(15, 26, 19, 0.06);
}
.wat-sp-help-card-num {
	width: 36px !important; height: 36px !important;
	font-size: 1rem !important;
	background: linear-gradient(135deg, #9bc950, #5d7f29) !important;
}
.wat-sp-help-card h3 { font-size: 1.02rem !important; font-weight: 700; color: #0f1a13; }

.wat-sp-help-faq {
	border-radius: 12px !important;
	padding: 16px 18px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wat-sp-help-faq[open] {
	border-color: #9bc950 !important;
	box-shadow: 0 4px 14px rgba(155, 201, 80, 0.08);
}
.wat-sp-help-faq summary { font-size: 0.96rem; font-weight: 700; }
.wat-sp-help-faq summary:after { font-size: 1.4rem; transition: transform .2s ease; }
.wat-sp-help-faq[open] summary:after { transform: rotate(180deg); }

/* ──────────────────────────────────────────────────────────────
 * Responsive: detalle 1 columna y filtros stack
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
	.wat-sp-detail { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.wat-sp-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
	.wat-sp-page-head .wat-sp-btn { width: 100%; justify-content: center; }
	.wat-sp-filters { grid-template-columns: 1fr 1fr; }
	.wat-sp-filters .wat-sp-filter-apply { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
	.wat-sp-filters { grid-template-columns: 1fr; }
	.wat-sp-tabs { padding: 4px; }
	.wat-sp-tab { padding: 8px 10px !important; font-size: 0.82rem !important; }
	.wat-sp-phase-panel { padding: 18px 16px; border-radius: 12px; }
	.wat-sp-help-hero { padding: 20px 12px 14px; }
	.wat-sp-help-toc { padding: 10px 12px; }
	.wat-sp-help-toc a { padding: 6px 10px; font-size: 0.82rem; }
}

/* ──────────────────────────────────────────────────────────────
 * Requisition picker — search results + detail panel
 * ──────────────────────────────────────────────────────────── */
.wat-sp-req-source {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-style: normal;
	background: #d1fae5;
	color: #047857;
}
.wat-sp-req-source--mock { background: #fef3c7; color: #92400e; }

.wat-sp-req-loading,
.wat-sp-req-empty {
	padding: 14px 16px;
	color: #94a3b8;
	font-size: 0.88rem;
	text-align: center;
}

/* Detail panel */
.wat-sp-req-detail {
	margin-top: 14px;
	background: #fff;
	border: 1px solid rgba(155, 201, 80, 0.4);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(155, 201, 80, 0.08);
}
.wat-sp-req-detail-loading,
.wat-sp-req-detail-error {
	padding: 18px;
	color: #64748b;
	text-align: center;
}
.wat-sp-req-detail-error { color: #b91c1c; }

.wat-sp-req-detail-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px;
	background: linear-gradient(135deg, #f3f9e8, #fff);
	border-bottom: 1px solid #f1f5f9;
}
.wat-sp-req-detail-head strong { font-size: 1rem; color: #0f1a13; }
.wat-sp-req-detail-source {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	background: #fff;
	color: #5d7f29;
	border: 1px solid rgba(155, 201, 80, 0.3);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.wat-sp-req-detail-change {
	background: transparent;
	border: 1px solid rgba(15, 26, 19, 0.2);
	color: #475569;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
.wat-sp-req-detail-change:hover { background: #0f1a13; color: #fff; border-color: #0f1a13; }

.wat-sp-req-detail-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 16px 18px;
	border-bottom: 1px solid #f1f5f9;
	background: #fafbfa;
}
.wat-sp-req-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 8px;
	min-width: 0;
}
.wat-sp-req-meta-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	white-space: nowrap;
}
.wat-sp-req-meta-value {
	font-size: 0.92rem;
	color: #0f1a13;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	overflow-wrap: anywhere;
}
.wat-sp-req-meta-value code {
	background: #f3f9e8;
	color: #4a651f;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
}

.wat-sp-req-detail-items { padding: 4px 0; max-height: 320px; overflow-y: auto; }
.wat-sp-req-items-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}
.wat-sp-req-items-table th {
	text-align: left;
	padding: 10px 18px;
	background: #fafbfa;
	border-bottom: 1px solid #f1f5f9;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}
.wat-sp-req-items-table th.ta-r,
.wat-sp-req-items-table td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.wat-sp-req-items-table td {
	padding: 10px 18px;
	border-bottom: 1px solid #f8fafc;
	color: #1e293b;
}
.wat-sp-req-items-table tbody tr:last-child td { border-bottom: 0; }
.wat-sp-req-items-table tbody tr:hover { background: #fafbfa; }
.wat-sp-req-detail-empty { padding: 16px 18px; color: #94a3b8; font-size: 0.9rem; text-align: center; margin: 0; }

/* ──────────────────────────────────────────────────────────────
 * Requisition orders block (proveedor + valores + facturas)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-req-orders { padding: 16px 18px; border-bottom: 1px solid #f1f5f9; }
.wat-sp-req-orders h4 {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
}

.wat-sp-req-order {
	background: #fafbfa;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #9bc950;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 10px;
}
.wat-sp-req-order:last-child { margin-bottom: 0; }
.wat-sp-req-order.is-cancelled { border-left-color: #ef4444; opacity: 0.7; }
.wat-sp-req-order.is-closed    { border-left-color: #94a3b8; }

.wat-sp-req-order-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 10px; margin-bottom: 10px;
}
.wat-sp-req-order-head strong { font-size: 0.96rem; color: #0f1a13; }
.wat-sp-req-order-state {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #d1fae5;
	color: #047857;
}
.is-cancelled .wat-sp-req-order-state { background: #fee2e2; color: #991b1b; }
.is-closed .wat-sp-req-order-state    { background: #e5e7eb; color: #475569; }
.wat-sp-req-order-amount {
	font-size: 1.1rem;
	font-weight: 800;
	color: #0f1a13;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wat-sp-req-order-supplier {
	background: #fff;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
	border: 1px solid #f1f5f9;
}
.wat-sp-req-order-supplier-name {
	font-weight: 700;
	color: #0f1a13;
	font-size: 0.95rem;
	margin-bottom: 6px;
}
.wat-sp-req-order-pill {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 3px 9px;
	background: #f3f9e8;
	color: #4a651f;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
}

.wat-sp-req-order-meta {
	display: flex; flex-wrap: wrap; gap: 14px;
	color: #64748b;
	font-size: 0.84rem;
	margin-bottom: 8px;
}
.wat-sp-req-order-meta span strong { color: #0f1a13; font-variant-numeric: tabular-nums; }

.wat-sp-req-order-invoices {
	background: #fff;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 0.82rem;
	color: #475569;
}
.wat-sp-req-order-invoices strong { color: #0f1a13; }
.wat-sp-req-invoice {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 3px 9px;
	background: #dbeafe;
	color: #1e40af;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}
.wat-sp-req-no-invoice {
	color: #94a3b8;
	font-style: italic;
	font-size: 0.82rem;
}
.wat-sp-req-no-orders {
	padding: 16px 18px;
	color: #92400e;
	background: #fef3c7;
	border-radius: 10px;
	margin: 16px 18px;
	font-size: 0.86rem;
	border-left: 4px solid #f59e0b;
}

/* Items table collapsed inside <details> */
.wat-sp-req-items-wrap { padding: 0 18px 16px; }
.wat-sp-req-items-wrap summary {
	cursor: pointer;
	padding: 12px 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.wat-sp-req-items-wrap summary:hover { color: #0f1a13; }

/* ──────────────────────────────────────────────────────────────
 * Nueva solicitud: hint del tipo + modo dinámico
 * ──────────────────────────────────────────────────────────── */
.wat-sp-type-hint {
	display: none;
	margin-top: 6px !important;
	padding: 8px 12px;
	background: #f3f9e8;
	border-left: 3px solid #9bc950;
	border-radius: 6px;
	color: #4a651f !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.wat-sp-form textarea {
	padding: 12px 14px;
	border: 1px solid rgba(15, 26, 19, 0.12);
	border-radius: 10px;
	font-size: 0.95rem;
	color: #0f1a13;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	min-height: 110px;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wat-sp-form textarea:focus {
	outline: none;
	border-color: #9bc950;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.18);
}

/* ──────────────────────────────────────────────────────────────
 * Currency input ($ prefix + thousands punctuation)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-currency-wrap {
	position: relative;
	display: block;
}
.wat-sp-currency-prefix {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #5d7f29;
	font-weight: 800;
	font-size: 0.96rem;
	pointer-events: none;
	z-index: 1;
}
.wat-sp-currency-input {
	padding-left: 30px !important;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
 * Centro de Ayuda v2: refinamiento de alineación + iconografía
 * ──────────────────────────────────────────────────────────── */
.wat-sp-help { max-width: 1040px; margin: 0 auto; }

.wat-sp-help-hero {
	text-align: center;
	padding: 40px 16px 28px;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 32px;
}
.wat-sp-help-hero h1 { margin: 14px auto 10px !important; max-width: 600px; }
.wat-sp-help-hero p { max-width: 580px; margin: 0 auto; }

.wat-sp-help-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: 10px 16px;
	margin: 0 auto 40px;
	max-width: max-content;
	box-shadow: 0 2px 8px rgba(15, 26, 19, 0.04);
}
.wat-sp-help-toc a {
	padding: 8px 16px !important;
	font-size: 0.86rem !important;
	background: #f3f9e8 !important;
	color: #4a651f !important;
	border-radius: 999px !important;
	transition: all .15s ease;
}
.wat-sp-help-toc a:hover {
	background: #5d7f29 !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(93, 127, 41, 0.25);
}

.wat-sp-help-block { margin-bottom: 40px; }
.wat-sp-help-block h2 {
	display: inline-block;
	font-size: 1.4rem !important;
	margin-bottom: 18px !important;
	padding-bottom: 10px !important;
	border-bottom: 3px solid #9bc950 !important;
}

/* Cards más uniformes con altura consistente */
.wat-sp-help-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 16px !important;
}
.wat-sp-help-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 20px !important;
	border-radius: 14px !important;
	transition: all .2s ease;
}
.wat-sp-help-card-num,
.wat-sp-help-card-icon {
	flex-shrink: 0;
	margin-bottom: 6px;
}
.wat-sp-help-card-icon {
	width: 40px; height: 40px;
	background: #f3f9e8;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem;
	line-height: 1;
}
.wat-sp-help-card h3 {
	font-size: 1rem !important;
	margin: 4px 0 0 !important;
	color: #0f1a13;
	line-height: 1.3;
}
.wat-sp-help-card p {
	margin-top: 4px !important;
	font-size: 0.88rem !important;
	line-height: 1.55 !important;
	color: #475569 !important;
}

/* Card contacto soporte mejorada */
.wat-sp-help-contact {
	background: linear-gradient(135deg, #f3f9e8, #fff);
	border: 1px solid rgba(155, 201, 80, 0.3);
	border-radius: 16px;
	padding: 28px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.wat-sp-help-contact-icon {
	font-size: 3.2rem;
	line-height: 1;
	flex-shrink: 0;
}
.wat-sp-help-contact-body { flex: 1; min-width: 260px; }
.wat-sp-help-contact-body strong { display: block; font-size: 1.05rem; color: #0f1a13; margin-bottom: 4px; }
.wat-sp-help-contact-body p { margin: 0 0 14px; color: #475569; }

/* FAQ */
.wat-sp-help-faq {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 10px;
	transition: all .15s ease;
}
.wat-sp-help-faq[open] {
	border-color: #9bc950;
	box-shadow: 0 4px 14px rgba(155, 201, 80, 0.1);
}

/* Steps del flujo */
.wat-sp-help-steps {
	display: grid;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
}
.wat-sp-help-steps li {
	padding-left: 60px !important;
	padding-right: 18px !important;
	min-height: 60px;
	display: flex;
	align-items: center;
}
.wat-sp-help-note {
	background: #fff7ed !important;
	border-left: 4px solid #f59e0b !important;
	color: #92400e !important;
}

@media (max-width: 700px) {
	.wat-sp-help-toc { padding: 8px 10px; gap: 4px; }
	.wat-sp-help-toc a { padding: 6px 12px !important; font-size: 0.78rem !important; }
	.wat-sp-help-grid { grid-template-columns: 1fr !important; }
	.wat-sp-help-contact { padding: 22px 18px; flex-direction: column; text-align: center; }
	.wat-sp-help-contact-body { min-width: 0; }
}

/* Fix centrado del hero ayuda — algunos temas resetean text-align en <p>. */
.wat-sp-help-hero { text-align: center !important; }
.wat-sp-help-hero h1,
.wat-sp-help-hero p {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

/* ──────────────────────────────────────────────────────────────
 * Consulta ERP — página dedicada
 * ──────────────────────────────────────────────────────────── */
.wat-sp-erp { max-width: 1100px; margin: 0 auto; padding-bottom: 40px; }

.wat-sp-erp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex-shrink: 0;
}
.wat-sp-erp-badge--live { background: #d1fae5; color: #047857; }
.wat-sp-erp-badge--mock { background: #fef3c7; color: #92400e; }

/* Search bar */
.wat-sp-erp-search-wrap {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 18px;
	box-shadow: 0 2px 6px rgba(15, 26, 19, 0.04);
}
.wat-sp-erp-search-input {
	position: relative;
	display: flex;
	align-items: center;
}
.wat-sp-erp-search-input svg {
	position: absolute;
	left: 18px;
	width: 20px; height: 20px;
	color: #94a3b8;
	pointer-events: none;
}
.wat-sp-erp-search-input input {
	width: 100%;
	height: 54px;
	padding: 0 50px 0 50px;
	border: 1.5px solid #e2e8f0;
	border-radius: 12px;
	background: #f9fafb;
	color: #0f1a13;
	font-size: 1rem;
	font-family: inherit;
	transition: all .15s ease;
}
.wat-sp-erp-search-input input:focus {
	outline: none;
	background: #fff;
	border-color: #9bc950;
	box-shadow: 0 0 0 4px rgba(155, 201, 80, 0.18);
}
.wat-sp-erp-search-input button {
	position: absolute;
	right: 14px;
	background: #f1f5f9;
	border: 0;
	width: 32px; height: 32px;
	border-radius: 999px;
	font-size: 1.2rem;
	color: #475569;
	cursor: pointer;
}
.wat-sp-erp-search-input button:hover { background: #e2e8f0; }
.wat-sp-erp-search-hint { display: block; margin-top: 10px; color: #94a3b8; font-size: 0.82rem; }

/* States */
.wat-sp-erp-state {
	background: #fff;
	border: 2px dashed #e5e7eb;
	border-radius: 16px;
	padding: 48px 24px;
	text-align: center;
}
.wat-sp-erp-state-icon { font-size: 3.4rem; line-height: 1; margin-bottom: 12px; }
.wat-sp-erp-state h3 { font-size: 1.15rem; color: #0f1a13; margin: 4px 0 6px; font-weight: 700; }
.wat-sp-erp-state p { color: #64748b; margin: 0 auto; max-width: 420px; }
.wat-sp-erp-loading {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 28px;
	text-align: center;
	color: #94a3b8;
}

/* List of results */
.wat-sp-erp-list-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 4px 12px;
	font-size: 0.88rem;
	color: #64748b;
}
.wat-sp-erp-list-head strong { color: #0f1a13; font-size: 1rem; }

.wat-sp-erp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wat-sp-erp-card {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: all .15s ease;
}
.wat-sp-erp-card:hover {
	border-color: #9bc950;
	box-shadow: 0 8px 20px rgba(15, 26, 19, 0.06);
	transform: translateY(-1px);
}
.wat-sp-erp-card-num {
	flex-shrink: 0;
	background: #f3f9e8;
	color: #4a651f;
	font-weight: 800;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.92rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wat-sp-erp-card-body { flex: 1; min-width: 0; }
.wat-sp-erp-card-body strong { display: block; color: #0f1a13; font-size: 0.96rem; font-weight: 700; }
.wat-sp-erp-card-meta { display: block; color: #64748b; font-size: 0.82rem; margin-top: 3px; }
.wat-sp-erp-card-arrow { color: #cbd5e1; font-size: 1.4rem; transition: all .15s ease; }
.wat-sp-erp-card:hover .wat-sp-erp-card-arrow { color: #5d7f29; transform: translateX(4px); }

/* Detalle */
.wat-sp-erp-detail { margin-top: 24px; }
.wat-sp-erp-detail-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.wat-sp-erp-back {
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	padding: 8px 16px;
	cursor: pointer;
	font-weight: 600;
	color: #475569;
	font-size: 0.88rem;
}
.wat-sp-erp-back:hover { background: #f1f5f9; color: #0f1a13; }
.wat-sp-erp-create {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #5d7f29;
	color: #fff !important;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(93, 127, 41, 0.25);
}
.wat-sp-erp-create:hover { background: #4a651f; transform: translateY(-1px); }

.wat-sp-erp-detail-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(15, 26, 19, 0.06);
}

/* Banner header del detalle */
.wat-sp-erp-detail-banner {
	background: linear-gradient(135deg, #5d7f29 0%, #9bc950 100%);
	color: #fff;
	padding: 28px 28px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}
.wat-sp-erp-detail-eyebrow {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 4px;
}
.wat-sp-erp-detail-banner h2 {
	color: #fff !important;
	font-size: 1.8rem !important;
	font-weight: 800;
	margin: 0 0 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: -0.02em;
}
.wat-sp-erp-detail-banner p {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.96rem;
}
.wat-sp-erp-detail-banner code {
	background: rgba(255, 255, 255, 0.22);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.82rem;
}

.wat-sp-erp-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.wat-sp-erp-stat span {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-bottom: 3px;
}
.wat-sp-erp-stat strong {
	display: block;
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* Meta del detalle */
.wat-sp-erp-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 20px 28px;
	background: #fafbfa;
	border-bottom: 1px solid #f1f5f9;
}
.wat-sp-erp-meta > div {
	background: #fff;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #f1f5f9;
}
.wat-sp-erp-meta dt {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 4px;
}
.wat-sp-erp-meta dd {
	margin: 0;
	font-size: 0.94rem;
	color: #0f1a13;
	font-weight: 600;
}
.wat-sp-erp-meta dd code {
	background: #f3f9e8;
	color: #4a651f;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.78rem;
}

/* Secciones del detalle (items, órdenes) */
.wat-sp-erp-section { padding: 22px 28px; border-top: 1px solid #f1f5f9; }
.wat-sp-erp-section h3 {
	margin: 0 0 14px;
	font-size: 0.94rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5d7f29;
}

/* Items table */
.wat-sp-erp-items-wrap { overflow-x: auto; }
.wat-sp-erp-items {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}
.wat-sp-erp-items th {
	text-align: left;
	padding: 10px 14px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
}
.wat-sp-erp-items th.ta-r,
.wat-sp-erp-items td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.wat-sp-erp-items td {
	padding: 12px 14px;
	border-bottom: 1px solid #f8fafc;
	color: #1e293b;
}
.wat-sp-erp-items td code {
	background: #f3f4f6;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 0.82rem;
}
.wat-sp-erp-mini-pill {
	display: inline-block;
	background: #dbeafe;
	color: #1e40af;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	margin-left: 6px;
	font-weight: 700;
}

/* Órdenes */
.wat-sp-erp-order {
	background: #fafbfa;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #9bc950;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 12px;
}
.wat-sp-erp-order.is-cancelled { border-left-color: #ef4444; opacity: 0.7; }
.wat-sp-erp-order.is-closed { border-left-color: #94a3b8; }

.wat-sp-erp-order-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.wat-sp-erp-order-head strong { color: #0f1a13; font-size: 1rem; }
.wat-sp-erp-order-state {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #d1fae5;
	color: #047857;
}
.is-cancelled .wat-sp-erp-order-state { background: #fee2e2; color: #991b1b; }
.is-closed .wat-sp-erp-order-state { background: #e5e7eb; color: #475569; }
.wat-sp-erp-order-amount {
	margin-left: auto;
	font-weight: 800;
	color: #0f1a13;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
}

.wat-sp-erp-supplier {
	background: #fff;
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 10px;
	border: 1px solid #f1f5f9;
}
.wat-sp-erp-supplier-name {
	font-weight: 700;
	color: #0f1a13;
	font-size: 0.98rem;
	margin-bottom: 6px;
}
.wat-sp-erp-supplier span {
	display: inline-block;
	margin: 3px 8px 3px 0;
	padding: 4px 10px;
	background: #f3f9e8;
	color: #4a651f;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
}

.wat-sp-erp-order-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0.85rem;
	color: #64748b;
	margin-bottom: 10px;
}
.wat-sp-erp-order-meta strong { color: #0f1a13; font-variant-numeric: tabular-nums; }

.wat-sp-erp-invoices {
	background: #fff;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.86rem;
}
.wat-sp-erp-invoices strong { color: #0f1a13; }
.wat-sp-erp-invoice-pill {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 3px 10px;
	background: #dbeafe;
	color: #1e40af;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}
.wat-sp-erp-no-invoice { color: #94a3b8; font-style: italic; }

@media (max-width: 700px) {
	.wat-sp-erp-detail-banner { flex-direction: column; align-items: flex-start; }
	.wat-sp-erp-meta { padding: 16px; grid-template-columns: 1fr 1fr; }
	.wat-sp-erp-section { padding: 18px; }
	.wat-sp-erp-order-amount { margin-left: 0; }
}

/* Forzar centrado de los estados vacíos del ERP — el tema resetea text-align en <p>. */
.wat-sp-erp-state { text-align: center !important; }
.wat-sp-erp-state h3,
.wat-sp-erp-state p {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ERP detail: pills extra de capítulo + bloque comparativo */
.wat-sp-erp-item-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.wat-sp-erp-mini-pill--cap {
	background: #f3f9e8 !important;
	color: #4a651f !important;
}

.wat-sp-erp-compare {
	background: #fff7ed;
	border-top: 1px solid #fde68a !important;
}
.wat-sp-erp-compare h3 { color: #c2410c !important; }
.wat-sp-erp-compare-meta {
	display: flex;
	gap: 14px;
	margin-bottom: 10px;
	color: #78350f;
	font-size: 0.86rem;
}
.wat-sp-erp-compare-obs {
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border-radius: 8px;
	border-left: 4px solid #f59e0b;
	color: #78350f;
	line-height: 1.55;
	white-space: pre-wrap;
}

/* ERP detail v2: pills extra + movimientos de almacén */
.wat-sp-erp-mini-pill--cat { background: #ede9fe !important; color: #5b21b6 !important; }
.wat-sp-erp-mini-pill--grp { background: #fef3c7 !important; color: #92400e !important; }
.wat-sp-erp-mini-pill--off { background: #fee2e2 !important; color: #991b1b !important; }

/* Movimientos */
.wat-sp-erp-movs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wat-sp-erp-mov {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 4px solid #94a3b8;
	border-radius: 10px;
}
.wat-sp-erp-mov--in    { border-left-color: #10b981; }
.wat-sp-erp-mov--out   { border-left-color: #ef4444; }
.wat-sp-erp-mov--note  { border-left-color: #f59e0b; }
.wat-sp-erp-mov.is-anulado { opacity: 0.6; }
.wat-sp-erp-mov-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.wat-sp-erp-mov-body { flex: 1; min-width: 0; }
.wat-sp-erp-mov-body strong { color: #0f1a13; font-size: 0.95rem; }
.wat-sp-erp-mov-meta { display: block; color: #64748b; font-size: 0.82rem; margin-top: 3px; }
.wat-sp-erp-mov-amount {
	font-weight: 700;
	color: #0f1a13;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	font-size: 0.96rem;
}

/* ──────────────────────────────────────────────────────────────
 * ERP filtros de fecha + chips de rango
 * ──────────────────────────────────────────────────────────── */
.wat-sp-erp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f1f5f9;
}
.wat-sp-erp-filter {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
}
.wat-sp-erp-filter span {
	font-size: 0.7rem;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wat-sp-erp-filter input[type="date"] {
	height: 40px;
	padding: 0 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	background: #f9fafb;
	color: #0f1a13;
	font-size: 0.9rem;
	font-family: inherit;
	transition: all .15s ease;
}
.wat-sp-erp-filter input[type="date"]:focus {
	outline: none;
	background: #fff;
	border-color: #9bc950;
	box-shadow: 0 0 0 3px rgba(155, 201, 80, 0.18);
}

.wat-sp-erp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	margin-left: auto;
	justify-content: flex-end;
}
.wat-sp-erp-chips button {
	padding: 8px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #475569;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all .15s ease;
}
.wat-sp-erp-chips button:hover {
	background: #f3f9e8;
	color: #4a651f;
	border-color: #9bc950;
}
.wat-sp-erp-chips button.is-active {
	background: #5d7f29;
	color: #fff;
	border-color: #5d7f29;
}
.wat-sp-erp-chip-clear {
	color: #b91c1c !important;
}
.wat-sp-erp-chip-clear:hover {
	background: #fee2e2 !important;
	color: #991b1b !important;
	border-color: #fca5a5 !important;
}

@media (max-width: 700px) {
	.wat-sp-erp-filters { flex-direction: column; align-items: stretch; }
	.wat-sp-erp-chips { margin-left: 0; justify-content: flex-start; }
}

/* ──────────────────────────────────────────────────────────────
 * ERP secciones colapsables (items, órdenes, movimientos)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-erp-section--collapsible {
	padding: 0 !important;
}
.wat-sp-erp-section--collapsible > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 28px;
	border-top: 1px solid #f1f5f9;
	transition: background .15s ease;
	user-select: none;
}
.wat-sp-erp-section--collapsible > summary::-webkit-details-marker {
	display: none;
}
.wat-sp-erp-section--collapsible > summary:hover {
	background: #fafbfa;
}
.wat-sp-erp-section--collapsible > summary h3 {
	margin: 0 !important;
}
.wat-sp-erp-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: 999px;
	background: #f3f9e8;
	color: #4a651f;
	font-size: 0.85rem;
	font-weight: 800;
	transition: transform .2s ease;
}
.wat-sp-erp-section--collapsible[open] > summary .wat-sp-erp-toggle {
	transform: rotate(180deg);
}
/* Contenido interno mantiene su padding original */
.wat-sp-erp-section--collapsible > .wat-sp-erp-items-wrap,
.wat-sp-erp-section--collapsible > .wat-sp-erp-movs,
.wat-sp-erp-section--collapsible > .wat-sp-erp-order {
	padding: 0 28px 22px;
}
/* Las órdenes (que son varios divs) necesitan padding individual */
.wat-sp-erp-section--collapsible > .wat-sp-erp-order:first-of-type {
	margin-top: 4px;
}
.wat-sp-erp-section--collapsible > .wat-sp-erp-order {
	margin-left: 28px;
	margin-right: 28px;
	padding: 16px 18px;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SWEEP — Vistas del módulo procesos
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
	.wat-sp-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
	.wat-sp-page-head h1 { font-size: 1.4rem !important; }
	.wat-sp-page-head .wat-sp-btn { width: 100%; justify-content: center; }
	.wat-sp-filters { grid-template-columns: 1fr 1fr !important; }
	.wat-sp-form { padding: 22px 18px; }
	.wat-sp-form-grid { grid-template-columns: 1fr 1fr !important; }
	.wat-sp-detail { grid-template-columns: 1fr; }
	.wat-sp-detail-aside { order: 99; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
	.wat-sp-page-head h1 { font-size: 1.25rem !important; }
	.wat-sp-page-head p  { font-size: 0.88rem !important; }

	/* Filtros 1 columna */
	.wat-sp-filters { grid-template-columns: 1fr !important; padding: 14px !important; gap: 10px; }
	.wat-sp-filters .wat-sp-filter-apply { grid-column: 1 / -1; }

	/* Tabla: convertir en cards apiladas */
	.wat-sp-table { font-size: 0.86rem; }
	.wat-sp-table thead { display: none; }
	.wat-sp-table, .wat-sp-table tbody, .wat-sp-table tr, .wat-sp-table td { display: block; }
	.wat-sp-table tr {
		background: #fff;
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		margin-bottom: 8px;
		padding: 4px 6px;
	}
	.wat-sp-table tbody td {
		border-bottom: 1px solid #f1f5f9 !important;
		padding: 10px 12px !important;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
	}
	.wat-sp-table tbody td:last-child { border-bottom: 0 !important; }
	.wat-sp-table tbody td::before {
		content: attr(data-label);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #94a3b8;
		flex-shrink: 0;
	}

	/* Form: 1 columna */
	.wat-sp-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
	.wat-sp-form { padding: 18px 14px; border-radius: 14px; }
	.wat-sp-form-actions { flex-direction: column-reverse; align-items: stretch; }
	.wat-sp-form-actions .wat-sp-btn { width: 100%; justify-content: center; }

	/* Tabs del detalle (segmented) */
	.wat-sp-tabs { padding: 4px; flex-wrap: nowrap; overflow-x: auto; }
	.wat-sp-tab { padding: 8px 10px !important; font-size: 0.78rem !important; flex-shrink: 0; }
	.wat-sp-tab-step { width: 20px !important; height: 20px !important; font-size: 0.72rem !important; }

	/* Phase panel */
	.wat-sp-phase-panel { padding: 16px 14px; border-radius: 12px; }
	.wat-sp-actions { flex-direction: column; }
	.wat-sp-actions .wat-sp-btn { width: 100%; justify-content: center; }

	/* Stepper de progreso en detalle: scroll horizontal */
	.wat-sp-progress { padding: 14px 16px; }
	.wat-sp-progress-steps { overflow-x: auto; padding-bottom: 8px; }
	.wat-sp-step { min-width: 70px; }
	.wat-sp-step-label { font-size: 0.66rem; }

	/* Detail meta (Requisición Edificar) — cards stack */
	.wat-sp-req-detail-meta { grid-template-columns: 1fr !important; padding: 14px !important; }

	/* Orders */
	.wat-sp-req-order-head { flex-wrap: wrap; }
	.wat-sp-req-order-amount { margin-left: 0 !important; font-size: 1rem; }
	.wat-sp-req-order-meta { gap: 8px !important; }

	/* Requisition picker (en form Nueva solicitud) */
	.wat-sp-req-detail-meta { padding: 12px; }
	.wat-sp-req-items-table { font-size: 0.78rem; }
	.wat-sp-req-items-table th, .wat-sp-req-items-table td { padding: 8px 10px !important; }

	/* Notificaciones */
	.wat-sp-notif-head { flex-direction: column; align-items: stretch; gap: 10px; }
	.wat-sp-notif-tabs { width: 100%; justify-content: center; }
	.wat-sp-notif-row { padding: 12px 14px !important; gap: 10px; }
	.wat-sp-notif-icon { font-size: 1.4rem !important; }
	.wat-sp-notif-main strong { font-size: 0.9rem !important; }

	/* Centro de ayuda */
	.wat-sp-help-hero { padding: 24px 12px 18px; }
	.wat-sp-help-hero h1 { font-size: 1.4rem !important; }
	.wat-sp-help-toc { padding: 8px 10px; gap: 4px; }
	.wat-sp-help-toc a { padding: 6px 10px !important; font-size: 0.76rem !important; }
	.wat-sp-help-grid { grid-template-columns: 1fr !important; }
	.wat-sp-help-block h2 { font-size: 1.15rem !important; }
	.wat-sp-help-card { padding: 18px 16px !important; }
	.wat-sp-help-contact { padding: 20px 16px; flex-direction: column; text-align: center; }
	.wat-sp-help-contact-body { min-width: 0 !important; }

	/* ERP: filtros stack + chips wrap */
	.wat-sp-erp-search-input input { height: 48px; padding-left: 44px !important; font-size: 16px !important; }
	.wat-sp-erp-search-input svg { left: 14px !important; }
	.wat-sp-erp-search-input button { width: 28px; height: 28px; right: 10px; }
	.wat-sp-erp-filters { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; }
	.wat-sp-erp-filter { min-width: 0; }
	.wat-sp-erp-chips { margin-left: 0; justify-content: flex-start; gap: 4px; }
	.wat-sp-erp-chips button { padding: 7px 11px; font-size: 0.78rem; }

	.wat-sp-erp-list-head { flex-direction: column; align-items: flex-start; gap: 4px; }
	.wat-sp-erp-card { padding: 14px 16px; gap: 12px; }
	.wat-sp-erp-card-num { padding: 6px 10px; font-size: 0.85rem; }
	.wat-sp-erp-card-arrow { display: none; }

	/* ERP detail banner */
	.wat-sp-erp-detail-head { flex-direction: column; }
	.wat-sp-erp-back, .wat-sp-erp-create { width: 100%; justify-content: center; text-align: center; }
	.wat-sp-erp-detail-banner { padding: 22px 18px; flex-direction: column; align-items: flex-start; }
	.wat-sp-erp-detail-banner h2 { font-size: 1.4rem !important; }
	.wat-sp-erp-stats { gap: 14px; }
	.wat-sp-erp-stat strong { font-size: 1.1rem; }
	.wat-sp-erp-meta { padding: 14px; grid-template-columns: 1fr 1fr; gap: 8px; }
	.wat-sp-erp-section { padding: 18px; }
	.wat-sp-erp-section--collapsible > summary { padding: 14px 18px; }
	.wat-sp-erp-section--collapsible > .wat-sp-erp-items-wrap,
	.wat-sp-erp-section--collapsible > .wat-sp-erp-movs { padding: 0 14px 18px; }
	.wat-sp-erp-section--collapsible > .wat-sp-erp-order { margin: 0 14px 8px; padding: 14px; }

	.wat-sp-erp-items-wrap { overflow-x: auto; }
	.wat-sp-erp-items { min-width: 540px; font-size: 0.82rem; }
	.wat-sp-erp-items th, .wat-sp-erp-items td { padding: 8px 10px; }

	.wat-sp-erp-order-head { gap: 8px; }
	.wat-sp-erp-order-amount { margin-left: 0 !important; font-size: 1rem; }
	.wat-sp-erp-supplier span { font-size: 0.74rem; }

	.wat-sp-erp-mov { gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
	.wat-sp-erp-mov-amount { flex: 1 1 100%; text-align: right; }
}

/* ── Mobile chico (≤400px) ── */
@media (max-width: 400px) {
	.wat-sp-erp-meta { grid-template-columns: 1fr; }
	.wat-sp-erp-card { flex-direction: column; align-items: flex-start; }
	.wat-sp-erp-card-num { align-self: flex-start; }
}

/* ──────────────────────────────────────────────────────────────
 * Documents — list item enriquecido en panel de fase + DMS page
 * ──────────────────────────────────────────────────────────── */

/* Lista de docs dentro de un panel de fase. */
.wat-sp-docs-block { display: flex; flex-direction: column; gap: 10px; }
.wat-sp-doc-list { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.wat-sp-doc-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.wat-sp-doc-item:hover { border-color: rgba(93, 127, 41, 0.35); box-shadow: 0 4px 12px rgba(15, 26, 19, 0.05); }
.wat-sp-doc-item-icon { flex-shrink: 0; }
.wat-sp-doc-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: #f3f9e8; color: #5d7f29;
}
.wat-sp-doc-icon svg { width: 20px; height: 20px; }
.wat-sp-doc-icon--pdf   { background: #fff1f1; color: #b91c1c; }
.wat-sp-doc-icon--doc   { background: #eef2ff; color: #3730a3; }
.wat-sp-doc-icon--sheet { background: #ecfdf5; color: #047857; }
.wat-sp-doc-icon--slide { background: #fff7ed; color: #c2410c; }
.wat-sp-doc-icon--image { background: #fdf4ff; color: #a21caf; }
.wat-sp-doc-icon--zip   { background: #fefce8; color: #854d0e; }
.wat-sp-doc-item-body { flex: 1; min-width: 0; }
.wat-sp-doc-item-line1 { display: flex; align-items: center; gap: 8px; }
.wat-sp-doc-item-name { font-weight: 700; color: #0f1a13; font-size: .95rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.wat-sp-doc-item-ver {
	font-size: .68rem; font-weight: 800;
	background: rgba(93, 127, 41, 0.12);
	color: #5d7f29;
	padding: 2px 7px;
	border-radius: 999px;
	letter-spacing: .04em;
}
.wat-sp-doc-item-line2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: .8rem; color: #6b7a6c; }
.wat-sp-doc-cat {
	display: inline-block; padding: 2px 9px;
	border-radius: 999px;
	background: #e5e7eb; color: #374151;
	font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
}
.wat-sp-doc-cat--factura       { background: #fff1f1; color: #991b1b; }
.wat-sp-doc-cat--cotizacion    { background: #fff7ed; color: #9a3412; }
.wat-sp-doc-cat--orden_compra  { background: #eef2ff; color: #3730a3; }
.wat-sp-doc-cat--contrato      { background: #f5f3ff; color: #6d28d9; }
.wat-sp-doc-cat--soporte       { background: #f3f9e8; color: #4a651f; }
.wat-sp-doc-cat--comprobante   { background: #ecfdf5; color: #047857; }
.wat-sp-doc-cat--acta          { background: #fefce8; color: #854d0e; }
.wat-sp-doc-cat--otro          { background: #e5e7eb; color: #374151; }
.wat-sp-doc-tag { font-size: .72rem; color: #6b7a6c; font-weight: 600; }
.wat-sp-doc-item-action {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	background: #f3f9e8; color: #4a651f;
	border-radius: 999px;
	font-size: .82rem; font-weight: 700;
	text-decoration: none;
	flex-shrink: 0;
	transition: background .15s ease;
}
.wat-sp-doc-item-action:hover { background: #9bc950; color: #fff; }
.wat-sp-doc-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wat-sp-doc-item-action--ghost {
	background: transparent;
	color: #6b7a6c;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
}
.wat-sp-doc-item-action--ghost:hover {
	background: #f3f4f6;
	color: #5d7f29;
	border-color: rgba(93, 127, 41, 0.18);
}
.wat-sp-doc-item-action--ghost svg { color: currentColor; }
.wat-sp-doc-item-action--danger {
	background: transparent;
	color: #b91c1c;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
}
.wat-sp-doc-item-action--danger:hover {
	background: #fef2f2;
	color: #991b1b;
	border-color: rgba(185, 28, 28, 0.18);
}
.wat-sp-doc-item-action--danger.is-loading { opacity: .5; cursor: wait; }
.wat-sp-doc-item.is-removing {
	transform: translateX(40px);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}
.wat-sp-doc-empty { color: #94a3b8; font-size: .9rem; margin: 0; }

/* Banner: "Te devolvieron de fase X — esto fue el motivo". Aparece en el
 * panel de la fase activa cuando una fase posterior está en estado rejected. */
.wat-sp-returned-banner {
	display: flex; gap: 14px;
	padding: 16px 18px;
	background: linear-gradient(135deg, #fef2f2, #fff);
	border: 1px solid #fecaca;
	border-left: 4px solid #ef4444;
	border-radius: 12px;
	margin: 12px 0 18px;
}
.wat-sp-returned-banner-icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
	display: inline-flex; align-items: center; justify-content: center;
}
.wat-sp-returned-banner-body { flex: 1; min-width: 0; }
.wat-sp-returned-banner-title {
	font-weight: 800; color: #991b1b; font-size: .98rem;
	margin-bottom: 6px;
}
.wat-sp-returned-banner-quote {
	margin: 0 0 8px;
	padding: 8px 12px;
	background: #fff;
	border-left: 3px solid #fca5a5;
	border-radius: 6px;
	font-style: italic;
	color: #1e293b;
	font-size: .92rem;
	line-height: 1.5;
	word-break: break-word;
}
.wat-sp-returned-banner-meta { color: #94a3b8; font-size: .78rem; margin-bottom: 8px; }
.wat-sp-returned-banner-meta strong { color: #475569; font-weight: 700; }
.wat-sp-returned-banner-hint {
	margin-top: 6px;
	padding: 8px 12px;
	background: rgba(155, 201, 80, 0.12);
	border-radius: 6px;
	color: #4a651f;
	font-size: .82rem;
	line-height: 1.5;
}

/* Pill de estado actual de la fase en la meta del panel. */
.wat-sp-phase-meta-state {
	display: inline-flex; align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	background: #f1f5f9;
	color: #475569;
}
.wat-sp-phase-meta-state--ok   { background: rgba(155, 201, 80, 0.18); color: #4a651f; }
.wat-sp-phase-meta-state--rej  { background: #fef2f2;                  color: #b91c1c; }
.wat-sp-phase-meta-state--now  { background: #eff6ff;                  color: #1d4ed8; }
.wat-sp-phase-meta-state--wait { background: #f3f4f6;                  color: #6b7a6c; }

/* Form de acción (aprobar/rechazar/comentar) — error inline pegado al
 * textarea para que no haya disconnect entre clic y feedback. */
.wat-sp-action-form-title {
	margin: 0 0 10px;
	font-size: .85rem;
	font-weight: 800;
	color: #2b3a30;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.wat-sp-action-form-label {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	color: #6b7a6c;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 6px;
}
.wat-sp-action-error {
	margin-top: 8px;
	padding: 10px 12px;
	background: #fef2f2;
	border-left: 3px solid #ef4444;
	border-radius: 6px;
	color: #991b1b;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
	animation: wat-sp-error-shake .35s ease-out;
}
@keyframes wat-sp-error-shake {
	0%   { transform: translateX(0); }
	25%  { transform: translateX(-4px); }
	50%  { transform: translateX(4px); }
	75%  { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}
textarea.wat-sp-textarea-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}

/* Conversación scoped a una fase — estilo "hilo de chat". */
.wat-sp-phase-thread { margin-top: 14px; }
.wat-sp-phase-thread h4 { margin: 0 0 10px; }
.wat-sp-phase-thread-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.wat-sp-phase-thread-item {
	display: flex; gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 12px;
}
.wat-sp-phase-thread-item--rejected { border-left: 3px solid #ef4444; background: #fff7f7; }
.wat-sp-phase-thread-item--approved { border-left: 3px solid #9bc950; background: #f8fcef; }
.wat-sp-phase-thread-item--commented { border-left: 3px solid #fbbf24; background: #fffdf3; }
.wat-sp-phase-thread-avatar {
	width: 36px; height: 36px; border-radius: 50%;
	flex-shrink: 0; overflow: hidden;
	background: #5d7f29; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .92rem;
}
.wat-sp-phase-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wat-sp-phase-thread-body { flex: 1; min-width: 0; }
.wat-sp-phase-thread-head {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: .85rem; margin-bottom: 4px;
}
.wat-sp-phase-thread-head strong { color: #0f1a13; font-weight: 700; }
.wat-sp-phase-thread-head time { color: #94a3b8; font-size: .76rem; }
.wat-sp-phase-thread-kind {
	font-size: .7rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 2px 8px; border-radius: 999px;
	background: #f1f5f9; color: #475569;
}
.wat-sp-phase-thread-kind--commented { background: #fef3c7; color: #92400e; }
.wat-sp-phase-thread-kind--approved  { background: rgba(155, 201, 80, 0.22); color: #4a651f; }
.wat-sp-phase-thread-kind--rejected  { background: #fef2f2; color: #b91c1c; }
.wat-sp-phase-thread-text {
	color: #1e293b;
	font-size: .92rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Banner "Subiendo nueva versión de X.pdf" arriba del form de upload. */
.wat-sp-upload-version-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px 14px;
	background: linear-gradient(135deg, rgba(155, 201, 80, 0.16), rgba(93, 127, 41, 0.08));
	border: 1px solid rgba(93, 127, 41, 0.25);
	border-radius: 10px;
	color: #4a651f;
	font-size: .88rem;
}
.wat-sp-upload-version-banner svg { color: #5d7f29; flex-shrink: 0; }
.wat-sp-upload-version-banner strong { color: #0f1a13; font-weight: 700; word-break: break-all; }
.wat-sp-upload-version-cancel {
	margin-left: auto;
	background: transparent; border: none; cursor: pointer;
	color: #b91c1c; font-weight: 700; font-size: .82rem;
	padding: 4px 8px;
	border-radius: 6px;
	text-decoration: underline;
}
.wat-sp-upload-version-cancel:hover { background: rgba(185, 28, 28, 0.08); text-decoration: none; }

/* Upload form colapsable (en panel de fase). */
.wat-sp-upload-toggle { margin-top: 8px; }
.wat-sp-upload-toggle > summary {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 16px;
	background: #fff;
	border: 1.5px dashed rgba(93, 127, 41, 0.35);
	color: #4a651f;
	border-radius: 999px;
	font-weight: 700; font-size: .88rem;
	cursor: pointer;
	list-style: none;
	transition: background .15s ease, border-color .15s ease;
}
.wat-sp-upload-toggle > summary::-webkit-details-marker { display: none; }
.wat-sp-upload-toggle > summary:hover { background: #f3f9e8; border-color: #5d7f29; }
.wat-sp-upload-toggle[open] > summary { background: #f3f9e8; border-style: solid; }
.wat-sp-upload {
	margin-top: 12px;
	padding: 16px;
	background: #fafafa;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 12px;
	display: flex; flex-direction: column; gap: 12px;
}
.wat-sp-upload-row { display: flex; flex-direction: column; gap: 4px; }
.wat-sp-upload-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wat-sp-upload label > span { font-size: .8rem; font-weight: 700; color: #374151; }
.wat-sp-upload label > span em { color: #b91c1c; font-style: normal; }
.wat-sp-upload input[type="file"],
.wat-sp-upload input[type="text"],
.wat-sp-upload textarea,
.wat-sp-upload select {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-size: .92rem;
	color: #0f1a13;
}
.wat-sp-upload textarea { resize: vertical; min-height: 60px; }
.wat-sp-upload small { color: #6b7a6c; font-size: .76rem; }
.wat-sp-upload-actions { display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
	.wat-sp-upload-row--2col { grid-template-columns: 1fr; }
	.wat-sp-doc-item { flex-wrap: wrap; }
	.wat-sp-doc-item-action { width: 100%; justify-content: center; }
}

/* Progress bar del upload AJAX. */
.wat-sp-upload-progress {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 10px;
	padding: 12px 14px;
	display: flex; flex-direction: column; gap: 8px;
}
.wat-sp-upload-progress-info { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
.wat-sp-upload-progress-name {
	font-weight: 700; color: #0f1a13;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	flex: 1; min-width: 0; margin-right: 12px;
}
.wat-sp-upload-progress-pct { font-weight: 800; color: #5d7f29; font-variant-numeric: tabular-nums; }
.wat-sp-upload-progress-bar {
	height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.wat-sp-upload-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #9bc950, #5d7f29);
	border-radius: 999px;
	transition: width .15s ease;
	background-size: 30px 30px;
	background-image: linear-gradient(90deg, #9bc950, #5d7f29),
		linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
	animation: wat-sp-upload-stripes 1s linear infinite;
}
@keyframes wat-sp-upload-stripes { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 30px 0; } }

.wat-sp-upload-progress.is-done .wat-sp-upload-progress-fill {
	background: linear-gradient(90deg, #16a34a, #047857);
	animation: none;
}
.wat-sp-upload-progress.is-done .wat-sp-upload-progress-pct { color: #047857; }

.wat-sp-upload-progress.is-error .wat-sp-upload-progress-fill {
	background: linear-gradient(90deg, #ef4444, #b91c1c);
	animation: none;
}
.wat-sp-upload-progress.is-error .wat-sp-upload-progress-pct { color: #b91c1c; }

.wat-sp-upload-progress-meta {
	display: flex; justify-content: space-between; align-items: center;
	font-size: .78rem; color: #6b7a6c;
}
.wat-sp-upload-progress-speed { font-variant-numeric: tabular-nums; }
.wat-sp-upload-progress-cancel {
	background: none; border: none; cursor: pointer;
	font-size: .78rem; color: #b91c1c; font-weight: 700;
	padding: 0; text-decoration: underline;
}
.wat-sp-upload-progress-cancel[disabled] { color: #94a3b8; cursor: not-allowed; text-decoration: none; }

.wat-sp-upload-feedback {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: .88rem;
	font-weight: 600;
}
.wat-sp-upload-feedback.is-error { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }
.wat-sp-upload-feedback.is-warn  { background: #fffbeb; color: #92400e; border-left: 3px solid #f59e0b; }
.wat-sp-upload-feedback.is-success { background: #f0fdf4; color: #166534; border-left: 3px solid #16a34a; }

/* Heurística: aviso amistoso cuando el archivo elegido es pesado. */
.wat-sp-upload-hint {
	display: flex;
	gap: 12px;
	padding: 12px 14px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 10px;
	position: relative;
}
.wat-sp-upload-hint-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.wat-sp-upload-hint-body { flex: 1; font-size: .88rem; color: #78350f; line-height: 1.5; }
.wat-sp-upload-hint-body strong { color: #92400e; }
.wat-sp-upload-hint-links {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 8px; align-items: center;
}
.wat-sp-upload-hint-links a {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid #fde68a;
	border-radius: 999px;
	color: #92400e;
	font-weight: 700; font-size: .82rem;
	text-decoration: none;
	transition: background .12s ease;
}
.wat-sp-upload-hint-links a:hover { background: #fef3c7; }
.wat-sp-upload-hint-tip { font-size: .8rem; color: #a16207; }
.wat-sp-upload-hint-tip em { color: #78350f; font-style: normal; font-weight: 700; }
.wat-sp-upload-hint-dismiss {
	background: none; border: none; cursor: pointer;
	color: #b45309; font-size: 1.3rem; line-height: 1;
	padding: 0 4px;
	align-self: flex-start;
}
.wat-sp-upload-hint-dismiss:hover { color: #78350f; }

/* Botón submit en loading. */
.wat-sp-btn.is-loading { opacity: 0.6; cursor: wait; }

/* Animación de “entrada” cuando el JS inyecta el nuevo doc. */
.wat-sp-doc-item.is-new {
	animation: wat-sp-doc-new 0.4s ease-out;
	background: linear-gradient(90deg, rgba(155,201,80,0.14), #fff 70%);
}
@keyframes wat-sp-doc-new {
	0%   { transform: translateY(-6px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────
 * Documents — DMS page (/app/documentos/)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-dms { max-width: 1280px; }

.wat-sp-dms-toolbar {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
	margin-bottom: 18px;
}
.wat-sp-dms-search {
	flex: 1; min-width: 240px;
	display: flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 12px;
}
.wat-sp-dms-search svg { width: 18px; height: 18px; color: #94a3b8; flex-shrink: 0; }
.wat-sp-dms-search input {
	flex: 1; border: none; background: transparent; outline: none;
	font-size: 1rem; color: #0f1a13;
}
.wat-sp-dms-search button {
	border: none; background: transparent; cursor: pointer;
	color: #94a3b8; font-size: 1.3rem; padding: 0 4px;
}
.wat-sp-dms-view {
	display: inline-flex;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 12px;
	padding: 4px;
	gap: 2px;
}
.wat-sp-dms-view button {
	border: none; background: transparent; cursor: pointer;
	padding: 8px 12px; border-radius: 8px;
	color: #6b7a6c;
	display: inline-flex; align-items: center;
	transition: background .12s ease, color .12s ease;
}
.wat-sp-dms-view button:hover { color: #0f1a13; }
.wat-sp-dms-view button.is-active { background: #5d7f29; color: #fff; }

.wat-sp-dms-body { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }

.wat-sp-dms-filters {
	display: flex; flex-direction: column; gap: 4px;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 14px;
	align-self: start;
	position: sticky; top: calc(var(--ev-app-topbar-h, 64px) + 18px);
	max-height: calc(100vh - var(--ev-app-topbar-h, 64px) - 36px);
	overflow-y: auto;
}
.wat-sp-dms-filters details { padding: 10px 0; border-bottom: 1px dashed rgba(15, 26, 19, 0.06); }
.wat-sp-dms-filters details:last-of-type { border-bottom: none; }
.wat-sp-dms-filters summary {
	font-size: .82rem; font-weight: 800; color: #0f1a13;
	text-transform: uppercase; letter-spacing: .06em;
	cursor: pointer; list-style: none;
	padding: 4px 0;
}
.wat-sp-dms-filters summary::-webkit-details-marker { display: none; }
.wat-sp-dms-filters summary::before { content: '▸ '; color: #94a3b8; font-size: .7rem; }
.wat-sp-dms-filters details[open] summary::before { content: '▾ '; color: #5d7f29; }

.wat-sp-dms-filter-chips,
.wat-sp-dms-filter-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.wat-sp-dms-filter-chips button,
.wat-sp-dms-filter-tags button {
	padding: 5px 11px;
	border: 1px solid rgba(15, 26, 19, 0.1);
	background: #fff;
	color: #6b7a6c;
	border-radius: 999px;
	font-size: .78rem; font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wat-sp-dms-filter-chips button:hover,
.wat-sp-dms-filter-tags button:hover { border-color: #5d7f29; color: #5d7f29; }
.wat-sp-dms-filter-chips button.is-active,
.wat-sp-dms-filter-tags button.is-active { background: #5d7f29; color: #fff; border-color: #5d7f29; }
.wat-sp-dms-filter-dates { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wat-sp-dms-filter-dates label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: #6b7a6c; font-weight: 600; }
.wat-sp-dms-filter-dates input {
	padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px;
	font-size: .85rem; color: #0f1a13;
}
.wat-sp-dms-filter-reset { margin-top: 12px; }
.wat-sp-dms-filter-reset button {
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	border: 1px solid #d1d5db;
	color: #6b7a6c;
	border-radius: 8px;
	font-size: .82rem; font-weight: 600;
	cursor: pointer;
	transition: background .12s ease;
}
.wat-sp-dms-filter-reset button:hover { background: #f9fafb; color: #0f1a13; }

.wat-sp-dms-results { min-width: 0; }
.wat-sp-dms-meta { font-size: .82rem; color: #6b7a6c; margin-bottom: 12px; font-weight: 600; }
.wat-sp-dms-list { min-height: 200px; }
.wat-sp-dms-list[data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

/* Grid card */
.wat-sp-dms-card {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.08);
	border-radius: 14px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wat-sp-dms-card:hover { border-color: rgba(93, 127, 41, 0.35); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 26, 19, 0.06); }
.wat-sp-dms-card-open {
	display: flex; align-items: center; justify-content: center;
	height: 96px;
	background: linear-gradient(180deg, #fafafa, #f3f4f6);
}
.wat-sp-dms-card-open .wat-sp-doc-icon { width: 56px; height: 56px; border-radius: 14px; }
.wat-sp-dms-card-open .wat-sp-doc-icon svg { width: 28px; height: 28px; }
.wat-sp-dms-card-body { padding: 12px 14px 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wat-sp-dms-card-line1 { display: flex; align-items: center; gap: 6px; }
.wat-sp-dms-card-name { font-weight: 700; color: #0f1a13; font-size: .92rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex: 1; }
.wat-sp-dms-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .74rem; color: #6b7a6c; }
.wat-sp-dms-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.wat-sp-dms-card-proc {
	font-size: .76rem; font-weight: 600;
	color: #5d7f29;
	text-decoration: none;
	margin-top: 4px;
}
.wat-sp-dms-card-proc:hover { text-decoration: underline; }
.wat-sp-dms-card-actions { padding: 0 14px 12px; }
.wat-sp-dms-card-btn {
	display: block; text-align: center;
	padding: 8px 14px;
	background: #f3f9e8; color: #4a651f;
	border-radius: 999px;
	font-weight: 700; font-size: .82rem;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.wat-sp-dms-card-btn:hover { background: #5d7f29; color: #fff; }

/* List view (table-like). */
.wat-sp-dms-list[data-view="list"] { display: flex; flex-direction: column; gap: 4px; }
.wat-sp-dms-rows-head,
.wat-sp-dms-row {
	display: grid;
	grid-template-columns: 40px 2fr 140px 100px 130px 130px;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}
.wat-sp-dms-rows-head {
	font-size: .72rem; font-weight: 800; color: #6b7a6c;
	text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 1px solid rgba(15, 26, 19, 0.08);
}
.wat-sp-dms-row {
	background: #fff;
	border: 1px solid rgba(15, 26, 19, 0.06);
	border-radius: 10px;
	transition: border-color .12s ease;
}
.wat-sp-dms-row:hover { border-color: rgba(93, 127, 41, 0.35); }
.wat-sp-dms-row-main { display: flex; flex-direction: column; min-width: 0; }
.wat-sp-dms-row-name {
	font-weight: 700; color: #0f1a13; font-size: .92rem;
	text-decoration: none;
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.wat-sp-dms-row-name:hover { color: #5d7f29; }
.wat-sp-dms-row-proc { font-size: .74rem; color: #6b7a6c; text-decoration: none; margin-top: 2px; }
.wat-sp-dms-row-size,
.wat-sp-dms-row-date,
.wat-sp-dms-row-user { font-size: .82rem; color: #475569; }

.wat-sp-dms-empty {
	background: #fff;
	border: 2px dashed #e5e7eb;
	border-radius: 16px;
	padding: 48px 24px;
	text-align: center;
}
.wat-sp-dms-empty-icon { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.wat-sp-dms-empty h3 { font-size: 1.1rem; margin: 4px 0 6px; color: #0f1a13; }
.wat-sp-dms-empty p { color: #6b7a6c; font-size: .9rem; }

.wat-sp-dms-loading {
	padding: 60px 20px;
	text-align: center; color: #94a3b8;
	font-size: .92rem;
}

.wat-sp-dms-pagination {
	display: flex; justify-content: center; gap: 4px;
	margin-top: 18px;
}
.wat-sp-dms-pagination button,
.wat-sp-dms-pagination span {
	min-width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	border: 1px solid rgba(15, 26, 19, 0.08);
	background: #fff;
	color: #475569;
	font-size: .85rem; font-weight: 600;
	cursor: pointer;
	transition: background .12s ease;
}
.wat-sp-dms-pagination span { cursor: default; border: none; background: transparent; }
.wat-sp-dms-pagination button:hover:not(:disabled):not(.is-current) { background: #f3f9e8; color: #4a651f; }
.wat-sp-dms-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.wat-sp-dms-pagination button.is-current { background: #5d7f29; color: #fff; border-color: #5d7f29; }

@media (max-width: 900px) {
	.wat-sp-dms-body { grid-template-columns: 1fr; }
	.wat-sp-dms-filters { position: static; max-height: none; }
	.wat-sp-dms-rows-head { display: none; }
	.wat-sp-dms-row { grid-template-columns: 36px 1fr; row-gap: 4px; }
	.wat-sp-dms-row > .wat-sp-doc-cat,
	.wat-sp-dms-row > .wat-sp-dms-row-size,
	.wat-sp-dms-row > .wat-sp-dms-row-date,
	.wat-sp-dms-row > .wat-sp-dms-row-user,
	.wat-sp-dms-row > .wat-sp-dms-row-actions { grid-column: 2 / -1; font-size: .76rem; }
}

/* ── Botones de acción en DMS (Abrir / ↺ Versión / v2 historial) ── */
.wat-sp-dms-card-actions,
.wat-sp-dms-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wat-sp-dms-action-btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 6px 12px;
	background: #f3f9e8; color: #4a651f;
	border-radius: 999px;
	font-size: .8rem; font-weight: 700;
	text-decoration: none;
	border: none; cursor: pointer;
	font-family: inherit;
	transition: background .12s ease, color .12s ease;
}
.wat-sp-dms-action-btn:hover { background: #5d7f29; color: #fff; }
.wat-sp-dms-action-btn--ghost {
	background: #f3f4f6; color: #475569;
}
.wat-sp-dms-action-btn--ghost:hover { background: #0ea5e9; color: #fff; }
.wat-sp-dms-action-btn--ver {
	background: rgba(14, 165, 233, 0.1); color: #0284c7;
}
.wat-sp-dms-action-btn--ver:hover { background: #0284c7; color: #fff; }

/* ── Modales DMS (nueva versión + historial) ── */
.wat-sp-dms-modal {
	position: fixed; inset: 0;
	z-index: 99998;
	display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .wat-sp-dms-modal { align-items: center; } }
.wat-sp-dms-modal[hidden] { display: none; }
.wat-sp-dms-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 26, 19, 0.55);
	cursor: pointer;
}
.wat-sp-dms-modal-panel {
	position: relative;
	width: min(600px, 95vw);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 50px rgba(15, 26, 19, 0.2);
	animation: wat-sp-modal-in .22s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 640px) {
	.wat-sp-dms-modal-panel { border-radius: 20px; box-shadow: 0 20px 60px rgba(15, 26, 19, 0.22); }
}
@keyframes wat-sp-modal-in {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.wat-sp-dms-modal-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	padding: 18px 20px 14px;
	border-bottom: 1px solid rgba(15, 26, 19, 0.08);
	position: sticky; top: 0; background: #fff; z-index: 1;
}
.wat-sp-dms-modal-eyebrow {
	display: flex; align-items: center; gap: 6px;
	font-size: .78rem; font-weight: 700;
	color: #5d7f29; text-transform: uppercase; letter-spacing: .06em;
	margin-bottom: 4px;
}
.wat-sp-dms-modal-filename { margin: 0; font-size: 1rem; font-weight: 700; color: #0f1a13; word-break: break-all; }
.wat-sp-dms-modal-close {
	background: transparent; border: none; cursor: pointer;
	font-size: 1.6rem; line-height: 1; color: #94a3b8;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px; flex-shrink: 0;
}
.wat-sp-dms-modal-close:hover { background: #f3f4f6; color: #0f1a13; }
.wat-sp-dms-modal-form { padding: 16px 20px 24px; }
.wat-sp-dms-modal-form .wat-sp-upload-version-banner { margin-bottom: 14px; }

/* ── Lista de versiones en modal ── */
.wat-sp-versions-list { list-style: none; padding: 16px 20px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wat-sp-versions-item {
	padding: 14px;
	background: #f8fafc;
	border: 1px solid rgba(15, 26, 19, 0.07);
	border-radius: 12px;
	display: flex; align-items: center; gap: 12px;
}
.wat-sp-versions-item.is-current { background: #f3f9e8; border-color: rgba(93, 127, 41, 0.25); }
.wat-sp-versions-item-head { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wat-sp-doc-item-ver--current { background: #5d7f29; color: #fff; }
.wat-sp-versions-current-badge {
	font-size: .66rem; font-weight: 700;
	color: #5d7f29; text-transform: uppercase; letter-spacing: .04em;
	white-space: nowrap;
}
.wat-sp-versions-item-body { flex: 1; min-width: 0; }
.wat-sp-versions-name { display: block; font-weight: 700; font-size: .92rem; color: #0f1a13; word-break: break-word; margin-bottom: 4px; }
.wat-sp-versions-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; color: #6b7a6c; }
.wat-sp-dms-versions-body { min-height: 100px; }

/* ──────────────────────────────────────────────────────────────
 * Preview modal — visor de documentos (PDF, imágenes, otros)
 * ──────────────────────────────────────────────────────────── */
.wat-sp-preview-modal {
	position: fixed; inset: 0;
	z-index: 999999;
	display: flex; align-items: stretch;
}
.wat-sp-preview-modal[hidden] { display: none; }
body.wat-sp-preview-open { overflow: hidden; }

.wat-sp-preview-backdrop {
	position: absolute; inset: 0;
	background: rgba(10, 15, 12, 0.88);
	cursor: pointer;
}
.wat-sp-preview-panel {
	position: relative;
	display: flex; flex-direction: column;
	width: 100%; height: 100%;
}
.wat-sp-preview-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: rgba(10, 15, 12, 0.92);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
	z-index: 1;
}
.wat-sp-preview-head-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.wat-sp-preview-head-name {
	color: #fff;
	font-weight: 700; font-size: .92rem;
	text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.wat-sp-preview-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wat-sp-preview-open-btn {
	padding: 7px 14px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	border-radius: 999px;
	font-size: .82rem; font-weight: 700;
	text-decoration: none;
	transition: background .12s ease;
}
.wat-sp-preview-open-btn:hover { background: rgba(255,255,255,0.22); }
.wat-sp-preview-close {
	background: rgba(255,255,255,0.1);
	border: none; cursor: pointer;
	color: #fff; font-size: 1.5rem; line-height: 1;
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	transition: background .12s ease;
}
.wat-sp-preview-close:hover { background: rgba(255,255,255,0.25); }

.wat-sp-preview-body {
	flex: 1; min-height: 0;
	display: flex; align-items: center; justify-content: center;
}
.wat-sp-preview-iframe {
	width: 100%; height: 100%;
	border: none;
	display: block;
}
.wat-sp-preview-img {
	max-width: 100%; max-height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.wat-sp-preview-unsupported {
	text-align: center;
	color: #e2e8f0;
	padding: 48px 24px;
}
.wat-sp-preview-unsupported-icon { font-size: 4rem; line-height: 1; margin-bottom: 12px; }
.wat-sp-preview-unsupported p { font-size: 1rem; color: #94a3b8; margin-bottom: 20px; }

/* El ícono del panel de fase se vuelve clickeable con hover sutil. */
.wat-sp-preview-trigger {
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.wat-sp-preview-trigger:hover { transform: scale(1.08); }
.wat-sp-preview-trigger:focus-visible { outline: 2px solid #5d7f29; outline-offset: 2px; border-radius: 10px; }