@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================
   NEXOPOS - TEMA GLOBAL
   ========================================== */

:root {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;

    /* Color principal predeterminado */
    --nexo-primary: #7656ff;

    /* Variaciones predeterminadas */
    --nexo-primary-hover:
        color-mix(in srgb, var(--nexo-primary) 85%, black);

    --nexo-primary-light:
        color-mix(in srgb, var(--nexo-primary) 12%, white);

    --nexo-primary-soft:
        color-mix(in srgb, var(--nexo-primary) 8%, white);

    --nexo-primary-muted:
        color-mix(in srgb, var(--nexo-primary) 18%, white);

    --nexo-primary-border:
        color-mix(in srgb, var(--nexo-primary) 35%, white);

    --nexo-primary-focus:
        color-mix(in srgb, var(--nexo-primary) 45%, transparent);

    --nexo-primary-shadow:
        color-mix(in srgb, var(--nexo-primary) 25%, transparent);

    --nexo-primary-gradient: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 82%, white),
        var(--nexo-primary)
    );

    /* Colores generales */
    --nexo-text: #211c35;
    --nexo-background: #f7f7fc;
    --nexo-surface: #ffffff;

    /* Colores semánticos */
    --nexo-success: #16a676;
    --nexo-danger: #dc3545;
    --nexo-warning: #e7a13a;
    --nexo-info: #0891b2;

    color: var(--nexo-text);
    background: var(--nexo-background);

    font-synthesis: none;
}

/* ==========================================
   TEMA DINÁMICO POR NEGOCIO

   IMPORTANTE:
   MainLayout.razor establece --nexo-primary
   directamente sobre .nexo-shell.

   Por eso las variables derivadas deben
   definirse también aquí, para que utilicen
   el color seleccionado y no el color
   predeterminado de :root.
   ========================================== */

.nexo-shell {
    --nexo-primary-hover:
        color-mix(in srgb, var(--nexo-primary) 85%, black);

    --nexo-primary-light:
        color-mix(in srgb, var(--nexo-primary) 12%, white);

    --nexo-primary-soft:
        color-mix(in srgb, var(--nexo-primary) 8%, white);

    --nexo-primary-muted:
        color-mix(in srgb, var(--nexo-primary) 18%, white);

    --nexo-primary-border:
        color-mix(in srgb, var(--nexo-primary) 35%, white);

    --nexo-primary-focus:
        color-mix(in srgb, var(--nexo-primary) 45%, transparent);

    --nexo-primary-shadow:
        color-mix(in srgb, var(--nexo-primary) 25%, transparent);

    --nexo-primary-gradient: linear-gradient(
        135deg,
        color-mix(in srgb, var(--nexo-primary) 82%, white),
        var(--nexo-primary)
    );
}

/* ==========================================
   REGLAS GENERALES
   ========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

a {
    transition: color .2s ease;
}

/* ==========================================
   SELECCIÓN DE TEXTO
   ========================================== */

::selection {
    background: var(--nexo-primary-light);
    color: var(--nexo-text);
}

/* ==========================================
   ACCESIBILIDAD
   ========================================== */

