/* Utilities (semánticas y elevaciones) and badges/alerts */
.text-muted { color:var(--color-muted) !important; }
.bg-surface { background:var(--color-surface); }
.bg-surface-alt { background:var(--color-surface-alt); }
.bordered { border:1px solid var(--border-color); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }

/* Alerts */
/* Sistema de Alerts centralizado */
.alert { position:relative; display:flex; gap:.65rem; align-items:flex-start; border:1px solid var(--border-color); border-radius:var(--radius); padding:.6rem .85rem .65rem; font-size:.74rem; line-height:1.25; background: var(--color-surface-alt); color: var(--color-text); box-shadow: var(--shadow-sm); overflow:hidden; }
.alert::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--color-border-raw); }
.alert .alert-icon { font-size:.9rem; line-height:1; opacity:.9; align-self:center; display:flex; align-items:center; }
.alert .alert-content { flex:1 1 auto; }
.alert .alert-title { font-weight:600; margin:0 0 .15rem; font-size:.75rem; }
.alert .alert-close { background:none; border:none; color:inherit; cursor:pointer; padding:.15rem; font-size:.85rem; line-height:1; border-radius:4px; opacity:.6; }
.alert .alert-close:hover { opacity:1; background: color-mix(in srgb, currentColor 12%, transparent); }
.alert.success { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); }
.alert.success::before { background: var(--color-success); }
.alert.error { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface)); }
.alert.error::before { background: var(--color-danger); }
.alert.warning { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); }
.alert.warning::before { background: var(--color-warning); }
.alert.info { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }
.alert.info::before { background: var(--color-primary); }
.alert.neutral { border-color: var(--border-color); }
.alert.neutral::before { background: var(--border-color); }
.alert-stack { display:flex; flex-direction:column; gap:.55rem; margin:0 0 1rem 0; }
.alert.compact { padding:.45rem .65rem .5rem; font-size:.7rem; }
.alert.compact .alert-icon { font-size:.8rem; }
/* Animaciones */
@keyframes alertFadeIn { from { opacity:0; transform: translateY(-4px);} to { opacity:1; transform: translateY(0);} }
@keyframes alertFadeOut { to { opacity:0; transform: translateY(-4px);} }
.alert { animation: alertFadeIn .25s var(--ease-standard); }
.alert.closing { animation: alertFadeOut .25s var(--ease-standard) forwards; }

/* Styles for confirm alerts (modal-like) */
.alert.confirm { border-color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface)); align-items: center; }
.alert.confirm::before { background: var(--color-warning); }
.alert.confirm .alert-icon { color: var(--color-warning); margin-top: 0; }
.alert.confirm .confirm-actions { display: flex; gap: .5rem; margin-top: 0; margin-left: auto; align-items: center; }
.alert.confirm .btn-confirm { background: var(--color-warning); color: #fff; border: none !important; padding: .45rem .8rem; border-radius: var(--radius); cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.alert.confirm .btn-confirm:hover { filter: brightness(0.98); }
.alert.confirm .btn-cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.12); padding: .45rem .8rem; border-radius: var(--radius); cursor: pointer; }
.alert.confirm .btn-cancel:hover { background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface)); }
.alert.confirm .btn-cancel:focus { outline: 2px solid color-mix(in srgb, var(--color-warning) 30%, transparent); outline-offset: 2px; }

/* Also apply same button styles for warning alerts rendered via messages.warning */
.alert.warning .btn-confirm { background: var(--color-warning); color: #fff; border: none !important; padding: .45rem .8rem; border-radius: var(--radius); cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.alert.warning .btn-confirm:hover { filter: brightness(0.98); }
.alert.warning .btn-cancel { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.12); padding: .45rem .8rem; border-radius: var(--radius); cursor: pointer; }
.alert.warning .btn-cancel:hover { background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface)); }
.alert.warning .btn-cancel:focus { outline: 2px solid color-mix(in srgb, var(--color-warning) 30%, transparent); outline-offset: 2px; }

/* Badges */
.badge { display:inline-block; padding:.25rem .5rem; font-size:.65rem; border-radius:999px; font-weight:600; letter-spacing:.5px; }
.badge-primary { background:var(--color-primary); color:var(--color-primary-contrast); }
.badge-secondary { background:var(--color-secondary); color:var(--color-secondary-contrast); }
.badge-danger { background:var(--color-danger); color:var(--color-danger-contrast); }
.badge-warning { background:var(--color-warning); color:var(--color-warning-contrast); }
.badge-success { background:var(--color-success); color:var(--color-success-contrast); }

/* utilities.css mantiene alertas, badges y micro-helpers. Componentes específicos están en sus archivos correspondientes. */

.asset-meta { margin-bottom:.75rem; font-size:.8rem; display:flex; gap:1.5rem; flex-wrap:wrap; }
.select-all { user-select: all; }

/* Inline form layout used on asset list filters */
.form-inline { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; max-width:1000px; }
.form-inline .form-row { display:flex; flex-direction:column; gap:.25rem; }
.form-inline .actions-row { display:flex; gap:.5rem; align-items:center; }
.form-inline .search-input i { margin-left:.35rem; margin-right:.45rem; color:var(--color-muted); }

/* Horizontal filter bar (asset list) */
.filter-controls { display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.filter-controls .inline-field { display:flex; flex-direction:column; gap:.35rem; }
.filter-controls label { font-size:var(--font-size-base); color: var(--color-muted); }
.filter-controls .btn-group { display:flex; align-items:center; gap:.5rem; margin-left:auto; }

/* Generic row layout helpers (replaces inline flex in many headers) */
.row-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* Modifier: align items to top when needed (combine with .row-between) */
.items-start { align-items:flex-start; }

/* Simple vertical stack helper */
.stack { display:flex; flex-direction:column; gap:1rem; }

/* Small padding utility for compact groups */
.card-padding-sm { padding:.5rem .5rem; }

/* Generic helpers */
.hidden { display:none !important; }

.text-left { text-align: left; }

/* Visually hidden (accessible): hides without removing from forms/AT */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Small repaint helper without inline styles */
.caret-fix { transform: translateZ(0); }

/* Alignment */
.ml-auto { margin-left: auto !important; }

/* Pagination rows (layout only; spacing via mt-* utilities) */
.pagination-row { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

/* Spacing (keep minimal + consistent) */
.mt-1 { margin-top: 1rem !important; }