/**
 * Layout Funcional - HelpMe Plugin
 * 
 * Solo layout funcional (flexbox, grid). Sin estilos visuales.
 * Los usuarios personalizan colores, bordes, sombras mediante las variables CSS.
 * 
 * @package HelpMe
 * @author Claudio Figueroa Asi
 * @copyright 2026 enPatagonia SpA
 */

/* Reset básico para componentes del plugin */
[class*="helpme-"] {
    box-sizing: border-box;
}

/* ========================================
   Lista de Tickets
   ======================================== */

.helpme-ticket-list {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-md, 1.5rem);
}

.helpme-ticket-list__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--helpme-spacing-sm, 1rem);
}

.helpme-ticket-list__filters {
    display: flex;
    gap: var(--helpme-spacing-sm, 1rem);
    flex-wrap: wrap;
}

.helpme-ticket-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--helpme-spacing-sm, 1rem);
}

.helpme-ticket {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-sm, 1rem);
}

.helpme-ticket__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.helpme-ticket__content {
    flex: 1;
}

.helpme-ticket__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========================================
   Formulario de Ticket
   ======================================== */

.helpme-ticket-form {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-md, 1.5rem);
}

.helpme-ticket-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-xs, 0.5rem);
}

.helpme-ticket-form__actions {
    display: flex;
    gap: var(--helpme-spacing-sm, 1rem);
    justify-content: flex-end;
}

/* ========================================
   Lista de Facturas
   ======================================== */

.helpme-invoice-list {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-md, 1.5rem);
}

.helpme-invoice-list__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--helpme-spacing-sm, 1rem);
}

.helpme-invoice-list__filters {
    display: flex;
    gap: var(--helpme-spacing-sm, 1rem);
    flex-wrap: wrap;
}

.helpme-invoice-list__items {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-sm, 1rem);
}

.helpme-invoice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--helpme-spacing-md, 1.5rem);
    align-items: center;
}

.helpme-invoice__actions {
    display: flex;
    gap: var(--helpme-spacing-xs, 0.5rem);
}

/* ========================================
   Portal del Cliente
   ======================================== */

.helpme-client-portal {
    display: flex;
    flex-direction: column;
    gap: var(--helpme-spacing-lg, 2rem);
}

.helpme-client-portal__tabs {
    display: flex;
    gap: var(--helpme-spacing-xs, 0.5rem);
    border-bottom: var(--helpme-border-width, 1px) solid var(--helpme-color-border, #dcdcde);
}

.helpme-client-portal__tab {
    padding: var(--helpme-spacing-sm, 1rem);
    cursor: pointer;
}

.helpme-client-portal__tab-content {
    display: none;
}

.helpme-client-portal__tab-content--active {
    display: block;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .helpme-ticket-list__items {
        grid-template-columns: 1fr;
    }

    .helpme-invoice {
        grid-template-columns: 1fr;
    }

    .helpme-ticket-form__actions {
        flex-direction: column;
    }
}