/* ═══════════════════════════════════════════════════════════ TEMAS — cuatro identidades visuales, no cuatro paletas. Cambian tipografía, forma, ritmo y composición del encabezado. Se activan con data-tema en . ═══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────── 1 · OFICIO — para el software con el que se cierra el mes. InverRent · AdminLook · OrdenPlace · InvoPlace Serif editorial, esquinas rectas, reglas finas, cifras tabulares. Se parece a un estado de cuenta bien impreso. ───────────────────────────────────────────────────────── */ [data-tema="oficio"]{ --display:"Instrument Serif","Georgia",serif; --radio:3px; --papel:#F7F6F3; --papel2:#EFEDE8; --regla:#CFC9BC; --regla-tenue:#E3DFD6; } [data-tema="oficio"] h1, [data-tema="oficio"] h2{font-weight:400;letter-spacing:-.012em;line-height:1.02} [data-tema="oficio"] h1{font-size:clamp(2.8rem,7vw,5rem)} [data-tema="oficio"] h2{font-size:clamp(2rem,4.2vw,3.1rem)} [data-tema="oficio"] h3{font-family:var(--cuerpo);font-weight:600;font-size:1.08rem;letter-spacing:-.005em} [data-tema="oficio"] .portada h1 em{font-style:italic;background:none;-webkit-text-fill-color:currentColor;color:var(--acento2)} [data-tema="oficio"] .btn{border-radius:2px;font-size:.92rem;letter-spacing:.01em} [data-tema="oficio"] .btn-a{background:var(--acento);box-shadow:none} [data-tema="oficio"] .btn-a:hover{background:color-mix(in srgb,var(--acento) 80%,#000);box-shadow:none} [data-tema="oficio"] .tarj{border-radius:2px;border-color:var(--regla)} [data-tema="oficio"] .tarj::before{display:none} [data-tema="oficio"] .tarj:hover{transform:none;border-color:var(--acento);box-shadow:none} [data-tema="oficio"] .datos{border-radius:2px;border-color:var(--regla)} [data-tema="oficio"] .reng{border-left-width:2px} [data-tema="oficio"] .reng-ico,[data-tema="oficio"] .reng-mono{border-radius:4px} [data-tema="oficio"] .ficha-ico,[data-tema="oficio"] .ficha-mono{border-radius:8px} [data-tema="oficio"] .chip{border-radius:2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em} [data-tema="oficio"] .marbete{border-radius:2px} /* las cifras son el argumento: tabulares y con regla arriba */ [data-tema="oficio"] .cifras-band > div{border-left:0;border-top:2px solid var(--tinta);padding-top:22px;margin-right:26px} [data-tema="oficio"] .cifras-band dd{ background:none;-webkit-text-fill-color:currentColor;color:var(--tinta); font-family:var(--cuerpo);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em; } [data-tema="oficio"] .portada::after{ background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 34px); } [data-tema="oficio"] .toma img{border-radius:14px} [data-tema="oficio"] .toma-mac img{border-radius:4px} /* ───────────────────────────────────────────────────────── 2 · CASA — para lo que se usa en la vida diaria. NookFin · Mundara · Table Ready AI Redondeado, generoso, degradados suaves, aire. Se siente como una app de consumo, no como un sistema. ───────────────────────────────────────────────────────── */ [data-tema="casa"]{ --radio:26px; --papel:#FBFAF8; --papel2:#F3F1EC; --regla:#E4DFD6; --regla-tenue:#EEEAE3; } [data-tema="casa"] h1{letter-spacing:-.045em} [data-tema="casa"] .btn{border-radius:999px;padding:14px 26px} [data-tema="casa"] .tarj{border-radius:24px;padding:32px;border:0;box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 40px -26px rgba(11,18,32,.28)} [data-tema="casa"] .tarj::before{display:none} [data-tema="casa"] .tarj:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(11,18,32,.05),0 28px 56px -26px rgba(11,18,32,.35)} [data-tema="casa"] .sec-blanca .tarj{background:var(--blanco)} [data-tema="casa"] .datos{border-radius:24px;border:0;box-shadow:0 1px 2px rgba(11,18,32,.04),0 18px 40px -26px rgba(11,18,32,.28)} [data-tema="casa"] .chip{border-radius:999px;padding:6px 14px} [data-tema="casa"] .reng{border-radius:20px;border-bottom:0;margin-bottom:6px} [data-tema="casa"] .reng:hover{padding-left:20px} [data-tema="casa"] .indice{border-top:0} [data-tema="casa"] .reng-ico,[data-tema="casa"] .reng-mono{border-radius:16px} [data-tema="casa"] .ficha-ico,[data-tema="casa"] .ficha-mono{border-radius:28px} [data-tema="casa"] .lista-func li{border-top:0;padding:14px 0} [data-tema="casa"] .lista-func h3{margin-bottom:5px} [data-tema="casa"] .portada::before{opacity:.75} [data-tema="casa"] .portada::after{display:none} [data-tema="casa"] .cifras-band > div{border-left:0} [data-tema="casa"] .toma img{border-radius:32px} [data-tema="casa"] .banda{background:linear-gradient(180deg,var(--blanco),var(--papel))} /* ───────────────────────────────────────────────────────── 3 · CANCHA — para lo que se vive con adrenalina. La Jugada · AcademyLook Oscuro de arriba a abajo, tipografía ancha en mayúsculas, diagonales y contraste alto. Se parece a un marcador. ───────────────────────────────────────────────────────── */ [data-tema="cancha"]{ --display:"Archivo","Helvetica Neue",Arial,sans-serif; --radio:6px; --papel:#0E141F; --papel2:#161E2C; --blanco:#141C29; --regla:#283346; --regla-tenue:#1E2736; --gris:#93A1B8; --gris-claro:#6C7A92; --tinta:#050810; color-scheme:dark; } [data-tema="cancha"] body,[data-tema="cancha"]{color:#EAF0FA} [data-tema="cancha"] h1,[data-tema="cancha"] h2,[data-tema="cancha"] h3,[data-tema="cancha"] h4{color:#fff} [data-tema="cancha"] h1,[data-tema="cancha"] h2{text-transform:uppercase;font-weight:800;letter-spacing:-.02em} [data-tema="cancha"] h1{font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:.96} [data-tema="cancha"] .cab{background:rgba(14,20,31,.9);border-bottom-color:var(--regla)} [data-tema="cancha"] .marca{color:#fff} [data-tema="cancha"] .menu a{color:#B9C6DB} [data-tema="cancha"] .hamb{background:var(--papel2);color:#fff;border-color:var(--regla)} [data-tema="cancha"] .sec-blanca,[data-tema="cancha"] .banda{background:var(--papel2);border-color:var(--regla-tenue)} [data-tema="cancha"] .sec-tono{background:linear-gradient(180deg,color-mix(in srgb,var(--acento) 16%,var(--papel)),var(--papel))} [data-tema="cancha"] .tarj{background:var(--papel2);border-color:var(--regla);color:#EAF0FA} [data-tema="cancha"] .sec-blanca .tarj{background:var(--papel)} [data-tema="cancha"] .tarj h3{color:#fff} [data-tema="cancha"] .tarj p,[data-tema="cancha"] .lista-func p,[data-tema="cancha"] .plomo{color:var(--gris)} [data-tema="cancha"] .tarj ul li{color:#C9D5E8;border-color:var(--regla)} [data-tema="cancha"] .datos{background:var(--papel2);border-color:var(--regla)} [data-tema="cancha"] .datos dd{color:#DCE6F5} [data-tema="cancha"] .datos .par{border-color:var(--regla)} [data-tema="cancha"] .reng{border-color:var(--regla);color:#EAF0FA} [data-tema="cancha"] .reng:hover{background:var(--papel2)} [data-tema="cancha"] .lista-func li{border-color:var(--regla)} [data-tema="cancha"] .btn{border-radius:4px;text-transform:uppercase;font-size:.84rem;letter-spacing:.08em;font-weight:700} [data-tema="cancha"] .btn-b{background:transparent;color:#fff;border-color:var(--regla)} [data-tema="cancha"] .btn-b:hover{background:var(--papel2);color:#fff} [data-tema="cancha"] .cifras-band dt,[data-tema="cancha"] .folio{color:var(--gris-claro)} [data-tema="cancha"] .chip{background:color-mix(in srgb,var(--c,var(--acento)) 22%,transparent);color:#fff} [data-tema="cancha"] .campo input{background:var(--papel2);border-color:var(--regla);color:#fff} [data-tema="cancha"] table.datos-tabla th{background:var(--papel);color:var(--gris);border-color:var(--regla)} [data-tema="cancha"] table.datos-tabla td{color:#DCE6F5;border-color:var(--regla)} [data-tema="cancha"] .tabla-caja,[data-tema="cancha"] .lateral,[data-tema="cancha"] .cuenta{background:var(--papel2);border-color:var(--regla)} [data-tema="cancha"] .conteo{background:var(--papel);border-color:var(--regla)} [data-tema="cancha"] .lateral button{color:#C9D5E8} [data-tema="cancha"] .lateral button:hover{background:var(--papel)} [data-tema="cancha"] .vacio strong{color:#fff} [data-tema="cancha"] .legal p,[data-tema="cancha"] .legal li{color:#C9D5E8} [data-tema="cancha"] .menu .idiomas{border-color:var(--regla)} [data-tema="cancha"] .menu .idiomas a{color:#B9C6DB} [data-tema="cancha"] .como-enlace{color:var(--acento2)} [data-tema="cancha"] .portada{border-bottom:3px solid var(--acento)} [data-tema="cancha"] .cifras-band > div{border-color:var(--regla)} /* ───────────────────────────────────────────────────────── 4 · TALLER — para la herramienta que hace una cosa bien. Recibo Estudio · TicketMake · Textil Manager · SellOS Claro, técnico, mono a la vista, mucho blanco y una sola línea de color. Se parece a una hoja de especificación. ───────────────────────────────────────────────────────── */ [data-tema="taller"]{ --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --radio:8px; --papel:#FFFFFF; --papel2:#F4F5F7; --regla:#DDE0E6; --regla-tenue:#EBEDF1; } [data-tema="taller"] h1{letter-spacing:-.035em;font-weight:700} [data-tema="taller"] h2{letter-spacing:-.03em} [data-tema="taller"] .sec-blanca{background:var(--papel2)} [data-tema="taller"] .tarj{background:var(--papel);border-radius:8px;border-color:var(--regla)} [data-tema="taller"] .sec-blanca .tarj{background:var(--blanco)} [data-tema="taller"] .tarj::before{height:2px} [data-tema="taller"] .btn{border-radius:7px} [data-tema="taller"] .datos{border-radius:8px;box-shadow:none;border-color:var(--regla)} [data-tema="taller"] .chip{border-radius:5px;font-family:var(--mono);font-size:.74rem} [data-tema="taller"] .reng-ico,[data-tema="taller"] .reng-mono{border-radius:9px} [data-tema="taller"] .ficha-ico,[data-tema="taller"] .ficha-mono{border-radius:16px} [data-tema="taller"] .cifras-band dd{font-family:var(--display);font-variant-numeric:tabular-nums} [data-tema="taller"] .cifras-band > div{border-left:1px dashed var(--regla)} [data-tema="taller"] .portada::after{ background: repeating-linear-gradient(to right,rgba(255,255,255,.05) 0 1px,transparent 1px 60px), repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 60px); } [data-tema="taller"] .lista-func li{border-top-style:dashed} [data-tema="taller"] .toma img{border-radius:20px} /* botones: si el acento es muy claro, se usa una variante oscurecida para que el texto blanco cumpla contraste (se define en marca.css) */ .btn-a{ background:linear-gradient(135deg, var(--acento-btn,var(--acento)), color-mix(in srgb,var(--acento-btn,var(--acento)) 68%,var(--acento2))); box-shadow:0 8px 20px -10px var(--acento-btn,var(--acento)); } .btn-a:hover{box-shadow:0 13px 26px -10px var(--acento-btn,var(--acento))} [data-tema="oficio"] .btn-a{background:var(--acento-btn,var(--acento))} [data-tema="oficio"] .btn-a:hover{background:color-mix(in srgb,var(--acento-btn,var(--acento)) 80%,#000)} /* el botón del menú hereda el color del enlace: hay que forzarlo */ .menu a.btn-a,.menu a.btn-a:hover{color:#fff} [data-tema="cancha"] .menu a.btn-a{color:#fff} /* ═══════════════════════════════════════════════════════════ COMPOSICIONES DE ENCABEZADO Además del tema, cada app usa una de tres composiciones. ═══════════════════════════════════════════════════════════ */ /* A · centrado — para las que se explican en una frase */ .portada[data-hero="centro"]{text-align:center} .portada[data-hero="centro"] .ficha-id{flex-direction:column;align-items:center;gap:22px} .portada[data-hero="centro"] .ficha-tex{text-align:center} .portada[data-hero="centro"] h1{max-width:none;margin-inline:auto} .portada[data-hero="centro"] .ficha-meta, .portada[data-hero="centro"] .ficha-acc{justify-content:center} .portada[data-hero="centro"] .bajada{margin-inline:auto;text-align:center} .portada[data-hero="centro"] .ficha-ico, .portada[data-hero="centro"] .ficha-mono{width:116px;height:116px} /* B · partido — el ícono grande a un lado, el texto al otro */ .portada[data-hero="partido"] .ficha-id{ display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:56px;align-items:center; } .portada[data-hero="partido"] .ficha-tex{order:1;min-width:0} .portada[data-hero="partido"] .ficha-ico, .portada[data-hero="partido"] .ficha-mono{ order:2;width:264px;height:264px;border-radius:56px;justify-self:end; } @media (max-width:900px){ .portada[data-hero="partido"] .ficha-id{grid-template-columns:1fr;gap:26px} .portada[data-hero="partido"] .ficha-ico, .portada[data-hero="partido"] .ficha-mono{order:0;width:96px;height:96px;border-radius:22px;justify-self:start} } /* C · titular — la frase manda, el ícono es pequeño arriba */ .portada[data-hero="titular"] .ficha-id{flex-direction:column;align-items:flex-start;gap:26px} .portada[data-hero="titular"] .ficha-ico, .portada[data-hero="titular"] .ficha-mono{width:64px;height:64px;border-radius:16px} .portada[data-hero="titular"] h1{font-size:clamp(2.6rem,7.5vw,5rem);max-width:15ch} .portada[data-hero="titular"] .ficha-lema{font-size:1.32rem;max-width:46ch}