/**
 * Boton circular para accion "Nuevo" con icono central.
 */
.btn-nuevo-circular {
    --btn-nuevo-size: 40px;
    --btn-nuevo-bg: var(--color-granate-hover, #7a1919);
    --btn-nuevo-ring: var(--color-blanco, #ffffff);
    --btn-nuevo-icon-color: var(--color-blanco, #ffffff);
    --btn-nuevo-icon-size: 0.9rem;
    --btn-nuevo-ring-inset: 4px;
    --btn-nuevo-border-width: 2px;
    --btn-nuevo-shadow: 0 4px 10px rgba(30, 5, 5, 0.24);
    width: var(--btn-nuevo-size);
    min-width: var(--btn-nuevo-size);
    height: var(--btn-nuevo-size);
    min-height: var(--btn-nuevo-size);
    border: none;
    border-radius: 50%;
    background-color: var(--btn-nuevo-bg);
    color: var(--btn-nuevo-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--btn-nuevo-shadow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.panel-main__acciones .btn-nuevo-circular {
    /* Mismo tono que --color-granate-active (#9a2d2d); sintaxis rgba alineada con preview del navegador */
    --btn-nuevo-bg: var(--color-granate-active, rgba(154, 45, 45, 1));
}

.btn-nuevo-circular::before {
    content: "";
    position: absolute;
    inset: var(--btn-nuevo-ring-inset);
    border: var(--btn-nuevo-border-width) solid var(--btn-nuevo-ring);
    border-radius: 50%;
    pointer-events: none;
}

.btn-nuevo-circular:hover {
    background-color: var(--color-granate, #661414);
    transform: translateY(-1px);
}

.btn-nuevo-circular:active {
    background-color: var(--color-granate-active, #541010);
    transform: translateY(0);
}

.btn-nuevo-circular:focus-visible {
    outline: 3px solid var(--color-dorado, #d99a56);
    outline-offset: 3px;
}

.btn-nuevo-circular .icono-nuevo {
    font-size: var(--btn-nuevo-icon-size);
    line-height: 1;
    font-weight: 700;
    z-index: 1;
}

/**
 * Variante sin anillo blanco interior: circulo todo granate, solo icono (ej. buscar en filtros).
 * Mas compacta que el boton "Nuevo" del panel; icono proporcionalmente un poco mas visible.
 */
.btn-nuevo-circular--solid {
    --btn-nuevo-size: 32px;
    --btn-nuevo-bg: var(--color-granate-active, #9a2d2d);
    box-shadow: none;
}

.btn-nuevo-circular--solid::before {
    display: none;
}

.btn-nuevo-circular--solid:hover {
    background-color: var(--color-granate-hover, #7a1919);
}

.btn-nuevo-circular--solid:active {
    background-color: var(--color-granate, #661414);
}

/* Mismo recurso que .busqueda-pill__icon (public/images/shared/iconos/busqueda-pill-icon.svg); claro sobre fondo granate */
.btn-nuevo-circular__busqueda-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background: transparent url('../../images/shared/iconos/busqueda-pill-icon.svg') center / contain no-repeat;
    filter: brightness(0) invert(1);
}

.btn-nuevo-circular--solid .btn-nuevo-circular__busqueda-icon {
    width: 1.375rem;
    height: 1.375rem;
    position: relative;
    z-index: 1;
}

/** Celda calendario mensual (citas psicológicas): más pequeño, fondo granate suave del cuadro semanal. */
.btn-nuevo-circular--celda-calendario {
    --btn-nuevo-size: 30px;
    --btn-nuevo-ring-inset: 3px;
    --btn-nuevo-icon-size: 0.75rem;
    --btn-nuevo-bg: var(--ui-cuadro-granate-suave, var(--color-granate-active, #9a2d2d));
    --btn-nuevo-shadow: 0 2px 6px rgba(var(--color-granate-rgb, 102, 20, 20), 0.14);
}

.btn-nuevo-circular--celda-calendario:hover {
    background-color: color-mix(in srgb, var(--color-granate-active, #9a2d2d) 92%, #ffffff 8%);
}

.btn-nuevo-circular--celda-calendario:active {
    background-color: color-mix(in srgb, var(--color-granate-hover, #7a1919) 88%, #ffffff 12%);
}

@supports not (background: color-mix(in srgb, red 50%, blue 50%)) {
    .btn-nuevo-circular--celda-calendario {
        --btn-nuevo-bg: #ac5050;
    }

    .btn-nuevo-circular--celda-calendario:hover {
        background-color: #9a2d2d;
    }

    .btn-nuevo-circular--celda-calendario:active {
        background-color: #7a1919;
    }
}