/* ========================================================================== kuenta.css — tokens y componentes comunes de la consola y el portal -------------------------------------------------------------------------- Identidad: la LÍNEA DEL PROGRAMA DE CONTABILIDAD KUENTA (decisión de Juan, 29-10-2026). Los valores salen de contabilidad-web, origin/main del 29-10-2026: src/lib/tokens.ts (COLORES, GRADIENTES, ESTILOS), el tema de Ant Design en src/App.tsx y src/components/Layout.tsx (menú, modo oscuro). Donde este archivo se aparta de ese origen lo dice en el comentario y en docs/DISENO_KUENTA.md §3. Autónomo: no depende de variables del visor. Todo color es un token --k-*. Prefijo de clases: .k- (no choca con las clases actuales de apps/). ========================================================================== */ :root { /* ---- Marca (tokens.ts → COLORES / GRADIENTES) ---- */ --k-primario: #6C5CE7; /* COLORES.primario */ --k-primario-claro: #A29BFE; /* COLORES.primarioClaro */ --k-primario-fondo: #EDE9FE; /* COLORES.primarioFondo · selección del menú */ --k-primario-texto: #5543D8; /* NUEVO: texto púrpura sobre --k-primario-fondo (el primario da 4,1:1, no llega a AA) */ --k-azul: #3B82F6; /* COLORES.azul */ --k-grad-primario: linear-gradient(135deg, #6C5CE7, #3B82F6); /* GRADIENTES.primario */ --k-grad-guardar: linear-gradient(135deg, #22C55E, #16A34A); /* GRADIENTES.guardar */ --k-grad-suave: linear-gradient(135deg, #EDE9FE, #DBEAFE); /* Layout.tsx · fondos de acento */ --k-sobre-marca: #FFFFFF; /* ---- Neutros (Layout.tsx, modo claro) ---- */ --k-fondo: #F7F8FA; /* colorBgBase */ --k-superficie: #FFFFFF; /* colorBgContainer */ --k-superficie-2: #FAFBFC; /* bgCardHover */ --k-superficie-3: #F3F4F6; /* itemHoverBg · chips neutros */ --k-borde: #E8ECF1; /* COLORES.borde */ --k-borde-fuerte: #D1D5DB; --k-texto: #1A1D26; /* textC */ --k-texto-2: #4B5563; /* itemColor */ --k-texto-3: #6B7280; /* COLORES.textoSecundario */ --k-texto-4: #9CA3AF; /* COLORES.textoClaro · placeholders */ /* ---- Estados. El punto usa el tono de Kuenta (TagsComprobante: #22C55E, #F59E0B, #EF4444); el TEXTO usa un tono más oscuro, porque esos tres sobre blanco quedan bajo 4,5:1. ---- */ --k-ok: #15803D; --k-ok-punto: #22C55E; --k-ok-fondo: #DCFCE7; --k-alerta: #B45309; --k-alerta-punto: #F59E0B; --k-alerta-fondo: #FEF3C7; --k-peligro: #B91C1C; --k-peligro-punto: #EF4444; --k-peligro-fondo: #FEE2E2; --k-info: #1D4ED8; --k-info-punto: #3B82F6; --k-info-fondo: #DBEAFE; --k-neutro: #4B5563; --k-neutro-punto: #9CA3AF; --k-neutro-fondo: #F3F4F6; /* ---- Antigüedad de la deuda: escala fija de 4 tramos, de leve a grave. Nunca se reutiliza como serie de un gráfico. ---- */ --k-tramo-1: #F59E0B; --k-tramo-2: #F97316; --k-tramo-3: #EF4444; --k-tramo-4: #991B1B; /* ---- Ambiente: staging y modo soporte ---- */ --k-staging-fondo: #FEF3C7; --k-staging-texto: #92400E; /* ---- Texto sobre un fondo teñido (avisos, nota interna). En claro va del tono del aviso; en oscuro, blanco: el tono sobre su propio fondo oscuro no se leía (Juan, 29-10). currentColor = el color del aviso que lo contiene. ---- */ --k-tinte-texto: currentColor; --k-nota-texto: var(--k-alerta); /* ---- Tipografía (App.tsx → fontFamily) ---- */ --k-fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --k-fuente-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace; --k-t-xs: 11px; /* ESTILOS.labelFiltro */ --k-t-sm: 12.5px; --k-t-base: 14px; --k-t-md: 16px; --k-t-lg: 20px; --k-t-xl: 26px; --k-t-kpi: 28px; /* ---- Forma (borderRadius de Kuenta: 6 chips, 8 controles, 12 tarjetas, 14 paneles) ---- */ --k-r-chico: 6px; --k-r-control: 8px; --k-r-tarjeta: 12px; --k-r-panel: 14px; --k-r-pildora: 999px; --k-sombra: 0 1px 2px rgba(26, 29, 38, .05); --k-sombra-flotante: 0 12px 32px rgba(26, 29, 38, .16); --k-foco: 0 0 0 3px rgba(108, 92, 231, .35); /* ---- Medidas compartidas (tokens.ts → LAYOUT) ---- */ --k-alto-barra: 64px; /* LAYOUT.alturaHeader */ --k-ancho-lateral: 240px; --k-ancho-lectura: 1200px; color-scheme: light; } /* ---- Modo oscuro (Layout.tsx con dk=true) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k-primario: #8B7CF6; --k-primario-claro: #A29BFE; --k-primario-fondo: #2D2556; --k-primario-texto: #C4BBFF; --k-azul: #60A5FA; --k-grad-suave: linear-gradient(135deg, #2D2556, #1E2A44); --k-fondo: #0F1117; --k-superficie: #1A1D26; --k-superficie-2: #22252F; --k-superficie-3: #262A35; --k-borde: #2A2D37; --k-borde-fuerte: #3A3E4A; --k-texto: #E5E7EB; --k-texto-2: #B0B3BA; --k-texto-3: #9CA3AF; --k-texto-4: #6B7280; --k-ok: #4ADE80; --k-ok-fondo: #14321F; --k-alerta: #FBBF24; --k-alerta-fondo: #3A2A0C; --k-peligro: #F87171; --k-peligro-fondo: #3B1518; --k-info: #93C5FD; --k-info-fondo: #172A4A; --k-neutro: #B0B3BA; --k-neutro-fondo: #262A35; --k-staging-fondo: #3A2A0C; --k-staging-texto: #FCD34D; --k-tinte-texto: #F3F4F6; --k-nota-texto: #F3F4F6; --k-tramo-4: #DC2626; --k-sombra: 0 1px 2px rgba(0, 0, 0, .4); --k-sombra-flotante: 0 12px 32px rgba(0, 0, 0, .55); color-scheme: dark; } } :root[data-theme="dark"] { --k-primario: #8B7CF6; --k-primario-claro: #A29BFE; --k-primario-fondo: #2D2556; --k-primario-texto: #C4BBFF; --k-azul: #60A5FA; --k-grad-suave: linear-gradient(135deg, #2D2556, #1E2A44); --k-fondo: #0F1117; --k-superficie: #1A1D26; --k-superficie-2: #22252F; --k-superficie-3: #262A35; --k-borde: #2A2D37; --k-borde-fuerte: #3A3E4A; --k-texto: #E5E7EB; --k-texto-2: #B0B3BA; --k-texto-3: #9CA3AF; --k-texto-4: #6B7280; --k-ok: #4ADE80; --k-ok-fondo: #14321F; --k-alerta: #FBBF24; --k-alerta-fondo: #3A2A0C; --k-peligro: #F87171; --k-peligro-fondo: #3B1518; --k-info: #93C5FD; --k-info-fondo: #172A4A; --k-neutro: #B0B3BA; --k-neutro-fondo: #262A35; --k-staging-fondo: #3A2A0C; --k-staging-texto: #FCD34D; --k-tinte-texto: #F3F4F6; --k-nota-texto: #F3F4F6; --k-tramo-4: #DC2626; --k-sombra: 0 1px 2px rgba(0, 0, 0, .4); --k-sombra-flotante: 0 12px 32px rgba(0, 0, 0, .55); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { font-family: var(--k-fuente); font-size: var(--k-t-base); line-height: 1.5; background: var(--k-fondo); color: var(--k-texto); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } input[type="checkbox"], input[type="radio"] { accent-color: var(--k-primario); } /* Un ícono sin medida propia mide 18 px (especificidad cero: cualquier clase lo cambia) */ svg:where(:not([width])) { width: 18px; height: 18px; flex: none; } a { color: var(--k-primario-texto); } :focus-visible { outline: none; box-shadow: var(--k-foco); } .k-h1 { font-size: var(--k-t-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; text-wrap: balance; } .k-h2 { font-size: var(--k-t-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; text-wrap: balance; } .k-h3 { font-size: var(--k-t-md); font-weight: 600; line-height: 1.3; margin: 0; } .k-etiqueta { font-size: var(--k-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--k-texto-3); } .k-sec { color: var(--k-texto-3); } .k-chico { font-size: var(--k-t-sm); } .k-num { font-variant-numeric: tabular-nums; } .k-rojo { color: var(--k-peligro); } .k-verde { color: var(--k-ok); } /* ========================================================================== Marca · isotipo (cuadro redondeado con degradé y K cursiva, como Layout.tsx) ========================================================================== */ .k-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--k-texto); } .k-isotipo { width: 36px; height: 36px; border-radius: 10px; background: var(--k-grad-primario); display: inline-grid; place-items: center; flex: none; color: #fff; font: italic 900 20px/1 var(--k-fuente); } .k-isotipo.chico { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; } .k-isotipo.grande { width: 64px; height: 64px; border-radius: 18px; font-size: 36px; } .k-palabra { font-size: 18px; font-weight: 700; letter-spacing: -.3px; } .k-producto { font-size: var(--k-t-xs); font-weight: 600; color: var(--k-texto-3); text-transform: uppercase; letter-spacing: .06em; } /* ========================================================================== Botones ========================================================================== */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--k-r-control); border: 1px solid var(--k-borde); background: var(--k-superficie); color: var(--k-texto); font-weight: 600; font-size: var(--k-t-base); white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, filter .15s; } .k-btn:hover { border-color: var(--k-primario-claro); color: var(--k-primario-texto); } .k-btn svg { width: 16px; height: 16px; flex: none; } .k-btn-primario { background: var(--k-grad-primario); border-color: transparent; color: var(--k-sobre-marca); } .k-btn-primario:hover { color: var(--k-sobre-marca); filter: brightness(1.08); border-color: transparent; } .k-btn-guardar { background: var(--k-grad-guardar); border-color: transparent; color: #fff; } .k-btn-guardar:hover { color: #fff; filter: brightness(1.06); border-color: transparent; } .k-btn-fantasma { background: transparent; border-color: transparent; color: var(--k-primario-texto); } .k-btn-fantasma:hover { background: var(--k-primario-fondo); border-color: transparent; } .k-btn-peligro { background: var(--k-superficie); border-color: var(--k-peligro-fondo); color: var(--k-peligro); } .k-btn-peligro:hover { background: var(--k-peligro-fondo); color: var(--k-peligro); border-color: var(--k-peligro-fondo); } .k-btn-chico { min-height: 28px; padding: 0 10px; font-size: var(--k-t-sm); border-radius: var(--k-r-chico); } .k-btn-icono { width: 36px; padding: 0; } .k-btn-icono.k-btn-chico { width: 28px; } .k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; } .k-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ========================================================================== Chips de filtro, estados y etiquetas ========================================================================== */ .k-chips { display: flex; flex-wrap: wrap; gap: 6px; } .k-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: var(--k-r-pildora); border: 1px solid var(--k-borde); background: var(--k-superficie); color: var(--k-texto-2); font-size: var(--k-t-sm); font-weight: 500; } .k-chip:hover { border-color: var(--k-primario-claro); } .k-chip .k-cuenta { font-variant-numeric: tabular-nums; color: var(--k-texto-4); font-weight: 600; } .k-chip[aria-pressed="true"], .k-chip.activo { background: var(--k-primario-fondo); border-color: var(--k-primario-fondo); color: var(--k-primario-texto); font-weight: 600; } .k-chip[aria-pressed="true"] .k-cuenta, .k-chip.activo .k-cuenta { color: var(--k-primario-texto); } /* Estado: punto de color + texto (TagsComprobante D2c: "menos peso visual") */ .k-estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--k-t-sm); font-weight: 500; color: var(--k-texto-2); white-space: nowrap; } .k-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--k-neutro-punto); flex: none; } .k-estado.ok::before { background: var(--k-ok-punto); } .k-estado.alerta::before { background: var(--k-alerta-punto); } .k-estado.peligro::before { background: var(--k-peligro-punto); } .k-estado.info::before { background: var(--k-info-punto); } /* Etiqueta: chip sutil (preset de Ant: tinte claro + texto del mismo tono) */ .k-etq { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--k-r-chico); font-size: var(--k-t-xs); font-weight: 600; background: var(--k-neutro-fondo); color: var(--k-neutro); white-space: nowrap; } .k-etq.marca { background: var(--k-primario-fondo); color: var(--k-primario-texto); } .k-etq.ok { background: var(--k-ok-fondo); color: var(--k-ok); } .k-etq.alerta { background: var(--k-alerta-fondo); color: var(--k-alerta); } .k-etq.peligro { background: var(--k-peligro-fondo); color: var(--k-peligro); } .k-etq.info { background: var(--k-info-fondo); color: var(--k-info); } .k-insignia { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--k-peligro-punto); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ========================================================================== Tarjetas KPI ========================================================================== */ .k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; } .k-kpi { display: grid; gap: 4px; align-content: start; text-align: left; padding: 16px; background: var(--k-superficie); border: 1px solid var(--k-borde); border-radius: var(--k-r-tarjeta); color: var(--k-texto); text-decoration: none; min-width: 0; } a.k-kpi:hover, button.k-kpi:hover { border-color: var(--k-primario-claro); } .k-kpi-valor { font-size: var(--k-t-kpi); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .k-kpi-nota { font-size: var(--k-t-sm); color: var(--k-texto-3); } .k-kpi-delta { font-size: var(--k-t-sm); font-weight: 600; } .k-kpi-delta.sube { color: var(--k-ok); } .k-kpi-delta.baja { color: var(--k-peligro); } .k-kpi.peligro .k-kpi-valor { color: var(--k-peligro); } .k-kpi.destacado { background: var(--k-grad-primario); border-color: transparent; color: #fff; } .k-kpi.destacado .k-etiqueta, .k-kpi.destacado .k-kpi-nota { color: rgba(255,255,255,.82); } .k-spark { height: 28px; width: 100%; margin-top: 4px; } /* ========================================================================== Paneles y tarjetas ========================================================================== */ .k-panel { background: var(--k-superficie); border: 1px solid var(--k-borde); border-radius: var(--k-r-panel); min-width: 0; overflow: hidden; } .k-panel-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--k-borde); } .k-panel-cab .k-h3 { display: flex; align-items: center; gap: 8px; font-size: var(--k-t-base); } .k-panel-cab .k-h3 svg { width: 16px; height: 16px; color: var(--k-azul); } .k-panel-cuerpo { padding: 16px; display: grid; gap: 12px; } .k-panel-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--k-borde); background: var(--k-superficie-2); } .k-tarjeta { background: var(--k-superficie); border: 1px solid var(--k-borde); border-radius: var(--k-r-tarjeta); padding: 14px; min-width: 0; } .k-lista { list-style: none; margin: 0; padding: 0; } .k-lista > li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--k-borde); min-width: 0; } .k-lista > li:last-child { border-bottom: 0; } .k-lista .k-crece { flex: 1; min-width: 0; } .k-lista .k-titulo-fila { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Tablas ========================================================================== */ .k-tabla-env { overflow-x: auto; } .k-tabla { width: 100%; border-collapse: collapse; font-size: 13px; } .k-tabla th { text-align: left; font-size: var(--k-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--k-texto-3); padding: 10px 16px; background: var(--k-superficie-2); border-bottom: 1px solid var(--k-borde); white-space: nowrap; position: sticky; top: 0; } .k-tabla th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } .k-tabla th[aria-sort] { color: var(--k-primario-texto); } .k-tabla td { padding: 11px 16px; border-bottom: 1px solid var(--k-borde); vertical-align: middle; } .k-tabla tbody tr:last-child td { border-bottom: 0; } .k-tabla tbody tr:hover td { background: var(--k-superficie-2); } .k-tabla tbody tr[aria-selected="true"] td { background: var(--k-primario-fondo); } .k-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .k-tabla .k-sub { display: block; font-size: 12px; color: var(--k-texto-3); } .k-tabla .k-fuerte { font-weight: 600; } .k-tabla tfoot td { font-weight: 700; background: var(--k-superficie-2); border-top: 1px solid var(--k-borde); border-bottom: 0; } /* Tabla que se vuelve lista en celular: cada fila es una tarjeta */ @media (max-width: 640px) { .k-tabla.apila thead { display: none; } .k-tabla.apila, .k-tabla.apila tbody, .k-tabla.apila tr, .k-tabla.apila td { display: block; width: 100%; } .k-tabla.apila tr { padding: 10px 16px; border-bottom: 1px solid var(--k-borde); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; } .k-tabla.apila td { padding: 0; border: 0; } .k-tabla.apila td.num { text-align: right; } .k-tabla.apila td.oculta-movil { display: none; } .k-tabla.apila tbody tr:hover td { background: transparent; } } /* ========================================================================== Ficha (cabecera de cliente / empresa) ========================================================================== */ .k-ficha-cab { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 20px; background: var(--k-superficie); border: 1px solid var(--k-borde); border-radius: var(--k-r-panel); } .k-ficha-cab .k-crece { flex: 1; min-width: 220px; display: grid; gap: 4px; } .k-ficha-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--k-texto-3); font-size: var(--k-t-sm); } .k-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin: 0; } .k-datos div { display: grid; gap: 2px; min-width: 0; } .k-datos dt { font-size: var(--k-t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--k-texto-3); } .k-datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } .k-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--k-primario); color: #fff; font-weight: 700; font-size: 13px; } .k-avatar.grande { width: 56px; height: 56px; font-size: 20px; border-radius: 16px; background: var(--k-grad-primario); } .k-avatar.chico { width: 28px; height: 28px; font-size: 11px; } .k-avatar.neutro { background: var(--k-superficie-3); color: var(--k-texto-2); } /* Pestañas internas */ .k-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--k-borde); overflow-x: auto; } .k-pestanas button { border: 0; background: none; padding: 10px 12px; color: var(--k-texto-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .k-pestanas button[aria-selected="true"] { color: var(--k-primario-texto); border-bottom-color: var(--k-primario); font-weight: 600; } /* Línea de tiempo */ .k-tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .k-tiempo li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; position: relative; } .k-tiempo li::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: -14px; width: 1px; background: var(--k-borde); } .k-tiempo li:last-child::before { display: none; } .k-tiempo .k-punto { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--k-superficie-3); color: var(--k-texto-2); } .k-tiempo .k-punto svg { width: 14px; height: 14px; } .k-tiempo .k-punto.ok { background: var(--k-ok-fondo); color: var(--k-ok); } .k-tiempo .k-punto.peligro { background: var(--k-peligro-fondo); color: var(--k-peligro); } .k-tiempo .k-punto.marca { background: var(--k-primario-fondo); color: var(--k-primario-texto); } /* Barra apilada de antigüedad de deuda */ .k-barra-apilada { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--k-superficie-3); gap: 2px; } .k-barra-apilada span { display: block; height: 100%; } .k-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--k-t-sm); color: var(--k-texto-2); } .k-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .k-progreso { height: 6px; border-radius: 3px; background: var(--k-superficie-3); overflow: hidden; } .k-progreso span { display: block; height: 100%; background: var(--k-grad-primario); border-radius: 3px; } /* ========================================================================== Formularios ========================================================================== */ .k-form { display: grid; gap: 14px; } .k-campo { display: grid; gap: 6px; min-width: 0; } .k-campo label, .k-campo .k-rotulo { font-size: 13px; font-weight: 600; color: var(--k-texto); } .k-input, .k-select, .k-textarea { width: 100%; min-height: 36px; padding: 7px 11px; border: 1px solid var(--k-borde-fuerte); border-radius: var(--k-r-control); background: var(--k-superficie); color: var(--k-texto); } .k-textarea { min-height: 84px; resize: vertical; } .k-input::placeholder, .k-textarea::placeholder { color: var(--k-texto-4); } .k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--k-primario-claro); } .k-input:focus, .k-select:focus, .k-textarea:focus { outline: none; border-color: var(--k-primario); box-shadow: var(--k-foco); } .k-campo .k-ayuda { font-size: 12px; color: var(--k-texto-3); } .k-campo.error .k-input, .k-campo.error .k-select { border-color: var(--k-peligro-punto); } .k-campo.error .k-ayuda { color: var(--k-peligro); } .k-buscador { position: relative; min-width: 0; } .k-buscador svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--k-texto-4); pointer-events: none; } .k-buscador .k-input { padding-left: 34px; background: var(--k-superficie-2); } .k-buscador kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 600 11px/1 var(--k-fuente); color: var(--k-texto-4); border: 1px solid var(--k-borde); border-radius: 4px; padding: 3px 5px; background: var(--k-superficie); } .k-check { display: inline-flex; gap: 8px; align-items: center; font-size: var(--k-t-base); } .k-check input { width: 16px; height: 16px; accent-color: var(--k-primario); } .k-interruptor { position: relative; display: inline-flex; align-items: center; gap: 10px; } .k-interruptor input { appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--k-borde-fuerte); position: relative; cursor: pointer; transition: background .15s; margin: 0; } .k-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .k-interruptor input:checked { background: var(--k-primario); } .k-interruptor input:checked::after { transform: translateX(16px); } .k-form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } /* ========================================================================== Avisos: toast, banda en línea, banda de ambiente ========================================================================== */ .k-toasts { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); } .k-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--k-r-tarjeta); background: var(--k-texto); color: var(--k-superficie); box-shadow: var(--k-sombra-flotante); font-size: var(--k-t-base); animation: k-entra .2s ease-out; } .k-toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .k-toast.ok svg { color: var(--k-ok-punto); } .k-toast.peligro svg { color: var(--k-peligro-punto); } .k-toast .k-crece { flex: 1; min-width: 0; } .k-toast button { border: 0; background: none; color: var(--k-primario-claro); font-weight: 700; padding: 0; } @keyframes k-entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .k-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--k-r-tarjeta); background: var(--k-info-fondo); color: var(--k-info); font-size: var(--k-t-base); } .k-aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .k-aviso.alerta { background: var(--k-alerta-fondo); color: var(--k-alerta); } .k-aviso.peligro { background: var(--k-peligro-fondo); color: var(--k-peligro); } .k-aviso.ok { background: var(--k-ok-fondo); color: var(--k-ok); } .k-aviso b { font-weight: 700; } .k-aviso .k-crece { flex: 1; min-width: 0; color: var(--k-tinte-texto); } .k-banda-ambiente { background: var(--k-staging-fondo); color: var(--k-staging-texto); font-size: 12px; font-weight: 600; text-align: center; padding: 4px 16px; letter-spacing: .02em; } /* ========================================================================== Estados de una vista: vacío, cargando, error ========================================================================== */ .k-vacio, .k-error { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--k-texto-3); } .k-vacio .k-ilustra, .k-error .k-ilustra { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--k-grad-suave); color: var(--k-primario-texto); } .k-error .k-ilustra { background: var(--k-peligro-fondo); color: var(--k-peligro); } .k-vacio .k-ilustra svg, .k-error .k-ilustra svg { width: 22px; height: 22px; } .k-vacio strong, .k-error strong { color: var(--k-texto); font-size: var(--k-t-md); } .k-vacio p, .k-error p { margin: 0; max-width: 42ch; } .k-esqueleto { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--k-superficie-3) 0%, var(--k-superficie-2) 50%, var(--k-superficie-3) 100%); background-size: 200% 100%; animation: k-brillo 1.2s linear infinite; } .k-esqueleto.alto { height: 28px; width: 60%; } @keyframes k-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ========================================================================== Cajón lateral (detalle sin salir de la lista) ========================================================================== */ .k-velo { position: fixed; inset: 0; background: rgba(15, 17, 23, .45); z-index: 40; } .k-cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--k-superficie); border-left: 1px solid var(--k-borde); box-shadow: var(--k-sombra-flotante); z-index: 41; display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .k-cajon > header, .k-cajon > footer { padding: 14px 16px; border-bottom: 1px solid var(--k-borde); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .k-cajon > footer { border-top: 1px solid var(--k-borde); border-bottom: 0; } .k-cajon > .k-cajon-cuerpo { overflow-y: auto; padding: 16px; display: grid; gap: 16px; align-content: start; } /* ========================================================================== Conversación (bandeja) ========================================================================== */ .k-hilo { display: grid; gap: 10px; align-content: start; padding: 16px; } .k-msg { max-width: min(78%, 520px); padding: 9px 12px; border-radius: 14px; background: var(--k-superficie-3); color: var(--k-texto); justify-self: start; border-bottom-left-radius: 4px; } /* Mensaje propio: lila suave, no el degradé (Juan, 29-10: "este tono esta muy fuerte atenuar") */ .k-msg.mio { justify-self: end; background: var(--k-primario-fondo); color: var(--k-texto); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; } .k-msg.mio .k-hora { color: var(--k-primario-texto); opacity: .85; } .k-msg.nota { justify-self: stretch; max-width: none; background: var(--k-alerta-fondo); color: var(--k-nota-texto); border-radius: 10px; font-size: var(--k-t-sm); } .k-msg .k-hora { display: block; font-size: 11px; opacity: .7; margin-top: 2px; text-align: right; } .k-msg.evento { justify-self: center; background: none; color: var(--k-texto-3); font-size: 12px; padding: 0; } .k-redactar { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--k-borde); background: var(--k-superficie); } .k-canal { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; flex: none; } .k-canal svg { width: 12px; height: 12px; } .k-canal.whatsapp { background: #16A34A; } .k-canal.correo { background: var(--k-azul); } .k-canal.web { background: var(--k-primario); } /* ========================================================================== Cáscara de la CONSOLA: menú lateral (como el Sider de Kuenta) + barra ========================================================================== */ .k-app { min-height: 100vh; display: grid; grid-template-columns: var(--k-ancho-lateral) minmax(0, 1fr); } .k-lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--k-superficie); border-right: 1px solid var(--k-borde); display: flex; flex-direction: column; } .k-lateral .k-marca { height: var(--k-alto-barra); padding: 0 16px; border-bottom: 1px solid var(--k-borde); flex: none; } .k-agencia { margin: 12px 12px 4px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--k-borde); border-radius: var(--k-r-control); background: var(--k-superficie-2); text-align: left; width: calc(100% - 24px); } .k-agencia .k-crece { flex: 1; min-width: 0; display: grid; } .k-agencia b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-agencia span { font-size: 11px; color: var(--k-texto-3); } .k-nav { padding: 8px; display: grid; gap: 2px; } .k-nav-grupo { padding: 14px 10px 4px; } .k-nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: var(--k-r-control); color: var(--k-texto-2); text-decoration: none; font-weight: 500; } .k-nav a svg { width: 18px; height: 18px; flex: none; } .k-nav a:hover { background: var(--k-superficie-3); } .k-nav a[aria-current="page"] { background: var(--k-primario-fondo); color: var(--k-primario-texto); font-weight: 600; } .k-nav a .k-insignia { margin-left: auto; } .k-lateral-pie { margin-top: auto; padding: 12px; border-top: 1px solid var(--k-borde); } .k-principal { min-width: 0; display: flex; flex-direction: column; } .k-barra { position: sticky; top: 0; z-index: 10; height: var(--k-alto-barra); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--k-superficie); border-bottom: 1px solid var(--k-borde); } .k-barra .k-buscador { flex: 1; max-width: 460px; } .k-barra .k-derecha { margin-left: auto; display: flex; align-items: center; gap: 6px; } .k-barra .k-menu-movil { display: none; } .k-contenido { width: 100%; max-width: var(--k-ancho-lectura); margin: 0 auto; padding: 24px; display: grid; gap: 20px; align-content: start; } .k-titulo-vista { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .k-titulo-vista p { margin: 4px 0 0; color: var(--k-texto-3); } .k-migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--k-t-sm); color: var(--k-texto-3); } .k-migas a { color: var(--k-texto-3); text-decoration: none; } .k-migas a:hover { color: var(--k-primario-texto); } .k-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .k-col-4 { grid-column: span 4; } .k-col-5 { grid-column: span 5; } .k-col-6 { grid-column: span 6; } .k-col-7 { grid-column: span 7; } .k-col-8 { grid-column: span 8; } .k-col-12 { grid-column: span 12; } /* Barra inferior del celular (consola y portal) */ .k-pestanas-movil { display: none; } @media (max-width: 1100px) { .k-col-4, .k-col-5, .k-col-6, .k-col-7, .k-col-8 { grid-column: span 12; } } @media (max-width: 860px) { .k-app { grid-template-columns: minmax(0, 1fr); } .k-lateral { position: fixed; z-index: 45; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .2s; height: auto; padding-top: env(safe-area-inset-top, 0px); } .k-app.menu-abierto .k-lateral { transform: none; box-shadow: var(--k-sombra-flotante); } .k-barra { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); top: env(safe-area-inset-top, 0px); height: 56px; } .k-barra .k-menu-movil { display: inline-flex; } .k-barra .k-buscador { display: none; } .k-barra .k-marca-movil { display: inline-flex; } .k-contenido { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px)); gap: 16px; } .k-pestanas-movil { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--k-superficie); border-top: 1px solid var(--k-borde); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); } /* en los mockups y el portal;