/* Hariken Dojo — sistema de diseño (base: Hariken Vet). * * Esto es software de uso diario, no una vitrina: se optimiza para leer rápido * y equivocarse poco, en un mostrador con prisa. Reglas: * * - Una sola familia (Geist) con contraste de pesos; Plex Mono SOLO para datos * (horas, cantidades, dinero, teléfonos), con cifras de ancho fijo para que * las columnas se lean en vertical. * - Titulares de un solo color. El color vive en el ESTADO (un punto, un riel, * una etiqueta), nunca dentro de una frase. * - La jornada es una secuencia: la pantalla Hoy es un riel con las horas y una * marca de "ahora". Ese es el elemento propio del producto. * - Densidad de herramienta: 14px de base, filas de 40–44px, foco visible * siempre y todo utilizable con teclado. */ @font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("/static/fonts/geist-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("/static/fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); } :root { /* Tinta y tatami: neutros calidos; el acento es el color de cada academia (/marca.css). */ --paper: #F6F3F1; --surface: #FFFFFF; --sunk: #EEEAE7; --line: #E0D9D5; --line-soft: #EEE9E6; --ink: #1A1413; --soft: #5E5451; --faint: #8E8480; --accent: #C8170F; --accent-ink: #FFFFFF; --accent-fg: var(--accent); --accent-soft: color-mix(in srgb, var(--accent) 11%, var(--surface)); --warn: #8F5700; --warn-soft: #FAEEDC; --danger: #A81F1A; --danger-soft: #F9E5E3; --ok: #1E7A4C; --ok-soft: #E2F2E9; --r-sm: 6px; --r: 10px; --r-lg: 14px; --shadow: 0 1px 2px rgba(16, 25, 23, .05), 0 8px 24px -16px rgba(16, 25, 23, .18); --rail: 232px; --t: 140ms cubic-bezier(.2, .6, .3, 1); color-scheme: light; } /* El tema oscuro se aplica en dos casos: cuando el sistema lo pide y el usuario * no ha elegido claro, o cuando el usuario elige oscuro a mano. La eleccion * viaja en una cookie y el servidor la escribe en , asi que la * pagina llega ya con su tema: sin parpadeo y sin depender de JavaScript. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --paper: #0B0808; --surface: #141010; --sunk: #1B1616; --line: #2A2322; --line-soft: #201A1A; --ink: #F0E9E7; --soft: #A89D99; --faint: #7D716D; --accent-ink: #FFFFFF; --accent-fg: color-mix(in srgb, var(--accent) 55%, #FFFFFF); --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface)); --warn: #E5A83C; --warn-soft: #2A1F0C; --danger: #FF8D82; --danger-soft: #2E1512; --ok: #5FD19A; --ok-soft: #10261B; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -18px rgba(0, 0, 0, .8); color-scheme: dark; } } :root[data-tema="oscuro"] { --paper: #0B0808; --surface: #141010; --sunk: #1B1616; --line: #2A2322; --line-soft: #201A1A; --ink: #F0E9E7; --soft: #A89D99; --faint: #7D716D; --accent-ink: #FFFFFF; --accent-fg: color-mix(in srgb, var(--accent) 55%, #FFFFFF); --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface)); --warn: #E5A83C; --warn-soft: #2A1F0C; --danger: #FF8D82; --danger-soft: #2E1512; --ok: #5FD19A; --ok-soft: #10261B; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -18px rgba(0, 0, 0, .8); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --t: 1ms; } * { animation: none !important; } } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14px/1.5 "Geist", system-ui, -apple-system, sans-serif; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } a:not([class]) { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } a:not([class]):hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .mono, .num, td.mono { font-family: "Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: .93em; letter-spacing: -.01em; } .skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--r-sm); z-index: 20; } .skip:focus { left: 8px; } /* ── Estructura: riel lateral + barra superior ── */ .shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; } .side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .side-brand { display: block; padding: 6px 10px 14px; line-height: 1.25; } .side-brand b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.02em; } .side-brand span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .side nav { display: flex; flex-direction: column; gap: 2px; } .side nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--soft); font-weight: 450; transition: background var(--t), color var(--t); } .side nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; } .side nav a:hover { background: var(--sunk); color: var(--ink); } .side nav a[aria-current] { background: var(--accent-soft); color: var(--accent-fg); font-weight: 550; } .side-foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 12px; font-size: 13px; } .side-foot a { display: block; color: var(--ink); font-weight: 500; } .side-foot span { display: block; color: var(--faint); font-size: 12px; } .side-foot form { margin: 8px 0 0; } .bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 11px 24px; background: var(--paper); border-bottom: 1px solid var(--line); } .bar form.buscar { flex: 1; max-width: 420px; position: relative; } .bar form.buscar input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; } .bar form.buscar svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; stroke: var(--faint); fill: none; stroke-width: 1.8; } .bar-fecha { margin-left: auto; color: var(--faint); font-size: 13px; white-space: nowrap; } .bar .tema { margin: 0; flex: none; } .bar .tema button { padding: 6px 8px; } .wrap { max-width: 1160px; margin: 0 auto; padding: 24px 24px 72px; } main:focus { outline: none; } /* ── Tipografía ── */ h1 { font-size: 25px; line-height: 1.2; letter-spacing: -.03em; font-weight: 650; margin: 0; } h2 { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 26px 0 10px; } h3 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; } .card > h2:first-child { margin-top: 0; } .sub { color: var(--soft); margin: 5px 0 0; } .crumbs { margin: 0 0 12px; font-size: 13px; color: var(--soft); } .crumbs a { color: var(--soft); } .crumbs a:hover { color: var(--ink); } .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .empty { color: var(--faint); padding: 10px 0; list-style: none; } .note { background: var(--sunk); border-radius: var(--r); padding: 12px 14px; color: var(--soft); margin: 16px 0 0; } .ok, .error { border-radius: var(--r); padding: 11px 14px; margin: 14px 0; font-weight: 450; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); } .error { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .ok .mono { display: block; margin-top: 6px; word-break: break-all; } /* ── Controles ── */ button, .button { font: inherit; font-weight: 500; line-height: 1; padding: 9px 13px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background var(--t), border-color var(--t); } button:hover, .button:hover { background: var(--sunk); border-color: var(--faint); } button:disabled { opacity: .5; cursor: default; } button.primary, .button.primary { background: var(--accent); border-color: var(--accent-fg); color: var(--accent-ink); box-shadow: var(--shadow); } button.primary:hover, .button.primary:hover { filter: brightness(1.07); background: var(--accent); } button.danger { color: var(--danger); border-color: var(--danger-soft); } button.link { border: 0; background: none; padding: 0; color: var(--soft); } button.link:hover { background: none; color: var(--ink); text-decoration: underline; } button.big, .button.big { font-size: 15px; padding: 12px 20px; } label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--soft); } input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; width: 100%; transition: border-color var(--t); } input:hover, select:hover, textarea:hover { border-color: var(--faint); } input::placeholder, textarea::placeholder { color: var(--faint); } textarea { resize: vertical; line-height: 1.55; } label.check { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 400; font-size: 14px; } label.check input { width: auto; accent-color: var(--accent-fg); } .stack { display: grid; gap: 14px; } .stack > button { justify-self: start; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .narrow { max-width: 480px; } form.inline { display: flex; gap: 6px; align-items: center; margin: 0; } form.inline input { width: 150px; } .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 10px; } .filters input[type=search] { flex: 1; min-width: 220px; } .filters select, .filters input:not([type=search]) { width: auto; min-width: 140px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; } .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; margin-top: 14px; } section.card + section.card { margin-top: 14px; } /* ── Cifras ── */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; margin-top: 18px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; } .tile b { display: block; font-family: "Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; } .tile span { display: block; font-size: 12px; color: var(--soft); margin-top: 3px; } /* ── Tablas: hilo fino, cifras alineadas, encabezado pegado ── */ table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .list th { position: sticky; top: 55px; z-index: 1; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); background: var(--surface); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } .list td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .list tr:last-child td { border-bottom: 0; } .list tbody tr { transition: background var(--t); } .list tbody tr:hover { background: var(--sunk); } .list td small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; } .list td a { font-weight: 550; } .list td a:hover { text-decoration: underline; text-underline-offset: 3px; } .list .num, .list th.num { text-align: right; } .list td.row { white-space: nowrap; } .list tr.daysep td { background: var(--sunk); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); } .late { color: var(--danger); } .pager { display: flex; gap: 16px; justify-content: center; align-items: center; color: var(--soft); margin-top: 16px; } .bar-viz { display: inline-block; height: 7px; background: var(--accent); border-radius: 99px; opacity: .8; vertical-align: middle; } .plain { margin: 0; padding-left: 17px; color: var(--soft); } .plain li { margin: 4px 0; } .plain li b { color: var(--ink); } /* ── Estado: el único lugar donde entra el color ── */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: var(--sunk); color: var(--soft); white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .pill.ok { background: var(--accent-soft); color: var(--accent-fg); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.alert { background: var(--danger-soft); color: var(--danger); } .tag { display: inline-block; font-size: 13px; font-weight: 550; padding: 4px 11px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-fg); } .tag.st-won { background: var(--ink); color: var(--paper); } /* ── El riel del día: la pantalla Hoy ── */ .riel { position: relative; margin-top: 18px; padding-left: 62px; } .riel::before { content: ""; position: absolute; left: 54px; top: 6px; bottom: 6px; width: 1px; background: var(--line); } .riel-hora { position: relative; display: grid; gap: 8px; padding: 0 0 14px; } .riel-hora > .marca { position: absolute; left: -62px; top: 2px; width: 46px; text-align: right; font-family: "Plex Mono", monospace; font-size: 12px; color: var(--faint); } .riel-hora.ahora > .marca { color: var(--accent-fg); font-weight: 500; } .riel-hora.ahora::after { content: ""; position: absolute; left: -12px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .cita { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r); padding: 11px 14px; transition: border-color var(--t); } .cita:hover { border-color: var(--faint); } .cita.es-confirmed { border-left-color: var(--accent-fg); } .cita.es-pending { border-left-color: var(--warn); } .cita.es-attended { border-left-color: var(--faint); background: var(--sunk); } .cita.es-no_show { border-left-color: var(--danger); } .cita-quien { flex: 1; min-width: 0; } .cita-quien b { font-weight: 600; } .cita-quien span { display: block; color: var(--soft); font-size: 13px; } .riel-vacio { color: var(--faint); padding: 6px 0 16px; } /* Glifo de especie: identidad del paciente sin necesidad de fotos. */ .glifo { width: 34px; height: 34px; border-radius: 50%; background: var(--sunk); flex: none; display: grid; place-items: center; } .glifo svg { width: 19px; height: 19px; stroke: var(--soft); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .glifo.grande { width: 52px; height: 52px; } .glifo.grande svg { width: 27px; height: 27px; } .petline { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .petline:last-child { border-bottom: 0; } .petline b { font-weight: 600; } .petline .sub { margin: 0; font-size: 13px; } .paciente { display: flex; align-items: center; gap: 12px; } /* ── Ficha y línea de tiempo ── */ .kv { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 7px 14px; margin: 0; } .kv dt { color: var(--faint); font-size: 12.5px; } .kv dd { margin: 0; } .consent { color: var(--soft); margin: 6px 0; } .consent b { color: var(--ink); } .timeline { list-style: none; margin: 14px 0 0; padding: 0; } .ev { border-left: 2px solid var(--line); padding: 0 0 18px 18px; position: relative; } .ev:last-child { padding-bottom: 2px; } .ev::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: 2px solid var(--surface); } .ev-call::before, .ev-in::before { background: var(--accent); } .ev-note::before { background: var(--ink); } .when { font-size: 12px; color: var(--faint); font-family: "Plex Mono", monospace; } .what { white-space: pre-wrap; margin: 2px 0 0; } .note-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-top: 10px; } /* ── Entrar y definir contraseña ── */ .login { max-width: 348px; margin: 11vh auto 0; display: grid; gap: 16px; } .login h1 { font-size: 27px; } .login h1 span { font-weight: 300; color: var(--faint); } /* ── Hojas para imprimir ── */ /* Una receta se imprime en papel blanco: la hoja fuerza los tonos claros aunque el resto del sistema este en oscuro. */ body.hoja { background: #fff; color: #111; --paper: #FFFFFF; --surface: #FFFFFF; --sunk: #F2F5F4; --line: #C9D2CF; --line-soft: #E3E9E7; --ink: #101917; --soft: #4A5854; --faint: #7C8985; --accent: #0E8573; --accent-soft: #E1F0EC; } body.hoja .wrap { max-width: 680px; padding: 26px 22px; } .hoja-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 20px; } .hoja-top span { display: block; color: var(--soft); font-size: 12.5px; } .hoja-fecha { font-family: "Plex Mono", monospace; font-size: 12.5px; } body.hoja h1 { font-size: 21px; margin: 0 0 16px; } body.hoja h2 { margin: 20px 0 5px; color: var(--soft); } .firma { margin-top: 42px; } .firma span { display: block; color: var(--soft); font-size: 12.5px; } .firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media print { body.hoja { font-size: 11.5pt; } .hoja-top { border-color: #000; } } /* ── Página pública de la clínica ── */ body.publico { background: var(--paper); } .pub-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 24px; border-bottom: 1px solid var(--line); background: var(--surface); } .pub-brand { font-size: 18px; font-weight: 650; letter-spacing: -.02em; } .pub-top nav { display: flex; gap: 14px; align-items: center; } .wrap.pub { max-width: 760px; } .pub-hero { padding: 44px 0 6px; } .pub-hero h1 { font-size: clamp(30px, 6vw, 42px); letter-spacing: -.035em; } .pub-lede { font-size: 16.5px; color: var(--soft); max-width: 58ch; margin: 12px 0 22px; } .pub-servs { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 11px; } .pub-serv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px; } .pub-serv h3 { margin: 0 0 3px; font-size: 14.5px; } .pub-serv p { margin: 0; color: var(--faint); font-size: 12.5px; } .pub-datos { color: var(--soft); line-height: 1.75; } .pub-pie { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; } .pub-pie span { display: block; color: var(--soft); } .pub-hariken { color: var(--faint); font-size: 12.5px; } .wa { position: fixed; right: 16px; bottom: 16px; background: var(--ink); color: var(--paper); padding: 11px 17px; border-radius: 99px; font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow); } /* ── Angosto: el riel lateral se vuelve barra inferior ── */ @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 15; flex-direction: row; gap: 0; padding: 6px; border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; } .side-brand, .side-foot span, .side-foot form { display: none; } .side nav { flex-direction: row; flex: 1; } .side nav a { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 7px 10px; text-align: center; } .side-foot { margin: 0; border: 0; padding: 0 8px 0 0; display: grid; place-items: center; } .side-foot a { font-size: 11px; } .wrap { padding: 18px 16px 96px; } .bar { padding: 10px 16px; } .bar-fecha { display: none; } .split, .row2 { grid-template-columns: 1fr; } .list th { top: 0; } table.list { display: block; overflow-x: auto; } .riel { padding-left: 50px; } .riel::before { left: 44px; } .riel-hora > .marca { left: -50px; width: 38px; } } /* Pista del atajo de teclado en el buscador. */ .bar form.buscar .atajo { position: absolute; right: 10px; top: 50%; translate: 0 -50%; font-family: "Plex Mono", monospace; font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; pointer-events: none; } .bar form.buscar input:focus + .atajo { opacity: 0; } @media (max-width: 900px) { .bar form.buscar .atajo { display: none; } } /* ── Selector de tema ── */ .tema { display: flex; gap: 2px; margin: 10px 0 0; padding: 2px; background: var(--sunk); border-radius: 99px; width: fit-content; } .tema button { border: 0; background: none; padding: 5px 9px; border-radius: 99px; color: var(--soft); font-size: 11.5px; font-weight: 500; line-height: 1; display: inline-flex; gap: 5px; align-items: center; } .tema button svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; } .tema button:hover { background: var(--surface); color: var(--ink); } .tema button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .card .tema { margin-top: 12px; } /* En pantallas medias el selector se queda, pero sin las palabras: los tres iconos (sol, luna, mitad y mitad) ya dicen cual es cual. */ @media (max-width: 1100px) { .bar .tema button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .bar .tema button { padding: 7px; } .bar .tema button svg { width: 15px; height: 15px; } } @media (max-width: 900px) { .bar .tema { margin-left: auto; } } /* ═══════════════════════ Hariken Dojo: piezas propias ═══════════════════════ */ .side-sec { display: grid; gap: 2px; margin-bottom: 10px; } .side-sec > span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 6px 10px 2px; } .main-col { min-width: 0; } /* Botón "Nuevo" con su menú:
, sin JavaScript. */ .nuevo { position: relative; flex: none; } .nuevo summary { list-style: none; } .nuevo summary::-webkit-details-marker { display: none; } .nuevo summary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; } .nuevo nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 250px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; } .nuevo nav a { padding: 9px 11px; border-radius: var(--r-sm); } .nuevo nav a:hover { background: var(--sunk); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0; overflow-x: auto; } .tabs a { padding: 9px 13px; color: var(--soft); border-bottom: 2px solid transparent; white-space: nowrap; } .tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 550; } .chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--soft); font-size: 13px; white-space: nowrap; min-height: 32px; } .chip:hover { border-color: var(--faint); color: var(--ink); } .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .filters .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; } .filters label { display: flex; align-items: center; gap: 6px; } .filters label select { width: auto; } /* Filas de parámetros: cada fila es su propio formulario. */ .fila-param { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line-soft); } .fila-param.corta { grid-template-columns: minmax(200px, 2fr) repeat(3, minmax(90px, 1fr)); } .fila-param .check { align-self: center; } .fila-param button { justify-self: start; } input.mini { width: 70px; } .sub-card { margin-top: 12px; } .plegable > summary { cursor: pointer; list-style: none; } .plegable > summary::-webkit-details-marker { display: none; } .plegable > summary h2 { display: inline; } .plegable > summary::after { content: "▸"; color: var(--faint); margin-left: 8px; } .plegable[open] > summary::after { content: "▾"; } details.card + details.card { margin-top: 10px; } .muestra { align-self: center; } /* Dirección colombiana en una línea. */ .direccion { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .direccion legend { font-size: 12.5px; font-weight: 500; color: var(--soft); margin-bottom: 5px; padding: 0; } .direccion select { width: 140px; } .direccion input { width: 76px; } .direccion input.resto { flex: 1; min-width: 180px; width: auto; } .direccion span { color: var(--faint); font-weight: 600; } .dias-semana { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .dias-semana legend { font-size: 12.5px; color: var(--soft); margin-bottom: 6px; padding: 0; } /* ── El cinturón: el grado como se ve en el dobok ── */ .cint-wrap { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; vertical-align: middle; } .cint { position: relative; display: inline-block; width: 34px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); overflow: hidden; flex: none; } .cint i { position: absolute; left: 0; right: 0; top: 3.5px; height: 3px; } .cint::after { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 8px; background: rgba(0, 0, 0, .14); } .cint-vacio { color: var(--faint); font-size: 13px; } .grado-cert .cint { width: 120px; height: 28px; border-radius: 4px; } .grado-cert .cint i { top: 10px; height: 8px; } .grado-cert .cint::after { left: 48px; width: 24px; } .grado-cert .cint-wrap { font-size: 22px; font-weight: 650; gap: 14px; } /* ── La tira del paquete: una casilla por clase ── */ .tira { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; max-width: 170px; } .tira i { width: 9px; height: 13px; border-radius: 2px; border: 1.5px solid var(--line); background: var(--surface); } .tira i.u { background: var(--ink); border-color: var(--ink); } .tira.baja i:not(.u) { border-color: var(--warn); background: var(--warn-soft); } .tira.fin i.u { background: var(--danger); border-color: var(--danger); } .tira.grande { max-width: none; gap: 4px; } .tira.grande i { width: 20px; height: 30px; border-radius: 4px; border-width: 2px; } .tira.larga { display: inline-block; width: 150px; height: 10px; border-radius: 99px; background: var(--sunk); overflow: hidden; border: 1px solid var(--line); } .tira.larga span { display: block; height: 100%; background: var(--ink); } .list td .tira + small { display: block; } .paquete-grande { display: grid; gap: 10px; margin-top: 14px; } .cifras { margin: 0; color: var(--soft); } .cifras b { color: var(--ink); font-size: 1.25em; } /* ── Clases del día ── */ .clase-dia { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 11px 14px; margin-bottom: 8px; } .clase-dia.inst { border-left-color: var(--faint); } .clase-dia.link:hover { border-color: var(--faint); } .franja-hora { width: 76px; flex: none; font-weight: 500; } .franja-hora small { display: block; color: var(--faint); font-weight: 400; } .dia-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; } .dia-split h2 { margin-top: 4px; } .cal { padding: 14px; } .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cal-head a { padding: 4px 10px; border-radius: var(--r-sm); font-size: 18px; } .cal-head a:hover { background: var(--sunk); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .cal-grid .dow { font-size: 11px; color: var(--faint); padding: 4px 0; } .cal-grid a { padding: 7px 0; border-radius: 99px; font-family: "Plex Mono", monospace; font-size: 12.5px; } .cal-grid a:hover { background: var(--sunk); } .cal-grid a.fuera { color: var(--faint); opacity: .6; } .cal-grid a.hoy { box-shadow: inset 0 0 0 1.5px var(--accent); } .cal-grid a.sel { background: var(--accent); color: var(--accent-ink); } .sem-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; } .semana { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; } .sem-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; min-height: 180px; } .sem-col.hoy { border-color: var(--accent); } .sem-col h3 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); } .bloque { display: grid; gap: 1px; padding: 8px; border-radius: var(--r-sm); background: var(--accent-soft); margin-bottom: 6px; border-left: 3px solid var(--accent); font-size: 13px; } .bloque.inst { background: var(--sunk); border-left-color: var(--faint); } .bloque small { color: var(--soft); font-size: 11.5px; } /* ── Asistencia: interruptores grandes, se usa de pie en el tatami ── */ .lista-asistencia { display: grid; gap: 6px; } label.asiste { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 400; } label.asiste:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } label.asiste input[type=checkbox] { appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; border: 0; padding: 0; transition: background var(--t); flex: none; } label.asiste input[type=checkbox]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--t); } label.asiste input[type=checkbox]:checked { background: var(--accent); } label.asiste input[type=checkbox]:checked::after { transform: translateX(18px); } .asiste-quien b { display: block; font-weight: 600; } .asiste-quien small { color: var(--soft); display: flex; gap: 8px; align-items: center; } .asiste-paquete { text-align: right; } .asiste-paquete small { display: block; color: var(--faint); font-size: 12px; } /* ── Cafetería ── */ .pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .pos-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--ink); font-size: 14px; } .pos-item:has(input:not(:placeholder-shown)) { border-color: var(--accent); background: var(--accent-soft); } .pos-item b { display: block; font-weight: 600; } .pos-item small { color: var(--soft); } .pos-item input { width: 70px; text-align: center; font-size: 16px; } .pos-item.agotado { opacity: .55; } .pos-cobro { position: sticky; bottom: 12px; display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 12px; box-shadow: var(--shadow); } .pos-cobro .fields { flex: 1; } .opciones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; } .opcion-grande { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; transition: border-color var(--t); } .opcion-grande:hover { border-color: var(--accent); } .opcion-grande b { font-size: 16px; } .opcion-grande span { color: var(--soft); font-size: 13px; } /* ── Finanzas ── */ .accesos { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .tile small { display: block; font-size: 11.5px; margin-top: 4px; } .tile small.sube { color: var(--ok); } .tile small.baja { color: var(--danger); } .barras-mes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 190px; padding-top: 8px; } .mes-barra { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; gap: 3px; } .mes-barra .par { display: flex; gap: 4px; align-items: flex-end; justify-content: center; height: 100%; } .mes-barra span { width: 18px; border-radius: 3px 3px 0 0; min-height: 2px; } .mes-barra small { font-size: 11.5px; color: var(--soft); } .bi { background: var(--ink); } .bg { background: var(--accent); } .leyenda { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--soft); margin: 10px 0 0; } .leyenda span { display: inline-block; width: 11px; height: 11px; border-radius: 2px; } .fila-pago { display: grid; grid-template-columns: minmax(200px, 2fr) auto 140px 140px auto; gap: 10px; align-items: end; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .fila-pago .quien small { display: block; color: var(--faint); font-size: 12px; } .fila-pago .stepper input { font-family: "Plex Mono", monospace; } tr.anulado td { color: var(--faint); text-decoration: line-through; } .texto-msg { max-width: 360px; color: var(--soft); font-size: 13px; } .estados { display: grid; gap: 6px; } .estados button:disabled { background: var(--ink); color: var(--paper); opacity: 1; } .acud { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } .acud:last-child { border-bottom: 0; } .acud span { color: var(--soft); font-size: 13px; } .acud .consent { font-size: 12px; color: var(--faint); } .pill.ok { background: var(--ok-soft); color: var(--ok); } .narrow-lg { max-width: 640px; } .list td small .cint-wrap { font-size: 12px; } .sub .tag { margin-right: 4px; } /* Certificado y cuenta de cobro. */ .certificado { text-align: center; padding: 36px 0 20px; display: grid; gap: 12px; } .certificado h1 { font-size: 32px !important; } .grado-cert { display: flex; justify-content: center; } .pie-cuenta { margin-top: 20px; color: var(--soft); } @media print { .no-print { display: none; } } @media (max-width: 900px) { .dia-split { grid-template-columns: 1fr; } .semana { grid-template-columns: repeat(7, 150px); } .fila-pago { grid-template-columns: 1fr 1fr; } .fila-pago .quien { grid-column: 1 / -1; } .fila-param.corta { grid-template-columns: 1fr 1fr; } label.asiste { grid-template-columns: auto minmax(0, 1fr); } .asiste-paquete { grid-column: 2; text-align: left; } .side-sec > span { display: none; } .side-sec { display: contents; } .nuevo nav { position: fixed; left: 12px; right: 12px; top: 58px; } .bar { flex-wrap: wrap; } } .barras-mes .h0{height:0%}.barras-mes .h5{height:5%}.barras-mes .h10{height:10%}.barras-mes .h15{height:15%}.barras-mes .h20{height:20%}.barras-mes .h25{height:25%}.barras-mes .h30{height:30%}.barras-mes .h35{height:35%}.barras-mes .h40{height:40%}.barras-mes .h45{height:45%}.barras-mes .h50{height:50%}.barras-mes .h55{height:55%}.barras-mes .h60{height:60%}.barras-mes .h65{height:65%}.barras-mes .h70{height:70%}.barras-mes .h75{height:75%}.barras-mes .h80{height:80%}.barras-mes .h85{height:85%}.barras-mes .h90{height:90%}.barras-mes .h95{height:95%}.barras-mes .h100{height:100%} .tira.larga .p0{width:0%}.tira.larga .p5{width:5%}.tira.larga .p10{width:10%}.tira.larga .p15{width:15%}.tira.larga .p20{width:20%}.tira.larga .p25{width:25%}.tira.larga .p30{width:30%}.tira.larga .p35{width:35%}.tira.larga .p40{width:40%}.tira.larga .p45{width:45%}.tira.larga .p50{width:50%}.tira.larga .p55{width:55%}.tira.larga .p60{width:60%}.tira.larga .p65{width:65%}.tira.larga .p70{width:70%}.tira.larga .p75{width:75%}.tira.larga .p80{width:80%}.tira.larga .p85{width:85%}.tira.larga .p90{width:90%}.tira.larga .p95{width:95%}.tira.larga .p100{width:100%} /* ── Ajustes tras la revisión visual (2026-09-30) ── * table.list tenia overflow:hidden (heredado de Vet): eso ata el encabezado * "sticky" a la tabla y lo corre 55px sobre la primera fila. Sin recorte, con * bordes separados, las esquinas redondeadas se conservan. */ table.list { overflow: visible; border-collapse: separate; border-spacing: 0; } .list th { top: 61px; } .list thead th:first-child { border-top-left-radius: var(--r); } .list thead th:last-child { border-top-right-radius: var(--r); } .list tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r); } .list tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r); } .franja-hora { width: 98px; white-space: nowrap; } .side a, .side-foot a { text-decoration: none; } .pos-item small { white-space: nowrap; } @media (max-width: 900px) { .list th { position: static; } } @media (max-width: 900px) { /* En el celular la tabla se desliza por dentro; la pagina no. */ table.list { display: block; overflow-x: auto; max-width: 100%; } .filters { flex-wrap: wrap; } .head { flex-direction: column; } .sem-nav b { order: -1; width: 100%; } .semana { max-width: 100%; } } .dia-split > * { min-width: 0; } .barras-mes { grid-template-columns: repeat(6, minmax(0, 1fr)); } .mes-barra small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .cal { max-width: 100%; } .barras-mes { gap: 4px; } .mes-barra small.mono { display: none; } .mes-barra span { width: 12px; } } /* .ok es tambien la clase del aviso (con borde izquierdo): en la etiqueta no. */ .pill.ok, .pill.alert, .pill.warn { border-left: 0; margin: 0; padding: 3px 9px; border-radius: 99px; font-weight: 500; }