/* ============================================================================
   GRELLO - DARK NEON THEME
   Professional dark theme with neon accents and subtle color shadows
   ============================================================================ */

/* CSS Variables */
:root {
    /* Dark Base Colors */
    --dark-900: #0a0e27;
    --dark-800: #0f1435;
    --dark-700: #151b3d;
    --dark-600: #1e2749;
    --dark-500: #2a3458;

    /* Neon Accents */
    --neon-cyan: #00ffff;
    --neon-magenta: #ff00ff;
    --neon-purple: #b24bf3;
    --neon-blue: #4d9eff;
    --neon-pink: #ff4ddb;

    /* Semantic Colors */
    --primary: var(--neon-cyan);
    --secondary: var(--neon-purple);
    --accent: var(--neon-magenta);
    --danger: #ff4d6d;
    --success: #06ffa5;
    --warning: #ffbd4d;

    /* Text Colors
       El fondo de Axia es una foto con zonas claras (rosas y celestes), asi que
       los grises originales de Grello (#b8c5d6 / #7a8ba0) quedaban demasiado
       oscuros y el texto secundario se perdia. Estos son mas claros: contrastan
       contra las zonas brillantes sin quemar el look sobre las oscuras. */
    --text-primary: #ffffff;
    /* Los dos grises subieron de tono (#d3dde9 y #adbbcc): sobre el vidrio y
       las fotos de fondo el texto secundario se leia apagado, sobre todo el
       detalle de las tarjetas y las etiquetas de los chips. Se cambian aca y
       no uso por uso porque es el mismo token en todos lados — growth mapea
       --text-soft/--text-faint a estos dos (axia-theme.css), asi que el
       cambio llega tambien a Growth y Collections. */
    --text-secondary: #e2eaf4;
    --text-muted: #c4d1e0;

    /* Shadows - Subtle neon glows */
    --shadow-cyan: 0 0 20px rgba(0, 255, 255, 0.15);
    --shadow-magenta: 0 0 20px rgba(255, 0, 255, 0.15);
    --shadow-purple: 0 0 20px rgba(178, 75, 243, 0.15);
    --shadow-blue: 0 0 20px rgba(77, 158, 255, 0.15);

    /* Glass effect - More transparent for true glassmorphism */
    --glass-bg: rgba(30, 39, 73, 0.3);
    --glass-bg-heavy: rgba(30, 39, 73, 0.5);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(30px);

    /* Degrade cian-violeta, version glass: mismo par de marca que
       --neon-cyan/--neon-purple pero translucido, para botones y estados
       "activo/seleccionado" (pestanas, switcher, CTA) en vez del relleno
       solido de antes. El texto sobre este fondo pasa a --neon-cyan (el
       --dark-900 original perdia contraste al dejar de ser opaco). */
    --glass-accent-bg: linear-gradient(135deg, rgba(0, 255, 255, 0.22), rgba(178, 75, 243, 0.22));
    --glass-accent-border: rgba(0, 255, 255, 0.45);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Movil: nada se puede arrastrar de lado. overflow-x en el body solo no
   alcanza en iOS (el body le pasa su overflow al viewport y Safari igual deja
   panear); clip en el html corta ahi sin crear un contenedor de scroll, asi
   que sticky y el scroll de la pagina siguen iguales. */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 39, 0.3);
    z-index: 0;
    pointer-events: none;
}

body > * {
    position: relative;
    z-index: 1;
}

/* Los modales (.product-modal, z-index 20000) viven dentro del contenedor de
   la pagina, que por la regla de arriba queda en la capa 1: el header (100)
   les pasaba por encima y tapaba el titulo. Mientras hay uno abierto, su
   contenedor sube por encima del header. */
body > *:has(.product-modal:not(.hidden)) {
    z-index: 200;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--dark-500);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
    box-shadow: var(--shadow-purple);
}

/* Feedback unico para Guardar/Crear/Confirmar/Eliminar. La clase la maneja
   axia-header.js mientras la peticion iniciada por el boton esta pendiente. */
button.axia-action-loading,
input.axia-action-loading {
    position: relative;
    pointer-events: none;
    cursor: wait !important;
    opacity: 1 !important;
    color: transparent !important;
    text-shadow: none !important;
}

button.axia-action-loading > * {
    visibility: hidden;
}

button.axia-action-loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: currentColor !important;
    border-right-color: #fff !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: axia-action-spin 650ms linear infinite !important;
}

@keyframes axia-action-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%);
    opacity: 0.05;
    top: -200px;
    right: -200px;
    animation: pulse 8s ease-in-out infinite;
}

.login-page::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--neon-magenta) 0%, transparent 70%);
    opacity: 0.05;
    bottom: -150px;
    left: -150px;
    animation: pulse 6s ease-in-out infinite reverse;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.05; }
    50% { transform: scale(1.2); opacity: 0.08; }
}

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

.login-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    animation: slideUp 0.6s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    text-align: center;
    margin-bottom: 16px;
}

.logo-icon {
    width: 80px;
    height: 80px;
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: var(--neon-cyan);
    margin-bottom: 16px;
    box-shadow: var(--shadow-cyan);
}

.logo h1 {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagline {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 40px;
}

.login-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.apple-signin-btn {
    background: linear-gradient(135deg, var(--dark-600), var(--dark-500));
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.apple-signin-btn:hover {
    background: linear-gradient(135deg, var(--dark-500), var(--dark-600));
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-2px);
}

.divider {
    text-align: center;
    position: relative;
    margin: 8px 0;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--glass-border);
}

.divider::before { left: 0; }
.divider::after { right: 0; }

.divider span {
    color: var(--text-muted);
    font-size: 14px;
    background: var(--dark-700);
    padding: 0 16px;
    position: relative;
}

.demo-login-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.demo-login-btn:hover {
    border-color: var(--secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-purple);
}

/* Auth Steps */
.auth-step {
    display: none;
}

.auth-step.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    transition: all var(--transition-normal);
    font-family: inherit;
}

.auth-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    background: rgba(255, 255, 255, 0.08);
}

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

.code-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.auth-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.auth-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

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

.auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.code-info {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.code-info strong {
    color: var(--neon-cyan);
    font-weight: 600;
}

.back-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-normal);
}

.back-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.features {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.feature-icon {
    font-size: 24px;
}

/* ============================================================================
   DASHBOARD PAGE
   ============================================================================ */

.dashboard-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Header */
.main-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-small {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El logotipo del header: la imagen sola, sin caja. Antes eran dos piezas —la
   marca dentro de un cuadrito de vidrio con borde, y el nombre escrito en
   texto con degradado al lado— que no coincidian con el logo real ni en la
   forma de la marca ni en la tipografia. Ahora es el logotipo, y nada mas.

   28px de alto: a ese tamano las letras salen de 224px de ancho de origen, o
   sea que se achican mucho y quedan nitidas incluso en pantalla retina. */
.logo-small img {
    height: 34px;
    width: auto;
    display: block;
}

/* .logo-icon-small y .logo-small span quedan por compatibilidad: el markup de
   assistant/dashboard.html todavia los trae en el HTML y axia-header.js los
   reemplaza al montar, pero si el script no llega a correr (o la pagina se ve
   sin el) conviene que no se rompa el layout. */
.logo-icon-small {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--neon-cyan);
}

.logo-small span {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.user-profile img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--neon-cyan);
}

.user-profile span {
    font-size: 14px;
}

.background-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    line-height: 1;
    position: relative;
}

.background-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.calendar-sync-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-sync-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.settings-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-normal);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.logout-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.logout-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.15);
}

/* Dashboard Main */
.dashboard-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    padding: 24px 16px;
    overflow-y: auto;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.sidebar-section {
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.add-btn {
    width: 28px;
    height: 28px;
    background: var(--dark-600);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--neon-cyan);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-btn:hover {
    background: var(--neon-cyan);
    color: var(--dark-900);
    box-shadow: var(--shadow-cyan);
    transform: scale(1.1);
}

.workspaces-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workspace-item {
    padding: 12px 16px;
    background: var(--dark-600);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 15px;
    font-weight: 500;
}

.workspace-item:hover {
    background: var(--dark-500);
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateX(4px);
}

.workspace-item.active {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--neon-cyan);
    border-color: var(--glass-accent-border);
    box-shadow: var(--shadow-cyan);
}

/* Boards Content */
.boards-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.content-header {
    margin-bottom: 32px;
}

.content-header h2 {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.boards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.board-card {
    min-height: 180px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.boat-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-top: 10px;
}
.boat-card-meta span {
    background: rgba(0,0,0,0.28);
    padding: 3px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}
.board-card h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.board-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.board-card:hover::before {
    opacity: 1;
}

.board-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.2);
    transform: translateY(-4px);
}

.board-card h3 {
    font-size: 16px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.add-board-card {
    background: var(--dark-600);
    border: 2px dashed var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-board-card:hover {
    border-color: var(--neon-cyan);
    background: var(--dark-500);
}

.add-board-card span:not(.add-icon) {
    font-size: 13px;
    color: var(--text-primary);
}

.add-icon {
    font-size: 28px;
    color: var(--neon-cyan);
}

/* ============================================================================
   NEW DASHBOARD LAYOUT
   ============================================================================ */

.dashboard-main-new {
    flex: 1;
    padding: 20px 32px;
    overflow-y: auto;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

.workspaces-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.workspaces-header h2 {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.add-workspace-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-workspace-btn:hover {
    background: var(--neon-cyan);
    color: var(--dark-900);
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    transform: translateY(-2px);
}

.add-workspace-btn .add-icon {
    font-size: 18px;
}

.workspaces-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.workspace-section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    transition: all var(--transition-normal);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.workspace-section:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.2);
}

.workspace-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.workspace-section-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.workspace-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.6;
    line-height: 1;
}

.workspace-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.7;
}

/* Sin fondo al pasar por encima: solo cambia el color. Ver .icon-btn. */
.workspace-edit-btn:hover {
    background: none;
    color: var(--text-primary);
    opacity: 1;
}

.workspace-delete-btn:hover {
    background: none;
    color: #ef4444;
    opacity: 1;
}

.workspace-edit-btn svg,
.workspace-delete-btn svg {
    width: 20px;
    height: 20px;
}

.workspace-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 15px;
}

.workspace-empty h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.workspace-empty p {
    font-size: 14px;
}

/* ============================================================================
   BOARD PAGE
   ============================================================================ */

.board-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.board-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 39, 0.2);
    z-index: 0;
}

/* Board Header */
.board-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.back-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.back-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--text-primary);
    box-shadow: var(--shadow-cyan);
}

.board-title {
    font-size: 24px;
    font-weight: 700;
    margin-left: 24px;
}

.settings-btn {
    background: var(--dark-600);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.settings-btn:hover {
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

/* Settings Dropdown */
.settings-dropdown {
    position: absolute;
    top: 70px;
    right: 24px;
    width: 320px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 200;
    display: none;
}

.settings-dropdown.active {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-section {
    margin-bottom: 20px;
}

.dropdown-section:last-child {
    margin-bottom: 0;
}

.dropdown-section h4 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.background-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.background-option {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    background-size: cover;
    background-position: center;
}

.background-option:hover {
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    transform: scale(1.05);
}

.background-option.active {
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.dropdown-btn {
    width: 100%;
    background: var(--dark-600);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dropdown-btn:hover {
    background: var(--dark-500);
    border-color: var(--neon-cyan);
}

.dropdown-btn.danger {
    border-color: var(--danger);
    color: var(--danger);
}

.dropdown-btn.danger:hover {
    background: var(--danger);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.15);
}

/* Board Main */
.board-main {
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.board-main.hybrid-view {
    flex-direction: row;
}

/* Tasks View */
.tasks-view {
    flex: 1;
    /* En 'tasks-only'/'planner-only', .board-main pierde flex-direction:row
       (hybrid-view) y vuelve a column — ahi .tasks-view es un item de un
       flex column, y sin min-height:0 el default (min-height:auto) lo deja
       crecer al alto de su contenido en vez de respetar el espacio
       disponible: las columnas empujaban toda la pagina en vez de scrollear. */
    min-height: 0;
    padding: 24px;
    overflow-x: auto;
    overflow-y: hidden;
}

.tasks-view::-webkit-scrollbar-track,
.tasks-list::-webkit-scrollbar-track {
    background: transparent;
}

.tasks-view,
.tasks-list {
    scrollbar-color: var(--dark-500) transparent;
}

.columns-container {
    display: flex;
    gap: 20px;
    height: 100%;
}

.column {
    min-width: 320px;
    max-width: 320px;
    height: 100%;
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* El color viene inline desde JS (estado_key color, ya con alpha 0.55).
       Header ocupa todo el ancho del card y respeta el border-radius. */
    margin: -16px -16px 14px -16px;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* overlay translúcido encima del color para suavizar */
.column-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
}
.column-header > * { position: relative; z-index: 1; }

.column-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.column-count {
    background: rgba(0,0,0,0.30);
    color: #fff;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.column-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sin caja ni fondo al pasar por encima: solo el icono. Ver .icon-btn. */
.column-edit-btn,
.column-delete-btn {
    background: none;
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.column-edit-btn svg,
.column-delete-btn svg {
    width: 20px;
    height: 20px;
}

.column-edit-btn:hover {
    background: none;
    opacity: 1;
}

.column-delete-btn:hover {
    background: none;
    color: #ef4444;
    opacity: 1;
}

.tasks-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 100px;
    padding-bottom: 12px;
}

/* Las tarjetas se tinen con el color de la cabecera de su columna. Las
   variables --col-* las pone renderColumns() sobre el .column (board.js), asi
   que cada columna tine las suyas sin que el CSS sepa de colores concretos.
   El fallback deja el vidrio neutro de siempre en los tableros que no las
   definen. */
.task-card {
    /* El degradado va de tinte fuerte a tinte suave, NO a transparente: cayendo
       a transparente el color se perdia en la mitad de abajo y apenas se
       notaba de que columna era la tarjeta.
       La base es --col-base y no --glass-bg: ese navy opaco (rgba(30,39,73,.3))
       le ganaba al tinte y dejaba la tarjeta gris con un dejo de color. Con la
       base casi transparente manda el color de la columna, igual que en la
       cabecera, y el efecto vidrio lo sigue dando el backdrop-filter de abajo.
       El fallback conserva el vidrio neutro donde no hay columna que tina. */
    background: linear-gradient(180deg, var(--col-tint, transparent), var(--col-tint-soft, transparent)),
                var(--col-base, var(--glass-bg));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--col-edge, var(--glass-border));
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
}

.task-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 4px 16px 0 rgba(0, 255, 255, 0.15);
    transform: translateY(-2px);
}

.task-card.dragging {
    opacity: 0.5;
}

.task-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

.task-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Editar / agendar / borrar por tarjeta. */
.task-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

/* Sin caja ni fondo al pasar por encima: solo el icono. Ver .icon-btn. */
.task-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.75;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.task-icon-btn svg {
    width: 20px;
    height: 20px;
}

.task-icon-btn:hover {
    background: none;
    color: var(--neon-cyan);
    opacity: 1;
}

.task-icon-btn.danger:hover {
    background: none;
    color: #ef4444;
}

/* Modal de detalle de tarea: notas + log de actividad (#taskDetailModal). */
.task-detail-notes-composer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
}

.task-detail-notes-composer .modal-textarea {
    min-height: 60px;
    margin-bottom: 0;
}

.task-detail-notes-composer .create-btn {
    align-self: flex-end;
}

.task-detail-log {
    display: flex;
    flex-direction: column;
    max-height: 380px;
    overflow-y: auto;
}

.task-detail-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

.task-log-item {
    display: flex;
    gap: 12px;
    padding: 12px 4px;
}

.task-log-item + .task-log-item {
    border-top: 1px solid var(--glass-border);
}

.task-log-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.task-log-body {
    flex: 1;
    min-width: 0;
}

.task-log-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.task-log-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.task-log-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.task-log-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

/* Hide mobile schedule button on desktop */
.mobile-schedule-btn {
    display: none;
}

.task-tag {
    background: var(--dark-700);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.task-tag.scheduled {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    color: var(--neon-cyan);
}

.add-task-btn {
    background: transparent;
    border: 1px dashed var(--glass-border);
    color: var(--text-muted);
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 8px;
}

.add-task-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: var(--dark-700);
}

.add-column-btn {
    min-width: 320px;
    max-width: 320px;
    height: 64px;
    background: transparent;
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

.add-column-btn:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: var(--dark-700);
}

/* Planner View */
.planner-view {
    flex: 1;
    display: none;
    flex-direction: row;
    padding: 24px;
    gap: 24px;
}

.planner-view.active {
    display: flex;
}

/* Hybrid View (Tasks + Planner) */
.board-main.hybrid-view .planner-view {
    display: flex !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
    min-width: 20% !important;
    padding: 12px;
    order: -1;
    flex-direction: column;
    gap: 0;
}

.board-main.hybrid-view .tasks-view {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    min-width: 80% !important;
}

.board-main.hybrid-view .planner-view .calendar-container {
    display: block !important;
    width: 100%;
    flex: 1;
    min-height: 500px;
    /* El calendario lateral (hybrid view) no tiene techo: en semana/dia
       FullCalendar dibuja las 24 horas y crece sin limite. max-height en vh
       lo frena igual que a .column, para que scrollee el solo. */
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
    overflow: hidden;
}

.board-main.hybrid-view .planner-view .calendar-sidebar {
    display: none !important;
}

/* Hide sidebar when only planner is active (full screen mode) */
.board-main:not(.hybrid-view) .planner-view .calendar-sidebar {
    display: none !important;
}

.calendar-sidebar {
    width: 20%;
    min-width: 280px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.unscheduled-tasks h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.calendar-container {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* FullCalendar Customization */
.fc {
    color: var(--text-primary);
}

.fc .fc-toolbar {
    margin-bottom: 8px !important;
    padding: 0 !important;
}

.fc .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fc .fc-toolbar-title {
    color: var(--text-primary);
    font-size: 16px !important;
    font-weight: 600;
    margin: 0 !important;
}

.fc .fc-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: var(--text-primary) !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    text-transform: capitalize;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.fc .fc-button:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 2px 12px rgba(0, 217, 255, 0.25);
}

.fc .fc-button:disabled {
    opacity: 0.4 !important;
}

.fc .fc-header-toolbar {
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    /* Forzar 3 columnas: left | center | right distribuidas */
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
}
/* Chunk 1 = prev (a la izquierda) */
.fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(1) {
    flex: 0 0 auto;
    justify-content: flex-start;
}
/* Chunk 2 = title (centrado) */
.fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
/* Chunk 3 = next (a la derecha) */
.fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}
/* Nuestra fila custom de view buttons (month/week/day) — fila 2 centrada */
.fc .fc-header-toolbar > .fc-view-buttons {
    flex: 1 0 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
}
.fc .fc-toolbar-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 5px 12px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fc .fc-view-harness {
    margin-top: 0 !important;
}

.fc thead {
    background: transparent !important;
}

.fc th {
    background: transparent !important;
    border-color: var(--glass-border) !important;
    color: var(--text-secondary) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 4px 2px !important;
    white-space: nowrap !important;
}

.fc .fc-col-header-cell {
    background: transparent !important;
}
.fc .fc-col-header-cell-cushion {
    padding: 2px !important;
    font-size: 10px !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-accent-border);
    color: var(--neon-cyan);
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--glass-border);
}

.fc-theme-standard .fc-scrollgrid {
    border-color: var(--glass-border);
}

.fc .fc-daygrid-day-number {
    color: var(--text-primary);
    font-weight: 600;
    opacity: 0.85;
    padding: 4px 6px;
}

.fc .fc-daygrid-day.fc-day-today {
    background: rgba(0, 255, 255, 0.05);
}

.fc-event {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--neon-cyan);
}

/* eventDisplay:'block' (board.js) ya saca el punto de color en la mayoria de
   temas, pero lo forzamos igual — sin esto el punto se come espacio que el
   sidebar angosto del hybrid-view no tiene. La celda del dia recorta lo que
   no entra en vez de dejarlo desbordar sobre el dia de al lado. */
.fc-daygrid-event-dot {
    display: none;
}

.fc-daygrid-event {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar del hybrid-view: 20% del ancho del board, la celda de un dia es
   angosta de verdad. Texto y padding mas chicos para que "21:00" mas un
   pedazo del titulo entre sin salirse. */
.board-main.hybrid-view .planner-view .fc-event {
    padding: 1px 4px;
    font-size: 10px;
}

/* View Switcher (glass) */
.view-switcher {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40);
    z-index: 50;
}

.view-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.70);
    padding: 8px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.view-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
}

.view-btn.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff;
    box-shadow: 0 2px 12px rgba(255,255,255,0.10);
}

/* Layouts del board — 3 estados */
.board-main.tasks-only .tasks-view {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}
.board-main.tasks-only .planner-view {
    display: none !important;
}

.board-main.planner-only .planner-view {
    display: flex !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 24px !important;
}
.board-main.planner-only .tasks-view {
    display: none !important;
}
.board-main.planner-only .calendar-sidebar {
    display: block !important;
    width: 280px !important;
    min-width: 280px !important;
}

/* ============================================================================
   MODALS
   ============================================================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sin velo: el fondo detras del popup no se oscurece, solo se desenfoca.
       Tenia un negro al 20% que, sumado al de cada modal, apagaba la pantalla.
       La separacion la da el blur (8px; 14px era demasiado): con 2 no
       alcanzaba para despegar el modal del tablero sin la ayuda del velo. */
    background: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    /* --glass-bg, no --glass-bg-heavy: el mismo vidrio que las tarjetas de las
       pestanas. El "heavy" (0.5 de opacidad) hacia que el popup se leyera
       bastante mas oscuro que todo lo que tenia alrededor. */
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.28);
    animation: scaleIn 0.3s ease;
}

