.logo-img { border-radius: var(--radius-pill); object-fit: cover; aspect-ratio: 1 / 1; background-color: transparent; box-shadow: 0 0 0 1px var(--sys-color-outline); }
.card { background-color: var(--sys-color-surface-variant); border-radius: var(--radius-md); padding: var(--spacing-lg); color: var(--sys-color-on-surface); transition: var(--transition-standard); border: 1px solid var(--sys-color-outline); box-shadow: var(--shadow-sm); }
.card:hover { border-color: var(--sys-color-outline-variant); box-shadow: var(--shadow-md); }
.button-primary, .button-secondary, .button-text, .button-danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); font-weight: 600; font-size: 0.92rem; padding: 0.8rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-standard); text-align: center; white-space: nowrap; border: 1px solid transparent; }
.button-primary { background-color: var(--sys-color-primary); color: var(--sys-color-on-primary); }
.button-secondary { background-color: transparent; color: var(--sys-color-primary); border-color: var(--sys-color-outline); }
.button-text { background-color: transparent; color: var(--sys-color-on-surface-variant); }
.button-danger { background-color: rgba(209, 67, 67, 0.12); color: var(--sys-color-error); border-color: rgba(209, 67, 67, 0.2); }
.button-primary:hover, .button-secondary:hover, .button-text:hover, .button-danger:hover { transform: translateY(-1px); }
.button-full { width: 100%; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer; background: transparent; color: var(--sys-color-on-surface-variant); transition: var(--transition-standard); border: 1px solid transparent; position: relative; }
.icon-button:hover { background-color: var(--sys-color-surface-variant); color: var(--sys-color-on-surface); }
.input-container { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: var(--spacing-md); text-align: left; width: 100%; }
.input-container label { font-size: 0.82rem; font-weight: 600; color: var(--sys-color-on-surface-variant); }
.input { width: 100%; padding: 0.85rem 1rem; background-color: transparent; border: 1px solid var(--sys-color-outline); border-radius: var(--radius-sm); color: var(--sys-color-on-surface); font-size: 0.96rem; transition: var(--transition-standard); }
.input:focus { border-color: var(--sys-color-primary); background-color: var(--sys-color-surface); box-shadow: 0 0 0 1px var(--sys-color-primary); }
.input::placeholder { color: var(--sys-color-on-surface-variant); opacity: 0.65; }
.form-feedback { margin: 0 0 1rem 0; padding: 0.9rem 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(239, 68, 68, 0.18); background: rgba(239, 68, 68, 0.08); color: var(--sys-color-error); font-size: 0.92rem; }
.form-feedback.success { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.08); color: var(--sys-color-success); }
.field-help, .muted-copy { color: var(--sys-color-on-surface-variant); font-size: 0.9rem; }
.badge { padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 1px solid var(--sys-color-outline); }
.badge-pending { background-color: rgba(250, 204, 21, 0.12); color: #a16207; border-color: rgba(250, 204, 21, 0.2); }
.badge-ai_validated { background-color: rgba(14, 165, 233, 0.12); color: #0369a1; border-color: rgba(14, 165, 233, 0.2); }
.badge-approved { background-color: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.24); }
.badge-in_progress { background-color: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.2); }
.badge-waiting_payment { background-color: rgba(249, 115, 22, 0.12); color: #ea580c; border-color: rgba(249, 115, 22, 0.24); }
.badge-completed { background-color: rgba(16, 185, 129, 0.16); color: #15803d; border-color: rgba(16, 185, 129, 0.24); }
.badge-rejected { background-color: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.24); }
.badge-cancelled { background-color: rgba(107, 114, 128, 0.12); color: #4b5563; border-color: rgba(107, 114, 128, 0.24); }
.badge-free { background-color: rgba(59, 130, 246, 0.1); color: #2563eb; border-color: rgba(59, 130, 246, 0.2); }
.badge-pro { background-color: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.22); }
.badge-admin { background-color: rgba(14, 116, 144, 0.12); color: #155e75; border-color: rgba(14, 116, 144, 0.22); }
.badge-employee { background-color: rgba(20, 184, 166, 0.12); color: #0f766e; border-color: rgba(20, 184, 166, 0.22); }
.table-container { overflow-x: auto; background: var(--sys-color-surface); border-radius: var(--radius-md); border: 1px solid var(--sys-color-outline); width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 720px; }
th, td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--sys-color-outline); vertical-align: middle; }
th { font-weight: 600; color: var(--sys-color-on-surface-variant); font-size: 0.8rem; background-color: var(--sys-color-surface-variant); }
.actions-cell { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.modal { margin: auto; background-color: var(--sys-color-surface); color: var(--sys-color-on-surface); border: 1px solid var(--sys-color-outline); border-radius: var(--radius-lg); padding: var(--spacing-lg); max-width: 560px; width: min(92vw, 560px); box-shadow: var(--shadow-lg); }
.modal-wide { width: min(96vw, 860px); max-width: 860px; }
.modal-form { display: flex; flex-direction: column; }
.modal-content-block { padding: 0.5rem 0; line-height: 1.6; }
.modal::backdrop { background-color: rgba(0, 0, 0, 0.58); backdrop-filter: blur(8px); }
.modal-header { font-weight: 700; font-size: 1.25rem; margin-bottom: var(--spacing-md); letter-spacing: -0.01em; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-lg); flex-wrap: wrap; }
.chat-window { height: min(56vh, 560px); display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); overflow-y: auto; background-color: var(--sys-color-surface-variant); border-radius: var(--radius-md); border: 1px solid var(--sys-color-outline); }
.message { max-width: 85%; padding: 0.95rem 1.15rem; border-radius: var(--radius-md); font-size: 0.95rem; white-space: pre-wrap; word-break: break-word; }
.user-message { align-self: flex-end; background-color: var(--sys-color-primary); color: var(--sys-color-on-primary); border-bottom-right-radius: 4px; }
.ai-message { align-self: flex-start; background-color: var(--sys-color-surface); color: var(--sys-color-on-surface); border: 1px solid var(--sys-color-outline); border-bottom-left-radius: 4px; }
.empty-state { padding: 2rem; border: 1px dashed var(--sys-color-outline); border-radius: var(--radius-md); color: var(--sys-color-on-surface-variant); text-align: center; background: var(--sys-color-surface); }
.empty-state-cell { text-align: center; color: var(--sys-color-on-surface-variant); padding: 2rem; }
.notification-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--sys-color-error); position: absolute; top: 7px; right: 7px; }

/* Permisos Modal */
.permissions-modal-body { max-height: 65vh; overflow-y: auto; padding: 0; margin: 0 -1.25rem 1.25rem -1.25rem; padding: 0 1.25rem; }
.permissions-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--sys-color-outline); }
.permissions-fieldset { border: 1px solid var(--sys-color-outline); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; background-color: var(--sys-color-surface-variant); }
.permissions-fieldset legend { font-weight: 700; font-size: 0.95rem; color: var(--sys-color-primary); padding: 0 0.5rem; margin-left: -0.5rem; }
.permission-checkbox { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--sys-color-outline); }
.permission-checkbox:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.permission-checkbox label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--sys-color-on-surface); cursor: pointer; }
.permission-checkbox input[type="checkbox"] { margin-top: 0.25rem; cursor: pointer; accent-color: var(--sys-color-primary); }
.permission-checkbox small { color: var(--sys-color-on-surface-variant); font-size: 0.85rem; margin-left: 1.5rem; }

@media (max-width: 768px) {
    .table-container { display: none !important; }
    .modal, .modal-wide { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding: 1.25rem; }
}