/* Base del sistema. Ningun color literal: todo sale de las variables que
   ThemeService inyecta en :root por tenant. */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fuente-texto);
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
}

h1,
h2,
h3 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.15;
}

a {
    color: var(--primario);
}

.superficie {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--radio);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.12s ease;
    min-height: 44px; /* area tactil accesible */
}

.btn--primario {
    background: var(--primario);
    color: var(--primario-texto);
}

.btn--primario:hover {
    background: var(--primario-hover);
}

.btn--fantasma {
    background: transparent;
    color: var(--primario);
    border: 1px solid var(--borde);
}

.btn:active {
    transform: scale(0.985);
}

.btn:focus-visible {
    outline: 2px solid var(--primario);
    outline-offset: 3px;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--superficie-alta);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-family: inherit;
    font-size: 16px; /* 16px evita el zoom automatico en iOS */
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primario);
    outline-offset: 1px;
    border-color: var(--primario);
}

::placeholder {
    color: var(--texto-tenue);
}

.texto-suave {
    color: var(--texto-suave);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge--exito {
    background: var(--exito);
    color: var(--primario-texto);
}

.badge--alerta {
    background: var(--alerta);
    color: var(--primario-texto);
}

.badge--error {
    background: var(--error);
    color: var(--primario-texto);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}