.modal-content.modal-large {
    max-width: 600px;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 20px;
    font-weight: 600;
}

.close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    transition: color var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* La X sale de /shared/axia-icons.js (data-axia-icon="close"), sin
   width/height propios. */
.close-modal svg {
    width: 20px;
    height: 20px;
}

/* Antes giraba 90 grados al pasar por encima. Con el glifo "×" eso se notaba;
   con la X del juego compartido el giro es identico a la figura de partida, o
   sea invisible. Queda solo el cambio de color, como en el resto de los
   iconos. */
.close-modal:hover {
    background: none;
    color: var(--text-primary);
}

.modal-body {
    padding: 24px 28px;
}

.modal-input,
.modal-textarea {
    width: 100%;
    background: var(--dark-600);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    margin-bottom: 16px;
    transition: all var(--transition-normal);
}

.modal-input:focus,
.modal-textarea:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.modal-color-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.modal-color-field input[type="color"] {
    width: 44px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--dark-600);
    cursor: pointer;
}

.modal-textarea {
    resize: vertical;
    min-height: 100px;
}

.task-schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.task-schedule label {
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: -8px;
}

.event-time-display {
    background: var(--dark-700);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    margin-top: 8px;
}

.background-picker {
    margin-top: 8px;
}

.background-picker label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.background-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.modal-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cancel-btn,
.create-btn,
.delete-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.cancel-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.cancel-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.create-btn {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.create-btn:hover {
    box-shadow: var(--shadow-cyan), 0 8px 20px rgba(0, 255, 255, 0.3);
    transform: translateY(-2px);
}

.delete-btn {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    margin-right: auto;
}

.delete-btn:hover {
    background: var(--danger);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.15);
}

.delete-btn.hidden {
    display: none;
}

.delete-confirm-message {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.toast:hover {
    transform: translateX(-4px);
}

.toast.removing {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Toast Types */
.toast.success {
    border-left: 3px solid var(--success);
}

.toast.success .toast-icon {
    background: var(--success);
    color: var(--dark-900);
}

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

.toast.error .toast-icon {
    background: var(--danger);
    color: var(--text-primary);
}

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

.toast.warning .toast-icon {
    background: var(--warning);
    color: var(--dark-900);
}

.toast.info {
    border-left: 3px solid var(--primary);
}

.toast.info .toast-icon {
    background: var(--primary);
    color: var(--dark-900);
}

/* ============================================================================
   BACKGROUND SELECTOR
   ============================================================================ */

.background-selector {
    position: fixed;
    top: 70px;
    right: 24px;
    width: 380px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    z-index: 200;
    display: none;
}

.background-selector.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.background-selector h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.background-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.background-thumbnail {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.background-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 39, 0.3);
    transition: all var(--transition-fast);
}

.background-thumbnail:hover {
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
    transform: scale(1.05);
}

.background-thumbnail:hover::after {
    background: rgba(10, 14, 39, 0.1);
}

.background-thumbnail.active {
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.background-thumbnail.active::after {
    background: rgba(0, 255, 255, 0.1);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.hidden {
    display: none !important;
}

/* Loading Spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--glass-border);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        width: 240px;
    }

    .boards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .planner-view {
        flex-direction: column;
    }

    .calendar-sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .dashboard-main {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }

    .boards-grid {
        grid-template-columns: 1fr;
    }

    .columns-container {
        flex-direction: column;
    }

    .column {
        min-width: 100%;
        max-width: 100%;
    }
}

.unlink-calendar-btn {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-left: 8px;
}

.unlink-calendar-btn:hover {
    background: var(--accent);
    color: var(--bg-primary);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.15);
}

.unlink-calendar-btn.hidden {
    display: none;
}

.modal-small {
    max-width: 450px;
}

.confirm-message {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.danger-btn {
    background: var(--danger);
    border: 1px solid var(--danger);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.danger-btn:hover {
    background: #ff5f7e;
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.25);
    transform: translateY(-1px);
}

/* ============================================================================
   MOBILE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
    /* Apiladas en vertical, las columnas ya no comparten una fila cuyo alto
       tenga sentido repartir: aca cada una debe crecer con su contenido y la
       pagina scrollear entera, como antes de fijar .board-page a 100vh. */
    .board-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .board-main {
        padding: 12px;
        min-height: auto;
    }

    .tasks-view {
        overflow-y: visible;
    }

    .columns-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        padding-bottom: 80px; /* Space for view switcher */
    }

    .column {
        width: 100% !important;
        min-width: 100% !important;
        height: auto;
        overflow: visible;
    }

    .tasks-list {
        overflow-y: visible;
    }

    .column-header {
        padding: 12px;
    }

    .task-card {
        margin-bottom: 12px;
        touch-action: none; /* Better touch handling */
    }

    /* Planner View Mobile */
    .planner-view {
        flex-direction: column;
        padding: 12px;
    }

    .calendar-sidebar {
        width: 100%;
        min-width: 100%;
        margin-bottom: 16px;
    }

    .calendar-container {
        width: 100%;
        padding: 12px;
    }

    /* FullCalendar mobile adjustments */
    .fc {
        font-size: 12px;
    }

    .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .fc-button {
        padding: 8px 12px;
        font-size: 13px;
    }

    .fc-daygrid-day {
        min-height: 60px;
    }

    .fc-event {
        font-size: 11px;
        padding: 2px 4px;
    }

    /* View Switcher */
    .view-switcher {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-border);
        border-radius: 16px 16px 0 0;
        padding: 16px 24px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 100;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .view-btn {
        flex: 0 0 auto;
        width: 140px;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
    }

    /* Mobile Schedule Button - Only visible on mobile */
    .mobile-schedule-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        color: var(--accent);
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;
    }

    .mobile-schedule-btn:hover {
        background: rgba(255, 0, 255, 0.2);
        border-color: var(--accent);
    }

    .mobile-schedule-btn:active {
        transform: scale(0.95);
        background: var(--accent);
        color: var(--dark-900);
    }

    /* Modal adjustments for mobile */
    .modal-content {
        width: 95%;
        max-width: 95%;
    }

    .modal-footer {
        padding: 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer button {
        flex: 1;
        min-width: 100px;
    }

    .delete-btn {
        flex-basis: 100%;
        margin-right: 0;
        order: -1;
    }

    /* Task card mobile actions */
    .task-card-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

    /* Modal adjustments */
    .modal-content {
        margin: 20px;
        max-width: calc(100% - 40px);
    }

    .modal-body {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
        overflow-y: auto;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .board-header {
        padding: 12px;
    }

    .board-title {
        font-size: 18px;
    }

    .task-card {
        padding: 10px;
    }

    .task-title {
        font-size: 14px;
    }

    .unscheduled-tasks h3 {
        font-size: 14px;
    }

    .fc-toolbar-title {
        font-size: 16px;
    }
}

/* Touch-friendly dragging */
.sortable-ghost {
    opacity: 0.5;
    background: var(--accent);
}

.sortable-drag {
    opacity: 0.8;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3);
}

/* ============================================================================
   CALENDAR SYNC MODAL
   ============================================================================ */

.sync-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.calendar-url-container {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.calendar-url-container .modal-input {
    flex: 1;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

.copy-btn {
    background: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    color: var(--dark-900);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.copy-btn:hover {
    background: transparent;
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.sync-instructions {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    margin-top: 16px;
}

.sync-instructions h4 {
    color: var(--neon-cyan);
    font-size: 16px;
    margin-bottom: 12px;
}

.sync-instructions ol {
    margin-left: 20px;
    margin-bottom: 16px;
}

.sync-instructions li {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 8px;
}

.sync-instructions strong {
    color: var(--text-primary);
    font-weight: 600;
}

.sync-note {
    color: var(--neon-cyan);
    font-size: 13px;
    font-style: italic;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
}

/* ============================================================================
   SHARE BOARD
   ============================================================================ */

/* Share button on board card */
.share-board-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    z-index: 10;
}

.share-board-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--neon-cyan);
    transform: scale(1.1);
}

/* Shared badge on board card */
.shared-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 255, 255, 0.2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--neon-cyan);
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--neon-cyan);
    z-index: 10;
}

/* Share modal sections */
.share-section {
    margin-bottom: 24px;
}

.share-section label {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.share-input-container {
    display: flex;
    gap: 8px;
}

.share-input-container .modal-input {
    flex: 1;
}

.share-send-btn {
    padding: 10px 20px;
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--neon-cyan);
    border: 1px solid var(--glass-accent-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.share-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

/* Shared users section */
.shared-users-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
}

.shared-users-section h4 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.shared-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shared-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.2s;
}

.shared-user-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--neon-cyan);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neon-cyan);
    font-weight: 700;
    font-size: 16px;
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.user-email {
    color: var(--text-secondary);
    font-size: 12px;
}

.user-role {
    display: flex;
    align-items: center;
    gap: 8px;
}

.owner-badge,
.pending-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.owner-badge {
    background: rgba(0, 255, 255, 0.2);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
}

.pending-badge {
    background: rgba(255, 165, 0, 0.2);
    color: #ffa500;
    border: 1px solid #ffa500;
}

.remove-user-btn {
    padding: 6px 12px;
    background: rgba(255, 0, 0, 0.2);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-user-btn:hover {
    background: rgba(255, 0, 0, 0.3);
    transform: translateY(-2px);
}

.no-users {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 24px;
    font-style: italic;
}

/* Mobile styles for share board */
@media (max-width: 768px) {
    .share-board-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
        top: 8px;
        right: 8px;
    }

    .shared-badge {
        top: 8px;
        left: 8px;
        font-size: 11px;
        padding: 3px 10px;
    }

    .share-input-container {
        flex-direction: column;
    }

    .user-info {
        gap: 8px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .user-name {
        font-size: 13px;
    }

    .user-email {
        font-size: 11px;
    }

    .user-role {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* ============================================================================
   CONFIRM MODAL (Remove User)
   ============================================================================ */

.modal-small {
    max-width: 450px;
}

.delete-btn {
    background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 101, 101, 0.3);
}

.delete-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
    background: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%);
}

.delete-btn:active {
    transform: translateY(0);
}

#confirmRemoveMessage {
    font-size: 16px;
    line-height: 1.6;
}

.sortable-chosen {
    cursor: grabbing !important;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tasks-list.sortable-drag-over {
    background: rgba(102, 126, 234, 0.1);
    border: 2px dashed var(--accent);
}

/* ========================================================================== */
/* Sprint 5 — Botes (workspaces) + Pipeline con drag&drop                    */
/* ========================================================================== */

.botes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 24px 32px;
}
.boat-card {
    background: linear-gradient(135deg, #0E2238 0%, #1A3458 100%);
    border: 1px solid rgba(197, 165, 114, 0.2);
    border-radius: 8px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.15s;
}
.boat-card:hover {
    border-color: var(--champagne);
    transform: translateY(-1px);
}
.boat-card.active {
    border-color: var(--champagne);
    box-shadow: 0 0 0 1px var(--champagne), 0 4px 12px rgba(197, 165, 114, 0.15);
}
.boat-card h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 17px;
}
.boat-card small {
    color: #cdbb98;
    font-size: 12px;
}
.boat-card .stat {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #a4a4a4;
}

.kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 24px 32px;
    align-items: flex-start;
}
.kanban-col {
    flex: 0 0 280px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px;
    min-height: 180px;
    transition: background 0.15s;
}
.kanban-col.drag-over {
    background: rgba(197, 165, 114, 0.15);
    outline: 2px dashed var(--champagne);
}
.kanban-col-head {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kanban-col-head .label {
    color: #cdbb98;
}
.kanban-col-head .count {
    background: rgba(197, 165, 114, 0.15);
    color: var(--champagne);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
}
.kanban-cards {
    min-height: 100px;
}
.lead-card {
    background: #1f2230;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--champagne);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: grab;
    transition: transform 0.1s;
}
.lead-card:active { cursor: grabbing; }
.lead-card.dragging {
    opacity: 0.45;
    transform: scale(0.98);
}
.lead-card .title {
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    margin-bottom: 4px;
}
.lead-card .meta {
    font-size: 11px;
    color: #a4a4a4;
}
.lead-card .bote {
    font-size: 11px;
    color: var(--champagne);
    margin-top: 4px;
}

/* ============================================================================
   SPRINT 6 — Dashboard boats: grid rectangular + modal de editar con horario
   ============================================================================ */

.boats-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.boats-topbar h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.boat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.boat-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 96px;
}
.boat-card:hover {
    border-color: var(--neon-cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 217, 255, 0.18);
}
.boat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.boat-card-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boat-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
/* Sin caja: solo el icono. Ver .icon-btn. */
.boat-icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    padding: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}
.boat-icon-btn svg {
    width: 20px;
    height: 20px;
}
.boat-icon-btn:hover {
    background: none;
    color: var(--neon-cyan);
    transform: scale(1.06);
}
.boat-icon-btn.danger:hover {
    background: none;
    color: #ef4444;
}
.boat-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.boat-card-meta span {
    background: rgba(255,255,255,0.06);
    padding: 2px 7px;
    border-radius: 5px;
}

/* Modal: label arriba del input */
.modal-label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.modal-label:first-child { margin-top: 0; }

/* Horario grid */
.horario-grid {
    margin-top: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.horario-row {
    display: grid;
    grid-template-columns: 110px 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}
.horario-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
    user-select: none;
}
.horario-toggle input[type="checkbox"] {
    accent-color: var(--neon-cyan);
    width: 16px;
    height: 16px;
}
.horario-row input[type="time"] {
    padding: 5px 8px !important;
    font-size: 13px !important;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 6px;
    color-scheme: dark;
}
.horario-row input[type="time"]:disabled {
    opacity: 0.35;
}
.horario-sep {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================================================
   SPRINT 6 — Puertos + botes con iconos blancos finos (Lucide-style)
   ============================================================================ */

.puertos-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.puertos-topbar h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Box de Puerto */
.puerto-box {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.30);
    overflow: hidden;
}
.puerto-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--glass-border);
}
.puerto-box-pin {
    color: var(--neon-cyan);
    display: flex;
    align-items: center;
}

/* El SVG del juego compartido viene sin width/height (ver
   /shared/axia-icons.js). Sin esta regla el icono de la carpeta colapsaba a
   0x0 dentro del flex y no se veia. */
.puerto-box-pin svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.puerto-box-name {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.puerto-box-actions {
    display: flex;
    gap: 4px;
}
.puerto-boats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 16px 20px;
}

/* Card de Bote (dentro del box del puerto) */
.boat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 88px;
}
.boat-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: var(--neon-cyan);
    transform: translateY(-2px);
}
.boat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.boat-card-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boat-card-actions {
    display: flex;
    gap: 2px;
}
.boat-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.boat-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}
.boat-meta-item svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.75;
    opacity: 0.75;
    flex-shrink: 0;
}

/* Icono blanco fino (Lucide-style), suelto: sin caja de boton. El cuadrado
   con borde alrededor del lapiz y la papelera hacia que el icono se leyera
   descentrado; ahora es solo el icono, mas grande, y lo unico que cambia al
   pasar por encima es el color. Mismo criterio que .axia-settings-icon. */
.icon-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.72);
    width: 30px;
    height: 30px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.18s ease;
}
.icon-btn:hover {
    background: none;
    color: #fff;
}
.icon-btn.danger:hover {
    background: none;
    color: #ef4444;
}
/* El tamano y el trazo salen de aca y de /shared/axia-icons.js: los SVG del
   juego compartido vienen sin width/height y con stroke-width 2. */
.icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Card "Agregar Bote" — botón grande ghost */
.add-boat-card {
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.18);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.add-boat-card:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 217, 255, 0.05);
}
.add-boat-card svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
}

/* ============================================================================
   SHELL SIN SIDEBAR — tabs de sección para módulos nuevos (ej. Finanzas)
   Reemplazan el <aside class="sidebar"> por una fila horizontal de tabs
   debajo del .main-header, usando el mismo glass/neon que el resto de Grello.
   ============================================================================ */

.module-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3px 10px;
    margin-left: 4px;
}

.section-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
    scrollbar-width: thin;
    position: sticky;
    top: 57px;
    z-index: 90;
}

.tab {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

.tab:hover {
    color: var(--text-primary);
    border-color: var(--glass-border);
}

.tab.active {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-accent-border);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

/* Mismo criterio que .module-link.locked de mas abajo: una seccion que la
   empresa no tiene contratada se ve (grisada) pero no se puede abrir. Sin
   icono de candado a pedido del dueño de la cuenta (2026-09-13) -- el
   title (ver tabs.js) sigue explicando el motivo al pasar el mouse. */
.tab.locked {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tarjetas de KPI (Resumen financiero, etc.) — mismo glass que .board-card */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all var(--transition-normal);
}

.metric-card:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.15);
    transform: translateY(-2px);
}

.metric-card .metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.metric-card .metric-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.metric-card .metric-delta {
    font-size: 12px;
    font-weight: 600;
}

.metric-card .metric-delta.up {
    color: var(--success);
}

.metric-card .metric-delta.down {
    color: var(--danger);
}

/* Tabla y listas de datos — mismo glass que .puerto-box, para Ventas/Productos/Compras/etc. */
.data-table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.data-table td {
    padding: 12px 20px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
}

.data-table td.num {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 600;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.status-pill.ok { background: rgba(6, 255, 165, 0.12); color: var(--success); }
.status-pill.warn { background: rgba(255, 189, 77, 0.12); color: var(--warning); }
.status-pill.bad { background: rgba(255, 77, 109, 0.12); color: var(--danger); }
.status-pill.info { background: rgba(0, 255, 255, 0.10); color: var(--neon-cyan); }

.mini-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 18px 20px;
}

.mini-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.mini-card h4 {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-primary);
}

.mini-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.mini-card .mini-value {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--neon-cyan);
}

/* Workspace AI — panel tipo chat */
.ai-chat-mock {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-msg {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.ai-msg.bot {
    align-self: flex-start;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.ai-msg.user {
    align-self: flex-end;
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
    color: var(--neon-cyan);
    font-weight: 500;
}

/* Configuración — mock de formulario */
.settings-form-mock {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
}

.settings-form-mock label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.settings-form-mock input,
.settings-form-mock select {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text-primary);
    font-size: 13px;
}

/* ============================================================================
   AXIA — LAUNCHER DE MÓDULOS
   Pantalla de entrada: una tarjeta por módulo contratado. Los módulos que el
   plan del cliente no incluye se pintan con candado y sin acción (.locked).
   ============================================================================ */

.axia-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    position: relative;
}

/* Velo suave detrás del contenido.
   El launcher y el login son las dos pantallas con contenido apoyado directo
   sobre la foto de fondo, sin el respaldo del chrome de la app. En las zonas
   claras de la foto (los rosas y celestes del centro) el texto secundario se
   perdía, y aclarar más el gris no lo arregla: empeora el contraste contra un
   fondo claro. Este degradado radial oscurece solo el centro y se desvanece
   hacia los bordes, así que el texto siempre cae sobre algo oscuro y la foto
   sigue viéndose en todo el resto.

   Va en estos contenedores y no en .login-page porque el ::before y el ::after
   de esa clase ya los usan los orbes de neón de Grello. */
.axia-page::before,
.axia-login-wrap::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 65% at 50% 50%,
        rgba(10, 14, 39, 0.62) 0%,
        rgba(10, 14, 39, 0.38) 55%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

.axia-wrap {
    max-width: 980px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Unico encabezado del launcher: antes venia un h1 ("Un panel, tres modulos")
   y un subtitulo de venta debajo. El margen de abajo es el que traia el
   subtitulo, que era el que separaba el encabezado de las tarjetas. */
.axia-eyebrow {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    margin: 0 0 32px;
    line-height: 0;
}

.axia-eyebrow img {
    width: 200px;
    max-width: 70%;
    height: auto;
}

/* Engranaje suelto arriba a la derecha del launcher. Va fixed y fuera de
   .axia-page porque esa capa esta centrada vertical y horizontalmente: dentro
   quedaria arrastrado al centro con el resto. */
.axia-page-actions {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.axia-page-actions .axia-lang-switch { display: flex; }
.axia-page-actions .axia-language-trigger { border-radius: 9px; }

.axia-lang-switch { position: relative; display: inline-flex; align-items: center; z-index: 10001; }
.axia-language-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 38px; min-height: 38px; padding: 8px; border: 1px solid var(--glass-border);
    border-radius: 11px; color: var(--text-secondary); background: var(--glass-bg-heavy);
    font: inherit; cursor: pointer; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.axia-language-trigger:hover { color: var(--neon-cyan); border-color: var(--glass-accent-border); }
.axia-language-trigger svg { width: 18px; height: 18px; flex: none; }
.axia-language-trigger .axia-language-chevron { width: 12px; height: 12px; opacity: .72; }
.axia-language-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 10002; min-width: 154px;
    padding: 5px; border: 1px solid var(--glass-border); border-radius: 12px;
    color: var(--text-primary); background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur); box-shadow: 0 14px 38px rgba(0,0,0,.3);
}
.axia-language-menu[hidden] { display: none !important; }
.axia-language-option {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 8px; color: inherit; background: transparent;
    font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.axia-language-option:hover, .axia-language-option[aria-selected="true"] {
    color: var(--neon-cyan); background: var(--glass-accent-bg);
}
.axia-language-option-code { font-size: 10px; font-weight: 700; opacity: .72; }
.axia-language-trigger:focus-visible, .axia-language-option:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }


.axia-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 820px) {
    .axia-modules { grid-template-columns: 1fr; }
}

