/* =========================================================================
lc-btn · Botón
-------------------------------------------------------------------------
Átomo. Sale de base/base.css el 2026-08-31 (hallazgo #3 del inventario:
«hay seis definiciones del mismo botón» — el censo real encontró ~15).
JERARQUÍA fijada por Sergio el 2026-08-31:
· --primary azul primary sólido, label blanco → la acción principal
· --outline borde y label azul, fondo transparente → la secundaria
· --inverted fondo blanco, label azul primary → primaria sobre oscuro
· --hero rojo de marca — ÚNICAMENTE en banners hero
El rojo lleva el nombre del sitio donde puede usarse, no el de su papel,
a propósito: así la regla no se puede olvidar al escribir la clase.
API:
Agenda tu cita
Tamaño y variante son ejes independientes: cualquier --sm/--lg combina con
cualquier variante de color.
RESPUESTA TÁCTIL, igual para todas: hover eleva (sombra), :active hunde
(scale .97). Sobre oscuro la sombra se apaga, porque no se vería.
========================================================================= */
.lc-btn {
/* ── API local ──────────────────────────────────────────────────────────
La altura manda y el padding vertical es 0: el texto se centra con
inline-flex. Es más robusto que calcular padding, porque un botón con
dos líneas o con ícono no se deforma.
Alturas tomadas del código, no inventadas: 42 es la barra del header,
48 el hero, 56 areas/donar. Antes había cinco (42·48·54·56·58); las de
54 y 58 caen a 56, una diferencia de 2px. */
--btn-height: 48px;
--btn-pad-x: 28px;
--btn-radius: var(--lc-radius-base);
--btn-bg: transparent;
--btn-color: var(--lc-brand-primary);
--btn-border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--lc-space-xs); /* separación si lleva ícono */
min-height: var(--btn-height);
padding-block: 0;
padding-inline: var(--btn-pad-x);
box-sizing: border-box;
font-family: var(--lc-font-body);
font-size: var(--lc-size-btn-lg);
font-weight: var(--lc-fw-bold);
line-height: var(--lc-lh-body);
letter-spacing: var(--lc-ls-btn);
text-align: center;
text-decoration: none; /* casi siempre es un */
white-space: nowrap;
background: var(--btn-bg);
color: var(--btn-color);
border: 1px solid var(--btn-border);
border-radius: var(--btn-radius);
cursor: pointer;
transition: filter .2s ease, background .2s ease, color .2s ease,
border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
/* ── Respuesta táctil ───────────────────────────────────────────────────────
Entran al canon el 2026-09-04 (hallazgo 31). No son un adorno nuevo: los
traían 8 de los 11 botones propios (la sombra) y 4 (el press), cada uno por
su cuenta y ya divergiendo — dos copias del mismo botón «ver todos» y una
tenía sombra y la otra no. Aquí valen para todas las variantes y tamaños.
El press es el de Button.jsx de React (scale .97), que ya lo tenía: con esto
el átomo se comporta igual en los dos stacks, que era una de las diferencias
HTML↔React pendientes. */
.lc-btn:hover { box-shadow: var(--lc-shadow-btn); }
.lc-btn:active {
transform: scale(0.97) translateY(1px);
box-shadow: 0 2px 6px rgba(0, 45, 114, 0.25);
}
/* Sobre oscuro la sombra azul no se ve y el halo ensucia el borde blanco. */
.lc-btn--inverted:hover,
.lc-btn--inverted-outline:hover { box-shadow: none; }
/* Quien no quiere moverse tampoco se mueve aquí. */
@media (prefers-reduced-motion: reduce) {
.lc-btn { transition: none; }
.lc-btn:active { transform: none; }
}
.lc-btn:focus-visible {
outline: 2px solid var(--lc-brand-primary);
outline-offset: 2px;
}
.lc-btn:disabled,
.lc-btn[aria-disabled="true"] {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
/* =========================================================================
Tamaños · alto + aire lateral. Nada más cambia entre ellos.
========================================================================= */
/* Para barras compactas: es la altura exacta del botón del header. */
.lc-btn--sm { --btn-height: 42px; --btn-pad-x: 16px; }
/* Para llamadas destacadas: areas, donar, el buscador del directorio. */
.lc-btn--lg { --btn-height: 56px; --btn-pad-x: 30px; }
/* =========================================================================
Variantes · SOBRE FONDO CLARO
========================================================================= */
/* La acción principal. */
.lc-btn--primary {
--btn-bg: var(--lc-brand-primary);
--btn-color: var(--lc-text-on-brand);
--btn-border: var(--lc-brand-primary);
}
.lc-btn--primary:hover { --btn-bg: var(--lc-brand-primary-hover); --btn-border: var(--lc-brand-primary-hover); }
.lc-btn--primary:active { --btn-bg: var(--lc-brand-primary-active); --btn-border: var(--lc-brand-primary-active); }
/* La secundaria. Mismo peso visual de forma, menos de color. */
.lc-btn--outline {
--btn-bg: transparent;
--btn-color: var(--lc-brand-primary);
--btn-border: var(--lc-brand-primary);
}
.lc-btn--outline:hover {
--btn-bg: var(--lc-brand-primary);
--btn-color: var(--lc-text-on-brand);
}
/* ⚠️ SOLO EN BANNERS HERO. El rojo es el color de máxima atención de la
marca; fuera del hero compite con todo y deja de significar nada. Para
cualquier otra acción principal va --primary. */
.lc-btn--hero {
--btn-bg: var(--lc-brand-secondary);
--btn-color: var(--lc-text-on-brand);
--btn-border: var(--lc-brand-secondary);
}
.lc-btn--hero:hover { --btn-bg: var(--lc-brand-secondary-hover); --btn-border: var(--lc-brand-secondary-hover); }
/* =========================================================================
Variantes · SOBRE FONDO OSCURO (bandas azules, heros con foto)
========================================================================= */
/* La primaria invertida: fondo blanco, label azul primary. */
.lc-btn--inverted {
--btn-bg: var(--lc-bg-surface);
--btn-color: var(--lc-brand-primary);
--btn-border: var(--lc-bg-surface);
}
.lc-btn--inverted:hover { filter: brightness(0.94); }
/* La secundaria invertida: el reverso de --outline sobre oscuro. No estaba
en la lista de Sergio, pero existe en el código (el ghost blanco del hero
y el botón de WhatsApp de la agenda) y es la pareja natural de --inverted:
sin ella, una banda oscura no tiene acción secundaria. */
.lc-btn--inverted-outline {
--btn-bg: transparent;
--btn-color: var(--lc-text-on-brand);
--btn-border: var(--lc-text-on-brand);
}
.lc-btn--inverted-outline:hover {
--btn-bg: var(--lc-text-on-brand);
--btn-color: var(--lc-brand-primary);
}
.lc-btn--inverted:focus-visible,
.lc-btn--inverted-outline:focus-visible {
outline-color: var(--lc-text-on-brand);
}
/* =========================================================================
Las dos excepciones que Sergio admitió en el canon (2026-09-02)
El inventario encontró tres botones que no cabían (hallazgo 9). Dos son
excepciones legítimas y entran aquí con nombre propio; la tercera —la
píldora de lc-agenda— era un mal uso y se normalizó al radio de todos.
========================================================================= */
/* --donate · el CTA de donación de la Fundación. Outline rojo, y el rojo solo
vivía en banners hero: es la excepción de marca, no una divergencia. Era
.lc-btn-dona, suelto en el header de la Fundación. Sus medidas ya eran las
de --sm (42px de alto, 16px de padding), así que se compone: lc-btn--sm. */
.lc-btn--donate {
--btn-bg: var(--lc-bg-surface);
--btn-color: var(--lc-brand-secondary);
--btn-border: var(--lc-brand-secondary);
}
.lc-btn--donate:hover { --btn-bg: var(--lc-red-50); }
.lc-btn--donate:focus-visible { outline-color: var(--lc-brand-secondary); }
/* --joined · el botón pegado a un input, que pierde el radio del lado que
toca. No es una piel distinta: es composición, y por eso no toca ni el
color ni el tamaño. Era el radius: 0 6px 6px 0 escrito a mano en el
buscador del directorio. */
.lc-btn--joined {
border-start-start-radius: 0;
border-end-start-radius: 0;
}