/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-sans","display":"swap"}],"variableName":"inter"} ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12% }.__className_f367f3 {font-family: 'Inter', 'Inter Fallback';font-style: normal }.__variable_f367f3 {--font-sans: 'Inter', 'Inter Fallback' } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"IBM_Plex_Mono","arguments":[{"subsets":["latin"],"weight":["400","500","600","700"],"variable":"--font-mono","display":"swap"}],"variableName":"ibmPlexMono"} ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/58f386aa6b1a2a92-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/011e180705008d6f-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/7ba5fb2a8c88521c-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/92eeb95d069020cc-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/_next/static/media/d3ebbfd689654d3a-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/ef4d5661765d0e49-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/d29838c109ef09b4-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/e40af3453d7c920a-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/99dcf268bda04fe5-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/_next/static/media/98e207f02528a563-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/73cb51aac9c97f90-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/d26bbd13d6b70f89-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/20535187d867b7b9-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/5356a6a4f2c8c8d8-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/_next/static/media/db96af6b531dc71f-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/704b853f32d191d5-s.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/656feb427634a431-s.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/991629005c80bdf1-s.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/46e154b2fcbd6033-s.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/_next/static/media/37786be940ec402b-s.p.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face {font-family: 'IBM Plex Mono Fallback';src: local("Arial");ascent-override: 76.16%;descent-override: 20.43%;line-gap-override: 0.00%;size-adjust: 134.59% }.__className_b4c22e {font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback';font-style: normal }.__variable_b4c22e {--font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback' } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/tokens.css ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* ═══════════════════════════════════════════════════════════════════ Tokens de diseño — apps/ebill Nivel 0: Primitivos globales (sin semántica) Nivel 1: Marca lisoApps (--brand-*) Nivel 2: Semánticos de eBill (--ebill-*) Contexto: app de trabajo administrativo-contable. Predomina light mode. Orange (#FF6422) como accent de marca, restringido a CTAs, estados activos y — de forma excepcional — al indicador "MODO PRODUCCIÓN" (acción irreversible con consecuencias legales). La frecuencia de aparición del orange en pantalla debe ser baja para que el badge de producción siga siendo imposible de ignorar. Contraste verificado: - #FF6422 sobre #ffffff → 3.06:1 (insuficiente para texto AA). Por eso #FF6422 NUNCA se usa como color de texto sobre blanco. Para texto de accent se usa #C94E1A (orange-700) → 4.59:1 AA. - #FF6422 sobre #FFF4EF → 2.9:1. Idem. - texto blanco #ffffff sobre #FF6422 → 3.06:1. Insuficiente. Para texto sobre fondo orange: usar blanco solo en botones grandes donde el area de color provee contexto adicional (WCAG criterio 1.4.3 excepción "large text" ≥18pt bold). En CTAs se complementa con border-bottom y shadow para enriquecer contraste perceptual. - texto #ffffff sobre #C94E1A (hover del CTA) → 4.59:1 AA OK. - texto #0E1928 (brand-ink) sobre #FF6422 → ratio 5.1:1 AA OK. Se usa ink oscuro para labels sobre fondos orange en light mode. IBM Plex Mono para CUIT, CAE, importes: diferencia 0/O y 1/l/I de forma nativa con sus glifos diseñados para pantalla. Catastrófico confundir dígitos en números de comprobante o CUIT fiscal. ═══════════════════════════════════════════════════════════════════ */ /* ── Nivel 0: Primitivos ──────────────────────────────────────────── */ :root { /* Neutrales */ --color-neutral-0: #ffffff; --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-150: #eaecf0; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-650: #3f4756; --color-neutral-700: #374151; --color-neutral-750: #2d3748; --color-neutral-800: #1f2937; --color-neutral-850: #1a202c; --color-neutral-900: #111827; --color-neutral-950: #030712; /* Orange — escala primitiva para eBill */ --color-orange-50: #fff4ef; --color-orange-100: #ffe6d8; --color-orange-200: #ffc9a8; --color-orange-300: #ffa370; --color-orange-400: #ff7d45; --color-orange-500: #ff6422; /* --brand-orange exacto */ --color-orange-600: #e5530f; --color-orange-700: #c94e1a; /* texto AA sobre blanco: 4.59:1 */ --color-orange-800: #9c3b10; --color-orange-900: #7a2e0c; --color-orange-950: #3d1506; /* Verde — comprobante emitido / IVA débito OK */ --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-200: #bbf7d0; --color-green-300: #86efac; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-green-700: #15803d; --color-green-800: #166534; --color-green-900: #14532d; /* Rojo — rechazado AFIP / error CAE / NC */ --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-200: #fecaca; --color-red-300: #fca5a5; --color-red-400: #f87171; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-red-700: #b91c1c; --color-red-800: #991b1b; /* Azul — tipo comprobante A / modo homologación */ --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #93c5fd; --color-blue-400: #60a5fa; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-800: #1e40af; --color-blue-900: #1e3a8a; /* Amber — advertencias / modo producción alternativo / borrador */ --color-amber-50: #fffbeb; --color-amber-100: #fef3c7; --color-amber-200: #fde68a; --color-amber-300: #fcd34d; --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; --color-amber-600: #d97706; --color-amber-700: #b45309; --color-amber-800: #92400e; --color-amber-950: #451a03; /* Slate — anulado / textos secundarios oscuros */ --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; /* ── Nivel 1: Marca lisoApps ──────────────────────────────────── */ --brand-orange: #FF6422; /* accent exclusivo eBill */ --brand-orange-dark: #C94E1A; /* texto sobre fondo claro, AA 4.59:1 */ --brand-night: #060C14; /* page bg oscuro principal */ --brand-deep: #0A1525; /* section bg oscuro secundario */ --brand-surface: #0F1E35; /* card bg oscuro */ --brand-blue: #1865F5; /* CTA primario / azul lisoApps */ --brand-blue-bright: #3D82FF; /* highlights, links, énfasis */ --brand-canvas: #F4F7FF; /* secciones claras */ --brand-white: #E8EEFF; /* texto primario sobre fondo oscuro */ --brand-gray-mid: #6A82A4; /* body text / descriptions */ --brand-ink: #0E1928; /* texto headings en secciones claras */ --brand-ink-mid: #344D6E; /* texto body en secciones claras */ --brand-ink-light: #6880A2; /* texto secundario en secciones claras*/ /* Derivados con transparencia */ --brand-orange-dim: rgba(255, 100, 34, 0.08); --brand-orange-dim-md: rgba(255, 100, 34, 0.14); --brand-orange-border: rgba(255, 100, 34, 0.22); --brand-orange-border-md: rgba(255, 100, 34, 0.40); /* ═══════════════════════════════════════════════════════════════ Nivel 2: Semánticos de eBill — TEMA CLARO (default) App administrativa/contable, light mode predominante. Orange (#FF6422) como accent de alta escasez. ═══════════════════════════════════════════════════════════════ */ /* ── Superficies generales ────────────────────────────────────── */ --ebill-bg-app: var(--color-neutral-50); /* fondo de app (main area) */ --ebill-bg-page: var(--color-neutral-100); /* fondo exterior de página */ --ebill-bg-card: var(--color-neutral-0); /* cards / paneles */ --ebill-bg-card-raised: var(--color-neutral-0); /* card con sombra elevada */ --ebill-bg-sidebar: var(--color-neutral-0); /* sidebar nav */ --ebill-bg-topbar: var(--color-neutral-0); /* barra superior */ --ebill-bg-modal: var(--color-neutral-0); /* modales */ --ebill-bg-overlay: rgba(0, 0, 0, 0.35); /* backdrop de modales */ --ebill-bg-drawer: var(--color-neutral-0); /* drawers laterales */ --ebill-bg-table-header: var(--color-neutral-50); /* thead */ --ebill-bg-table-row: var(--color-neutral-0); /* tr normal */ --ebill-bg-table-row-alt: var(--color-neutral-50); /* tr zebrastripe */ --ebill-bg-table-row-hover: var(--color-orange-50); /* tr hover — tint orange sutil */ --ebill-bg-input: var(--color-neutral-0); /* inputs */ --ebill-bg-input-mono: var(--color-neutral-50); /* input CUIT/CAE (mono) */ --ebill-bg-badge: var(--color-neutral-100); /* badge genérico */ --ebill-bg-skeleton: var(--color-neutral-200); /* placeholder loading */ --ebill-bg-skeleton-shine: var(--color-neutral-100); --ebill-bg-empty: var(--color-neutral-50); /* empty state background */ --ebill-bg-section-kpi: var(--color-neutral-0); /* sección KPIs dashboard */ --ebill-bg-totals-sticky: var(--color-neutral-0); /* fila sticky de totales */ --ebill-bg-form-section: var(--color-neutral-50); /* sección del form (cabecera/items) */ --ebill-bg-form-item-row: var(--color-neutral-0); /* fila de item repetible */ --ebill-bg-form-item-row-alt: var(--color-neutral-50); /* fila alternada */ --ebill-bg-dropzone: var(--color-neutral-50); /* zona de drag-and-drop */ --ebill-bg-dropzone-active: var(--color-orange-50); /* dropzone con archivo encima */ --ebill-bg-preview: var(--color-neutral-50); /* preview de CSV */ --ebill-bg-progress: var(--color-neutral-100); /* track de progress bar */ --ebill-bg-empresa-card: var(--color-neutral-0); /* card en selector de empresa */ --ebill-bg-empresa-card-active: var(--color-orange-50); /* empresa seleccionada */ /* ── Texto ────────────────────────────────────────────────────── */ --ebill-text-primary: var(--color-neutral-900); /* headings, datos críticos */ --ebill-text-secondary: var(--color-neutral-600); /* labels, metadata */ --ebill-text-tertiary: var(--color-neutral-500); /* placeholders, hints */ --ebill-text-muted: var(--color-neutral-400); /* timestamps, ayudas */ --ebill-text-disabled: var(--color-neutral-300); /* controles deshabilitados */ --ebill-text-on-accent: var(--brand-ink); /* texto sobre fondo orange */ --ebill-text-on-dark: var(--brand-white); /* texto sobre fondo oscuro */ --ebill-text-link: var(--color-orange-700); /* links en light mode, AA OK */ --ebill-text-link-hover: var(--color-orange-800); --ebill-text-error: var(--color-red-600); --ebill-text-success: var(--color-green-700); --ebill-text-warning: var(--color-amber-700); --ebill-text-brand: var(--color-orange-700); /* texto en color accent, AA OK */ /* ── Bordes ───────────────────────────────────────────────────── */ --ebill-border-default: var(--color-neutral-200); /* borde genérico */ --ebill-border-card: var(--color-neutral-200); /* borde de card */ --ebill-border-table: var(--color-neutral-200); /* bordes de tabla */ --ebill-border-input: var(--color-neutral-300); /* borde input normal */ --ebill-border-input-focus: var(--brand-orange); /* foco en input */ --ebill-border-input-error: var(--color-red-500); --ebill-border-mono: var(--color-neutral-400); /* borde inputs CUIT/CAE (mono) */ --ebill-border-mono-focus: var(--brand-orange); --ebill-border-sidebar: var(--color-neutral-200); --ebill-border-topbar: var(--color-neutral-200); --ebill-border-modal: var(--color-neutral-200); --ebill-border-section: var(--color-neutral-150); /* separador de secciones */ --ebill-border-accent: var(--brand-orange); /* borde accent (foco, activo) */ --ebill-border-form-section: var(--color-neutral-200); /* entre secciones del form */ --ebill-border-dropzone: var(--color-neutral-300); /* borde dropzone */ --ebill-border-dropzone-active: var(--brand-orange); /* borde dropzone activa */ --ebill-border-item-row: var(--color-neutral-150); /* entre filas de items */ --ebill-border-totals: var(--color-neutral-200); /* borde superior del sticky */ --ebill-border-empresa-active: var(--brand-orange); /* empresa seleccionada */ /* ── CTAs y botones ───────────────────────────────────────────── */ /* Botón primario (Emitir y obtener CAE) */ --ebill-btn-primary-bg: var(--brand-orange); --ebill-btn-primary-bg-hover: #E5530F; /* orange -10% luminancia */ --ebill-btn-primary-bg-press: #C94E1A; /* orange -18% luminancia */ --ebill-btn-primary-text: var(--color-neutral-0); /* blanco — solo botones grandes */ --ebill-btn-primary-shadow: 0 2px 8px rgba(255, 100, 34, 0.35); --ebill-btn-primary-shadow-hover: 0 4px 16px rgba(255, 100, 34, 0.45); /* Botón de acción crítica (Emitir en PRODUCCIÓN) — con ring naranja */ --ebill-btn-critical-bg: var(--brand-orange); --ebill-btn-critical-bg-hover: #E5530F; --ebill-btn-critical-text: var(--color-neutral-0); --ebill-btn-critical-shadow: 0 4px 14px rgba(255, 100, 34, 0.40); --ebill-btn-critical-shadow-hover: 0 6px 20px rgba(255, 100, 34, 0.55); --ebill-btn-critical-ring: 0 0 0 3px rgba(255, 100, 34, 0.40); /* Botón secundario */ --ebill-btn-secondary-bg: var(--color-neutral-0); --ebill-btn-secondary-bg-hover: var(--color-neutral-50); --ebill-btn-secondary-border: var(--color-neutral-300); --ebill-btn-secondary-text: var(--color-neutral-700); /* Botón de borrador (guardar sin emitir) */ --ebill-btn-draft-bg: var(--color-neutral-100); --ebill-btn-draft-bg-hover: var(--color-neutral-200); --ebill-btn-draft-border: var(--color-neutral-300); --ebill-btn-draft-text: var(--color-neutral-700); /* Botón destructivo (anular, eliminar) */ --ebill-btn-danger-bg: var(--color-red-600); --ebill-btn-danger-bg-hover: var(--color-red-700); --ebill-btn-danger-text: var(--color-neutral-0); --ebill-btn-danger-shadow: 0 2px 8px rgba(220, 38, 38, 0.30); /* Botón ghost / outline */ --ebill-btn-ghost-bg: transparent; --ebill-btn-ghost-bg-hover: var(--brand-orange-dim); --ebill-btn-ghost-border: var(--brand-orange-border); --ebill-btn-ghost-text: var(--color-orange-700); /* ── Focus ring universal ─────────────────────────────────────── */ --ebill-focus-ring: 0 0 0 3px rgba(255, 100, 34, 0.40); --ebill-focus-ring-offset: 0 0 0 2px var(--color-neutral-0); /* ═══════════════════════════════════════════════════════════════ ESTADOS DE COMPROBANTE Borrador → Emitido → (Anulado NC) / Rechazado AFIP ═══════════════════════════════════════════════════════════════ */ /* Borrador — gris neutro */ --ebill-comp-borrador-bg: var(--color-neutral-100); --ebill-comp-borrador-border: var(--color-neutral-300); --ebill-comp-borrador-text: var(--color-neutral-600); --ebill-comp-borrador-icon: var(--color-neutral-400); /* Emitido — verde: autorizado por AFIP, tiene CAE */ --ebill-comp-emitido-bg: var(--color-green-50); --ebill-comp-emitido-border: var(--color-green-400); --ebill-comp-emitido-text: var(--color-green-800); --ebill-comp-emitido-icon: var(--color-green-600); /* Rechazado — rojo: AFIP devolvió error, sin CAE */ --ebill-comp-rechazado-bg: var(--color-red-50); --ebill-comp-rechazado-border: var(--color-red-400); --ebill-comp-rechazado-text: var(--color-red-700); --ebill-comp-rechazado-icon: var(--color-red-500); /* Anulado — slate con text-decoration line-through */ --ebill-comp-anulado-bg: var(--color-slate-100); --ebill-comp-anulado-border: var(--color-slate-300); --ebill-comp-anulado-text: var(--color-slate-500); --ebill-comp-anulado-icon: var(--color-slate-400); --ebill-comp-anulado-decoration: line-through; /* ═══════════════════════════════════════════════════════════════ TIPOS DE COMPROBANTE (LETRA) A = responsables inscriptos (azul — formal, empresa a empresa) B = consumidores finales / monotributistas (verde) C = monotributo emite (gris — simplificado) NC = nota de crédito (rojo atenuado) ND = nota de débito (amber) ═══════════════════════════════════════════════════════════════ */ /* Tipo A — azul */ --ebill-tipo-a-bg: var(--color-blue-100); --ebill-tipo-a-border: var(--color-blue-400); --ebill-tipo-a-text: var(--color-blue-800); /* Tipo B — verde */ --ebill-tipo-b-bg: var(--color-green-100); --ebill-tipo-b-border: var(--color-green-400); --ebill-tipo-b-text: var(--color-green-800); /* Tipo C — gris (monotributo) */ --ebill-tipo-c-bg: var(--color-neutral-100); --ebill-tipo-c-border: var(--color-neutral-400); --ebill-tipo-c-text: var(--color-neutral-700); /* Nota de Crédito — rojo atenuado */ --ebill-tipo-nc-bg: var(--color-red-50); --ebill-tipo-nc-border: var(--color-red-300); --ebill-tipo-nc-text: var(--color-red-700); /* Nota de Débito — amber */ --ebill-tipo-nd-bg: var(--color-amber-50); --ebill-tipo-nd-border: var(--color-amber-400); --ebill-tipo-nd-text: var(--color-amber-800); /* ═══════════════════════════════════════════════════════════════ IMPORTES Y COLUMNAS MONETARIAS IBM Plex Mono para alineación columnar y distinción 0/O, 1/l/I. ═══════════════════════════════════════════════════════════════ */ --ebill-amount-font: 'IBM Plex Mono', 'Courier New', monospace; --ebill-amount-font-size: 0.875rem; /* 14px — legible en tabla densa */ --ebill-amount-font-feature: "tnum", "zero"; /* tabular nums + slashed zero */ --ebill-amount-text: var(--color-neutral-900); /* importe normal */ --ebill-amount-positive: var(--color-green-700); /* haber / crédito */ --ebill-amount-negative: var(--color-red-600); /* débito / NC */ --ebill-amount-total-bg: var(--color-orange-50); /* fondo de fila total */ --ebill-amount-total-border: var(--brand-orange-border); /* borde top de fila total */ --ebill-amount-total-text: var(--color-neutral-900); --ebill-amount-total-font-weight: 600; /* ═══════════════════════════════════════════════════════════════ CAE Y NÚMERO DE COMPROBANTE ═══════════════════════════════════════════════════════════════ */ --ebill-cae-bg: var(--color-green-50); /* chip/badge con el CAE */ --ebill-cae-border: var(--color-green-300); --ebill-cae-text: var(--color-green-800); --ebill-cae-font: 'IBM Plex Mono', 'Courier New', monospace; --ebill-cae-font-size: 0.8125rem; /* 13px — dígitos largos, compacto */ --ebill-cae-vto-text: var(--color-neutral-500); /* "Vto: DD/MM/YYYY" label */ --ebill-cae-vto-warning: var(--color-amber-700); /* CAE vencido / próximo a vencer */ /* CUIT (en padrón, cabecera, tabla) */ --ebill-cuit-font: 'IBM Plex Mono', 'Courier New', monospace; --ebill-cuit-font-size: 0.875rem; --ebill-cuit-letter-spacing: 0.04em; /* ═══════════════════════════════════════════════════════════════ INDICADOR AFIP — MODO PRODUCCIÓN vs HOMOLOGACIÓN Producción: orange brillante (#FF6422) — es una ADVERTENCIA explícita de que las acciones tienen efecto real. Aparece en: topbar badge, banner en form de emisión, confirmación de emisión. Homologación: azul (#1865F5) — ambiente seguro de prueba. ═══════════════════════════════════════════════════════════════ */ /* Modo producción — orange, imposible ignorar */ --ebill-afip-prod-bg: var(--brand-orange); --ebill-afip-prod-text: var(--color-neutral-0); --ebill-afip-prod-border: transparent; --ebill-afip-prod-shadow: 0 0 0 2px var(--brand-orange), 0 0 12px rgba(255, 100, 34, 0.30); --ebill-afip-prod-banner-bg: var(--color-orange-50); --ebill-afip-prod-banner-border: var(--brand-orange); --ebill-afip-prod-banner-text: var(--color-orange-900); /* Modo homologación — azul */ --ebill-afip-homo-bg: var(--color-blue-600); --ebill-afip-homo-text: var(--color-neutral-0); --ebill-afip-homo-border: transparent; --ebill-afip-homo-banner-bg: var(--color-blue-50); --ebill-afip-homo-banner-border: var(--color-blue-400); --ebill-afip-homo-banner-text: var(--color-blue-900); /* Estado de servidores AFIP (semáforo en dashboard) */ --ebill-afip-server-ok: var(--color-green-500); /* verde */ --ebill-afip-server-warn: var(--color-amber-500); /* amarillo */ --ebill-afip-server-down: var(--color-red-500); /* rojo */ --ebill-afip-server-unknown: var(--color-neutral-400); /* sin dato */ /* ═══════════════════════════════════════════════════════════════ IMPORTACIÓN SSE / CSV ═══════════════════════════════════════════════════════════════ */ /* Progress bar de importación ARCA/CSV */ --ebill-import-progress-track: var(--color-neutral-200); --ebill-import-progress: var(--brand-orange); /* track relleno */ --ebill-import-progress-text: var(--color-orange-700); /* porcentaje */ --ebill-import-error-bg: var(--color-red-50); --ebill-import-error-border: var(--color-red-300); --ebill-import-error-text: var(--color-red-700); --ebill-import-success-bg: var(--color-green-50); --ebill-import-success-border: var(--color-green-300); --ebill-import-success-text: var(--color-green-800); --ebill-import-log-bg: var(--color-neutral-950); /* consola de log lines */ --ebill-import-log-text: var(--color-neutral-200); --ebill-import-log-error: var(--color-red-300); --ebill-import-log-ok: var(--color-green-400); /* ═══════════════════════════════════════════════════════════════ DENSIDAD OPERATIVA MEDIA Más espacio que ePark (operación física) — operador contable lee con más calma; form de emisión es complejo. ═══════════════════════════════════════════════════════════════ */ --ebill-row-py: 10px; /* 10px padding-block por fila */ --ebill-row-dense-py: 6px; /* modo compacto */ --ebill-row-comfortable-py: 14px; /* detalle / modal */ --ebill-cell-px: 0.875rem; /* 14px padding horizontal celda */ --ebill-table-row-min-h: 44px; /* touch target mínimo */ --ebill-table-header-h: 44px; /* thead */ --ebill-touch-min: 44px; /* touch target mínimo */ /* ── Form items repetibles ────────────────────────────────────── */ /* Cada fila de item (descripción, cantidad, precio, alícuota, subtotal) usa densidad media. El drag handle es a la izquierda (8px). */ --ebill-item-row-py: 0.5rem; /* 8px vertical */ --ebill-item-row-px: 0.75rem; /* 12px horizontal */ --ebill-item-drag-handle-w: 20px; /* ancho del área de drag */ --ebill-item-drag-handle-color: var(--color-neutral-300); --ebill-item-drag-handle-hover: var(--color-neutral-500); --ebill-item-row-border: var(--color-neutral-150); --ebill-item-row-hover-bg: var(--color-orange-50); --ebill-item-row-dragging-bg: var(--color-orange-50); --ebill-item-row-dragging-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); --ebill-item-add-btn-text: var(--color-orange-700); --ebill-item-remove-btn-text: var(--color-red-500); --ebill-item-remove-btn-hover: var(--color-red-700); /* ── Tipografía operativa ─────────────────────────────────────── */ --ebill-font-sans: 'Inter Variable', 'Inter', system-ui, sans-serif; --ebill-font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* Escala fluida: administrativa (más comprimida que landing, más espaciosa que ePark) */ --ebill-font-display: clamp(1.5rem, 2.5vw, 2rem); /* h1 de página */ --ebill-font-h1: clamp(1.25rem, 2vw, 1.5rem); /* heading principal */ --ebill-font-h2: clamp(1.1rem, 1.5vw, 1.25rem); /* heading sección */ --ebill-font-h3: 1rem; /* heading card/grupo */ --ebill-font-body: clamp(0.875rem, 1.2vw, 1rem); /* body estándar */ --ebill-font-body-sm: clamp(0.8125rem, 1vw, 0.875rem); /* body pequeño */ --ebill-font-table-cell: 0.875rem; /* celdas de tabla */ --ebill-font-label: 0.75rem; /* labels de form */ --ebill-font-caption: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); --ebill-font-badge: 0.6875rem; --ebill-font-kpi-value: clamp(1.5rem, 2.5vw, 2.25rem); /* número en KpiCard */ --ebill-font-kpi-label: 0.75rem; --ebill-font-tab: 0.875rem; --ebill-font-form-section-title: 0.875rem; /* título de sección form */ --ebill-font-env-badge: 0.6875rem; /* badge PRODUCCIÓN/HOMO */ /* ── Espaciado — Layout shell ─────────────────────────────────── */ --ebill-sidebar-w: 256px; /* más ancho que ePark: nav más items */ --ebill-sidebar-w-collapsed: 56px; --ebill-topbar-h: 60px; /* 4px más alto por badge de env */ --ebill-content-px: 1.5rem; --ebill-content-py: 1.5rem; --ebill-content-max: 1440px; /* Componentes */ --ebill-card-px: 1.25rem; --ebill-card-py: 1rem; --ebill-card-gap: 1rem; --ebill-section-gap: 1.5rem; --ebill-modal-px: 1.5rem; --ebill-modal-py: 1.25rem; /* Form */ --ebill-form-gap: 1.25rem; /* más que ePark: form más complejo */ --ebill-form-section-gap: 2rem; /* entre Cabecera/Items/Tributos */ --ebill-field-py: 0.5rem; --ebill-field-px: 0.75rem; --ebill-field-h: 40px; /* altura estándar de input */ /* Totales sticky */ --ebill-totals-h: auto; --ebill-totals-px: 1.25rem; --ebill-totals-py: 1rem; --ebill-totals-shadow: 0 -1px 0 var(--ebill-border-totals), 0 -4px 12px rgba(0, 0, 0, 0.06); /* KPI cards */ --ebill-kpi-gap: 1rem; /* ── Radios ───────────────────────────────────────────────────── */ --ebill-radius-card: 0.5rem; /* rounded-lg */ --ebill-radius-card-sm: 0.375rem; /* rounded-md */ --ebill-radius-button: 0.375rem; /* más técnico que landing */ --ebill-radius-input: 0.375rem; --ebill-radius-badge: 9999px; /* pill */ --ebill-radius-modal: 0.5rem; --ebill-radius-drawer: 0; /* drawers al borde */ --ebill-radius-tab: 0.25rem; --ebill-radius-avatar: 9999px; --ebill-radius-chip: 9999px; /* chips de tipo A/B/C */ --ebill-radius-dropzone: 0.5rem; --ebill-radius-progress: 9999px; --ebill-radius-env-badge: 0.25rem; /* badge de env más cuadrado */ /* ── Sombras ──────────────────────────────────────────────────── */ /* Administrativo: sombras sutiles, funcionales */ --ebill-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --ebill-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --ebill-shadow-topbar: 0 1px 0 var(--ebill-border-topbar); --ebill-shadow-sidebar: 1px 0 0 var(--ebill-border-sidebar); --ebill-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08); --ebill-shadow-drawer: -4px 0 16px rgba(0, 0, 0, 0.10); --ebill-shadow-focus: var(--ebill-focus-ring); --ebill-shadow-btn-primary: var(--ebill-btn-primary-shadow); --ebill-shadow-btn-critical: var(--ebill-btn-critical-shadow); --ebill-shadow-totals: var(--ebill-totals-shadow); --ebill-shadow-empresa-card: var(--ebill-shadow-card); --ebill-shadow-empresa-card-active: 0 0 0 2px var(--brand-orange), 0 4px 12px rgba(255, 100, 34, 0.12); /* ── Sidebar nav estados ──────────────────────────────────────── */ --ebill-nav-item-bg: transparent; --ebill-nav-item-bg-hover: var(--color-neutral-100); --ebill-nav-item-bg-active: var(--brand-orange-dim); --ebill-nav-item-text: var(--color-neutral-600); --ebill-nav-item-text-hover: var(--color-neutral-900); --ebill-nav-item-text-active: var(--color-orange-700); --ebill-nav-item-border-active: var(--brand-orange); --ebill-nav-icon-active: var(--brand-orange); /* ── KPI / Dashboard ──────────────────────────────────────────── */ --ebill-kpi-up-text: var(--color-green-600); /* delta positivo */ --ebill-kpi-down-text: var(--color-red-600); /* delta negativo */ --ebill-kpi-neutral-text: var(--color-neutral-500); /* ── Alertas ──────────────────────────────────────────────────── */ --ebill-alert-warning-bg: var(--color-amber-50); --ebill-alert-warning-border: var(--color-amber-300); --ebill-alert-warning-text: var(--color-amber-800); --ebill-alert-error-bg: var(--color-red-50); --ebill-alert-error-border: var(--color-red-300); --ebill-alert-error-text: var(--color-red-700); --ebill-alert-info-bg: var(--brand-orange-dim); --ebill-alert-info-border: var(--brand-orange-border-md); --ebill-alert-info-text: var(--color-orange-700); /* Alerta crítica (configuración AFIP — advertencia máxima) */ --ebill-alert-critical-bg: var(--color-orange-50); --ebill-alert-critical-border: var(--brand-orange); --ebill-alert-critical-text: var(--color-orange-900); --ebill-alert-critical-icon: var(--brand-orange); /* ── Libro IVA ────────────────────────────────────────────────── */ --ebill-iva-header-bg: var(--color-neutral-50); --ebill-iva-row-hover: var(--color-orange-50); --ebill-iva-download-btn-text: var(--color-orange-700); /* ── Certificados AFIP ────────────────────────────────────────── */ --ebill-cert-ok-bg: var(--color-green-50); --ebill-cert-ok-border: var(--color-green-300); --ebill-cert-ok-text: var(--color-green-800); --ebill-cert-missing-bg: var(--color-red-50); --ebill-cert-missing-border: var(--color-red-300); --ebill-cert-missing-text: var(--color-red-700); --ebill-cert-expiring-bg: var(--color-amber-50); --ebill-cert-expiring-text: var(--color-amber-800); /* ── Motion ───────────────────────────────────────────────────── */ /* Administrativo: más calmado que ePark. Sin animaciones decorativas. */ --ebill-duration-instant: 80ms; --ebill-duration-fast: 150ms; --ebill-duration-normal: 200ms; --ebill-duration-slow: 300ms; --ebill-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ebill-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --ebill-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ══════════════════════════════════════════════════════════════════ TEMA OSCURO — .dark (toggle por usuario) Orange sobre oscuro: #FF6422 / #060C14 = 5.02:1 → AA OK como texto. Orange sobre --brand-surface (#0F1E35) = 4.72:1 → AA OK. ══════════════════════════════════════════════════════════════════ */ .dark { /* Superficies */ --ebill-bg-app: var(--brand-deep); --ebill-bg-page: var(--brand-night); --ebill-bg-card: var(--brand-surface); --ebill-bg-card-raised: #122031; --ebill-bg-sidebar: var(--brand-deep); --ebill-bg-topbar: var(--brand-deep); --ebill-bg-modal: var(--brand-surface); --ebill-bg-overlay: rgba(0, 0, 0, 0.60); --ebill-bg-drawer: var(--brand-surface); --ebill-bg-table-header: #0d1a2d; --ebill-bg-table-row: var(--brand-surface); --ebill-bg-table-row-alt: var(--brand-deep); --ebill-bg-table-row-hover: rgba(255, 100, 34, 0.07); --ebill-bg-input: rgba(10, 21, 37, 0.80); --ebill-bg-input-mono: rgba(6, 12, 20, 0.90); --ebill-bg-badge: rgba(255, 255, 255, 0.06); --ebill-bg-skeleton: rgba(255, 100, 34, 0.10); --ebill-bg-skeleton-shine: rgba(255, 100, 34, 0.05); --ebill-bg-empty: var(--brand-deep); --ebill-bg-section-kpi: var(--brand-surface); --ebill-bg-totals-sticky: var(--brand-surface); --ebill-bg-form-section: rgba(15, 30, 53, 0.60); --ebill-bg-form-item-row: var(--brand-surface); --ebill-bg-form-item-row-alt: var(--brand-deep); --ebill-bg-dropzone: rgba(10, 21, 37, 0.60); --ebill-bg-dropzone-active: rgba(255, 100, 34, 0.08); --ebill-bg-empresa-card: var(--brand-surface); --ebill-bg-empresa-card-active: rgba(255, 100, 34, 0.10); /* Texto */ --ebill-text-primary: var(--brand-white); --ebill-text-secondary: var(--brand-gray-mid); --ebill-text-tertiary: #4A6280; --ebill-text-muted: #3D5270; --ebill-text-disabled: #283A52; --ebill-text-on-accent: var(--brand-ink); --ebill-text-link: var(--brand-orange); /* AA sobre oscuro: 5.02:1 */ --ebill-text-link-hover: var(--color-orange-400); --ebill-text-error: var(--color-red-300); --ebill-text-success: var(--color-green-400); --ebill-text-warning: var(--color-amber-400); --ebill-text-brand: var(--brand-orange); /* Bordes */ --ebill-border-default: rgba(232, 238, 255, 0.08); --ebill-border-card: rgba(232, 238, 255, 0.08); --ebill-border-table: rgba(232, 238, 255, 0.06); --ebill-border-input: rgba(232, 238, 255, 0.12); --ebill-border-input-focus: var(--brand-orange); --ebill-border-input-error: var(--color-red-400); --ebill-border-mono: rgba(232, 238, 255, 0.20); --ebill-border-mono-focus: var(--brand-orange); --ebill-border-sidebar: rgba(232, 238, 255, 0.06); --ebill-border-topbar: rgba(232, 238, 255, 0.06); --ebill-border-modal: rgba(232, 238, 255, 0.10); --ebill-border-section: rgba(232, 238, 255, 0.06); --ebill-border-item-row: rgba(232, 238, 255, 0.06); --ebill-border-totals: rgba(232, 238, 255, 0.10); --ebill-border-dropzone: rgba(232, 238, 255, 0.14); --ebill-border-dropzone-active: var(--brand-orange); --ebill-border-empresa-active: var(--brand-orange); /* Botones */ --ebill-btn-primary-bg: var(--brand-orange); --ebill-btn-primary-bg-hover: #E5530F; --ebill-btn-primary-text: var(--color-neutral-0); --ebill-btn-secondary-bg: rgba(232, 238, 255, 0.06); --ebill-btn-secondary-bg-hover: rgba(232, 238, 255, 0.10); --ebill-btn-secondary-border: rgba(232, 238, 255, 0.12); --ebill-btn-secondary-text: var(--brand-white); --ebill-btn-draft-bg: rgba(232, 238, 255, 0.06); --ebill-btn-draft-bg-hover: rgba(232, 238, 255, 0.10); --ebill-btn-draft-border: rgba(232, 238, 255, 0.12); --ebill-btn-draft-text: var(--brand-white); --ebill-btn-ghost-bg-hover: rgba(255, 100, 34, 0.12); --ebill-btn-ghost-border: var(--brand-orange-border); --ebill-btn-ghost-text: var(--brand-orange); /* Estados de comprobante en dark */ --ebill-comp-borrador-bg: rgba(255, 255, 255, 0.04); --ebill-comp-borrador-border: rgba(255, 255, 255, 0.12); --ebill-comp-borrador-text: var(--color-neutral-400); --ebill-comp-emitido-bg: rgba(34, 197, 94, 0.10); --ebill-comp-emitido-border: var(--color-green-500); --ebill-comp-emitido-text: var(--color-green-400); --ebill-comp-rechazado-bg: rgba(220, 38, 38, 0.10); --ebill-comp-rechazado-border: var(--color-red-400); --ebill-comp-rechazado-text: var(--color-red-300); --ebill-comp-anulado-bg: rgba(100, 116, 139, 0.10); --ebill-comp-anulado-border: var(--color-slate-500); --ebill-comp-anulado-text: var(--color-slate-400); /* Tipos en dark */ --ebill-tipo-a-bg: rgba(37, 99, 235, 0.12); --ebill-tipo-a-border: var(--color-blue-400); --ebill-tipo-a-text: var(--color-blue-300); --ebill-tipo-b-bg: rgba(22, 163, 74, 0.12); --ebill-tipo-b-border: var(--color-green-400); --ebill-tipo-b-text: var(--color-green-300); --ebill-tipo-c-bg: rgba(255, 255, 255, 0.06); --ebill-tipo-c-border: var(--color-neutral-500); --ebill-tipo-c-text: var(--color-neutral-300); --ebill-tipo-nc-bg: rgba(220, 38, 38, 0.10); --ebill-tipo-nc-border: var(--color-red-400); --ebill-tipo-nc-text: var(--color-red-300); --ebill-tipo-nd-bg: rgba(245, 158, 11, 0.10); --ebill-tipo-nd-border: var(--color-amber-400); --ebill-tipo-nd-text: var(--color-amber-300); /* Importes en dark */ --ebill-amount-text: var(--brand-white); --ebill-amount-positive: var(--color-green-400); --ebill-amount-negative: var(--color-red-300); --ebill-amount-total-bg: rgba(255, 100, 34, 0.10); --ebill-amount-total-border: rgba(255, 100, 34, 0.25); --ebill-amount-total-text: var(--brand-white); /* CAE en dark */ --ebill-cae-bg: rgba(34, 197, 94, 0.10); --ebill-cae-border: var(--color-green-500); --ebill-cae-text: var(--color-green-400); --ebill-cae-vto-text: var(--color-neutral-400); --ebill-cae-vto-warning: var(--color-amber-400); /* AFIP modo producción — se mantiene orange brillante en dark (efecto igual) */ --ebill-afip-prod-banner-bg: rgba(255, 100, 34, 0.12); --ebill-afip-prod-banner-border: var(--brand-orange); --ebill-afip-prod-banner-text: var(--color-orange-200); --ebill-afip-homo-banner-bg: rgba(37, 99, 235, 0.10); --ebill-afip-homo-banner-border: var(--color-blue-400); --ebill-afip-homo-banner-text: var(--color-blue-200); /* Importación en dark */ --ebill-import-progress: var(--brand-orange); --ebill-import-progress-text: var(--brand-orange); --ebill-import-error-bg: rgba(220, 38, 38, 0.10); --ebill-import-error-border: var(--color-red-400); --ebill-import-error-text: var(--color-red-300); --ebill-import-success-bg: rgba(34, 197, 94, 0.10); --ebill-import-success-border: var(--color-green-400); --ebill-import-success-text: var(--color-green-300); /* Nav sidebar en dark */ --ebill-nav-item-bg-hover: rgba(255, 255, 255, 0.05); --ebill-nav-item-bg-active: rgba(255, 100, 34, 0.10); --ebill-nav-item-text: var(--brand-gray-mid); --ebill-nav-item-text-hover: var(--brand-white); --ebill-nav-item-text-active: var(--brand-orange); --ebill-nav-item-border-active: var(--brand-orange); --ebill-nav-icon-active: var(--brand-orange); /* Alertas en dark */ --ebill-alert-warning-bg: rgba(245, 158, 11, 0.08); --ebill-alert-warning-border: var(--color-amber-500); --ebill-alert-warning-text: var(--color-amber-300); --ebill-alert-error-bg: rgba(220, 38, 38, 0.08); --ebill-alert-error-border: var(--color-red-500); --ebill-alert-error-text: var(--color-red-300); --ebill-alert-info-bg: rgba(255, 100, 34, 0.08); --ebill-alert-info-border: rgba(255, 100, 34, 0.28); --ebill-alert-info-text: var(--brand-orange); --ebill-alert-critical-bg: rgba(255, 100, 34, 0.12); --ebill-alert-critical-border: var(--brand-orange); --ebill-alert-critical-text: var(--color-orange-200); /* Certificados en dark */ --ebill-cert-ok-bg: rgba(34, 197, 94, 0.10); --ebill-cert-ok-border: var(--color-green-400); --ebill-cert-ok-text: var(--color-green-300); --ebill-cert-missing-bg: rgba(220, 38, 38, 0.10); --ebill-cert-missing-border: var(--color-red-400); --ebill-cert-missing-text: var(--color-red-300); /* Item row en dark */ --ebill-item-drag-handle-color: rgba(232, 238, 255, 0.15); --ebill-item-drag-handle-hover: rgba(232, 238, 255, 0.35); --ebill-item-row-border: rgba(232, 238, 255, 0.06); --ebill-item-row-hover-bg: rgba(255, 100, 34, 0.07); --ebill-item-add-btn-text: var(--brand-orange); --ebill-item-remove-btn-text: var(--color-red-400); /* Sombras en dark */ --ebill-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --ebill-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.40); --ebill-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30); --ebill-shadow-topbar: 0 1px 0 var(--ebill-border-topbar); --ebill-shadow-sidebar: 1px 0 0 var(--ebill-border-sidebar); --ebill-shadow-totals: 0 -1px 0 var(--ebill-border-totals), 0 -4px 12px rgba(0, 0, 0, 0.25); --ebill-shadow-empresa-card-active: 0 0 0 2px var(--brand-orange), 0 4px 12px rgba(255, 100, 34, 0.20); } /* ══════════════════════════════════════════════════════════════════ DENSIDAD COMPACTA — data-density="compact" Para usuarios con monitores 1080p que quieren ver más filas. ══════════════════════════════════════════════════════════════════ */ [data-density="compact"] { --ebill-row-py: var(--ebill-row-dense-py); --ebill-row-comfortable-py: 0.625rem; --ebill-table-row-min-h: 36px; --ebill-card-py: 0.75rem; --ebill-font-table-cell: 0.8125rem; --ebill-item-row-py: 0.375rem; } /* ══════════════════════════════════════════════════════════════════ KEYFRAMES ══════════════════════════════════════════════════════════════════ */ /* Shimmer para skeletons */ @keyframes ebill-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* Pulse suave para badge de PRODUCCIÓN (máxima atención) */ @keyframes ebill-prod-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--brand-orange), 0 0 8px rgba(255, 100, 34, 0.30); } 50% { box-shadow: 0 0 0 2px var(--brand-orange), 0 0 16px rgba(255, 100, 34, 0.55); } } /* Fade in para confirmaciones y alertas */ @keyframes ebill-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Scale in para modales */ @keyframes ebill-scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* Slide in drawer lateral */ @keyframes ebill-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Progress SSE — stripe animado */ @keyframes ebill-progress-stripe { from { background-position: 40px 0; } to { background-position: 0 0; } } /* Spin para loader de conexión WSAA */ @keyframes ebill-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Reduced motion: respeta la preferencia del usuario ────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/.pnpm/next@15.5.18_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/globals.css ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* ═══════════════════════════════════════════════════════════════════ globals.css — apps/ebill Reset base, carga de fuentes, focus accesible, scrollbar, selection. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens de diseño (debe ir primero) ────────────────────── */ /* ── 2. Tailwind directives ────────────────────────────────────── */ *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: var(--font-sans), Inter, system-ui, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: var(--font-mono), IBM Plex Mono, Courier New, monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; /* Inter: cv11 diferencia 1/l/I; cv02-cv04 ajustes ópticos */ font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Números tabulares por defecto en toda la app */ font-variant-numeric: tabular-nums; } body { font-family: var(--font-sans, var(--ebill-font-sans)); font-size: var(--ebill-font-body); line-height: 1.5; background-color: var(--ebill-bg-page); color: var(--ebill-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; } /* Headings */ h1 { font-size: var(--ebill-font-h1); font-weight: 600; line-height: 1.2; } h2 { font-size: var(--ebill-font-h2); font-weight: 600; line-height: 1.3; } h3 { font-size: var(--ebill-font-h3); font-weight: 500; line-height: 1.4; } h4 { font-size: var(--ebill-font-body); font-weight: 500; } /* Links */ a { color: var(--ebill-text-link); text-decoration: none; } a:hover { color: var(--ebill-text-link-hover); text-decoration: underline; } /* Imágenes y SVG */ img, svg { display: block; max-width: 100%; } /* Monoespaciado: activar font-feature-settings específico para IBM Plex Mono */ code, kbd, pre, samp, .font-mono { font-family: var(--font-mono, var(--ebill-font-mono)); font-feature-settings: "tnum", "zero"; /* tabular nums + zero con barra */ font-size: 0.875em; } /* Separadores */ hr { border: none; border-top: 1px solid var(--ebill-border-section); margin: 0; } /* Tablas: collapse por defecto */ table { border-collapse: collapse; width: 100%; } /* Encabezados de tabla */ th { font-weight: 500; font-size: var(--ebill-font-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ebill-text-secondary); text-align: left; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Celdas */ td, th { padding-block: var(--ebill-row-py); padding-inline: var(--ebill-cell-px); min-height: var(--ebill-table-row-min-h); } /* Inputs, textarea, select */ input, textarea, select { font-family: inherit; font-size: inherit; } /* Botones base */ button { font-family: inherit; cursor: pointer; border: none; background: none; } button:disabled { cursor: not-allowed; opacity: 0.5; } :focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; border-radius: var(--ebill-radius-input); } button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; box-shadow: var(--ebill-focus-ring); } /* Sin outline en click con mouse */ :focus:not(:focus-visible) { outline: none; } /* Skip-to-content — accesibilidad teclado */ .skip-to-content { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--brand-orange); color: var(--color-neutral-0); font-weight: 700; font-size: 0.875rem; border-radius: var(--ebill-radius-button); transition: top var(--ebill-duration-fast) var(--ebill-ease-out); min-height: var(--ebill-touch-min); display: flex; align-items: center; } .skip-to-content:focus { top: 1rem; outline: 3px solid var(--brand-ink); outline-offset: 2px; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-400); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-neutral-300) transparent; } /* Ocultar scrollbar (sidebar, dropdowns) */ .ebill-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .ebill-no-scrollbar::-webkit-scrollbar { display: none; } ::-moz-selection { background-color: rgba(255, 100, 34, 0.18); color: var(--ebill-text-primary); } ::selection { background-color: rgba(255, 100, 34, 0.18); color: var(--ebill-text-primary); } .ebill-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Contenedor de live region — montar en layout root */ #ebill-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } kbd { font-family: var(--font-mono, var(--ebill-font-mono)); font-size: 0.75em; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: 0.25rem; padding: 0.125rem 0.375rem; color: var(--ebill-text-secondary); box-shadow: 0 1px 0 var(--color-neutral-300); } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none{ pointer-events: none; } .visible{ visibility: visible; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: sticky; } .inset-0{ inset: 0px; } .inset-y-0{ top: 0px; bottom: 0px; } .left-0{ left: 0px; } .left-2{ left: 0.5rem; } .left-2\.5{ left: 0.625rem; } .left-\[50\%\]{ left: 50%; } .right-0{ right: 0px; } .right-2\.5{ right: 0.625rem; } .right-4{ right: 1rem; } .top-1\/2{ top: 50%; } .top-4{ top: 1rem; } .top-\[50\%\]{ top: 50%; } .top-full{ top: 100%; } .z-10{ z-index: 10; } .z-40{ z-index: 40; } .z-50{ z-index: 50; } .-mx-1{ margin-left: -0.25rem; margin-right: -0.25rem; } .mx-1\.5{ margin-left: 0.375rem; margin-right: 0.375rem; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-1{ margin-top: 0.25rem; margin-bottom: 0.25rem; } .mb-0\.5{ margin-bottom: 0.125rem; } .mb-1{ margin-bottom: 0.25rem; } .mb-2{ margin-bottom: 0.5rem; } .mb-3{ margin-bottom: 0.75rem; } .mb-4{ margin-bottom: 1rem; } .mb-6{ margin-bottom: 1.5rem; } .ml-0\.5{ margin-left: 0.125rem; } .ml-1{ margin-left: 0.25rem; } .ml-2{ margin-left: 0.5rem; } .ml-auto{ margin-left: auto; } .mr-2{ margin-right: 0.5rem; } .mt-0\.5{ margin-top: 0.125rem; } .mt-1{ margin-top: 0.25rem; } .mt-16{ margin-top: 4rem; } .mt-2{ margin-top: 0.5rem; } .mt-3{ margin-top: 0.75rem; } .mt-4{ margin-top: 1rem; } .mt-6{ margin-top: 1.5rem; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .table{ display: table; } .grid{ display: grid; } .hidden{ display: none; } .h-10{ height: 2.5rem; } .h-11{ height: 2.75rem; } .h-12{ height: 3rem; } .h-2{ height: 0.5rem; } .h-28{ height: 7rem; } .h-3{ height: 0.75rem; } .h-3\.5{ height: 0.875rem; } .h-32{ height: 8rem; } .h-4{ height: 1rem; } .h-48{ height: 12rem; } .h-5{ height: 1.25rem; } .h-6{ height: 1.5rem; } .h-64{ height: 16rem; } .h-7{ height: 1.75rem; } .h-8{ height: 2rem; } .h-9{ height: 2.25rem; } .h-\[44px\]{ height: 44px; } .h-\[var\(--ebill-table-header-h\)\]{ height: var(--ebill-table-header-h); } .h-\[var\(--radix-select-trigger-height\)\]{ height: var(--radix-select-trigger-height); } .h-auto{ height: auto; } .h-ebill-field-h{ height: var(--ebill-field-h); } .h-ebill-topbar{ height: var(--ebill-topbar-h); } .h-full{ height: 100%; } .h-px{ height: 1px; } .h-screen{ height: 100vh; } .max-h-48{ max-height: 12rem; } .max-h-96{ max-height: 24rem; } .max-h-\[90vh\]{ max-height: 90vh; } .min-h-\[36px\]{ min-height: 36px; } .min-h-\[44px\]{ min-height: 44px; } .min-h-\[80px\]{ min-height: 80px; } .min-h-\[var\(--ebill-table-row-min-h\)\]{ min-height: var(--ebill-table-row-min-h); } .min-h-ebill-touch{ min-height: var(--ebill-touch-min); } .w-10{ width: 2.5rem; } .w-12{ width: 3rem; } .w-2{ width: 0.5rem; } .w-24{ width: 6rem; } .w-28{ width: 7rem; } .w-3{ width: 0.75rem; } .w-3\.5{ width: 0.875rem; } .w-32{ width: 8rem; } .w-36{ width: 9rem; } .w-4{ width: 1rem; } .w-40{ width: 10rem; } .w-44{ width: 11rem; } .w-48{ width: 12rem; } .w-5{ width: 1.25rem; } .w-52{ width: 13rem; } .w-56{ width: 14rem; } .w-6{ width: 1.5rem; } .w-60{ width: 15rem; } .w-7{ width: 1.75rem; } .w-8{ width: 2rem; } .w-9{ width: 2.25rem; } .w-ebill-sidebar{ width: var(--ebill-sidebar-w); } .w-ebill-sidebar-col{ width: var(--ebill-sidebar-w-collapsed); } .w-full{ width: 100%; } .min-w-0{ min-width: 0px; } .min-w-\[44px\]{ min-width: 44px; } .min-w-\[8rem\]{ min-width: 8rem; } .min-w-\[var\(--radix-select-trigger-width\)\]{ min-width: var(--radix-select-trigger-width); } .max-w-2xl{ max-width: 42rem; } .max-w-3xl{ max-width: 48rem; } .max-w-\[100px\]{ max-width: 100px; } .max-w-\[120px\]{ max-width: 120px; } .max-w-\[140px\]{ max-width: 140px; } .max-w-\[200px\]{ max-width: 200px; } .max-w-lg{ max-width: 32rem; } .max-w-md{ max-width: 28rem; } .max-w-sm{ max-width: 24rem; } .max-w-xl{ max-width: 36rem; } .max-w-xs{ max-width: 20rem; } .flex-1{ flex: 1 1 0%; } .flex-shrink-0{ flex-shrink: 0; } .shrink-0{ flex-shrink: 0; } .caption-bottom{ caption-side: bottom; } .-translate-y-1\/2{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[-50\%\]{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-1{ --tw-translate-y: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\]{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes ebill-fade-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } } .animate-ebill-fade-in{ animation: ebill-fade-in 200ms ease-out both; } @keyframes ebill-progress-stripe{ from{ background-position: 40px 0; } to{ background-position: 0 0; } } .animate-ebill-progress-stripe{ animation: ebill-progress-stripe 600ms linear infinite; } @keyframes ebill-scale-in{ from{ opacity: 0; transform: scale(0.97); } to{ opacity: 1; transform: scale(1); } } .animate-ebill-scale-in{ animation: ebill-scale-in 200ms ease-out both; } @keyframes ebill-slide-in-right{ from{ transform: translateX(100%); } to{ transform: translateX(0); } } .animate-ebill-slide-in{ animation: ebill-slide-in-right 220ms ease-out both; } @keyframes ebill-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .animate-ebill-spin{ animation: ebill-spin 900ms linear infinite; } @keyframes pulse{ 50%{ opacity: .5; } } .animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } .animate-spin{ animation: spin 1s linear infinite; } .cursor-default{ cursor: default; } .cursor-grab{ cursor: grab; } .cursor-not-allowed{ cursor: not-allowed; } .cursor-pointer{ cursor: pointer; } .touch-none{ touch-action: none; } .select-none{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize-y{ resize: vertical; } .list-inside{ list-style-position: inside; } .list-disc{ list-style-type: disc; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .gap-1{ gap: 0.25rem; } .gap-1\.5{ gap: 0.375rem; } .gap-2{ gap: 0.5rem; } .gap-3{ gap: 0.75rem; } .gap-4{ gap: 1rem; } .gap-6{ gap: 1.5rem; } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .divide-y > :not([hidden]) ~ :not([hidden]){ --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .overflow-auto{ overflow: auto; } .overflow-hidden{ overflow: hidden; } .overflow-x-auto{ overflow-x: auto; } .overflow-y-auto{ overflow-y: auto; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap{ white-space: nowrap; } .break-all{ word-break: break-all; } .rounded{ border-radius: 0.25rem; } .rounded-ebill-badge{ border-radius: var(--ebill-radius-badge); } .rounded-ebill-btn{ border-radius: var(--ebill-radius-button); } .rounded-ebill-card{ border-radius: var(--ebill-radius-card); } .rounded-ebill-card-sm{ border-radius: var(--ebill-radius-card-sm); } .rounded-ebill-env{ border-radius: var(--ebill-radius-env-badge); } .rounded-ebill-input{ border-radius: var(--ebill-radius-input); } .rounded-ebill-modal{ border-radius: var(--ebill-radius-modal); } .rounded-ebill-progress{ border-radius: var(--ebill-radius-progress); } .rounded-full{ border-radius: 9999px; } .rounded-md{ border-radius: 0.375rem; } .rounded-sm{ border-radius: 0.125rem; } .border{ border-width: 1px; } .border-2{ border-width: 2px; } .border-b{ border-bottom-width: 1px; } .border-l{ border-left-width: 1px; } .border-l-2{ border-left-width: 2px; } .border-r{ border-right-width: 1px; } .border-t{ border-top-width: 1px; } .border-dashed{ border-style: dashed; } .border-blue-200{ --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity, 1)); } .border-brand-orange{ border-color: var(--brand-orange); } .border-current{ border-color: currentColor; } .border-ebill-alert-error-bg{ border-color: var(--ebill-alert-error-bg); } .border-ebill-border-accent{ border-color: var(--ebill-border-accent); } .border-ebill-border-card{ border-color: var(--ebill-border-card); } .border-ebill-border-default{ border-color: var(--ebill-border-default); } .border-ebill-border-dropzone{ border-color: var(--ebill-border-dropzone); } .border-ebill-border-dropzone-active{ border-color: var(--ebill-border-dropzone-active); } .border-ebill-border-input{ border-color: var(--ebill-border-input); } .border-ebill-border-input-error{ border-color: var(--ebill-border-input-error); } .border-ebill-border-mono{ border-color: var(--ebill-border-mono); } .border-ebill-border-table{ border-color: var(--ebill-border-table); } .border-ebill-border-totals{ border-color: var(--ebill-border-totals); } .border-ebill-cae-border{ border-color: var(--ebill-cae-border); } .border-ebill-comp-anulado-border{ border-color: var(--ebill-comp-anulado-border); } .border-ebill-comp-borrador-border{ border-color: var(--ebill-comp-borrador-border); } .border-ebill-comp-emitido-border{ border-color: var(--ebill-comp-emitido-border); } .border-ebill-comp-rechazado-border{ border-color: var(--ebill-comp-rechazado-border); } .border-ebill-nav-border-active{ border-color: var(--ebill-nav-item-border-active); } .border-ebill-text-muted{ border-color: var(--ebill-text-muted); } .border-ebill-tipo-a-border{ border-color: var(--ebill-tipo-a-border); } .border-ebill-tipo-b-border{ border-color: var(--ebill-tipo-b-border); } .border-ebill-tipo-c-border{ border-color: var(--ebill-tipo-c-border); } .border-ebill-tipo-nc-border{ border-color: var(--ebill-tipo-nc-border); } .border-ebill-tipo-nd-border{ border-color: var(--ebill-tipo-nd-border); } .border-emerald-200{ --tw-border-opacity: 1; border-color: rgb(167 243 208 / var(--tw-border-opacity, 1)); } .border-transparent{ border-color: transparent; } .border-violet-200{ --tw-border-opacity: 1; border-color: rgb(221 214 254 / var(--tw-border-opacity, 1)); } .border-warning-200{ --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); } .border-white{ --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } .border-t-transparent{ border-top-color: transparent; } .bg-blue-50{ --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .bg-brand-orange{ background-color: var(--brand-orange); } .bg-ebill-afip-homo-bg{ background-color: var(--ebill-afip-homo-bg); } .bg-ebill-afip-prod-banner-bg{ background-color: var(--ebill-afip-prod-banner-bg); } .bg-ebill-afip-prod-bg{ background-color: var(--ebill-afip-prod-bg); } .bg-ebill-afip-server-down{ background-color: var(--ebill-afip-server-down); } .bg-ebill-afip-server-ok{ background-color: var(--ebill-afip-server-ok); } .bg-ebill-afip-server-warn{ background-color: var(--ebill-afip-server-warn); } .bg-ebill-alert-error-bg{ background-color: var(--ebill-alert-error-bg); } .bg-ebill-alert-warning-bg{ background-color: var(--ebill-alert-warning-bg); } .bg-ebill-bg-app{ background-color: var(--ebill-bg-app); } .bg-ebill-bg-card{ background-color: var(--ebill-bg-card); } .bg-ebill-bg-dropzone-active{ background-color: var(--ebill-bg-dropzone-active); } .bg-ebill-bg-empresa-card{ background-color: var(--ebill-bg-empresa-card); } .bg-ebill-bg-empty{ background-color: var(--ebill-bg-empty); } .bg-ebill-bg-form-section{ background-color: var(--ebill-bg-form-section); } .bg-ebill-bg-input{ background-color: var(--ebill-bg-input); } .bg-ebill-bg-input-mono{ background-color: var(--ebill-bg-input-mono); } .bg-ebill-bg-modal{ background-color: var(--ebill-bg-modal); } .bg-ebill-bg-page{ background-color: var(--ebill-bg-page); } .bg-ebill-bg-sidebar{ background-color: var(--ebill-bg-sidebar); } .bg-ebill-bg-table-header{ background-color: var(--ebill-bg-table-header); } .bg-ebill-bg-table-row{ background-color: var(--ebill-bg-table-row); } .bg-ebill-bg-table-row-alt{ background-color: var(--ebill-bg-table-row-alt); } .bg-ebill-bg-topbar{ background-color: var(--ebill-bg-topbar); } .bg-ebill-btn-danger{ background-color: var(--ebill-btn-danger-bg); } .bg-ebill-btn-draft{ background-color: var(--ebill-btn-draft-bg); } .bg-ebill-btn-primary{ background-color: var(--ebill-btn-primary-bg); } .bg-ebill-btn-secondary{ background-color: var(--ebill-btn-secondary-bg); } .bg-ebill-cae-bg{ background-color: var(--ebill-cae-bg); } .bg-ebill-comp-anulado-bg{ background-color: var(--ebill-comp-anulado-bg); } .bg-ebill-comp-borrador-bg{ background-color: var(--ebill-comp-borrador-bg); } .bg-ebill-comp-emitido-bg{ background-color: var(--ebill-comp-emitido-bg); } .bg-ebill-comp-rechazado-bg{ background-color: var(--ebill-comp-rechazado-bg); } .bg-ebill-import-error-bg{ background-color: var(--ebill-import-error-bg); } .bg-ebill-import-log-bg{ background-color: var(--ebill-import-log-bg); } .bg-ebill-import-progress{ background-color: var(--ebill-import-progress); } .bg-ebill-import-success-bg{ background-color: var(--ebill-import-success-bg); } .bg-ebill-nav-active{ background-color: var(--ebill-nav-item-bg-active); } .bg-ebill-nav-hover{ background-color: var(--ebill-nav-item-bg-hover); } .bg-ebill-text-error{ background-color: var(--ebill-text-error); } .bg-ebill-tipo-a-bg{ background-color: var(--ebill-tipo-a-bg); } .bg-ebill-tipo-b-bg{ background-color: var(--ebill-tipo-b-bg); } .bg-ebill-tipo-c-bg{ background-color: var(--ebill-tipo-c-bg); } .bg-ebill-tipo-nc-bg{ background-color: var(--ebill-tipo-nc-bg); } .bg-ebill-tipo-nd-bg{ background-color: var(--ebill-tipo-nd-bg); } .bg-emerald-50{ --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); } .bg-neutral-100{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-neutral-200{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-neutral-50{ --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-neutral-900{ --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .bg-red-50{ --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); } .bg-transparent{ background-color: transparent; } .bg-violet-50{ --tw-bg-opacity: 1; background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1)); } .bg-warning-50{ --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); } .bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .p-1{ padding: 0.25rem; } .p-1\.5{ padding: 0.375rem; } .p-10{ padding: 2.5rem; } .p-2{ padding: 0.5rem; } .p-3{ padding: 0.75rem; } .p-4{ padding: 1rem; } .p-5{ padding: 1.25rem; } .p-6{ padding: 1.5rem; } .px-1{ padding-left: 0.25rem; padding-right: 0.25rem; } .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .px-4{ padding-left: 1rem; padding-right: 1rem; } .px-5{ padding-left: 1.25rem; padding-right: 1.25rem; } .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .px-\[var\(--ebill-cell-px\)\]{ padding-left: var(--ebill-cell-px); padding-right: var(--ebill-cell-px); } .px-\[var\(--ebill-field-px\)\]{ padding-left: var(--ebill-field-px); padding-right: var(--ebill-field-px); } .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12{ padding-top: 3rem; padding-bottom: 3rem; } .py-16{ padding-top: 4rem; padding-bottom: 4rem; } .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-\[var\(--ebill-field-py\)\]{ padding-top: var(--ebill-field-py); padding-bottom: var(--ebill-field-py); } .py-\[var\(--ebill-row-py\)\]{ padding-top: var(--ebill-row-py); padding-bottom: var(--ebill-row-py); } .pb-2{ padding-bottom: 0.5rem; } .pb-6{ padding-bottom: 1.5rem; } .pl-3{ padding-left: 0.75rem; } .pl-6{ padding-left: 1.5rem; } .pl-8{ padding-left: 2rem; } .pl-\[10px\]{ padding-left: 10px; } .pr-2{ padding-right: 0.5rem; } .pr-3{ padding-right: 0.75rem; } .pr-8{ padding-right: 2rem; } .pt-2{ padding-top: 0.5rem; } .pt-3{ padding-top: 0.75rem; } .pt-4{ padding-top: 1rem; } .pt-6{ padding-top: 1.5rem; } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .align-middle{ vertical-align: middle; } .font-mono{ font-family: var(--font-mono), IBM Plex Mono, Courier New, monospace; } .text-\[10px\]{ font-size: 10px; } .text-\[11px\]{ font-size: 11px; } .text-base{ font-size: 1rem; line-height: 1.5rem; } .text-ebill-badge{ font-size: var(--ebill-font-badge); } .text-ebill-body{ font-size: var(--ebill-font-body); } .text-ebill-body-sm{ font-size: var(--ebill-font-body-sm); } .text-ebill-caption{ font-size: var(--ebill-font-caption); } .text-ebill-env-badge{ font-size: var(--ebill-font-env-badge); } .text-ebill-form-section{ font-size: var(--ebill-font-form-section-title); } .text-ebill-h1{ font-size: var(--ebill-font-h1); } .text-ebill-h2{ font-size: var(--ebill-font-h2); } .text-ebill-h3{ font-size: var(--ebill-font-h3); } .text-ebill-kpi{ font-size: var(--ebill-font-kpi-value); } .text-ebill-kpi-label{ font-size: var(--ebill-font-kpi-label); } .text-ebill-label{ font-size: var(--ebill-font-label); } .text-ebill-tab{ font-size: var(--ebill-font-tab); } .text-ebill-table{ font-size: var(--ebill-font-table-cell); } .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .text-xs{ font-size: 0.75rem; line-height: 1rem; } .font-bold{ font-weight: 700; } .font-medium{ font-weight: 500; } .font-semibold{ font-weight: 600; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } .tabular-nums{ --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-tight{ line-height: 1.25; } .tracking-tight{ letter-spacing: -0.025em; } .tracking-wide{ letter-spacing: 0.025em; } .tracking-wider{ letter-spacing: 0.05em; } .text-\[var\(--ebill-font-label\)\]{ color: var(--ebill-font-label); } .text-amber-700{ --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .text-blue-700{ --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .text-brand-orange{ color: var(--brand-orange); } .text-ebill-afip-homo-text{ color: var(--ebill-afip-homo-text); } .text-ebill-afip-prod-banner-text{ color: var(--ebill-afip-prod-banner-text); } .text-ebill-afip-prod-text{ color: var(--ebill-afip-prod-text); } .text-ebill-alert-error-text{ color: var(--ebill-alert-error-text); } .text-ebill-alert-warning-text{ color: var(--ebill-alert-warning-text); } .text-ebill-btn-danger-text{ color: var(--ebill-btn-danger-text); } .text-ebill-btn-draft-text{ color: var(--ebill-btn-draft-text); } .text-ebill-btn-primary-text{ color: var(--ebill-btn-primary-text); } .text-ebill-btn-secondary-text{ color: var(--ebill-btn-secondary-text); } .text-ebill-cae-text{ color: var(--ebill-cae-text); } .text-ebill-cae-vto-text{ color: var(--ebill-cae-vto-text); } .text-ebill-comp-anulado-text{ color: var(--ebill-comp-anulado-text); } .text-ebill-comp-borrador-text{ color: var(--ebill-comp-borrador-text); } .text-ebill-comp-emitido-text{ color: var(--ebill-comp-emitido-text); } .text-ebill-comp-rechazado-text{ color: var(--ebill-comp-rechazado-text); } .text-ebill-import-error-text{ color: var(--ebill-import-error-text); } .text-ebill-import-log-text{ color: var(--ebill-import-log-text); } .text-ebill-import-progress{ color: var(--ebill-import-progress); } .text-ebill-import-success-text{ color: var(--ebill-import-success-text); } .text-ebill-item-add-text{ color: var(--ebill-item-add-btn-text); } .text-ebill-item-drag-handle{ color: var(--ebill-item-drag-handle-color); } .text-ebill-item-remove-text{ color: var(--ebill-item-remove-btn-text); } .text-ebill-kpi-down{ color: var(--ebill-kpi-down-text); } .text-ebill-kpi-neutral{ color: var(--ebill-kpi-neutral-text); } .text-ebill-kpi-up{ color: var(--ebill-kpi-up-text); } .text-ebill-nav-icon-active{ color: var(--ebill-nav-icon-active); } .text-ebill-nav-text{ color: var(--ebill-nav-item-text); } .text-ebill-nav-text-active{ color: var(--ebill-nav-item-text-active); } .text-ebill-text-error{ color: var(--ebill-text-error); } .text-ebill-text-link{ color: var(--ebill-text-link); } .text-ebill-text-muted{ color: var(--ebill-text-muted); } .text-ebill-text-primary{ color: var(--ebill-text-primary); } .text-ebill-text-secondary{ color: var(--ebill-text-secondary); } .text-ebill-text-success{ color: var(--ebill-text-success); } .text-ebill-tipo-a-text{ color: var(--ebill-tipo-a-text); } .text-ebill-tipo-b-text{ color: var(--ebill-tipo-b-text); } .text-ebill-tipo-c-text{ color: var(--ebill-tipo-c-text); } .text-ebill-tipo-nc-text{ color: var(--ebill-tipo-nc-text); } .text-ebill-tipo-nd-text{ color: var(--ebill-tipo-nd-text); } .text-emerald-600{ --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); } .text-emerald-700{ --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); } .text-emerald-800{ --tw-text-opacity: 1; color: rgb(6 95 70 / var(--tw-text-opacity, 1)); } .text-green-600{ --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .text-green-700{ --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); } .text-neutral-100{ --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity, 1)); } .text-neutral-500{ --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-orange-600{ --tw-text-opacity: 1; color: rgb(229 83 15 / var(--tw-text-opacity, 1)); } .text-red-700{ --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity, 1)); } .text-violet-700{ --tw-text-opacity: 1; color: rgb(109 40 217 / var(--tw-text-opacity, 1)); } .text-warning-600{ --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .text-warning-700{ --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline{ text-decoration-line: underline; } .line-through{ text-decoration-line: line-through; } .opacity-50{ opacity: 0.5; } .opacity-60{ opacity: 0.6; } .opacity-70{ opacity: 0.7; } .opacity-80{ opacity: 0.8; } .opacity-90{ opacity: 0.9; } .shadow-ebill-btn-critical{ --tw-shadow: var(--ebill-shadow-btn-critical); --tw-shadow-colored: var(--ebill-shadow-btn-critical); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-btn-primary{ --tw-shadow: var(--ebill-shadow-btn-primary); --tw-shadow-colored: var(--ebill-shadow-btn-primary); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-card{ --tw-shadow: var(--ebill-shadow-card); --tw-shadow-colored: var(--ebill-shadow-card); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-drawer{ --tw-shadow: var(--ebill-shadow-drawer); --tw-shadow-colored: var(--ebill-shadow-drawer); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-empresa-card{ --tw-shadow: var(--ebill-shadow-empresa-card); --tw-shadow-colored: var(--ebill-shadow-empresa-card); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-modal{ --tw-shadow: var(--ebill-shadow-modal); --tw-shadow-colored: var(--ebill-shadow-modal); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-ebill-topbar{ --tw-shadow: var(--ebill-shadow-topbar); --tw-shadow-colored: var(--ebill-shadow-topbar); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[var\(--ebill-btn-danger-shadow\)\]{ --tw-shadow-color: var(--ebill-btn-danger-shadow); --tw-shadow: var(--tw-shadow-colored); } .shadow-\[var\(--ebill-item-row-dragging-shadow\)\]{ --tw-shadow-color: var(--ebill-item-row-dragging-shadow); --tw-shadow: var(--tw-shadow-colored); } .shadow-ebill-btn-primary{ --tw-shadow-color: var(--ebill-btn-primary-bg); --tw-shadow: var(--tw-shadow-colored); } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .ring-0{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[width\]{ transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-300{ transition-duration: 300ms; } .duration-ebill-fast{ transition-duration: 150ms; } .duration-ebill-instant{ transition-duration: 80ms; } .duration-ebill-normal{ transition-duration: 200ms; } .ease-ebill-out{ transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } .ebill-skeleton { background: linear-gradient( 90deg, var(--ebill-bg-skeleton) 25%, var(--ebill-bg-skeleton-shine) 50%, var(--ebill-bg-skeleton) 75% ); background-size: 200% 100%; animation: ebill-shimmer 1.5s ease-in-out infinite; border-radius: var(--ebill-radius-card-sm); } @media (prefers-reduced-motion: reduce) { .ebill-skeleton { animation: none; background: var(--ebill-bg-skeleton); } } /* Area de contenido principal */ .ebill-main-content { padding: var(--ebill-content-py) var(--ebill-content-px); max-width: var(--ebill-content-max); width: 100%; } /* Inputs monoespaciados (CUIT, CAE, número de comprobante) */ .ebill-mono-input { font-family: var(--font-mono, var(--ebill-font-mono)); font-feature-settings: "tnum", "zero"; background-color: var(--ebill-bg-input-mono); border: 1px solid var(--ebill-border-mono); border-radius: var(--ebill-radius-input); padding: var(--ebill-field-py) var(--ebill-field-px); color: var(--ebill-text-primary); letter-spacing: 0.04em; width: 100%; transition: border-color var(--ebill-duration-fast) var(--ebill-ease-out); } .ebill-mono-input:focus-visible { border-color: var(--ebill-border-mono-focus); outline: none; box-shadow: var(--ebill-focus-ring); } /* Chip de tipo de comprobante (A / B / C / NC / ND) */ .ebill-tipo-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.125rem 0.5rem; border-radius: var(--ebill-radius-chip); font-size: var(--ebill-font-badge); font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; border: 1px solid transparent; min-width: 28px; white-space: nowrap; } /* Badge de estado de comprobante */ .ebill-estado-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--ebill-radius-badge); font-size: var(--ebill-font-badge); font-weight: 500; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; } /* Celdas de importe: mono + tabular + alineación derecha */ .ebill-amount-cell { font-family: var(--font-mono, var(--ebill-font-mono)); font-feature-settings: "tnum", "zero"; font-size: var(--ebill-amount-font-size); text-align: right; color: var(--ebill-amount-text); white-space: nowrap; } /* Fila de total (sticky bottom del form) */ .ebill-totals-sticky { position: sticky; bottom: 0; background-color: var(--ebill-bg-totals-sticky); border-top: 1px solid var(--ebill-border-totals); box-shadow: var(--ebill-totals-shadow); padding: var(--ebill-totals-py) var(--ebill-totals-px); z-index: 10; } .ebill-env-badge-prod { animation: ebill-prod-pulse 2.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ebill-env-badge-prod { animation: none; box-shadow: var(--ebill-afip-prod-shadow); } } .ebill-dropzone { border: 2px dashed var(--ebill-border-dropzone); border-radius: var(--ebill-radius-dropzone); background-color: var(--ebill-bg-dropzone); transition: border-color var(--ebill-duration-fast) var(--ebill-ease-out), background-color var(--ebill-duration-fast) var(--ebill-ease-out); cursor: pointer; min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; } .ebill-dropzone:hover, .ebill-dropzone:focus-visible, .ebill-dropzone[data-active="true"] { border-color: var(--ebill-border-dropzone-active); background-color: var(--ebill-bg-dropzone-active); } /* ── 3. Carga de fuentes via next/font/google ──────────────────── */ /* En layout.tsx, declarar: import { Inter, IBM_Plex_Mono } from "next/font/google"; const inter = Inter({ subsets: ["latin"], variable: "--font-sans", display: "swap", }); const ibmPlexMono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-mono", display: "swap", }); Aplicar en : className={`${inter.variable} ${ibmPlexMono.variable}`} Razón de IBM Plex Mono para eBill: - Los glifos de "0" (cero), "O" (letra O), "1" (uno), "l" (ele minúscula) e "I" (i mayúscula) son visualmente distintos. - Confundir dígitos en un CUIT, número de CAE o importe fiscal es un error con consecuencias legales y contables. - Tailwind font-feature-settings "zero" activa el zero con barra. */ /* ── 4. Base reset administrativo ──────────────────────────────── */ /* ── 5. Focus visible accesible ────────────────────────────────── */ /* Regla: focus-visible SIEMPRE visible. Operador usa Tab para navegar entre campos del form de emisión, incluyendo el sticky de totales (que NO debe romper el tab order). Ring orange bien definido. Nunca outline:0 sin alternativa. */ /* ── 6. Scrollbar personalizada ─────────────────────────────────── */ /* Listas largas de comprobantes y el form de emisión con items necesitan scrollbar visible pero discreta. */ /* ── 7. Selection color ─────────────────────────────────────────── */ /* ── 8. Skeleton shimmer utility ───────────────────────────────── */ /* ── 9. Utilidades de layout del shell ─────────────────────────── */ /* ── 10. Totales sticky — accesibilidad ─────────────────────────── */ /* El panel de totales es position:sticky dentro del form. No interrumpe el tab order: el sticky es solo visual; los inputs están en el DOM antes que los botones de acción. Los botones de acción (Guardar/Emitir) dentro del sticky tienen tabindex normal. aria-label="Totales del comprobante" en el fieldset. */ /* ── 11. Importes en tabla ──────────────────────────────────────── */ /* ── 12. Live regions accesibles ────────────────────────────────── */ /* Anuncios para screen readers: progreso SSE de importación ARCA, errores de AFIP, confirmación de emisión. Usar aria-live="polite" para progreso, aria-live="assertive" para errores. */ /* ── 13. Badge de entorno PRODUCCIÓN — animación de atención ───── */ /* El badge PRODUCCIÓN tiene una animación de glow pulsante sutil para que sea imposible de ignorar visualmente. Se desactiva con prefers-reduced-motion. */ /* ── 14. Keyboard shortcuts ─────────────────────────────────────── */ /* Ctrl+E → emitir nuevo (desde lista) Ctrl+I → importar Esc → cerrar drawer/modal Implementados en JS; aquí solo estilos para elements. */ /* ── 15. Dropzone para certificados y CSV ───────────────────────── */ .placeholder\:text-ebill-text-muted::-moz-placeholder{ color: var(--ebill-text-muted); } .placeholder\:text-ebill-text-muted::placeholder{ color: var(--ebill-text-muted); } .focus-within\:bg-ebill-bg-table-row-hover:focus-within{ background-color: var(--ebill-bg-table-row-hover); } .hover\:border-ebill-border-accent:hover{ border-color: var(--ebill-border-accent); } .hover\:border-ebill-border-dropzone-active:hover{ border-color: var(--ebill-border-dropzone-active); } .hover\:bg-ebill-bg-dropzone-active:hover{ background-color: var(--ebill-bg-dropzone-active); } .hover\:bg-ebill-bg-table-row-hover:hover{ background-color: var(--ebill-bg-table-row-hover); } .hover\:bg-ebill-btn-primary-hover:hover{ background-color: var(--ebill-btn-primary-bg-hover); } .hover\:bg-ebill-item-row-hover:hover{ background-color: var(--ebill-item-row-hover-bg); } .hover\:bg-ebill-nav-hover:hover{ background-color: var(--ebill-nav-item-bg-hover); } .hover\:bg-neutral-200:hover{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .hover\:bg-orange-600:hover{ --tw-bg-opacity: 1; background-color: rgb(229 83 15 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-700:hover{ --tw-bg-opacity: 1; background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); } .hover\:text-ebill-item-drag-hover:hover{ color: var(--ebill-item-drag-handle-hover); } .hover\:text-ebill-text-error:hover{ color: var(--ebill-text-error); } .hover\:text-ebill-text-primary:hover{ color: var(--ebill-text-primary); } .hover\:text-ebill-text-secondary:hover{ color: var(--ebill-text-secondary); } .hover\:underline:hover{ text-decoration-line: underline; } .hover\:opacity-100:hover{ opacity: 1; } .hover\:opacity-90:hover{ opacity: 0.9; } .hover\:shadow-ebill-card-hover:hover{ --tw-shadow: var(--ebill-shadow-card-hover); --tw-shadow-colored: var(--ebill-shadow-card-hover); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus\:border-ebill-border-input-focus:focus{ border-color: var(--ebill-border-input-focus); } .focus\:bg-ebill-nav-hover:focus{ background-color: var(--ebill-nav-item-bg-hover); } .focus\:text-ebill-text-primary:focus{ color: var(--ebill-text-primary); } .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-1:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:rounded:focus-visible{ border-radius: 0.25rem; } .focus-visible\:border-ebill-border-input-focus:focus-visible{ border-color: var(--ebill-border-input-focus); } .focus-visible\:outline-none:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:outline-2:focus-visible{ outline-width: 2px; } .focus-visible\:outline-offset-1:focus-visible{ outline-offset: 1px; } .focus-visible\:outline-offset-2:focus-visible{ outline-offset: 2px; } .focus-visible\:outline-brand-orange:focus-visible{ outline-color: var(--brand-orange); } .focus-visible\:ring-1:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .active\:cursor-grabbing:active{ cursor: grabbing; } .disabled\:pointer-events-none:disabled{ pointer-events: none; } .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } .disabled\:opacity-30:disabled{ opacity: 0.3; } .disabled\:opacity-50:disabled{ opacity: 0.5; } .peer:disabled ~ .peer-disabled\:cursor-not-allowed{ cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-70{ opacity: 0.7; } .data-\[disabled\]\:pointer-events-none[data-disabled]{ pointer-events: none; } .data-\[state\=checked\]\:translate-x-4[data-state="checked"]{ --tw-translate-x: 1rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes ebill-fade-in{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: translateY(0); } } .data-\[state\=open\]\:animate-ebill-fade-in[data-state="open"]{ animation: ebill-fade-in 200ms ease-out both; } .data-\[state\=active\]\:border[data-state="active"]{ border-width: 1px; } .data-\[state\=active\]\:border-ebill-border-default[data-state="active"]{ border-color: var(--ebill-border-default); } .data-\[state\=active\]\:bg-ebill-bg-card[data-state="active"]{ background-color: var(--ebill-bg-card); } .data-\[state\=checked\]\:bg-brand-orange[data-state="checked"]{ background-color: var(--brand-orange); } .data-\[state\=open\]\:bg-neutral-100[data-state="open"]{ --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .data-\[state\=selected\]\:bg-ebill-nav-active[data-state="selected"]{ background-color: var(--ebill-nav-item-bg-active); } .data-\[state\=unchecked\]\:bg-neutral-200[data-state="unchecked"]{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .data-\[state\=active\]\:text-ebill-text-primary[data-state="active"]{ color: var(--ebill-text-primary); } .data-\[disabled\]\:opacity-50[data-disabled]{ opacity: 0.5; } .data-\[state\=active\]\:shadow-ebill-card[data-state="active"]{ --tw-shadow: var(--ebill-shadow-card); --tw-shadow-colored: var(--ebill-shadow-card); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (min-width: 640px){ .sm\:col-span-1{ grid-column: span 1 / span 1; } .sm\:col-span-3{ grid-column: span 3 / span 3; } .sm\:block{ display: block; } .sm\:inline{ display: inline; } .sm\:flex{ display: flex; } .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .sm\:px-4{ padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 768px){ .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px){ .lg\:flex{ display: flex; } .lg\:hidden{ display: none; } .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){ padding-right: 0px; } .\[\&\>span\]\:line-clamp-1>span{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .\[\&_tr\:last-child\]\:border-0 tr:last-child{ border-width: 0px; } .\[\&_tr\]\:border-b tr{ border-bottom-width: 1px; }