.axia-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all var(--transition-normal);
}

.axia-card:not(.locked):hover {
    transform: translateY(-4px);
    border-color: var(--neon-cyan);
    box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.18);
}

/* Módulo no contratado: atenuado, sin hover, con candado arriba a la derecha. */
.axia-card.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: saturate(0.35);
}

.axia-card.locked::after {
    content: '🔒';
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 16px;
    opacity: 0.8;
}

.axia-card.locked * {
    pointer-events: none;
}

.axia-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.axia-icon.assistant { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue)); }
.axia-icon.growth { background: linear-gradient(135deg, var(--neon-purple), var(--neon-magenta)); }
.axia-icon.collections { background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); }
.axia-card.locked .axia-icon { background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); }

.axia-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text-primary);
}

.axia-card p {
    /* 36px = los 22 que tenia mas los 14 del precio, que ya no esta: sin esto
       el boton quedaba pegado a la descripcion. */
    margin: 0 0 36px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    flex-grow: 1;
}

.axia-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.axia-card:not(.locked) .axia-cta {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--neon-cyan);
    border: 1px solid var(--glass-accent-border);
}

.axia-badge {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(0, 255, 255, 0.10);
    color: var(--neon-cyan);
    margin-bottom: 12px;
}

.axia-card.locked .axia-badge {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

/* Punto de venta: tarjeta ancha bajo los modulos, toda la fila y un cuarto
   del alto de una tarjeta (--axia-card-q lo calcula index.html). Hereda el
   vidrio, hover y candado de .axia-card; solo cambia a fila horizontal. */
.axia-card.axia-wide-card {
    grid-column: 1 / -1;
    height: max(64px, var(--axia-card-q, 80px));
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
}
.axia-wide-card .axia-icon { margin: 0; flex-shrink: 0; width: 40px; height: 40px; font-size: 20px; }
.axia-wide-text { flex: 1; min-width: 0; }
.axia-card.axia-wide-card h3 { margin: 0 0 2px; font-size: 16px; }
.axia-card.axia-wide-card p { margin: 0; flex-grow: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.axia-wide-card .axia-badge { margin: 0; align-self: center; flex-shrink: 0; }
.axia-card.axia-wide-card.locked::after { top: 50%; transform: translateY(-50%); right: 20px; }
.axia-wide-card.locked .axia-badge { margin-right: 28px; }
.axia-icon.pos { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); }

.axia-suite-note {
    text-align: center;
    margin-top: 28px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.axia-suite-note strong {
    color: var(--neon-cyan);
}

/* Movil: los tres modulos tienen que caber sin scroll. Trade-off: cada
   tarjeta pasa a fila (icono a la izquierda, texto a la derecha), la
   descripcion se corta a dos lineas y se esconde el boton: la tarjeta entera
   ya es el enlace. Los bloqueados se siguen distinguiendo por candado+badge. */
@media (max-width: 820px) {
    .axia-page { padding: 64px 16px 20px; align-items: flex-start; }
    .axia-eyebrow { margin-bottom: 18px; }
    .axia-eyebrow img { width: 150px; }
    .axia-modules { gap: 12px; }
    .axia-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 16px;
        border-radius: 16px;
    }
    .axia-card > * { grid-column: 2; }
    .axia-card > .axia-icon { grid-column: 1; grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
    .axia-card .axia-badge { margin-bottom: 6px; justify-self: start; }
    .axia-card h3 { font-size: 16px; margin-bottom: 4px; }
    .axia-card p {
        margin: 0;
        font-size: 12.5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .axia-card .axia-cta { display: none; }
    .axia-card.locked::after { top: 14px; right: 14px; font-size: 14px; }
    .axia-card.axia-wide-card { display: flex; padding: 0 16px; gap: 12px; }
    .axia-card.axia-wide-card > * { grid-column: auto; }
    .axia-wide-card .axia-badge { display: none; }
    .axia-card.axia-wide-card.locked::after { top: 50%; right: 14px; }
    .axia-suite-note { margin-top: 18px; }
}

/* Quién está logueado + salir, al pie del launcher. */
.axia-whoami {
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 5px 14px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.axia-whoami:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* ============================================================================
   AXIA — SWITCHER DE MÓDULOS EN EL HEADER
   Vive dentro de .main-header, a la derecha del logo. Mismo lenguaje visual
   que .tab, pero con el candado de gating.
   ============================================================================ */

.module-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--glass-border);
}

.module-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    /* 4px arriba y abajo, no 6: el nombre pasó a ocupar dos líneas (ver
       renderModuleName en axia-modules.js) y con el padding viejo el header
       crecía y se despegaba de la barra de pestañas, que se pega a 57px. */
    padding: 4px 12px;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

/* El nombre del módulo, una palabra por línea. Lo pinta renderModuleName() de
   axia-modules.js, y se usa en dos lados con tamaños distintos: la tira del
   header y el título de las tarjetas del launcher (index.html). Por eso el
   layout va suelto y el tamaño compacto va abajo, atado al switcher. */
.module-link-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* 11px con interlineado corto: dos líneas así miden lo mismo que medía una
   sola de 13px con el interlineado del body, así que la altura del header no
   se mueve y la barra de pestañas sigue calzando en su top: 57px. */
.module-link .module-link-name {
    font-size: 11px;
    letter-spacing: 0.01em;
}

.module-link:hover {
    color: var(--text-primary);
    border-color: var(--glass-border);
}

.module-link.active {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-accent-border);
    color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.module-link.locked {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.module-link.locked::after {
    content: '🔒';
    font-size: 11px;
}

@media (max-width: 720px) {
    .module-switcher {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .module-link { padding: 4px 9px; font-size: 12px; }
}

/* ============================================================================
   EMPRESA ACTIVA — selector de plataforma en el header
   ----------------------------------------------------------------------------
   Estaba en el sidebar de Growth, pero la empresa activa no es de Growth: un
   cliente puede tener los tres modulos y tiene que ver lo suyo en todos. Solo
   lo monta el header cuando el usuario es admin (ver axia-company.js).
   ============================================================================ */

.axia-company-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--glass-border);
}

.axia-company-logo {
    /* Marca de agua de la empresa activa: abajo a la izquierda, grande y tenue.
       Va en <body> (no en el header) para que position:fixed no quede atrapado
       por el backdrop-filter del glass. */
    position: fixed;
    left: 24px;
    bottom: 24px;
    /* Caja fija: cualquier logo se ajusta (contain) a la misma medida sin
       importar su tamano o proporcion original. */
    width: 210px;
    height: 80px;
    object-fit: contain;
    object-position: left bottom;
    opacity: 0.14;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.axia-company-logo[hidden] { display: none; }

.axia-company-picker-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.axia-company-picker-select {
    /* appearance:none es necesario: con el control nativo macOS lo pinta claro
       e ignora el fondo de glass. Misma solucion que el switcher de Growth. */
    appearance: none;
    -webkit-appearance: none;
    max-width: 190px;
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.axia-company-picker-select:focus {
    outline: none;
    border-color: var(--neon-cyan);
}

.axia-company-picker-select option {
    background: var(--dark-700);
    color: var(--text-primary);
}

/* ============================================================================
   AJUSTES — engranaje y modal unico
   ============================================================================ */

/* Icono suelto, sin caja de boton: es lo que se pidio. Solo cambia de color al
   pasar por encima, sin fondo ni borde. */
.axia-settings-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 200ms ease, transform 200ms ease;
}

/* El SVG sale de /shared/axia-icons.js y viene sin width/height: el tamano lo
   pone esta regla. */
.axia-settings-icon svg {
    width: 20px;
    height: 20px;
}

.axia-settings-icon:hover {
    color: var(--neon-cyan);
    transform: rotate(25deg);
}

.axia-settings-icon:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
    border-radius: 8px;
}

.axia-settings-modal.hidden {
    display: none;
}

/* El modal compartido tambien se abre desde Assistant y Collections, que no
   cargan los componentes CSS de Growth. Por eso su geometria base vive aca y
   no depende de .product-modal/.product-field definidos por otro modulo. */
.axia-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Es el fondo de TODA la pantalla detras del popup, no una superficie de
   vidrio propia: ni tinte de color ni velo. Antes atenuaba con un negro al
   55% y oscurecia el modulo entero; ahora solo desenfoca. */
.axia-settings-modal .product-modal-backdrop {
    position: absolute;
    inset: 0;
    background: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.axia-settings-modal .axia-settings-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1120px, calc(100vw - 48px));
    height: min(1020px, calc(100vh - 48px));
    height: min(1020px, calc(100dvh - 48px));
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    /* Antes 0.94 de opacidad — casi solido, con el blur solo asomando en el
       6% restante. Bajado para que lea como vidrio de verdad. */
    background: rgba(15, 20, 53, 0.4);
    /* Era 0.6 de negro: sin el velo del backdrop, una sombra tan dura vuelve a
       ensuciar todo lo que rodea a la tarjeta. */
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3), var(--shadow-purple);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.axia-settings-modal .section-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.axia-settings-modal .section-head h3 {
    margin: 0 0 2px;
    font-size: 18px;
}

.axia-settings-modal .muted {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.axia-settings-modal .product-action {
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.axia-settings-modal .product-action:hover {
    border-color: var(--neon-cyan);
}

.axia-settings-modal .product-action.icon {
    width: 36px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
}

.axia-settings-modal .product-action.primary {
    border-color: var(--glass-accent-border);
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--neon-cyan);
}

/* Especificidad (0,3,0) a proposito: growth/assets/css/axia-theme.css fija los
   modales en 560px con .product-modal > .product-modal-card (0,2,0) y carga
   DESPUES de este archivo, asi que a igual especificidad ganaria el. Este modal
   lleva riel + panel y necesita mas ancho. */
.product-modal.axia-settings-modal > .product-modal-card.axia-settings-card {
    width: clamp(min(960px, calc(100vw - 48px)), 80vw, calc(100vw - 48px));
    height: min(920px, calc(100vh - 48px));
    height: min(920px, calc(100dvh - 48px));
    max-height: none;
}

/* Riel de secciones a la izquierda y panel a la derecha, dentro de la misma
   tarjeta: un solo modal para todos los ajustes. */
.axia-settings-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 16px;
    overflow: hidden;
}

.axia-settings-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 12px;
    border-right: 1px solid var(--glass-border);
}

.axia-settings-rail-item {
    display: grid;
    gap: 1px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 200ms ease;
}

.axia-settings-rail-item:hover {
    border-color: var(--glass-border);
    color: var(--text-primary);
}

.axia-settings-rail-item.active {
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: var(--glass-accent-border);
    color: var(--neon-cyan);
}

/* "empresa" o "plataforma": deja claro a que alcanza cada seccion, que es la
   duda que aparece al juntar ajustes de los dos tipos en un mismo modal. */
.axia-settings-rail-scope {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.7;
}

.axia-settings-panel {
    min-width: 0;
    min-height: 0;
    padding-right: 4px;
    /* auto y no hidden: con el motor de IA y el system prompt en la misma
       pestana el contenido puede pasar el alto del modal en una pantalla
       baja, y hidden lo dejaba recortado sin forma de llegar. En el eje X
       sigue cortado: nada tiene que scrollear de costado. */
    overflow-x: hidden;
    overflow-y: auto;
}

.axia-settings-hint {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.axia-settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
}

.axia-settings-modal .product-form-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.axia-settings-modal .product-form-section-title {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
}

.axia-settings-modal .product-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.axia-settings-modal .product-field input,
.axia-settings-modal .product-field select,
.axia-settings-modal .product-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    outline: none;
    /* Mas transparente que --glass-bg (30% navy) a proposito: es la
       superficie que mas se toca en el modal (todos los inputs, en todas
       las pestanas), asi que es donde mas se nota si no es vidrio de
       verdad. Blanco neutro y bien liviano en vez del tinte navy, para que
       no vuelva a leerse como un bloque de color aparte. Antes era
       rgba(10,14,39,0.72) sin blur (un rectangulo solido, no vidrio). */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
    font: inherit;
    font-weight: 400;
    line-height: 1.4;
}

.axia-settings-modal .product-field textarea {
    min-height: 58px;
    height: 58px;
    resize: vertical;
}

/* Contexto: 3 x 3. Marca: una fila. Agentes: 4 x 2. Esta distribucion hace
   que la seccion mas extensa entre completa y evita que el tamano del modal
   cambie al pasar de una pestana a otra. */
.axia-settings-modal .product-form-section:nth-child(2),
.axia-settings-modal .product-form-section:nth-child(3) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.axia-settings-modal .product-field input:focus,
.axia-settings-modal .product-field select:focus,
.axia-settings-modal .product-field textarea:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
}

/* growth/assets/css/axia-theme.css pinta .product-form-actions (0,1,0) como una
   barra sticky con fondo propio y borde arriba, y carga DESPUES de este archivo.
   Adentro de este modal esa barra se leia como un bloque solido cruzando el
   vidrio, asi que aca el pie queda sin fondo: solo el boton. */
.axia-settings-modal .product-form-actions {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    border-top: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* El estado del guardado comparte fila con el boton, pegado a la izquierda. */
.axia-settings-modal .axia-settings-actions-note {
    margin-right: auto;
}

/* Hint, status y pie ocupan la fila entera de la grilla de la seccion. */
.axia-settings-modal .axia-settings-span {
    grid-column: 1 / -1;
}

/* Logo de la empresa (renderGeneralSection): la miniatura, el <input type
   file"> nativo (no se puede reestilizar, asi que se deja tal cual en vez de
   esconderlo detras de un boton falso) y el estado, todo en una fila. */
.axia-settings-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* El boton nativo del input file, mas chico y en el tema glass. */
.axia-settings-logo-row input[type="file"] {
    font-size: 11px;
    max-width: 230px;
    color: var(--text-secondary);
}

.axia-settings-logo-row input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 4px 10px;
    font: inherit;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    cursor: pointer;
}

.axia-settings-logo-row input[type="file"]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Facturacion electronica: switch arriba; las llaves solo aparecen encendido. */
.axia-settings-modal .product-form-section.axia-settings-einvoice {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.axia-settings-billing-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Boton que se queda presionado: normal en verde, electronico en azul-violeta. */
.axia-settings-billing-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    text-align: left;
    color: var(--text-secondary);
    font: inherit;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.axia-settings-billing-choice strong { color: var(--text-primary); font-size: 14px; }
.axia-settings-billing-choice span { font-size: 12px; line-height: 1.35; }
.axia-settings-billing-choice:hover { background: rgba(255, 255, 255, 0.1); }

.axia-settings-billing-choice.is-on.normal {
    background: linear-gradient(135deg, rgba(73, 199, 162, 0.3), rgba(120, 207, 255, 0.2));
    border-color: rgba(160, 240, 220, 0.6);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 14px rgba(73, 199, 162, 0.2);
}

.axia-settings-billing-choice.is-on.electronic {
    background: linear-gradient(135deg, rgba(99, 120, 255, 0.34), rgba(168, 120, 255, 0.24));
    border-color: rgba(170, 180, 255, 0.65);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 14px rgba(120, 130, 255, 0.24);
}

@media (max-width: 760px) {
    .axia-settings-billing-choices { grid-template-columns: minmax(0, 1fr); }
}

.axia-settings-einvoice-panel {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 2px;
}

.axia-settings-einvoice-panel[hidden],
.axia-settings-einvoice-status[hidden] { display: none; }

.axia-settings-einvoice-hook {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.axia-settings-einvoice-hook .product-field { flex: 1; }

.axia-settings-einvoice-status {
    margin: 0;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid var(--glass-border);
}

.axia-settings-einvoice-status.ok { border-color: rgba(37, 211, 102, 0.45); background: rgba(37, 211, 102, 0.12); }
.axia-settings-einvoice-status.warn { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.12); }

@media (max-width: 760px) {
    .axia-settings-einvoice-panel { grid-template-columns: minmax(0, 1fr); }
}

/* Linea que separa el bloque API44 del resto de Datos de facturacion. */
.axia-settings-divider {
    grid-column: 1 / -1;
    height: 0;
    margin: 6px 0 2px;
    border-top: 1px solid var(--glass-border);
}

.axia-settings-logo-preview {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    padding: 4px;
}

/* ============================================================================
   PIN de admin (Motor de IA / OpenAI key por empresa cuando el rol no
   alcanza) — icono de candado + popup de 4 casillas.
   ============================================================================ */

/* Candado cerrado: mismo tratamiento que un boton de icono suelto
   (.product-action.icon en collections.css), sin caja ni fondo — solo el
   glifo, que cambia de color al pasar el mouse. */
.axia-pin-lock-btn {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-normal);
}

.axia-pin-lock-btn svg {
    width: 18px;
    height: 18px;
}

.axia-pin-lock-btn:hover {
    color: var(--neon-cyan);
}

/* Candado abierto junto al titulo de una seccion ya desbloqueada por PIN —
   decorativo, no es un boton (no dispara nada al clickear). */
.axia-pin-badge {
    display: inline-flex;
    margin-left: 6px;
    color: var(--success);
    vertical-align: middle;
}

.axia-pin-badge svg {
    width: 14px;
    height: 14px;
}

/* Las 4 casillas del PIN: un digito cada una, grandes y centradas — la
   letra tiene que leerse de lejos, no es un input de formulario mas. */
.axia-pin-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px 0;
}

.axia-pin-box {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    background: var(--dark-600, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
}

.axia-pin-box:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: var(--shadow-cyan);
}

.axia-pin-box:disabled {
    opacity: 0.5;
}

/* El SVG de AxiaIcons viene sin width/height a proposito (lo decide la hoja
   de estilos que cargue cada pagina — ver shared/axia-icons.js). El popup de
   PIN puede abrirse desde Assistant, Growth o Collections, y no todos
   definen el tamano de ".product-action.icon svg" (esa regla vive suelta en
   growth/components.css y collections.css, cada uno por su lado) — sin esto
   el icono de cerrar quedaba con el tamano por default del navegador para un
   SVG sin dimensiones, gigante. Se fija aca, en el archivo compartido que
   cargan los tres, para no depender de cual pagina lo abrio. */
.axia-pin-modal .product-action.icon svg {
    width: 20px;
    height: 20px;
}

/* Las secciones de la pestana IA fijan sus columnas para no caer en la regla
   de nth-child(2)/(3) (0,3,0) que reparte 4 columnas en "IA por empresa". */
