/* ============================================================
Dentalplus · componentes.css
Convención de nombres: bloque, bloque--variante, bloque__parte.
Sin utilidades tipo framework: cada componente es una clase.
Ningún color de marca escrito a mano; todo sale de los tokens.
============================================================ */
/* ============ BOTONES ============ */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
min-height: var(--toque-min);
padding: 0 var(--e-5);
border: 1px solid transparent;
border-radius: var(--r-md);
font: var(--peso-semi) var(--txt-base)/1 var(--fuente);
text-decoration: none;
white-space: nowrap;
transition: background var(--t-media) var(--curva),
border-color var(--t-media) var(--curva),
color var(--t-media) var(--curva);
}
.boton svg { width: 1.15em; height: 1.15em; stroke-width: 1.8; }
.boton--primario { background: var(--color-primario); color: var(--texto-sobre-primario); }
.boton--primario:hover { background: var(--primario-hover); }
.boton--primario:active { background: var(--primario-activo); }
.boton--secundario { background: transparent; border-color: var(--primario-borde); color: var(--primario-texto); }
.boton--secundario:hover { background: var(--primario-tenue); }
.boton--terciario { background: transparent; color: var(--primario-texto); padding: 0 var(--e-3); text-decoration: underline; text-underline-offset: 3px; }
.boton--terciario:hover { background: var(--primario-tenue); text-decoration: none; }
/* `boton--fantasma` SE USABA EN DOS VISTAS Y NO EXISTÍA AQUÍ.
Sin la regla, el botón «Limpiar» del área de firma se quedaba con el
`.boton` base —fondo claro heredado, texto claro— y en modo oscuro resultaba
ILEGIBLE: se leía como un rectángulo vacío. Está en la pantalla de firma del
médico y también en la que se le pasa al paciente, que es la que ve alguien
de fuera de la clínica.
Es el mismo defecto que `csrfInput()` y que `Flash::exito()`: un nombre que
no existe. La diferencia es que en PHP eso da un error 500 y aquí no da nada
—el navegador ignora una clase desconocida en silencio— así que sobrevive
hasta que alguien mira la pantalla. De aquí nace la séptima capa. */
.boton--fantasma { background: transparent; color: var(--texto-suave); }
.boton--fantasma:hover { background: var(--superficie-2); color: var(--texto-fuerte); }
.boton--peligro { background: var(--error); color: #fff; }
.boton--peligro:hover { background: color-mix(in oklab, var(--error) 85%, black); }
.boton--peligro-suave { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); }
/* `boton--sm` se usaba en 17 sitios y tampoco existía. Los botones pequeños
—«Deshacer», «Limpiar», las acciones dentro de una tabla— salían del tamaño
completo, empujando la maquetación de las filas. No se reduce la altura por
debajo de 36 px: por debajo de eso un dedo falla el objetivo, y estas
pantallas se usan en celular. */
/* Caja para MOSTRAR una firma ya guardada.
El fondo es blanco fijo, no `var(--superficie-2)`, y es a propósito. La firma
se guarda como PNG transparente con el trazo en negro, porque está pensada
para imprimirse sobre papel. Puesta sobre el fondo oscuro del tema, el trazo
negro sobre azul oscuro DESAPARECÍA: la pantalla decía «Firma guardada
correctamente» y debajo se veía un rectángulo vacío. El médico no tenía forma
de saber si su firma se había guardado bien.
La previsualización tiene que enseñar lo que se va a imprimir, y lo que se va
a imprimir va sobre papel blanco. */
.firma-vista {
background: #fff;
border: 1px solid var(--borde);
border-radius: var(--r-md);
padding: var(--e-4);
display: inline-block;
margin-top: var(--e-3);
}
.firma-vista img { display: block; }
.boton--sm { min-height: 36px; padding: 0 var(--e-4); font-size: var(--txt-sm); }
.boton--sm svg { width: 1em; height: 1em; }
.boton--icono { width: var(--toque-min); padding: 0; }
.boton--icono svg { width: 20px; height: 20px; }
.boton--flotante {
position: fixed;
right: var(--e-4);
bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
width: 56px; height: 56px;
padding: 0;
border-radius: var(--r-full);
background: var(--color-primario);
color: var(--texto-sobre-primario);
box-shadow: var(--sombra-3);
z-index: var(--z-sticky);
}
/* Solo móvil: en escritorio la acción vive en la barra superior */
@media (min-width: 1024px) { .boton--flotante { display: none; } }
.boton:disabled, .boton[aria-disabled="true"] {
background: var(--superficie-3);
border-color: transparent;
color: var(--texto-suave);
}
/* Estado cargando: el ancho no cambia, para que el botón no salte */
.boton[data-cargando]::before {
content: "";
width: 1em; height: 1em;
border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
border-top-color: currentColor;
border-radius: var(--r-full);
animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
/* ============ CAMPOS ============ */
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo__etiqueta { font: var(--peso-medio) var(--txt-sm)/1 var(--fuente); color: var(--texto-medio); }
.campo__control {
/* Un sin `width` mide lo que diga su atributo `size`, unos 200 px,
y NO se estira. Dentro de un `.campo` —que es flex en columna— el input se
estiraba por ser hijo directo, así que el fallo no se veía… hasta que el
buscador de medicamentos metió el input dentro de un `
` para colgar las sugerencias. Entonces el que se estira
es el div y el input se queda en 200 px: el campo MÁS importante de la
receta era el más estrecho de la pantalla, y cortaba el nombre del
medicamento a media palabra. Se declara aquí y deja de depender de dónde
esté anidado. `box-sizing: border-box` es global (base.css), así que el
100 % incluye borde y relleno. */
width: 100%;
min-height: var(--toque-min);
padding: 0 var(--e-3);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r-md);
background: var(--superficie);
color: var(--texto-fuerte);
transition: border-color var(--t-media) var(--curva), box-shadow var(--t-media) var(--curva);
}
textarea.campo__control { min-height: 88px; padding: var(--e-3); line-height: var(--alt-comoda); resize: vertical; }
.campo__control:focus-visible { border-color: var(--color-primario); box-shadow: var(--anillo-foco); }
.campo__control[aria-invalid="true"] { border-color: var(--error); background: var(--error-suave); }
.campo__ayuda { font: var(--peso-normal) var(--txt-xs)/1.45 var(--fuente); color: var(--texto-suave); }
.campo__error {
display: flex; align-items: flex-start; gap: var(--e-2);
font: var(--peso-medio) var(--txt-xs)/1.45 var(--fuente);
color: var(--error);
}
/* Moneda: prefijo fijo y cifra alineada a la derecha */
.campo--moneda .campo__grupo { display: flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); overflow: hidden; }
.campo--moneda .campo__prefijo { padding: 0 var(--e-3); background: var(--superficie-2); border-right: 1px solid var(--borde); color: var(--texto-suave); font-family: var(--fuente-mono); line-height: var(--toque-min); }
.campo--moneda input { flex: 1; min-height: var(--toque-min); border: none; background: transparent; text-align: right; font: var(--peso-medio) var(--txt-lg)/1 var(--fuente-mono); font-variant-numeric: tabular-nums; }
.casilla, .radio, .interruptor { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--toque-min); cursor: pointer; }
.casilla input, .radio input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primario); flex: none; }
.zona-soltar {
display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
padding: var(--e-6) var(--e-5);
border: 2px dashed var(--borde-fuerte);
border-radius: var(--r-lg);
background: var(--superficie);
text-align: center;
}
.zona-soltar[data-arrastrando] { border-color: var(--color-primario); background: var(--primario-suave); }
/* ============ TARJETAS ============ */
.tarjeta {
border: 1px solid var(--borde);
border-radius: var(--r-lg);
background: var(--superficie);
box-shadow: var(--sombra-1);
padding: var(--e-5);
display: flex;
flex-direction: column;
gap: var(--e-3);
}
.tarjeta--acento { border-left: 4px solid var(--color-primario); }
.tarjeta--pago { border-color: var(--exito-borde); background: var(--exito-suave); }
.tarjeta__titulo { font: var(--peso-semi) var(--txt-lg)/1.25 var(--fuente); }
.tarjeta__pie { padding-top: var(--e-3); border-top: 1px solid var(--borde); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
/* ============ TABLA QUE SE VUELVE TARJETAS ============
El contenedor declara el contexto; la tabla reacciona a SU ancho,
no al de la ventana, así funciona igual dentro de un drawer. */
.tabla-envoltura { container-type: inline-size; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
text-align: left;
padding: var(--e-3) var(--e-4);
background: var(--superficie-2);
font: var(--peso-medio) var(--txt-xs)/1.3 var(--fuente);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--texto-suave);
}
.tabla td { padding: var(--e-4); border-top: 1px solid var(--borde); }
.tabla tbody tr:hover { background: var(--primario-tenue); }
.tabla .num { text-align: right; }
@container (max-width: 639px) {
.tabla thead { display: none; }
.tabla tr {
display: grid;
gap: var(--e-2);
padding: var(--e-4);
margin-bottom: var(--e-3);
border: 1px solid var(--borde);
border-radius: var(--r-lg);
background: var(--superficie);
}
.tabla td { display: flex; justify-content: space-between; gap: var(--e-3); padding: 0; border: none; }
/* La etiqueta viene del atributo, no de markup duplicado */
.tabla td::before {
content: attr(data-etiqueta);
font: var(--peso-medio) var(--txt-xs)/1.4 var(--fuente);
color: var(--texto-suave);
}
.tabla td[data-principal] { font: var(--peso-semi) var(--txt-lg)/1.3 var(--fuente); }
.tabla td[data-principal]::before { content: none; }
.tabla .num { text-align: left; }
}
/* ============ NAVEGACIÓN ============ */
.migas { display: flex; align-items: center; gap: var(--e-2); font-size: var(--txt-sm); }
.migas a { text-decoration: none; }
.migas [aria-current="page"] { color: var(--texto-medio); }
.pestanas { display: flex; gap: var(--e-1); overflow-x: auto; border-bottom: 1px solid var(--borde); }
.pestanas__item {
min-height: 48px;
padding: 0 var(--e-4);
display: flex; align-items: center;
border: none; background: transparent;
color: var(--texto-suave);
font: var(--peso-normal) var(--txt-base)/1 var(--fuente);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
}
.pestanas__item[aria-selected="true"] { color: var(--primario-texto); font-weight: var(--peso-semi); border-bottom-color: var(--color-primario); }
.acordeon__disparador {
width: 100%; min-height: 52px; padding: 0 var(--e-4);
display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
border: none; background: var(--superficie);
font: var(--peso-semi) var(--txt-base)/1 var(--fuente);
text-align: left;
}
.acordeon__disparador svg { transition: transform var(--t-media) var(--curva); }
.acordeon__disparador[aria-expanded="true"] svg { transform: rotate(180deg); }
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.paginacion__pagina { min-width: var(--toque-min); height: var(--toque-min); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); font-family: var(--fuente-mono); }
.paginacion__pagina[aria-current="page"] { border-color: transparent; background: var(--color-primario); color: var(--texto-sobre-primario); font-weight: var(--peso-semi); }
/* ============ SUPERPOSICIONES ============ */
.velo { position: fixed; inset: 0; background: color-mix(in oklab, var(--n-950) 55%, transparent); }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--e-6); }
.modal__caja { width: 100%; max-width: 460px; border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-4); overflow: hidden; animation: entrar var(--t-media) var(--curva); }
.modal__pie { padding: var(--e-5); background: var(--superficie-2); display: flex; gap: var(--e-3); justify-content: flex-end; flex-wrap: wrap; }
.panel { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end; }
.panel__caja { width: min(420px, 100%); height: 100%; background: var(--superficie); box-shadow: var(--sombra-3); display: flex; flex-direction: column; animation: deslizar var(--t-lenta) var(--curva); }
/* En móvil el panel sube desde abajo, al alcance del pulgar */
@media (max-width: 639px) {
.panel { align-items: flex-end; }
.panel__caja { width: 100%; height: auto; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; animation: subir var(--t-lenta) var(--curva); }
}
.popover { position: absolute; min-width: 210px; padding: var(--e-2); border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); box-shadow: var(--sombra-2); z-index: var(--z-menu); }
.popover__item { width: 100%; min-height: 40px; padding: 0 var(--e-3); border: none; border-radius: var(--r-sm); background: transparent; text-align: left; }
.popover__item:hover { background: var(--superficie-2); }
.globo { padding: var(--e-2) var(--e-3); border-radius: var(--r-md); background: var(--n-900); color: var(--n-0); font-size: var(--txt-xs); box-shadow: var(--sombra-2); }
.toast { position: fixed; right: var(--e-6); bottom: var(--e-6); z-index: var(--z-toast); display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-radius: var(--r-lg); background: var(--n-900); color: var(--n-0); box-shadow: var(--sombra-4); animation: entrar var(--t-media) var(--curva); }
@media (max-width: 639px) { .toast { left: var(--e-4); right: var(--e-4); bottom: calc(var(--e-4) + env(safe-area-inset-bottom)); } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes deslizar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes subir { from { transform: translateY(24px); } to { transform: none; } }
/* ============ AVISOS Y BADGES ============ */
/* El icono se posiciona y el contenido fluye como texto normal.
Antes esto era `display:flex`, y entonces CADA hijo suelto del bloque
—cada , cada trozo de texto— se convertía en una columna del flex:
el aviso legal de las plantillas se partía en tres columnas absurdas. Con
flex, una alerta solo se veía bien si alguien recordaba envolver todo el
contenido en un