/* ========================================
   ENBLAUCRM Design System
   Lovable/Shadcn-like Components
   ======================================== */

/* ========================================
   Base Typography
   ======================================== */
.app-h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text);
    margin: 0 0 var(--space-2) 0;
    letter-spacing: -0.02em;
}

.app-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--line-height-normal);
}

/* ========================================
   Card Component
   ======================================== */
.app-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
    min-width: 0;
    overflow-x: hidden;
}

.app-card:hover {
    box-shadow: var(--shadow-md);
}

.app-card-pad {
    padding: var(--space-4);
}

.app-card-pad-lg {
    padding: var(--space-6);
}

/* ========================================
   Button Component
   ======================================== */
.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    text-decoration: none;
}

.app-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.app-btn--primary {
    background: var(--brand-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.app-btn--primary:hover:not(:disabled) {
    background: var(--brand-primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-btn--primary:active:not(:disabled) {
    transform: translateY(0);
}

.app-btn--secondary {
    background: var(--surface-muted);
    color: var(--text);
    border: 1px solid var(--border);
}

.app-btn--secondary:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--brand-primary);
}

.app-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.app-btn--ghost:hover:not(:disabled) {
    background: var(--surface-muted);
    color: var(--text);
}

.app-btn--icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
}

.app-btn--icon:hover:not(:disabled) {
    background: var(--surface-muted);
    color: var(--text);
}

.app-btn--danger {
    background: var(--status-error);
    color: white;
    box-shadow: var(--shadow-sm);
}

.app-btn--danger:hover:not(:disabled) {
    background: #b91c1c;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.app-btn--danger:active:not(:disabled) {
    transform: translateY(0);
}

.app-btn svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   Input Component
   ======================================== */
.app-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.app-input-icon {
    position: absolute;
    color: var(--text-muted);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.app-input-wrap.has-icon-left .app-input {
    padding-left: calc(var(--space-6) + var(--space-4));
}

.app-input-icon--left {
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.app-input {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    box-sizing: border-box;
}

.app-input--with-icon {
    padding-left: 2.75rem;
}

.app-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.app-input::placeholder {
    color: var(--text-muted);
}

.app-input:disabled {
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ========================================
   Select Component
   ======================================== */
.app-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.app-select {
    width: 100%;
    height: 42px;
    padding: 0 2.5rem 0 var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.app-select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.app-select:disabled,
.app-select--disabled {
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

.app-select__chevron {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

/* ========================================
   Input icon right
   ======================================== */
.app-input--with-icon-right {
    padding-right: 2.75rem;
}

.app-input-icon--right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

/* ── Input Suffix (unit adornment, e.g., €, %, kg) ── */
.app-input-suffix {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.app-input--with-suffix {
    padding-right: 2.5rem;
}

.app-input-wrap .app-input:disabled ~ .app-input-suffix {
    color: var(--text-disabled);
}

/* ========================================
   Textarea Component
   ======================================== */
.app-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
    resize: vertical;
    line-height: var(--line-height-normal);
}

.app-textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.app-textarea::placeholder {
    color: var(--text-muted);
}

.app-textarea:disabled {
    background-color: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ── Post-it notes (textarea amarillo) ── */
.deal-notes-postit .app-textarea {
    background: #fef9c3;
    border-color: #fde68a;
    border-radius: var(--radius-md);
}

.deal-notes-postit .app-textarea:focus {
    background: #fefce8;
    border-color: #facc15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15);
}

.deal-notes-postit .deal-form-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
}

/* ========================================
   Rich Text Editor Component
   Paridad: DxRichEdit (ENBLAUWEB) / RichEditControl (WPF)
   ======================================== */
.app-rich-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.app-rich-editor:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

/* ── Toolbar ── */
.app-rich-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    user-select: none;
}

.app-rich-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.app-rich-editor-btn:hover {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.app-rich-editor-btn:active {
    background: var(--brand-primary-soft);
    border-color: var(--border-focus);
    color: var(--brand-primary);
}

/* Estado activo (negrita/cursiva/subrayado activados en la selección) */
.app-rich-editor-btn.is-active {
    background: var(--brand-primary-soft);
    border-color: var(--border-focus);
    color: var(--brand-primary);
}

.app-rich-editor-btn svg {
    flex-shrink: 0;
}

.app-rich-editor-separator {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--border);
    flex-shrink: 0;
}

/* ── Área de contenido ── */
.app-rich-editor-content {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--text);
    line-height: var(--line-height-normal);
    outline: none;
    overflow-y: auto;
    max-height: 300px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Placeholder cuando el editor está vacío */
.app-rich-editor-content.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    font-style: italic;
}

.app-rich-editor-content[contenteditable="false"] {
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ── Modo visor (HideToolbar): solo el texto, sin cromo del editor ── */
.app-rich-editor--plain {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

    .app-rich-editor--plain .app-rich-editor-content,
    .app-rich-editor--plain .app-rich-editor-content[contenteditable="false"] {
        padding: 0;
        min-height: 0 !important;
        max-height: none;
        background: transparent;
        color: var(--text);
        cursor: default;
    }

/* ── Color picker inline ── */
.app-rich-editor-color-wrapper {
    position: relative;
    display: inline-flex;
}

.app-rich-editor-color-btn {
    flex-direction: column;
    gap: 1px;
}

.app-rich-editor-color-indicator {
    display: block;
    width: 14px;
    height: 3px;
    border-radius: 1px;
    background: #000;
    transition: background 0.15s ease;
}

.app-rich-editor-color-input {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

/* ── Tabla: botón + popup de inserción/edición ── */
.app-rich-editor-table-wrapper {
    position: relative;
    display: inline-flex;
}

.app-rich-editor-table-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin-top: 4px;
    min-width: 200px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

    .app-rich-editor-table-popup.is-open {
        display: block;
    }

.art-pop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

    .art-pop-row input {
        width: 64px;
        padding: 3px 6px;
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 4px;
        font-size: 0.8rem;
    }

.art-insert-btn {
    width: 100%;
    padding: 5px 8px;
    margin-top: 2px;
    border: none;
    border-radius: 5px;
    background: var(--brand-primary, #00c39e);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}

.art-pop-sep {
    height: 1px;
    background: var(--border-color, #eef0f2);
    margin: 8px 0;
}

.art-pop-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-bottom: 5px;
}

.art-pop-ops {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

    .art-pop-ops button {
        padding: 4px 6px;
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 4px;
        background: var(--surface, #fff);
        font-size: 0.75rem;
        cursor: pointer;
    }

    .art-pop-ops button:hover {
        background: var(--surface-hover, #f1f5f9);
    }

/* ── Tablas dentro del editor: bordes tenues SOLO en edición (no se guardan en el RTF/email),
   para poder ver y editar la rejilla. Aplica a tablas insertadas y a las que vuelven del RTF. ── */
.app-rich-editor-content table {
    border-collapse: collapse;
    margin: 4px 0;
}

    .app-rich-editor-content table td,
    .app-rich-editor-content table th {
        outline: 1px dashed #d0d5da;   /* outline en vez de border: no altera el layout de celdas */
        min-width: 28px;
        min-height: 1em;
    }

.app-rich-editor-content table.art-table td {
    border: 1px solid #c7ccd1;
    padding: 4px 8px;
}

/* ========================================
   UTILITIES - Animations
   ======================================== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   UTILITIES - Text
   ======================================== */
.hl-brand {
    background: var(--brand-primary);
    color: #fff;
    border-radius: 6px;
    padding: 0 var(--space-1);
    line-height: 1.4;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-muted {
    color: var(--text-muted, #6b7280);
}

/* ========================================
   UTILITIES - Messages
   ======================================== */
.error-message {
    padding: var(--space-3, 0.75rem);
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md, 12px);
    color: #991b1b;
}

.success-message {
    padding: var(--space-3, 0.75rem);
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-md, 12px);
    color: #166534;
}

/* Warning message */
.warning-message {
    padding: var(--space-3, 0.75rem);
    background-color: var(--status-warning-soft);
    border: 1px solid #fde68a;
    border-radius: var(--radius-md, 12px);
    color: #92400e;
}

/* ========================================
   UTILITIES - Spacing
   ======================================== */
.p-4 {
    padding: var(--space-4, 1rem);
}

.space-y-3 > * + * {
    margin-top: var(--space-3, 0.75rem);
}

.space-y-6 > * + * {
    margin-top: var(--space-6, 1.5rem);
}

/* ========================================
   UTILITIES - Responsive
   ======================================== */

@media (max-width: 768px) {
    .hide-md {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .hide-lg {
        display: none !important;
    }
}

/* ========================================
   Filter Bar Component
   ======================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.filter-bar-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.filter-bar-select-small {
    width: 80px;
    min-width: 80px;
}

@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-bar-controls {
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ========================================
   Badge Component
   ======================================== */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.app-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.app-badge--success {
    background: var(--status-success-soft);
    color: #16a34a;
    border-color: #bbf7d0;
}

.app-badge--inactive {
    background: var(--status-inactive-soft, #f1f5f9);
    color: var(--status-inactive, #64748b);
    border-color: #e2e8f0;
}

.app-badge--potential {
    background: #e0e7ff;
    color: var(--status-potential, #6366f1);
    border-color: var(--status-potential-border, #c7d2fe);
}

.app-badge--open {
    background: var(--brand-primary-soft);
    color: var(--brand-primary-dark);
    border-color: #a7f3d0;
}

.app-badge--won {
    background: var(--status-success-soft);
    color: var,--status-success);
    border-color: #bbf7d0;
}

.app-badge--lost {
    background: var(--status-error-soft);
    color: var,--status-error);
    border-color: #fecaca;
}

.app-badge--inprogress {
    background: #fef3c7;
    color: #d97706;
    border-color: #fde68a;
}

.app-badge--shipped {
    background: #dbeafe;
    color: #2563eb;
    border-color: #bfdbfe;
}

.app-badge--default {
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-secondary, #475569);
    border-color: var(--border, #e2e8f0);
}

/* AppTable */
.app-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.app-table th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.app-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.app-table tbody tr:hover {
    background: var(--surface-muted);
}

/* ========================================
   Deal Dialog
   ======================================== */
.modal-dialog.deal-dialog--lg {
    max-width: 720px;
    width: 100%;
}

.deal-dialog__panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.deal-dialog__panel .modal-body {
    padding: 0;
}

.deal-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 24px;
}

.deal-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.deal-dialog__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.deal-dialog__subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 0.875rem);
}

.deal-dialog__close {
    margin-top: 2px;
}

.deal-dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.deal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium, 500);
}

.form-required {
    color: var(--status-error, #ef4444);
    margin-left: 4px;
}

.app-input.form-control,
.app-select.form-control,
.app-textarea.form-control {
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.app-textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
}

.app-input.form-control:focus,
.app-select.form-control:focus,
.app-textarea.form-control:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.deal-dialog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-btn.btn-primary {
    background: var(--brand-primary);
    color: #fff;
}

.app-btn.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.app-btn.btn-outline:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.app-btn.btn-danger {
    background: var(--status-error, #ef4444);
    color: #fff;
}

.app-btn.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

@media (max-width: 768px) {
    .modal-dialog.deal-dialog--lg {
        max-width: calc(100vw - 2rem);
        margin: 1rem;
    }

    .deal-dialog {
        padding: 20px;
    }

    .deal-dialog__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-left,
    .footer-right {
        justify-content: flex-end;
    }
}

/* ========================================
   App Modal
   ======================================== */
.app-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1050;
}

.app-modal__dialog {
    width: 100%;
    max-width: 640px;
}

.app-modal__dialog.app-modal--sm {
    max-width: 520px;
}

.app-modal__dialog.app-modal--md {
    max-width: 640px;
}

.app-modal__dialog.app-modal--lg {
    max-width: 720px;
}

.app-modal__dialog.app-modal--xl {
    max-width: 960px;
}

.app-modal__content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 24px;
    border-bottom: 1px solid var(--border);
}

.app-modal__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.app-modal__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

.app-modal__close {
    margin-top: 5px;
}

.app-modal__body {
    padding: 24px;
}

.app-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.app-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1040;
}

/* Allow custom dropdowns (position:absolute) to escape modal content clipping */
.app-modal__content.app-modal--ubicacion { overflow: visible; }
/* Allow AppColorPicker popup to escape modal content clipping */
.app-modal__content.app-modal--color-picker { overflow: visible; }
/* ── Modal maximizado ── */
.app-modal__dialog.app-modal--maximized {
    max-width: none;
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
}

.app-modal__dialog.app-modal--maximized .app-modal__content {
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
}

.app-modal__dialog.app-modal--maximized .app-modal__body {
    flex: 1;
    overflow-y: auto;
}

.app-modal__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    flex-shrink: 0;
}

.app-modal__maximize {
    margin-top: 5px;
    font-size: 16px;
    opacity: 0.6;
    transition: opacity var(--transition-fast, 150ms ease);
}

.app-modal__maximize:hover {
    opacity: 1;
}

/* ========================================
   Table Footer + Pagination
   ======================================== */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: 12px;
    flex-wrap: wrap;
}

.table-footer__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pagination__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition-base);
}

.page-btn:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.page-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.page-btn.is-active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.page-btn:disabled,
.pagination__item.is-disabled .page-btn {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 768px) {
    .table-footer {
        align-items: flex-start;
    }

    .pagination {
        width: 100%;
        justify-content: flex-end;
    }
}

* ========================================
Smart Grid
======================================== */
.smart-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.smart-grid__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.smart-grid__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
}

    .smart-grid__sort-btn.is-active {
        color: var(--text);
    }

.smart-grid__sort-icon {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.35;
}

    .smart-grid__sort-icon.is-asc {
        transform: rotate(-135deg);
        opacity: 1;
    }

    .smart-grid__sort-icon.is-desc {
        transform: rotate(45deg);
        opacity: 1;
    }

.smart-grid__filter-row th {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

.smart-grid__filter-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.smart-grid__filter-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.smart-grid__filter-select {
    height: 32px;
    font-size: var(--font-size-xs);
    padding: 0 var(--space-3);
}

.smart-grid__filter-input .app-input {
    height: 32px;
    font-size: var(--font-size-xs);
}

.smart-grid__empty-row {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    min-height: 320px;
    height: 320px;
    vertical-align: top;
    padding-top: var(--space-8) !important;
}

.smart-grid__row {
    cursor: pointer;
}

    .smart-grid__row:hover {
        background: var(--surface-muted);
    }

.smart-grid__cell--center {
    text-align: center;
}

.smart-grid__cell--right {
    text-align: right;
}

/* ── Smart Grid: Action buttons (shared across all grids) ── */

.smart-grid__actions-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}

.smart-grid__edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .smart-grid__edit-btn:hover {
        background: var(--brand-primary-soft);
        border-color: var(--brand-primary);
        color: var(--brand-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .smart-grid__edit-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

.smart-grid__delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .smart-grid__delete-btn:hover {
        background: var(--color-danger-bg, #fef2f2);
        border-color: var(--color-danger, #dc2626);
        color: var(--color-danger, #dc2626);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .smart-grid__delete-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

/* ── Smart Grid: Drag handle — oculto por defecto, visible en hover ── */

.smart-grid__drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: grab;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.15s ease, background 0.15s ease;
}

.smart-grid__header-cell:hover .smart-grid__drag-handle {
    opacity: 0.45;
}

.smart-grid__drag-handle:hover {
    opacity: 1 !important;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.smart-grid__drag-handle:active {
    cursor: grabbing;
    opacity: 1 !important;
    color: var(--brand-primary-dark, var(--brand-primary));
}

.smart-grid__header-content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.smart-grid__header-cell.is-drop-target {
    box-shadow: inset 0 -2px 0 var(--brand-primary);
}

.smart-grid__columns {
    position: relative;
}

.smart-grid__columns-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.9rem;
}

/* Override width para selects compactos en filter bars */
.filter-bar .app-select.filter-bar-select-small {
    width: 80px;
    min-width: 80px;
}

/* ═══ Toast Host ═══ */

.toast-host {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 380px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in var(--transition-base) ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.toast-body {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--text);
    line-height: var(--line-height-normal);
}

.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.toast-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Status variants */
.toast--success { border-left: 3px solid var(--status-success); }
.toast--success .toast-body svg { color: var(--status-success); }

.toast--danger { border-left: 3px solid var(--status-error); }
.toast--danger .toast-body svg { color: var(--status-error); }

.toast--warning { border-left: 3px solid var(--status-warning); }
.toast--warning .toast-body svg { color: var(--status-warning); }

.toast--info { border-left: 3px solid var(--status-info); }
.toast--info .toast-body svg { color: var(--status-info); }

@media (max-width: 480px) {
    .toast-host {
        right: var(--space-2);
        left: var(--space-2);
        max-width: none;
    }
}

/* ═══ App Tabs ═══ */

.app-tabs {
    display: flex;
    flex-direction: column;
}

.app-tabs-header {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.app-tabs-header::-webkit-scrollbar {
    display: none;
}

.app-tabs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-sans);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.app-tabs-btn:hover {
    color: var(--text);
}

.app-tabs-btn--active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.app-tabs-content {
    padding-top: var(--space-4);
}

.app-tab-panel {
    animation: tab-fade-in var(--transition-fast) ease-out;
}

@keyframes tab-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══ App Page Header ═══ */

.app-page-header {
    margin-bottom: var(--space-6);
}

.app-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.app-page-header-text {
    flex: 1;
    min-width: 0;
}

.app-page-header-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    margin: 0;
    line-height: var(--line-height-tight);
}

.app-page-header-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
    line-height: var(--line-height-normal);
}

.app-page-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}

.app-page-header-extra {
    margin-top: var(--space-4);
}

/* ═══ Row Actions Menu ═══ */

.row-actions {
    position: relative;
    display: inline-flex;
}

.row-actions-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.row-actions-trigger:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.row-actions-overlay {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.row-actions-dropdown {
    /* position:fixed + top/left se inyectan inline por el componente */
    min-width: 172px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1) 0;
    margin-top: var(--space-1);
    animation: row-actions-in var(--transition-fast) ease-out;
}

@keyframes row-actions-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Row Actions: ítems del menú desplegable ── */

.row-actions-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-align: left;
    line-height: var(--line-height-normal);
    white-space: nowrap;
}

.row-actions-item:hover {
    background: var(--surface-hover);
    color: var(--brand-primary-dark);
}

.row-actions-item:active {
    background: var(--brand-primary-soft);
}

.row-actions-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.row-actions-item:hover svg {
    color: var(--brand-primary);
}

/* ── Variante danger (eliminar, anular…) ── */

.row-actions-item--danger {
    color: var(--status-error);
}

.row-actions-item--danger:hover {
    background: var(--status-error-soft);
    color: var(--status-error);
}

.row-actions-item--danger:active {
    background: #fecaca;
}

.row-actions-item--danger svg {
    color: var(--status-error);
    opacity: 0.7;
}

.row-actions-item--danger:hover svg {
    color: var(--status-error);
    opacity: 1;
}

/* ── Estado disabled (permiso bloqueado) ── */

.row-actions-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--text-disabled);
}

.row-actions-item:disabled svg {
    color: var(--text-disabled);
}

/* ── Separador entre grupos de acciones ── */

.row-actions-separator {
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
}

/* ── Etiqueta de grupo de acciones ── */

.row-actions-group-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* ========================================
   AppSearchSelect Component
   ======================================== */

.app-search-select {
    position: relative;
    display: block;
    width: 100%;
}

.app-search-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.app-search-select__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: 42px;
    padding: 0 var(--space-4);
    font-size: var(--font-size-base);
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
    text-align: left;
    line-height: 1;
}

.app-search-select__trigger:hover:not(:disabled) {
    border-color: var(--text-muted);
}

.app-search-select__trigger:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.app-search-select__trigger:disabled {
    background-color: var(--surface-muted);
    color: var(--text-disabled);
    cursor: not-allowed;
}

.app-search-select--open .app-search-select__trigger {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.app-search-select__display {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-search-select__placeholder {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.app-search-select__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.app-search-select__clear:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.app-search-select__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.app-search-select--open .app-search-select__chevron {
    transform: rotate(180deg);
}

/* ── Panel desplegable ── */

.app-search-select__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-search-select__panel--fixed {
    position: fixed;
    z-index: 10000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Reset de la clase base que forzaba ancho completo */
    right: auto;
    min-width: 0;
}

.app-search-select__search-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.app-search-select__search-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}

.app-search-select__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    color: var(--text);
    background: transparent;
    padding: var(--space-1) 0;
}

.app-search-select__input::placeholder {
    color: var(--text-muted);
}

.app-search-select__list {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--space-1) 0;
}

.app-search-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.app-search-select__option:hover {
    background: var(--surface-hover);
}

.app-search-select__option--active {
    color: var(--brand-primary);
    font-weight: var(--font-weight-medium);
    background: var(--brand-primary-soft);
}

.app-search-select__option--active:hover {
    background: var(--brand-primary-soft);
}

.app-search-select__option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-search-select__option-check {
    flex-shrink: 0;
    color: var(--brand-primary);
}

.app-search-select__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.app-search-select__more {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid var(--border);
}

/* ── Password visibility toggle ── */
.app-input-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
}

    .app-input-password-toggle:hover {
        color: var(--text);
        background: var(--surface-muted);
    }

    .app-input-password-toggle:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: -2px;
    }

.app-input-wrap.has-password-toggle .app-input {
    padding-right: 2.75rem;
}

.smart-grid__search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 480px;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 0 !important;
    background: var(--surface);
    overflow: hidden;
    box-shadow: none !important;
    cursor: text;
}

/* ════════════════════════════════════════════════════════════════
   SmartGrid — buscador global: overrides para AppInput
   (No pueden ir en scoped CSS porque AppInput es componente hijo)
   ════════════════════════════════════════════════════════════════ */
    .smart-grid__search-wrap .app-input-wrap {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        flex: 1;
        min-width: 0;
    }

    .smart-grid__search-wrap .app-input-icon--left {
        left: 10px;
        z-index: 2;
    }

    .smart-grid__search-wrap .app-input,
    .smart-grid__search-wrap input.app-input {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        outline: none !important;
        height: 100% !important;
        padding: 6px 60px 6px 36px !important;
        width: 100% !important;
        cursor: text !important;
    }

        .smart-grid__search-wrap .app-input:focus,
        .smart-grid__search-wrap input.app-input:focus {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
        }

/* ── Modales en móvil: aprovechar el ancho, cuerpo compacto ── */
@media (max-width: 640px) {
    .app-modal {
        padding: 10px;
    }

    .app-modal__body {
        padding: 16px;
    }

    .app-modal__footer {
        padding: 12px 16px;
    }
}