.axia-settings-modal .product-form-section.axia-settings-engine-section,
.axia-settings-modal .product-form-section.axia-settings-prompt-section {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* General is intentionally dense: billing, sender and timezone fit in three
   columns so the common setup is visible without a second scroll area. */
.axia-settings-modal .product-form-section.axia-settings-2col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.axia-settings-general-section .axia-settings-hint,
.axia-settings-google-section .axia-settings-hint {
    font-size: 11px;
}

.axia-settings-google-section {
    align-items: center;
}

.axia-settings-google-section .product-form-section-title {
    grid-column: 1 / 2;
}

.axia-settings-google-status {
    color: var(--text-secondary);
    font-size: 12px;
}

.axia-settings-prompt-box {
    grid-column: 1 / -1;
    max-height: 320px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* --- WhatsApp: una tarjeta por sesion ------------------------------------
   El estado (conectada, vinculando, caida) se lee del color del icono, del
   borde y del pill, no de un parrafo de texto: es lo primero que se mira al
   entrar a la pestana. */
.axia-settings-wa-grid {
    display: grid;
    /* min(300px, 100%) y no 300px a secas: en un panel mas angosto que eso
       (movil) la columna forzaba scroll horizontal. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
}

.axia-settings-wa-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    /* Las tarjetas de una fila crecen todas al alto de la mas alta (la que
       muestra el QR). Sin esto el contenido de las cortas quedaba flotando
       en el medio del hueco en vez de arrancar arriba. */
    align-content: start;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 200ms ease, background 200ms ease;
}

.axia-settings-wa-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    transition: background 200ms ease, color 200ms ease;
}

.axia-settings-wa-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.axia-settings-wa-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axia-settings-wa-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.axia-settings-wa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* La columna del icono queda vacia debajo: el cuerpo arranca alineado con el
   titulo, no con el borde de la tarjeta. */
.axia-settings-wa-body {
    display: grid;
    grid-column: 2 / -1;
    min-width: 0;
    gap: 8px;
}

.axia-settings-wa-phone {
    margin: 0;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.axia-settings-wa-detail {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Switch de la tarjeta "Ventas": abierto a todos vs. solo Numeros permitidos.
   Checkbox real debajo (accesible, togglea con teclado) pintado como un
   slider — el checkbox se esconde visualmente pero sigue foco-eable. */
.axia-settings-wa-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.axia-settings-wa-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.axia-settings-wa-switch-slider {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 150ms ease, border-color 150ms ease;
}

.axia-settings-wa-switch-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 150ms ease, background 150ms ease;
}

.axia-settings-wa-switch input:checked + .axia-settings-wa-switch-slider {
    border-color: rgba(37, 211, 102, 0.5);
    background: rgba(37, 211, 102, 0.25);
}

.axia-settings-wa-switch input:checked + .axia-settings-wa-switch-slider::before {
    background: #25d366;
    transform: translateX(14px);
}

/* Picker de disponibilidad (Ajustes > Agente de Ventas): una columna por
   dia (Lun a Dom, todas visibles sin scroll), cada una con cero o mas
   segmentos de horario propios (ej. manana y tarde separadas) y un "+" para
   sumar otro. Ver buildAvailabilityField en shared/axia-settings.js. El
   valor real que se guarda vive en un <input type="hidden">, no hay
   textarea visible. */
.axia-availability-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.axia-availability-table {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
}

.axia-availability-day-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 6px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.axia-availability-day-abbr {
    align-self: center;
    font-size: var(--fs-body, 13px);
    font-weight: 600;
    color: var(--text-secondary, var(--text-muted));
}

.axia-availability-segments {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.axia-availability-segment {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 16px 4px 4px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
}

.axia-availability-segment select {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.axia-availability-segment-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.axia-availability-segment-remove:hover {
    color: var(--danger, #ef4444);
}

.axia-availability-day-add {
    width: 100%;
    padding: 3px 0;
    border: 1px dashed var(--glass-border);
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.axia-availability-day-add:hover {
    border-color: var(--neon-cyan);
    color: var(--text-secondary, var(--text-muted));
}

.axia-settings-wa-switch input:focus-visible + .axia-settings-wa-switch-slider {
    outline: 2px solid var(--accent-color, #7dd3fc);
    outline-offset: 2px;
}

.axia-settings-wa-switch-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.axia-settings-wa-qr {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

.axia-settings-wa-qr img {
    width: 180px;
    height: 180px;
    padding: 8px;
    border-radius: 10px;
    background: #fff;
}

.axia-settings-wa-qr-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

/* Conectada: verde de WhatsApp. */
.axia-settings-wa-card.is-online {
    border-color: rgba(37, 211, 102, 0.4);
    background: rgba(37, 211, 102, 0.07);
}

.axia-settings-wa-card.is-online .axia-settings-wa-avatar {
    background: rgba(37, 211, 102, 0.16);
    color: #25d366;
}

.axia-settings-wa-card.is-online .axia-settings-wa-pill {
    border-color: rgba(37, 211, 102, 0.4);
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
}

/* Vinculando: ambar, hay algo que hacer (escanear el QR). */
.axia-settings-wa-card.is-pairing {
    border-color: rgba(234, 179, 8, 0.4);
    background: rgba(234, 179, 8, 0.06);
}

.axia-settings-wa-card.is-pairing .axia-settings-wa-avatar {
    background: rgba(234, 179, 8, 0.16);
    color: #eab308;
}

.axia-settings-wa-card.is-pairing .axia-settings-wa-pill {
    border-color: rgba(234, 179, 8, 0.4);
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
}

/* Caida: rojo. El bot no esta contestando. */
.axia-settings-wa-card.is-error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}

.axia-settings-wa-card.is-error .axia-settings-wa-avatar {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
}

.axia-settings-wa-card.is-error .axia-settings-wa-pill {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.axia-settings-modal .product-form-status {
    min-height: 18px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.axia-settings-modal .config-list {
    display: grid;
    gap: 8px;
}

/* Fila para agregar un número a la lista de excepciones de WhatsApp: dos
   campos + botón, uno al lado del otro salvo que no entren (movil). */
.axia-settings-modal .axia-settings-wa-number-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.axia-settings-modal .axia-settings-wa-number-form .product-field {
    flex: 1;
    min-width: 140px;
}

.axia-settings-modal .config-row,
.axia-settings-modal .ai-settings-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.axia-settings-modal .ai-settings-group {
    align-items: flex-start;
    flex-direction: column;
}

.axia-settings-modal .config-row-copy {
    display: grid;
    gap: 2px;
}

.axia-settings-modal .config-row-copy small,
.axia-settings-modal .config-row-meta {
    color: var(--text-muted);
    font-size: 11px;
}

.axia-settings-modal .config-row-meta {
    margin-left: auto;
}

.axia-settings-pre {
    margin: 0;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
}

@media (max-width: 720px) {
    .axia-settings-modal {
        align-items: stretch;
        padding: 10px;
    }
    .axia-settings-modal .axia-settings-card {
        width: 100%;
        height: 100%;
        max-height: none;
    }
    .axia-settings-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .axia-settings-rail {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 0 10px;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }
    .axia-company-picker {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
    .axia-company-picker-label { display: none; }
    .axia-settings-modal .product-form-section {
        grid-template-columns: minmax(0, 1fr);
    }
    .axia-settings-panel {
        overflow-y: auto;
    }
    .axia-settings-modal .product-form-section:nth-child(2),
    .axia-settings-modal .product-form-section:nth-child(3),
    .axia-settings-modal .product-form-section.axia-settings-engine-section,
    .axia-settings-modal .product-form-section.axia-settings-prompt-section,
    .axia-settings-modal .product-form-section.axia-settings-2col {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Board "Chat IA" — cards escritas por el bot de WhatsApp
   ---------------------------------------------------------------------------
   Van deliberadamente mas apagadas que las tarjetas de tarea: son un registro
   de lo que ya paso, no algo para arrastrar ni completar. Las unicas que
   piden atencion son las pendientes (borde ambar), que son las que esperan
   que una persona conteste algo.
--------------------------------------------------------------------------- */
.bot-cards-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 8px 8px;
}

.bot-card {
    padding: 8px 10px;
    border: 1px solid var(--col-edge, var(--glass-border));
    /* La cinta de la izquierda ya marcaba el tipo de card; ahora ademas es del
       color de la columna, que es de donde viene el resto del tinte. */
    border-left: 3px solid var(--col-color, rgba(255, 255, 255, 0.25));
    border-radius: 8px;
    background: linear-gradient(180deg, var(--col-tint, transparent), var(--col-tint-soft, transparent)),
                rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 12px;
}

.bot-card-head {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.bot-card-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.bot-card-title {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
}

.bot-card-detail {
    margin-top: 4px;
    padding-left: 25px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* Los datos de la operacion (proveedor, total, bodega...). Van como chips y no
   como una linea de texto para que se lean salteados: en una cola larga uno
   busca un dato puntual, no una frase. */
.bot-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-left: 25px;
}

.bot-card-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 10.5px;
    line-height: 1.5;
}

.bot-card-fact em {
    font-style: normal;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
}

.bot-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-left: 25px;
    color: var(--text-muted);
    font-size: 10px;
}

.bot-card-origin {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bot-card.is-pending {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.07);
}

/* Ya atendida: sigue visible como historial, pero deja de competir por la
   atencion con lo que todavia esta abierto. */
.bot-card.is-closed {
    opacity: 0.55;
}

.bot-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-left: 25px;
}

.bot-card-actions button {
    padding: 3px 9px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bot-card-actions button:hover {
    border-color: var(--neon-cyan);
}

/* Muestra de como queda un importe con la moneda elegida. Va con la misma
   caja que los inputs de al lado para que la fila lea pareja, pero sin borde
   de campo editable: es una lectura, no algo que se escribe. */
.axia-settings-currency-sample {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 10px;
    border: 1px dashed var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   Celda de dos lineas (shared/axia-table.js -> cellWithMeta)
   ----------------------------------------------------------------------------
   El dato principal arriba y su contexto en gris debajo: numero de factura +
   sucursal, nombre de cuenta + banco. Es lo unico que sobrevive del layout
   viejo de Growth, donde cada celda repetia su etiqueta ("Fecha", "Items") en
   todas las filas. Acá el gris de abajo es dato, no etiqueta.
---------------------------------------------------------------------------- */

.cell-stack {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cell-stack strong {
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-meta {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fila que abre un detalle al tocarla. */
.data-table tr.is-clickable {
    cursor: pointer;
}

.data-table tr.is-clickable:hover {
    background: var(--glass-bg);
}

/* Las acciones de fila no deben ensanchar su columna ni partirse en dos. */
.data-table td .product-row-actions,
.data-table td .finance-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    white-space: nowrap;
}

/* ============================================================================
   Layout de gestion: tabla grande + columna lateral
   ============================================================================
   El patron que usan Cuentas de Collections (cuentas | bancos + monedas) y
   Productos de Growth (productos | categorias + bodegas): la tabla ocupa el
   ancho y a la derecha van una o dos listas cortas que la agrupan.

   Vivia en collections.css con nombres .finance-*. Se mudo aca con nombres
   neutros cuando Growth adopto el mismo aspecto — no hay nada financiero en
   una lista de categorias, y tener el mismo CSS dos veces garantiza que se
   separen con el primer arreglo que alguien haga en una sola.
============================================================================ */

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
}

/* Debajo de 1100px la columna lateral no entra al lado sin espichar la tabla:
   pasa abajo, a lo ancho. */
@media (max-width: 1100px) {
    .split-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .split-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.split-side {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* --- Listas laterales (una categoria, un banco, una bodega, una moneda) --- */

.side-list {
    display: grid;
    gap: 6px;
}

.side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
}

/* min-width 0 para que un nombre largo se recorte en vez de empujar los
   botones fuera de la tarjeta. */
.side-row-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.side-row-main strong {
    font-size: 0.82rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-row-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Lo marcado por defecto (la moneda predeterminada, la bodega por defecto) se
   ve en la fila, no escondido en un modal: es lo que preselecciona el
   formulario de alta. */
.side-row.is-default {
    border-color: var(--glass-accent-border);
    background: var(--glass-accent-bg);
}

.side-row-actions {
    display: flex;
    gap: 4px;
    flex: none;
}

/* --- Cajas de total ------------------------------------------------------- */
/* Se muestran como cajas separadas y nunca como una suma: los totales por
   moneda no se cruzan (no hay tipo de cambio en el sistema). */

.totals-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.total-box {
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg);
    min-width: 140px;
}

.total-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.total-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Entrada en verde, salida en rojo: el signo solo no alcanza en una tabla
   larga leida de reojo. */
.amount-in { color: var(--success); }
.amount-out { color: var(--danger); }

/* ============================================================================
   Tarjeta de tabla
   ============================================================================
   El contenedor de las tablas de datos. Es el mismo tratamiento de
   .puerto-box, con el que Collections envuelve las suyas, escrito como clase
   propia para que Growth pueda usarlo sin heredar el resto del vocabulario de
   "puertos" (que viene de Grello y no significa nada en Growth).

   Que resuelve, comparado con la .section-card.panel que usaba Growth:

   - Sin capa doble. .panel dibuja un ::before con inset:1px encima del fondo,
     y con la tabla adentro se veia como una caja dentro de otra caja.
   - Padding cero. .section-card acolcha por dentro, asi que la banda oscura
     del <thead> quedaba flotando con margen a los lados en vez de llegar a
     los bordes. Con overflow:hidden el encabezado toma el radio de la
     tarjeta.
   - Fondo --glass-bg en vez de --glass-panel-bg: el mismo de Collections.
============================================================================ */

.data-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

/* La cabecera con el titulo y las acciones (buscador, "por pagina", botones)
   necesita su propio acolchado, porque la tarjeta ya no lo pone. Mismos
   valores que .puerto-box-header. */
.data-panel > .section-head {
    padding: 16px 20px;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--glass-border);
}

/* El estado vacio y los mensajes sueltos si van acolchados: sin esto quedan
   pegados al borde de la tarjeta. */
.data-panel > .product-form-status:not(:empty),
.data-panel > .empty-state,
.data-panel > .section-card {
    padding: 16px 20px;
}

/* Estado vacio adentro de la tarjeta de tabla: solo el texto.
 *
 * createEmptyState() de Growth devuelve una <article class="section-card panel">
 * —vidrio azul, borde y sombra propios— con adentro un .empty-state de borde
 * punteado y un cuadrado gris de 40px. Suelto, al nivel de la pagina, esta
 * bien: es la tarjeta que reemplaza al contenido. Pero Compras, Proveedores y
 * Reportes lo meten DENTRO del .data-panel, y ahi se veian dos cajas anidadas
 * (y una tercera punteada) sobre el vidrio de la tarjeta, mientras Ventas,
 * Sucursales y Usuarios no pintan ninguna.
 *
 * Aca adentro la tarjeta ya es el .data-panel, asi que al hijo se le saca todo
 * el cromo y queda el mensaje centrado, como el .collections-empty de
 * Movimientos. Fuera del .data-panel la tarjeta sigue intacta. */
/* Los tres selectores dicen lo mismo a proposito: growth/assets/css/base.css
   repinta .panel en modo claro con `body[data-bg-mode="light"] .panel` y
   components.css le devuelve la sombra en :hover, las dos con mas peso que un
   `.data-panel > .section-card` pelado. */
.data-panel > .section-card,
.data-panel > .section-card.panel,
.data-panel > .section-card:hover {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.data-panel > .section-card::before,
.data-panel > .section-card.panel::before {
    display: none;
}

.data-panel .empty-state {
    background: none;
    border: 0;
    /* Sin el min-height: 200px del bloque suelto: adentro de la tarjeta el
       mensaje mide lo que mide, igual que en Movimientos. El 28 de arriba se
       suma al 16 de la tarjeta y da los 44px de padding del .collections-empty. */
    min-height: 0;
    padding: 28px 20px;
}

.data-panel .empty-state::before {
    display: none;
}

/* Los controles de paginacion cuelgan del wrapper de la tabla, ya dentro de
   la tarjeta. */
.data-panel .list-pagination {
    padding: 10px 20px;
    border-top: 1px solid var(--glass-border);
}

/* Las listas laterales dentro de una tarjeta necesitan su propio acolchado:
   la tarjeta tiene padding 0 para que la banda del <thead> llegue a los
   bordes, pero una lista de filas pegada al borde se ve como un error.
   Se declara para los dos contenedores a la vez para que Bancos/Monedas de
   Collections y Categorias/Bodegas de Growth queden identicas. */
.data-panel > .side-list,
.puerto-box > .side-list {
    padding: 12px;
}

/* Idem para el mensaje de "sin bodegas cargadas" y similares. */
.data-panel > .movements-empty,
.puerto-box > .movements-empty {
    padding: 12px 16px;
    margin: 0;
}

/* ============================================================================
   TUTORIALES — boton del header, menu, cursor falso y globo
   ============================================================================ */
.axia-tutorials-wrap { position: relative; display: inline-flex; }
.axia-tutorials-menu {
    position: fixed; right: 16px; z-index: 1000;
    /* Ancho de casi toda la pantalla (hasta 1840 px: 8 columnas en monitores grandes).
       Si el contenido no cabe en el alto de la ventana, el menu scrollea por dentro
       (antes se cortaba abajo y habia tutoriales inalcanzables); el buscador queda fijo. */
    width: min(1840px, calc(100vw - 32px)); padding: 14px;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.axia-tutorials-menu::-webkit-scrollbar { width: 8px; }
.axia-tutorials-menu::-webkit-scrollbar-track { background: transparent; }
.axia-tutorials-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; }
/* Las secciones se reparten en columnas de alturas parejas (sin huecos). */
.axia-tutorials-list { column-width: 205px; column-gap: 12px; }
.axia-tutorials-menu.hidden { display: none; }
.axia-tutorials-head {
    /* Fijo arriba mientras se hace scroll: titulo a la izquierda, buscador a la derecha. */
    position: sticky; top: -14px; z-index: 2; margin: -14px -14px 10px; padding: 14px 20px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 16px; font-weight: 600; color: var(--text-primary, #fff); letter-spacing: .01em;
    background: var(--glass-bg-heavy); border-bottom: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.axia-tutorials-search { flex: 0 1 340px; min-width: 200px; }
.axia-tutorials-box {
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    break-inside: avoid; margin-bottom: 12px;
    background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); border-radius: 14px;
}
.axia-tutorials-box[hidden] { display: none; }
.axia-tutorials-group {
    padding: 4px 8px 8px; margin-bottom: 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: var(--neon-cyan, #0ff);
    border-bottom: 1px solid var(--glass-border);
}
.axia-tutorials-item {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 7px 8px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--text-primary, #fff); font: inherit; font-size: 13px; line-height: 1.25; cursor: pointer;
    transition: background 180ms, border-color 180ms, box-shadow 180ms, transform 180ms;
}
.axia-tutorials-item > span:nth-child(2) { flex: 1; }
.axia-tutorials-item em { font-style: normal; font-size: 10px; color: var(--text-secondary); opacity: .8; white-space: nowrap; }
.axia-tutorials-play {
    width: 20px; height: 20px; flex: none; border-radius: 50%; position: relative;
    background: rgba(0,255,255,.12); border: 1px solid rgba(0,255,255,.25); transition: background 180ms, box-shadow 180ms;
}
.axia-tutorials-play::after {
    content: ""; position: absolute; left: 7px; top: 4px;
    border-left: 6px solid var(--neon-cyan, #0ff);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent;
    transition: border-left-color 180ms;
}
.axia-tutorials-item:hover, .axia-tutorials-item:focus-visible {
    background: linear-gradient(135deg, rgba(0,255,255,.16), rgba(178,75,243,.14));
    border-color: rgba(0,255,255,.4); box-shadow: 0 0 18px rgba(0,255,255,.15);
    transform: translateX(3px); outline: none;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.axia-tutorials-item:hover .axia-tutorials-play, .axia-tutorials-item:focus-visible .axia-tutorials-play {
    background: var(--neon-cyan, #0ff); box-shadow: 0 0 10px rgba(0,255,255,.6);
}
.axia-tutorials-item:hover .axia-tutorials-play::after, .axia-tutorials-item:focus-visible .axia-tutorials-play::after { border-left-color: #001018; }

.axia-tour-shield { position: fixed; inset: 0; z-index: 2147482000; cursor: progress; }
.axia-tour-target { outline: 3px solid var(--neon-cyan, #22d3ee) !important; outline-offset: 3px; border-radius: 8px; }
.axia-tour-cursor {
    position: fixed; top: 0; left: 0; z-index: 2147483000; width: 22px; height: 22px;
    margin: -4px 0 0 -4px; pointer-events: none; opacity: 0;
    transition: transform 700ms cubic-bezier(.4,.1,.2,1), opacity 200ms;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2l16 9-7 2-3 7z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>");
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.axia-tour-cursor.show { opacity: 1; }
.axia-tour-cursor.press { scale: .8; }
.axia-tour-tip {
    position: fixed; z-index: 2147483001; max-width: 300px; padding: 12px 14px;
    background: #0e1116; color: #fff; border: 1px solid var(--neon-cyan, #22d3ee);
    border-radius: 10px; font-size: 14px; line-height: 1.4; opacity: 0;
    transition: opacity 200ms; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.axia-tour-tip.show { opacity: 1; }
.axia-tour-tip p { margin: 0; }
.axia-tour-tip button {
    margin-top: 10px; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer;
    background: var(--neon-cyan, #22d3ee); color: #001018; font-weight: 600;
}
.axia-tour-quit {
    position: fixed; bottom: 20px; left: 50%; translate: -50% 0; z-index: 2147483002;
    padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
    background: #0e1116; color: #fff; cursor: pointer;
}

/* Birrete de tutoriales: mas grande que el engranaje para que se note. */
.axia-tutorials-icon { width: 42px; height: 42px; }
.axia-tutorials-icon svg { width: 30px; height: 30px; }
.axia-tutorials-icon:hover { transform: scale(1.1); }

/* Buscador del menu de tutoriales */
.axia-tutorials-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.axia-tutorials-search {
    width: min(320px, 50%); padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px;
    color: var(--text-primary, #fff); background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border); outline: none;
    transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.axia-tutorials-search::placeholder { color: var(--text-secondary); }
.axia-tutorials-search:focus { border-color: rgba(0,255,255,.5); background: rgba(255,255,255,.09); box-shadow: 0 0 14px rgba(0,255,255,.15); }
.axia-tutorials-item[hidden], .axia-tutorials-box.no-match { display: none; }

/* ============================================================================
   PRESENTACION — deck a pantalla completa + recorrido en vivo
   (shared/axia-presentation.js)
   ============================================================================ */
.axp-launch {
    display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px;
    padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left;
    color: var(--text-primary); font-family: inherit;
    background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.axp-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,255,255,.18); }
.axp-launch strong { display: block; font-size: 14px; }
.axp-launch small { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.axp-launch-ico {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
    font-size: 13px; color: #001018; padding-left: 3px;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    box-shadow: 0 0 0 0 rgba(0,255,255,.5); animation: axp-pulse 2.4s infinite;
}
@keyframes axp-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,255,255,.45); } 70% { box-shadow: 0 0 0 14px rgba(0,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,255,255,0); } }

/* ---- Deck ---- */
.axp-deck {
    position: fixed; inset: 0; z-index: 2147482500; overflow: hidden;
    display: flex; flex-direction: column; color: var(--text-primary);
    background: rgba(6, 9, 26, .72);
    backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
    opacity: 0; transition: opacity 400ms ease;
}
.axp-deck.in { opacity: 1; }
.axp-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; pointer-events: none; animation: axp-float 18s ease-in-out infinite alternate; }
.axp-orb.a { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(0,255,255,.55), transparent 65%); }
.axp-orb.b { width: 40vw; height: 40vw; right: -10vw; bottom: -12vw; background: radial-gradient(circle, rgba(178,75,243,.6), transparent 65%); animation-delay: -6s; }
.axp-orb.c { width: 26vw; height: 26vw; left: 48%; top: 38%; background: radial-gradient(circle, rgba(80,120,255,.45), transparent 65%); animation-delay: -12s; }
@keyframes axp-float { to { transform: translate(6vw, 4vh) scale(1.12); } }

.axp-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); }
.axp-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); box-shadow: 0 0 12px rgba(0,255,255,.6); transition: width 600ms ease; }

.axp-language {
    position: absolute; top: 18px; right: 68px; z-index: 3;
    display: inline-flex; padding: 0; border: 0; border-radius: 11px;
}
.axp-language .axia-language-trigger { min-height: 38px; }

.axp-x {
    position: absolute; top: 18px; right: 18px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--glass-border); background: rgba(255,255,255,.06); color: var(--text-secondary);
    font-size: 15px; cursor: pointer; transition: all 200ms;
}
.axp-x:hover { color: #fff; border-color: var(--neon-cyan); background: rgba(0,255,255,.1); }

/* minmax(0,1fr) y min-*: 0 para que ninguna diapositiva ensanche la pantalla
   por su contenido (en movil todo se salia a la derecha). */
.axp-stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.axp-slide {
    grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center;
    width: min(1120px, 100%); min-width: 0; min-height: 0; margin: 0 auto; padding: 72px 32px 110px;
    animation: axp-in 650ms cubic-bezier(.2,.8,.2,1) both;
}
.axp-slide.out { animation: axp-out 420ms ease both; pointer-events: none; }
@keyframes axp-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 60px)) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes axp-out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -60px)) scale(.98); filter: blur(6px); } }
.axp-slide.hero { align-items: center; text-align: center; }
.axp-slide > * { animation: axp-rise 700ms cubic-bezier(.2,.8,.2,1) both; }
.axp-slide > *:nth-child(2) { animation-delay: 90ms; }
.axp-slide > *:nth-child(3) { animation-delay: 180ms; }
.axp-slide > *:nth-child(4) { animation-delay: 270ms; }
.axp-slide > *:nth-child(5) { animation-delay: 360ms; }
@keyframes axp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.axp-logo { width: min(260px, 60vw); height: auto; margin-bottom: 28px; filter: drop-shadow(0 0 30px rgba(0,255,255,.25)); }
.axp-kicker {
    align-self: flex-start; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--neon-cyan); background: rgba(0,255,255,.08); border: 1px solid rgba(0,255,255,.3);
}
.axp-title { margin: 0; font-size: clamp(36px, 6.4vw, 76px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; }
.axp-h2 { margin: 0 0 32px; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; max-width: 820px; }
.axp-grad { background: linear-gradient(120deg, var(--neon-cyan), #7aa8ff 45%, var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.axp-lead { max-width: 640px; margin: 22px auto 0; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: var(--text-secondary); }
.axp-hint { margin-top: 44px; font-size: 12px; letter-spacing: .08em; color: var(--text-muted); }

/* Tarjetas glass genericas */
.axp-pain, .axp-mod, .axp-feat, .axp-plan, .axp-kpi, .axp-tl, .axp-dash, .axp-phone {
    background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    border: 1px solid var(--glass-border); border-radius: 20px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
}
.axp-pains, .axp-mods, .axp-feats, .axp-plans { display: grid; gap: 18px; }
.axp-pains, .axp-mods { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.axp-feats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.axp-plans { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
.axp-pain, .axp-feat { padding: 24px; transition: transform 250ms, border-color 250ms; }
.axp-pain:hover, .axp-feat:hover, .axp-mod:hover, .axp-plan:hover { transform: translateY(-4px); border-color: rgba(0,255,255,.4); }
.axp-pain b, .axp-feat b { font-size: 28px; }
.axp-pain h4, .axp-feat h4 { margin: 12px 0 6px; font-size: 17px; }
.axp-pain p, .axp-feat p, .axp-mod p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

.axp-mod { padding: 28px; transition: transform 250ms, border-color 250ms; animation: axp-rise 700ms var(--d) both; }
.axp-mod h3 { margin: 16px 0 8px; font-size: 20px; }
.axp-mod-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 24px; background: rgba(255,255,255,.07); border: 1px solid var(--glass-border); }
.axp-mod-ico.assistant { background: linear-gradient(135deg, rgba(0,255,255,.22), rgba(0,255,255,.04)); }
.axp-mod-ico.growth { background: linear-gradient(135deg, rgba(122,168,255,.28), rgba(122,168,255,.04)); }
.axp-mod-ico.collections { background: linear-gradient(135deg, rgba(178,75,243,.28), rgba(178,75,243,.04)); }
.axp-mod-ico.suite { color: #001018; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); }

.axp-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.axp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.axp-list li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.axp-list.sm { margin-top: 4px; gap: 10px; }
.axp-list.sm li { font-size: 14px; padding-left: 28px; }
.axp-list li::before {
    content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800;
    color: #001018; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
}

/* Telefono con chat */
.axp-phone { max-width: 360px; width: 100%; justify-self: center; padding: 0 0 18px; overflow: hidden; border-radius: 28px; }
.axp-phone-top { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,.04); }
.axp-phone-top span { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); }
.axp-chat { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; min-height: 300px; }
.axp-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; opacity: 0; animation: axp-pop 450ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards; }
.axp-msg.me { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(0,255,255,.16); border: 1px solid rgba(0,255,255,.3); }
.axp-msg.bot { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid var(--glass-border); }
@keyframes axp-pop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

/* Mini dashboard */
.axp-dash { padding: 22px; }
.axp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.axp-kpi { padding: 14px; border-radius: 14px; box-shadow: none; }
.axp-kpi small { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.axp-kpi strong { display: block; margin: 6px 0 2px; font-size: 24px; font-variant-numeric: tabular-nums; }
.axp-kpi em { font-style: normal; font-size: 11px; color: var(--neon-cyan); }
.axp-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 8px; border-top: 1px solid var(--glass-border); }
.axp-bars i { flex: 1; height: var(--v); border-radius: 6px 6px 2px 2px; transform-origin: bottom; background: linear-gradient(180deg, var(--neon-cyan), rgba(178,75,243,.55)); box-shadow: 0 0 14px rgba(0,255,255,.2); animation: axp-grow 900ms cubic-bezier(.2,.8,.2,1) var(--d) both; }
@keyframes axp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Linea de tiempo de cobro */
.axp-timeline { position: relative; display: grid; gap: 14px; padding-left: 22px; }
.axp-timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--neon-cyan), var(--neon-purple)); opacity: .6; }
.axp-tl { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; animation: axp-rise 600ms cubic-bezier(.2,.8,.2,1) var(--d) both; }
.axp-tl::before { content: ""; position: absolute; left: -22px; width: 14px; height: 14px; border-radius: 50%; background: #0b1030; border: 2px solid var(--neon-cyan); box-shadow: 0 0 10px rgba(0,255,255,.6); }
.axp-tl span { flex: none; min-width: 72px; font-size: 12px; font-weight: 700; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: .05em; }
.axp-tl p { margin: 0; font-size: 14.5px; }
.axp-tl.ok { border-color: rgba(0,255,160,.45); }
.axp-tl.ok::before { border-color: #00ffa0; box-shadow: 0 0 12px rgba(0,255,160,.7); }

/* Planes */
.axp-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 22px; transition: transform 250ms, border-color 250ms; }
.axp-plan h4 { margin: 6px 0 0; font-size: 16px; }
.axp-plan p { margin: 0; font-size: 13px; color: var(--text-secondary); }
.axp-price { font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.axp-price small { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 3px; }
.axp-plan.star { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); box-shadow: 0 0 40px rgba(0,255,255,.15), inset 0 1px 0 rgba(255,255,255,.15); }
.axp-tag { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #001018; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); }

/* Botones */
.axp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.axp-cta, .axp-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform 200ms, box-shadow 200ms, border-color 200ms, background 200ms; }
.axp-cta { border: none; color: #001018; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); box-shadow: 0 10px 30px rgba(0,255,255,.25); }
.axp-slide.hero > .axp-cta { margin-top: 36px; }
.axp-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,255,255,.4); }
.axp-cta span { transition: transform 200ms; }
.axp-cta:hover span { transform: translateX(4px); }
.axp-ghost { color: var(--text-primary); background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); }
.axp-ghost:hover { border-color: var(--neon-cyan); background: rgba(0,255,255,.08); }
.axp-cta.sm, .axp-ghost.sm { padding: 9px 16px; font-size: 13px; }
.axp-site { margin-top: 28px; font-size: 14px; letter-spacing: .12em; color: var(--text-muted); }

.axp-live-dot { width: 14px; height: 14px; margin: 0 auto 26px; border-radius: 50%; background: #ff3b6b; box-shadow: 0 0 0 0 rgba(255,59,107,.6); animation: axp-live 1.6s infinite; }
.axp-live-dot.sm { display: inline-block; width: 8px; height: 8px; margin: 0; flex: none; }
/* Cuenta regresiva de la diapositiva final (ver COUNTDOWN en axia-presentation.js) */
.axp-count { position: relative; width: 132px; height: 132px; margin: 0 auto 26px; }
.axp-count svg { width: 100%; height: 100%; overflow: visible; }
.axp-count-cross { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.axp-count-track { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.1); stroke-width: 6; }
.axp-count-arc { fill: none; stroke: var(--neon-cyan); stroke-width: 6; stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 6px rgba(0,255,255,.7)); }
.axp-count-tip { transform-box: view-box; transform-origin: 60px 60px; transition: transform 1s linear; }
.axp-count-tip circle { fill: #fff; filter: drop-shadow(0 0 6px var(--neon-cyan)) drop-shadow(0 0 12px var(--neon-purple)); }
.axp-count b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; font-weight: 800; font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.axp-count b.pop { animation: axp-count-pop 1s ease-out; }
@keyframes axp-count-pop { 0% { transform: scale(1.35); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: .55; } }
@media (max-width: 760px) { .axp-count { width: 104px; height: 104px; margin-bottom: 18px; } .axp-count b { font-size: 42px; } }

@keyframes axp-live { 70% { box-shadow: 0 0 0 12px rgba(255,59,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,107,0); } }

/* Navegacion inferior */
.axp-nav {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.axp-arrow, .axp-play { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; font-size: 15px; color: var(--text-primary); background: rgba(255,255,255,.06); transition: background 200ms, color 200ms; }
.axp-play { font-size: 11px; }
.axp-arrow:hover:not(:disabled), .axp-play:hover { background: rgba(0,255,255,.16); color: var(--neon-cyan); }
.axp-arrow:disabled { opacity: .3; cursor: default; }
.axp-dots { display: flex; gap: 6px; padding: 0 6px; }
.axp-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.25); transition: width 300ms, background 300ms; }
.axp-dot.on { width: 26px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); }

/* ---- Recorrido en vivo ---- */
.axp-spot {
    position: fixed; z-index: 2147482400; pointer-events: none; border-radius: 16px; opacity: 0;
    border: 2px solid rgba(0,255,255,.8);
    box-shadow: 0 0 0 9999px rgba(4,6,20,.62), 0 0 30px rgba(0,255,255,.45), inset 0 0 20px rgba(0,255,255,.12);
    transition: top 600ms cubic-bezier(.2,.8,.2,1), left 600ms cubic-bezier(.2,.8,.2,1), width 600ms cubic-bezier(.2,.8,.2,1), height 600ms cubic-bezier(.2,.8,.2,1), opacity 300ms;
}
.axp-spot.on { opacity: 1; }
.axp-card {
    position: fixed; left: 50%; bottom: 28px; z-index: 2147482450; width: min(460px, calc(100vw - 32px));
    padding: 20px 22px; border-radius: 20px; color: var(--text-primary);
    background: rgba(12, 16, 40, .78); border: 1px solid var(--glass-accent-border);
    backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,255,255,.12);
    transform: translate(-50%, 30px); opacity: 0; transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 400ms;
}
.axp-card.in { transform: translate(-50%, 0); opacity: 1; }
.axp-card-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--neon-cyan); }
.axp-card-count { margin-left: auto; color: var(--text-muted); letter-spacing: .04em; }
.axp-card h3 { margin: 10px 0 6px; font-size: 20px; letter-spacing: -.01em; }
.axp-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.axp-card-bar { height: 3px; margin: 16px 0 14px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.08); }
.axp-card-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple)); }
.axp-card-actions { display: flex; justify-content: flex-end; gap: 8px; }
.axp-card-actions [data-axp="exit"] { margin-right: auto; }
.axp-ghost:disabled { opacity: .35; cursor: default; border-color: var(--glass-border); background: rgba(255,255,255,.06); }

