/* ───────────────────────────────────────────────────────────────────────── Estilo de la barra de acciones (ficha de reserva) — preferencia por empresa (ConfigEmpresaModel, clave 'estilo_botones'), elegida en /usuario/perfil por admin/superadmin. Se aplica vía clase en (estilo-contorno | estilo-tonal | estilo-solido) — ver header.php. .abtn es el botón compartido de la barra; .abtn-ghost es su variante "secundaria" dentro de cada plantilla (Expandir/Cerrar todo, Volver). ───────────────────────────────────────────────────────────────────────── */ .abtn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid transparent; background: transparent; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; line-height: 1; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .abtn i { font-size: 13.5px; } .abtn:focus-visible { outline: 2px solid #C1440E; outline-offset: 2px; } a.abtn { text-decoration: none; } /* ── Contorno: sin relleno, un solo gris grafito ─────────────────────── */ body.estilo-contorno .abtn { border-color: #c7c0b2; color: #22201c; } body.estilo-contorno .abtn:hover { background: #f5f1ea; border-color: #6b6459; color: #22201c; } body.estilo-contorno .abtn-ghost { border-color: #22201c; } /* ── Tonal: fondo suave del color de marca, sin borde ────────────────── */ body.estilo-tonal .abtn { background: #f4e2d8; color: #8a3009; } body.estilo-tonal .abtn:hover { background: #C1440E; color: #fff; } body.estilo-tonal .abtn-ghost { background: transparent; color: #8a3009; border-color: #e3c4b3; } body.estilo-tonal .abtn-ghost:hover { background: #f4e2d8; color: #8a3009; } /* ── Sólido: color de marca relleno ───────────────────────────────────── */ body.estilo-solido .abtn { background: #C1440E; color: #fff; } body.estilo-solido .abtn:hover { filter: brightness(1.08); } body.estilo-solido .abtn-ghost { background: transparent; color: #C1440E; border-color: #C1440E; } body.estilo-solido .abtn-ghost:hover { background: #C1440E; color: #fff; } /* Separador entre grupos de acciones (igual en las 3 plantillas) */ .abtn-sep { width: 1px; align-self: stretch; background: #ddd5c8; margin: 2px 4px; } /* Mobile: se oculta el texto, queda solo el ícono — el tooltip nativo (data-popover-content, ya presente en el markup) sigue explicando la acción al tacto. */ @media (max-width: 576px) { .abtn span.abtn-label { display: none; } .abtn { padding: 0 9px; } }