/* ============================================================ ACADEMIKA PLUS — SISTEMA DE BOTONES Requiere: variables.css cargado previamente en el ============================================================ */ /* ---------------------------------------------------------- BASE — atributos compartidos por todos los botones ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: none; border-radius: var(--radius-full); padding: 12px 28px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.3px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: var(--transition-base); position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ---------------------------------------------------------- BTN-PRIMARY — acción principal (Guardar, Enviar, Solicitar) ---------------------------------------------------------- */ .btn-primary { background: linear-gradient(135deg, #009245, #006630); color: #ffffff !important; border: none; box-shadow: 0 4px 15px rgba(0, 146, 69, 0.35); } .btn-primary:hover:not(:disabled):not(.btn-loading) { background: linear-gradient(135deg, #00a84f, #009245); box-shadow: 0 6px 20px rgba(0, 146, 69, 0.50); transform: translateY(-1px); color: #ffffff !important; text-decoration: none; } .btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 146, 69, 0.30); } /* ---------------------------------------------------------- BTN-SECONDARY — acción secundaria (Cancelar, Volver, Ver más) ---------------------------------------------------------- */ .btn-secondary { background: transparent; color: var(--color-primary) !important; border: 1.5px solid var(--color-primary); box-shadow: none; font-weight: 600; padding: 11px 26px; } .btn-secondary:hover:not(:disabled):not(.btn-loading) { background: rgba(0, 146, 69, 0.08); border-color: var(--color-primary-dark); color: var(--color-primary-dark) !important; transform: translateY(-1px); text-decoration: none; } .btn-secondary:active:not(:disabled) { transform: translateY(0); } /* ---------------------------------------------------------- BTN-DARK — botón oscuro (tarjetas, hero sections) ---------------------------------------------------------- */ .btn-dark { background: var(--color-dark); color: #ffffff !important; border: none; box-shadow: 0 4px 12px rgba(18, 22, 41, 0.20); font-weight: 600; } .btn-dark:hover:not(:disabled):not(.btn-loading) { background: #1e2a45; box-shadow: 0 6px 18px rgba(18, 22, 41, 0.30); transform: translateY(-1px); color: #ffffff !important; text-decoration: none; } .btn-dark:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(18, 22, 41, 0.20); } /* ---------------------------------------------------------- BTN-GHOST — mínima jerarquía (Ver información, links) ---------------------------------------------------------- */ .btn-ghost { background: transparent; color: var(--color-blue) !important; border: 1px solid rgba(3, 30, 148, 0.25); box-shadow: none; font-weight: 600; padding: 10px 22px; } .btn-ghost:hover:not(:disabled):not(.btn-loading) { background: rgba(3, 30, 148, 0.06); border-color: var(--color-blue); color: var(--color-blue) !important; transform: translateY(-1px); text-decoration: none; } .btn-ghost:active:not(:disabled) { transform: translateY(0); } /* ---------------------------------------------------------- BTN-DANGER — acciones destructivas (Eliminar, Cancelar pedido) ---------------------------------------------------------- */ .btn-danger { background: linear-gradient(135deg, #cc3300, #aa2200); color: #ffffff !important; border: none; box-shadow: 0 4px 12px rgba(204, 51, 0, 0.30); font-weight: 700; } .btn-danger:hover:not(:disabled):not(.btn-loading) { background: linear-gradient(135deg, #dd3300, #cc3300); box-shadow: 0 6px 18px rgba(204, 51, 0, 0.45); transform: translateY(-1px); color: #ffffff !important; text-decoration: none; } .btn-danger:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(204, 51, 0, 0.25); } /* ---------------------------------------------------------- BTN-GLASS — paneles con efecto cristal ---------------------------------------------------------- */ .btn-glass { background: var(--glass-bg-dark); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm); border: var(--border-glass); color: inherit !important; border-radius: var(--radius-md); font-weight: 600; box-shadow: none; } .btn-glass:hover:not(:disabled):not(.btn-loading) { background: var(--glass-bg-dark-hover); transform: translateY(-1px); text-decoration: none; } .btn-glass:active:not(:disabled) { transform: translateY(0); } /* modo claro */ :root:not(.dark) .btn-glass { background: var(--glass-bg-light); border-color: var(--glass-border-light); } :root:not(.dark) .btn-glass:hover:not(:disabled):not(.btn-loading) { background: var(--glass-bg-light-hover); } /* ---------------------------------------------------------- BTN-ICON — solo ícono (tablas: editar, eliminar, ver…) ---------------------------------------------------------- */ .btn-icon { background: transparent; border: none; border-radius: var(--radius-sm); width: 36px; height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-gray-dark); font-size: 0.95rem; font-weight: 400; transition: var(--transition-fast); cursor: pointer; box-shadow: none; letter-spacing: 0; } /* Variantes de acción en btn-icon */ .btn-icon:hover, .btn-icon.btn-icon-edit:hover { background: rgba(74, 175, 233, 0.15); color: var(--color-lblue) !important; transform: none; } .btn-icon.btn-icon-delete:hover { background: rgba(204, 51, 0, 0.12); color: var(--color-error) !important; } .btn-icon.btn-icon-view:hover { background: rgba(0, 146, 69, 0.12); color: var(--color-success) !important; } .btn-icon.btn-icon-approve:hover { background: rgba(0, 146, 69, 0.12); color: var(--color-success) !important; } .btn-icon.btn-icon-reject:hover { background: rgba(204, 51, 0, 0.12); color: var(--color-error) !important; } /* ---------------------------------------------------------- TAMAÑOS ---------------------------------------------------------- */ .btn-sm { padding: 8px 18px; font-size: 0.8rem; letter-spacing: 0.2px; } /* .btn-md es el default */ .btn-md { padding: 12px 28px; font-size: 0.9rem; } .btn-lg { padding: 14px 36px; font-size: 1rem; } /* ---------------------------------------------------------- ESTADO DISABLED — común a todas las variantes ---------------------------------------------------------- */ .btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; pointer-events: none; } /* ---------------------------------------------------------- LOADING STATE — spinner incrustado Añadir clase .btn-loading al JS para activar ---------------------------------------------------------- */ .btn-loading { opacity: 0.75; cursor: not-allowed; pointer-events: none; } .btn-loading .btn-text { opacity: 0.85; } /* Spinner SVG generado por CSS (sin imágenes externas) */ .btn-loading::before { content: ""; display: inline-block; width: 1em; height: 1em; min-width: 14px; min-height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin 0.65s linear infinite; flex-shrink: 0; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------- GRUPO DE BOTONES (row / columna) ---------------------------------------------------------- */ .btn-group { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .btn-group-col { display: flex; flex-direction: column; gap: 0.5rem; } /* ---------------------------------------------------------- FULL WIDTH ---------------------------------------------------------- */ .btn-block { width: 100%; justify-content: center; } /* ---------------------------------------------------------- ANULACIONES DARK MODE para variantes con borde/ghost ---------------------------------------------------------- */ .dark .btn-secondary { color: #33ff92 !important; /* verde brillante de la escala secundaria en dark */ border-color: #33ff92; } .dark .btn-secondary:hover:not(:disabled):not(.btn-loading) { background: rgba(51, 255, 146, 0.10); border-color: #00cc5f; color: #00cc5f !important; } .dark .btn-ghost { color: var(--color-lblue) !important; border-color: rgba(74, 175, 233, 0.35); } .dark .btn-ghost:hover:not(:disabled):not(.btn-loading) { background: rgba(74, 175, 233, 0.10); border-color: var(--color-lblue); color: var(--color-lblue) !important; } .dark .btn-icon { color: #94a3b8; }