.axp-toast {
    position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 2147482450;
    display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-size: 13.5px;
    color: var(--text-primary); background: rgba(12,16,40,.8); border: 1px solid var(--glass-accent-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

@media (max-width: 760px) {
    .axp-split { grid-template-columns: 1fr; gap: 28px; }
    .axp-slide { padding: 64px 16px 100px; justify-content: flex-start; overflow-y: auto; }
    .axp-kpis { grid-template-columns: 1fr 1fr; }
    .axp-bars { height: 100px; }
    .axp-pains, .axp-mods, .axp-feats, .axp-plans { grid-template-columns: 1fr; gap: 12px; }
    .axp-pain, .axp-feat, .axp-mod { padding: 18px; }
    .axp-h2 { margin-bottom: 20px; }
    .axp-actions { margin-top: 24px; }
    .axp-cta, .axp-ghost { padding: 12px 20px; font-size: 14px; max-width: 100%; }
    .axp-tl span { min-width: 56px; }
    .axp-nav { bottom: 14px; }
    .axp-x { top: 12px; right: 12px; }
    .axp-slide { padding-top: 56px; }
    .axp-kicker { margin-bottom: 12px; font-size: 10.5px; }
    .axp-h2 { font-size: 26px; }
    .axp-sub { margin: -8px 0 16px; font-size: 15px; }
    .axp-list { gap: 10px; }
    .axp-list li { font-size: 14.5px; }
    .axp-mod { padding: 14px 16px; }
    .axp-mod-ico { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }
    .axp-num { margin-top: 8px; }
    .axp-mod h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .axp-deck *, .axp-spot, .axp-card { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

.axp-pricing { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.axp-pricing span { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; color: var(--text-secondary); background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); }
.axp-pricing b { color: var(--text-primary); margin-left: 4px; }
.axp-pricing .star { color: var(--text-primary); background: var(--glass-accent-bg); border-color: var(--glass-accent-border); box-shadow: 0 0 24px rgba(0,255,255,.15); }

/* Presentacion v2: telefonos de WhatsApp, notas y chips */
.axp-sub { margin: -14px 0 24px; max-width: 520px; font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.axp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.axp-chips span { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; color: var(--text-primary); background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); }
.axp-phone-wrap { display: flex; justify-content: center; }
.axp-wa { height: min(66vh, 600px); width: auto; max-width: 100%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(0,255,255,.12)); }
.axp-cm { opacity: 0; transform-box: fill-box; transform-origin: left center; animation: axp-cm 450ms cubic-bezier(.2,.9,.3,1.2) var(--d) forwards; }
.axp-cm.me { transform-origin: right center; }
@keyframes axp-cm { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.axp-notes { position: relative; display: grid; gap: 12px; justify-items: start; }
.axp-note { display: flex; flex-direction: column; gap: 3px; min-width: 260px; padding: 14px 18px; border-radius: 16px;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 34px rgba(0,0,0,.3);
    opacity: 0; animation: axp-pop 500ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards, axp-bob 4s ease-in-out calc(var(--d) + 500ms) infinite alternate; }
.axp-note:nth-child(even) { margin-left: 60px; }
.axp-note small { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--neon-cyan); }
.axp-note b { font-size: 15px; color: #6dffc0; }
.axp-note span { font-size: 13px; color: var(--text-secondary); }
@keyframes axp-bob { to { transform: translateY(-6px); } }
.axp-num { display: block; margin-top: 16px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--neon-cyan); }
.axp-mod h3 { margin-top: 6px; }
.axp-mod strong { display: block; margin-bottom: 6px; font-size: 14.5px; }
.axp-cap { margin: 16px 0 0; font-size: 14px; color: var(--text-secondary); }
.axp-cap b { color: var(--text-primary); }
a.axp-cta { text-decoration: none; }
.axp-slide.hero .axp-title { font-size: clamp(32px, 5vw, 64px); }
@media (max-width: 760px) { .axp-note:nth-child(even) { margin-left: 24px; } .axp-note { min-width: 0; } .axp-wa { height: 52vh; } }

/* Presentacion: dos botones en el login + mapa de mesas del mazo restaurante */
.axp-launch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.axp-launch > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.axp-launch-row .axp-launch { margin-top: 0; padding: 12px 14px; gap: 10px; }
.axp-launch-row .axp-launch strong { font-size: 13px; }
.axp-launch-row .axp-launch small { font-size: 11px; }
.axp-launch-row .axp-launch-ico { width: 34px; height: 34px; font-size: 12px; }
.axp-launch.alt { background: linear-gradient(135deg, rgba(255,160,70,.22), rgba(178,75,243,.2)); border-color: rgba(255,170,90,.45); }
.axp-launch.alt .axp-launch-ico { padding-left: 0; font-size: 16px; background: linear-gradient(135deg, #ffb45a, var(--neon-purple)); animation-name: axp-pulse-warm; }
@keyframes axp-pulse-warm { 0% { box-shadow: 0 0 0 0 rgba(255,170,90,.45); } 70% { box-shadow: 0 0 0 14px rgba(255,170,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,170,90,0); } }
/* Movil: uno debajo del otro, compactos (icono chico, una linea cada texto). */
@media (max-width: 520px) {
    .axp-launch-row { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
    .axp-launch-row .axp-launch { padding: 10px 14px; }
    .axp-launch-row .axp-launch-ico { width: 30px; height: 30px; }
}

.axp-floor { padding: 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02)); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(0,0,0,.28); }
.axp-floor-zones { display: flex; gap: 8px; margin-bottom: 14px; }
.axp-floor-zones span { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; color: var(--text-secondary); background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); }
.axp-floor-zones span:first-child { color: var(--neon-cyan); border-color: rgba(0,255,255,.4); }
.axp-floor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px); border: 1px dashed rgba(255,255,255,.12); }
.axp-table { --c: 0,255,160; position: relative; display: grid; place-items: center; align-content: center; aspect-ratio: 1; border-radius: 50%; background: rgba(var(--c), .14); border: 2px solid rgba(var(--c), .75); box-shadow: 0 0 16px rgba(var(--c), .25); opacity: 0; animation: axp-pop 450ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards; }
.axp-table.big { border-radius: 14px; }
.axp-table b { font-size: 17px; }
.axp-table small { font-size: 10px; color: var(--text-secondary); }
.axp-table.o { --c: 255,90,120; }
.axp-table.r { --c: 255,190,80; }
.axp-table.b { --c: 178,75,243; }
.axp-table.r::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: rgb(255,190,80); animation: axp-live 1.6s infinite; }
.axp-floor-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--text-secondary); }
.axp-floor-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: rgb(0,255,160); }
.axp-floor-legend .o::before { background: rgb(255,90,120); }
.axp-floor-legend .r::before { background: rgb(255,190,80); }
.axp-floor-legend .b::before { background: rgb(178,75,243); }

/* Diapositiva de mesas: captura real + etiquetas flotantes */
.axp-floorshot { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 40px rgba(0,255,255,.1); animation: axp-rise 700ms cubic-bezier(.2,.8,.2,1) both; }
.axp-floorshot img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; border-radius: 14px; }
.axp-floorshot-cap { position: absolute; left: 22px; bottom: 22px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(8,12,32,.72); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); }
.axp-ftag { --c: 0,255,160; position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; white-space: nowrap;
    background: rgba(8,12,32,.8); border: 1px solid rgba(var(--c), .7); box-shadow: 0 10px 24px rgba(0,0,0,.4), 0 0 16px rgba(var(--c), .35);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0;
    animation: axp-pop 500ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards, axp-bob 3.5s ease-in-out calc(var(--d) + 500ms) infinite alternate; }
.axp-ftag b { font-size: 12.5px; color: rgb(var(--c)); }
.axp-ftag span { font-size: 11px; color: var(--text-secondary); }
.axp-ftag.r { --c: 255,190,80; }
.axp-ftag.b { --c: 190,120,255; }
/* Movil: el plano no alcanza para etiquetas flotando encima (se tapaban entre
   si y tapaban las mesas). Van debajo del plano como tarjetas delgadas, una por
   fila: nombre a la izquierda, detalle a la derecha. */
@media (max-width: 760px) {
    .axp-floorshot { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
    .axp-floorshot img { max-height: 26vh; }
    /* Trade-off movil: la lista de checks repite al subtitulo; sin ella el
       visual (plano, chat, notas) cabe en pantalla sin quedar bajo la barra. */
    .axp-split .axp-list { display: none; }
    .axp-floorshot-cap { position: static; order: 1; align-self: flex-start; margin: 2px 0 2px; }
    .axp-ftag { position: static !important; order: 2; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; animation: axp-pop 500ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards; }
    .axp-ftag span { white-space: nowrap; }
    /* Las notas de "Todo desde WhatsApp": sin zigzag, delgadas, a lo ancho. */
    .axp-notes { justify-items: stretch; gap: 8px; }
    .axp-note { margin-left: 0 !important; padding: 9px 14px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; animation: axp-pop 500ms cubic-bezier(.2,.9,.3,1.3) var(--d) forwards; }
    .axp-note small { flex-basis: 100%; }
    .axp-note b { font-size: 14px; }
    .axp-note span { font-size: 12.5px; }
}

/* ============================================================================
   MOVIL — header de Axia (solo <=720px; escritorio no cambia)
   Las acciones comparten la primera fila con el logo; los módulos ocupan la
   segunda fila. El header deja de ser sticky para no tapar media pantalla.
   ============================================================================ */
@media (max-width: 720px) {
    .main-header {
        position: relative;
        flex-wrap: wrap;
        column-gap: 4px;
        row-gap: 6px;
        padding: 6px 8px;
    }
    .main-header .header-left { display: contents; }
    .main-header .logo-small { flex: 0 0 auto; }
    .main-header .logo-small img { height: 23px; }
    .main-header .header-right { gap: 4px; margin-left: auto; min-width: 0; flex: 0 0 auto; }
    .main-header .module-switcher { order: 2; flex: 1 1 100%; justify-content: space-between; }
    .main-header .module-link { flex: 1; justify-content: center; }
    .main-header .user-profile span { display: none; }
    .main-header .axia-company-picker { flex: 0 1 110px; width: 110px; margin-left: 0; padding-left: 0; border-left: none; min-width: 0; }
    .main-header .axia-company-picker-label { display: none; }
    .main-header .axia-company-picker-select { width: 100%; min-width: 0; max-width: 110px; padding: 5px 18px 5px 6px; background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 4px 4px; font-size: 11px; }
    .main-header .axia-settings-icon,
    .main-header .axia-tutorials-icon { width: 28px; height: 32px; }
    .main-header .axia-settings-icon svg { width: 18px; height: 18px; }
    .main-header .axia-tutorials-icon svg { width: 22px; height: 22px; }
    .main-header .axia-header-language { flex: 0 0 32px; margin: 0; }
    .main-header .axia-language-trigger { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 4px; gap: 1px; border-radius: 9px; }
    .main-header .axia-language-trigger svg { width: 17px; height: 17px; }
    .main-header .axia-language-trigger .axia-language-chevron { width: 8px; height: 8px; }
    .main-header .user-profile { gap: 0; padding: 2px; border-radius: 9px; }
    .main-header .user-profile img,
    .main-header .user-profile .user-avatar { width: 28px !important; height: 28px !important; }
    .main-header .logout-btn { width: 28px; height: 32px; padding: 0; font-size: 0; line-height: 1; }
    .main-header .logout-btn::before { content: "⏻"; font-size: 17px; }
    .section-tabs { top: 0; padding: 8px 12px; }
}

/* MOVIL — barra "Workspaces" de Asistente: titulo arriba, botones debajo. */
@media (max-width: 720px) {
    .puertos-topbar { flex-wrap: wrap; gap: 10px; }
    .puertos-topbar > div { flex: 1 1 100%; }
    .puertos-topbar .add-workspace-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 13px; }
}