:focus-visible {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

/* ==========================================
   CLASES REUTILIZABLES
   ========================================== */

.nexo-primary-bg {
    background-color: var(--nexo-primary);
    color: #ffffff;
}

.nexo-primary-text {
    color: var(--nexo-primary);
}

.nexo-primary-border {
    border-color: var(--nexo-primary);
}

.nexo-primary-button {
    background: var(--nexo-primary);
    color: #ffffff;
    border: 1px solid var(--nexo-primary);

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.nexo-primary-button:hover {
    background: var(--nexo-primary-hover);
    border-color: var(--nexo-primary-hover);
}

/* ==========================================
   BOTONES PRINCIPALES
   ========================================== */

.nexo-shell .nexo-primary-button,
.nexo-shell .btn-primary,
.nexo-shell .button-primary {
    background: var(--nexo-primary);
    border-color: var(--nexo-primary);
    color: #ffffff;
}

.nexo-shell .nexo-primary-button:hover,
.nexo-shell .btn-primary:hover,
.nexo-shell .button-primary:hover {
    background: var(--nexo-primary-hover);
    border-color: var(--nexo-primary-hover);
    color: #ffffff;
}

.nexo-shell .nexo-primary-button:focus-visible,
.nexo-shell .btn-primary:focus-visible,
.nexo-shell .button-primary:focus-visible {
    outline: 3px solid var(--nexo-primary-focus);
    outline-offset: 3px;
}

/* ==========================================
   BOTONES SECUNDARIOS
   ========================================== */

.nexo-shell .btn-outline-primary {
    background: transparent;
    color: var(--nexo-primary);
    border-color: var(--nexo-primary-border);
}

.nexo-shell .btn-outline-primary:hover {
    background: var(--nexo-primary-light);
    color: var(--nexo-primary-hover);
    border-color: var(--nexo-primary);
}

/* ==========================================
   BOTONES CON DEGRADADO
   ========================================== */

.nexo-gradient-button {
    background: var(--nexo-primary-gradient);
    color: #ffffff;
    border: 1px solid transparent;

    box-shadow:
        0 8px 22px var(--nexo-primary-shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.nexo-gradient-button:hover {
    color: #ffffff;
    filter: brightness(.95);
    transform: translateY(-2px);

    box-shadow:
        0 12px 26px var(--nexo-primary-shadow);
}

/* ==========================================
   TARJETAS
   ========================================== */

.nexo-accent-card {
    background: var(--nexo-surface);
    border: 1px solid var(--nexo-primary-border);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.nexo-accent-card:hover {
    border-color: var(--nexo-primary);

    box-shadow:
        0 10px 28px var(--nexo-primary-shadow);

    transform: translateY(-2px);
}

/* Tarjeta con fondo suave del tema */

.nexo-soft-card {
    background: var(--nexo-primary-soft);
    border: 1px solid var(--nexo-primary-border);
}

/* Tarjeta seleccionada */

.nexo-selected-card {
    background: var(--nexo-primary-light);
    border: 2px solid var(--nexo-primary);
}

/* ==========================================
   ETIQUETAS Y BADGES
   ========================================== */

.nexo-primary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--nexo-primary-light);
    color: var(--nexo-primary);

    border-radius: 8px;
    padding: 6px 10px;

    font-size: 11px;
    font-weight: 700;
}

.nexo-outline-badge {
    background: transparent;
    color: var(--nexo-primary);
    border: 1px solid var(--nexo-primary-border);
    border-radius: 8px;
}

/* ==========================================
   ICONOS CON COLOR DEL TEMA
   ========================================== */

.nexo-accent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--nexo-primary-light);
    color: var(--nexo-primary);

    border-radius: 12px;
}

.nexo-accent-icon svg {
    stroke: currentColor;
}

/* ==========================================
   FORMULARIOS
   ========================================== */

.nexo-shell input:focus-visible,
.nexo-shell select:focus-visible,
.nexo-shell textarea:focus-visible {
    outline-color: var(--nexo-primary-focus);
}

.nexo-shell input[type="checkbox"],
.nexo-shell input[type="radio"] {
    accent-color: var(--nexo-primary);
}

.nexo-shell .form-control:focus,
.nexo-shell .form-select:focus {
    border-color: var(--nexo-primary);

    box-shadow:
        0 0 0 3px var(--nexo-primary-focus);
}

/* ==========================================
   ENLACES
   ========================================== */

.nexo-primary-link {
    color: var(--nexo-primary);
    text-decoration: none;
}

.nexo-primary-link:hover {
    color: var(--nexo-primary-hover);
}

/* ==========================================
   PESTAÑAS Y NAVEGACIÓN
   ========================================== */

.nexo-tab-active {
    color: var(--nexo-primary);
    border-bottom: 2px solid var(--nexo-primary);
}

.nexo-tab-active:hover {
    color: var(--nexo-primary-hover);
}

.nexo-navigation-active {
    color: var(--nexo-primary);
    background: var(--nexo-primary-light);
}

/* ==========================================
   BARRAS DE PROGRESO
   ========================================== */

.nexo-progress {
    width: 100%;
    overflow: hidden;
    background: #eeeef5;
    border-radius: 999px;
}

.nexo-progress-fill {
    height: 100%;
    background: var(--nexo-primary);
    border-radius: inherit;
    transition: width .3s ease;
}

/* ==========================================
   TABLAS
   ========================================== */

.nexo-table-accent thead {
    background: var(--nexo-primary-soft);
}

.nexo-table-accent thead th {
    color: var(--nexo-primary);
}

.nexo-table-accent tbody tr:hover {
    background: var(--nexo-primary-soft);
}

/* ==========================================
   INDICADORES DE ESTADO
   ========================================== */

.nexo-status-success {
    color: var(--nexo-success);
}

.nexo-status-danger {
    color: var(--nexo-danger);
}

.nexo-status-warning {
    color: var(--nexo-warning);
}

.nexo-status-info {
    color: var(--nexo-info);
}

/* ==========================================
   UTILIDADES DE TEMA
   ========================================== */

.nexo-bg-primary-soft {
    background: var(--nexo-primary-soft);
}

.nexo-bg-primary-light {
    background: var(--nexo-primary-light);
}

.nexo-border-primary {
    border-color: var(--nexo-primary);
}

.nexo-shadow-primary {
    box-shadow:
        0 8px 24px var(--nexo-primary-shadow);
}

/* ==========================================
   ERRORES DE BLAZOR
   ========================================== */

#blazor-error-ui {
    background: #fff3e8;
    color: #57371f;
    bottom: 0;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* ==========================================
   IMPRESIÓN
   ========================================== */

@media print {

    @page {
        margin: 0;
    }

    body {
        background: white !important;
        margin: 0 !important;
    }

    .sidebar,
    .topbar,
    .mobile-bottom-nav,
    .bottom-nav,
    .nexo-navigation {
        display: none !important;
    }

    main,
    article,
    .content,
    .main-content,
    .page {
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    body:has(.ticket-page) .nexo-navigation,
    body:has(.ticket-page) .nexo-sidebar,
    body:has(.ticket-page) .sidebar,
    body:has(.ticket-page) header.top-row,
    body:has(.ticket-page) .top-row {
        display: none !important;
    }

    body:has(.ticket-page) .main,
    body:has(.ticket-page) main,
    body:has(.ticket-page) .content,
    body:has(.ticket-page) article {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        background: white !important;
    }

    body:has(.ticket-page) {
        background: white !important;
    }
}

/* ==========================================
   ACCESIBILIDAD - MOVIMIENTO REDUCIDO
   ========================================== */

@media (prefers-reduced-motion: reduce) {

    .nexo-gradient-button,
    .nexo-accent-card,
    .nexo-progress-fill {
        transition: none;
    }

    .nexo-gradient-button:hover,
    .nexo-accent-card:hover {
        transform: none;
    }
}