/* =========================================================================
   admin-mud-skin.css — re-skin de componentes MudBlazor al diseño AMSAC.
   Global, solo var(--…). Transforma tablas, chips, títulos y botones sin
   editar página por página. Carga después de MudBlazor.min.css y del puente.
   ========================================================================= */

/* ---------- Título de página (MudText Typo="h4") ---------- */
.mud-typography-h4 {
    font-size: var(--fs-display);
    font-weight: var(--fw-light);
    letter-spacing: .2px;
}

/* ---------- Tabla: look "grid dentro de tarjeta", plano (sin sombra Material) ---------- */
.mud-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.mud-table .mud-table-head .mud-table-cell {
    text-transform: uppercase;
    font-size: var(--fs-label-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: .4px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.mud-table .mud-table-body .mud-table-cell {
    font-size: var(--fs-body);
    color: var(--ink-2);
    border-bottom: 1px solid var(--border);
}
.mud-table.mud-table-hover .mud-table-body .mud-table-row:hover {
    background: var(--hover);
}
.mud-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}
/* Columnas numéricas alineadas a la derecha (header + celdas). MudTh no forwarda el Style
   inline de forma fiable, por eso la alineación va por clase en vez de inline. */
.mud-table .mud-table-cell.col-num { text-align: right; }
/* Columna Estado: ancho mínimo fijo (cabe el badge más ancho, "Publicado"/"Borrador") para que no
   se ajuste al contenido y quede pareja entre filas. */
.mud-table .mud-table-cell.col-estado { min-width: 120px; }

/* ---------- Chips de estado: tono suave (fondo 14% + texto color) ---------- */
.mud-chip {
    border-radius: var(--radius-pill) !important;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-label) !important;
    /* Tono gris por defecto (Color.Default no lleva clase de color en MudBlazor). */
    background: var(--hover-2) !important;
    color: var(--muted) !important;
}
.mud-chip.mud-chip-color-success {
    background: color-mix(in srgb, var(--success) 14%, transparent) !important;
    color: var(--success) !important;
}
.mud-chip.mud-chip-color-error {
    background: color-mix(in srgb, var(--error) 16%, transparent) !important;
    color: var(--error) !important;
}
.mud-chip.mud-chip-color-warning {
    background: color-mix(in srgb, var(--warning) 16%, transparent) !important;
    color: var(--warning) !important;
}
.mud-chip.mud-chip-color-info {
    background: color-mix(in srgb, var(--info) 14%, transparent) !important;
    color: var(--info) !important;
}
.mud-chip.mud-chip-color-primary {
    background: var(--accent-soft-2) !important;
    color: var(--accent-text) !important;
}

/* ---------- Icon buttons de fila ---------- */
.mud-table .mud-icon-button { border-radius: var(--radius-sm); }
.mud-table .mud-icon-button:hover { background: var(--hover); }

/* ---------- Paper genérico (tarjetas/paneles) ---------- */
.mud-paper.mud-paper-outlined {
    border-radius: var(--radius-card);
    border-color: var(--border);
}

/* ---------- Modales (MudDialog) ---------- */
.mud-overlay .mud-overlay-scrim { backdrop-filter: blur(3px); }
.mud-dialog {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-modal) !important;
    overflow: hidden;
    position: relative;
}
/* Línea de acento superior del modal */
.mud-dialog::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .9;
    z-index: 1;
}
.mud-dialog .mud-dialog-title {
    font-size: var(--fs-title);
    font-weight: var(--fw-medium);
    color: var(--ink);
}
.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--border);
    background: var(--hover);
    padding: 16px 24px;
    gap: 12px;
}
/* MudButton — sentence case, sin elevación, hover visible (DESIGN_GUIDELINES). */
.mud-button-root {
    text-transform: none !important;
    letter-spacing: normal !important;
}
.mud-button-root.mud-button-filled {
    box-shadow: none !important;
}
.mud-button-root.mud-button-text.mud-button-text-primary:hover {
    background: rgba(230,164,18,.07) !important;
}

/* Ancho de modal del diseño (720px) para los que lo pidan. */
.mud-dialog.modal-720 { max-width: 720px !important; }

/* ---------- Foco de inputs (halo ámbar) ---------- */
.mud-input.mud-focused { box-shadow: none; }
.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--accent) !important; }
.mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius-input); }

/* ---------- MudSelect .amsac-select: fondo/borde igual a los .form-input ---------- */
.amsac-select .mud-input-outlined { background: var(--field); border-radius: var(--radius-input); }
.amsac-select .mud-select-input { color: var(--ink); }
/* Borde ámbar al abrir/enfocar lo cubre .mud-input-outlined.mud-focused (arriba). */

/* ---------- Menú desplegable del MudSelect (popover teletransportado a la raíz) ---------- */
.amsac-select-popover .mud-list { background: var(--surface-2); border: 1px solid var(--border); }
.amsac-select-popover .mud-list-item:hover { background: var(--accent-soft) !important; }
/* Opción elegida: sin el resaltado azul default; tinte ámbar suave + checkmark ámbar. */
.amsac-select-popover .mud-selected-item { background: var(--accent-soft) !important; color: var(--ink) !important; }
.amsac-select-popover .mud-selected-item::after {
    content: "\2713";
    margin-left: auto;
    color: var(--accent);
    font-weight: 700;
}