/* MOVIL — Ajustes: la barra de secciones scrolleaba de lado. Chips que se
   acomodan en varias filas, sin la etiqueta de alcance (empresa/plataforma),
   asi el modal solo scrollea hacia abajo. */
@media (max-width: 720px) {
    .axia-settings-rail { flex-wrap: wrap; overflow-x: visible; gap: 6px; }
    .axia-settings-rail-item { flex: none; padding: 6px 10px; border-radius: 999px; }
    .axia-settings-rail-scope { display: none; }
    .axia-settings-prompt-box { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; }
}

/* Planner de una clinica: filtro de citas por profesional (board.js). */
.planner-pro-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--text-soft, #94a3b8); }
.planner-pro-filter select { min-height: 32px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: inherit; padding: 0 10px; }
/* Presentacion sector salud: tercer boton de la fila. */
.axp-launch-row .axp-launch.health { background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(56,189,248,.2)), rgba(16, 22, 48, 0.9); border-color: rgba(52,211,153,.45); }
.axp-launch.health .axp-launch-ico { padding-left: 0; font-size: 16px; background: linear-gradient(135deg, #34d399, #38bdf8); }
.axp-waiting { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.axp-wcol { display: flex; flex-direction: column; gap: 8px; }
.axp-wcol > small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 720px) { .axp-waiting { grid-template-columns: 1fr; } }
.axp-waiting { width: min(600px, 100%); justify-items: stretch; }
.axp-waiting .axp-note { min-width: 0; margin-left: 0; padding: 10px 12px; }
.axp-waiting .axp-note b { font-size: 13px; }
.axp-waiting .axp-note span { font-size: 11.5px; }

/* Tarjeta del recorrido en vivo: compacta y arrastrable por su barra. */
.axp-card { width: min(360px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 14px; }
.axp-card.moved { bottom: auto; transform: none; transition: opacity 400ms; }
.axp-card-top { display: flex; align-items: center; gap: 6px; cursor: grab; user-select: none; touch-action: none; font-size: 10px; margin: -4px -4px 0; padding: 4px; border-radius: 8px; }
.axp-card-top:active { cursor: grabbing; }
.axp-card-grip { color: var(--text-muted); letter-spacing: -2px; font-size: 12px; }
.axp-card-mod { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axp-card-language { display: inline-flex; flex:none; margin-left: auto; touch-action: auto; }
.axp-card-language .axia-language-trigger { min-width: 30px; min-height: 28px; padding: 4px; border-radius: 8px; }
.axp-card-language .axia-language-trigger svg:first-child { width: 15px; height: 15px; }
.axp-card-language .axia-language-chevron { display: none; }
.axp-card-language .axia-language-menu { top: calc(100% + 5px); }
.axp-card-count { flex: none; }
.axp-card h3 { margin: 6px 0 4px; font-size: 16px; }
.axp-card p { font-size: 12.5px; line-height: 1.45; }
.axp-card-bar { margin: 10px 0 8px; height: 2px; }
.axp-card-actions { gap: 6px; }
.axp-card-actions .axp-cta.sm, .axp-card-actions .axp-ghost.sm { padding: 6px 11px; font-size: 12px; }

.axia-language-switch button:focus-visible, .axia-language-trigger:focus-visible,
.axia-language-option:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Ventanas emergentes segun el tono del fondo elegido en Ajustes > Fondo
   (axia-settings.js marca html[data-bg-tone]). Con fondo claro el vidrio
   oscuro se veia turbio: pasa a vidrio blanco translucido con texto oscuro.
   Se redefinen los tokens DENTRO de la ventana (y los alias de Growth, que en
   :root apuntan a los tokens ya resueltos) para que todo lo que los usa siga.
   --------------------------------------------------------------------------- */
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) {
    --text-primary: #1b2140;
    --text-secondary: #3f4668;
    --text-muted: #69708f;
    --text: #1b2140;
    --text-soft: #3f4668;
    --text-faint: #69708f;
    --glass-bg: rgba(255, 255, 255, 0.16);
    --glass-bg-heavy: rgba(255, 255, 255, 0.26);
    --glass-border: rgba(255, 255, 255, 0.7);
    --border: rgba(30, 40, 80, 0.14);
    --hairline: rgba(30, 40, 80, 0.12);
    --surface: rgba(255, 255, 255, 0.16);
    --surface-strong: rgba(255, 255, 255, 0.24);
    --surface-soft: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #1b2140;
    box-shadow: 0 24px 64px rgba(40, 50, 90, 0.22);
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) :is(h1, h2, h3, h4, label, span, small, p, strong, b, legend, .muted) {
    color: inherit;
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) :is(.muted, small, .axia-settings-hint, .product-form-status) {
    color: #5a6182;
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) :is(input, select, textarea) {
    /* background-color y no background: el select dibuja su flecha con
       background-image y el shorthand la borraba. */
    background-color: rgba(255, 255, 255, 0.34) !important;
    color: #1b2140 !important;
    border-color: rgba(30, 40, 80, 0.16) !important;
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) :is(input, textarea)::placeholder {
    color: #8a90aa;
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) select option {
    color: #1b2140;
    background: #fff;
}
/* Barras de titulo y de acciones: mismo vidrio claro, separadores suaves. */
html[data-bg-tone="light"] :is(.product-modal-card, .axia-settings-card) > .section-head,
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card) .product-form-actions {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(30, 40, 80, 0.1) !important;
}
/* Botones secundarios (Cancelar, Eliminar, X): texto oscuro sobre vidrio. */
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) :is(.product-action:not(.primary):not(.electronic), .btn-secondary, .close-btn, .icon-btn) {
    color: #1b2140;
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(30, 40, 80, 0.16);
}
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) .product-action.danger {
    color: #c2183d;
}
/* Boton de accion cyan (Assistant): el texto neon no se lee sobre claro. */
html[data-bg-tone="light"] :is(.product-modal-card, .product-confirm-card, .modal-content, .axia-settings-card) .create-btn {
    color: #fff;
    background: linear-gradient(135deg, #0891b2, #7c3aed);
    border-color: transparent;
}
/* Sobre fondo claro el boton principal translucido lleva texto oscuro. */
html[data-bg-tone="light"] .product-action.primary {
    color: #0b1530;
}
html[data-bg-tone="light"] .axia-settings-card .axia-settings-rail-item:is(.active, .is-active, [aria-current="true"]),
html[data-bg-tone="light"] .axia-settings-card .axia-settings-rail-item:is(.active, .is-active, [aria-current="true"]) * {
    color: #0e5a8a;
}

/* ---------------------------------------------------------------------------
   Planner: el calendario mide lo que mide la ventana. El recuadro nunca crece
   con las citas: Semana/Dia scrollean dentro de FullCalendar y en Mes cada dia
   scrollea su lista (alto calculado en board.js fitMonthCells).
   --------------------------------------------------------------------------- */
.planner-view { min-height: 0; }
.calendar-container { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.calendar-container > #calendar { flex: 1 1 auto; min-height: 0; }
.board-main.planner-only .planner-view { min-height: 0; }
.board-main.planner-only .calendar-container { height: 100%; }
.fc .fc-daygrid-day-events {
    max-height: var(--axia-day-events-h, none);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.fc .fc-daygrid-day-bottom { display: none; }
.fc .fc-scroller { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }

/* ============================================================================
   Punto de venta (pos.html) — catalogo a la izquierda, ticket a la derecha.
   El panel del ticket sigue el armado del POS de Safetti (lineas en tarjeta,
   barra de total, caja de pagos/cliente, acciones y barra de caja) pasado al
   vidrio de Axia. Excepcion a la regla de botones solo texto, a pedido del
   dueno: aca las acciones van con icono + tooltip, como en Safetti.
   ============================================================================ */
/* El POS usa los mismos tokens de marca y estados del resto de la plataforma. */
.pos-page { --pos-alert: var(--danger); --pos-alert-bg: rgba(255, 77, 109, 0.10); }
.pos-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--text-primary); }
.pos-toolbar { display: flex; gap: 10px; align-items: center; }
.pos-warehouse-control { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.pos-warehouse-toggle, .pos-mobile-register-open { display: none; }
.pos-mobile-register-open[hidden] { display: none; }
.pos-search-control { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.pos-search-control .pos-input { flex: 1 1 auto; width: 100%; }
.pos-search-toggle { display: none; }
.pos-search-control[hidden] { display: none; }
.pos-warehouse { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

.pos-input, .pos-warehouse select {
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary);
    border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; min-width: 0;
}
.pos-input option, .pos-warehouse select option { background: var(--dark-700); color: var(--text-primary); }
.pos-input:focus, .pos-warehouse select:focus { outline: none; border-color: var(--neon-cyan); }
.pos-input::placeholder { color: var(--text-secondary); opacity: 0.92; }
/* Select del tema: sin el control nativo (macOS lo pinta claro), flecha propia. */
.pos-select, .pos-warehouse select {
    appearance: none; -webkit-appearance: none; padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Boton de icono con tooltip rapido (el patron de Safetti). */
.pos-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0; border-radius: 10px; cursor: pointer;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary);
    transition: all var(--transition-fast);
}
.pos-icon-btn svg { width: 18px; height: 18px; }
.pos-icon-btn-sm { width: 28px; height: 28px; border-radius: 8px; }
.pos-icon-btn-sm svg { width: 14px; height: 14px; }
.pos-icon-btn-lg { width: 54px; height: auto; align-self: stretch; }
.pos-icon-btn-lg svg { width: 24px; height: 24px; }
.pos-icon-btn:hover { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--neon-cyan); }
.pos-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pos-icon-btn[hidden] { display: none; }
.pos-icon-btn.pos-warehouse-toggle, .pos-icon-btn.pos-search-toggle, .pos-icon-btn.pos-mobile-register-open { display: none; }
.pos-tooltip {
    position: fixed; top: 0; left: 0; z-index: 10000; white-space: nowrap; pointer-events: none;
    padding: 5px 8px; border-radius: 6px; font-size: 11px; line-height: 1.3; font-weight: 500;
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); color: var(--text-primary);
    opacity: 0; visibility: hidden; transition: opacity 0.06s linear;
}
.pos-tooltip.is-visible { opacity: 1; visibility: visible; }
.pos-icon-btn[data-del]:hover, .pos-icon-btn[data-pay-remove]:hover, .pos-icon-btn[data-void]:hover, [data-cp-del]:hover, [data-gc-del]:hover { color: var(--pos-alert); border-color: var(--pos-alert); background: var(--pos-alert-bg); }

.pos-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary);
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
}
.pos-btn:hover, .pos-btn.is-active { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--neon-cyan); }
.pos-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pos-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.pos-btn-primary { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--neon-cyan); }
.pos-link { background: none; border: none; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; padding: 4px; }
.pos-link:hover { color: var(--neon-cyan); }
.pos-link:disabled { opacity: 0.35; cursor: not-allowed; }

.pos-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; padding: 20px 24px; align-items: start; }

/* Catalogo */
.pos-catalog { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pos-catalog .pos-input { width: 100%; padding: 12px 14px; font-size: 15px; }
.pos-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-chip {
    padding: 6px 14px; border-radius: 20px; font: inherit; font-size: 12.5px; cursor: pointer;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.pos-chip:hover, .pos-chip.is-active { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--neon-cyan); }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-content: start; }
.pos-tile {
    position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 8px 8px 12px;
    border-radius: 16px; font: inherit; cursor: pointer; color: var(--text-primary); overflow: hidden;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); transition: all var(--transition-fast);
}
.pos-tile:not(:disabled):hover { border-color: var(--neon-cyan); transform: translateY(-2px); }
.pos-tile:disabled { opacity: 0.4; cursor: not-allowed; }
/* Foto cuadrada arriba; sin foto, la inicial del producto sobre el vidrio. */
.pos-tile-image {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05);
}
.pos-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos-tile-initial { font-size: 34px; font-weight: 700; color: var(--text-muted); opacity: 0.6; }
.pos-tile-badge {
    position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700; color: var(--neon-cyan);
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-accent-border);
}
.pos-tile-badge.is-out { color: var(--danger); border-color: rgba(255, 77, 109, 0.45); }
.pos-tile-name { padding: 0 4px; font-weight: 600; font-size: 14px; flex: 1; overflow-wrap: anywhere; }
.pos-tile-price { padding: 0 4px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pos-closed-note {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 12px; font-size: 13px;
    border: 1px solid var(--warning); background: rgba(255, 189, 77, 0.10); color: var(--text-primary);
}
.pos-closed-open { display: inline-flex; align-items: center; gap: 8px; }
.pos-closed-open-icon { display: inline-flex; align-items: center; justify-content: center; }
.pos-closed-open-icon svg { width: 18px; height: 18px; }
.pos-closed-note[hidden] { display: none; }
.pos-chips[hidden], .pos-grid[hidden], .pos-floor[hidden], .pos-sums dt[hidden] { display: none; }

/* Mapa de mesas (restaurante): el plano de Gestion > Mesas (.floor-*, mas
   abajo) a tamano real dentro de .pos-floor-scene, escalado por fitFloor()
   en pos.html para que entre entero en la ventana. */
.pos-floor { display: grid; gap: 10px; }
.pos-floor-tabs { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pos-floor-tabs[hidden] { display: none; }
.pos-floor-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pos-floor-bar .pos-floor-legend { margin-left: auto; }
.pos-floor-tabs-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.pos-tab-list { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.pos-floor-tabs-empty { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.pos-tab-chip {
    display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0; padding: 6px 12px; border-radius: 20px;
    font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-primary);
    background: var(--glass-bg); border: 1px solid var(--glass-border); transition: all var(--transition-fast);
}
.pos-tab-chip span { color: var(--text-secondary); }
.pos-tab-chip:hover, .pos-tab-chip.is-active { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); color: var(--neon-cyan); }
.pos-floor-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.pos-floor-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.pos-floor-legend .is-free::before { background: var(--success); }
.pos-floor-legend .is-reserved::before { background: var(--warning); }
.pos-floor-legend .is-busy::before { background: var(--danger); }
.pos-floor-stage { position: relative; width: 100%; overflow: hidden; border-radius: 14px; }
.pos-floor-scene { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pos-floor-scene .floor-plan-canvas { border-radius: 12px; border: 1px solid var(--glass-border); }
.pos-floor-scene .floor-table { cursor: default; }
.pos-floor-scene .floor-table.is-seat { cursor: pointer; transition: filter var(--transition-fast); }
.pos-floor-scene .floor-table.is-seat:hover, .pos-floor-scene .floor-table.is-seat:focus-visible { filter: brightness(1.12); outline: 2px solid var(--neon-cyan); outline-offset: 3px; }
.pos-floor-scene .floor-table.is-busy { outline: 3px solid var(--danger); outline-offset: 2px; }
.pos-floor-scene .floor-table.is-current { outline: 3px solid var(--neon-cyan); outline-offset: 3px; }
.floor-table-reserved-badge.is-busy { color: #fff; background: var(--danger); }
.pos-service-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pos-service-check input { accent-color: var(--neon-cyan); margin: 0; }

/* Ticket (panel derecho) */
.pos-ticket {
    position: sticky; top: 12px;
    display: flex; flex-direction: column; gap: 12px; padding: 18px;
    border-radius: 20px; border: 1px solid var(--glass-border);
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.28);
    /* Nunca mas alto que la ventana: lo que sobra scrollea adentro del ticket. */
    max-height: calc(100dvh - 180px); overflow: hidden; /* header (~67) + margenes + la barra de caja fija */ 
}
.pos-ticket-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid var(--company-accent, transparent); }
.pos-ticket-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pos-ticket-meta { font-size: 12px; color: var(--text-muted); }
.pos-lines { display: grid; gap: 6px; min-height: 60px; max-height: 34vh; overflow-y: auto; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.pos-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto 32px; gap: 8px; align-items: center; min-width: 0;
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04);
}
.pos-line-name { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-delete { width: 32px; height: 32px; padding: 0; color: var(--pos-alert); }
.pos-line-delete svg { width: 16px; height: 16px; }
.pos-unit-price { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: var(--text-primary); font-size: 13px; font-weight: 700; white-space: nowrap; }
/* Precio unitario editable: se ve como el texto de al lado hasta que se toca. */
.pos-price-input {
    width: 8ch; min-width: 5ch; max-width: 12ch; min-height: 30px; padding: 0 2px; margin: 0; font: inherit; font-weight: 700; text-align: right; color: inherit;
    background: transparent; border: none; border-bottom: 1px dashed var(--glass-border); border-radius: 0;
    -moz-appearance: textfield; appearance: textfield; cursor: text;
}
.pos-price-input::-webkit-outer-spin-button, .pos-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-price-input:hover { border-bottom-color: var(--text-muted); }
.pos-price-input:focus { outline: none; border-bottom-color: var(--neon-cyan); color: var(--text-primary); }
.pos-price-input.is-edited { color: var(--neon-cyan); font-weight: 700; }
.pos-qty { display: flex; align-items: center; gap: 3px; }
.pos-qty-btn {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--glass-border);
    background: var(--glass-bg); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer;
}
.pos-qty-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.pos-qty input {
    width: 42px; height: 26px; text-align: center; padding: 0; border-radius: 7px; font: inherit; font-size: 13px;
    border: 1px solid var(--glass-border); background: transparent; color: var(--text-primary);
}

.pos-coupon-zone { display: grid; gap: 8px; }
.pos-coupon-zone > .pos-icon-btn { justify-self: end; }
.pos-coupon { display: flex; align-items: center; gap: 8px; }
.pos-coupon[hidden], .pos-coupon-applied[hidden] { display: none; }
.pos-coupon .pos-input { flex: 1; text-transform: uppercase; }
.pos-coupon-applied {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border-radius: 8px; font-size: 12px;
    color: var(--success); border: 1px solid rgba(6, 255, 165, 0.35); background: rgba(6, 255, 165, 0.08);
}

.pos-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 0; padding: 0 4px; font-size: 13px; }
.pos-sums dt { color: var(--text-secondary); }
.pos-sums dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pos-sums .pos-discount { color: var(--pos-alert); }
.pos-sums [hidden] { display: none; }
.pos-total-bar {
    display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 12px;
    background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border);
}
.pos-total-bar span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.pos-total-bar strong { font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--neon-cyan); font-variant-numeric: tabular-nums; }

