/* Acabado moderno de botones y etiquetas de color (2026-10-18, pedido del usuario). REGLA: se mantienen EXACTAMENTE los colores del
   sistema (los usuarios ya los identifican): solo se agrega un degradé sutil por encima del color (`background-image`, el color de
   fondo sigue siendo el de siempre, también al pasar el mouse), una sombra suave del mismo color y una pequeña elevación al pasar el
   mouse. Aplica solo a botones `.btn` de color (no a los de FullCalendar, SweetAlert, TomSelect ni `.btn-close` / `.btn-link`) y a las
   etiquetas de estado de las grillas y los `.badge` de color. Cargado en head.php después del CSS del template. */

/* Íconos dentro de botones (2026-10-18): el template les pone `font-size: 18px` con `line-height: 27px`, y ese renglón más alto
   estiraba el botón (p. ej. "Guardar" con ícono 6px más alto que "Cancelar" al lado). Con alto de línea 1 el ícono conserva su
   tamaño y queda centrado, y todos los botones de un mismo tamaño miden lo mismo, con o sin ícono. */
.btn > :is(i, .bi, .ti, .fa, .ph, svg.pc-icon) {
    line-height: 1;
    vertical-align: -.125em;
}

/* Color de la sombra de cada variante (las mismas variables RGB del template). */
.btn-primary, .btn-outline-primary { --btnTint: var(--bs-primary-rgb, 70, 128, 255); }
.btn-secondary, .btn-outline-secondary { --btnTint: var(--bs-secondary-rgb, 91, 107, 121); }
.btn-success, .btn-outline-success { --btnTint: var(--bs-success-rgb, 44, 168, 127); }
.btn-danger, .btn-outline-danger { --btnTint: var(--bs-danger-rgb, 220, 38, 38); }
.btn-warning, .btn-outline-warning { --btnTint: var(--bs-warning-rgb, 229, 138, 0); }
.btn-info, .btn-outline-info { --btnTint: var(--bs-info-rgb, 62, 201, 214); }
.btn-dark, .btn-outline-dark { --btnTint: var(--bs-dark-rgb, 33, 37, 41); }

/* Botones sólidos: degradé sutil (más claro arriba, apenas más oscuro abajo) + sombra suave del mismo color. */
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .10) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 3px 8px -3px rgba(var(--btnTint), .55);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Botones claros y de contorno: transición y sombra al pasar el mouse. */
.btn:is(.btn-light, [class*="btn-outline-"]) {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Botones de contorno (2026-10-18): fondo con un tinte muy suave de su color (de abajo hacia arriba) y una sombra mínima; al pasar el
   mouse se rellenan con su color (lo hace el template) y llevan el mismo degradé que los sólidos. */
.btn[class*="btn-outline-"] {
    background-image: linear-gradient(180deg, rgba(var(--btnTint, 15, 23, 42), .02) 0%, rgba(var(--btnTint, 15, 23, 42), .09) 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.btn[class*="btn-outline-"]:is(:hover, :focus-visible, .active):not(:disabled, .disabled) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .10) 100%);
}

/* Elevación al pasar el mouse (no en botones deshabilitados ni dentro de grupos, donde movería la unión con el campo vecino). */
.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark):hover:not(:disabled, .disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .10), 0 6px 14px -4px rgba(var(--btnTint), .6);
}

.btn:is(.btn-light, [class*="btn-outline-"]):hover:not(:disabled, .disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(var(--btnTint, 15, 23, 42), .35);
}

.btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, [class*="btn-outline-"]):active:not(:disabled, .disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15);
}

.input-group > .btn:hover,
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover {
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none !important;
        transform: none !important;
    }
}

/* Etiquetas de estado de las grillas (formatState, formatStateShifts, SI/NO, etc.: `span.bg-x.text-light.rounded-2.d-inline-block`)
   y `.badge` de color: el mismo degradé sutil y un leve relieve, para que no se vean planas. */
span.d-inline-block.text-nowrap.text-light[class*="bg-"],
.badge:is(.text-bg-primary, .text-bg-secondary, .text-bg-success, .text-bg-danger, .text-bg-warning, .text-bg-info, .text-bg-dark) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .05) 55%, rgba(0, 0, 0, .09) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(15, 23, 42, .12);
}

/* Menús desplegables de opciones COMPACTOS (REGLA, 2026-10-18): acordes a los botones chicos (`btn-sm`). Clase `.menuCompact` en el
   `.dropdown-menu` (p. ej. "Reservar turno" y "Lista" de la agenda, el período del Inicio). Letra del tamaño de los botones chicos,
   íconos normales, renglones bajos, bordes redondeados y sombra suave. Los paneles del topbar (perfil, notificaciones) no lo usan. */
.dropdown-menu.menuCompact {
    min-width: 11rem;
    padding: .3rem;
    font-size: .8125rem;
    border-radius: .6rem;
    box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .30), 0 2px 6px rgba(15, 23, 42, .06);
}

.dropdown-menu.menuCompact .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline: 0;
    margin-bottom: 0;
    padding: .42rem .6rem;
    border-radius: .4rem;
    font-size: inherit;
    line-height: 1.3;
}

/* Una mínima separación entre opciones (4px): el resaltado de la opción elegida y el de la que tiene el mouse no quedan pegados. */
.dropdown-menu.menuCompact > * + *,
.dropdown-menu.menuCompact > li + li {
    margin-top: 4px;
}

.dropdown-menu.menuCompact .dropdown-item > i {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
}