:root { /* Los dos colores de la AGENCIA. El bloque del los sobreescribe por petición; estos son el tema base del producto (Reservia) y sirven de reserva. */ --primario: #2F6BFF; --secundario: #5B8CFF; --sobre-primario: #FFFFFF; --sobre-secundario: #FFFFFF; --primario-oscuro: #2553C7; --primario-claro: #7FA5FF; --primario-suave: #F0F4FF; /* Los tonos para TEXTO CHICO. El primario del tema base da 4.4988:1 con blanco encima y el mínimo de la WCAG para texto normal es 4.5:1 — pasa como superficie y como título, pero no para una etiqueta de 12 px. Estos dos tonos son el mismo color, oscurecido lo justo: «--primario-fondo» va DEBAJO de texto chico y «--primario-texto» ES texto chico sobre fondo claro. Los calcula «marcaDe» en src/marca.ts. */ --primario-texto: #2553C7; --primario-fondo: #2553C7; --primario-profundo: #1D419B; --sobre-primario-fondo: #FFFFFF; /* Canales en decimal, para las sombras y los halos: «rgba()» no puede leer un hex de una var. */ --primario-rgb: 47, 107, 255; --secundario-rgb: 91, 140, 255; --primario-profundo-rgb: 29, 65, 155; /* Superficie oscura de la marca: el fondo del hero y de la pantalla de acceso. */ --superficie-oscura: #1F3059; /* Alias del mockup. Se llamaban «--pink» y «--purple»: apuntaban al tema, pero nombraban la marca del primer cliente, y en un producto multiagencia eso se lee mal —el azul de una agencia salía de una variable llamada «rosa»—. */ --acento: var(--primario); --acento-oscuro: var(--primario-oscuro); --blue: var(--secundario); --bluedark: var(--primario-oscuro); --gold: #BF9C69; --green: var(--exito); --green-oscuro: #177A50; --cream: var(--primario-suave); --ink: #1B2130; --muted: #6C7180; --line: #E7EAF2; /* Verde SOLO para confirmaciones, nunca decorativo. */ --exito: #20A46A; --app: #F6F7FB; --grad: linear-gradient(120deg, var(--primario) 0%, var(--primario-oscuro) 45%, var(--secundario) 100%); /* El degradado de lo que LLEVA TEXTO. «--grad» pasa por el secundario, que suele ser el tono más claro de la marca (el del tema base da 3.16:1 con blanco): sirve para una franja decorativa, no debajo de la etiqueta de un botón. Este otro se queda en los tonos que aguantan texto chico. */ --grad-texto: linear-gradient(120deg, var(--primario-fondo) 0%, var(--primario-profundo) 100%); --radio: 18px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--ink); background: #fff; -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-family: 'Poppins', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -.4px; } /* Cifras y folios en monoespaciada. En una tabla de cobranza los montos se alinean por columna y se comparan de un vistazo; en proporcional, «$1,250.00» y «$12,500.00» ocupan casi lo mismo y el ojo se equivoca. */ .money, .money-sm, .kpi .v, td .money-sm, .folio, .mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.2px; } p { margin: 0; } .oculto { display: none !important; } .solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 3px solid rgba(var(--primario-rgb), .45); outline-offset: 2px; } /* ============ EMBLEMA — la palomita de Reservia ============ Es un SVG, así que casi todo el dibujo vive ahí y aquí solo va cómo se asienta. Antes en este lugar había un orbe animado de 68 líneas —tres anillos girando alrededor de un planeta con continentes— que era el sello del primer cliente. Del manual de Reservia: «sombras suaves que elevan sin dramatizar», así que el emblema descansa, no flota. */ .emb { flex: none; display: block; filter: drop-shadow(0 6px 14px rgba(var(--primario-rgb), .28)); } /* Con prefers-reduced-motion no hay nada que apagar: el emblema no se mueve. */ @keyframes drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, 60px); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-70px, -50px); } } @keyframes flow { to { background-position: 300% 0; } } @keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============ CRÉDITO DE AUTORÍA — va en todas las vistas ============ */ .credito { border-top: 1px solid var(--line); margin-top: 26px; padding: 16px 0 4px; text-align: center; color: var(--muted); font-size: 11.5px; letter-spacing: .01em; } .credito b { font-weight: 700; color: var(--acento-oscuro); } .credito a { color: inherit; text-decoration: underline; } .login .credito { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62); } .login .credito b { color: var(--blue); } .card .credito { border-top-color: var(--line); color: var(--muted); margin-top: 18px; } .card .credito b { color: var(--acento-oscuro); } /* ============ LOGIN ============ */ .login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; } .login .art { position: relative; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 56px; overflow: hidden; /* El primer tono es la marca de la agencia apagada; los otros dos son gris oscuro neutro, que no es de nadie. Antes el primero era un ciruela fijo: el magenta del primer cliente. */ background: radial-gradient(900px 500px at 20% 10%, var(--superficie-oscura), #2A2540 60%, #1B1730); } .login .art::before, .login .art::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; } .login .art::before { width: 420px; height: 420px; top: -120px; left: -90px; animation: drift1 16s ease-in-out infinite; background: radial-gradient(circle, rgba(var(--primario-rgb), .9), transparent 65%); } .login .art::after { width: 380px; height: 380px; bottom: -140px; right: -70px; animation: drift2 19s ease-in-out infinite; background: radial-gradient(circle, rgba(var(--secundario-rgb), .8), transparent 65%); } .login .art .z { position: relative; z-index: 2; } .login .art h1 { font-size: 40px; font-weight: 800; line-height: 1.06; max-width: 15ch; margin: 22px 0 12px; } .login .art p { color: #D9CFE4; font-size: 15.5px; max-width: 40ch; line-height: 1.5; } .login .art .kpis { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; } .login .art .kpis div b { display: block; font-size: 26px; font-weight: 800; } .login .art .kpis div span { font-size: 12px; color: #C8BCD6; } .login .form { display: flex; align-items: center; justify-content: center; padding: 40px 30px; background: var(--cream); } .card { background: #fff; border-radius: 24px; padding: 38px 34px; width: 100%; max-width: 420px; box-shadow: 0 30px 70px -35px rgba(42, 37, 64, .4); } .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .brand .wm { font-weight: 800; font-size: 26px; line-height: 1.1; } .wm i { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* La bajada del producto. Aquí pedía 'Pacifico', una manuscrita que venía del logotipo del primer cliente — y que ni siquiera se cargaba, porque no está en el de las fuentes: caía en la cursive que tuviera el sistema. El manual de Reservia pide lo contrario, «etiquetas pequeñas, técnicas, casi clínicas», así que va en la sans con letra espaciada. */ .brand small { display: block; color: var(--primario-texto); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: 1px; } .card .sub { color: var(--muted); font-size: 14px; margin: 10px 0 22px; } .card .foot { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--muted); } label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 14px 0 6px; } .ipt { position: relative; } .ipt input, .ipt select, .ipt textarea { width: 100%; font-family: inherit; font-size: 15px; font-weight: 500; color: inherit; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s; } .ipt textarea { min-height: 84px; resize: vertical; } .ipt input:focus, .ipt select:focus, .ipt textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(var(--primario-rgb), .12); } .ipt.pw input { padding-right: 48px; } .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--grad-texto); border: none; cursor: pointer; display: grid; place-items: center; color: var(--sobre-primario-fondo); font-size: 14px; box-shadow: 0 3px 10px rgba(var(--primario-rgb), .4); } .btn { width: 100%; margin-top: 22px; border: none; border-radius: 14px; padding: 15px; font-family: inherit; font-weight: 800; font-size: 15.5px; color: var(--sobre-primario-fondo); background: var(--grad-texto); background-size: 180% 100%; cursor: pointer; transition: transform .18s, box-shadow .2s, background-position .5s; box-shadow: 0 12px 28px -12px rgba(var(--primario-rgb), .7); } .btn:hover:not(:disabled) { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 34px -12px rgba(var(--primario-rgb), .85); } .btn:disabled, .bsm:disabled { opacity: .6; cursor: progress; } .aviso { border-radius: 13px; padding: 12px 14px; font-size: 13.5px; margin: 10px 0; border: 1.5px solid; } .aviso--error { background: #FDF1EE; border-color: #F0C8BE; color: #B4472E; } .aviso--ok { background: #EDF8F3; border-color: #B8E0CE; color: var(--green-oscuro); } .aviso--info { background: var(--cream); border-color: var(--primario-claro); color: var(--acento-oscuro); } /* ============ SHELL ============ */ .top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 12px 26px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); overflow: hidden; } .top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--acento), var(--blue), var(--acento-oscuro), var(--acento)); background-size: 300% 100%; animation: flow 7s linear infinite; } .top .lg { display: flex; align-items: center; gap: 10px; } .top .lg .wm { font-weight: 800; font-size: 19px; } .nav { display: flex; gap: 2px; margin-left: 14px; flex-wrap: wrap; } .nav button { position: relative; padding: 9px 14px; border: 0; background: none; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: #5B5470; cursor: pointer; transition: color .2s, background .2s; } .nav button:hover:not([aria-current]) { color: var(--primario-texto); background: var(--cream); } .nav button[aria-current] { color: var(--sobre-primario-fondo); background: var(--grad-texto); box-shadow: 0 8px 20px -8px rgba(var(--primario-rgb), .6); } .me { margin-left: auto; display: flex; align-items: center; gap: 10px; } .av { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-texto); color: var(--sobre-primario-fondo); display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; box-shadow: 0 0 0 3px rgba(var(--primario-rgb), .18); } .me .quien { font-size: 12.5px; line-height: 1.25; } .me .quien b { display: block; font-size: 13px; } .me .quien span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; } .wrap { max-width: 1120px; margin: 26px auto 60px; padding: 0 24px; } .hey { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primario-texto); } .h1 { font-size: 29px; font-weight: 800; margin: 4px 0 20px; } .h1 .tenue { color: var(--muted); font-weight: 600; font-size: 18px; } /* hero de saldos */ .hero { position: relative; border-radius: 26px; padding: 28px 30px; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--superficie-oscura), #2A2540 55%, #1E2A3D); box-shadow: 0 26px 60px -30px rgba(42, 37, 64, .7); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(52px); opacity: .55; } .hero::before { width: 340px; height: 340px; top: -130px; left: -70px; animation: drift1 15s ease-in-out infinite; background: radial-gradient(circle, rgba(var(--primario-rgb), .95), transparent 66%); } .hero::after { width: 300px; height: 300px; bottom: -130px; right: -50px; animation: drift2 18s ease-in-out infinite; background: radial-gradient(circle, rgba(var(--secundario-rgb), .85), transparent 66%); } .hero > * { position: relative; z-index: 2; } .hero .fila { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .hero h2 { font-size: 24px; font-weight: 800; } .hero p { color: #D6CBE2; font-size: 14px; margin-top: 4px; max-width: 46ch; } .money { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; } .money small { font-size: 14px; font-weight: 600; color: #D6CBE2; display: block; letter-spacing: 0; margin-top: 4px; } .acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .acts button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 13px; padding: 12px 17px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: transform .18s, box-shadow .2s, background .2s; } .acts button:hover { transform: translateY(-3px); } .a1 { background: var(--grad-texto); color: var(--sobre-primario-fondo); box-shadow: 0 12px 26px -10px rgba(var(--primario-rgb), .7); } .a2 { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25) !important; color: #fff; } .a2:hover { background: rgba(255, 255, 255, .2); } .a3 { background: rgba(var(--secundario-rgb), .16); border: 1px solid rgba(var(--secundario-rgb), .5) !important; /* Sobre el hero oscuro, el tono claro del primario. Era un azul cielo fijo del primer cliente. */ color: var(--primario-claro); } /* KPIs */ .kpis2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } .k { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .k:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(42, 37, 64, .5); } .k::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); } .k .n { font-size: 27px; font-weight: 800; letter-spacing: -.8px; } .k .l { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .k .d { font-size: 11.5px; font-weight: 700; margin-top: 8px; color: var(--green-oscuro); min-height: 1em; } .k.warn .d { color: var(--primario-texto); } .k .interno { font-size: 10px; background: var(--cream); color: var(--primario-texto); padding: 2px 6px; border-radius: 6px; } /* paneles y listas */ .grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-top: 22px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; } .panel + .panel { margin-top: 20px; } .panel .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel h3 { font-size: 17px; font-weight: 800; } .panel .hd button.enlace { background: none; border: 0; color: var(--primario-texto); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .panel .hd button.enlace:hover { text-decoration: underline; } .fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .fila:first-of-type { border-top: none; } .ci { width: 38px; height: 38px; border-radius: 12px; background: var(--cream); display: grid; place-items: center; font-weight: 800; color: var(--primario-texto); font-size: 13px; flex: none; text-align: center; line-height: 1.1; } .ci.hoy { background: var(--grad-texto); color: var(--sobre-primario-fondo); } .fila .mid { flex: 1; min-width: 0; } .fila .mid b { font-size: 14px; display: block; } .fila .mid span { font-size: 12px; color: var(--muted); } .tag { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .t-ok { background: #E6F6E6; color: var(--green-oscuro); } .t-due { background: var(--primario-suave); color: var(--primario-texto); } .t-soon { background: #E8F4FF; color: var(--bluedark); } .bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 7px; transition: height .2s; } .bar i { display: block; height: 100%; width: var(--w, 0); background: var(--grad); border-radius: 99px; transform-origin: left; animation: barra 1s cubic-bezier(.22, 1.1, .3, 1) forwards; } /* En una lista, la fila bajo el cursor resalta y las demás se apagan. */ .panel .fila { transition: opacity .2s, background .2s; border-radius: 10px; padding-left: 6px; padding-right: 6px; } .panel:hover .fila { opacity: .6; } .panel:hover .fila:hover { opacity: 1; background: var(--cream); } .panel .fila:hover .bar { height: 9px; } .panel .fila:hover .bar i { filter: brightness(1.12) saturate(1.1); box-shadow: 0 0 12px rgba(var(--primario-rgb), .5); } .panel .fila .money-sm { transition: transform .2s, color .2s; } .panel .fila:hover .money-sm { color: var(--primario-texto); transform: scale(1.1); } .fila:nth-child(2) .bar i { animation-delay: .06s; } .fila:nth-child(3) .bar i { animation-delay: .14s; } .fila:nth-child(4) .bar i { animation-delay: .22s; } .fila:nth-child(5) .bar i { animation-delay: .30s; } .mini { display: flex; gap: 8px; align-items: flex-end; height: 70px; margin-top: 10px; } .mini i { flex: 1; background: var(--grad); border-radius: 6px 6px 0 0; opacity: .85; min-height: 3px; } .leyenda { font-size: 11.5px; color: var(--muted); margin-top: 8px; } /* barra de herramientas */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .search { flex: 1; min-width: 200px; position: relative; } .search input { width: 100%; font-family: inherit; font-size: 14px; padding: 12px 14px 12px 40px; border: 1.5px solid var(--line); border-radius: 13px; } .search input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(var(--primario-rgb), .12); } .search::before { content: "🔎"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; } .bsm { border: none; border-radius: 12px; padding: 12px 17px; font-family: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: transform .18s, box-shadow .2s, border-color .2s, color .2s; } .bsm:hover:not(:disabled) { transform: translateY(-2px); } .bsm.p { background: var(--grad-texto); color: var(--sobre-primario-fondo); box-shadow: 0 10px 24px -10px rgba(var(--primario-rgb), .7); } .bsm.g { background: #fff; border: 1.5px solid var(--line); color: var(--ink); } .bsm.g:hover { border-color: var(--primario); color: var(--primario-texto); } .bsm.chico { padding: 9px 13px; font-size: 12px; } .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } /* Filtros finos: van bajo los chips de estatus y se combinan con ellos. En móvil se apilan solos por el wrap, sin media query. */ .filtros-finos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .filtros-finos .ipt.chico { margin: 0; min-width: 150px; } .filtros-finos .ipt.chico select { padding: 7px 10px; font-size: 13px; } .chip { padding: 7px 14px; border-radius: 999px; font-family: inherit; font-size: 12.5px; font-weight: 700; background: #fff; border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; transition: all .18s; } .chip:hover { border-color: var(--primario); color: var(--primario-texto); } .chip[aria-pressed="true"] { background: var(--grad-texto); color: var(--sobre-primario-fondo); border-color: transparent; } /* tablas */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); } td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; } tbody tr { transition: background .18s; cursor: pointer; } tbody tr:hover { background: var(--cream); } td .sub { color: var(--muted); font-size: 12px; display: block; } .pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; display: inline-block; } .p-confirmada { background: #E8F4FF; color: var(--bluedark); } .p-pagada { background: #E6F6E6; color: var(--green-oscuro); } .p-cotizada { background: #FFF4E0; color: #A3762A; } .p-viajando { background: #F3E7F7; color: var(--acento-oscuro); } .p-cerrada { background: #EFF1F5; color: #5B6472; } .p-cancelada { background: #F2F0F5; color: var(--muted); } /* Ámbar y con borde punteado: es algo pendiente de completar, no un estado en calma. Se distingue a propósito de las pastillas de estatus, que son estados legítimos. */ .p-falta { background: #FFF4E0; color: #A3762A; border: 1px dashed #E0BE7A; } .faltantes { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 2px; } .consecuencias { margin: 4px 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; } .consecuencias li { margin-bottom: 8px; } /* Las fechas límite guardadas y sin programar: el dato está a salvo pero no avisa todavía. */ .enespera { border: 1.5px dashed #E0BE7A; background: #FFFBF2; border-radius: 13px; padding: 12px 14px; margin: 10px 0; } .enespera .fila { border: 0; padding: 6px 0; } .money-sm { font-weight: 800; white-space: nowrap; } /* Las dos cifras de la cobranza. Separadas y rotuladas a propósito: juntarlas en un número fue el defecto que hizo que la portada dijera «$0» con dinero sin cobrar. */ .dos-cifras { text-align: right; display: flex; flex-direction: column; gap: 10px; } .dos-cifras .money.seg { opacity: .92; } .dos-cifras .money.seg small { color: var(--blue); } .bar.chica { width: 74px; margin-top: 6px; } /* tarjetas */ .gridcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; transition: transform .2s, box-shadow .2s; cursor: pointer; position: relative; overflow: hidden; text-align: left; font-family: inherit; color: inherit; width: 100%; } .cc:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px rgba(42, 37, 64, .5); } .cc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); } .cc .top2 { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .cc .top2 b { font-size: 15px; } .cc .top2 .tel { font-size: 11.5px; color: var(--muted); } .cc .meta { font-size: 12px; color: var(--muted); line-height: 1.7; } .cc.nuevo { display: grid; place-items: center; border-style: dashed; color: var(--muted); min-height: 132px; } .cc.nuevo:hover { border-color: var(--primario); color: var(--primario-texto); } /* línea de tiempo */ .tl { position: relative; padding-left: 26px; } .tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl .it { position: relative; padding: 10px 0; } .tl .it::before { content: ""; position: absolute; left: -22px; top: 16px; width: 11px; height: 11px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(var(--primario-rgb), .18); } .tl .it.cancelado::before { background: var(--line); box-shadow: 0 0 0 3px #fff; } .tl .it b { font-size: 13.5px; display: block; } .tl .it span { font-size: 12px; color: var(--muted); } .tl .it.cancelado b { text-decoration: line-through; color: var(--muted); } /* documentos (Paso 3) — mismas tarjetas del mockup, con sus tres acciones */ .ci.grad { background: var(--grad-texto); color: var(--sobre-primario-fondo); font-size: 15px; } .cc.doc { cursor: default; } .cc.doc .acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .cc.doc .acciones .bsm { padding: 11px 12px; font-size: 12.5px; min-height: 42px; } .cc.doc .acciones .crece { flex: 1; min-width: 96px; } .cc.doc .estado { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .bsm[disabled], .btn[disabled] { opacity: .62; cursor: progress; transform: none; } .tag.t-sin { background: #F2F0F5; color: var(--muted); } .tag.t-falta { background: var(--primario-suave); color: var(--primario-texto); } .doc-nota { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; } .doc-versiones { margin-top: 10px; font-size: 11.5px; } .doc-versiones button { font-size: 11.5px; } /* editor del itinerario: bloques repetibles */ .repetible { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-top: 10px; position: relative; } .repetible .quitar { position: absolute; top: 8px; right: 8px; } .repetible + .repetible { margin-top: 10px; } .tresc { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 700px) { .tresc { grid-template-columns: 1fr; } } /* cupones comerciales */ .codigo-grande { font-size: 20px; font-weight: 800; letter-spacing: 3px; text-align: center; word-break: break-all; } .tag.t-sin { background: #F2F0F5; color: var(--muted); } /* desglose del pago */ .desglose { background: var(--cream); border-radius: 14px; padding: 14px; margin-top: 16px; font-size: 13px; } .desglose div { display: flex; justify-content: space-between; margin-bottom: 5px; gap: 12px; } .desglose div.total { border-top: 1px solid var(--line); padding-top: 7px; margin-top: 7px; margin-bottom: 0; } .desglose span { color: var(--muted); } .desglose .resalta { color: var(--primario-texto); } .desglose .bien { color: var(--green-oscuro); } .permrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .permrow:first-of-type { border-top: none; } /* ---------- extractor de IA ---------- */ .pegar textarea { width: 100%; min-height: 210px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.5; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; resize: vertical; } .pegar textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgba(var(--primario-rgb), .12); } .campo-ia { border-top: 1px solid var(--line); padding: 12px 0; } .campo-ia:first-of-type { border-top: none; } .campo-ia .cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .campo-ia .cab label { margin: 0; } .campo-ia .ipt input, .campo-ia .ipt textarea, .campo-ia .ipt select { font-size: 14px; padding: 10px 12px; } .campo-ia textarea { min-height: 72px; } .conf { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; } .conf-alta { background: #E6F6E6; color: var(--green-oscuro); } .conf-media { background: #FFF4E0; color: #A3762A; } .conf-baja { background: #F2F0F5; color: var(--muted); } .ver-cita { border: 0; background: none; color: var(--acento-oscuro); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; } .cita { margin-top: 6px; padding: 9px 12px; border-left: 3px solid var(--acento); background: var(--cream); border-radius: 0 10px 10px 0; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; } .cita.falta { border-left-color: var(--muted); color: var(--muted); } .pasos { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .paso { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); } .paso .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--muted); font-size: 11px; } .paso.activo { color: var(--ink); } .paso.activo .num { background: var(--grad-texto); color: var(--sobre-primario-fondo); } .paso.hecho .num { background: var(--green); color: #fff; } /* estado vacío */ .vacio { text-align: center; padding: 40px 20px; } .vacio h3 { font-size: 18px; font-weight: 800; margin: 14px 0 6px; } .vacio p { color: var(--muted); font-size: 13.5px; max-width: 42ch; margin: 0 auto 18px; } .vacio .emb { margin: 0 auto; } /* modal */ .telon { position: fixed; inset: 0; z-index: 80; background: rgba(42, 37, 64, .55); display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; backdrop-filter: blur(3px); } .modal { background: #fff; border-radius: 22px; padding: 26px; width: 100%; max-width: 640px; box-shadow: 0 40px 80px -30px rgba(42, 37, 64, .6); margin: auto; } .modal .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .modal h2 { font-size: 21px; font-weight: 800; } .modal .cerrar { border: 0; background: var(--cream); width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--muted); flex: none; } .modal .cerrar:hover { background: var(--line); color: var(--ink); } .dosc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .modal .pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; } .modal .pie .bsm { flex: none; } /* ============ Ajustes → Marca ============ */ /* La vista previa de los colores. Se pinta con estilos en linea desde el cliente porque los colores cambian con cada tecleo; aqui solo va la forma. */ .previa-marca { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); } .previa-boton { padding: 11px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 700; } /* La muestra de «así se ve» tiene que enseñar el tono que el sistema usa DE VERDAD debajo del texto chico, no el primario puro: si no, la vista previa miente sobre el resultado. */ .previa-pill { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; } .previa-logo { display: flex; align-items: center; gap: 14px; margin: 10px 0; flex-wrap: wrap; } .previa-logo img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 6px; } /* Un boton deshabilitado se ve apagado pero SIGUE ahi: es una funcion que se puede contratar, no un error. */ button[aria-disabled="true"], .nav button:disabled { opacity: .55; cursor: not-allowed; } /* aviso flotante */ .brindis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 14px; font-size: 13.5px; font-weight: 600; box-shadow: 0 20px 40px -18px rgba(42, 37, 64, .8); max-width: calc(100vw - 32px); } .brindis.malo { background: #B4472E; } .cargando { text-align: center; color: var(--muted); font-size: 13.5px; padding: 30px; } /* ============ MÓVIL — se captura desde el celular ============ */ @media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login .art { display: none; } .grid2, .split, .gridcards { grid-template-columns: 1fr; } } @media (max-width: 860px) { .kpis2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .top { padding: 10px 16px; gap: 10px; } .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav button { white-space: nowrap; } .me .quien { display: none; } .wrap { margin: 18px auto 48px; padding: 0 16px; } .h1 { font-size: 24px; } .hero { padding: 22px 20px; border-radius: 22px; } .money { font-size: 34px; } .acts button { flex: 1; justify-content: center; padding: 14px; } .modal { padding: 20px; border-radius: 18px; } .telon { padding: 12px; } .dosc { grid-template-columns: 1fr; } .bsm { padding: 13px 16px; } /* Las tablas colapsan a tarjetas: en un celular no hay scroll horizontal que aguante. */ table.apilable thead { display: none; } table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; width: 100%; } table.apilable tr { border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px 10px; margin-bottom: 12px; } table.apilable td { border: none; padding: 7px 0; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; } table.apilable td::before { content: attr(data-etiqueta); font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 800; color: var(--muted); flex: none; padding-top: 2px; } table.apilable td > * { text-align: right; } table.apilable td .bar { margin-left: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .k:hover, .cc:hover, .btn:hover, .bsm:hover, .acts button:hover { transform: none; } /* Los anillos se quedan quietos pero en su inclinación, no aplanados. */ .bar i { animation: none; transform: scaleX(1); } }