.pos-box { display: grid; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04); }
.pos-box-head { position: relative; display: flex; align-items: center; justify-content: space-between; }
.pos-box-head-actions { display: flex; align-items: center; gap: 6px; }
.pos-box-head-actions .pos-coupon-zone { display: flex; align-items: center; min-width: 0; }
.pos-box-head-actions .pos-coupon-zone > .pos-icon-btn { justify-self: auto; }
.pos-box-head-actions .pos-coupon {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 31;
    width: min(360px, calc(100vw - 64px)); padding: 8px;
    border: 1px solid var(--glass-border); border-radius: 10px;
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.pos-box-head-actions .pos-coupon-applied { max-width: min(180px, calc(100vw - 164px)); padding: 4px 6px; font-size: 10px; }
.pos-box-head span, .pos-customer-field > span, .pos-customer-form label, .pos-field {
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.pos-pay-lines { display: grid; gap: 8px; }
.pos-pay-line { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.pos-gc-field { display: flex; gap: 6px; min-width: 0; }
.pos-gc-field .pos-input { flex: 1; text-transform: uppercase; }
.pos-gc-ok { font-size: 12px; color: var(--success); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-balance { font-size: 12px; font-weight: 600; text-align: right; }
.pos-balance.is-covered { color: var(--success); }
.pos-balance.is-pending { color: var(--pos-alert); font-weight: 500; }
.pos-customer-row { display: flex; align-items: flex-end; gap: 8px; }
.pos-customer-field { flex: 1; display: grid; gap: 6px; min-width: 0; }

/* Desplegable de clientes con buscador adentro (pos.html). */
.pos-combo { position: relative; }
.pos-combo-trigger { width: 100%; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-combo-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    display: grid; gap: 8px; padding: 8px; border-radius: 12px;
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.pos-combo-panel[hidden] { display: none; }
.pos-combo-panel .pos-input { width: 100%; }
.pos-combo-list { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
.pos-combo-list .pos-empty { margin: 10px 0; }
.pos-combo-option {
    display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--text-primary); font: inherit; font-size: 13px;
}
.pos-combo-option small { font-size: 11px; color: var(--text-muted); }
.pos-combo-option:hover, .pos-combo-option.is-active { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); }
.pos-combo-option.is-selected span { color: var(--neon-cyan); font-weight: 600; }
.pos-customer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-customer-form[hidden] { display: none; }
.pos-customer-form label { display: grid; gap: 4px; }
.pos-customer-form label:first-child { grid-column: 1 / -1; }
.pos-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.pos-ticket-body {
    display: grid; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; align-content: start;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.pos-ticket-foot { display: grid; gap: 8px; flex-shrink: 0; }
.pos-error { margin: 0; padding: 8px 10px; border-radius: 8px; color: var(--pos-alert); background: var(--pos-alert-bg); font-size: 13px; }
.pos-error:empty { display: none; }
.pos-actions { display: flex; gap: 8px; }
.pos-charge { flex: 1; gap: 10px; padding: 16px 18px; min-height: 56px; font-size: 18px; border-width: 2px; }
.pos-charge svg { width: 24px; height: 24px; }
.pos-actions .pos-charge { font-size: 15px; padding: 12px 10px; gap: 8px; }
.pos-actions .pos-charge[hidden] { display: none; }
.pos-actions .pos-charge:not(:disabled):hover { filter: brightness(1.15); box-shadow: var(--shadow-cyan); }
.pos-charge-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.pos-charge-stack small { font-size: 11px; font-weight: 600; opacity: 0.85; }
.pos-charge-e { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--neon-cyan); }

/* Caja: fija abajo a la derecha, debajo del ticket y de su mismo ancho. */
.pos-cash-bar {
    position: fixed; right: 24px; bottom: 16px; width: 420px; z-index: 30;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px 8px 16px; border-radius: 16px; border: 1px solid var(--glass-border);
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.pos-cash-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-secondary); }
.pos-cash-label { font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.pos-cash-label.is-closed { color: var(--warning); }
.pos-cash-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.pos-empty { color: var(--text-muted); font-size: 13px; text-align: center; margin: 20px 0; }

/* Popups del POS: el vidrio de .modal-content, contenido armado en JS. */
.pos-modal-content { max-width: 560px; max-height: 90vh; overflow-y: auto; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
#pos-modal.is-receipt .pos-modal-content { max-width: 420px; }
/* Comprobante (Venta registrada, Caja cerrada): casi opaco para que se lea el detalle; solo en pantalla, al imprimir va sin fondo. */
@media screen {
    #pos-modal.is-receipt .pos-modal-content { background: rgba(15, 20, 53, 0.92); }
    html[data-bg-tone="light"] #pos-modal.is-receipt .pos-modal-content { background: rgba(255, 255, 255, 0.92); }
}
.pos-modal-content .modal-body { display: grid; gap: 12px; }
.pos-field { display: grid; gap: 4px; }
.pos-hint { margin: 0; font-size: 13px; color: var(--text-secondary); }
.pos-hint.is-ok { color: var(--success); }
.pos-hint.is-bad { color: var(--pos-alert); }
.pos-inline-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.pos-list { display: grid; gap: 8px; }
.pos-list-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04);
}
.pos-list-row strong { display: block; font-size: 14px; }
.pos-list-row small { display: block; font-size: 12px; color: var(--text-muted); }
.pos-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-summary div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 13px; }
.pos-summary span { color: var(--text-muted); }
.pos-summary-expected { grid-column: 1 / -1; border: 1px solid var(--glass-accent-border); }
.pos-summary-expected strong { color: var(--neon-cyan); }
.pos-subtitle { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pos-row-icons { display: flex; gap: 6px; }
.pos-mobile-only { display: none; }
.pos-mobile-slot { display: none !important; }
.pos-payment-section, .pos-customer-section { display: grid; gap: 10px; min-width: 0; }
.pos-void-form { flex-basis: 100%; display: flex; gap: 6px; align-items: center; }
.pos-void-form .pos-input { flex: 1; padding: 6px 10px; font-size: 13px; }
.pos-btn-danger { color: var(--pos-alert); border-color: var(--pos-alert); }
.pos-btn-danger:hover { color: var(--pos-alert); border-color: var(--pos-alert); background: var(--pos-alert-bg); }
.pos-cash-stale { color: var(--warning); font-weight: 600; }
.pos-sign { margin-top: 24px !important; }

.pos-receipt { text-align: center; font-size: 13px; }
.pos-receipt h3 { margin: 0 0 4px; font-size: 18px; }
.pos-receipt p { margin: 2px 0; color: var(--text-secondary); }
.pos-receipt table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.pos-receipt td, .pos-receipt th { padding: 4px 0; text-align: left; }
.pos-receipt td:last-child, .pos-receipt th:last-child { text-align: right; }
.pos-receipt-totals { border-top: 1px dashed var(--glass-border); }
.pos-receipt-totals th { font-size: 16px; }

.pos-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 2000;
    max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px; font-size: 13px;
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); color: var(--text-primary);
    opacity: 0; pointer-events: none; transition: all var(--transition-fast);
}
.pos-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pos-toast.is-ok { border-color: rgba(6, 255, 165, 0.5); }
.pos-toast.is-error { border-color: var(--pos-alert); }

/* Foco visible en todo control del POS (el outline nativo se quitaba solo en inputs). */
.pos-icon-btn:focus-visible, .pos-btn:focus-visible, .pos-qty-btn:focus-visible, .pos-tile:focus-visible,
.pos-chip:focus-visible, .pos-tab-chip:focus-visible, .pos-combo-option:focus-visible, .pos-link:focus-visible,
.pos-toast-action:focus-visible, .pos-qty input:focus-visible {
    outline: 2px solid var(--neon-cyan); outline-offset: 2px;
}
.pos-qty input:focus { border-color: var(--neon-cyan); }
.pos-toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.pos-toast-action {
    padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); color: var(--neon-cyan);
}
.pos-mobile-bar { display: none; }
@keyframes pos-register-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 189, 77, 0); border-color: rgba(255, 189, 77, .55); }
    50% { box-shadow: 0 0 0 5px rgba(255, 189, 77, .2); border-color: var(--warning); color: var(--warning); }
}
@media (prefers-reduced-motion: reduce) {
    .pos-tile, .pos-icon-btn, .pos-btn, .pos-toast, .pos-tooltip { transition: none; }
    .pos-tile:not(:disabled):hover { transform: none; }
}

