/* ============================================================
   ORFEO — Aspecto nuevo: controles y estados vacíos (1-11-2026)

   Segunda capa, independiente de aspecto-pro.css. Solo añade:
     · estados vacíos de las tablas con icono y texto atenuado;
     · transiciones suaves y anillo de foco visible (teclado y ratón) en botones, enlaces y campos.
   No cambia tamaños ni maquetación.

   PARA QUITARLA: borrar su <link> en Components/App.razor (o git revert del commit «Aspecto nuevo: controles»).
   ============================================================ */

/* ── Estados vacíos de las tablas DevExpress («Sin datos») ───────────────────────────────────────────── */
html:root .dxbl-grid-empty-data {
    color: #6b7280;
}
html:root .dxbl-grid-empty-data > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
    font-size: .92rem;
}
html:root .dxbl-grid-empty-data > span::before {
    font-family: "Phosphor";        /* la fuente de iconos regular ya se carga en App.razor */
    content: "\e4aa";                /* ph-tray */
    font-size: 2.1rem;
    line-height: 1;
    opacity: .4;
}

/* ── Transiciones suaves ─────────────────────────────────────────────────────────────────────────────── */
html:root button,
html:root [role="button"],
html:root select,
html:root input,
html:root textarea {
    transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}

/* ── Foco visible: antes casi no se veía al navegar con el teclado (solo 11 reglas en toda la hoja) ──────── */
html:root button:focus-visible,
html:root select:focus-visible,
html:root a:focus-visible,
html:root [role="button"]:focus-visible {
    outline: 2px solid rgba(192, 97, 74, .55);
    outline-offset: 1px;
}
html:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html:root select:focus,
html:root textarea:focus {
    border-color: #c0614a !important;
    box-shadow: 0 0 0 3px rgba(192, 97, 74, .16) !important;
    outline: none;
}