/* ==========================================================================
LumiMed — hoja de estilos
Dirección: "instrumento clínico". Superficies neutras y planas, filetes
nítidos, sombras neutras y difusas, y un único acento turquesa profundo
derivado del celeste de VZ Dental Studio. El odontodiagrama sigue siendo la
pieza que se lee sobre las placas. Nombre y tipografía (Poppins) se conservan;
la nomenclatura clínica del odontodiagrama es intocable.
========================================================================== */
:root {
/* Superficies — neutro clínico, sin tinte cian */
--field: #F1F3F2;
--panel: #FFFFFF;
--panel-2: #F4F6F5;
/* Tinta — casi negra, matiz pizarra */
--ink: #18211F;
--ink-soft: #56635F;
--ink-faint: #97A19D;
/* Señal */
--accent: #0E7C86; /* turquesa profundo: relleno de acciones */
--accent-ink: #0B6E77; /* el acento cuando hace de texto o filete (AA sobre blanco) */
--vital: #128060;
--glow: #6FC2C9;
--rule: #E2E6E4;
--alert: #C6362E;
/* La flecha de los desplegables, con la tinta de ESTE tema dentro. Cada tema
la vuelve a declarar con su color: un SVG de fondo no hereda currentColor,
asi que si el color va clavado aqui, en oscuro la flecha se pierde. */
--flecha-abajo: url('data:image/svg+xml;utf8, que hace de rótulo cuando el campo no puede llevar
un normal — el de archivo, que usa su etiqueta como botón. */
.field > label,
.field > .field__k {
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ink-soft);
}
.field--wide { grid-column: 1 / -1; }
/* ------------------------------ Ficha leída ------------------------------
Ya creada, la ficha se lee como una ficha: número de paciente, fecha en que
se abrió la historia y los datos agrupados. Nada de cajas de formulario;
esas vuelven solo al pulsar "Editar ficha". */
.ficha {
position: relative;
display: grid;
gap: 24px;
min-height: 330px;
}
/* Marca de agua del identificador, en la versión de solo ícono que permite
el manual. Decorativa: no lleva texto ni recibe clics. */
.ficha::after {
content: '';
position: absolute;
right: 4px;
bottom: 0;
width: 132px;
height: 196px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* La marca de agua ya no es un archivo fijo: la pone main.js con el icono
de la clinica en la que se esta trabajando. Sin icono cargado no hay
marca de agua y la ficha se ve limpia. */
background-image: var(--marca-clara, none);
opacity: .06;
pointer-events: none;
}
[data-theme="dark"] .ficha::after,
[data-theme="clinica"] .ficha::after {
background-image: var(--marca-oscura, var(--marca-clara, none));
opacity: .09;
}
.ficha__sello {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
font-size: var(--t-sm);
color: var(--ink-soft);
}
.ficha__num {
font-weight: 700;
color: var(--ink);
padding: 3px 10px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel-2);
}
.ficha__sep { color: var(--ink-faint); }
.ficha__grupo { display: grid; gap: 12px; }
.ficha__titulo {
margin: 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--rule);
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--ink-soft);
}
.ficha__datos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px 30px;
}
.dato { display: grid; gap: 3px; align-content: start; }
.dato__k {
font-size: var(--t-xs);
color: var(--ink-faint);
}
.dato__v {
font-size: var(--t-body);
color: var(--ink);
word-break: break-word;
}
.dato__v--vacio { color: var(--ink-faint); }
@media (max-width: 560px) {
.ficha { min-height: 0; gap: 18px; }
.ficha::after { display: none; }
}
.input {
width: 100%;
padding: 11px 13px;
background: var(--panel);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
font-size: var(--t-body);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:hover { border-color: #C4CCC8; }
.input:focus { outline: none; border-color: var(--accent-ink); box-shadow: var(--ring); }
.input[readonly] { background: var(--panel-2); color: var(--ink-soft); }
/* La flecha va en una variable ENTERA, url() incluido: dentro de una cadena
los var() no se sustituyen, asi que el color no se puede meter aparte. Cada
tema declara la suya. Antes iba clavada en gris pizarra y en oscuro y en el
tema de la clinica se perdia contra el fondo. */
select.input {
appearance: none;
padding-right: 34px;
background-image: var(--flecha-abajo);
background-repeat: no-repeat;
background-position: right 13px center;
}
/* El panel que abre el navegador es suyo, no nuestro: lo unico que entiende
es el esquema de color y el color de las opciones. Con esto deja de salir
blanco sobre un panel oscuro. */
select.input option,
select.input optgroup {
background: var(--panel);
color: var(--ink);
}
.pw { position: relative; }
.pw .input { padding-right: 84px; }
.pw__toggle {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
padding: 6px 10px;
border: 0;
border-radius: var(--r-xs);
background: var(--panel-2);
color: var(--accent-ink);
font-size: var(--t-xs);
font-weight: 600;
cursor: pointer;
}
.pw__toggle:hover { background: var(--rule); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
/* Avisos dentro de formularios */
.notice {
display: none;
padding: 10px 13px;
border-radius: var(--r-sm);
font-size: var(--t-sm);
border: 1px solid;
}
.notice.is-shown { display: block; }
.notice--error { background: #FEF2F2; border-color: #FCA5A5; color: #B3261E; }
.notice--ok { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.45); color: #0B7A5B; }
/* ============================================================
PORTADA
============================================================ */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px clamp(20px, 5vw, 56px);
border-bottom: 1px solid var(--rule);
}
.topbar__links { display: flex; align-items: center; gap: 6px; }
.cover {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
gap: clamp(32px, 6vw, 76px);
padding: clamp(38px, 6vw, 78px) clamp(20px, 5vw, 56px) clamp(48px, 6vw, 80px);
max-width: 1320px;
margin-inline: auto;
}
.cover__copy { display: grid; gap: 18px; justify-items: start; }
.cover__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Capacidades: filetes, sin tarjetas ni emojis */
.ledger { width: 100%; margin-top: 14px; border-top: 1px solid var(--rule); }
.ledger__row {
display: grid;
grid-template-columns: .9fr 1.5fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.ledger__term { font-weight: 600; font-size: var(--t-sm); }
.ledger__desc { font-size: var(--t-sm); color: var(--ink-soft); }
/* Placa del odontograma */
.plate {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--lift-2);
padding: 26px 24px 20px;
position: relative;
overflow: hidden;
}
.plate::before {
content: '';
position: absolute;
inset: auto -10% -30% -10%;
height: 60%;
background: radial-gradient(60% 100% at 50% 100%, rgba(111,194,201,.18), transparent 70%);
pointer-events: none;
}
.plate__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
position: relative;
}
.plate__title { font-size: var(--t-h3); font-weight: 700; }
/* ============================================================
ODONTOGRAMA — pieza de firma
============================================================ */
.chart { width: 100%; height: auto; overflow: visible; position: relative; }
.tooth { cursor: pointer; }
.tooth--static { cursor: default; }
.tooth__crown {
fill: var(--panel);
stroke: var(--glow);
stroke-width: 1.3;
transition: fill .22s var(--ease), stroke .22s var(--ease);
}
.tooth__root {
fill: var(--panel-2);
stroke: var(--rule);
stroke-width: 1.3;
stroke-linejoin: round;
transition: stroke .22s var(--ease), fill .22s var(--ease);
}
.tooth__label {
font-size: 8.5px;
font-weight: 600;
letter-spacing: .04em;
fill: var(--ink-faint);
text-anchor: middle;
transition: fill .22s var(--ease);
}
.tooth:hover .tooth__crown { stroke: var(--accent-ink); }
.tooth:hover .tooth__label { fill: var(--accent-ink); }
.tooth[data-state="caries"] .tooth__crown { fill: var(--alert); stroke: var(--alert); }
.tooth[data-state="tratado"] .tooth__crown { fill: var(--accent); stroke: var(--accent); }
.tooth[data-state="plan"] .tooth__crown { fill: rgba(16,185,129,.20); stroke: var(--vital); stroke-dasharray: 3 2.5; }
.tooth[data-state="ausente"] .tooth__crown { fill: var(--panel-2); stroke: var(--ink-faint); }
.tooth[data-state="ausente"] .tooth__root { stroke: var(--ink-faint); opacity: .35; }
.tooth[data-state="ausente"] .tooth__label { fill: var(--ink-faint); }
.tooth__cross { stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; display: none; }
.tooth[data-state="ausente"] .tooth__cross { display: block; }
.arch-line { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.arch-tag {
font-size: 8px;
font-weight: 600;
letter-spacing: .18em;
fill: var(--ink-faint);
}
/* Entrada escalonada desde la línea media hacia afuera */
.chart--draw .tooth { opacity: 0; animation: seat .5s var(--ease) forwards; }
@keyframes seat { from { opacity: 0; } to { opacity: 1; } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--ink-soft); }
.legend__swatch {
width: 13px; height: 13px;
border-radius: 4px;
border: 1.4px solid var(--rule);
background: var(--panel);
flex: none;
}
.legend__swatch--caries { background: var(--alert); border-color: var(--alert); }
.legend__swatch--tratado { background: var(--accent); border-color: var(--accent); }
.legend__swatch--plan { background: rgba(16,185,129,.20); border-color: var(--vital); border-style: dashed; }
.legend__swatch--ausente { background: var(--panel-2); border-color: var(--ink-faint); }
/* ============================================================
AUTENTICACIÓN
============================================================ */
.auth {
min-height: 100svh;
display: grid;
place-items: center;
padding: 32px 20px 56px;
position: relative;
overflow: hidden;
}
.auth__watermark g { stroke: var(--rule); }
.auth__watermark {
position: absolute;
bottom: -12%;
left: 50%;
transform: translateX(-50%);
width: min(1000px, 150%);
opacity: .5;
pointer-events: none;
}
.auth__inner { width: 100%; max-width: 430px; position: relative; }
.auth__brand { display: grid; justify-items: center; gap: 10px; margin-bottom: 22px; }
.auth__brand .pulse { max-width: 130px; }
/* Pestaña de ficha sobre la placa */
.sheet { position: relative; }
.sheet__tab {
display: inline-block;
position: relative;
z-index: 1;
margin-bottom: -1px;
padding: 7px 18px 9px;
margin-left: 26px;
background: var(--panel);
border: 1px solid var(--rule);
border-bottom: 0;
border-radius: var(--r-sm) var(--r-sm) 0 0;
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent-ink);
}
.sheet__body {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--lift-2);
padding: 30px clamp(22px, 4vw, 34px) 28px;
}
.sheet__title { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.02em; }
.sheet__sub { color: var(--ink-soft); font-size: var(--t-sm); margin-top: 4px; }
.form { display: grid; gap: 14px; margin-top: 22px; }
.form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form__foot { margin-top: 18px; text-align: center; font-size: var(--t-sm); color: var(--ink-soft); }
.form__foot a { font-weight: 600; }
/* ============================================================
PANEL — armazón de la aplicación
============================================================ */
.app {
min-height: 100svh;
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
}
.rail {
display: flex;
flex-direction: column;
gap: 22px;
padding: 22px 16px;
background: var(--panel);
border-right: 1px solid var(--rule);
position: sticky;
top: 0;
height: 100svh;
}
.rail__brand { display: grid; gap: 8px; padding-left: 6px; }
.rail__nav { display: grid; gap: 2px; }
.rail__link {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border-radius: var(--r-sm);
color: var(--ink-soft);
font-size: var(--t-sm);
font-weight: 500;
transition: background .18s var(--ease), color .18s var(--ease);
}
.rail__link:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.rail__link.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.rail__link svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail__foot { margin-top: auto; display: grid; gap: 10px; }
.rail__who {
padding: 11px 12px;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--panel-2);
font-size: var(--t-xs);
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.rail__who strong { display: block; color: var(--ink); font-size: var(--t-sm); }
.work { padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
/* ------------------------- Marca de la clínica -------------------------
El identificador va tal cual llega del manual: solo se elige entre la
versión en gris y la negativa (blanca) según el fondo. No se recolorea,
ni se estira, ni se reordena. */
/* Texto solo para lector de pantalla */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.marca-clinica {
display: block;
flex-shrink: 0;
/* Que la fila la marque el contenido y no el hueco del logo. */
align-self: flex-end;
line-height: 0;
/* La cabecera alinea por abajo; el logo tiene aire propio dentro del PNG y
se veía caído frente al título. Sube un pelo. */
margin-bottom: 7px;
}
.marca-clinica img {
display: none;
/* Se le da una caja maxima y la imagen se acomoda dentro. Con un alto FIJO
(`height: 150px`) mas `object-fit: contain`, un logo apaisado se queda
centrado con un vacio arriba y abajo, y ese vacio empuja la cabecera:
eran 150 px de fila para 44 px de logo. Con maximos en los dos lados la
caja se ajusta al logo y la cabecera solo crece lo que el logo ocupa.
El tope de alto es el unico numero que hay que tocar para agrandarlo o
achicarlo: el ancho sale solo de la proporcion del logo. Con el de VZ
(proporcion 2.51) 48 px de alto dan 120 px de ancho.
Para que esto funcione el archivo no puede traer margen transparente:
ese aire va dentro del PNG y el navegador reserva la caja entera. Se le
quita al subirlo, y a los que ya estaban guardados con el comando
`python manage.py recortar_logos`. */
width: auto;
height: auto;
max-height: 48px;
max-width: 240px;
}
.marca-clinica .marca-clinica--claro { display: block; }
[data-theme="dark"] .marca-clinica .marca-clinica--claro,
[data-theme="clinica"] .marca-clinica .marca-clinica--claro { display: none; }
[data-theme="dark"] .marca-clinica .marca-clinica--oscuro,
[data-theme="clinica"] .marca-clinica .marca-clinica--oscuro { display: block; }
/* Clinica sin logo cargado: en su lugar va el nombre, para que la cabecera
nunca quede muda. Lo enciende main.js. */
.marca-clinica__texto {
display: none;
line-height: 1.2;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink);
text-align: right;
}
.marca-clinica.is-texto .marca-clinica__texto { display: block; }
@media (max-width: 700px) {
.marca-clinica img { max-height: 40px; max-width: 170px; }
}
.work__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--rule);
}
.work__title { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.02em; }
.view { display: none; }
.view.is-active { display: block; animation: rise .28s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel {
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
box-shadow: var(--lift);
}
.panel__pad { padding: 20px; }
/* Resumen */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; }
.stat__label { font-size: var(--t-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
.stat__value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.025em; margin-top: 6px; line-height: 1.05; }
.stat__note { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 8px; }
/* Índice + ficha */
.split {
display: grid;
grid-template-columns: 330px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.split--wide-index { grid-template-columns: 380px minmax(0, 1fr); }
.index { display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; max-height: calc(100svh - 152px); }
.index__tools { padding: 12px; border-bottom: 1px solid var(--rule); display: flex; gap: 8px; }
.index__filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 8px 7px 13px;
background: var(--panel-2);
border-bottom: 1px solid var(--rule);
font-size: var(--t-xs);
color: var(--ink-soft);
}
.index__filter[hidden] { display: none; }
.index__search {
flex: 1;
padding-left: 34px;
background-image: url('data:image/svg+xml;utf8, nativo en el panel de accesos: ahi hacen falta un
buscador (hay casi trescientos pacientes), marcar varios de una vez y un
"todos". Es propio y no nativo porque el panel del navegador no admite nada
de eso, y ademas se pinta con la paleta del tema como el resto de la casa.
========================================================================== */
.elector { position: relative; }
.elector__boton {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 13px;
background: var(--panel);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
font-size: var(--t-body);
text-align: left;
cursor: pointer;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.elector__boton:hover { border-color: var(--ink-faint); }
.elector__boton[aria-expanded="true"] {
border-color: var(--accent-ink);
box-shadow: var(--ring);
}
.elector__boton--vacio { color: var(--ink-faint); }
.elector__flecha {
width: 11px;
height: 7px;
flex: none;
background: var(--flecha-abajo) no-repeat center / 11px 7px;
transition: transform .18s var(--ease);
}
.elector__boton[aria-expanded="true"] .elector__flecha { transform: rotate(180deg); }
.elector__panel {
position: absolute;
z-index: 40;
left: 0;
right: 0;
top: calc(100% + 6px);
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
box-shadow: var(--lift-2);
overflow: hidden;
animation: popIn .16s var(--ease);
}
.elector__buscar { padding: 10px 10px 8px; }
.elector__acciones {
display: flex;
gap: 8px;
padding: 0 10px 8px;
border-bottom: 1px solid var(--rule);
}
.elector__lista {
max-height: 260px;
overflow-y: auto;
padding: 6px;
}
.elector__opcion {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 9px;
border-radius: var(--r-xs);
cursor: pointer;
transition: background .14s var(--ease);
}
.elector__opcion:hover { background: var(--panel-2); }
.elector__opcion input { accent-color: var(--accent); flex: none; }
.elector__nombre { font-weight: 600; }
.elector__medico {
display: block;
font-size: var(--t-sm);
color: var(--ink-soft);
font-weight: 400;
}
.elector__vacio {
padding: 18px 10px;
text-align: center;
color: var(--ink-faint);
font-size: var(--t-sm);
}
.elector__pie {
padding: 8px 12px;
border-top: 1px solid var(--rule);
font-size: var(--t-sm);
color: var(--ink-soft);
}
/* El número de historia delante del nombre, en la lista de accesos dados.
En gris y en cifras tabulares para que los números queden en columna
aunque los nombres midan distinto. */
.ledger__num {
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
/* La lista de accesos ya concedidos vive dentro de un desplegable: el
cuadernillo no necesita sus propios márgenes ni su borde de arriba. */
.elector__lista .ledger { margin: 0; }
.elector__lista .ledger__row:first-child { border-top: 0; }
/* ============================================================
FINANZAS
Mismo instrumento clínico que el resto: superficies planas,
filetes nítidos, un solo acento. Nada de tarjetas de colores.
La pieza de firma es la tira de tasas: en un consultorio que
cotiza en dólares y cobra en bolívares, la tasa del día no es
un dato de esquina, es lo primero que hay que mirar. Va arriba
del todo, se puede elegir cuál manda, y dice a qué hora se
leyó — porque una tasa sin hora no sirve para cobrar.
El color solo entra por las categorías, y siempre en dosis de
punto y barra: nunca como fondo de una tarjeta.
============================================================ */
/* ------------------------------ Tira de tasas ------------------------------ */
.fin-tira {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
gap: 12px;
padding: 4px 12px 4px 4px;
margin-bottom: 16px;
}
.fin-tira__lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fin-tasa {
display: grid;
gap: 2px;
padding: 12px 16px;
border: 0;
border-left: 2px solid transparent;
background: none;
text-align: left;
cursor: pointer;
border-radius: var(--r-sm);
transition: background .18s var(--ease), border-color .18s var(--ease);
}
.fin-tasa:first-child { border-left-color: transparent; }
.fin-tasa + .fin-tasa { border-left: 1px solid var(--rule); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.fin-tasa:hover { background: var(--panel-2); }
.fin-tasa.is-on { background: var(--panel-2); border-left-color: var(--accent-ink); }
.fin-tasa.is-on + .fin-tasa { border-left-color: var(--rule); }
.fin-tasa__k {
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--ink-soft);
}
.fin-tasa.is-on .fin-tasa__k { color: var(--accent-ink); }
.fin-tasa__v {
font-size: 1.12rem;
font-weight: 700;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
/* La hora de la lectura no es adorno: dice si estás cotizando con la tasa de
hoy o con la del viernes. En --ink-faint se quedaba en 2,45:1 sobre blanco,
por debajo del mínimo legible. Lo mismo vale para las cifras en bolívares de
más abajo: son dinero, no pie de página. */
.fin-tasa__t { font-size: var(--t-xs); color: var(--ink-soft); }
/* Una tasa que no es de hoy tiene que decirlo sin gritar. */
.fin-tasa__t.is-vieja { color: var(--alert); }
/* El botón necesita su propio filete: pegado a la tercera tasa parecía parte
de ella, como si actualizara solo esa. */
.fin-tira__accion {
display: flex;
align-items: center;
padding-left: 14px;
border-left: 1px solid var(--rule);
}
/* Los dos desgloses del mes, del mismo ancho: son dos mitades de la misma
pregunta, no un índice y su detalle. */
.fin-dos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
align-items: start;
margin-top: 16px;
}
/* --------------------------- Navegador de mes --------------------------- */
.fin-mes {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 14px;
}
.fin-mes__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
cursor: pointer;
transition: border-color .18s var(--ease), color .18s var(--ease);
}
.fin-mes__btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.fin-mes__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fin-mes__btn[disabled] { opacity: .4; cursor: not-allowed; }
.fin-mes__titulo {
min-width: 190px;
text-align: center;
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -.01em;
}
/* ------------------------------ Cifras del mes ------------------------------ */
/* Se apoyan en .stat, que ya existe: aquí solo se añade la segunda línea en
bolívares y el color del signo. */
.fin-stat__bs {
font-size: var(--t-xs);
color: var(--ink-soft);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.stat__value.is-entra { color: var(--vital); }
.stat__value.is-sale { color: var(--alert); }
.stat__value.is-saldo-negativo { color: var(--alert); }
/* -------------------------------- Desglose -------------------------------- */
.fin-desglose { padding: 20px; display: grid; gap: 14px; }
.fin-desglose__cab {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.fin-desglose__titulo { font-size: var(--t-h3); font-weight: 700; }
.fin-desglose__total { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
/* La barra apilada: una sola pieza, sin leyenda propia — la leyenda son las
filas de abajo, que ya llevan su punto del mismo color. */
.fin-barra {
display: flex;
gap: 3px;
height: 10px;
border-radius: 999px;
overflow: hidden;
}
.fin-barra__parte { border-radius: 999px; min-width: 4px; }
.fin-barra--vacia { background: var(--panel-2); border: 1px solid var(--rule); }
.fin-cats { display: grid; }
.fin-cat {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
}
.fin-cat:last-child { border-bottom: 0; }
.fin-cat__punto { width: 10px; height: 10px; border-radius: 999px; }
.fin-cat__nombre { font-size: var(--t-sm); overflow-wrap: anywhere; }
.fin-cat__monto { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-cat__pct {
font-size: var(--t-xs);
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
min-width: 42px;
text-align: right;
}
/* ------------------------------- Movimientos ------------------------------- */
.fin-barra-acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.fin-barra-acciones__hueco { margin-left: auto; }
.fin-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-filtro {
padding: 6px 13px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
font-size: var(--t-xs);
font-weight: 600;
cursor: pointer;
transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.fin-filtro:hover { color: var(--ink); }
.fin-filtro.is-on { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--panel-2); }
.fin-lista { display: grid; }
.fin-mov {
display: grid;
grid-template-columns: 62px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 13px 20px;
border-bottom: 1px solid var(--rule);
}
.fin-mov:last-child { border-bottom: 0; }
.fin-mov__fecha {
font-size: var(--t-xs);
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
text-transform: lowercase;
}
.fin-mov__cuerpo { display: grid; gap: 3px; min-width: 0; }
.fin-mov__concepto {
font-size: var(--t-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fin-mov__punto { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.fin-mov__meta { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.fin-mov__cifras { text-align: right; display: grid; gap: 2px; }
.fin-mov__monto {
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fin-mov__monto.is-entra { color: var(--vital); }
.fin-mov__monto.is-sale { color: var(--alert); }
.fin-mov__bs { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-mov__acciones { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.chip--pendiente { color: #B4762A; border-color: rgba(180,118,42,.45); }
.chip--cobrado { color: var(--vital); border-color: rgba(18,128,96,.40); }
/* Exonerado no es bueno ni malo, es dinero que no ocurrio: en gris, ni el
verde de lo cobrado ni el ambar de lo que falta por cobrar. */
.chip--exonerado { color: var(--ink-faint); border-color: var(--rule); }
/* La cifra de un exonerado se enseña, pero apagada y sin signo: esta ahi para
decir que ese trabajo no se cobro, no para sumarse a nada. */
.fin-mov__monto.is-nula { color: var(--ink-faint); font-weight: 600; }
/* Los campos del dinero cuando se exonera. Se apagan a la vista, con el mismo
gesto que los dias no elegibles del calendario, para que se entienda que no
estan rotos: es que no hacen falta. */
.fin-hoja .input:disabled,
.fin-form .input:disabled {
opacity: .45;
cursor: not-allowed;
}
/* --------------------------- Plazos de control --------------------------- */
/* Un número y su unidad, leídos como una sola cosa: «6 meses». Por eso van
pegados en una fila y no como dos campos con su etiqueta cada uno. */
.fin-plazo { display: flex; gap: 8px; align-items: center; }
.fin-plazo__n { flex: 0 0 96px; }
.fin-plazo__u { flex: 0 0 132px; }
.fin-plazo__nota {
margin-top: 6px;
font-size: var(--t-xs);
color: var(--ink-soft);
line-height: 1.45;
}
/* El bloque del control dentro de la hoja de cobrar. Alineado con el resto de
campos, sin filete ni sangría: llevaba un filete a la izquierda para
apartarlo del dinero, pero al verlo montado no se distinguía del borde de la
hoja y lo único que quedaba era la sangría, que parecía un descuadre. La
casilla ya se lee como una etiqueta más de la rejilla. */
.fin-control { padding: 10px 0 2px; }
.fin-control .check { margin-bottom: 10px; }
/* --------------------------------- Tarifario --------------------------------- */
.fin-tarifa {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 14px;
padding: 13px 20px;
border-bottom: 1px solid var(--rule);
}
.fin-tarifa:last-child { border-bottom: 0; }
.fin-tarifa__nombre { font-size: var(--t-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-tarifa__desc { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 2px; }
.fin-tarifa__precio { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-tarifa__bs { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fin-tarifa__acciones { display: flex; gap: 6px; }
.chip--casa { color: var(--accent-ink); border-color: var(--accent-ink); }
.chip--mio { color: var(--ink-soft); }
/* --------------------------------- Formularios --------------------------------- */
.fin-form { padding: 20px; margin-bottom: 14px; display: grid; gap: 16px; }
.fin-form__titulo { font-size: var(--t-h3); font-weight: 700; }
.fin-form__pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fin-form__pie .fin-form__hueco { margin-left: auto; }
/* Lo que va a quedar asentado, calculado en vivo mientras se escribe: en tres
monedas nadie hace la cuenta de cabeza, y firmar un cobro sin ver el
bolívar resultante es cómo se cobra de menos. */
.fin-cuenta {
display: grid;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--rule);
border-left: 2px solid var(--accent-ink);
border-radius: var(--r-sm);
background: var(--panel-2);
}
.fin-cuenta__cifra { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fin-cuenta__nota { font-size: var(--t-xs); color: var(--ink-soft); }
/* --------------------------------- Adaptable --------------------------------- */
@media (max-width: 900px) {
.fin-tira { grid-template-columns: minmax(0, 1fr); padding: 8px; }
.fin-tira__lista { grid-template-columns: minmax(0, 1fr); }
.fin-tasa + .fin-tasa { border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--r-sm); }
.fin-tira__accion { justify-content: flex-end; padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 8px; }
}
@media (max-width: 620px) {
.fin-mov { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
.fin-mov__fecha { grid-column: 1 / -1; }
.fin-tarifa { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
.fin-tarifa__acciones { grid-column: 1 / -1; justify-content: flex-end; }
.fin-mes__titulo { min-width: 0; flex: 1; }
}
/* ---------------------------- Cuenta del paciente ---------------------------
La facturación vive dentro de la historia, así que se lee como el resto de
la historia: filetes y cifras, sin tarjetas de colores. Reutiliza .fin-mov
para las líneas — es el mismo dato visto desde el otro lado. */
.fac { display: grid; gap: 16px; }
/* Se reparte por el ancho de la columna, no por el de la ventana: la historia
vive en la mitad derecha de la pantalla y puede quedar estrecha con el
navegador entero abierto. Con columnas fijas, las tres cifras se montaban
unas encima de otras sin que ninguna media query llegara a saltar. */
.fac__totales {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 18px 34px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.fac__total { min-width: 130px; }
.fac__k {
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--ink-soft);
}
.fac__v {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.fac__v.is-entra { color: var(--vital); }
.fac__v.is-debe { color: var(--alert); }
.fac__bs { font-size: var(--t-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fac__accion { margin-left: auto; }
.fac__lista { display: grid; }
/* Dentro de la historia no hay panel que ponga el margen, así que las líneas
ponen el suyo. */
.fac__lista .fin-mov { padding-inline: 0; }
@media (max-width: 620px) {
.fac__accion { margin-left: 0; width: 100%; }
.fac__accion .btn { width: 100%; }
}
/* ================================ ACCESOS ================================
Quién entra y quién sale, en el panel del administrador. Es una lista de
registro: se lee de arriba abajo y se escanea, así que va en filas de tres
columnas —quién, desde dónde, cuándo— con filete entre ellas y nada más.
El color aquí no decora: solo marca lo que reclama atención. Una fila con
alerta lleva un filete al costado; el resto va en tinta.
======================================================================== */
.acc-alertas { padding: 20px; margin-bottom: 16px; display: grid; gap: 4px; }
.acc-alertas__cab { margin-bottom: 8px; }
.acc-alertas__titulo { font-size: var(--t-h3); font-weight: 700; }
.acc-alerta {
display: grid;
grid-template-columns: 2px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--rule);
}
.acc-alerta:last-child { border-bottom: 0; }
/* El filete al costado, no un fondo: marca sin gritar y sin romper la lectura. */
.acc-alerta__marca { align-self: stretch; background: var(--alert); border-radius: 999px; }
.acc-alerta__cuerpo { display: grid; gap: 3px; min-width: 0; }
.acc-alerta__quien {
font-size: var(--t-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.acc-alerta__texto { font-size: var(--t-sm); overflow-wrap: anywhere; }
.acc-alerta__meta { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.acc-alerta__acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip--aviso { color: var(--alert); border-color: rgba(198,54,46,.40); }
.chip--dentro { color: var(--vital); border-color: rgba(18,128,96,.40); }
/* La barra de arriba reutiliza .fin-barra-acciones y .fin-filtro: es el mismo
gesto que en Finanzas, y aprender dos veces lo mismo no tiene sentido. */
.acc-campo { display: inline-flex; align-items: center; gap: 8px; }
.acc-campo__k {
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--ink-soft);
}
.input--corto { width: auto; min-width: 104px; padding-block: 7px; }
/* Se encoge antes que empujar el botón a una segunda fila. */
.input--busca { width: auto; flex: 1 1 160px; min-width: 150px; max-width: 260px; padding-block: 7px; }
.acc-lista { display: grid; }
.acc-fila {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 13px 20px;
border-bottom: 1px solid var(--rule);
border-left: 2px solid transparent;
}
.acc-fila:last-child { border-bottom: 0; }
.acc-fila.is-marcada { border-left-color: var(--alert); }
.acc-fila__usuario {
font-size: var(--t-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.acc-fila__ip { font-size: var(--t-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acc-fila__hora { font-size: var(--t-sm); }
.acc-fila__meta { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; margin-top: 2px; }
.acc-fila__acciones { display: flex; justify-content: flex-end; }
@media (max-width: 1000px) {
.acc-fila {
grid-template-columns: minmax(0, 1fr) auto;
row-gap: 8px;
padding: 14px;
}
.acc-fila__donde, .acc-fila__cuando { grid-column: 1 / -1; }
.acc-fila__acciones { align-self: start; }
}
@media (max-width: 620px) {
.acc-alerta { grid-template-columns: 2px minmax(0, 1fr); }
.acc-alerta__acciones { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
.input--busca { min-width: 0; width: 100%; }
}
/* =============================== RESPALDOS ===============================
Dos cajas: bajar y restaurar. Se lee como un formulario de papel — un paso
debajo del otro— porque restaurar historias clínicas no es algo que deba
hacerse a base de reflejos.
======================================================================== */
.res-dos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
align-items: start;
}
.res-caja { padding: 22px; display: grid; gap: 12px; align-content: start; }
.res-caja__titulo { font-size: var(--t-h3); font-weight: 700; }
.res-caja .actions { margin-top: 2px; }
/* Lo que trae el archivo, antes de tocar nada. Va con filete al costado en el
acento: es información para decidir, no una alarma. */
.res-inv {
padding: 14px 16px;
border: 1px solid var(--rule);
border-left: 2px solid var(--accent-ink);
border-radius: var(--r-sm);
background: var(--panel-2);
display: grid;
gap: 10px;
}
.res-inv__titulo { font-size: var(--t-sm); font-weight: 700; }
.res-inv__datos { display: grid; }
.res-inv__fila {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 6px 0;
border-bottom: 1px solid var(--rule);
}
.res-inv__fila:last-child { border-bottom: 0; }
.res-inv__k { font-size: var(--t-xs); color: var(--ink-soft); }
.res-inv__v {
font-size: var(--t-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
overflow-wrap: anywhere;
}
.res-hecho {
padding: 14px 16px;
border: 1px solid var(--rule);
border-left: 2px solid var(--vital);
border-radius: var(--r-sm);
background: var(--panel-2);
display: grid;
gap: 4px;
}
.res-hecho__titulo { font-size: var(--t-sm); font-weight: 700; color: var(--vital); }
.res-hecho__texto { font-size: var(--t-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
/* El campo de archivo se esconde y su etiqueta hace de botón: el botón nativo
dice "Choose File" y no hay manera de traducirlo. Escondido así —y no con
display:none— sigue alcanzándose con el tabulador y anunciándose al lector
de pantalla. */
.res-archivo {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.field > label.res-elegir {
justify-self: start;
cursor: pointer;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
}
.res-archivo:focus-visible + .res-elegir {
outline: 2px solid var(--accent-ink);
outline-offset: 2px;
}
/* ========================= HOJAS DE FINANZAS =========================
Registrar un procedimiento, anotar un movimiento y añadir al tarifario
son tres formularios que antes crecían debajo de la lista y empujaban
los movimientos fuera de la pantalla. Ahora se abren encima, en una
hoja: te paras a llenar algo y vuelves a donde estabas.
Se apoya en lo que ya existe (.panel, .field, .input, .btn, .chip) y
solo añade lo que no había. Va por debajo de .modal (z-index 60) a
propósito: el diálogo de «¿Borrar esto?» tiene que poder salir encima
de la hoja, no debajo.
==================================================================== */
.fin-hoja {
position: fixed;
inset: 0;
z-index: 55;
display: grid;
place-items: center;
padding: 24px;
background: rgba(15, 45, 68, .42);
backdrop-filter: blur(3px);
animation: finHojaFondo .18s var(--ease);
}
[data-theme="dark"] .fin-hoja,
[data-theme="clinica"] .fin-hoja { background: rgba(0, 0, 0, .58); }
@keyframes finHojaFondo { from { opacity: 0; } to { opacity: 1; } }
/* Tres franjas: cabecera y pie quietos, cuerpo con el desplazamiento. Un
formulario largo se recorre sin perder de vista ni el título ni el botón
de guardar. */
.fin-hoja__caja {
width: min(680px, 100%);
max-height: min(86vh, 920px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
box-shadow: var(--lift-2);
overflow: hidden;
animation: finHojaEntra .34s var(--ease);
transition: width .34s var(--ease), max-height .34s var(--ease);
}
@keyframes finHojaEntra {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
/* Ampliada: para quien trabaja con el navegador entero y prefiere ver los
nueve campos de una vez. La elección se recuerda entre sesiones. */
.fin-hoja__caja.is-amplia {
width: min(1060px, 100%);
max-height: 94vh;
}
.fin-hoja.is-yendo { animation: finHojaFondoSale .16s var(--ease) forwards; }
.fin-hoja.is-yendo .fin-hoja__caja { animation: finHojaSale .16s var(--ease) forwards; }
@keyframes finHojaFondoSale { to { opacity: 0; } }
@keyframes finHojaSale { to { opacity: 0; transform: translateY(8px) scale(.99); } }
/* ------------------------------ Cabecera ------------------------------ */
.fin-hoja__cab {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 20px 22px 16px;
border-bottom: 1px solid var(--rule);
}
.fin-hoja__rotulo { min-width: 0; }
.fin-hoja__titulo { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.02em; }
.fin-hoja__entrada {
margin-top: 5px;
font-size: var(--t-sm);
color: var(--ink-soft);
max-width: 62ch;
}
.fin-hoja__mandos { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.fin-hoja__mando {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
font-size: var(--t-xs);
font-weight: 600;
cursor: pointer;
transition: border-color .18s var(--ease), color .18s var(--ease),
background .18s var(--ease);
}
.fin-hoja__mando:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.fin-hoja__mando[aria-pressed="true"] {
border-color: var(--accent-ink);
color: var(--accent-ink);
background: var(--panel-2);
}
.fin-hoja__mando svg {
width: 15px; height: 15px;
fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.fin-hoja__mando--x { padding: 7px; }
/* ------------------------------- Cuerpo ------------------------------- */
.fin-hoja__cuerpo {
padding: 20px 22px;
overflow-y: auto;
overscroll-behavior: contain;
}
.fin-hoja__aviso:not(:empty) {
margin-top: 14px;
font-size: var(--t-sm);
color: var(--alert);
animation: finCampo .2s var(--ease);
}
/* Los campos entran escalonados, muy corto. Es el gesto de una hoja que se
posa, no una animación por campo: a los 40 ms de diferencia se lee como
un solo movimiento. */
.fin-hoja__cuerpo .field { animation: finCampo .3s var(--ease) backwards; }
.fin-hoja__cuerpo .field:nth-child(1) { animation-delay: .04s; }
.fin-hoja__cuerpo .field:nth-child(2) { animation-delay: .07s; }
.fin-hoja__cuerpo .field:nth-child(3) { animation-delay: .10s; }
.fin-hoja__cuerpo .field:nth-child(4) { animation-delay: .13s; }
.fin-hoja__cuerpo .field:nth-child(5) { animation-delay: .16s; }
.fin-hoja__cuerpo .field:nth-child(6) { animation-delay: .18s; }
.fin-hoja__cuerpo .field:nth-child(7) { animation-delay: .20s; }
.fin-hoja__cuerpo .field:nth-child(8) { animation-delay: .22s; }
.fin-hoja__cuerpo .field:nth-child(n+9) { animation-delay: .24s; }
@keyframes finCampo {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
/* --------------------------------- Pie --------------------------------- */
/* La cuenta viva y los botones comparten el pie: lo que se va a asentar se
lee justo encima del botón que lo asienta. */
.fin-hoja__pie {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
border-top: 1px solid var(--rule);
background: var(--panel);
}
.fin-hoja__botones {
display: flex;
gap: 8px;
margin-left: auto;
flex: 0 0 auto;
}
.fin-hoja__pie > .btn:first-child { margin-left: auto; }
/* En el pie la cuenta pierde el fondo: ya está sobre una franja aparte. */
.fin-cuenta--pie {
flex: 1 1 auto;
min-width: 0;
padding: 0 0 0 12px;
border: 0;
border-left: 2px solid var(--accent-ink);
border-radius: 0;
background: none;
}
/* ======================== BUSCAR UN PACIENTE ==========================
La clínica tiene cerca de trescientas historias. En un desplegable eso
es una lista que se recorre con la rueda del ratón, y el número —que es
como se busca una carpeta en el archivo— queda escondido dentro de la
línea. Aquí el número va delante, en su propia columna y en cifras de
ancho fijo, para que la vista baje por ellos como por el lomo de las
carpetas.
==================================================================== */
.fin-busca { position: relative; }
.fin-busca__lupa {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px; height: 15px;
fill: none; stroke: var(--ink-faint);
stroke-width: 1.7; stroke-linecap: round;
pointer-events: none;
transition: stroke .18s var(--ease);
}
.fin-busca__campo { padding-left: 35px; }
.fin-busca:focus-within .fin-busca__lupa { stroke: var(--accent-ink); }
/* Elegido: el campo lleva el nombre completo y se marca con el acento, para
que se distinga de un campo a medio escribir. */
.fin-busca.is-elegido .fin-busca__campo {
border-color: var(--accent-ink);
font-weight: 600;
}
.fin-busca.is-elegido .fin-busca__lupa { stroke: var(--accent-ink); }
.fin-busca__panel {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
z-index: 5;
max-height: 268px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 4px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
box-shadow: var(--lift-2);
animation: finPanel .16s var(--ease);
}
@keyframes finPanel {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
.fin-busca__op {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: var(--r-xs);
background: none;
text-align: left;
cursor: pointer;
transition: background .12s var(--ease);
}
.fin-busca__op:hover,
.fin-busca__op.is-marcado { background: var(--panel-2); }
/* El número, en cifras de ancho fijo: alineados unos debajo de otros se
recorren de un vistazo, que es justo para lo que sirve el número. */
.fin-busca__n {
font-size: var(--t-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .06em;
color: var(--accent-ink);
}
.fin-busca__nombre {
font-size: var(--t-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fin-busca__nada {
padding: 14px 10px;
font-size: var(--t-sm);
color: var(--ink-soft);
}
/* ==================== MÁS FLUIDEZ EN LAS LISTAS ======================
Las filas de movimientos y del tarifario se repintan enteras cada vez
que se cambia de filtro o de mes. Sin nada, el cambio es un salto; con
esto, las filas se posan de arriba abajo. Muy corto y muy poco
recorrido: tiene que leerse como que la lista respondió, no como una
animación que hay que esperar.
==================================================================== */
.fin-lista .fin-mov,
.fin-tarifario .fin-tarifa { animation: finFila .24s var(--ease) backwards; }
.fin-lista .fin-mov:nth-child(1), .fin-tarifario .fin-tarifa:nth-child(1) { animation-delay: .01s; }
.fin-lista .fin-mov:nth-child(2), .fin-tarifario .fin-tarifa:nth-child(2) { animation-delay: .03s; }
.fin-lista .fin-mov:nth-child(3), .fin-tarifario .fin-tarifa:nth-child(3) { animation-delay: .05s; }
.fin-lista .fin-mov:nth-child(4), .fin-tarifario .fin-tarifa:nth-child(4) { animation-delay: .07s; }
.fin-lista .fin-mov:nth-child(5), .fin-tarifario .fin-tarifa:nth-child(5) { animation-delay: .09s; }
.fin-lista .fin-mov:nth-child(6), .fin-tarifario .fin-tarifa:nth-child(6) { animation-delay: .11s; }
.fin-lista .fin-mov:nth-child(7), .fin-tarifario .fin-tarifa:nth-child(7) { animation-delay: .13s; }
.fin-lista .fin-mov:nth-child(n+8), .fin-tarifario .fin-tarifa:nth-child(n+8) { animation-delay: .14s; }
@keyframes finFila {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: none; }
}
/* La fila entera responde al ratón: en una lista de dinero conviene saber
sobre cuál se está antes de pulsar «Borrar». */
.fin-mov, .fin-tarifa { transition: background .16s var(--ease); }
.fin-lista .fin-mov:hover,
.fin-tarifario .fin-tarifa:hover { background: var(--panel-2); }
/* Las cifras del mes cambian de valor al cambiar de moneda o de mes. Sin
transición, la cifra parpadea; con ella, se asienta. */
.stat__value, .fin-stat__bs { transition: color .22s var(--ease); }
.fin-barra__parte { transition: flex .4s var(--ease), background .22s var(--ease); }
/* --------------------------- Hoja en el móvil --------------------------- */
/* De abajo arriba y a todo el ancho: en un teléfono una ventana centrada
con márgenes desperdicia la mitad de la pantalla, y el pulgar llega
antes al pie. */
@media (max-width: 620px) {
.fin-hoja { padding: 0; place-items: end stretch; }
.fin-hoja__caja,
.fin-hoja__caja.is-amplia {
width: 100%;
max-height: 92vh;
border-radius: var(--r-lg) var(--r-lg) 0 0;
border-bottom: 0;
animation: finHojaSube .32s var(--ease);
}
@keyframes finHojaSube {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
.fin-hoja.is-yendo .fin-hoja__caja { animation: finHojaBaja .18s var(--ease) forwards; }
@keyframes finHojaBaja { to { opacity: 0; transform: translateY(20px); } }
.fin-hoja__cab { padding: 16px 16px 14px; }
.fin-hoja__cuerpo { padding: 16px; }
.fin-hoja__pie { padding: 12px 16px; flex-wrap: wrap; }
.fin-hoja__botones { width: 100%; margin-left: 0; }
.fin-hoja__botones .btn { flex: 1; }
.fin-cuenta--pie { flex: 1 0 100%; }
/* Ampliar no tiene sentido cuando ya ocupa todo el ancho. */
.fin-hoja__mando[data-ampliar] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fin-hoja,
.fin-hoja__caja,
.fin-hoja__cuerpo .field,
.fin-busca__panel,
.fin-lista .fin-mov,
.fin-tarifario .fin-tarifa { animation: none; }
.fin-hoja__caja { transition: none; }
}
/* ===================== PLEGAR EL MENÚ Y LA LISTA =====================
El rail y la lista de pacientes se llevan juntos casi 570 píxeles fijos.
Mientras se lee una historia o se dibuja un odontodiagrama, eso es media
pantalla en dos cosas que ya no hace falta mirar.
Plegados no desaparecen: el menú se queda en iconos y la lista deja su
lomo de pie, como la carpeta empujada al fondo del archivo. Nada se
esconde del todo, porque un menú que desaparece hay que ir a buscarlo.
Por debajo de 1080 px la lista ya se apila sobre la ficha y por debajo de
860 el rail ya es una barra abajo: ahí no hay ancho que ganar y los
tiradores no salen.
==================================================================== */
/* El tirador es el mismo gesto en los dos sitios: un botón redondo con una
flecha que gira. Se aprende una vez. */
.pliegue {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel);
color: var(--ink-soft);
cursor: pointer;
transition: color .18s var(--ease), border-color .18s var(--ease),
background .18s var(--ease);
}
.pliegue:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.pliegue svg {
width: 15px; height: 15px;
fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
transition: transform .3s var(--ease);
}
/* Plegado, la flecha apunta al otro lado: dice lo que va a pasar si se pulsa. */
.pliegue[aria-expanded="false"] svg { transform: rotate(180deg); }
/* El primer pintado aplica lo que estaba recordado. Sin esto se ve al rail
cerrarse solo al cargar la página, que parece un fallo. */
.sin-transicion .app,
.sin-transicion .split,
.sin-transicion .rail,
.sin-transicion .pliegue svg,
.sin-transicion .rail__link span,
.sin-transicion .index { transition: none !important; }
/* ------------------------------ El menú ------------------------------ */
.app { transition: grid-template-columns .3s var(--ease); }
/* El tirador vive sobre el filete del rail, medio dentro y medio fuera: es
el borde lo que se mueve, y agarrarlo por ahí es lo natural.
OJO: aquí NO se toca el `position` del rail. Lo tiene en `sticky` para
quedarse fijo mientras el contenido se desplaza, y un `relative` puesto
aquí lo pisaba: el rail se iba con el scroll y su fondo se acababa a media
pantalla. `sticky` ya es posicionado, así que el tirador se ancla a él
igual de bien. */
.rail__pliegue {
position: absolute;
top: 24px;
right: -15px;
z-index: 4;
box-shadow: 0 2px 8px -3px rgba(18, 28, 26, .3);
}
/* El monograma: la misma marca cuando no cabe entera. La L toma el acento y
la M la tinta, igual que Lumi/Med en el logotipo completo. */
.rail__monograma {
display: none;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -.03em;
color: var(--accent-ink);
text-align: center;
line-height: 1;
}
.rail__monograma em { font-style: normal; color: var(--ink); }
/* El botón de salir gana su icono, que es lo único que queda plegado. */
.rail__salir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rail__salir svg {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 861px) {
.app.rail-plegado { grid-template-columns: 74px minmax(0, 1fr); }
.rail-plegado .rail { padding: 22px 12px; }
.rail-plegado .rail__brand { padding-left: 0; }
.rail-plegado .mark,
.rail-plegado .pulse,
.rail-plegado .rail__who { display: none; }
.rail-plegado .rail__monograma { display: block; }
/* Los rótulos se van, los iconos se centran. El nombre completo queda en el
title, para quien dude de un icono. */
.rail-plegado .rail__link { justify-content: center; padding: 11px 0; gap: 0; }
.rail-plegado .rail__link span { display: none; }
.rail-plegado .rail__salir span { display: none; }
.rail-plegado .rail__salir { gap: 0; padding-inline: 0; }
}
/* -------------------------- La lista de pacientes -------------------------- */
.split { transition: grid-template-columns .3s var(--ease); }
.index { transition: max-height .3s var(--ease); }
/* Su tirador va montado en el borde derecho, como el del rail: el mismo gesto
en los dos sitios se aprende una vez. Dentro de la fila de herramientas le
robaba el ancho al buscador y el texto quedaba cortado.
Para que el botón pueda salirse del panel, la caja deja de recortar. El
recorte solo servía para las esquinas redondeadas, y la lista ya lleva su
propio desplazamiento. */
.index { overflow: visible; position: relative; }
.index__list { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.index__pliegue {
position: absolute;
top: 22px;
right: -15px;
z-index: 4;
box-shadow: 0 2px 8px -3px rgba(18, 28, 26, .3);
}
/* Cuatro filas ahora: herramientas, lomo, filtro y lista. Desplegado el lomo
no ocupa nada, porque su fila se queda en cero. */
.index { grid-template-rows: auto auto auto minmax(0, 1fr); }
/* El lomo: el rótulo de pie, como en el canto de una carpeta. Solo se ve
plegada, y es lo que dice de qué es esa franja. */
.index__lomo {
display: none;
writing-mode: vertical-rl;
text-orientation: mixed;
margin: 4px auto 14px;
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--ink-soft);
user-select: none;
}
@media (min-width: 1081px) {
.split.lista-plegada { grid-template-columns: 52px minmax(0, 1fr); }
/* El lomo se estira hasta donde llega la ficha, como el canto de la carpeta
que está al lado. Suelto y corto parecía un botón flotando. */
.lista-plegada .index { max-height: none; align-self: stretch; }
.lista-plegada .index__search,
.lista-plegada .index__tools .btn--solid,
.lista-plegada .index__filter,
.lista-plegada .index__list { display: none; }
.lista-plegada .index__tools {
padding: 10px 0;
min-height: 52px;
border-bottom: 0;
}
/* Plegada la franja es tan estrecha como el botón: se centra en ella. */
.lista-plegada .index__pliegue { right: 11px; }
.lista-plegada .index__lomo { display: block; }
}
/* Plegar no tiene sentido donde la lista ya está apilada sobre la ficha ni
donde el menú ya es una barra abajo: sin ancho que ganar, el tirador solo
sería un botón más. */
@media (max-width: 1080px) {
.index__pliegue { display: none; }
}
@media (max-width: 860px) {
.rail__pliegue, .rail__monograma { display: none; }
.rail__salir svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.app, .split, .index, .pliegue svg { transition: none; }
}
/* ====================== LA COPIA EN GOOGLE DRIVE ======================
Al lado de la descarga manual, porque son la misma cosa por dos
caminos. Lo que aquí importa no es el botón: es poder mirar de un
vistazo si cada clínica tiene copia y de cuándo. Un respaldo que
lleva tres días fallando en silencio es no tener respaldo.
==================================================================== */
.res-nube__cab {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* El estado, en la esquina: lo primero que se busca al abrir esto. */
.res-nube__estado {
font-size: var(--t-xs);
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--rule);
color: var(--ink-soft);
white-space: nowrap;
}
.res-nube__estado.is-bien {
color: var(--vital);
border-color: color-mix(in srgb, var(--vital) 40%, transparent);
background: color-mix(in srgb, var(--vital) 10%, transparent);
}
/* Apagado no es un fallo: no hay token de ámbar en la paleta y tampoco hace
falta inventarlo. La tinta suave dice «esto está así a propósito». */
.res-nube__estado.is-tibio {
color: var(--ink-soft);
background: var(--panel-2);
}
.res-nube__estado.is-mal {
color: var(--alert);
border-color: color-mix(in srgb, var(--alert) 40%, transparent);
background: color-mix(in srgb, var(--alert) 10%, transparent);
}
.res-nube__lista {
display: grid;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
overflow: hidden;
}
.res-nube__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 13px;
background: var(--panel);
}
/* Una raya de color a la izquierda: se ve cuál falló sin leer la línea. */
.res-nube__fila.is-mal { box-shadow: inset 3px 0 0 var(--alert); }
.res-nube__fila.is-nunca { box-shadow: inset 3px 0 0 var(--ink-faint); }
.res-nube__quien { min-width: 0; display: grid; gap: 2px; }
.res-nube__quien strong { font-size: var(--t-sm); }
.res-nube__quien span {
font-size: var(--t-xs);
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.res-nube__fila.is-mal .res-nube__quien span { color: var(--alert); }
.res-nube__cuando {
flex: 0 0 auto;
display: grid;
gap: 2px;
justify-items: end;
text-align: right;
font-size: var(--t-xs);
color: var(--ink-soft);
}
.res-nube__cuando a { color: var(--accent-ink); }
@media (max-width: 560px) {
.res-nube__fila { flex-direction: column; align-items: flex-start; gap: 6px; }
.res-nube__cuando { justify-items: start; text-align: left; }
}
/* ============================== AGENDA ==============================
Un mes completo con un punto en los días que tienen algo. El mes se
elige a propósito: agendar es una conversación por teléfono («¿el
martes te viene bien?»), y en esa conversación hace falta ver el mes,
no la hora. Las horas del día elegido salen debajo, que es donde
importan.
=================================================================== */
.age-dos {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
/* El calendario se estira hasta abajo y las semanas reparten ese alto entre
ellas. Antes las celdas medían 58 px fijos y debajo quedaba media pantalla
vacía: en un mes con varias citas por día, ese hueco es justo lo que hacía
falta para verlas sin achicar los puntos. */
.age-dos > .panel:first-child {
display: flex;
flex-direction: column;
/* Lo que queda de pantalla por debajo de la cabecera del panel. Es un
mínimo, no un alto fijo: si el mes necesita más, crece. */
min-height: min(74vh, 780px);
}
#age-rejilla {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.age-mes__celdas { flex: 1; grid-auto-rows: minmax(58px, 1fr); }
/* Los dos paneles de la derecha, uno debajo del otro y con aire entre ellos.
Sin esto quedaban pegados como si fueran uno solo. */
.age-columna { display: grid; gap: 18px; align-content: start; }
/* `.panel` en este proyecto solo pone el fondo y el filete; el aire de dentro
lo pone `.panel__pad`. Los paneles de la agenda no lo llevaban y el texto
quedaba pegado al borde, descolgado de todo lo demás. Se les da aquí para
no tener que acordarse de la clase en cada sitio. */
.age-dos > .panel,
.age-columna > .panel { padding: 20px; }
@media (max-width: 1080px) { .age-dos { grid-template-columns: 1fr; } }
/* ------------------------------ El mes ------------------------------ */
.age-mes__cab {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.age-mes__titulo {
font-size: var(--t-h3);
font-weight: 700;
text-transform: capitalize;
letter-spacing: -.01em;
min-width: 9ch;
}
.age-mes__cab .btn { margin-left: auto; }
.age-mes__dias {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 6px;
}
.age-mes__dias span {
text-align: center;
font-size: var(--t-eyebrow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-faint);
}
.age-mes__celdas {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.age-dia {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 6px 4px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: none;
color: var(--ink);
font: inherit;
cursor: pointer;
transition: background .14s var(--ease), border-color .14s var(--ease);
}
.age-dia:hover { background: var(--panel-2); }
.age-dia__n { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
/* Los días de los meses vecinos rellenan la rejilla pero no compiten: una
rejilla completa se lee mejor que una que empieza a media semana. */
.age-dia.is-fuera { color: var(--ink-faint); }
.age-dia.is-fuera .age-dia__puntos { opacity: .45; }
/* Hoy va marcado con el filete; el día que se está mirando, relleno. Son dos
cosas distintas y tienen que poder verse a la vez. */
.age-dia.is-hoy { border-color: var(--accent-ink); }
.age-dia.is-elegido {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.age-dia.is-elegido .age-dia__n { font-weight: 700; }
.age-dia__puntos {
display: flex;
align-items: center;
gap: 3px;
min-height: 6px;
}
.age-dia__puntos i {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent-ink);
}
/* Más de tres deja de contarse de un vistazo: ahí ya va el número. */
.age-dia__puntos b {
font-size: var(--t-eyebrow);
font-weight: 700;
color: var(--accent-ink);
}
.age-dia.is-elegido .age-dia__puntos i { background: #fff; }
.age-dia.is-elegido .age-dia__puntos b { color: #fff; }
/* ------------------------------ El día ------------------------------ */
.age-dia-cab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
/* Sin `capitalize`: subiria tambien la de «de», y «Sáb 29 De Agosto» esta mal
escrito. La mayuscula inicial la pone el JS, que sabe donde empieza. */
.age-dia-cab__t {
font-size: var(--t-sm);
font-weight: 700;
}
.age-lista { display: grid; gap: 8px; }
.age-cita {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 12px;
padding: 11px 12px;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--panel);
/* Una franja a la izquierda dice el estado sin leer nada. */
box-shadow: inset 3px 0 0 var(--accent-ink);
transition: border-color .16s var(--ease);
}
.age-cita.is-cumplida { box-shadow: inset 3px 0 0 var(--vital); }
.age-cita.is-falto,
.age-cita.is-cancelada { box-shadow: inset 3px 0 0 var(--ink-faint); }
.age-cita.is-cancelada .age-cita__nombre { text-decoration: line-through; }
.age-cita.is-cancelada { opacity: .6; }
.age-cita__hora {
display: grid;
gap: 1px;
font-variant-numeric: tabular-nums;
}
.age-cita__hora strong { font-size: var(--t-sm); }
.age-cita__hora span { font-size: var(--t-xs); color: var(--ink-soft); }
.age-cita__quien { min-width: 0; }
.age-cita__nombre { font-size: var(--t-sm); font-weight: 600; }
.age-cita__n {
font-variant-numeric: tabular-nums;
font-size: var(--t-xs);
font-weight: 700;
color: var(--accent-ink);
letter-spacing: .04em;
margin-right: 4px;
}
.age-cita__meta {
font-size: var(--t-xs);
color: var(--ink-soft);
margin-top: 2px;
overflow-wrap: anywhere;
}
.age-cita__mandos {
grid-column: 2;
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.input--min {
width: auto;
min-width: 8.5rem;
padding-block: 5px;
font-size: var(--t-xs);
}
/* A la izquierda, como el resto del panel. Centrado quedaba descolgado del
título que tiene encima. */
.age-vacio {
padding: 18px 2px 6px;
font-size: var(--t-sm);
color: var(--ink-soft);
}
/* ---------------------------- Sin hora todavía ---------------------------- */
/* Los controles que quedaron puestos al cobrar. Van arriba del día y separados
de las citas con hora, porque no son lo mismo: una cita con hora es algo que
va a pasar; una sin hora es algo que hay que llamar para acordar. Por eso no
llevan la franja de color del estado ni el hueco de la hora a la izquierda:
no ocupan un momento del día, están esperando a ocuparlo. */
.age-pendiente-hora {
margin-bottom: 14px;
padding: 12px 13px 6px;
border: 1px dashed var(--rule);
border-radius: var(--r-sm);
background: var(--panel-2);
}
.age-pendiente-hora__t {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--t-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--ink-soft);
}
.age-pendiente-hora__n {
display: grid;
place-items: center;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 99px;
/* El mismo par que el botón sólido: acento de fondo, blanco encima. */
background: var(--accent);
color: #fff;
font-size: .66rem;
letter-spacing: 0;
}
.age-pendiente-hora__e {
margin: 4px 0 10px;
font-size: var(--t-xs);
color: var(--ink-faint);
}
.age-sinhora {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: 9px 0;
border-top: 1px solid var(--rule);
}
.age-sinhora:first-of-type { border-top: none; }
.age-sinhora__quien { min-width: 0; flex: 1 1 240px; }
.age-sinhora__mandos { display: flex; gap: 6px; flex: none; }
/* --------------------------- Lo que está por cobrar --------------------------- */
.age-cobrar__lista {
display: grid;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
overflow: hidden;
}
.age-cobrar__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--panel);
}
.age-cobrar__quien { min-width: 0; }
.age-cobrar__quien p { font-size: var(--t-sm); }
.age-cobrar__quien span {
display: block;
margin-top: 2px;
font-size: var(--t-xs);
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.age-cobrar__monto {
flex: 0 0 auto;
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--alert);
}
@media (max-width: 560px) {
.age-cita { grid-template-columns: 1fr; }
.age-cita__mandos { grid-column: 1; }
.age-dia { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.age-dia, .age-cita { transition: none; }
}
/* --------------------- Modo: historia o primera vez --------------------- */
/* Dos botones en vez de dos campos a la vez. Antes salían el buscador y el
«nombre a mano» juntos y había que adivinar cuál usar; peor todavía, con
una historia elegida seguía ahí un campo apagado que no pintaba nada. */
.age-modo {
display: inline-flex;
padding: 3px;
margin-bottom: 16px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel-2);
}
.age-modo__op {
padding: 7px 15px;
border: 0;
border-radius: 999px;
background: none;
color: var(--ink-soft);
font: inherit;
font-size: var(--t-xs);
font-weight: 600;
cursor: pointer;
transition: background .18s var(--ease), color .18s var(--ease);
}
.age-modo__op.is-on {
background: var(--panel);
color: var(--accent-ink);
box-shadow: var(--lift);
}
/* El paciente que ya viene decidido (se agenda desde su historia): se enseña,
no se ofrece cambiar. Buscar otro aquí sería agendar a quien no era. */
.age-ficha-fija {
padding: 11px 13px;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--panel-2);
font-size: var(--t-sm);
font-weight: 600;
}
/* ------------------------------ La hora ------------------------------ */
/* Dos desplegables en vez del reloj del navegador, que se ve distinto en cada
equipo y sale en inglés. De 6 a 20, y en cuartos: es el horario en que se
atiende y nadie cita a las 9:07. */
.age-hora {
display: grid;
grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr);
align-items: center;
gap: 6px;
}
.age-hora__sep {
color: var(--ink-faint);
font-weight: 700;
}
.age-hora select { min-width: 0; }
/* --------------------- Aviso de cita en Actividades --------------------- */
/* Arriba del todo, antes de las actividades: al abrir la historia lo primero
que se quiere saber es si esa persona ya tiene hora dada, para no pactarle
otra encima. */
.act-citas {
display: grid;
gap: 6px;
margin-bottom: 14px;
padding: 11px 13px;
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.act-citas__una {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--t-sm);
color: var(--ink);
}
.act-citas__punto {
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-ink);
}
/* ------------------------- Lo que queda pendiente ------------------------- */
/* Dos grupos: lo que le deben a la clínica y lo que la clínica debe. Antes
solo salía el primero y los gastos pendientes se perdían, que es justo la
mitad que se olvida pagar. */
.age-pend__grupo + .age-pend__grupo { margin-top: 18px; }
.age-pend__t {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: var(--t-eyebrow);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-soft);
}
.age-pend__cuantos {
padding: 1px 7px;
border-radius: 999px;
background: var(--panel-2);
font-size: var(--t-eyebrow);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.age-pend__lista {
display: grid;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
overflow: hidden;
}
.age-pend__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--panel);
}
.age-pend__quien { min-width: 0; }
.age-pend__quien p { font-size: var(--t-sm); }
.age-pend__quien span {
display: block;
margin-top: 2px;
font-size: var(--t-xs);
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.age-pend__mandos {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
}
.age-pend__monto {
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Lo que entra y lo que sale, con los colores que ya usa Finanzas para lo
mismo: no hay que aprender un código nuevo. */
.age-pend__monto.is-cobrar { color: var(--vital); }
.age-pend__monto.is-pagar { color: var(--alert); }
@media (max-width: 560px) {
.age-pend__fila { flex-direction: column; align-items: flex-start; gap: 8px; }
.age-pend__mandos { width: 100%; justify-content: space-between; }
}
/* ============================ Aviso de la demo ============================ */
/* Una barra fija abajo mientras se prueba la demo. Recuerda que nada se guarda
y deja salir. Va discreta —color de acento, no de alarma— porque estar en la
demo no es un error, es lo esperado. */
.demo-ribbon {
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%);
z-index: 80;
display: flex;
align-items: center;
gap: 12px;
max-width: calc(100vw - 24px);
padding: 11px 14px 11px 16px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel);
box-shadow: var(--lift-2);
font-size: var(--t-sm);
color: var(--ink-soft);
}
.demo-ribbon strong { color: var(--ink); font-weight: 600; }
.demo-ribbon__dot {
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.demo-ribbon__salir {
flex: none;
padding: 6px 12px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--panel-2);
color: var(--ink);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: border-color .16s var(--ease), color .16s var(--ease);
}
.demo-ribbon__salir:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* La equis para quitarlo de en medio. */
.demo-ribbon__cerrar {
flex: none;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--ink-faint);
cursor: pointer;
}
.demo-ribbon__cerrar:hover { background: var(--panel-2); color: var(--ink); }
.demo-ribbon__cerrar svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; }
@media (max-width: 700px) {
/* En teléfono se queda en lo justo: el punto, «Estás en la demo», salir y
la equis. La explicación larga sobra ahí — ocupaba media pantalla y
tapaba justo lo que se estaba probando. */
.demo-ribbon {
left: 12px;
right: 12px;
bottom: 12px;
transform: none;
max-width: none;
gap: 8px;
padding: 9px 8px 9px 13px;
border-radius: var(--r-sm);
font-size: var(--t-xs);
}
.demo-ribbon__largo { display: none; }
.demo-ribbon__salir { margin-left: auto; padding: 5px 10px; }
}
/* ===== Portada: odontodiagrama de muestra y etiquetas nuevas ===== */
/* Una rejilla de dientes de mentira para el mock de la historia clínica.
Reutiliza los mismos colores de las etiquetas: ámbar para caries, verde para
restauración, acento para endodoncia. */
.lp-teeth {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
margin: 4px 0 2px;
}
.lp-tooth {
aspect-ratio: 3 / 4;
border-radius: 5px;
border: 1px solid var(--rule);
background: var(--panel-2);
}
.lp-tooth--caries { background: color-mix(in srgb, var(--alert) 22%, var(--panel)); border-color: color-mix(in srgb, var(--alert) 42%, transparent); }
.lp-tooth--rest { background: color-mix(in srgb, var(--vital) 26%, var(--panel)); border-color: color-mix(in srgb, var(--vital) 45%, transparent); }
.lp-tooth--endo { background: color-mix(in srgb, var(--accent) 26%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-mock__legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* La tira de tasas del mock de finanzas. */
.lp-rate { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
/* La etiqueta "Disponible hoy" / "En camino" de cada especialidad. */
.lp-spec { position: relative; }
.lp-spec__badge {
justify-self: start;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .02em;
padding: 3px 9px;
border-radius: 999px;
color: #fff;
background: var(--accent);
}
.lp-spec__badge--soon {
color: var(--ink-soft);
background: var(--panel-2);
border: 1px solid var(--rule);
}
/* La de odontología, viva, resalta un poco sobre las demás. */
.lp-spec--live { border-color: color-mix(in srgb, var(--accent) 34%, var(--rule)); }
.lp-spec--live .lp-spec__ic { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
/* =========================== Mensualidades (admin) =========================== */
.men-cab { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.men-cab__mandos { display: flex; gap: 6px; flex-wrap: wrap; }
.men-lista { display: grid; gap: 8px; margin-top: 14px; }
.men-fila {
display: flex; flex-wrap: wrap; gap: 12px;
align-items: center; justify-content: space-between;
padding: 12px 14px;
border: 1px solid var(--rule); border-radius: var(--r-sm);
background: var(--panel);
}
.men-fila__quien { min-width: 0; flex: 1 1 260px; }
.men-fila__nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.men-fila__meta { margin-top: 3px; font-size: var(--t-xs); color: var(--ink-soft); }
.men-fila__margen { margin-left: 8px; color: #B4762A; font-weight: 600; }
.men-fila__mandos { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
/* ===================== Aviso de mensualidad al jefe ===================== */
/* Va arriba del todo y ocupa el ancho: es lo primero que tiene que ver quien
paga. Ambar, no rojo: es un recordatorio, no un error. */
.aviso-cobro {
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px;
padding: 12px 16px;
border: 1px solid color-mix(in srgb, #B4762A 40%, transparent);
border-radius: var(--r-sm);
background: color-mix(in srgb, #B4762A 10%, var(--panel));
color: var(--ink);
font-size: var(--t-sm);
}
.aviso-cobro__ic { flex: none; color: #B4762A; display: grid; place-items: center; }
/* El aviso de la demo pasa por debajo del cajón del menú y de su velo. Estaba
por encima y tapaba el «Cerrar sesión» con el menú abierto. Va aquí, al
final, porque los estilos base del aviso están más arriba en este archivo y
un media query anterior no los pisa: manda el orden, no el media query. */
@media (max-width: 860px) {
.demo-ribbon { z-index: 55; }
}
/* ==========================================================================
Condiciones de uso, presentación de bienvenida y recorrido
========================================================================== */
/* --- La página de condiciones -------------------------------------------
Es la misma placa del acceso, pero más ancha: un contrato en una columna
de 430 px son cuarenta renglones de scroll y nadie lo lee. */
.auth--ancho { padding: 28px 20px 40px; }
.auth__inner--ancho { max-width: 760px; }
.legal {
margin-top: 16px;
padding: 16px 18px;
max-height: min(50vh, 440px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--panel-2);
border: 1px solid var(--rule);
border-radius: var(--r);
font-size: var(--t-sm);
line-height: 1.62;
color: var(--ink);
}
.legal:focus-visible { outline: none; box-shadow: var(--ring); }
.legal__cargando { color: var(--ink-faint); margin: 0; }
.legal__entradilla {
margin: 0 0 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
color: var(--ink-soft);
}
.legal__bloque + .legal__bloque { margin-top: 26px; }
.legal__bloque-t {
margin: 0 0 12px;
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -.01em;
color: var(--accent-ink);
}
.legal__punto-t {
margin: 18px 0 6px;
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink);
}
.legal__bloque-t + .legal__punto-t { margin-top: 0; }
.legal__p { margin: 0 0 8px; color: var(--ink-soft); }
.legal__fin {
margin: 22px 0 0;
padding-top: 14px;
border-top: 1px solid var(--rule);
text-align: center;
font-size: var(--t-xs);
color: var(--ink-faint);
}
.legal__pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-top: 16px;
}
.legal__quien { margin: 0; font-size: var(--t-xs); color: var(--ink-faint); }
.legal__mandos { display: flex; gap: 10px; margin-left: auto; }
.legal__nota {
margin: 10px 0 0;
font-size: var(--t-xs);
color: var(--ink-faint);
text-align: right;
}
.legal__salto {
border: 0;
background: none;
padding: 0;
font: inherit;
color: var(--accent-ink);
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 640px) {
.legal { max-height: 46vh; padding: 14px; }
.legal__pie { flex-direction: column; align-items: stretch; }
.legal__mandos { margin-left: 0; }
.legal__mandos .btn { flex: 1; }
.legal__nota { text-align: left; }
}
/* --- El telón de bienvenida ---------------------------------------------
Opaco y del color del fondo: detrás se está armando el panel y no tiene
por qué verse a medio hacer. Va por encima de todo, incluso del aviso de
la demo (80) y de los diálogos (60). */
.bien {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: 24px;
background: var(--field);
opacity: 0;
transition: opacity .28s var(--ease);
}
.bien.is-dentro, .bien.is-listo { opacity: 1; }
.bien.is-saliendo { opacity: 0; transition: opacity .40s var(--ease); }
.bien__fila {
display: flex;
align-items: center;
justify-content: center;
gap: 34px;
transition: gap .55s var(--ease);
}
/* Al final las dos marcas se acercan un poco: cierra el gesto sin que haya
que mover nada de sitio. */
.bien__fila.is-junto { gap: 26px; }
.bien__parte {
display: block;
opacity: 0;
transform: translateY(10px);
transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.bien__parte.is-dentro { opacity: 1; transform: none; }
.bien__cruz { color: var(--ink-faint); }
.bien__cruz svg {
display: block;
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
}
.bien__cruz.is-dentro { transform: none; }
.bien .bien__cruz { transform: translateY(10px) scale(.6); }
.bien .bien__cruz.is-dentro { transform: none; }
/* La marca de la clínica, más grande que en la cabecera: aquí es la
protagonista y no un sello de esquina. */
.bien .marca-clinica { margin: 0; align-self: center; }
.bien .marca-clinica img { max-height: 86px; max-width: 300px; }
.bien .marca-clinica__texto { font-size: 1.5rem; text-align: left; }
.bien .mark--lg { font-size: 1.9rem; }
/* Si la persona pidió menos movimiento, la presentación es solo un fundido:
el gesto se entiende igual y nadie se marea. */
.bien.is-listo .bien__parte { opacity: 1; transform: none; transition: none; }
@media (max-width: 560px) {
.bien__fila { gap: 18px; }
.bien__fila.is-junto { gap: 14px; }
.bien .marca-clinica img { max-height: 58px; max-width: 190px; }
.bien .marca-clinica__texto { font-size: 1.15rem; }
.bien .mark--lg { font-size: 1.4rem; }
.bien__cruz svg { width: 20px; height: 20px; }
}
/* --- El recorrido por los apartados --------------------------------------
El foco es un solo elemento: la sombra enorme que lleva alrededor es la
que oscurece toda la pantalla, y el propio elemento deja limpio el trozo
que interesa. Un recorte de verdad obligaría a mantener cuatro capas
cuadradas entre sí. */
.tuto {
position: fixed;
inset: 0;
z-index: 110;
}
.tuto__foco {
position: absolute;
border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(8, 25, 42, .62),
0 0 0 2px var(--glow);
transition: top .3s var(--ease), left .3s var(--ease),
width .3s var(--ease), height .3s var(--ease);
pointer-events: none;
}
.tuto__caja {
position: absolute;
width: min(320px, calc(100vw - 28px));
padding: 16px 18px 14px;
background: var(--panel);
border: 1px solid var(--rule);
border-radius: var(--r);
box-shadow: var(--lift-2);
transition: top .3s var(--ease), left .3s var(--ease);
}
.tuto__cuenta {
margin: 0 0 6px;
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
}
.tuto__t {
margin: 0 0 6px;
font-size: var(--t-h2);
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink);
}
.tuto__texto {
margin: 0 0 14px;
font-size: var(--t-sm);
line-height: 1.55;
color: var(--ink-soft);
}
.tuto__pie {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tuto__pie-der { display: flex; gap: 8px; }
.tuto__saltar {
border: 0;
background: none;
padding: 4px 2px;
font: inherit;
font-size: var(--t-xs);
color: var(--ink-faint);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.tuto__saltar:hover { color: var(--ink-soft); }
@media (max-width: 560px) {
.tuto__caja { padding: 14px; }
}
/* --- La firma del estudio, al pie de la portada ---------------------------
Va en su propia linea y no en la fila de arriba: es una firma, no un enlace
mas del menu. Discreta a proposito — quien entra aqui viene a ver LumiMed —,
pero con el nombre compuesto como en la marca de Lumi: mayusculas muy
espaciadas y el oficio debajo, mas pequeno.
El `text-indent` compensa el espaciado que la ultima letra arrastra a su
derecha; sin el, un texto con tanto tracking se ve descentrado. */
/* La linea ocupa el ancho del pie; el enlace, solo lo que mide. Si el propio
enlace se estirara de lado a lado, pulsar en el vacio de las esquinas del
pie se llevaria a la gente a otro sitio web sin querer. */
.lp-lumi-linea {
flex-basis: 100%;
margin-top: 6px;
padding-top: 22px;
border-top: 1px solid var(--rule);
text-align: center;
}
.lp-lumi {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--ink-faint);
text-decoration: none;
transition: color .18s var(--ease);
}
.lp-lumi__por { font-size: var(--t-xs); }
.lp-lumi__marca { display: grid; justify-items: center; gap: 3px; line-height: 1; }
.lp-lumi__nombre {
font-size: .95rem;
font-weight: 500;
letter-spacing: .34em;
text-indent: .34em;
text-transform: uppercase;
color: var(--ink);
transition: color .18s var(--ease);
}
.lp-lumi__sub {
font-size: .5rem;
letter-spacing: .22em;
text-indent: .22em;
text-transform: uppercase;
color: var(--ink-faint);
}
.lp-lumi:hover { color: var(--ink-soft); }
.lp-lumi:hover .lp-lumi__nombre { color: var(--accent-ink); }
@media (max-width: 620px) {
.lp-lumi { gap: 9px; }
.lp-lumi__nombre { font-size: .85rem; letter-spacing: .28em; text-indent: .28em; }
}