@media (max-width: 1000px) {
    .pos-toolbar { flex-direction: column; align-items: stretch; }
    .pos-warehouse-control { width: 100%; }
    .pos-warehouse { width: 100%; }
    .pos-warehouse select { flex: 1; }
    .pos-layout { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
    .pos-ticket { position: static; max-height: none; }
    .pos-cash-bar { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .pos-layout { padding-bottom: 150px; }
    .pos-mobile-bar {
        position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 31;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 8px 10px 8px 16px; border-radius: 16px; border: 1px solid var(--glass-accent-border);
        background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    }
    .pos-mobile-bar[hidden] { display: none; }
    .pos-mobile-total { display: grid; }
    .pos-mobile-total small { font-size: 12px; color: var(--text-muted); }
    .pos-mobile-total strong { font-size: 22px; line-height: 1.1; color: var(--neon-cyan); font-variant-numeric: tabular-nums; }
    .pos-mobile-bar .pos-btn { min-height: 44px; }
    .pos-ticket { overflow: visible; display: grid; }
    .pos-ticket-body { overflow: visible; }
    .pos-ticket-foot {
        position: sticky; bottom: 70px; z-index: 2; margin: 0 -18px; padding: 10px 18px;
        background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--glass-border);
    }
    .pos-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .pos-inline-form { grid-template-columns: 1fr 1fr; }
    .pos-summary { grid-template-columns: 1fr; }
}

/* Tactil: objetivos de 44px (los de 26-28px fallaban con el pulgar). Los iconos
   conservan su tamano; crece la zona de toque. */
@media (pointer: coarse), (max-width: 1000px) {
    .pos-icon-btn, .pos-icon-btn-sm { width: 44px; height: 44px; border-radius: 12px; }
    .pos-icon-btn-lg { width: 56px; height: auto; min-height: 56px; }
    .pos-icon-btn svg, .pos-icon-btn-sm svg { width: 20px; height: 20px; }
    .pos-qty-btn { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; }
    .pos-qty input { width: 52px; height: 44px; font-size: 15px; }
    .pos-chip, .pos-tab-chip { min-height: 40px; padding: 8px 16px; }
    .pos-btn { min-height: 44px; }
    .pos-line { grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: 6px; }
    .pos-line-delete { width: 44px; height: 44px; }
    .pos-price-input { min-height: 36px; font-size: 15px; }
    .pos-cash-actions { gap: 8px; }
}

/* POS móvil: el catálogo y el ticket son vistas separadas dentro de la
   pantalla. Solo sus listas desplazan; el documento y los controles quedan fijos. */
@media (max-width: 720px) {
    body.pos-page {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    }
    .pos-layout {
        flex: 1 1 0;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        padding: 10px 12px;
        overflow: hidden;
    }
    .pos-catalog, .pos-ticket { grid-area: 1 / 1; min-width: 0; min-height: 0; }
    .pos-catalog { height: 100%; overflow: hidden; gap: 8px; }
    .pos-toolbar { position: relative; flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    .pos-warehouse-control, .pos-search-control {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        flex: 0 0 44px;
        width: 44px;
        min-width: 0;
        height: 44px;
        overflow: hidden;
        border: 1px solid transparent;
        border-radius: 12px;
        background: transparent;
        transition: flex-grow 240ms cubic-bezier(.2,.75,.25,1), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .pos-warehouse-control.is-open, .pos-search-control.is-open {
        flex: 1 1 44px;
        border-color: var(--glass-border);
        background: var(--glass-bg-heavy);
        box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
    }
    .pos-icon-btn.pos-warehouse-toggle, .pos-search-control .pos-search-toggle {
        display: inline-flex;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0;
    }
    .pos-warehouse-control .pos-warehouse {
        flex: 0 1 0;
        width: 0;
        max-width: 0;
        min-width: 0;
        min-height: 40px;
        padding: 0;
        gap: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        font-size: 12px;
        transition: max-width 240ms cubic-bezier(.2,.75,.25,1), opacity 120ms ease, padding 240ms ease;
    }
    .pos-warehouse-control.is-open .pos-warehouse {
        flex: 1 1 auto;
        width: auto;
        max-width: 1000px;
        padding: 0 8px 0 2px;
        gap: 6px;
        opacity: 1;
        visibility: visible;
    }
    .pos-warehouse-control .pos-warehouse span { flex: 0 0 auto; }
    .pos-warehouse-control .pos-warehouse select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 40px;
        max-width: 100%;
        padding: 7px 24px 7px 8px;
        border-color: transparent;
        background-color: transparent;
    }
    /* Safari auto-zooms focused fields below 16px. Keep the POS viewport
       stable when the keyboard opens. */
    .pos-page input:not([type="checkbox"]):not([type="radio"]),
    .pos-page select,
    .pos-page textarea { font-size: 16px; }
    .pos-warehouse-control.is-open:focus-within { border-color: var(--glass-accent-border); }
    .pos-icon-btn.pos-mobile-register-open {
        display: inline-flex;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        color: var(--warning);
    }
    .pos-mobile-register-open:not([hidden]) { animation: pos-register-attention 1.6s ease-in-out infinite; }
    .pos-icon-btn.pos-mobile-register-open[hidden] { display: none; }
    .pos-search-control {
        flex: 0 0 44px;
        justify-content: flex-start;
    }
    .pos-search-control .pos-input {
        flex: 0 1 0;
        width: 0;
        min-width: 0;
        max-width: 0;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-width 240ms cubic-bezier(.2,.75,.25,1), opacity 120ms ease, padding 240ms ease;
    }
    .pos-search-control.is-open .pos-input {
        flex: 1 1 auto;
        width: auto;
        max-width: 1000px;
        padding: 9px 10px;
        border-color: transparent;
        background: transparent;
        opacity: 1;
        visibility: visible;
    }
    .pos-search-control:focus-within { border-color: var(--glass-accent-border); }
    .pos-search-control.is-open .pos-input:focus { border-color: transparent; }
    .pos-search-control .pos-input { font-size: 14px; }
    .pos-floor-tabs { flex: 1 1 100%; order: 10; }
    .pos-closed-open { display: none; }
    .pos-chips {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 1px 5px;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pos-chips::-webkit-scrollbar { display: none; }
    .pos-chip { flex: 0 0 auto; min-height: 36px; padding: 6px 11px; white-space: nowrap; scroll-snap-align: start; }
    .pos-grid {
        flex: 1 1 0;
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2px 2px 8px;
        align-content: start;
        scrollbar-width: none;
    }
    .pos-grid::-webkit-scrollbar, .pos-ticket-body::-webkit-scrollbar { display: none; }
    .pos-tile {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 8px;
        min-width: 0;
        min-height: 70px;
        padding: 7px;
        border-radius: 12px;
    }
    .pos-tile-image { grid-row: 1 / 3; width: 52px; height: 52px; aspect-ratio: auto; border-radius: 9px; }
    .pos-tile-initial { font-size: 24px; }
    .pos-tile-badge { top: 4px; right: 4px; padding: 1px 5px; font-size: 9px; }
    .pos-tile-name { align-self: end; padding: 0; font-size: 12px; line-height: 1.2; }
    .pos-tile-price { align-self: start; padding: 0; font-size: 13px; }
    .pos-closed-note { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; padding: 8px 9px; font-size: 12px; }
    .pos-closed-note > span { flex: 1 1 auto; min-width: 0; }
    .pos-closed-open { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 10px; }
    .pos-closed-open-label { display: none; }
    .pos-floor { flex: 1 1 0; min-height: 0; overflow: hidden; }
    .pos-floor[hidden] { display: none; }
    .pos-floor-stage { min-height: 0; }

    .pos-ticket {
        display: none;
        position: static;
        height: 100%;
        max-height: none;
        gap: 6px;
        padding: 8px;
        overflow: hidden;
        border-radius: 16px;
    }
    .pos-page.is-ticket-view .pos-catalog { display: none; }
    .pos-page.is-ticket-view .pos-ticket { display: flex; }
    .pos-ticket-head { flex: 0 0 auto; padding-bottom: 5px; }
    .pos-ticket-head h2 { flex: 0 0 auto; }
    .pos-row-icons { flex: 0 0 auto; gap: 4px; }
    .pos-row-icons .pos-icon-btn-sm { width: 36px; height: 36px; border-radius: 10px; }
    .pos-row-icons .pos-icon-btn-sm svg { width: 18px; height: 18px; }
    .pos-mobile-only { display: inline-flex; }
    .pos-row-icons .pos-mobile-only[hidden] { display: none; }
    .pos-ticket-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        gap: 6px;
        scrollbar-width: none;
    }
    .pos-ticket-body > * { flex: 0 0 auto; width: 100%; }
    .pos-ticket-body > .pos-box { display: none; }
    .pos-ticket-foot { gap: 0; padding: 0; border: 0; }
    .pos-ticket-foot > .pos-actions { display: none; }
    .pos-lines {
        flex: 1 1 0;
        grid-auto-rows: 48px;
        align-content: start;
        gap: 2px;
        min-height: 44px;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pos-line { grid-template-columns: minmax(0, 1fr) auto auto 34px; gap: 5px; padding: 6px; }
    .pos-line-name { font-size: 12px; }
    .pos-line-delete { width: 34px; height: 34px; border-radius: 8px; }
    .pos-line-delete svg { width: 16px; height: 16px; }
    .pos-qty { gap: 2px; }
    .pos-qty-btn { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
    .pos-qty input { width: 38px; height: 34px; font-size: 16px; }
    .pos-price-input { width: 7ch; max-width: 8ch; min-height: 34px; font-size: 16px; }
    .pos-sums { gap: 2px; }
    .pos-total-bar { padding: 8px 11px; }
    .pos-total-bar strong { font-size: 25px; }
    .pos-box { gap: 8px; padding: 0; border: 0; background: transparent; }
    .pos-payment-section, .pos-customer-section { gap: 8px; }
    .pos-ticket-foot {
        position: static;
        flex: 0 0 auto;
        margin: 0;
        padding: 6px 0 0;
        border-top: 1px solid var(--glass-border);
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .pos-ticket-foot { padding: 0; border-top: 0; }
    .pos-charge { min-height: 48px; padding: 9px 8px; font-size: 14px; }
    .pos-icon-btn-lg { width: 48px; min-height: 48px; }

    .pos-mobile-bar {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 31;
        flex: 0 0 auto;
        display: flex;
        min-height: 54px;
        margin: 0 10px 6px;
        padding: 6px 8px 6px 12px;
        gap: 8px;
        border-radius: 14px;
    }
    .pos-mobile-bar[hidden] { display: none; }
    .pos-mobile-total { display: grid; flex: 1 1 auto; min-width: 0; }
    .pos-mobile-total small { font-size: 10px; }
    .pos-mobile-total strong { overflow: hidden; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; }
    .pos-mobile-bar .pos-btn { flex: 0 0 auto; min-width: 0; min-height: 42px; padding: 7px 8px; font-size: 11px; white-space: nowrap; }
    #pos-mobile-receive { gap: 4px; min-width: 70px; }
    #pos-mobile-receive[hidden] { display: none !important; }
    #pos-mobile-receive svg { width: 16px; height: 16px; }
    #pos-mobile-go { max-width: 104px; }
    .pos-page:not(.is-ticket-view) #pos-mobile-receive { display: none; }

    .pos-mobile-checkout {
        position: fixed; top: var(--pos-visual-top, 0px); right: 0; left: 0; height: var(--pos-visual-height, 100dvh);
        z-index: 1001; display: none; align-items: center; justify-content: center;
        padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
        background: rgba(8, 10, 28, .48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    }
    .pos-mobile-checkout.is-open { display: flex; }
    .pos-mobile-checkout-card {
        display: flex; flex-direction: column; width: min(100%, 560px); max-height: 92vh; max-height: 92dvh; min-height: 0;
        padding: 14px; border: 1px solid var(--glass-border); border-radius: 20px;
        background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
        box-shadow: 0 16px 48px rgba(0, 0, 0, .34);
    }
    .pos-mobile-checkout[data-panel="customer"] .pos-mobile-checkout-card {
        height: min(92vh, 720px); height: min(92dvh, 720px);
        max-height: calc(var(--pos-visual-height, 100dvh) - 24px);
    }
    .pos-mobile-checkout-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
    .pos-mobile-checkout-head h2 { margin: 0; font-size: 18px; }
    .pos-mobile-checkout-total {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto;
        margin: 10px 0; padding: 10px 12px; border-radius: 12px;
        background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border);
    }
    .pos-mobile-checkout-total span { color: var(--text-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
    .pos-mobile-checkout-total strong { color: var(--neon-cyan); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .pos-mobile-checkout-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .pos-mobile-checkout .pos-box { gap: 12px; }
    .pos-mobile-checkout.is-busy .pos-mobile-checkout-scroll { pointer-events: none; opacity: .65; }
    .pos-mobile-checkout[data-panel="payments"] .pos-customer-section { display: none; }
    .pos-mobile-checkout[data-panel="customer"] .pos-payment-section { display: none; }
    .pos-mobile-checkout[data-panel="customer"] .pos-combo { display: grid; gap: 6px; }
    .pos-mobile-checkout[data-panel="customer"] .pos-combo-panel:not([hidden]) {
        position: static; width: 100%; margin-top: 0; box-shadow: none;
    }
    .pos-mobile-checkout[data-panel="customer"] .pos-combo-list { max-height: min(32dvh, 240px); }
    .pos-mobile-checkout-actions { flex: 0 0 auto; margin-top: 10px; }
    .pos-mobile-checkout:not([data-panel="checkout"]) .pos-mobile-checkout-actions { display: none; }
    .pos-mobile-checkout-actions .pos-actions { width: 100%; }
    .pos-mobile-checkout-actions #pos-clear { display: none; }
    .pos-mobile-checkout-actions .pos-charge { min-height: 50px; font-size: 14px; }
    .pos-mobile-checkout-error { flex: 0 0 auto; margin-top: 8px; }

    .pos-cash-bar {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 30;
        flex: 0 0 auto;
        width: auto;
        min-height: 46px;
        margin: 0 10px 8px;
        padding: 4px 7px 4px 11px;
        border-radius: 13px;
        gap: 6px;
    }
    .pos-cash-info { gap: 3px 7px; font-size: 10px; }
    .pos-cash-label { font-size: 10px; }
    .pos-cash-actions { gap: 4px; }
    .pos-cash-bar .pos-icon-btn { width: 38px; height: 38px; }
    .pos-cash-bar .pos-icon-btn svg { width: 18px; height: 18px; }
    .pos-toast { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 360px) {
    .pos-ticket-head { gap: 4px; }
    .pos-ticket-head h2 { font-size: 11px; }
    .pos-ticket-meta { display: none; }
    .pos-row-icons .pos-icon-btn-sm { width: 32px; height: 32px; border-radius: 9px; }
    .pos-row-icons .pos-icon-btn-sm svg { width: 16px; height: 16px; }
    .pos-mobile-bar { gap: 5px; padding-right: 6px; padding-left: 8px; }
    .pos-mobile-total strong { font-size: 16px; }
    #pos-mobile-receive { min-width: 62px; padding-right: 6px; padding-left: 6px; font-size: 10px; }
    #pos-mobile-go { max-width: 86px; padding-right: 6px; padding-left: 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pos-search-control, .pos-search-control .pos-input, .pos-warehouse-control, .pos-warehouse-control .pos-warehouse {
        transition-duration: 0.01ms;
    }
    .pos-mobile-register-open { animation: none !important; }
}

/* Impresion: solo el comprobante, negro sobre blanco, ancho de ticketera. */
@media print {
    body.pos-page > :not(#pos-modal) { display: none !important; }
    body.pos-page { background: #fff !important; }
    #pos-modal { position: static; display: block; backdrop-filter: none; }
    #pos-modal .pos-modal-content { background: none; border: none; box-shadow: none; max-width: 80mm; width: 100%; max-height: none; }
    #pos-modal .modal-header, #pos-modal .pos-form-actions { display: none; }
    .pos-receipt, .pos-receipt p, .pos-receipt td, .pos-receipt th { color: #000 !important; }
}

/* Reportes > Cierres de caja (growth/assets/js/pages/owner/cash-closings.js) */
.cash-closings-date {
    padding: 7px 10px; border-radius: 10px; font: inherit; font-size: 13px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-primary);
}
.cash-closings-date:focus { outline: none; border-color: var(--neon-cyan); }
.cash-closings-totals { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cash-diff-ok { color: var(--success); font-weight: 600; }
.cash-diff-bad { color: var(--danger); font-weight: 600; }
.cash-cut h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cash-cut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cash-cut-table td { padding: 5px 0; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.cash-cut-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.cash-cut-table small { display: block; color: var(--text-muted); font-size: 11px; }

/* Ventas: estado fiscal y notas de credito (growth/assets/js/pages/owner/credit-notes.js) */
.sale-state { display: flex; flex-wrap: wrap; gap: 4px; }
.fiscal-badge, .credit-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap;
    border: 1px solid var(--glass-border); background: rgba(10, 14, 39, 0.6); color: var(--text-secondary);
}
.fiscal-badge.is-accepted { color: #5dffbf; background: rgba(6, 255, 165, 0.16); border-color: rgba(6, 255, 165, 0.6); }
.fiscal-badge.is-sent { color: #7df4ff; background: rgba(0, 255, 255, 0.12); border-color: rgba(0, 255, 255, 0.5); }
.fiscal-badge.is-pending { color: #ffd27a; background: rgba(255, 189, 77, 0.16); border-color: rgba(255, 189, 77, 0.6); }
.fiscal-badge.is-error, .fiscal-badge.is-rejected { color: #ffb0ba; background: rgba(255, 90, 110, 0.2); border-color: rgba(255, 120, 135, 0.7); }
.credit-badge { color: #ecc4ff; background: rgba(178, 75, 243, 0.3); border-color: rgba(205, 130, 255, 0.75); }
.credit-badge.is-full { color: #fff; background: #9a3de0; border-color: #c98bff; }
.credit-note-lines { display: grid; gap: 6px; margin: 8px 0; }
.credit-note-line {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.04);
}
.credit-note-line small { display: block; color: var(--text-muted); font-size: 11.5px; }
.credit-note-line input { width: 80px; text-align: center; }
.credit-note-line.is-done { opacity: 0.5; }
.credit-note-total { margin-left: auto; font-weight: 700; color: var(--neon-cyan); }

/* Gestion > Promociones: cupones y tarjetas de regalo lado a lado. */
.promos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .promos-grid { grid-template-columns: 1fr; } }

/* Gestion > Productos: foto del producto (formulario y miniatura de la lista). */
.product-image-field { display: flex; gap: 16px; align-items: flex-start; }
.product-image-picker {
    flex-shrink: 0; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--text-muted);
    border: 1px dashed var(--glass-border); background: rgba(255, 255, 255, 0.04);
}
.product-image-picker:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.product-image-picker img { width: 100%; height: 100%; object-fit: cover; }
.product-image-picker img[hidden], .product-image-picker span[hidden] { display: none; }
.product-name-with-thumb { display: flex; align-items: center; gap: 10px; }
.product-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }


/* ==========================================================================
   Plano de mesas (restaurante) — lo dibuja shared/axia-floor.js. Lo usan el
   editor de Gestion > Mesas (que agrega manijas y paleta en pages.css) y el
   mapa del POS.
   ========================================================================== */
/* Estilos de piso — el editor de Restroworks/OpenTable usa un grid oscuro
   por defecto independiente del tema claro/oscuro del sitio (es el "papel"
   del plano, no la UI de Axia) — por eso estos 3 son fijos, no siguen
   prefers-color-scheme. */
.floor-plan-canvas.floor-style-dark_grid {
  background-color: #14161f;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.floor-plan-canvas.floor-style-light_grid {
  background-color: #f4f5f7;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.floor-plan-canvas.floor-style-wood {
  background-color: #6b4a34;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 2px,
    transparent 2px,
    transparent 26px
  );
}

.floor-table {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  cursor: grab;
  user-select: none;
  text-align: center;
  background: radial-gradient(circle at 35% 30%, #f5f5f7 0%, #dcdce1 70%);
}

.floor-table-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.floor-table .floor-table-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1c1c22;
  line-height: 1.1;
}

/* Mesa con una reserva de HOY ya asignada desde el tab Reservas. outline
   ambar (no rojo, para no leerse como error) + cartel con la hora debajo
   del nombre. */
.floor-table.reserved {
  outline: 2px solid #e08a1e;
  outline-offset: 2px;
}

.floor-table-reserved-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #7a4a06;
  background: #ffd98a;
  border-radius: 999px;
  padding: 1px 6px;
  margin-top: 2px;
  white-space: nowrap;
}

/* Sillas — SVG generado por silla (ver chairArt() en tables.js): cuadrada,
   con respaldo, rotada para que el respaldo quede del lado contrario a la
   mesa. Hijo del propio .floor-table para que roten juntas con la mesa. */
.floor-chair {
  position: absolute;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.floor-chair svg,
.floor-art svg {
  display: block;
}

/* Dibujo SVG de sofas y plantas (ver paintArt() en tables.js): ocupa toda
   la caja del objeto y queda debajo de la etiqueta y las manijas. */
.floor-art {
  position: absolute;
  inset: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.floor-table.shape-round { border-radius: 50%; }

.floor-table.shape-square { border-radius: 8px; }

.floor-table.shape-rectangle { border-radius: 8px; }

.floor-table.shape-booth {
  border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 2px, transparent 2px, transparent 14px),
    radial-gradient(circle at 30% 25%, #e6c99a 0%, #d8b98a 55%, #b8905e 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.15);
}

.floor-table.shape-sofa,
.floor-table.shape-plant,
.floor-table.shape-planter {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.floor-table.shape-wall {
  border-radius: 4px;
  background: #7a7a85;
}

.floor-table.shape-bar {
  border-radius: 6px;
  background: repeating-linear-gradient(
    90deg, #5b3a29 0px, #5b3a29 10px, #6b4632 10px, #6b4632 20px
  );
  border-color: rgba(255, 255, 255, 0.4);
}

.floor-table.shape-door {
  border-radius: 3px;
  background: #caa46b;
  border-style: dashed;
}

.floor-table.shape-column {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b7b7c0 0%, #8f8f9a 70%);
}


/* Tooltip instantaneo de Axia (shared/axia-tooltips.js). Por encima de modales y menus. */
.axia-tip {
    position: fixed; top: 0; left: 0; z-index: 2147483000; max-width: 280px; pointer-events: none;
    padding: 5px 9px; border-radius: 6px; font-size: 11.5px; line-height: 1.35; font-weight: 500;
    background: var(--glass-bg-heavy); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0; visibility: hidden; transition: opacity 0.05s linear;
}
.axia-tip.is-visible { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .axia-tip { transition: none; } }


/* Titulo a la izquierda de la barra de pestanas (como "Centro operativo" en Gestion):
   separa las pestanas del borde y dice en que area se esta. */
.section-tabs .section-tabs-title {
    flex-shrink: 0;
    padding-right: 14px;
    margin-right: 4px;
    border-right: 1px solid var(--glass-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
@media (max-width: 720px) { .section-tabs .section-tabs-title { display: none; } }

/* Recibo de pago / cobro (Ventas, Compras y Finanzas; lo comparten Growth y Collections): ticket angosto de papel. Solo montos, alineados a la
   derecha en cifras tabulares; el modal mide lo que mide el ticket, sin scroll. */
.product-modal > .product-modal-card-wrap:has(.receipt) { width: min(720px, calc(100vw - 1rem)); }
.product-modal-card:has(.receipt) { height: auto; max-height: none; }
.product-modal-card > [data-role="modal-body"]:has(.receipt) { padding: 6px 16px 2px; overflow: visible; }

.receipt {
    --ink: #16202c;
    --ink-soft: #4b5568;
    --ink-faint: #8a93a3;
    --rule: #d9d2c3;
    display: grid;
    gap: 12px;
    padding: 18px 20px 16px;
    border-radius: 10px;
    background: #faf8f3;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.receipt-head { display: grid; gap: 2px; justify-items: center; text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--ink-faint); }
.receipt-head h3 { margin: 0; color: var(--ink); font-size: 1.15em; font-weight: 800; letter-spacing: 0; }
.receipt-no { margin: 0; color: #d93a40; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1em; font-weight: 700; }
.receipt-party { margin: 2px 0 0; color: var(--ink-soft); font-weight: 600; }

.receipt-sum { display: grid; gap: 4px; margin: 0; }
.receipt-sum > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.receipt-sum dt { margin: 0; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipt-sum dd { margin: 0; color: var(--ink); white-space: nowrap; text-align: right; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.receipt-sum .is-total { padding-top: 6px; border-top: 1px solid var(--rule); }
.receipt-sum .is-total dt, .receipt-sum .is-total dd { color: var(--ink); font-weight: 800; font-size: 1.05em; }
.receipt-sum .is-over dd { color: #d93a40; white-space: normal; font-family: inherit; font-size: 0.9em; }

.receipt-history { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--ink-faint); }
.receipt-history h4 { margin: 0; color: var(--ink-faint); font-size: 0.85em; font-weight: 700; }
.receipt-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.receipt-table th { padding: 0 8px 4px 0; color: var(--ink-faint); font-size: 0.85em; font-weight: 700; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.receipt-table td { max-width: 190px; padding: 5px 10px 5px 0; color: var(--ink-soft); vertical-align: baseline; border-bottom: 1px dotted var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipt-table td:first-child { white-space: nowrap; }
.receipt-table th.num, .receipt-table td.num { padding-right: 0; text-align: right; white-space: nowrap; }
.receipt-table td.num { color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.receipt-table tbody tr:last-child td { border-bottom: 0; }

.receipt-stamp { justify-self: center; margin: 2px 0; padding: 3px 16px; color: #1c8a5e; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; border: 2px solid #1c8a5e; border-radius: 6px; transform: rotate(-3deg); }

.receipt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding-top: 12px; border-top: 1px dashed var(--ink-faint); }
.receipt-form > .receipt-wide, .receipt-form > [data-role="rate-row"] { grid-column: 1 / -1; }
/* Cobro de venta (mas campos): tres columnas para que el recibo no pase del alto de la pantalla. */
.receipt-form:has(> :nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.receipt-form [hidden] { display: none; }
.receipt .product-field { display: grid; gap: 3px; min-width: 0; margin: 0; }
.receipt .product-field > span:first-child { color: var(--ink-soft); font-size: 0.85em; font-weight: 600; letter-spacing: 0; text-transform: none; }
.receipt input, .receipt select, .receipt textarea {
    width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 6px 8px;
    font: inherit; font-size: 0.95em; color: var(--ink);
    background: #fff; border: 1px solid var(--rule); border-radius: 6px; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.receipt input:focus, .receipt select:focus, .receipt textarea:focus { outline: 2px solid var(--ink-soft); outline-offset: -1px; }
.receipt input::placeholder, .receipt textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.receipt textarea { resize: vertical; min-height: 36px; }
.receipt-after { padding-top: 2px; }
.receipt-hint { margin: -6px 0 0; color: var(--ink-soft); font-size: 0.85em; }
.receipt-hint:empty { display: none; }
@media (max-width: 560px) {
    .receipt { padding: 16px 14px; }
    .receipt-form { grid-template-columns: 1fr; }
    /* Tabla de pagos en telefono: cada pago es un bloque (fecha y monto arriba, el resto debajo con su etiqueta). */
    .receipt-table thead { display: none; }
    .receipt-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 6px 0; border-bottom: 1px dotted var(--rule); }
    .receipt-table tbody tr:last-child { border-bottom: 0; }
    .receipt-table td { max-width: none; padding: 0; border: 0; }
    .receipt-table td:first-child { color: var(--ink); font-weight: 600; }
    .receipt-table td:not(:first-child):not(.num) { grid-column: 1 / -1; order: 2; font-size: 0.92em; white-space: normal; overflow-wrap: anywhere; }
    .receipt-table td:not(:first-child):not(.num)::before { content: attr(data-label) ": "; color: var(--ink-faint); }
}


/* Popup de Hacienda (growth/assets/js/components/hacienda-popup.js): Ventas y POS. */
.hz-popup { position: fixed; inset: 0; z-index: 30000; display: grid; place-items: center; padding: 16px; }
.hz-backdrop { position: absolute; inset: 0; backdrop-filter: blur(8px) saturate(126%); -webkit-backdrop-filter: blur(8px) saturate(126%); }
.hz-card {
  position: relative; width: min(520px, 100%); display: grid; justify-items: center; gap: 8px; padding: 22px 24px 20px;
  border: 1px solid var(--glass-card-border, rgba(255, 255, 255, 0.18)); border-radius: 24px;
  background: var(--glass-bg-heavy, rgba(30, 39, 73, 0.72)); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); text-align: center; color: var(--text-primary, #fff);
}
.hz-title { margin: 0; font-size: 1.05rem; }
.hz-text { margin: 0; min-height: 1.2em; font-size: 0.9rem; color: var(--text-secondary, rgba(255, 255, 255, 0.75)); white-space: pre-line; overflow-wrap: anywhere; }
.hz-actions { margin-top: 6px; }
.hz-actions[hidden] { display: none; }
.hz-scene { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.hz-path { fill: none; stroke: rgba(117, 217, 232, 0.45); stroke-width: 2; stroke-dasharray: 5 6; animation: hz-dash 0.8s linear infinite; }
.hz-pc rect, .hz-pc path, .hz-building rect, .hz-building path, .hz-building line { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.6; stroke-linejoin: round; }
.hz-pc .hz-screen { fill: rgba(117, 217, 232, 0.35); animation: hz-blink 1.6s ease-in-out infinite; }
.hz-building .hz-flag { fill: #49c7a2; stroke: none; transform-origin: 268px 22px; animation: hz-wave 1.2s ease-in-out infinite; }
.hz-sheet { offset-path: path("M70 70 Q160 10 250 70"); offset-rotate: 0deg; animation: hz-fly 1.8s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
.hz-sheet rect { fill: #fff; stroke: rgba(30, 40, 80, 0.4); stroke-width: 1; }
.hz-sheet line { stroke: #8a94b8; stroke-width: 1.6; stroke-linecap: round; }
.hz-mark { opacity: 0; transform-origin: 268px 78px; transform: scale(0.4); transition: opacity 220ms ease, transform 260ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.hz-mark circle { stroke: none; }
.hz-mark path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; display: none; }
@keyframes hz-fly { 0% { offset-distance: 0%; opacity: 0; transform: scale(0.6) rotate(-10deg); } 12% { opacity: 1; } 50% { transform: scale(1) rotate(8deg); } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; transform: scale(0.6) rotate(-6deg); } }
@keyframes hz-dash { to { stroke-dashoffset: -11; } }
@keyframes hz-blink { 50% { fill: rgba(117, 217, 232, 0.65); } }
@keyframes hz-wave { 50% { transform: skewY(-8deg) scaleX(0.9); } }
.hz-popup.is-done .hz-sheet, .hz-popup.is-done .hz-path, .hz-popup.is-done .hz-screen, .hz-popup.is-done .hz-flag { animation: none; }
.hz-popup.is-done .hz-sheet { opacity: 0; }
.hz-popup.is-done .hz-mark { opacity: 1; transform: scale(1); }
.hz-popup.is-ok .hz-mark circle { fill: #3fb27f; }
.hz-popup.is-ok .hz-mark-ok { display: block; }
.hz-popup.is-bad .hz-mark circle { fill: #e5484d; }
.hz-popup.is-bad .hz-mark-bad { display: block; }
.hz-popup.is-wait .hz-mark circle { fill: #f0a030; }
.hz-popup.is-wait .hz-mark-ok { display: block; }
@media (prefers-reduced-motion: reduce) { .hz-sheet, .hz-path, .hz-screen, .hz-flag { animation: none; } .hz-sheet { offset-distance: 50%; } }


/* Resultado de Hacienda en tabla + cuenta regresiva en el boton Cerrar. */
.hz-body { width: 100%; display: grid; gap: 10px; }
.hz-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; text-align: left; border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18)); border-radius: 10px; overflow: hidden; }
.hz-table th, .hz-table td { padding: 7px 10px; border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); vertical-align: top; }
.hz-table tr:last-child th, .hz-table tr:last-child td { border-bottom: 0; }
.hz-table th { width: 34%; font-weight: 600; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); background: rgba(255, 255, 255, 0.04); }
.hz-detail thead th { width: auto; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hz-detail td:first-child { width: 64px; color: #f0a030; font-weight: 700; }
.hz-table .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; }
.hz-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: rgba(240, 160, 48, 0.2); color: #f6c26b; }
.hz-popup.is-ok .hz-pill { background: rgba(63, 178, 127, 0.2); color: #6fe0ad; }
.hz-popup.is-bad .hz-pill { background: rgba(229, 72, 77, 0.2); color: #ff8a8e; }
.hz-note { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); text-align: left; }
.hz-close { display: inline-flex; align-items: center; gap: 8px; }
.hz-close b { min-width: 0.8em; font-variant-numeric: tabular-nums; }
.hz-count { width: 20px; height: 20px; transform: rotate(-90deg); }
.hz-count circle { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 3; }
.hz-count .hz-count-bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 62.83; stroke-dashoffset: calc(62.83 * (1 - var(--hz-left, 1))); transition: stroke-dashoffset 100ms linear; }
.hz-popup.is-paused .hz-count .hz-count-bar { stroke: #f6c26b; }
.hz-close { padding: 8px 16px; border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.25)); border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.hz-close:hover { background: rgba(255, 255, 255, 0.24); }

/* Pestana Hacienda: 2 columnas a todo el ancho; en cada tarjeta, 2 inputs por fila. */
.axia-hz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.axia-hz-state { grid-column: 1 / -1; margin: 0; }
.axia-hz-col { display: grid; gap: 12px; min-width: 0; }
.axia-hz-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.axia-hz-card {
    padding: 10px 12px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    min-width: 0;
}
.axia-hz-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.axia-hz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
.axia-hz-fields > .is-wide { grid-column: 1 / -1; }
.axia-hz .product-field { min-width: 0; gap: 3px; }
.axia-hz .product-field > span { font-size: 11.5px; }
.axia-settings-modal .axia-hz .product-field input,
.axia-settings-modal .axia-hz .product-field select { min-height: 34px; padding: 5px 9px; font-size: 13px; }
.axia-settings-modal .axia-hz .product-action { min-height: 34px; padding: 5px 12px; }
.axia-hz-inline { display: flex; gap: 8px; align-items: flex-end; min-width: 0; }
.axia-hz-inline > .product-field { flex: 1 1 auto; }
.axia-hz-inline > .product-action { flex: 0 0 auto; white-space: nowrap; }
.axia-hz-fields > .axia-hz-inline:not(.is-wide) { grid-column: span 1; }
.axia-hz .axia-hz-fields > .axia-settings-hint { margin: 0; }

/* Tipo de facturacion: dos botones de texto; con color solo cuando estan presionados. */
.axia-hz-toggles { display: flex; gap: 8px; }
.axia-settings-modal .axia-hz-toggle {
    flex: 1 1 0; min-height: 34px; padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 8px;
    background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.axia-settings-modal .axia-hz-toggle:hover { border-color: var(--neon-cyan); }
.axia-settings-modal .axia-hz-toggle.is-on { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); color: var(--neon-cyan); }

/* Secciones plegables (consecutivos, IMAP). */
.axia-hz-more { border-top: 1px solid var(--glass-border); padding-top: 6px; }
.axia-hz-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); padding: 2px 0 6px; }
.axia-hz-more[open] > summary { color: var(--text-primary); }

/* Impuestos: filas angostas dentro de media ventana (nombre, tarifa, quitar). */
.axia-hz-taxes { display: grid; gap: 6px; }
.axia-hz-tax { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 6px; align-items: center; }
.axia-settings-modal .axia-hz-tax input {
    min-width: 0; min-height: 32px; padding: 4px 9px; border: 1px solid var(--glass-border); border-radius: 8px; outline: none;
    background: rgba(255, 255, 255, 0.05); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary); font: inherit; font-size: 13px;
}
.axia-settings-modal .axia-hz-tax input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1); }
.axia-settings-modal .axia-hz-tax .product-action { min-height: 32px; padding: 4px 10px; }
.axia-hz-fields > .axia-hz-taxes + .product-action { justify-self: start; }

@media (max-width: 900px) {
    .axia-hz, .axia-hz-fields { grid-template-columns: minmax(0, 1fr); }
    .axia-hz-fields > .is-wide { grid-column: auto; }
}

/* Boton de solo icono junto a Registrar webhook. */
.axia-settings-modal .axia-hz .product-action.axia-hz-icon-btn { width: 34px; min-width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.axia-hz-icon-btn svg { width: 17px; height: 17px; }