/* Piezas que comparten el panel y la página del superusuario: botones,
   avisos y etiquetas de estado. Va después de tokens.css y antes de la
   hoja de cada página. */

/* ============ BOTONES ============ */
.btn-borde,
.btn-lleno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--alto-toque);
    padding: 8px 20px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--color-primario);
    font-family: inherit;
    font-size: var(--tamanio-texto-base);
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-borde {
    background: transparent;
    color: var(--color-texto);
    font-weight: 500;
}

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

.btn-lleno {
    background: var(--color-primario);
    color: var(--color-sobre-primario);
    font-weight: 600;
}

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

/* Más angosto y con letra más chica, pero igual de alto: se toca con el dedo. */
.btn-chico { padding: 6px 14px; font-size: var(--tamanio-texto-sm); }

.btn-borde:disabled,
.btn-lleno:disabled { opacity: 0.55; cursor: default; }
.btn-borde:disabled:hover { background: transparent; }
.btn-lleno:disabled:hover { background: var(--color-primario); }

/* ============ AVISOS ============ */
.aviso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
    padding: var(--espaciado-md) 18px;
    border-radius: var(--radio-md);
    border: 1px solid var(--color-primario);
    background: var(--color-primario-suave);
    font-size: var(--tamanio-texto-sm);
}

.aviso[hidden] { display: none; }   /* el display: flex le ganaba a hidden */
.aviso.error { border-color: var(--color-error); background: var(--color-error-suave); }
.aviso.atencion { border-color: var(--color-atencion); background: var(--color-atencion-suave); }

/* ============ ETIQUETAS DE ESTADO ============ */
.estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radio-pill);
    font-size: var(--tamanio-texto-xs);
    font-weight: 500;
}

.estado.ok { background: var(--color-primario-suave); color: var(--color-primario); }
.estado.medio { background: var(--color-atencion-suave); color: var(--color-atencion); }
.estado.bajo { background: var(--color-error-suave); color: var(--color-error); }
.estado.neutro { background: var(--color-neutro-suave); color: var(--color-texto-2); }