html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Fondo degradado global animado — en html/body para que cubra TODO el alto
   real de la página (no solo un viewport), incluso en formularios largos con scroll. */
html, body {
    background: linear-gradient(-45deg, #0d47a1, #1976d2, #00897b, #26a69a);
    background-size: 400% 400%;
    animation: bgShift 18s ease infinite;
    min-height: 100%;
}
.mud-layout {
    background: transparent;
    min-height: 100vh;
}
.mud-main-content { background: transparent !important; }
.mud-drawer { background: var(--mud-palette-surface) !important; }
@keyframes bgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* MudAlert legibles sobre el fondo animado */
.mud-alert { background-color: var(--mud-palette-surface) !important; box-shadow: 0 2px 6px rgba(0,0,0,.12); }

/* Loading skeleton: shimmer con CSS puro (background-position), sin libreria nueva.
   Mismo costo de rendimiento que el fondo animado de arriba (GPU-friendly). */
.sit-skeleton {
    display: block;
    background: linear-gradient(90deg,
        var(--mud-palette-background-grey) 25%,
        var(--mud-palette-action-default-hover) 50%,
        var(--mud-palette-background-grey) 75%);
    background-size: 200% 100%;
    animation: sitShimmer 1.4s ease-in-out infinite;
}
@keyframes sitShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Filas de tabla clicables (RowStyle="cursor: pointer;"): mismo lenguaje visual que
   las tarjetas KPI y el menu activo -- acento izquierdo + feedback de "press", sin
   transform (evita reflow/desalineacion de celdas en un grid de tabla). */
.mud-table-row[style*="cursor: pointer"] {
    transition: box-shadow .15s ease, background-color .1s ease;
}
.mud-table-row[style*="cursor: pointer"]:hover {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.mud-table-row[style*="cursor: pointer"]:active {
    background-color: var(--mud-palette-action-default-hover);
}

/* Entrada de filas al cargar una tabla/listado: fade + slide sutil, escalonado por
   fila (efecto "cascada"). Aplica a TODAS las tablas del sistema con una sola regla
   global -- no requiere tocar cada pagina. Mas alla de la fila 15 ya no se escalona
   (entran juntas), para no alargar la animacion en listados grandes. */
.mud-table-row {
    animation: rowFadeIn .28s ease both;
}
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mud-table-row:nth-child(1)  { animation-delay: 0ms; }
.mud-table-row:nth-child(2)  { animation-delay: 25ms; }
.mud-table-row:nth-child(3)  { animation-delay: 50ms; }
.mud-table-row:nth-child(4)  { animation-delay: 75ms; }
.mud-table-row:nth-child(5)  { animation-delay: 100ms; }
.mud-table-row:nth-child(6)  { animation-delay: 125ms; }
.mud-table-row:nth-child(7)  { animation-delay: 150ms; }
.mud-table-row:nth-child(8)  { animation-delay: 175ms; }
.mud-table-row:nth-child(9)  { animation-delay: 200ms; }
.mud-table-row:nth-child(10) { animation-delay: 225ms; }
.mud-table-row:nth-child(11) { animation-delay: 250ms; }
.mud-table-row:nth-child(12) { animation-delay: 275ms; }
.mud-table-row:nth-child(13) { animation-delay: 300ms; }
.mud-table-row:nth-child(14) { animation-delay: 325ms; }
.mud-table-row:nth-child(15) { animation-delay: 350ms; }

/* Timing de apertura de dialogs: MudBlazor por default anima en .1s con un "pop"
   de escala 0.5->1 bastante abrupto (el fade de opacidad casi no se alcanza a ver,
   queda comprimido en el primer 1% de la animacion). Se reemplaza por un fundido +
   escala/elevacion mas suave, sin perder velocidad percibida (sigue siendo <200ms).
   Usa !important porque app.css carga ANTES que MudBlazor.min.css en index.html
   (mismo motivo por el que .mud-alert/.mud-main-content ya usan !important arriba). */
@keyframes sitDialogOpen {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.mud-dialog {
    animation: sitDialogOpen .18s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.mud-overlay-scrim {
    animation-duration: .18s !important;
}

/* ============================================================================
   FICHA (fic-*): cabecera de identidad + bloques de lectura/edicion.
   Vivian dentro de un <style> en PacienteDetalle.razor con prefijo "pd-"
   (paciente detalle). Se movieron aqui con prefijo neutro porque la ficha de
   PERSONAL DE SALUD usa el mismo lenguaje visual: una sola definicion evita que
   las dos pantallas diverjan con el tiempo.
   ============================================================================ */

/* Ancho de lectura de una ficha de una sola columna (sin sidebar): la cabecera y el control de
   pestañas se topan aqui para que terminen donde terminan las tarjetas y no quede una franja
   blanca a la derecha. La cuenta: 900px de .fic-bloques + los 16px de padding de cada lado que
   pone TabPanelsClass="pa-4". Si cambia uno, cambiar el otro. */
.fic-ancho { max-width:932px; }

/* La hoja blanca que envuelve cada pagina es el MudPaper de MainLayout, comun a TODAS las
   pantallas: encogerlo de plano estrecharia tambien agendas, reportes y tablas anchas. Con :has()
   se encoge SOLO si la pagina de adentro declara .fic-ancho, o sea la pagina decide su ancho sin
   que el layout sepa de ella. 980 = 932 de .fic-ancho + los 24px de pa-6 de cada lado.
   ⚠️ Si el navegador no soporta :has(), la hoja se queda ancha y la ficha simplemente se ve
   alineada a la izquierda: se degrada sin romperse. */
.mud-paper:has(> .fic-ancho) { max-width:980px; margin-inline:auto; }

/* ---- Layout de 2 paneles (sidebar + panel principal) ---- */
.fic-layout { display:flex; gap:16px; align-items:flex-start; }
.fic-side { width:320px; flex:0 0 320px; position:sticky; top:16px; }
.fic-main { flex:1 1 auto; min-width:0; }
@media (max-width:960px) { .fic-layout { flex-direction:column; } .fic-side { width:100%; flex:1 1 auto; position:static; } }

.fic-avatar { width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; background:linear-gradient(135deg,#1976d2,#26a69a); box-shadow:0 6px 18px rgba(25,118,210,.25); }

/* ---- Cabecera: identidad visible en TODAS las pestañas ---- */
.fic-banner { display:flex; align-items:center; gap:20px; padding:12px 20px 12px 8px; margin-bottom:16px; flex-wrap:wrap; }
/* Volver al listado: vive dentro del banner desde que se quito el titulo de la pagina (2026-08-03).
   Gap propio y chico para que quede pegada al avatar y se lea como parte del encabezado, no como un
   boton suelto; por eso tambien el padding izquierdo del banner baja de 20 a 8. */
.fic-banner-volver { margin-right:-12px; flex:0 0 auto; }
.fic-banner-id { display:flex; align-items:center; gap:14px; min-width:0; flex:0 1 auto; }
/* El avatar de la cabecera es la mitad del de la ficha: aqui acompaña, no protagoniza. */
.fic-banner .fic-avatar { width:44px; height:44px; flex:0 0 44px; box-shadow:none; }
.fic-banner-nom { min-width:0; }
.fic-banner-meta { display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--mud-palette-text-secondary); font-size:.82rem; }
/* Separador en punto medio: mas discreto que un borde y no ocupa alto. */
.fic-banner-meta span + span::before { content:"·"; margin-right:14px; }
/* Contacto de emergencia. ⚠️ Antes era `flex:1 1 260px` — el elemento ELASTICO del encabezado, que
   absorbia todo el sobrante. Con dos renglones dentro (alergias + emergencia) tenia cuerpo; al
   salir las alergias el 2026-08-04 quedo UN renglon flotando en una caja enorme, alineado al inicio
   de esa caja: ni al borde izquierdo, ni al derecho, ni al centro real. Se veia sobrepuesto.
   Ahora tiene ancho propio (`flex:0 0 auto`) y un borde que lo ancla, en vez de flotar en el hueco. */
.fic-banner-alertas { display:flex; flex-direction:column; gap:2px; flex:0 0 auto; min-width:0;
    padding-left:16px; border-left:1px solid var(--mud-palette-divider); align-self:stretch;
    justify-content:center; }
.fic-banner-emerg-tit { display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--mud-palette-text-secondary); }
.fic-banner-alerta, .fic-banner-emerg { display:flex; align-items:center; gap:6px; font-size:.82rem; line-height:1.35; }
/* Sangria bajo el titulo, a la altura del texto y no del icono. */
.fic-banner-emerg { padding-left:21px; color:var(--mud-palette-text-primary); }
@media (max-width:700px) {
    /* Apilado: el borde vertical no separa nada cuando los bloques van uno debajo de otro. */
    .fic-banner-alertas { border-left:0; padding-left:0; border-top:1px solid var(--mud-palette-divider);
        padding-top:8px; flex-basis:100%; }
}
/* Icono + etiqueta ademas del color: el color solo no puede portar el significado. */
.fic-banner-alerta { color:var(--mud-palette-warning-darken); }
.fic-banner-alerta.err { color:var(--mud-palette-error); }
.fic-banner-exp { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:auto; flex:0 0 auto; }
.fic-banner-num { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
@media (max-width:700px) {
    .fic-banner { gap:12px; }
    .fic-banner-exp { align-items:flex-start; margin-left:0; flex-direction:row; align-items:center; gap:8px; }
}
/* Estado vacio: centrado y discreto, con la accion a un lado (no dentro). */
.fic-vacio { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 12px; text-align:center; }

/* ---- Ficha en bloques: lectura por defecto, edicion por bloque ---- */
.fic-bloques { display:flex; flex-direction:column; gap:12px; max-width:900px; }
/* border-radius con !important porque el bloque es un MudPaper y `.mud-paper` fija su propio radio:
   app.css carga ANTES que MudBlazor.min.css (mismo motivo que .mud-alert/.mud-dialog de abajo), asi
   que a igualdad de especificidad ganaria el de MudBlazor. Cuando estas reglas vivian en un <style>
   dentro de la pagina esto no hacia falta: ese bloque va despues en el documento. */
.fic-bloque { border:1px solid var(--mud-palette-divider); border-radius:10px !important; padding:16px 20px; }
.fic-bloque-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; min-height:32px; }
.fic-bloque-acciones { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* Lista de definicion en dos columnas: la etiqueta a ancho fijo hace que los valores queden
   alineados y la vista se recorra de un vistazo, que es para lo que existe el modo lectura. */
.fic-datos { display:grid; grid-template-columns:170px 1fr; gap:8px 16px; margin:0; }
.fic-datos dt { color:var(--mud-palette-text-secondary); font-size:.82rem; padding-top:1px; }
.fic-datos dd { margin:0; font-size:.92rem; }
.fic-dato-num { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.fic-dato-vacio { color:var(--mud-palette-text-disabled); font-style:italic; }
/* En movil la etiqueta va encima: 170px de columna dejarian el valor sin espacio. */
@media (max-width:600px) {
    .fic-datos { grid-template-columns:1fr; gap:2px; }
    .fic-datos dd { margin-bottom:8px; }
}
.fic-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    gap:4px; padding:36px 16px; color:var(--mud-palette-text-secondary); max-width:600px; margin:0 auto; }
.fic-form { padding:14px 20px 10px; }

/* ----------------------------------------------------------------------------
   PESTAÑAS DEL EXPEDIENTE — .fic-tabs (opt-in)
   ----------------------------------------------------------------------------
   El expediente tiene NUEVE pestañas en un carril de ~896px (MaxWidth.Large menos
   el sidebar de 320). Con el default de MudBlazor no caben ni de lejos y la barra
   se va a scroll, o sea que media navegacion no se ve.

   ⚠️ Lo que MAS pesaba no era la tipografia: era `MudTabs.MinimumTabWidth`, que
   por default vale 160px POR PESTAÑA — 1440px de piso, midan lo que midan las
   etiquetas. Eso se arregla en el marcado (MinimumTabWidth="10px"), no aqui. Sin
   ello nada de lo de abajo cambia el ancho total.

   Cinco cosas cambian respecto al default de MudBlazor:
   1. Sin mayusculas. Era el ultimo rincon del sistema que gritaba: .mud-button ya
      se habia limpiado arriba. Ademas la mayuscula es mas ancha y mas lenta de
      leer, porque se pierde la silueta de la palabra.
   2. Iconos MONOCROMOS. Habia 6 colores en 9 pestañas sin significado detras —
      el mismo problema que ya se cerro para los botones: el color distingue
      RANGO, no funcion. Ahora el icono toma el color del texto, asi que refuerza
      el estado activo en vez de competir con el.
   3. La activa se marca con fondo tonal + peso + subrayado de 3px, no solo con
      un color que compite con los iconos.
   4. Mas compacta: 48px de alto -> 40, letra 14 -> 13, icono 24 -> 18, padding
      14 -> 8. Los 40px son los mismos de `.sit-btn`, o sea el suelo tactil que
      ya tiene decidido el proyecto; por debajo de ahi no se baja.
   5. `white-space: nowrap`. ⚠️ `.mud-tab` trae `white-space: normal`, asi que al
      estrechar las pestañas el texto NO se cortaria: se partiria en dos lineas,
      estirando el alto justo despues de haberlo bajado. Y no se pone
      `text-overflow: ellipsis` a proposito — una etiqueta a medias en la
      navegacion del expediente es peor que una barra con scroll.

   ⚠️ Opt-in a proposito: NO se toca `.mud-tabs` global. Reportes, Corte y
   PersonalSaludDetalle tienen sus propias pestañas y no entran en esto.
   ⚠️ `!important` donde MudBlazor fija la misma propiedad con igual
   especificidad: app.css carga ANTES que MudBlazor.min.css. */
.fic-tabs .mud-tab {
    text-transform: none !important;   /* .mud-tab trae uppercase */
    letter-spacing: normal;
    font-size: .8125rem;               /* 14 -> 13 */
    line-height: 1.4;                  /* 1.75 inflaba el alto sin aportar nada */
    min-height: 40px;                  /* 48 -> 40, igual que .sit-btn */
    padding: 4px 8px;                  /* 6/14 -> 4/8: nueve pestañas pagan cada px */
    white-space: nowrap;               /* ver punto 5: evita el salto a dos lineas */
    color: var(--mud-palette-text-secondary);
}

/* ⚠️ El contenedor tiene SU PROPIO min-height:48px. Sin bajarlo tambien, las
   pestañas miden 40 pero la barra sigue midiendo 48 y quedan 8px muertos: se ve
   como si el ajuste de alto no hubiera hecho nada. */
.fic-tabs .mud-tabs-tabbar-inner { min-height: 40px; }

/* currentColor y no una variable del tema: asi da igual que clase de color acabe
   emitiendo MudBlazor para el icono, siempre sigue al texto de su pestaña. */
.fic-tabs .mud-tab .mud-icon-root { color: currentColor !important; font-size: 1.125rem; }
.fic-tabs .mud-tab-icon-text { margin-inline-end: 5px; }

/* Activa: primaria, con mas peso y un fondo tenido de primario.
   ⚠️ El fondo es --mud-palette-primary-hover y NO --...-action-default-hover, que
   es el que MudBlazor usa para el :hover de una pestaña cualquiera. Con el mismo
   tono en los dos, pasar el raton por encima de una inactiva la dejaba
   identica a la activa. */
.fic-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
    background-color: var(--mud-palette-primary-hover);
}

/* Subrayado mas visible y redondeado por arriba. */
.fic-tabs .mud-tab-slider.mud-tab-slider-horizontal { height: 3px; border-radius: 3px 3px 0 0; }

/* Linea de estado de la pestaña "Zona de riesgo" (2026-08-09): icono + texto en una fila.
   Es un div propio y no un MudAlert porque el alert pinta una caja de color de lado a lado, y aqui
   la tarjeta YA lleva su borde izquierdo semantico: dos fondos de color en el mismo bloque compiten.
   ⚠️ El icono NO es decorativo: acompaña al color para que el estado no dependa solo del tono. */
.zr-estado { display:flex; align-items:center; gap:8px; font-size:.92rem; }

/* Accesibilidad: si el usuario pidio menos movimiento a nivel SO, se quitan todas
   las animaciones/transiciones agregadas en esta pasada de diseno. */
@media (prefers-reduced-motion: reduce) {
    .mud-table-row,
    .sit-skeleton,
    .kpi-card,
    .cita-btn,
    .cal-slot,
    .cal-cita,
    .mud-dialog,
    .mud-overlay-scrim {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   BOTONES — refresco de aspecto (2026-08-03, pedido de Ramon)
   ============================================================================
   MudBlazor 9.6 saca el estilo del boton de variables globales
   (--mud-typography-button-text-transform, --mud-default-borderradius, ...).
   ⚠️ NO se tocan esas variables: --mud-default-borderradius tiene 68 usos en
   MudBlazor.min.css y cambiarla redondearia tambien cards, inputs y alerts de
   toda la aplicacion. Se acota a .mud-button, que es lo que se pidio.

   ⚠️ Va con !important porque app.css carga ANTES que MudBlazor.min.css
   (mismo caso que .mud-alert y .fic-bloque, ver CLAUDE.md §9.3).

   Sin MAYUSCULAS forzadas: es lo que mas envejece un boton. Con el texto en su
   caja natural se lee mas rapido, que en una pantalla clinica importa mas que
   el efecto. Peso 600 para que el boton pese sin necesidad de gritar.
   ⚠️ Los MudIconButton NO se tocan (.mud-icon-button): son redondos a proposito.
   ============================================================================ */
.mud-button {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
}

/* ----------------------------------------------------------------------------
   Botones TONALES (2026-08-03, decision de Ramon)
   ----------------------------------------------------------------------------
   Antes: unos con borde (Outlined), otros sin caja (Text). La fila se veia
   desordenada -- tres botones con caja y uno suelto, con alturas distintas -- y
   el outlined en gris claro quedaba descolorido.

   Ahora TODOS tienen caja y se distinguen por TONO, no por tener o no borde:
   fondo suave para las secundarias, solido para la primaria. Es el patron de
   Material 3, y lo que hace que una barra de acciones se vea actual.

   ⚠️ Se aplica sobre la clase propia .sit-btn y no sobre .mud-button entero:
   hay botones en toda la app (dialogos, catalogos, agenda) que dependen del
   contraste de Outlined, y cambiarlos a ciegas es pedir una regresion donde
   nadie esta mirando. Se opta pantalla por pantalla.
   ---------------------------------------------------------------------------- */
.sit-btn.mud-button {
    height: 40px;
    border: none !important;
    box-shadow: none;
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    transition: background-color .15s ease, box-shadow .15s ease;
}
/* Hover: el tono sube un paso. NUNCA scale -- desplazaria a los vecinos. */
.sit-btn.mud-button:hover { background-color: var(--mud-palette-lines-default); }

/* Destructiva: mismo tono suave pero en rojo, para que se lea como "cuidado"
   sin gritar tanto como un boton rojo solido. */
.sit-btn-peligro.mud-button { background-color: var(--mud-palette-error-hover); color: var(--mud-palette-error); }
.sit-btn-peligro.mud-button:hover { background-color: var(--mud-palette-error-lighten); color: #fff; }

/* Primaria: solida y con sombra. Es la unica que puede pesar en la barra. */
.sit-btn-primario.mud-button {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.sit-btn-primario.mud-button:hover {
    background-color: var(--mud-palette-primary-darken);
    box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

/* Pendiente (registrar consulta): ambar solido, porque significa "falta algo". */
.sit-btn-pendiente.mud-button {
    background-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.sit-btn-pendiente.mud-button:hover { background-color: var(--mud-palette-warning-darken); }

/* ============================================================================
   DATEPICKER — plantilla unica para toda la app (2026-08-11, pedido de Ramon)
   ============================================================================
   Sale de un mockup que trajo Ramon (img/datepiker.png). De las cuatro piezas
   de ese mockup se toman DOS a proposito:

   ✔️ El panel del calendario y el adorno del campo. Es CSS y nada mas: no toca
      ninguno de los 27 <MudDatePicker> ni los 2 <MudTimePicker> de la app, no
      cambia la altura del campo ni el numero de clics.
   ❌ La caja de dos lineas (etiqueta arriba, fecha abajo) y los botones
      "Remove"/"Done". Miden ~64px y hoy TODOS los inputs de la app estan a
      40px: seria el campo raro en las 19 pantallas donde aparece. Ademas
      "Done" agrega un clic -- hoy el panel cierra solo al elegir el dia -- y
      "Remove" duplica el parametro Clearable que ya existe.
   ❌ El chevron de la derecha: Adornment es UN enum (Start o End, no los dos),
      asi que serian dos adornos y el segundo tendria que dibujarse con un
      pseudo-elemento. Un adorno falso, sin foco ni comportamiento. Es la misma
      pelea con las tripas de un componente ajeno que costo dos intentos con
      MudToggleGroup.

   ⚠️ El icono queda a la DERECHA porque ahi lo pone MudBlazor por defecto
   (MudPicker.Adornment = Adornment.End, icono Event). Moverlo a la izquierda
   como en el mockup obligaria a tocar los 27 sitios, que es justo lo que este
   alcance evita. Ramon lo vio asi el 2026-08-11 y decidio dejarlo a la derecha.

   ⚠️ El ENCABEZADO se rehizo el mismo dia, con el picker ya en pantalla
   (img/datepiker_actual.png). Lo que se veia: barra de 100px en azul solido con
   la fecha a 34px, tan grande que se cortaba, y sus esquinas superiores
   asomando cuadradas por encima del redondeo de la tarjeta -- la barra no se
   recorta contra el radio del papel. Al quitar el fondo azul eso ultimo deja de
   verse solo, sin necesidad de tocar el overflow del panel.
   El renglon chico se deja como el AÑO y no como un rotulo tipo "Selecciona un
   dia" (decision de Ramon, opcion A): ese renglon ES el boton que abre la vista
   de años, asi que cambiarle el texto seria mentir sobre lo que hace, y meter
   el año dentro de la fecha obligaria a TitleDateFormat="ddd, dd MMM yyyy" en
   las 27 llamadas -- ya no seria CSS.

   ⚠️ Todo va con !important: app.css carga ANTES que MudBlazor.min.css.
   ⚠️ NO se toca --mud-default-borderradius (68 usos): el redondeo se acota al
   panel del picker.
   ============================================================================ */

/* El panel: tarjeta mas redondeada y con sombra mas suave y extendida, que es
   lo que lo hace ver como una tarjeta flotante y no como un recuadro pegado.

   ⚠️ ESTO COSTO TRES INTENTOS, y la leccion es la de siempre: no adivinar la
   clase leyendo el CSS de MudBlazor. Primero se colgo de .mud-picker-inline-paper
   (existe en MudBlazor.min.css pero ya no se pinta en el DOM de 9.6: regla muda,
   no aplica nunca). Luego de .mud-picker-popover-paper .mud-paper, y tampoco.
   Las capturas de Ramon con las CUATRO esquinas marcadas fueron lo unico que lo
   dijo: si solo fueran las de arriba seria la barra; las cuatro son el panel.

   Por eso la regla se ancla a lo ESTRUCTURAL en vez de a un nombre concreto:
   .mud-popover es la clase base del popover y .mud-picker-container es el
   envoltorio del contenido del picker -- las dos existen sin duda. El :has()
   los une sin depender de que clase extra lleve el popover en esta version.
   (MudBlazor 9.6 usa :has() en su propio CSS, asi que el soporte no es problema.)
   Se redondean las tres capas por si la caja visible es cualquiera de ellas;
   estan anidadas, asi que sobra pero no estorba.

   ⚠️ overflow:hidden es lo que recorta al encabezado contra el radio. Sin el,
   un encabezado con fondo asoma cuadrado por encima de la esquina redondeada. */
.mud-popover:has(.mud-picker-container),
.mud-popover:has(.mud-picker-container) .mud-paper,
.mud-picker-popover-paper .mud-paper,
.mud-picker-inline-paper .mud-paper {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
}
/* El envoltorio del contenido: es el que tiene pegado el encabezado arriba, asi
   que si la esquina se ve cuadrada, se ve aqui. */
.mud-picker-container {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* --- Encabezado: NO HAY. Se replica el del calendario (2026-08-11) -----------
   Ramon senalo el datepicker de /agenda/calendario y pidio ESE formato para todo
   el sistema. Ese picker trae `ShowToolbar="false"` (AgendaCalendario.razor:120),
   asi que sencillamente NO tiene la barra del año+fecha: el panel abre directo en
   "agosto de 2026 ‹ ›". Todo lo que se habia hecho antes -- bajarla de 100px a
   48, quitarle el azul, ponerla en una linea, en mayusculas, tonal -- era
   maquillar una barra que el no queria. Se borro entero.

   ⚠️ Se apaga por CSS y NO con el parametro en cada llamada, a proposito:
   `ShowToolbar` vale `true` por defecto, asi que ponerlo en las 27 llamadas deja
   el problema abierto para la 28 -- cualquier picker nuevo nace con barra y con
   el sistema desparejo otra vez. La peticion era "siempre que se llame un
   datepicker tiene que salir ese formato", y eso solo lo garantiza el CSS.
   Si algun dia se quiere la barra en un picker concreto, se le sube la
   especificidad con una clase propia.

   ⚠️ Elegir AÑO se sigue pudiendo: no vivia en la barra. Se pulsa el titulo del
   mes ("agosto de 2026") en la cabecera del calendario, que es lo que abre la
   vista de meses y años -- es como se hace hoy en el calendario, que no tiene
   barra desde antes. */
.mud-picker-toolbar { display: none !important; }

/* Cabecera del mes: las flechas del mockup son chevrones desnudos. MudBlazor les
   pinta un fondo de superficie que en una tarjeta blanca se lee como un boton
   apagado. Se dejan planas; el hover sigue existiendo, que es lo que confirma
   que son pulsables. */
.mud-picker-calendar-header-switch > .mud-icon-button {
    background-color: transparent !important;
    margin: 2px 4px !important;
}

/* Dias de la semana: en el mockup pesan un poco mas que un texto secundario
   suelto -- son encabezado de columna, no relleno. */
.mud-picker-calendar-header-day .mud-day-label {
    font-weight: 600 !important;
    text-transform: capitalize;
}

/* El dia elegido: MudBlazor ya lo pinta como circulo relleno en primary, que es
   justo el mockup. Solo se asegura la redondez y se le da algo de peso para que
   destaque sobre los otros numeros. */
.mud-picker .mud-day.mud-selected,
.mud-picker-inline-paper .mud-day.mud-selected {
    border-radius: 50% !important;
    font-weight: 600 !important;
}

/* El adorno del campo: cuadro redondeado con fondo tonal, como en el mockup.
   Se acota a .mud-picker para no tocar el adorno de los MudTextField normales
   (la lupa de los buscadores, el ojo de las contrasenas).

   ⚠️ El cuadro se pinta SIN AGREGAR ANCHO, y no es un detalle: la primera
   version llevaba `padding:6px` con `box-sizing:content-box`, que engorda el
   icono de 24px (.mud-icon-size-medium = 1.5rem) a 36. Esos 12px de mas
   rompieron el datepicker del calendario, que esta topado a 150px
   (.cal-datepicker en AgendaCalendario.razor): la fecha se cortaba y se leia
   "11/08/20" en vez de "11/08/2026". Lo cazo Ramon en pantalla.
   Por eso el fondo va en el CONTENEDOR del adorno, que ya ocupa el sitio del
   icono, en vez de inflar el icono. Cualquier padding que se le anada aqui se
   lo quita al texto de TODOS los pickers con ancho topado. */
.mud-picker .mud-input-adornment-end {
    background-color: var(--mud-palette-action-default-hover);
    border-radius: 8px;
}